@hero-design/rn 8.42.3 → 8.43.0

package/lib/index.js

@@ -2003,8 +2003,7 @@ var getButtonTheme = function getButtonTheme(theme) {
     buttonPadding: theme.space.medium,
     textButtonPadding: theme.space.smallMedium,
     iconPadding: theme.space.smallMedium,
-    utilityPadding: theme.space.small,
-    loadingIndicatorWrapperVerticalPadding: theme.space.xxsmall / 2
+    utilityPadding: theme.space.small
   };
   var sizes = {
     iconSize: theme.fontSizes.xxlarge
@@ -2197,6 +2196,44 @@ var getCheckboxTheme = function getCheckboxTheme(theme) {
   };
 };
 
+var getChipTheme = function getChipTheme(theme) {
+  var colors = {
+    primaryBackground: theme.colors.darkGlobalSurface,
+    secondaryBackground: theme.colors.highlightedSurface,
+    filledBackground: theme.colors.defaultGlobalSurface,
+    outlinedBackground: 'transparent',
+    wrapperBorder: theme.colors.primaryOutline,
+    wrapperSelectedBorder: 'transparent',
+    selectedPrimaryText: theme.colors.defaultGlobalSurface
+  };
+  var space = {
+    wrapperHorizontalPadding: theme.space.smallMedium,
+    wrapperVerticalPadding: theme.space.small,
+    iconWrapperMarginRight: theme.space.small
+  };
+  var sizes = {
+    wrapperBorder: theme.borderWidths.base
+  };
+  var radii = {
+    wrapper: theme.radii.rounded
+  };
+  var borderWidths = {
+    wrapper: theme.borderWidths.base,
+    icon: theme.borderWidths.medium
+  };
+  var shadows = {
+    filledWrapper: theme.shadows["default"]
+  };
+  return {
+    colors: colors,
+    space: space,
+    sizes: sizes,
+    radii: radii,
+    borderWidths: borderWidths,
+    shadows: shadows
+  };
+};
+
 var getContentNavigatorTheme = function getContentNavigatorTheme(theme) {
   var space = {
     valueHorizontalPadding: theme.space.small
@@ -3349,6 +3386,7 @@ var getTheme$1 = function getTheme() {
       carousel: getCarouselTheme(globalTheme),
       cardCarousel: getCardCarouselTheme(globalTheme),
       checkbox: getCheckboxTheme(globalTheme),
+      chip: getChipTheme(globalTheme),
       contentNavigator: getContentNavigatorTheme(globalTheme),
       datePicker: getDatePickerTheme(globalTheme),
       divider: getDividerTheme(globalTheme),
@@ -6402,7 +6440,7 @@ var StyledText$3 = index$a(reactNative.Text)(function (_ref) {
   });
 });
 
-var _excluded$z = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
+var _excluded$A = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -6415,7 +6453,7 @@ var Text = function Text(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$z);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$A);
   useDeprecation('Typography.Text is deprecated and will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.');
   return /*#__PURE__*/React__default["default"].createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
@@ -6445,7 +6483,7 @@ var StyledCaption = index$a(reactNative.Text)(function (_ref) {
   };
 });
 
-var _excluded$y = ["children", "fontWeight", "intent", "allowFontScaling"];
+var _excluded$z = ["children", "fontWeight", "intent", "allowFontScaling"];
 var Caption = function Caption(_ref) {
   var children = _ref.children,
     _ref$fontWeight = _ref.fontWeight,
@@ -6454,7 +6492,7 @@ var Caption = function Caption(_ref) {
     intent = _ref$intent === void 0 ? 'body' : _ref$intent,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$y);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$z);
   return /*#__PURE__*/React__default["default"].createElement(StyledCaption, _extends$1({}, nativeProps, {
     themeFontWeight: fontWeight,
     themeIntent: intent,
@@ -6462,7 +6500,7 @@ var Caption = function Caption(_ref) {
   }), children);
 };
 
-var StyledLabel$1 = index$a(reactNative.Text)(function (_ref) {
+var StyledLabel$2 = index$a(reactNative.Text)(function (_ref) {
   var themeIntent = _ref.themeIntent,
     theme = _ref.theme;
   return {
@@ -6473,15 +6511,15 @@ var StyledLabel$1 = index$a(reactNative.Text)(function (_ref) {
   };
 });
 
-var _excluded$x = ["children", "intent", "allowFontScaling"];
+var _excluded$y = ["children", "intent", "allowFontScaling"];
 var Label = function Label(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'body' : _ref$intent,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$x);
-  return /*#__PURE__*/React__default["default"].createElement(StyledLabel$1, _extends$1({}, nativeProps, {
+    nativeProps = _objectWithoutProperties(_ref, _excluded$y);
+  return /*#__PURE__*/React__default["default"].createElement(StyledLabel$2, _extends$1({}, nativeProps, {
     themeIntent: intent,
     allowFontScaling: allowFontScaling
   }), children);
@@ -6501,7 +6539,7 @@ var StyledTitle$1 = index$a(reactNative.Text)(function (_ref) {
   };
 });
 
-var _excluded$w = ["children", "intent", "allowFontScaling", "level", "typeface"];
+var _excluded$x = ["children", "intent", "allowFontScaling", "level", "typeface"];
 var Title = function Title(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -6512,7 +6550,7 @@ var Title = function Title(_ref) {
     level = _ref$level === void 0 ? 'h1' : _ref$level,
     _ref$typeface = _ref.typeface,
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$w);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$x);
   return /*#__PURE__*/React__default["default"].createElement(StyledTitle$1, _extends$1({}, nativeProps, {
     themeLevel: level,
     themeTypeface: typeface,
@@ -6547,7 +6585,7 @@ var StyledBody = index$a(reactNative.Text)(function (_ref) {
   };
 });
 
-var _excluded$v = ["children", "intent", "allowFontScaling", "typeface", "variant"];
+var _excluded$w = ["children", "intent", "allowFontScaling", "typeface", "variant"];
 var Body = function Body(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -6558,7 +6596,7 @@ var Body = function Body(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'regular' : _ref$variant,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$v);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$w);
   return /*#__PURE__*/React__default["default"].createElement(StyledBody, _extends$1({}, nativeProps, {
     themeTypeface: typeface,
     themeIntent: intent,
@@ -6576,7 +6614,7 @@ var Typography = {
 };
 
 // 🔴 DO NOT EDIT — This file is generated automatically.
-var IconList = ['activate', 'add-emoji', 'add-person', 'adjustment', 'alignment', 'antenna', 'archive', 'assignment-warning', 'bank', 'bell', 'billing', 'bolt', 'bookmark-added', 'bookmark', 'box-check', 'box', 'bpay', 'buildings', 'cake', 'calendar-clock', 'calendar', 'candy-box-menu', 'caret-down-small', 'caret-down', 'caret-left-small', 'caret-left', 'caret-right-small', 'caret-right', 'caret-up-small', 'caret-up', 'check-radio', 'circle-add', 'circle-cancel', 'circle-check', 'circle-down', 'circle-info', 'circle-left', 'circle-ok', 'circle-pencil', 'circle-question', 'circle-remove', 'circle-right', 'circle-up', 'circle-warning', 'clock-3', 'clock', 'cloud-download', 'cloud-upload', 'cog', 'coin', 'contacts', 'credit-card', 'diamond', 'direction-arrows', 'directory', 'document', 'dollar-coin-shine', 'double-buildings', 'edit-template', 'envelope', 'exclude', 'expense', 'eye-circle', 'eye-invisible', 'eye', 'face-meh', 'face-sad', 'face-smiley', 'feed', 'feedbacks', 'file-certified', 'file-clone', 'file-copy', 'file-csv', 'file-dispose', 'file-doc', 'file-excel', 'file-export', 'file-lock', 'file-pdf', 'file-powerpoint', 'file-search', 'file-secured', 'file-sheets', 'file-slide', 'file-verified', 'file-word', 'file', 'filter', 'folder-user', 'folder', 'format-bold', 'format-heading1', 'format-heading2', 'format-italic', 'format-list-bulleted', 'format-list-numbered', 'format-underlined', 'funnel-filter', 'global-dollar', 'globe', 'graduation-cap', 'graph', 'happy-sun', 'health-bag', 'heart', 'home', 'image', 'import', 'incident-siren', 'instapay', 'list', 'loading-2', 'loading', 'location', 'lock', 'looks-one', 'looks-two', 'media-content', 'menu', 'money-notes', 'moneybag', 'moon', 'multiple-stars', 'multiple-users', 'node', 'open-folder', 'paperclip', 'payment-summary', 'pencil', 'phone', 'piggy-bank', 'plane-up', 'plane', 'play-circle', 'print', 'raising-hands', 'reply-arrow', 'reply', 'reschedule', 'rostering', 'save', 'schedule-send', 'schedule', 'search-person', 'send', 'speaker-active', 'speaker', 'star-award', 'star-badge', 'star-circle', 'star-medal', 'star', 'steps-circle', 'stopwatch', 'suitcase', 'surfing', 'survey', 'swag-pillar-benefit', 'swag-pillar-career', 'swag-pillar-money', 'swag-pillar-work', 'swag', 'switch', 'tag', 'target', 'teams', 'timesheet', 'touch-id', 'trash-bin', 'unlock', 'user', 'video-1', 'video-2', 'wallet', 'warning', 'activate-outlined', 'add-credit-card-outlined', 'add-person-outlined', 'add-section-outlined', 'add-time-outlined', 'add', 'adjustment-outlined', 'ai-outlined', 'alignment-2-outlined', 'alignment-outlined', 'all-caps', 'arrow-down', 'arrow-downwards', 'arrow-left', 'arrow-leftwards', 'arrow-right', 'arrow-rightwards', 'arrow-up', 'arrow-upwards', 'article-outlined', 'at-sign', 'auto-graph-outlined', 'beer-outlined', 'bell-active-outlined', 'bell-outlined', 'bell-slash-outlined', 'billing-outlined', 'body-outlined', 'bold', 'bolt-outlined', 'book-outlined', 'bookmark-added-outlined', 'bookmark-outlined', 'box-check-outlined', 'box-outlined', 'bullet-points', 'cake-outlined', 'calendar-dates-outlined', 'calendar-star-outlined', 'call-outlined', 'call-split-outlined', 'camera-outlined', 'cancel', 'car-forward-outlined', 'charging-station-outlined', 'chat-bubble-outlined', 'chat-unread-outlined', 'checkmark', 'circle-add-outlined', 'circle-cancel-outlined', 'circle-down-outlined', 'circle-info-outlined', 'circle-left-outlined', 'circle-ok-outlined', 'circle-question-outlined', 'circle-remove-outlined', 'circle-right-outlined', 'circle-up-outlined', 'circle-warning-outlined', 'clock-2-outlined', 'clock-outlined', 'cog-outlined', 'coin-outlined', 'coin-super-outlined', 'comment-outlined', 'contacts-outlined', 'contacts-user-outlined', 'credit-card-outlined', 'cup-outlined', 'dentistry-outlined', 'direction-arrows-outlined', 'directory-outlined', 'document-outlined', 'dollar-box-outlined', 'dollar-card-outlined', 'dollar-coin-shine-outlined', 'dollar-credit-card-outlined', 'dollar-sign', 'double-buildings-outlined', 'double-left-arrows', 'double-right-arrows', 'download-box-outlined', 'download-outlined', 'edit-template-outlined', 'email-outlined', 'enter-arrow', 'envelope-outlined', 'expense-outlined', 'explore-outlined', 'extension-outlined', 'external-link', 'eye-invisible-outlined', 'eye-outlined', 'face-id', 'face-meh-outlined', 'face-open-smiley-outlined', 'face-sad-outlined', 'face-smiley-outlined', 'fastfood-outlined', 'feed-outlined', 'file-certified-outlined', 'file-clone-outlined', 'file-copy-outlined', 'file-dispose-outlined', 'file-dollar-certified-outlined', 'file-dollar-outlined', 'file-download-outlined', 'file-export-outlined', 'file-lock-outlined', 'file-outlined', 'file-search-outlined', 'file-secured-outlined', 'file-statutory-outlined', 'file-verified-outlined', 'filter-outlined', 'folder-outlined', 'folder-user-outlined', 'form-outlined', 'funnel-filter-outline', 'graph-outlined', 'hand-holding-user-outlined', 'happy-sun-outlined', 'health-bag-outlined', 'heart-outlined', 'home-active-outlined', 'home-outlined', 'id-card-outlined', 'image-outlined', 'import-outlined', 'instapay-outlined', 'italic', 'link-1', 'link-2', 'list-outlined', 'live-help-outlined', 'location-on-outlined', 'location-outlined', 'lock-outlined', 'locked-file-outlined', 'log-out', 'mail-outlined', 'media-content-outlined', 'menu-close', 'menu-expand', 'menu-fold-outlined', 'menu-unfold-outlined', 'moneybag-outlined', 'moon-outlined', 'more-horizontal', 'more-vertical', 'multiple-folders-outlined', 'multiple-users-outlined', 'near-me-outlined', 'node-outlined', 'number-points', 'number', 'overview-outlined', 'payment-summary-outlined', 'payslip-outlined', 'pencil-outlined', 'percentage', 'phone-outlined', 'piggy-bank-outlined', 'plane-outlined', 'play-circle-outlined', 'print-outlined', 'propane-tank-outlined', 'qr-code-outlined', 'qualification-outlined', 're-assign', 'redeem', 'refresh', 'remove', 'reply-outlined', 'restart', 'return-arrow', 'rostering-outlined', 'save-outlined', 'schedule-outlined', 'search-outlined', 'search-secured-outlined', 'send-outlined', 'share-1', 'share-2', 'share-outlined', 'show-chart-outlined', 'single-down-arrow', 'single-left-arrow', 'single-right-arrow', 'single-up-arrow', 'sparkle-outlined', 'speaker-active-outlined', 'speaker-outlined', 'star-circle-outlined', 'star-outlined', 'stopwatch-outlined', 'strikethrough', 'styler-outlined', 'suitcase-clock-outlined', 'suitcase-outlined', 'survey-outlined', 'switch-outlined', 'sync', 'tag-outlined', 'target-outlined', 'tennis-outlined', 'ticket-outlined', 'timesheet-outlined', 'today-outlined', 'transfer', 'trash-bin-outlined', 'umbrela-outlined', 'unavailable', 'underline', 'union-outlined', 'unlock-outlined', 'upload-outlined', 'user-circle-outlined', 'user-gear-outlined', 'user-outlined', 'user-rectangle-outlined', 'video-1-outlined', 'video-2-outlined', 'volunteer-outlined', 'wallet-outlined'];
+var IconList = ['activate', 'add-emoji', 'add-person', 'adjustment', 'alignment', 'antenna', 'archive', 'assignment-warning', 'bank', 'bell', 'billing', 'bolt', 'bookmark-added', 'bookmark', 'box-check', 'box', 'bpay', 'buildings', 'cake', 'calendar-clock', 'calendar', 'candy-box-menu', 'caret-down-small', 'caret-down', 'caret-left-small', 'caret-left', 'caret-right-small', 'caret-right', 'caret-up-small', 'caret-up', 'check-radio', 'circle-add', 'circle-cancel', 'circle-check', 'circle-down', 'circle-info', 'circle-left', 'circle-ok', 'circle-pencil', 'circle-question', 'circle-remove', 'circle-right', 'circle-up', 'circle-warning', 'clock-3', 'clock', 'cloud-download', 'cloud-upload', 'cog', 'coin', 'contacts', 'credit-card', 'diamond', 'direction-arrows', 'directory', 'document', 'dollar-coin-shine', 'double-buildings', 'edit-template', 'envelope', 'exclude', 'expense', 'eye-circle', 'eye-invisible', 'eye', 'face-meh', 'face-sad', 'face-smiley', 'feed', 'feedbacks', 'file-certified', 'file-clone', 'file-copy', 'file-csv', 'file-dispose', 'file-doc', 'file-excel', 'file-export', 'file-lock', 'file-pdf', 'file-powerpoint', 'file-search', 'file-secured', 'file-sheets', 'file-slide', 'file-verified', 'file-word', 'file', 'filter', 'folder-user', 'folder', 'format-bold', 'format-heading1', 'format-heading2', 'format-italic', 'format-list-bulleted', 'format-list-numbered', 'format-underlined', 'funnel-filter', 'global-dollar', 'globe', 'graduation-cap', 'graph', 'happy-sun', 'health-bag', 'heart', 'home', 'image', 'import', 'incident-siren', 'instapay', 'list', 'loading-2', 'loading', 'location', 'lock', 'looks-one', 'looks-two', 'media-content', 'menu', 'money-notes', 'moneybag', 'moon', 'multiple-stars', 'multiple-users', 'node', 'open-folder', 'paperclip', 'payment-summary', 'pencil', 'phone', 'piggy-bank', 'plane-up', 'plane', 'play-circle', 'print', 'raising-hands', 'reply-arrow', 'reply', 'reschedule', 'rostering', 'save', 'schedule-send', 'schedule', 'search-person', 'send', 'speaker-active', 'speaker', 'star-award', 'star-badge', 'star-circle', 'star-medal', 'star', 'steps-circle', 'stopwatch', 'suitcase', 'surfing', 'survey', 'swag-pillar-benefit', 'swag-pillar-career', 'swag-pillar-money', 'swag-pillar-work', 'swag', 'switch', 'tag', 'target', 'teams', 'timesheet', 'touch-id', 'trash-bin', 'unlock', 'user', 'video-1', 'video-2', 'wallet', 'warning', 'activate-outlined', 'add-credit-card-outlined', 'add-person-outlined', 'add-section-outlined', 'add-time-outlined', 'add', 'adjustment-outlined', 'ai-outlined', 'alignment-2-outlined', 'alignment-outlined', 'all-caps', 'arrow-down', 'arrow-downwards', 'arrow-left', 'arrow-leftwards', 'arrow-right', 'arrow-rightwards', 'arrow-up', 'arrow-upwards', 'article-outlined', 'at-sign', 'auto-graph-outlined', 'beer-outlined', 'bell-active-outlined', 'bell-outlined', 'bell-slash-outlined', 'billing-outlined', 'body-outlined', 'bold', 'bolt-outlined', 'book-outlined', 'bookmark-added-outlined', 'bookmark-outlined', 'box-check-outlined', 'box-outlined', 'bullet-points', 'cake-outlined', 'calendar-dates-outlined', 'calendar-star-outlined', 'call-outlined', 'call-split-outlined', 'camera-outlined', 'cancel', 'car-forward-outlined', 'charging-station-outlined', 'chat-bubble-outlined', 'chat-unread-outlined', 'checkmark', 'circle-add-outlined', 'circle-cancel-outlined', 'circle-down-outlined', 'circle-info-outlined', 'circle-left-outlined', 'circle-ok-outlined', 'circle-question-outlined', 'circle-remove-outlined', 'circle-right-outlined', 'circle-up-outlined', 'circle-warning-outlined', 'clock-2-outlined', 'clock-outlined', 'cog-outlined', 'coin-outlined', 'coin-super-outlined', 'comment-outlined', 'contacts-outlined', 'contacts-user-outlined', 'credit-card-outlined', 'cup-outlined', 'dentistry-outlined', 'direction-arrows-outlined', 'directory-outlined', 'document-outlined', 'dollar-box-outlined', 'dollar-card-outlined', 'dollar-coin-shine-outlined', 'dollar-credit-card-outlined', 'dollar-sign', 'double-buildings-outlined', 'double-left-arrows', 'double-right-arrows', 'download-box-outlined', 'download-outlined', 'edit-template-outlined', 'email-outlined', 'enter-arrow', 'envelope-outlined', 'expense-outlined', 'explore-outlined', 'extension-outlined', 'external-link', 'eye-invisible-outlined', 'eye-outlined', 'face-id', 'face-meh-outlined', 'face-open-smiley-outlined', 'face-sad-outlined', 'face-smiley-outlined', 'fastfood-outlined', 'feed-outlined', 'file-certified-outlined', 'file-clone-outlined', 'file-copy-outlined', 'file-dispose-outlined', 'file-dollar-certified-outlined', 'file-dollar-outlined', 'file-download-outlined', 'file-export-outlined', 'file-lock-outlined', 'file-outlined', 'file-search-outlined', 'file-secured-outlined', 'file-statutory-outlined', 'file-verified-outlined', 'filter-outlined', 'folder-outlined', 'folder-user-outlined', 'form-outlined', 'funnel-filter-outline', 'goal-outlined', 'graph-outlined', 'hand-holding-user-outlined', 'happy-sun-outlined', 'health-bag-outlined', 'heart-outlined', 'home-active-outlined', 'home-outlined', 'id-card-outlined', 'image-outlined', 'import-outlined', 'instapay-outlined', 'italic', 'link-1', 'link-2', 'list-outlined', 'live-help-outlined', 'location-on-outlined', 'location-outlined', 'lock-outlined', 'locked-file-outlined', 'log-out', 'mail-outlined', 'media-content-outlined', 'menu-close', 'menu-expand', 'menu-fold-outlined', 'menu-unfold-outlined', 'moneybag-outlined', 'moon-outlined', 'more-horizontal', 'more-vertical', 'multiple-folders-outlined', 'multiple-users-outlined', 'near-me-outlined', 'node-outlined', 'number-points', 'number', 'overview-outlined', 'payment-summary-outlined', 'payslip-outlined', 'pencil-outlined', 'percentage', 'phone-outlined', 'piggy-bank-outlined', 'plane-outlined', 'play-circle-outlined', 'print-outlined', 'propane-tank-outlined', 'qr-code-outlined', 'qualification-outlined', 're-assign', 'redeem', 'refresh', 'remove', 'reply-outlined', 'restart', 'return-arrow', 'rostering-outlined', 'save-outlined', 'schedule-outlined', 'search-outlined', 'search-secured-outlined', 'send-outlined', 'share-1', 'share-2', 'share-outlined', 'show-chart-outlined', 'single-down-arrow', 'single-left-arrow', 'single-right-arrow', 'single-up-arrow', 'sparkle-outlined', 'speaker-active-outlined', 'speaker-outlined', 'star-circle-outlined', 'star-outlined', 'stopwatch-outlined', 'strikethrough', 'styler-outlined', 'suitcase-clock-outlined', 'suitcase-outlined', 'survey-outlined', 'switch-outlined', 'sync', 'tag-outlined', 'target-outlined', 'tennis-outlined', 'ticket-outlined', 'timesheet-outlined', 'today-outlined', 'transfer', 'trash-bin-outlined', 'umbrela-outlined', 'unavailable', 'underline', 'union-outlined', 'unlock-outlined', 'upload-outlined', 'user-circle-outlined', 'user-gear-outlined', 'user-outlined', 'user-rectangle-outlined', 'video-1-outlined', 'video-2-outlined', 'volunteer-outlined', 'wallet-outlined'];
 
 var activate = 59000;
 var adjustment = 59003;
@@ -6653,18 +6691,18 @@ var add = 59181;
 var bold = 59204;
 var cancel = 59218;
 var checkmark = 59223;
-var italic = 59306;
-var number = 59331;
-var percentage = 59336;
-var redeem = 59346;
-var refresh = 59347;
-var remove = 59348;
-var restart = 59350;
-var strikethrough = 59372;
-var sync = 59378;
-var transfer = 59385;
-var unavailable = 59388;
-var underline = 59389;
+var italic = 59307;
+var number = 59332;
+var percentage = 59337;
+var redeem = 59347;
+var refresh = 59348;
+var remove = 59349;
+var restart = 59351;
+var strikethrough = 59373;
+var sync = 59379;
+var transfer = 59386;
+var unavailable = 59389;
+var underline = 59390;
 var glyphMap = {
 	activate: activate,
 	"add-emoji": 59001,
@@ -6961,112 +6999,113 @@ var glyphMap = {
 	"folder-user-outlined": 59292,
 	"form-outlined": 59293,
 	"funnel-filter-outline": 59294,
-	"graph-outlined": 59295,
-	"hand-holding-user-outlined": 59296,
-	"happy-sun-outlined": 59297,
-	"health-bag-outlined": 59298,
-	"heart-outlined": 59299,
-	"home-active-outlined": 59300,
-	"home-outlined": 59301,
-	"id-card-outlined": 59302,
-	"image-outlined": 59303,
-	"import-outlined": 59304,
-	"instapay-outlined": 59305,
+	"goal-outlined": 59295,
+	"graph-outlined": 59296,
+	"hand-holding-user-outlined": 59297,
+	"happy-sun-outlined": 59298,
+	"health-bag-outlined": 59299,
+	"heart-outlined": 59300,
+	"home-active-outlined": 59301,
+	"home-outlined": 59302,
+	"id-card-outlined": 59303,
+	"image-outlined": 59304,
+	"import-outlined": 59305,
+	"instapay-outlined": 59306,
 	italic: italic,
-	"link-1": 59307,
-	"link-2": 59308,
-	"list-outlined": 59309,
-	"live-help-outlined": 59310,
-	"location-on-outlined": 59311,
-	"location-outlined": 59312,
-	"lock-outlined": 59313,
-	"locked-file-outlined": 59314,
-	"log-out": 59315,
-	"mail-outlined": 59316,
-	"media-content-outlined": 59317,
-	"menu-close": 59318,
-	"menu-expand": 59319,
-	"menu-fold-outlined": 59320,
-	"menu-unfold-outlined": 59321,
-	"moneybag-outlined": 59322,
-	"moon-outlined": 59323,
-	"more-horizontal": 59324,
-	"more-vertical": 59325,
-	"multiple-folders-outlined": 59326,
-	"multiple-users-outlined": 59327,
-	"near-me-outlined": 59328,
-	"node-outlined": 59329,
-	"number-points": 59330,
+	"link-1": 59308,
+	"link-2": 59309,
+	"list-outlined": 59310,
+	"live-help-outlined": 59311,
+	"location-on-outlined": 59312,
+	"location-outlined": 59313,
+	"lock-outlined": 59314,
+	"locked-file-outlined": 59315,
+	"log-out": 59316,
+	"mail-outlined": 59317,
+	"media-content-outlined": 59318,
+	"menu-close": 59319,
+	"menu-expand": 59320,
+	"menu-fold-outlined": 59321,
+	"menu-unfold-outlined": 59322,
+	"moneybag-outlined": 59323,
+	"moon-outlined": 59324,
+	"more-horizontal": 59325,
+	"more-vertical": 59326,
+	"multiple-folders-outlined": 59327,
+	"multiple-users-outlined": 59328,
+	"near-me-outlined": 59329,
+	"node-outlined": 59330,
+	"number-points": 59331,
 	number: number,
-	"overview-outlined": 59332,
-	"payment-summary-outlined": 59333,
-	"payslip-outlined": 59334,
-	"pencil-outlined": 59335,
+	"overview-outlined": 59333,
+	"payment-summary-outlined": 59334,
+	"payslip-outlined": 59335,
+	"pencil-outlined": 59336,
 	percentage: percentage,
-	"phone-outlined": 59337,
-	"piggy-bank-outlined": 59338,
-	"plane-outlined": 59339,
-	"play-circle-outlined": 59340,
-	"print-outlined": 59341,
-	"propane-tank-outlined": 59342,
-	"qr-code-outlined": 59343,
-	"qualification-outlined": 59344,
-	"re-assign": 59345,
+	"phone-outlined": 59338,
+	"piggy-bank-outlined": 59339,
+	"plane-outlined": 59340,
+	"play-circle-outlined": 59341,
+	"print-outlined": 59342,
+	"propane-tank-outlined": 59343,
+	"qr-code-outlined": 59344,
+	"qualification-outlined": 59345,
+	"re-assign": 59346,
 	redeem: redeem,
 	refresh: refresh,
 	remove: remove,
-	"reply-outlined": 59349,
+	"reply-outlined": 59350,
 	restart: restart,
-	"return-arrow": 59351,
-	"rostering-outlined": 59352,
-	"save-outlined": 59353,
-	"schedule-outlined": 59354,
-	"search-outlined": 59355,
-	"search-secured-outlined": 59356,
-	"send-outlined": 59357,
-	"share-1": 59358,
-	"share-2": 59359,
-	"share-outlined": 59360,
-	"show-chart-outlined": 59361,
-	"single-down-arrow": 59362,
-	"single-left-arrow": 59363,
-	"single-right-arrow": 59364,
-	"single-up-arrow": 59365,
-	"sparkle-outlined": 59366,
-	"speaker-active-outlined": 59367,
-	"speaker-outlined": 59368,
-	"star-circle-outlined": 59369,
-	"star-outlined": 59370,
-	"stopwatch-outlined": 59371,
+	"return-arrow": 59352,
+	"rostering-outlined": 59353,
+	"save-outlined": 59354,
+	"schedule-outlined": 59355,
+	"search-outlined": 59356,
+	"search-secured-outlined": 59357,
+	"send-outlined": 59358,
+	"share-1": 59359,
+	"share-2": 59360,
+	"share-outlined": 59361,
+	"show-chart-outlined": 59362,
+	"single-down-arrow": 59363,
+	"single-left-arrow": 59364,
+	"single-right-arrow": 59365,
+	"single-up-arrow": 59366,
+	"sparkle-outlined": 59367,
+	"speaker-active-outlined": 59368,
+	"speaker-outlined": 59369,
+	"star-circle-outlined": 59370,
+	"star-outlined": 59371,
+	"stopwatch-outlined": 59372,
 	strikethrough: strikethrough,
-	"styler-outlined": 59373,
-	"suitcase-clock-outlined": 59374,
-	"suitcase-outlined": 59375,
-	"survey-outlined": 59376,
-	"switch-outlined": 59377,
+	"styler-outlined": 59374,
+	"suitcase-clock-outlined": 59375,
+	"suitcase-outlined": 59376,
+	"survey-outlined": 59377,
+	"switch-outlined": 59378,
 	sync: sync,
-	"tag-outlined": 59379,
-	"target-outlined": 59380,
-	"tennis-outlined": 59381,
-	"ticket-outlined": 59382,
-	"timesheet-outlined": 59383,
-	"today-outlined": 59384,
+	"tag-outlined": 59380,
+	"target-outlined": 59381,
+	"tennis-outlined": 59382,
+	"ticket-outlined": 59383,
+	"timesheet-outlined": 59384,
+	"today-outlined": 59385,
 	transfer: transfer,
-	"trash-bin-outlined": 59386,
-	"umbrela-outlined": 59387,
+	"trash-bin-outlined": 59387,
+	"umbrela-outlined": 59388,
 	unavailable: unavailable,
 	underline: underline,
-	"union-outlined": 59390,
-	"unlock-outlined": 59391,
-	"upload-outlined": 59392,
-	"user-circle-outlined": 59393,
-	"user-gear-outlined": 59394,
-	"user-outlined": 59395,
-	"user-rectangle-outlined": 59396,
-	"video-1-outlined": 59397,
-	"video-2-outlined": 59398,
-	"volunteer-outlined": 59399,
-	"wallet-outlined": 59400
+	"union-outlined": 59391,
+	"unlock-outlined": 59392,
+	"upload-outlined": 59393,
+	"user-circle-outlined": 59394,
+	"user-gear-outlined": 59395,
+	"user-outlined": 59396,
+	"user-rectangle-outlined": 59397,
+	"video-1-outlined": 59398,
+	"video-2-outlined": 59399,
+	"volunteer-outlined": 59400,
+	"wallet-outlined": 59401
 };
 
 var HeroIcon = reactNativeVectorIcons.createIconSet(glyphMap, 'hero-icons-mobile', 'hero-icons-mobile.ttf');
@@ -7091,10 +7130,10 @@ var StyledHeroIcon = index$a(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$u = ["style"];
+var _excluded$v = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$u);
+    otherProps = _objectWithoutProperties(_ref, _excluded$v);
   var rotateAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(rotateAnimation.current, {
@@ -7199,7 +7238,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-var _excluded$t = ["key"];
+var _excluded$u = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -7220,7 +7259,7 @@ var Accordion = function Accordion(_ref) {
     testID: testID
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$t);
+      props = _objectWithoutProperties(_ref2, _excluded$u);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
       key: key
@@ -7618,7 +7657,7 @@ var StyledStatus = index$a(reactNative.Animated.View)(function (_ref3) {
   };
 });
 
-var _excluded$s = ["children", "visible", "intent", "style", "testID"];
+var _excluded$t = ["children", "visible", "intent", "style", "testID"];
 var Status = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -7627,7 +7666,7 @@ var Status = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$s);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$t);
   var _React$useRef = React__default["default"].useRef(new reactNative.Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default["default"].useRef(true);
@@ -7660,7 +7699,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$r = ["content", "visible", "max", "intent", "style", "testID"];
+var _excluded$s = ["content", "visible", "max", "intent", "style", "testID"];
 var DEFAULT_MAX_NUMBER = 99;
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
@@ -7675,7 +7714,7 @@ var Badge = function Badge(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$r);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$s);
   var _React$useRef = React__default["default"].useRef(new reactNative.Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default["default"].useRef(true);
@@ -7779,7 +7818,7 @@ function omit(keys, obj) {
   return result;
 }
 
-var _excluded$q = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$r = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
@@ -7790,7 +7829,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
     selectedTabKey = _ref.selectedTabKey,
     tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$q);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$r);
   useDeprecation('BottomNavigation is deprecated and will be removed in the next major release. Please remove it.');
   var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
   /**
@@ -7877,13 +7916,13 @@ var StyledDivider = index$a(reactNative.View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$p = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$q = ["marginHorizontal", "marginVertical", "style", "testID"];
 var Divider = function Divider(_ref) {
   var marginHorizontal = _ref.marginHorizontal,
     marginVertical = _ref.marginVertical,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$p);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$q);
   return /*#__PURE__*/React__default["default"].createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -7947,7 +7986,7 @@ var StyledFooter = index$a(reactNative.View)(function (_ref4) {
     flexDirection: 'row'
   };
 });
-var StyledIconWrapper$3 = index$a(reactNative.View)(function (_ref5) {
+var StyledIconWrapper$4 = index$a(reactNative.View)(function (_ref5) {
   var theme = _ref5.theme;
   return {
     alignItems: 'center',
@@ -7969,20 +8008,16 @@ var genLoadingIndicatorStyles = function genLoadingIndicatorStyles(theme, intent
     backgroundColor: theme.__hd__.button.colors[intent]
   };
 };
-var StyledLoadingIndicatorWrapper = index$a(reactNative.View)(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: theme.__hd__.button.space.loadingIndicatorWrapperVerticalPadding
-  };
+var StyledLoadingIndicatorWrapper = index$a(reactNative.View)({
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center'
 });
-var StyledLoadingDot = index$a(reactNative.View)(function (_ref2) {
-  var _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 12 : _ref2$size,
-    themeVariant = _ref2.themeVariant,
-    theme = _ref2.theme;
+var StyledLoadingDot = index$a(reactNative.View)(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 12 : _ref$size,
+    themeVariant = _ref.themeVariant,
+    theme = _ref.theme;
   var themeStyling = function themeStyling() {
     switch (themeVariant) {
       case 'basic-transparent':
@@ -8006,14 +8041,12 @@ var StyledLoadingDot = index$a(reactNative.View)(function (_ref2) {
   return _objectSpread2({
     width: size,
     height: size,
-    marginTop: theme.space.xsmall,
-    marginBottom: theme.space.xsmall,
     marginHorizontal: theme.space.small,
     borderRadius: theme.space.small
   }, themeStyling());
 });
 
-var _excluded$o = ["count", "size", "testID", "themeVariant"];
+var _excluded$p = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = reactNative.Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = reactNative.Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -8045,7 +8078,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$o);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$p);
   var progressAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(progressAnimation.current, {
@@ -8088,6 +8121,7 @@ var genFilledContainerStyles = function genFilledContainerStyles(theme, intent,
     };
   };
   return _objectSpread2({
+    height: scale(60),
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
@@ -8108,6 +8142,7 @@ var genOutlineContainerStyles = function genOutlineContainerStyles(theme, intent
     };
   };
   return _objectSpread2({
+    height: scale(60),
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
@@ -8162,6 +8197,7 @@ var StyledButtonContainer = index$a(reactNative.TouchableHighlight)(function (_r
     case 'text-secondary':
     case 'text-danger':
       return {
+        height: scale(60),
         borderRadius: theme.__hd__.button.radii.text,
         flexDirection: 'row',
         justifyContent: 'center',
@@ -8475,7 +8511,7 @@ var Header = function Header(_ref) {
     style: {
       flex: 1
     }
-  }, content), showCloseButton ? /*#__PURE__*/React__default["default"].createElement(StyledIconWrapper$3, null, /*#__PURE__*/React__default["default"].createElement(CompoundButton.Icon, {
+  }, content), showCloseButton ? /*#__PURE__*/React__default["default"].createElement(StyledIconWrapper$4, null, /*#__PURE__*/React__default["default"].createElement(CompoundButton.Icon, {
     icon: "cancel",
     onPress: onRequestClose,
     intent: "text",
@@ -8484,11 +8520,11 @@ var Header = function Header(_ref) {
   })) : null), showDivider ? /*#__PURE__*/React__default["default"].createElement(Divider, null) : null);
 };
 
-var _excluded$n = ["scrollEventThrottle"];
+var _excluded$o = ["scrollEventThrottle"];
 var BottomSheetScrollView = function BottomSheetScrollView(_ref) {
   var _ref$scrollEventThrot = _ref.scrollEventThrottle,
     scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 100 : _ref$scrollEventThrot,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$o);
   var _useContext = React.useContext(BottomSheetContext),
     setInternalShowDivider = _useContext.setInternalShowDivider;
   var onScrollBeginDrag = React.useCallback(function (e) {
@@ -8514,445 +8550,119 @@ var BottomSheetScrollView = function BottomSheetScrollView(_ref) {
   }));
 };
 
-var customAlphabet = function customAlphabet(alphabet) {
-  var defaultSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 21;
-  return function () {
-    var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultSize;
-    var id = '';
-    var i = size;
-    while (i--) {
-      id += alphabet[Math.random() * alphabet.length | 0];
+var BottomSheet = function BottomSheet(_ref) {
+  var open = _ref.open,
+    header = _ref.header,
+    footer = _ref.footer,
+    children = _ref.children,
+    onAnimationEnd = _ref.onAnimationEnd,
+    onOpen = _ref.onOpen,
+    onRequestClose = _ref.onRequestClose,
+    onDismiss = _ref.onDismiss,
+    _ref$showCloseButton = _ref.showCloseButton,
+    showCloseButton = _ref$showCloseButton === void 0 ? true : _ref$showCloseButton,
+    _ref$hasBackdrop = _ref.hasBackdrop,
+    hasBackdrop = _ref$hasBackdrop === void 0 ? true : _ref$hasBackdrop,
+    _ref$showDivider = _ref.showDivider,
+    showDivider = _ref$showDivider === void 0 ? false : _ref$showDivider,
+    style = _ref.style,
+    testID = _ref.testID,
+    _ref$keyboardAvoiding = _ref.keyboardAvoidingViewProps,
+    keyboardAvoidingViewProps = _ref$keyboardAvoiding === void 0 ? {} : _ref$keyboardAvoiding;
+  var _Dimensions$get = reactNative.Dimensions.get('window'),
+    height = _Dimensions$get.height;
+  // Internal state to control modal open/close timing with animation
+  var _useState = React.useState(open),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisibility = _useState2[1];
+  var animatedValue = React.useRef(new reactNative.Animated.Value(open ? 0 : 1));
+  var _useState3 = React.useState(showDivider),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalShowDivider = _useState4[0],
+    setInternalShowDivider = _useState4[1];
+  React.useEffect(function () {
+    // Show the modal before the open animation start
+    if (open && !visible) {
+      setVisibility(open);
     }
-    return id;
-  };
-};
-
-var ACTIONS;
-(function (ACTIONS) {
-  ACTIONS[ACTIONS["REGISTER_HOST"] = 0] = "REGISTER_HOST";
-  ACTIONS[ACTIONS["DEREGISTER_HOST"] = 1] = "DEREGISTER_HOST";
-  ACTIONS[ACTIONS["ADD_UPDATE_PORTAL"] = 2] = "ADD_UPDATE_PORTAL";
-  ACTIONS[ACTIONS["REMOVE_PORTAL"] = 3] = "REMOVE_PORTAL";
-})(ACTIONS || (ACTIONS = {}));
-var INITIAL_STATE = {};
-
-var PortalStateContext = /*#__PURE__*/React.createContext(null);
-var PortalDispatchContext = /*#__PURE__*/React.createContext(null);
-
-var usePortal = function usePortal() {
-  var hostName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'root';
-  var dispatch = React.useContext(PortalDispatchContext);
-  if (dispatch === null) {
-    throw new Error("You must add 'PortalProvider' to the root component.");
-  }
-  var registerHost = React.useCallback(function () {
-    dispatch({
-      type: ACTIONS.REGISTER_HOST,
-      hostName: hostName
-    });
-  }, []);
-  var deregisterHost = React.useCallback(function () {
-    dispatch({
-      type: ACTIONS.DEREGISTER_HOST,
-      hostName: hostName
-    });
-  }, []);
-  var addUpdatePortal = React.useCallback(function (name, node) {
-    dispatch({
-      type: ACTIONS.ADD_UPDATE_PORTAL,
-      hostName: hostName,
-      portalName: name,
-      node: node
-    });
-  }, []);
-  var removePortal = React.useCallback(function (name) {
-    dispatch({
-      type: ACTIONS.REMOVE_PORTAL,
-      hostName: hostName,
-      portalName: name
+    // Delay closing the modal until after the closing animation end
+    animatedValue.current.removeAllListeners();
+    animatedValue.current.addListener(function (_ref2) {
+      var value = _ref2.value;
+      var endValueOfTransition = open ? 1 : 0;
+      if (endValueOfTransition === 0 && value === endValueOfTransition) {
+        setVisibility(false);
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+      }
     });
-  }, []);
-  return {
-    registerHost: registerHost,
-    deregisterHost: deregisterHost,
-    addPortal: addUpdatePortal,
-    updatePortal: addUpdatePortal,
-    removePortal: removePortal
-  };
-};
-
-var usePortalState = function usePortalState(hostName) {
-  var state = React.useContext(PortalStateContext);
-  if (state === null) {
-    throw new Error("You must add 'PortalProvider' to the root component.");
-  }
-  return state[hostName] || [];
-};
-
-var PortalHostComponent = function PortalHostComponent(_ref) {
-  var name = _ref.name;
-  var state = usePortalState(name);
-  var _usePortal = usePortal(name),
-    registerHost = _usePortal.registerHost,
-    deregisterHost = _usePortal.deregisterHost;
+    return function () {
+      return animatedValue.current.removeAllListeners();
+    };
+  }, [open]);
+  // Animation
   React.useEffect(function () {
-    registerHost();
+    var animation = reactNative.Animated.timing(animatedValue.current, {
+      toValue: open ? 1 : 0,
+      easing: reactNative.Easing.inOut(reactNative.Easing.cubic),
+      useNativeDriver: true
+    });
+    animation.start(onAnimationEnd);
     return function () {
-      deregisterHost();
+      return animation.stop();
     };
-  }, []);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, state.map(function (item) {
-    return item.node;
-  }));
+  }, [open]);
+  var interpolateY = animatedValue.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [height, 0]
+  });
+  // Backdrop opacity
+  var interpolateOpacity = hasBackdrop ? animatedValue.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 0.48]
+  }) : 0;
+  var BottomSheetContextValue = React.useMemo(function () {
+    return {
+      setInternalShowDivider: setInternalShowDivider
+    };
+  }, [setInternalShowDivider]);
+  return /*#__PURE__*/React__default["default"].createElement(reactNative.Modal, {
+    visible: visible,
+    onRequestClose: onRequestClose,
+    transparent: true,
+    testID: testID,
+    onShow: onOpen
+  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper$9, {
+    pointerEvents: "box-none"
+  }, /*#__PURE__*/React__default["default"].createElement(StyledKeyboardAvoidingView, _extends$1({
+    behavior: reactNative.Platform.OS === 'ios' ? 'padding' : 'height'
+  }, keyboardAvoidingViewProps), /*#__PURE__*/React__default["default"].createElement(StyledBackdrop$2, {
+    style: {
+      opacity: interpolateOpacity
+    },
+    onPress: onRequestClose
+  }), /*#__PURE__*/React__default["default"].createElement(StyledBottomSheet, {
+    style: [style, {
+      transform: [{
+        scaleY: height > 0 ? 1 : 0
+      }, {
+        translateY: interpolateY
+      }]
+    }]
+  }, header !== undefined ? /*#__PURE__*/React__default["default"].createElement(Header, {
+    content: header,
+    showDivider: internalShowDivider,
+    onRequestClose: onRequestClose,
+    showCloseButton: showCloseButton
+  }) : null, /*#__PURE__*/React__default["default"].createElement(BottomSheetContext.Provider, {
+    value: BottomSheetContextValue
+  }, children), footer ? /*#__PURE__*/React__default["default"].createElement(Footer$1, {
+    showDivider: showDivider
+  }, footer) : null))));
 };
-var PortalHost = /*#__PURE__*/React.memo(PortalHostComponent);
-PortalHost.displayName = 'PortalHost';
-
-var registerHostIfNotExist = function registerHostIfNotExist(state, hostName) {
-  if (!(hostName in state)) {
-    return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, hostName, []));
-  }
-  return _objectSpread2({}, state);
-};
-var deregisterHost = function deregisterHost(state, hostName) {
-  return _objectSpread2({}, omit([hostName], state));
-};
-var addUpdatePortal = function addUpdatePortal(state, hostName, portalName, node) {
-  var newState = registerHostIfNotExist(state, hostName);
-  var index = newState[hostName].findIndex(function (item) {
-    return item.name === portalName;
-  });
-  if (index !== -1) {
-    return _objectSpread2(_objectSpread2({}, newState), {}, _defineProperty({}, hostName, newState[hostName].map(function (item, i) {
-      if (index === i) {
-        return _objectSpread2(_objectSpread2({}, item), {}, {
-          node: node
-        });
-      }
-      return item;
-    })));
-  }
-  return _objectSpread2(_objectSpread2({}, newState), {}, _defineProperty({}, hostName, [].concat(_toConsumableArray(newState[hostName]), [{
-    name: portalName,
-    node: node
-  }])));
-};
-var removePortal = function removePortal(state, hostName, portalName) {
-  if (!(hostName in state)) {
-    return _objectSpread2({}, state);
-  }
-  return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, hostName, state[hostName].filter(function (item) {
-    return item.name !== portalName;
-  })));
-};
-var reducer = function reducer(state, action) {
-  var type = action.type;
-  switch (type) {
-    case ACTIONS.REGISTER_HOST:
-      return registerHostIfNotExist(state, action.hostName);
-    case ACTIONS.DEREGISTER_HOST:
-      return deregisterHost(state, action.hostName);
-    case ACTIONS.ADD_UPDATE_PORTAL:
-      return addUpdatePortal(state, action.hostName, action.portalName, action.node);
-    case ACTIONS.REMOVE_PORTAL:
-      return removePortal(state, action.hostName, action.portalName);
-    default:
-      return _objectSpread2({}, state);
-  }
-};
-
-var PortalProviderComponent = function PortalProviderComponent(_ref) {
-  var _ref$rootHostName = _ref.rootHostName,
-    rootHostName = _ref$rootHostName === void 0 ? 'root' : _ref$rootHostName,
-    children = _ref.children;
-  var _useReducer = React.useReducer(reducer, INITIAL_STATE),
-    _useReducer2 = _slicedToArray(_useReducer, 2),
-    state = _useReducer2[0],
-    dispatch = _useReducer2[1];
-  return /*#__PURE__*/React__default["default"].createElement(PortalDispatchContext.Provider, {
-    value: dispatch
-  }, /*#__PURE__*/React__default["default"].createElement(PortalStateContext.Provider, {
-    value: state
-  }, children, /*#__PURE__*/React__default["default"].createElement(PortalHost, {
-    name: rootHostName
-  })));
-};
-var PortalProvider = /*#__PURE__*/React.memo(PortalProviderComponent);
-PortalProvider.displayName = 'PortalProvider';
-
-var nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 10);
-var PortalComponent = function PortalComponent(_ref) {
-  var name = _ref.name,
-    hostName = _ref.hostName,
-    children = _ref.children,
-    theme = _ref.theme;
-  var defaultTheme = useTheme();
-  var _usePortal = usePortal(hostName),
-    addUpdatePortal = _usePortal.addPortal,
-    removePortal = _usePortal.removePortal;
-  var nameOrRandom = React.useMemo(function () {
-    return name || nanoid();
-  }, [name]);
-  var ChildrenComponent = React.useMemo(function () {
-    return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
-      theme: theme || defaultTheme
-    }, children);
-  }, [theme, children, defaultTheme]);
-  React.useLayoutEffect(function () {
-    addUpdatePortal(nameOrRandom, ChildrenComponent);
-    return function () {
-      removePortal(nameOrRandom);
-    };
-  }, [addUpdatePortal]);
-  React.useLayoutEffect(function () {
-    addUpdatePortal(nameOrRandom, ChildrenComponent);
-  }, [ChildrenComponent]);
-  return null;
-};
-var Portal = /*#__PURE__*/React.memo(PortalComponent);
-Portal.displayName = 'Portal';
-var Portal$1 = Object.assign(Portal, {
-  Provider: PortalProvider,
-  Host: PortalHost
-});
-
-var _excluded$m = ["visible"];
-var DEFAULT_BACKDROP_OPACITY = 0.4;
-var DEFAULT_ANIMATION_CONFIG = {
-  easing: reactNative.Easing.inOut(reactNative.Easing.cubic),
-  useNativeDriver: reactNative.Platform.OS !== 'web',
-  duration: 400
-};
-var Modal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    onShow = _ref.onShow,
-    onRequestClose = _ref.onRequestClose,
-    testID = _ref.testID,
-    _ref$animationType = _ref.animationType,
-    animationType = _ref$animationType === void 0 ? 'none' : _ref$animationType,
-    _ref$transparent = _ref.transparent,
-    transparent = _ref$transparent === void 0 ? false : _ref$transparent,
-    onDismiss = _ref.onDismiss;
-  var theme = useTheme();
-  var animatedBackdropValue = React.useRef(new reactNative.Animated.Value(0)).current;
-  var animatedModalValue = React.useRef(new reactNative.Animated.Value(0)).current;
-  // Show or hide the backdrop and modal content
-  var animateBackdropAndContent = React.useCallback(function (_ref2) {
-    var toValue = _ref2.toValue,
-      callback = _ref2.callback;
-    if (animationType !== 'none') {
-      // Backdrop animation
-      if (!transparent) {
-        reactNative.Animated.timing(animatedBackdropValue, _objectSpread2({
-          toValue: toValue
-        }, DEFAULT_ANIMATION_CONFIG)).start();
-      }
-      // Modal content animation
-      reactNative.Animated.timing(animatedModalValue, _objectSpread2({
-        toValue: toValue
-      }, DEFAULT_ANIMATION_CONFIG)).start(callback);
-    } else {
-      callback === null || callback === void 0 ? void 0 : callback();
-    }
-  }, [animationType, onShow, transparent]);
-  var backdropOpacityAnimation = animatedBackdropValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, DEFAULT_BACKDROP_OPACITY]
-  });
-  var modalAnimation = animatedModalValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: animationType === 'slide' ? [reactNative.Dimensions.get('window').height, 0] : [0, 1]
-  });
-  React.useImperativeHandle(ref, function () {
-    return {
-      show: function show() {
-        animateBackdropAndContent({
-          toValue: 1,
-          callback: onShow
-        });
-      },
-      hide: function hide(wrapperCallback) {
-        animateBackdropAndContent({
-          toValue: 0,
-          callback: function callback() {
-            if (reactNative.Platform.OS === 'ios') {
-              onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-            }
-            wrapperCallback();
-          }
-        });
-      }
-    };
-  }, [onDismiss, onShow, animateBackdropAndContent]);
-  // Back button handler
-  React.useEffect(function () {
-    var backHandler = reactNative.BackHandler.addEventListener('hardwareBackPress', function () {
-      onRequestClose === null || onRequestClose === void 0 ? void 0 : onRequestClose();
-      return true;
-    });
-    return function () {
-      return backHandler.remove();
-    };
-  }, [onRequestClose]);
-  return /*#__PURE__*/React__default["default"].createElement(Portal$1, null, /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
-    style: _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
-      backgroundColor: transparent ? 'transparent' : theme.colors.overlayGlobalSurface,
-      opacity: animationType !== 'none' ? backdropOpacityAnimation : DEFAULT_BACKDROP_OPACITY
-    })
-  }), /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
-    testID: testID,
-    style: _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
-      opacity: animationType === 'fade' ? modalAnimation : 1,
-      transform: [{
-        translateY: animationType === 'slide' ? modalAnimation : 0
-      }]
-    })
-  }, children));
-});
-var ModalWrapper = function ModalWrapper(_ref3) {
-  var _ref3$visible = _ref3.visible,
-    visible = _ref3$visible === void 0 ? true : _ref3$visible,
-    props = _objectWithoutProperties(_ref3, _excluded$m);
-  var modalRef = React.useRef(null);
-  var _useState = React.useState(visible),
-    _useState2 = _slicedToArray(_useState, 2),
-    internalVisible = _useState2[0],
-    setInternalVisible = _useState2[1];
-  React.useEffect(function () {
-    if (visible) {
-      setInternalVisible(true);
-    } else {
-      var _modalRef$current;
-      // Wait for animation to finish before hiding the modal
-      (_modalRef$current = modalRef.current) === null || _modalRef$current === void 0 ? void 0 : _modalRef$current.hide(function () {
-        return setInternalVisible(false);
-      });
-    }
-  }, [visible]);
-  React.useEffect(function () {
-    if (internalVisible) {
-      var _modalRef$current2;
-      (_modalRef$current2 = modalRef.current) === null || _modalRef$current2 === void 0 ? void 0 : _modalRef$current2.show();
-    }
-  }, [internalVisible]);
-  return internalVisible ? /*#__PURE__*/React__default["default"].createElement(Modal, _extends$1({
-    ref: modalRef
-  }, props)) : null;
-};
-
-var BottomSheet = function BottomSheet(_ref) {
-  var open = _ref.open,
-    header = _ref.header,
-    footer = _ref.footer,
-    children = _ref.children,
-    onAnimationEnd = _ref.onAnimationEnd,
-    onOpen = _ref.onOpen,
-    onRequestClose = _ref.onRequestClose,
-    onDismiss = _ref.onDismiss,
-    _ref$showCloseButton = _ref.showCloseButton,
-    showCloseButton = _ref$showCloseButton === void 0 ? true : _ref$showCloseButton,
-    _ref$hasBackdrop = _ref.hasBackdrop,
-    hasBackdrop = _ref$hasBackdrop === void 0 ? true : _ref$hasBackdrop,
-    _ref$showDivider = _ref.showDivider,
-    showDivider = _ref$showDivider === void 0 ? false : _ref$showDivider,
-    style = _ref.style,
-    testID = _ref.testID,
-    _ref$keyboardAvoiding = _ref.keyboardAvoidingViewProps,
-    keyboardAvoidingViewProps = _ref$keyboardAvoiding === void 0 ? {} : _ref$keyboardAvoiding;
-  var _Dimensions$get = reactNative.Dimensions.get('window'),
-    height = _Dimensions$get.height;
-  // Internal state to control modal open/close timing with animation
-  var _useState = React.useState(open),
-    _useState2 = _slicedToArray(_useState, 2),
-    visible = _useState2[0],
-    setVisibility = _useState2[1];
-  var animatedValue = React.useRef(new reactNative.Animated.Value(open ? 0 : 1));
-  var _useState3 = React.useState(showDivider),
-    _useState4 = _slicedToArray(_useState3, 2),
-    internalShowDivider = _useState4[0],
-    setInternalShowDivider = _useState4[1];
-  React.useEffect(function () {
-    // Show the modal before the open animation start
-    if (open && !visible) {
-      setVisibility(open);
-    }
-    // Delay closing the modal until after the closing animation end
-    animatedValue.current.removeAllListeners();
-    animatedValue.current.addListener(function (_ref2) {
-      var value = _ref2.value;
-      var endValueOfTransition = open ? 1 : 0;
-      if (endValueOfTransition === 0 && value === endValueOfTransition) {
-        setVisibility(false);
-        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-      }
-    });
-    return function () {
-      return animatedValue.current.removeAllListeners();
-    };
-  }, [open]);
-  // Animation
-  React.useEffect(function () {
-    var animation = reactNative.Animated.timing(animatedValue.current, {
-      toValue: open ? 1 : 0,
-      easing: reactNative.Easing.inOut(reactNative.Easing.cubic),
-      useNativeDriver: true
-    });
-    animation.start(onAnimationEnd);
-    return function () {
-      return animation.stop();
-    };
-  }, [open]);
-  var interpolateY = animatedValue.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: [height, 0]
-  });
-  // Backdrop opacity
-  var interpolateOpacity = hasBackdrop ? animatedValue.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 0.48]
-  }) : 0;
-  var BottomSheetContextValue = React.useMemo(function () {
-    return {
-      setInternalShowDivider: setInternalShowDivider
-    };
-  }, [setInternalShowDivider]);
-  return /*#__PURE__*/React__default["default"].createElement(ModalWrapper, {
-    visible: visible,
-    onRequestClose: onRequestClose,
-    transparent: true,
-    testID: testID,
-    onShow: onOpen
-  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper$9, {
-    pointerEvents: "box-none"
-  }, /*#__PURE__*/React__default["default"].createElement(StyledKeyboardAvoidingView, _extends$1({
-    behavior: reactNative.Platform.OS === 'ios' ? 'padding' : 'height'
-  }, keyboardAvoidingViewProps), /*#__PURE__*/React__default["default"].createElement(StyledBackdrop$2, {
-    style: {
-      opacity: interpolateOpacity
-    },
-    onPress: onRequestClose
-  }), /*#__PURE__*/React__default["default"].createElement(StyledBottomSheet, {
-    style: [style, {
-      transform: [{
-        scaleY: height > 0 ? 1 : 0
-      }, {
-        translateY: interpolateY
-      }]
-    }]
-  }, header !== undefined ? /*#__PURE__*/React__default["default"].createElement(Header, {
-    content: header,
-    showDivider: internalShowDivider,
-    onRequestClose: onRequestClose,
-    showCloseButton: showCloseButton
-  }) : null, /*#__PURE__*/React__default["default"].createElement(BottomSheetContext.Provider, {
-    value: BottomSheetContextValue
-  }, children), footer ? /*#__PURE__*/React__default["default"].createElement(Footer$1, {
-    showDivider: showDivider
-  }, footer) : null))));
-};
-var BottomSheet$1 = Object.assign(BottomSheet, {
-  ScrollView: BottomSheetScrollView
-});
+var BottomSheet$1 = Object.assign(BottomSheet, {
+  ScrollView: BottomSheetScrollView
+});
 
 var colors = {
   backgroundColor: {
@@ -9129,7 +8839,7 @@ var borderWidths = {
 var config = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, colors), space), radii), borderWidths);
 var flexPropsKey = ['alignContent', 'alignItems', 'alignSelf', 'display', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'justifyContent'];
 
-var _excluded$l = ["theme"];
+var _excluded$n = ["theme"];
 var getThemeValue = function getThemeValue(theme, key, props) {
   var propConfig = config[key];
   var propValue = props[key];
@@ -9156,18 +8866,18 @@ var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
 var configKeys = Object.keys(config);
 var StyledBox = index$a(reactNative.View)(function (_ref5) {
   var theme = _ref5.theme,
-    otherProps = _objectWithoutProperties(_ref5, _excluded$l);
+    otherProps = _objectWithoutProperties(_ref5, _excluded$n);
   var styleProps = pick(configKeys, otherProps);
   var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
   return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
 });
 
-var _excluded$k = ["children", "style", "testID"];
+var _excluded$m = ["children", "style", "testID"];
 var Box = function Box(_ref) {
   var children = _ref.children,
     style = _ref.style,
     testID = _ref.testID,
-    otherProps = _objectWithoutProperties(_ref, _excluded$k);
+    otherProps = _objectWithoutProperties(_ref, _excluded$m);
   return /*#__PURE__*/React__default["default"].createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
     testID: testID
@@ -11807,7 +11517,7 @@ var Calendar = function Calendar(_ref) {
   })));
 };
 
-var _excluded$j = ["rounded", "size", "testID", "style"];
+var _excluded$l = ["rounded", "size", "testID", "style"];
 var Image = function Image(_ref) {
   var _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? false : _ref$rounded,
@@ -11815,7 +11525,7 @@ var Image = function Image(_ref) {
     size = _ref$size === void 0 ? '6xlarge' : _ref$size,
     testID = _ref.testID,
     style = _ref.style,
-    imageNativeProps = _objectWithoutProperties(_ref, _excluded$j);
+    imageNativeProps = _objectWithoutProperties(_ref, _excluded$l);
   var theme = useTheme();
   var imageSize = theme.__hd__.image.sizes[size];
   return /*#__PURE__*/React__default["default"].createElement(reactNative.Image, _extends$1({
@@ -12020,12 +11730,12 @@ var Indicator = index$a(reactNative.View)(function (_ref2) {
   };
 });
 
-var _excluded$i = ["intent", "children"];
+var _excluded$k = ["intent", "children"];
 var DataCard = function DataCard(_ref) {
   var _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'info' : _ref$intent,
     children = _ref.children,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$i);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$k);
   return /*#__PURE__*/React__default["default"].createElement(StyledDataCard, nativeProps, /*#__PURE__*/React__default["default"].createElement(Indicator, {
     themeIntent: intent,
     testID: "data-card-indicator"
@@ -12043,11 +11753,11 @@ var StyledCard$1 = index$a(reactNative.View)(function (_ref) {
   });
 });
 
-var _excluded$h = ["intent", "children"];
+var _excluded$j = ["intent", "children"];
 var Card = function Card(_ref) {
   var intent = _ref.intent,
     children = _ref.children,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$h);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$j);
   return /*#__PURE__*/React__default["default"].createElement(StyledCard$1, _extends$1({}, nativeProps, {
     themeIntent: intent
   }), children);
@@ -12254,7 +11964,7 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 CardCarousel.displayName = 'CardCarousel';
 
-var _excluded$g = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
+var _excluded$i = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
 function useStateFromProp(initialValue) {
   var _useState = React.useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -12280,7 +11990,7 @@ var Carousel = function Carousel(_ref) {
     testID = _ref.testID,
     _ref$pageControlPosit = _ref.pageControlPosition,
     pageControlPosition = _ref$pageControlPosit === void 0 ? 'top' : _ref$pageControlPosit,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$g);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$i);
   useDeprecation("shouldShowPagination prop has been deprecated", shouldShowPagination !== noop);
   useDeprecation("The use of 'pageControlPosition == bottom' has been deprecated", pageControlPosition === 'bottom');
   var carouselRef = React.useRef(null);
@@ -12365,15 +12075,150 @@ var Carousel = function Carousel(_ref) {
         width: width
       });
     }
-  }), /*#__PURE__*/React__default["default"].createElement(StyledCarouselFooterWrapper, null, renderActions && renderActions(currentSlideIndex), pageControlPosition === 'bottom' && shouldShowPagination(currentSlideIndex) && /*#__PURE__*/React__default["default"].createElement(StyledPageControl$1, {
-    numberOfPages: items.length,
-    currentPage: currentSlideIndex
-  }))));
-};
-var index$8 = Object.assign(Carousel, {
-  Card: CardCarousel
+  }), /*#__PURE__*/React__default["default"].createElement(StyledCarouselFooterWrapper, null, renderActions && renderActions(currentSlideIndex), pageControlPosition === 'bottom' && shouldShowPagination(currentSlideIndex) && /*#__PURE__*/React__default["default"].createElement(StyledPageControl$1, {
+    numberOfPages: items.length,
+    currentPage: currentSlideIndex
+  }))));
+};
+var index$8 = Object.assign(Carousel, {
+  Card: CardCarousel
+});
+
+var StyledChipWrapper = index$a(reactNative.TouchableOpacity)(function (_ref) {
+  var themeVariant = _ref.themeVariant,
+    themeSelected = _ref.themeSelected,
+    theme = _ref.theme;
+  var getShadowStyles = function getShadowStyles() {
+    switch (themeVariant) {
+      case 'filled':
+        return _objectSpread2({}, theme.__hd__.chip.shadows.filledWrapper);
+      case 'outlined':
+        return undefined;
+    }
+  };
+  var getBorderStyles = function getBorderStyles() {
+    var commonStyle = {
+      borderWidth: theme.__hd__.chip.sizes.wrapperBorder
+    };
+    if (themeSelected) {
+      return _objectSpread2(_objectSpread2({}, commonStyle), {}, {
+        borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder
+      });
+    }
+    switch (themeVariant) {
+      case 'outlined':
+        {
+          return _objectSpread2(_objectSpread2({}, commonStyle), {}, {
+            borderColor: theme.__hd__.chip.colors.wrapperBorder
+          });
+        }
+      case 'filled':
+        {
+          return _objectSpread2(_objectSpread2({}, commonStyle), {}, {
+            borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder
+          });
+        }
+    }
+  };
+  var getBackgroundStyles = function getBackgroundStyles() {
+    if (themeSelected) {
+      switch (themeVariant) {
+        case 'outlined':
+          {
+            return {
+              backgroundColor: theme.__hd__.chip.colors.primaryBackground
+            };
+          }
+        case 'filled':
+          return {
+            backgroundColor: theme.__hd__.chip.colors.secondaryBackground
+          };
+      }
+    } else {
+      switch (themeVariant) {
+        case 'outlined':
+          {
+            return {
+              backgroundColor: theme.__hd__.chip.colors.outlinedBackground
+            };
+          }
+        case 'filled':
+          return {
+            backgroundColor: theme.__hd__.chip.colors.filledBackground
+          };
+      }
+    }
+  };
+  return _objectSpread2(_objectSpread2(_objectSpread2({
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: theme.__hd__.chip.radii.wrapper,
+    paddingVertical: theme.__hd__.chip.space.wrapperVerticalPadding,
+    paddingHorizontal: theme.__hd__.chip.space.wrapperHorizontalPadding,
+    borderWidth: theme.__hd__.chip.sizes.wrapperBorder
+  }, getShadowStyles()), getBorderStyles()), getBackgroundStyles());
+});
+var StyledIconWrapper$3 = index$a(Box)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    marginRight: theme.__hd__.chip.space.iconWrapperMarginRight
+  };
+});
+var StyledLabel$1 = index$a(Typography.Body)(function (_ref3) {
+  var themeSelected = _ref3.themeSelected,
+    themeVariant = _ref3.themeVariant,
+    theme = _ref3.theme;
+  return {
+    color: themeSelected && themeVariant === 'outlined' ? theme.__hd__.chip.colors.selectedPrimaryText : undefined
+  };
+});
+var StyledIcon$1 = index$a(Icon)(function (_ref4) {
+  var themeSelected = _ref4.themeSelected,
+    themeVariant = _ref4.themeVariant,
+    theme = _ref4.theme;
+  return {
+    color: themeSelected && themeVariant === 'outlined' ? theme.__hd__.chip.colors.selectedPrimaryText : undefined
+  };
 });
 
+var _excluded$h = ["label", "variant", "selected", "icon", "onPress"];
+var Chip = function Chip(_ref) {
+  var label = _ref.label,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
+    _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? false : _ref$selected,
+    icon = _ref.icon,
+    onPress = _ref.onPress,
+    otherProps = _objectWithoutProperties(_ref, _excluded$h);
+  var internalIcon = React__default["default"].useMemo(function () {
+    if (icon && variant === 'filled') {
+      return icon;
+    }
+    if (selected) {
+      return 'checkmark';
+    }
+    return undefined;
+  }, [icon, selected, variant]);
+  return /*#__PURE__*/React__default["default"].createElement(StyledChipWrapper, _extends$1({
+    onPress: onPress,
+    themeVariant: variant,
+    themeSelected: selected
+  }, otherProps), internalIcon && /*#__PURE__*/React__default["default"].createElement(StyledIconWrapper$3, null, /*#__PURE__*/React__default["default"].createElement(StyledIcon$1, {
+    size: "xsmall",
+    icon: internalIcon,
+    themeSelected: selected,
+    themeVariant: variant,
+    testID: "chip-icon-".concat(internalIcon)
+  })), /*#__PURE__*/React__default["default"].createElement(StyledLabel$1, {
+    variant: "small",
+    themeVariant: variant,
+    themeSelected: selected
+  }, label));
+};
+
 var StyledWrapper$7 = index$a(reactNative.TouchableOpacity)(function (_ref) {
   var theme = _ref.theme,
     themeState = _ref.themeState;
@@ -12617,7 +12462,7 @@ var StyledErrorAndMaxLengthContainer = index$a(reactNative.View)(function () {
   };
 });
 
-var _excluded$f = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant"];
+var _excluded$g = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant"];
 var getState$1 = function getState(_ref) {
   var disabled = _ref.disabled,
     error = _ref.error,
@@ -12669,7 +12514,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     allowFontScaling = _ref2$allowFontScalin === void 0 ? false : _ref2$allowFontScalin,
     _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? 'text' : _ref2$variant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$f);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$g);
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
   var actualSuffix = loading ? 'loading' : suffix;
@@ -13103,380 +12948,706 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
         }
         setOpen(false);
       }
-    })
-  }, /*#__PURE__*/React__default["default"].createElement(StyledPickerWrapper$1, null, /*#__PURE__*/React__default["default"].createElement(DateTimePicker__default["default"], {
-    testID: "datePickerIOS",
-    value: selectingDate,
-    minimumDate: minDate,
-    maximumDate: maxDate,
-    mode: "date",
-    onChange: function onChange(_, date) {
-      if (date) {
-        setSelectingDate(date);
+    })
+  }, /*#__PURE__*/React__default["default"].createElement(StyledPickerWrapper$1, null, /*#__PURE__*/React__default["default"].createElement(DateTimePicker__default["default"], {
+    testID: "datePickerIOS",
+    value: selectingDate,
+    minimumDate: minDate,
+    maximumDate: maxDate,
+    mode: "date",
+    onChange: function onChange(_, date) {
+      if (date) {
+        setSelectingDate(date);
+      }
+    },
+    display: "spinner",
+    style: {
+      flex: 1
+    },
+    textColor: theme.colors.onDefaultGlobalSurface
+  }))));
+};
+
+var _excluded$f = ["variant"];
+var DatePicker = function DatePicker(_ref) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    props = _objectWithoutProperties(_ref, _excluded$f);
+  if (variant === 'calendar') {
+    return /*#__PURE__*/React__default["default"].createElement(DatePickerCalendar, props);
+  }
+  if (reactNative.Platform.OS === 'ios') {
+    return /*#__PURE__*/React__default["default"].createElement(DatePickerIOS, props);
+  }
+  return /*#__PURE__*/React__default["default"].createElement(DatePickerAndroid, props);
+};
+
+var AnimatedPressable$1 = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
+var StyledContainer$3 = index$a(reactNative.View)(function (_ref) {
+  var theme = _ref.theme,
+    enableShadow = _ref.enableShadow;
+  return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
+    shadowColor: enableShadow ? theme.__hd__.drawer.colors.shadow : 'transparent',
+    shadowOffset: theme.__hd__.drawer.shadows.offset,
+    shadowOpacity: theme.__hd__.drawer.shadows.opacity,
+    shadowRadius: theme.__hd__.drawer.shadows.radius,
+    overflow: 'hidden',
+    zIndex: 9999,
+    elevation: 9999
+  });
+});
+var StyledDragableContainer = index$a(reactNative.View)(function (_ref2) {
+  var theme = _ref2.theme,
+    enableShadow = _ref2.enableShadow;
+  return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
+    shadowColor: enableShadow ? theme.__hd__.drawer.colors.shadow : 'transparent',
+    shadowOffset: theme.__hd__.drawer.shadows.offset,
+    shadowOpacity: theme.__hd__.drawer.shadows.opacity,
+    shadowRadius: theme.__hd__.drawer.shadows.radius,
+    overflow: 'hidden',
+    zIndex: 9999,
+    elevation: 9999,
+    flexDirection: 'column-reverse'
+  });
+});
+var StyledBackdrop$1 = index$a(AnimatedPressable$1)(function (_ref3) {
+  var theme = _ref3.theme;
+  return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
+    backgroundColor: theme.__hd__.drawer.colors.backdrop
+  });
+});
+var StyledDrawerContainer = index$a(reactNative.Animated.View)(function (_ref4) {
+  var theme = _ref4.theme,
+    enableShadow = _ref4.enableShadow;
+  return {
+    borderBottomLeftRadius: theme.__hd__.drawer.radii["default"],
+    borderBottomRightRadius: theme.__hd__.drawer.radii["default"],
+    backgroundColor: theme.__hd__.drawer.colors.background,
+    elevation: enableShadow ? theme.__hd__.drawer.shadows.elevation : undefined,
+    overflow: 'hidden'
+  };
+});
+var StyledDragableDrawerContainer = index$a(reactNative.Animated.View)(function (_ref5) {
+  var theme = _ref5.theme,
+    enableShadow = _ref5.enableShadow;
+  return {
+    borderTopLeftRadius: theme.__hd__.drawer.radii["default"],
+    borderTopRightRadius: theme.__hd__.drawer.radii["default"],
+    backgroundColor: theme.__hd__.drawer.colors.background,
+    elevation: enableShadow ? theme.__hd__.drawer.shadows.elevation : undefined,
+    overflow: 'hidden',
+    maxHeight: '100%'
+  };
+});
+var StyledHandlerContainer = index$a(reactNative.View)(function (_ref6) {
+  var theme = _ref6.theme;
+  return {
+    backgroundColor: theme.__hd__.drawer.colors.background,
+    paddingVertical: theme.__hd__.drawer.space.handlerPaddingVertical,
+    alignItems: 'center'
+  };
+});
+var StyledHandler = index$a(reactNative.View)(function (_ref7) {
+  var theme = _ref7.theme;
+  return {
+    width: theme.__hd__.drawer.sizes.handlerWidth,
+    height: theme.__hd__.drawer.sizes.handlerHeight,
+    backgroundColor: theme.__hd__.drawer.colors.handler,
+    borderRadius: theme.__hd__.drawer.radii.handler
+  };
+});
+
+var getOffset = function getOffset(height, percentage) {
+  if (percentage < 0) return height;
+  if (percentage > 100) return 0;
+  return height * ((100 - percentage) / 100);
+};
+var calculateSnapPointsData = function calculateSnapPointsData(minimumHeight, height, snapPoints) {
+  var filteredSnapPoints = snapPoints.filter(function (value) {
+    return value >= minimumHeight;
+  });
+  var snapPointsOffsetValues = [minimumHeight].concat(_toConsumableArray(filteredSnapPoints)).map(function (value) {
+    return getOffset(height, value);
+  });
+  var uniqSnapPointOffsetValues = Array.from(new Set([].concat(_toConsumableArray(snapPointsOffsetValues), [0])));
+  return {
+    list: uniqSnapPointOffsetValues,
+    minHeightOffset: Math.max.apply(Math, uniqSnapPointOffsetValues),
+    maxHeightOffset: 0 // Max height
+  };
+};
+
+var calculateAnimatedToValue = function calculateAnimatedToValue(position, heightSnapPoints) {
+  var distances = heightSnapPoints.map(function (height) {
+    return Math.abs(position - height);
+  });
+  var minIndex = distances.indexOf(Math.min.apply(Math, _toConsumableArray(distances)));
+  return heightSnapPoints[minIndex];
+};
+
+var DragableDrawer = function DragableDrawer(_ref) {
+  var children = _ref.children,
+    initialHeightPercentage = _ref.initialHeightPercentage,
+    _ref$minimumHeightPer = _ref.minimumHeightPercentage,
+    minimumHeightPercentage = _ref$minimumHeightPer === void 0 ? 10 : _ref$minimumHeightPer,
+    _ref$snapPoints = _ref.snapPoints,
+    snapPoints = _ref$snapPoints === void 0 ? [] : _ref$snapPoints,
+    onExpanded = _ref.onExpanded,
+    onCollapsed = _ref.onCollapsed,
+    testID = _ref.testID;
+  var _useState = React.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  var baseHeightForMeasure = React.useRef(0);
+  var snapPointsData = React.useRef({
+    list: [],
+    minHeightOffset: 0,
+    maxHeightOffset: 0
+  });
+  // Track drag
+  var pan = React.useRef(new reactNative.Animated.Value(0)).current;
+  var offset = React.useRef(0);
+  var offsetBeforePan = React.useRef(0);
+  var _useState3 = React.useState(-1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    animatedToValue = _useState4[0],
+    setAnimatedToValue = _useState4[1];
+  React.useEffect(function () {
+    var id = pan.addListener(function (_ref2) {
+      var value = _ref2.value;
+      offset.current = value;
+    });
+    return function () {
+      return pan.removeListener(id);
+    };
+  }, []);
+  React.useEffect(function () {
+    if (height > 0) {
+      var initialOffset = getOffset(height, initialHeightPercentage || minimumHeightPercentage);
+      setAnimatedToValue(initialOffset);
+    }
+  }, [height]);
+  React.useEffect(function () {
+    if (height > 0) {
+      pan.setValue(height);
+      offset.current = height;
+      baseHeightForMeasure.current = height;
+      // Calculate snap points information
+      snapPointsData.current = calculateSnapPointsData(minimumHeightPercentage, height, snapPoints);
+    }
+  }, [height, minimumHeightPercentage]);
+  React.useEffect(function () {
+    if (animatedToValue >= 0) {
+      var animation = reactNative.Animated.timing(pan, {
+        toValue: animatedToValue,
+        useNativeDriver: true,
+        easing: reactNative.Easing.inOut(reactNative.Easing.cubic)
+      });
+      animation.start(function () {
+        if (animatedToValue === 0) {
+          onExpanded === null || onExpanded === void 0 ? void 0 : onExpanded();
+        } else if (animatedToValue === getOffset(height, minimumHeightPercentage)) {
+          onCollapsed === null || onCollapsed === void 0 ? void 0 : onCollapsed();
+        }
+        setAnimatedToValue(-1);
+      });
+      return function () {
+        return animation.stop();
+      };
+    }
+  }, [animatedToValue]);
+  var panResponder = React.useRef(reactNative.PanResponder.create({
+    onMoveShouldSetPanResponder: function onMoveShouldSetPanResponder() {
+      return true;
+    },
+    onPanResponderGrant: function onPanResponderGrant() {
+      offsetBeforePan.current = offset.current;
+      pan.setOffset(offset.current);
+      pan.setValue(0);
+    },
+    onPanResponderMove: function onPanResponderMove(_, gesture) {
+      var _snapPointsData$curre;
+      var panDistance = gesture.dy;
+      // Moving toward top, stop at highest snap point
+      if (offsetBeforePan.current + panDistance < 0) {
+        pan.setValue(-offsetBeforePan.current);
+        return;
+      }
+      // Moving toward bottom, stop at lowest snap point
+      if (offsetBeforePan.current + panDistance > ((_snapPointsData$curre = snapPointsData.current) === null || _snapPointsData$curre === void 0 ? void 0 : _snapPointsData$curre.minHeightOffset)) {
+        pan.setValue(baseHeightForMeasure.current - baseHeightForMeasure.current * (minimumHeightPercentage / 100) - offsetBeforePan.current);
+        return;
       }
+      pan.setValue(panDistance);
     },
-    display: "spinner",
+    onPanResponderRelease: function onPanResponderRelease(_, gesture) {
+      pan.flattenOffset();
+      // Attach to nearest snappoint
+      var panDistance = gesture.dy;
+      var offsetAfterPan = offsetBeforePan.current + panDistance;
+      var animatedValue = calculateAnimatedToValue(offsetAfterPan, snapPointsData.current.list);
+      setAnimatedToValue(animatedValue);
+    }
+  })).current;
+  return /*#__PURE__*/React__default["default"].createElement(StyledDragableContainer, {
+    testID: testID,
+    enableShadow: true,
+    pointerEvents: "box-none"
+  }, /*#__PURE__*/React__default["default"].createElement(StyledDragableDrawerContainer, {
+    enableShadow: true,
     style: {
-      flex: 1
+      transform: [{
+        scaleY: baseHeightForMeasure.current > 0 ? 1 : 0
+      }, {
+        translateY: pan
+      }]
     },
-    textColor: theme.colors.onDefaultGlobalSurface
-  }))));
-};
-
-var _excluded$e = ["variant"];
-var DatePicker = function DatePicker(_ref) {
-  var _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-    props = _objectWithoutProperties(_ref, _excluded$e);
-  if (variant === 'calendar') {
-    return /*#__PURE__*/React__default["default"].createElement(DatePickerCalendar, props);
-  }
-  if (reactNative.Platform.OS === 'ios') {
-    return /*#__PURE__*/React__default["default"].createElement(DatePickerIOS, props);
-  }
-  return /*#__PURE__*/React__default["default"].createElement(DatePickerAndroid, props);
+    onLayout: function onLayout(_ref3) {
+      var nativeEvent = _ref3.nativeEvent;
+      setHeight(nativeEvent.layout.height);
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(StyledHandlerContainer, panResponder.panHandlers, /*#__PURE__*/React__default["default"].createElement(StyledHandler, null)), children));
 };
 
-var AnimatedPressable$1 = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
-var StyledContainer$3 = index$a(reactNative.View)(function (_ref) {
-  var theme = _ref.theme,
-    enableShadow = _ref.enableShadow;
-  return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
-    shadowColor: enableShadow ? theme.__hd__.drawer.colors.shadow : 'transparent',
-    shadowOffset: theme.__hd__.drawer.shadows.offset,
-    shadowOpacity: theme.__hd__.drawer.shadows.opacity,
-    shadowRadius: theme.__hd__.drawer.shadows.radius,
-    overflow: 'hidden',
-    zIndex: 9999,
-    elevation: 9999
-  });
-});
-var StyledDragableContainer = index$a(reactNative.View)(function (_ref2) {
-  var theme = _ref2.theme,
-    enableShadow = _ref2.enableShadow;
-  return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
-    shadowColor: enableShadow ? theme.__hd__.drawer.colors.shadow : 'transparent',
-    shadowOffset: theme.__hd__.drawer.shadows.offset,
-    shadowOpacity: theme.__hd__.drawer.shadows.opacity,
-    shadowRadius: theme.__hd__.drawer.shadows.radius,
-    overflow: 'hidden',
-    zIndex: 9999,
-    elevation: 9999,
-    flexDirection: 'column-reverse'
-  });
-});
-var StyledBackdrop$1 = index$a(AnimatedPressable$1)(function (_ref3) {
-  var theme = _ref3.theme;
-  return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
-    backgroundColor: theme.__hd__.drawer.colors.backdrop
+var Drawer = function Drawer(_ref) {
+  var visible = _ref.visible,
+    children = _ref.children,
+    _ref$hasBackdrop = _ref.hasBackdrop,
+    hasBackdrop = _ref$hasBackdrop === void 0 ? true : _ref$hasBackdrop,
+    onDismiss = _ref.onDismiss,
+    testID = _ref.testID;
+  var animatedValue = React.useRef(new reactNative.Animated.Value(visible ? 1 : 0)).current;
+  var _useState = React.useState(reactNative.Dimensions.get('window').height),
+    _useState2 = _slicedToArray(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  var enableShadow = visible && !hasBackdrop;
+  var interpolateTranslateY = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-height, 0]
   });
+  var interpolateBackdropOpacity = hasBackdrop ? animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 0.35]
+  }) : 0;
+  React.useEffect(function () {
+    var animation = reactNative.Animated.timing(animatedValue, {
+      toValue: visible ? 1 : 0,
+      easing: reactNative.Easing.inOut(reactNative.Easing.cubic),
+      useNativeDriver: true
+    });
+    animation.start();
+    return function () {
+      return animation.stop();
+    };
+  }, [visible]);
+  return /*#__PURE__*/React__default["default"].createElement(StyledContainer$3, {
+    testID: testID,
+    enableShadow: enableShadow,
+    pointerEvents: "box-none"
+  }, /*#__PURE__*/React__default["default"].createElement(StyledBackdrop$1, {
+    pointerEvents: visible ? 'auto' : 'box-none',
+    onPress: onDismiss,
+    style: {
+      opacity: interpolateBackdropOpacity
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(StyledDrawerContainer, {
+    enableShadow: enableShadow,
+    onLayout: function onLayout(_ref2) {
+      var nativeEvent = _ref2.nativeEvent;
+      return setHeight(nativeEvent.layout.height);
+    },
+    style: {
+      transform: [{
+        translateY: interpolateTranslateY
+      }]
+    }
+  }, children));
+};
+var index$7 = Object.assign(Drawer, {
+  Dragable: DragableDrawer
 });
-var StyledDrawerContainer = index$a(reactNative.Animated.View)(function (_ref4) {
-  var theme = _ref4.theme,
-    enableShadow = _ref4.enableShadow;
+
+var StyledWrapper$6 = index$a(reactNative.View)(function (_ref) {
+  var theme = _ref.theme;
   return {
-    borderBottomLeftRadius: theme.__hd__.drawer.radii["default"],
-    borderBottomRightRadius: theme.__hd__.drawer.radii["default"],
-    backgroundColor: theme.__hd__.drawer.colors.background,
-    elevation: enableShadow ? theme.__hd__.drawer.shadows.elevation : undefined,
-    overflow: 'hidden'
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: theme.__hd__.empty.space.wrapperPadding
   };
 });
-var StyledDragableDrawerContainer = index$a(reactNative.Animated.View)(function (_ref5) {
-  var theme = _ref5.theme,
-    enableShadow = _ref5.enableShadow;
+var StyledTitle = index$a(Typography.Title)(function (_ref2) {
+  var theme = _ref2.theme,
+    themeVariant = _ref2.themeVariant;
   return {
-    borderTopLeftRadius: theme.__hd__.drawer.radii["default"],
-    borderTopRightRadius: theme.__hd__.drawer.radii["default"],
-    backgroundColor: theme.__hd__.drawer.colors.background,
-    elevation: enableShadow ? theme.__hd__.drawer.shadows.elevation : undefined,
-    overflow: 'hidden',
-    maxHeight: '100%'
+    textAlign: 'center',
+    marginBottom: theme.__hd__.empty.space.titleMargin,
+    color: themeVariant === 'dark' ? theme.__hd__.empty.colors.invertedText : theme.__hd__.empty.colors.text
   };
 });
-var StyledHandlerContainer = index$a(reactNative.View)(function (_ref6) {
-  var theme = _ref6.theme;
+var StyledDescription = index$a(Typography.Body)(function (_ref3) {
+  var theme = _ref3.theme,
+    themeVariant = _ref3.themeVariant;
   return {
-    backgroundColor: theme.__hd__.drawer.colors.background,
-    paddingVertical: theme.__hd__.drawer.space.handlerPaddingVertical,
-    alignItems: 'center'
+    textAlign: 'center',
+    color: themeVariant === 'dark' ? theme.__hd__.empty.colors.invertedSubduedText : theme.__hd__.empty.colors.subduedText
   };
 });
-var StyledHandler = index$a(reactNative.View)(function (_ref7) {
-  var theme = _ref7.theme;
-  return {
-    width: theme.__hd__.drawer.sizes.handlerWidth,
-    height: theme.__hd__.drawer.sizes.handlerHeight,
-    backgroundColor: theme.__hd__.drawer.colors.handler,
-    borderRadius: theme.__hd__.drawer.radii.handler
+
+var Empty = function Empty(_ref) {
+  var image = _ref.image,
+    title = _ref.title,
+    description = _ref.description,
+    style = _ref.style,
+    testID = _ref.testID,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'light' : _ref$variant;
+  var theme = useTheme();
+  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$6, {
+    style: style,
+    testID: testID
+  }, image !== undefined && /*#__PURE__*/React__default["default"].cloneElement(image, _objectSpread2(_objectSpread2({}, image.props), {}, {
+    style: [{
+      marginBottom: theme.__hd__.empty.space.imageMargin
+    }, image.props.style]
+  })), /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
+    themeVariant: variant,
+    level: "h4",
+    typeface: "playful"
+  }, title), !!description && /*#__PURE__*/React__default["default"].createElement(StyledDescription, {
+    themeVariant: variant,
+    typeface: "playful"
+  }, description));
+};
+
+var customAlphabet = function customAlphabet(alphabet) {
+  var defaultSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 21;
+  return function () {
+    var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultSize;
+    var id = '';
+    var i = size;
+    while (i--) {
+      id += alphabet[Math.random() * alphabet.length | 0];
+    }
+    return id;
   };
-});
+};
+
+var ACTIONS;
+(function (ACTIONS) {
+  ACTIONS[ACTIONS["REGISTER_HOST"] = 0] = "REGISTER_HOST";
+  ACTIONS[ACTIONS["DEREGISTER_HOST"] = 1] = "DEREGISTER_HOST";
+  ACTIONS[ACTIONS["ADD_UPDATE_PORTAL"] = 2] = "ADD_UPDATE_PORTAL";
+  ACTIONS[ACTIONS["REMOVE_PORTAL"] = 3] = "REMOVE_PORTAL";
+})(ACTIONS || (ACTIONS = {}));
+var INITIAL_STATE = {};
+
+var PortalStateContext = /*#__PURE__*/React.createContext(null);
+var PortalDispatchContext = /*#__PURE__*/React.createContext(null);
 
-var getOffset = function getOffset(height, percentage) {
-  if (percentage < 0) return height;
-  if (percentage > 100) return 0;
-  return height * ((100 - percentage) / 100);
-};
-var calculateSnapPointsData = function calculateSnapPointsData(minimumHeight, height, snapPoints) {
-  var filteredSnapPoints = snapPoints.filter(function (value) {
-    return value >= minimumHeight;
-  });
-  var snapPointsOffsetValues = [minimumHeight].concat(_toConsumableArray(filteredSnapPoints)).map(function (value) {
-    return getOffset(height, value);
-  });
-  var uniqSnapPointOffsetValues = Array.from(new Set([].concat(_toConsumableArray(snapPointsOffsetValues), [0])));
+var usePortal = function usePortal() {
+  var hostName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'root';
+  var dispatch = React.useContext(PortalDispatchContext);
+  if (dispatch === null) {
+    throw new Error("You must add 'PortalProvider' to the root component.");
+  }
+  var registerHost = React.useCallback(function () {
+    dispatch({
+      type: ACTIONS.REGISTER_HOST,
+      hostName: hostName
+    });
+  }, []);
+  var deregisterHost = React.useCallback(function () {
+    dispatch({
+      type: ACTIONS.DEREGISTER_HOST,
+      hostName: hostName
+    });
+  }, []);
+  var addUpdatePortal = React.useCallback(function (name, node) {
+    dispatch({
+      type: ACTIONS.ADD_UPDATE_PORTAL,
+      hostName: hostName,
+      portalName: name,
+      node: node
+    });
+  }, []);
+  var removePortal = React.useCallback(function (name) {
+    dispatch({
+      type: ACTIONS.REMOVE_PORTAL,
+      hostName: hostName,
+      portalName: name
+    });
+  }, []);
   return {
-    list: uniqSnapPointOffsetValues,
-    minHeightOffset: Math.max.apply(Math, uniqSnapPointOffsetValues),
-    maxHeightOffset: 0 // Max height
+    registerHost: registerHost,
+    deregisterHost: deregisterHost,
+    addPortal: addUpdatePortal,
+    updatePortal: addUpdatePortal,
+    removePortal: removePortal
   };
 };
 
-var calculateAnimatedToValue = function calculateAnimatedToValue(position, heightSnapPoints) {
-  var distances = heightSnapPoints.map(function (height) {
-    return Math.abs(position - height);
-  });
-  var minIndex = distances.indexOf(Math.min.apply(Math, _toConsumableArray(distances)));
-  return heightSnapPoints[minIndex];
+var usePortalState = function usePortalState(hostName) {
+  var state = React.useContext(PortalStateContext);
+  if (state === null) {
+    throw new Error("You must add 'PortalProvider' to the root component.");
+  }
+  return state[hostName] || [];
 };
 
-var DragableDrawer = function DragableDrawer(_ref) {
-  var children = _ref.children,
-    initialHeightPercentage = _ref.initialHeightPercentage,
-    _ref$minimumHeightPer = _ref.minimumHeightPercentage,
-    minimumHeightPercentage = _ref$minimumHeightPer === void 0 ? 10 : _ref$minimumHeightPer,
-    _ref$snapPoints = _ref.snapPoints,
-    snapPoints = _ref$snapPoints === void 0 ? [] : _ref$snapPoints,
-    onExpanded = _ref.onExpanded,
-    onCollapsed = _ref.onCollapsed,
-    testID = _ref.testID;
-  var _useState = React.useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    height = _useState2[0],
-    setHeight = _useState2[1];
-  var baseHeightForMeasure = React.useRef(0);
-  var snapPointsData = React.useRef({
-    list: [],
-    minHeightOffset: 0,
-    maxHeightOffset: 0
-  });
-  // Track drag
-  var pan = React.useRef(new reactNative.Animated.Value(0)).current;
-  var offset = React.useRef(0);
-  var offsetBeforePan = React.useRef(0);
-  var _useState3 = React.useState(-1),
-    _useState4 = _slicedToArray(_useState3, 2),
-    animatedToValue = _useState4[0],
-    setAnimatedToValue = _useState4[1];
+var PortalHostComponent = function PortalHostComponent(_ref) {
+  var name = _ref.name;
+  var state = usePortalState(name);
+  var _usePortal = usePortal(name),
+    registerHost = _usePortal.registerHost,
+    deregisterHost = _usePortal.deregisterHost;
   React.useEffect(function () {
-    var id = pan.addListener(function (_ref2) {
-      var value = _ref2.value;
-      offset.current = value;
-    });
+    registerHost();
     return function () {
-      return pan.removeListener(id);
+      deregisterHost();
     };
   }, []);
-  React.useEffect(function () {
-    if (height > 0) {
-      var initialOffset = getOffset(height, initialHeightPercentage || minimumHeightPercentage);
-      setAnimatedToValue(initialOffset);
-    }
-  }, [height]);
-  React.useEffect(function () {
-    if (height > 0) {
-      pan.setValue(height);
-      offset.current = height;
-      baseHeightForMeasure.current = height;
-      // Calculate snap points information
-      snapPointsData.current = calculateSnapPointsData(minimumHeightPercentage, height, snapPoints);
-    }
-  }, [height, minimumHeightPercentage]);
-  React.useEffect(function () {
-    if (animatedToValue >= 0) {
-      var animation = reactNative.Animated.timing(pan, {
-        toValue: animatedToValue,
-        useNativeDriver: true,
-        easing: reactNative.Easing.inOut(reactNative.Easing.cubic)
-      });
-      animation.start(function () {
-        if (animatedToValue === 0) {
-          onExpanded === null || onExpanded === void 0 ? void 0 : onExpanded();
-        } else if (animatedToValue === getOffset(height, minimumHeightPercentage)) {
-          onCollapsed === null || onCollapsed === void 0 ? void 0 : onCollapsed();
-        }
-        setAnimatedToValue(-1);
-      });
-      return function () {
-        return animation.stop();
-      };
-    }
-  }, [animatedToValue]);
-  var panResponder = React.useRef(reactNative.PanResponder.create({
-    onMoveShouldSetPanResponder: function onMoveShouldSetPanResponder() {
-      return true;
-    },
-    onPanResponderGrant: function onPanResponderGrant() {
-      offsetBeforePan.current = offset.current;
-      pan.setOffset(offset.current);
-      pan.setValue(0);
-    },
-    onPanResponderMove: function onPanResponderMove(_, gesture) {
-      var _snapPointsData$curre;
-      var panDistance = gesture.dy;
-      // Moving toward top, stop at highest snap point
-      if (offsetBeforePan.current + panDistance < 0) {
-        pan.setValue(-offsetBeforePan.current);
-        return;
-      }
-      // Moving toward bottom, stop at lowest snap point
-      if (offsetBeforePan.current + panDistance > ((_snapPointsData$curre = snapPointsData.current) === null || _snapPointsData$curre === void 0 ? void 0 : _snapPointsData$curre.minHeightOffset)) {
-        pan.setValue(baseHeightForMeasure.current - baseHeightForMeasure.current * (minimumHeightPercentage / 100) - offsetBeforePan.current);
-        return;
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, state.map(function (item) {
+    return item.node;
+  }));
+};
+var PortalHost = /*#__PURE__*/React.memo(PortalHostComponent);
+PortalHost.displayName = 'PortalHost';
+
+var registerHostIfNotExist = function registerHostIfNotExist(state, hostName) {
+  if (!(hostName in state)) {
+    return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, hostName, []));
+  }
+  return _objectSpread2({}, state);
+};
+var deregisterHost = function deregisterHost(state, hostName) {
+  return _objectSpread2({}, omit([hostName], state));
+};
+var addUpdatePortal = function addUpdatePortal(state, hostName, portalName, node) {
+  var newState = registerHostIfNotExist(state, hostName);
+  var index = newState[hostName].findIndex(function (item) {
+    return item.name === portalName;
+  });
+  if (index !== -1) {
+    return _objectSpread2(_objectSpread2({}, newState), {}, _defineProperty({}, hostName, newState[hostName].map(function (item, i) {
+      if (index === i) {
+        return _objectSpread2(_objectSpread2({}, item), {}, {
+          node: node
+        });
       }
-      pan.setValue(panDistance);
-    },
-    onPanResponderRelease: function onPanResponderRelease(_, gesture) {
-      pan.flattenOffset();
-      // Attach to nearest snappoint
-      var panDistance = gesture.dy;
-      var offsetAfterPan = offsetBeforePan.current + panDistance;
-      var animatedValue = calculateAnimatedToValue(offsetAfterPan, snapPointsData.current.list);
-      setAnimatedToValue(animatedValue);
-    }
-  })).current;
-  return /*#__PURE__*/React__default["default"].createElement(StyledDragableContainer, {
-    testID: testID,
-    enableShadow: true,
-    pointerEvents: "box-none"
-  }, /*#__PURE__*/React__default["default"].createElement(StyledDragableDrawerContainer, {
-    enableShadow: true,
-    style: {
-      transform: [{
-        scaleY: baseHeightForMeasure.current > 0 ? 1 : 0
-      }, {
-        translateY: pan
-      }]
-    },
-    onLayout: function onLayout(_ref3) {
-      var nativeEvent = _ref3.nativeEvent;
-      setHeight(nativeEvent.layout.height);
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(StyledHandlerContainer, panResponder.panHandlers, /*#__PURE__*/React__default["default"].createElement(StyledHandler, null)), children));
+      return item;
+    })));
+  }
+  return _objectSpread2(_objectSpread2({}, newState), {}, _defineProperty({}, hostName, [].concat(_toConsumableArray(newState[hostName]), [{
+    name: portalName,
+    node: node
+  }])));
+};
+var removePortal = function removePortal(state, hostName, portalName) {
+  if (!(hostName in state)) {
+    return _objectSpread2({}, state);
+  }
+  return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, hostName, state[hostName].filter(function (item) {
+    return item.name !== portalName;
+  })));
+};
+var reducer = function reducer(state, action) {
+  var type = action.type;
+  switch (type) {
+    case ACTIONS.REGISTER_HOST:
+      return registerHostIfNotExist(state, action.hostName);
+    case ACTIONS.DEREGISTER_HOST:
+      return deregisterHost(state, action.hostName);
+    case ACTIONS.ADD_UPDATE_PORTAL:
+      return addUpdatePortal(state, action.hostName, action.portalName, action.node);
+    case ACTIONS.REMOVE_PORTAL:
+      return removePortal(state, action.hostName, action.portalName);
+    default:
+      return _objectSpread2({}, state);
+  }
+};
+
+var PortalProviderComponent = function PortalProviderComponent(_ref) {
+  var _ref$rootHostName = _ref.rootHostName,
+    rootHostName = _ref$rootHostName === void 0 ? 'root' : _ref$rootHostName,
+    children = _ref.children;
+  var _useReducer = React.useReducer(reducer, INITIAL_STATE),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  return /*#__PURE__*/React__default["default"].createElement(PortalDispatchContext.Provider, {
+    value: dispatch
+  }, /*#__PURE__*/React__default["default"].createElement(PortalStateContext.Provider, {
+    value: state
+  }, children, /*#__PURE__*/React__default["default"].createElement(PortalHost, {
+    name: rootHostName
+  })));
 };
+var PortalProvider = /*#__PURE__*/React.memo(PortalProviderComponent);
+PortalProvider.displayName = 'PortalProvider';
 
-var Drawer = function Drawer(_ref) {
-  var visible = _ref.visible,
+var nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 10);
+var PortalComponent = function PortalComponent(_ref) {
+  var name = _ref.name,
+    hostName = _ref.hostName,
     children = _ref.children,
-    _ref$hasBackdrop = _ref.hasBackdrop,
-    hasBackdrop = _ref$hasBackdrop === void 0 ? true : _ref$hasBackdrop,
-    onDismiss = _ref.onDismiss,
-    testID = _ref.testID;
-  var animatedValue = React.useRef(new reactNative.Animated.Value(visible ? 1 : 0)).current;
-  var _useState = React.useState(reactNative.Dimensions.get('window').height),
-    _useState2 = _slicedToArray(_useState, 2),
-    height = _useState2[0],
-    setHeight = _useState2[1];
-  var enableShadow = visible && !hasBackdrop;
-  var interpolateTranslateY = animatedValue.interpolate({
+    theme = _ref.theme;
+  var defaultTheme = useTheme();
+  var _usePortal = usePortal(hostName),
+    addUpdatePortal = _usePortal.addPortal,
+    removePortal = _usePortal.removePortal;
+  var nameOrRandom = React.useMemo(function () {
+    return name || nanoid();
+  }, [name]);
+  var ChildrenComponent = React.useMemo(function () {
+    return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
+      theme: theme || defaultTheme
+    }, children);
+  }, [theme, children, defaultTheme]);
+  React.useLayoutEffect(function () {
+    addUpdatePortal(nameOrRandom, ChildrenComponent);
+    return function () {
+      removePortal(nameOrRandom);
+    };
+  }, [addUpdatePortal]);
+  React.useLayoutEffect(function () {
+    addUpdatePortal(nameOrRandom, ChildrenComponent);
+  }, [ChildrenComponent]);
+  return null;
+};
+var Portal = /*#__PURE__*/React.memo(PortalComponent);
+Portal.displayName = 'Portal';
+var Portal$1 = Object.assign(Portal, {
+  Provider: PortalProvider,
+  Host: PortalHost
+});
+
+var _excluded$e = ["visible"];
+var DEFAULT_BACKDROP_OPACITY = 0.4;
+var DEFAULT_ANIMATION_CONFIG = {
+  easing: reactNative.Easing.inOut(reactNative.Easing.cubic),
+  useNativeDriver: reactNative.Platform.OS !== 'web',
+  duration: 400
+};
+var Modal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    onShow = _ref.onShow,
+    onRequestClose = _ref.onRequestClose,
+    testID = _ref.testID,
+    _ref$animationType = _ref.animationType,
+    animationType = _ref$animationType === void 0 ? 'none' : _ref$animationType,
+    _ref$transparent = _ref.transparent,
+    transparent = _ref$transparent === void 0 ? false : _ref$transparent,
+    onDismiss = _ref.onDismiss;
+  var theme = useTheme();
+  var animatedBackdropValue = React.useRef(new reactNative.Animated.Value(0)).current;
+  var animatedModalValue = React.useRef(new reactNative.Animated.Value(0)).current;
+  // Show or hide the backdrop and modal content
+  var animateBackdropAndContent = React.useCallback(function (_ref2) {
+    var toValue = _ref2.toValue,
+      callback = _ref2.callback;
+    if (animationType !== 'none') {
+      // Backdrop animation
+      if (!transparent) {
+        reactNative.Animated.timing(animatedBackdropValue, _objectSpread2({
+          toValue: toValue
+        }, DEFAULT_ANIMATION_CONFIG)).start();
+      }
+      // Modal content animation
+      reactNative.Animated.timing(animatedModalValue, _objectSpread2({
+        toValue: toValue
+      }, DEFAULT_ANIMATION_CONFIG)).start(callback);
+    } else {
+      callback === null || callback === void 0 ? void 0 : callback();
+    }
+  }, [animationType, onShow, transparent]);
+  var backdropOpacityAnimation = animatedBackdropValue.interpolate({
     inputRange: [0, 1],
-    outputRange: [-height, 0]
+    outputRange: [0, DEFAULT_BACKDROP_OPACITY]
   });
-  var interpolateBackdropOpacity = hasBackdrop ? animatedValue.interpolate({
+  var modalAnimation = animatedModalValue.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, 0.35]
-  }) : 0;
+    outputRange: animationType === 'slide' ? [reactNative.Dimensions.get('window').height, 0] : [0, 1]
+  });
+  React.useImperativeHandle(ref, function () {
+    return {
+      show: function show() {
+        animateBackdropAndContent({
+          toValue: 1,
+          callback: onShow
+        });
+      },
+      hide: function hide(wrapperCallback) {
+        animateBackdropAndContent({
+          toValue: 0,
+          callback: function callback() {
+            if (reactNative.Platform.OS === 'ios') {
+              onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+            }
+            wrapperCallback();
+          }
+        });
+      }
+    };
+  }, [onDismiss, onShow, animateBackdropAndContent]);
+  // Back button handler
   React.useEffect(function () {
-    var animation = reactNative.Animated.timing(animatedValue, {
-      toValue: visible ? 1 : 0,
-      easing: reactNative.Easing.inOut(reactNative.Easing.cubic),
-      useNativeDriver: true
+    var backHandler = reactNative.BackHandler.addEventListener('hardwareBackPress', function () {
+      onRequestClose === null || onRequestClose === void 0 ? void 0 : onRequestClose();
+      return true;
     });
-    animation.start();
     return function () {
-      return animation.stop();
+      return backHandler.remove();
     };
-  }, [visible]);
-  return /*#__PURE__*/React__default["default"].createElement(StyledContainer$3, {
+  }, [onRequestClose]);
+  return /*#__PURE__*/React__default["default"].createElement(Portal$1, null, /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
+    style: _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
+      backgroundColor: transparent ? 'transparent' : theme.colors.overlayGlobalSurface,
+      opacity: animationType !== 'none' ? backdropOpacityAnimation : DEFAULT_BACKDROP_OPACITY
+    })
+  }), /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
     testID: testID,
-    enableShadow: enableShadow,
-    pointerEvents: "box-none"
-  }, /*#__PURE__*/React__default["default"].createElement(StyledBackdrop$1, {
-    pointerEvents: visible ? 'auto' : 'box-none',
-    onPress: onDismiss,
-    style: {
-      opacity: interpolateBackdropOpacity
-    }
-  }), /*#__PURE__*/React__default["default"].createElement(StyledDrawerContainer, {
-    enableShadow: enableShadow,
-    onLayout: function onLayout(_ref2) {
-      var nativeEvent = _ref2.nativeEvent;
-      return setHeight(nativeEvent.layout.height);
-    },
-    style: {
+    style: _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
+      opacity: animationType === 'fade' ? modalAnimation : 1,
       transform: [{
-        translateY: interpolateTranslateY
+        translateY: animationType === 'slide' ? modalAnimation : 0
       }]
-    }
+    })
   }, children));
-};
-var index$7 = Object.assign(Drawer, {
-  Dragable: DragableDrawer
-});
-
-var StyledWrapper$6 = index$a(reactNative.View)(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: theme.__hd__.empty.space.wrapperPadding
-  };
-});
-var StyledTitle = index$a(Typography.Title)(function (_ref2) {
-  var theme = _ref2.theme,
-    themeVariant = _ref2.themeVariant;
-  return {
-    textAlign: 'center',
-    marginBottom: theme.__hd__.empty.space.titleMargin,
-    color: themeVariant === 'dark' ? theme.__hd__.empty.colors.invertedText : theme.__hd__.empty.colors.text
-  };
-});
-var StyledDescription = index$a(Typography.Body)(function (_ref3) {
-  var theme = _ref3.theme,
-    themeVariant = _ref3.themeVariant;
-  return {
-    textAlign: 'center',
-    color: themeVariant === 'dark' ? theme.__hd__.empty.colors.invertedSubduedText : theme.__hd__.empty.colors.subduedText
-  };
 });
-
-var Empty = function Empty(_ref) {
-  var image = _ref.image,
-    title = _ref.title,
-    description = _ref.description,
-    style = _ref.style,
-    testID = _ref.testID,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'light' : _ref$variant;
-  var theme = useTheme();
-  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$6, {
-    style: style,
-    testID: testID
-  }, image !== undefined && /*#__PURE__*/React__default["default"].cloneElement(image, _objectSpread2(_objectSpread2({}, image.props), {}, {
-    style: [{
-      marginBottom: theme.__hd__.empty.space.imageMargin
-    }, image.props.style]
-  })), /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
-    themeVariant: variant,
-    level: "h4",
-    typeface: "playful"
-  }, title), !!description && /*#__PURE__*/React__default["default"].createElement(StyledDescription, {
-    themeVariant: variant,
-    typeface: "playful"
-  }, description));
+var ModalWrapper = function ModalWrapper(_ref3) {
+  var _ref3$visible = _ref3.visible,
+    visible = _ref3$visible === void 0 ? true : _ref3$visible,
+    props = _objectWithoutProperties(_ref3, _excluded$e);
+  var modalRef = React.useRef(null);
+  var _useState = React.useState(visible),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalVisible = _useState2[0],
+    setInternalVisible = _useState2[1];
+  React.useEffect(function () {
+    if (visible) {
+      setInternalVisible(true);
+    } else {
+      var _modalRef$current;
+      // Wait for animation to finish before hiding the modal
+      (_modalRef$current = modalRef.current) === null || _modalRef$current === void 0 ? void 0 : _modalRef$current.hide(function () {
+        return setInternalVisible(false);
+      });
+    }
+  }, [visible]);
+  React.useEffect(function () {
+    if (internalVisible) {
+      var _modalRef$current2;
+      (_modalRef$current2 = modalRef.current) === null || _modalRef$current2 === void 0 ? void 0 : _modalRef$current2.show();
+    }
+  }, [internalVisible]);
+  return internalVisible ? /*#__PURE__*/React__default["default"].createElement(Modal, _extends$1({
+    ref: modalRef
+  }, props)) : null;
 };
 
 var StyledErrorModal = index$a(ModalWrapper)({
@@ -33918,6 +34089,7 @@ exports.Calendar = Calendar;
 exports.Card = Card$1;
 exports.Carousel = index$8;
 exports.Checkbox = Checkbox;
+exports.Chip = Chip;
 exports.Collapse = Collapse;
 exports.ContentNavigator = ContentNavigator;
 exports.DatePicker = DatePicker;