@lumx/react 3.10.0 → 3.10.1-alpha.0

package/index.js

@@ -673,7 +673,7 @@ const CLASSNAME$1k = getRootClassName(COMPONENT_NAME$1n);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$13 = {
+const DEFAULT_PROPS$14 = {
   size: Size.tiny,
   kind: Kind.info
 };
@@ -770,7 +770,7 @@ const AlertDialog = /*#__PURE__*/forwardRef((props, ref) => {
 });
 AlertDialog.displayName = COMPONENT_NAME$1n;
 AlertDialog.className = CLASSNAME$1k;
-AlertDialog.defaultProps = DEFAULT_PROPS$13;
+AlertDialog.defaultProps = DEFAULT_PROPS$14;
 
 /**
  * Hook focusing an element when defined and `focus` boolean `true`.
@@ -823,6 +823,16 @@ const useMergeRefs = function () {
   refs);
 };
 
+const ThemeContext = /*#__PURE__*/React__default.createContext(undefined);
+
+/** Provide a theme context to all children. */
+const ThemeProvider = ThemeContext.Provider;
+
+/** Get the theme in the current context. */
+function useTheme() {
+  return React__default.useContext(ThemeContext);
+}
+
 const _excluded$1r = ["anchorToInput", "children", "chips", "className", "closeOnClick", "closeOnClickAway", "closeOnEscape", "disabled", "error", "fitToAnchorWidth", "hasError", "helper", "icon", "inputRef", "clearButtonProps", "isDisabled", "isRequired", "isOpen", "isValid", "label", "name", "offset", "onBlur", "onChange", "onClose", "onFocus", "onInfiniteScroll", "placeholder", "placement", "shouldFocusOnClose", "theme", "value", "textFieldProps", "focusAnchorOnClose"];
 
 /**
@@ -842,7 +852,7 @@ const CLASSNAME$1j = getRootClassName(COMPONENT_NAME$1m);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$12 = {
+const DEFAULT_PROPS$13 = {
   anchorToInput: false,
   closeOnClick: false,
   closeOnClickAway: true,
@@ -858,6 +868,7 @@ const DEFAULT_PROPS$12 = {
  * @return React element.
  */
 const Autocomplete = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme();
   const {
       anchorToInput,
       children,
@@ -889,7 +900,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((props, ref) => {
       placeholder,
       placement,
       shouldFocusOnClose,
-      theme,
+      theme = defaultTheme,
       value,
       textFieldProps = {},
       focusAnchorOnClose
@@ -942,7 +953,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((props, ref) => {
 });
 Autocomplete.displayName = COMPONENT_NAME$1m;
 Autocomplete.className = CLASSNAME$1j;
-Autocomplete.defaultProps = DEFAULT_PROPS$12;
+Autocomplete.defaultProps = DEFAULT_PROPS$13;
 
 const _excluded$1q = ["anchorToInput", "children", "chipsAlignment", "className", "closeOnClickAway", "closeOnEscape", "fitToAnchorWidth", "hasError", "helper", "icon", "inputRef", "clearButtonProps", "isDisabled", "isRequired", "isOpen", "isValid", "label", "name", "offset", "onBlur", "onChange", "onClear", "onClose", "onFocus", "onInfiniteScroll", "onKeyDown", "placeholder", "placement", "selectedChipRender", "shouldFocusOnClose", "theme", "type", "value", "values"];
 
@@ -963,7 +974,7 @@ const CLASSNAME$1i = getRootClassName(COMPONENT_NAME$1l);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$11 = {
+const DEFAULT_PROPS$12 = {
   closeOnClickAway: true,
   closeOnEscape: true,
   selectedChipRender(choice, index, onClear, isDisabled) {
@@ -991,6 +1002,7 @@ const DEFAULT_PROPS$11 = {
  * @return React element.
  */
 const AutocompleteMultiple = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme();
   const {
       anchorToInput,
       children,
@@ -1024,7 +1036,7 @@ const AutocompleteMultiple = /*#__PURE__*/forwardRef((props, ref) => {
       placement,
       selectedChipRender,
       shouldFocusOnClose,
-      theme,
+      theme = defaultTheme,
       type,
       value,
       values
@@ -1070,7 +1082,7 @@ const AutocompleteMultiple = /*#__PURE__*/forwardRef((props, ref) => {
 });
 AutocompleteMultiple.displayName = COMPONENT_NAME$1l;
 AutocompleteMultiple.className = CLASSNAME$1i;
-AutocompleteMultiple.defaultProps = DEFAULT_PROPS$11;
+AutocompleteMultiple.defaultProps = DEFAULT_PROPS$12;
 
 const _excluded$1p = ["actions", "alt", "badge", "className", "image", "linkProps", "linkAs", "onClick", "onKeyPress", "size", "theme", "thumbnailProps"];
 
@@ -1095,9 +1107,8 @@ const CLASSNAME$1h = getRootClassName(COMPONENT_NAME$1k);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$10 = {
-  size: Size.m,
-  theme: Theme.light
+const DEFAULT_PROPS$11 = {
+  size: Size.m
 };
 
 /**
@@ -1108,6 +1119,7 @@ const DEFAULT_PROPS$10 = {
  * @return React element.
  */
 const Avatar = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       actions,
       alt,
@@ -1119,7 +1131,7 @@ const Avatar = /*#__PURE__*/forwardRef((props, ref) => {
       onClick,
       onKeyPress,
       size,
-      theme,
+      theme = defaultTheme,
       thumbnailProps
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$1p);
@@ -1151,7 +1163,7 @@ const Avatar = /*#__PURE__*/forwardRef((props, ref) => {
 });
 Avatar.displayName = COMPONENT_NAME$1k;
 Avatar.className = CLASSNAME$1h;
-Avatar.defaultProps = DEFAULT_PROPS$10;
+Avatar.defaultProps = DEFAULT_PROPS$11;
 
 const _excluded$1o = ["children", "className", "color"];
 
@@ -1172,7 +1184,7 @@ const CLASSNAME$1g = getRootClassName(COMPONENT_NAME$1j);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$$ = {
+const DEFAULT_PROPS$10 = {
   color: ColorPalette.primary
 };
 
@@ -1201,7 +1213,7 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
 });
 Badge.displayName = COMPONENT_NAME$1j;
 Badge.className = CLASSNAME$1g;
-Badge.defaultProps = DEFAULT_PROPS$$;
+Badge.defaultProps = DEFAULT_PROPS$10;
 
 const INITIAL_INDEX$1 = -1;
 
@@ -1410,7 +1422,7 @@ const CLASSNAME$1f = getRootClassName(COMPONENT_NAME$1i);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$_ = {
+const DEFAULT_PROPS$$ = {
   size: Size.regular
 };
 
@@ -1498,7 +1510,7 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
 });
 ListItem.displayName = COMPONENT_NAME$1i;
 ListItem.className = CLASSNAME$1f;
-ListItem.defaultProps = DEFAULT_PROPS$_;
+ListItem.defaultProps = DEFAULT_PROPS$$;
 
 /** Get types of the values of a record. */
 
@@ -2017,7 +2029,7 @@ const CLASSNAME$1e = getRootClassName(COMPONENT_NAME$1h);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Z = {
+const DEFAULT_PROPS$_ = {
   tabIndex: -1
 };
 
@@ -2060,7 +2072,7 @@ const InternalList = /*#__PURE__*/forwardRef((props, ref) => {
 });
 InternalList.displayName = COMPONENT_NAME$1h;
 InternalList.className = CLASSNAME$1e;
-InternalList.defaultProps = DEFAULT_PROPS$Z;
+InternalList.defaultProps = DEFAULT_PROPS$_;
 const List = Object.assign(InternalList, {
   useKeyboardListNavigation
 });
@@ -4656,7 +4668,7 @@ const CLASSNAME$1d = getRootClassName(COMPONENT_NAME$1g);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Y = {
+const DEFAULT_PROPS$Z = {
   elevation: 3,
   placement: Placement.AUTO,
   focusAnchorOnClose: true,
@@ -4753,7 +4765,9 @@ const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-hidden": true
   }, /*#__PURE__*/React__default.createElement("path", {
     d: "M8 3.49C7.62 2.82 6.66 2.82 6.27 3.48L.04 14 14.04 14 8 3.49Z"
-  }))), children)), usePortal) : null;
+  }))), /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: undefined
+  }, children))), usePortal) : null;
 });
 _InnerPopover.displayName = COMPONENT_NAME$1g;
 
@@ -4769,7 +4783,7 @@ const Popover = skipRender(
 () => Boolean(DOCUMENT), _InnerPopover);
 Popover.displayName = COMPONENT_NAME$1g;
 Popover.className = CLASSNAME$1d;
-Popover.defaultProps = DEFAULT_PROPS$Y;
+Popover.defaultProps = DEFAULT_PROPS$Z;
 
 // The error margin in px we want to have for triggering infinite scroll
 const SCROLL_TRIGGER_MARGIN = 5;
@@ -4833,7 +4847,7 @@ const CLASSNAME$1c = getRootClassName(COMPONENT_NAME$1f);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$X = {
+const DEFAULT_PROPS$Y = {
   closeOnClick: true,
   closeOnClickAway: true,
   closeOnEscape: true,
@@ -4913,7 +4927,7 @@ const Dropdown = /*#__PURE__*/forwardRef((props, ref) => {
 });
 Dropdown.displayName = COMPONENT_NAME$1f;
 Dropdown.className = CLASSNAME$1c;
-Dropdown.defaultProps = DEFAULT_PROPS$X;
+Dropdown.defaultProps = DEFAULT_PROPS$Y;
 
 const INPUT_HELPER_CONFIGURATION = {
   error: {
@@ -4946,9 +4960,8 @@ const CLASSNAME$1b = getRootClassName(COMPONENT_NAME$1e);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$W = {
-  kind: Kind.info,
-  theme: Theme.light
+const DEFAULT_PROPS$X = {
+  kind: Kind.info
 };
 
 /**
@@ -4959,11 +4972,12 @@ const DEFAULT_PROPS$W = {
  * @return React element.
  */
 const InputHelper = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       children,
       className,
       kind,
-      theme
+      theme = defaultTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$1i);
   const {
@@ -4981,7 +4995,7 @@ const InputHelper = /*#__PURE__*/forwardRef((props, ref) => {
 });
 InputHelper.displayName = COMPONENT_NAME$1e;
 InputHelper.className = CLASSNAME$1b;
-InputHelper.defaultProps = DEFAULT_PROPS$W;
+InputHelper.defaultProps = DEFAULT_PROPS$X;
 
 /**
  * Listen on element focus to store the focus status.
@@ -5024,12 +5038,12 @@ const COMPONENT_NAME$1d = 'Select';
 const CLASSNAME$1a = getRootClassName(COMPONENT_NAME$1d);
 
 /** The default value of props. */
-const DEFAULT_PROPS$V = {
-  theme: Theme.light,
+const DEFAULT_PROPS$W = {
   variant: SelectVariant.input
 };
-const WithSelectContext = (SelectElement, _ref, ref) => {
-  let {
+const WithSelectContext = (SelectElement, props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
       children,
       className,
       focusElement,
@@ -5051,11 +5065,11 @@ const WithSelectContext = (SelectElement, _ref, ref) => {
       onInfiniteScroll,
       onInputClick,
       placeholder,
-      theme = DEFAULT_PROPS$V.theme,
+      theme = defaultTheme,
       value,
-      variant = DEFAULT_PROPS$V.variant
-    } = _ref,
-    forwardedProps = _objectWithoutProperties(_ref, _excluded$1h);
+      variant = DEFAULT_PROPS$W.variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$1h);
   const generatedSelectId = useId();
   const selectId = id || generatedSelectId;
   const anchorRef = useRef(null);
@@ -5159,7 +5173,7 @@ const BadgeWrapper = /*#__PURE__*/forwardRef((props, ref) => {
 });
 BadgeWrapper.displayName = 'BadgeWrapper';
 BadgeWrapper.className = CLASSNAME$19;
-BadgeWrapper.defaultProps = DEFAULT_PROPS$V;
+BadgeWrapper.defaultProps = DEFAULT_PROPS$W;
 
 const _excluded$1f = ["aria-label", "children", "className", "color", "disabled", "emphasis", "hasBackground", "href", "isDisabled", "isSelected", "isActive", "isFocused", "isHovered", "linkAs", "name", "size", "target", "theme", "variant", "type", "fullWidth"];
 
@@ -5314,10 +5328,9 @@ const CLASSNAME$18 = getRootClassName(COMPONENT_NAME$1a);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$U = {
+const DEFAULT_PROPS$V = {
   emphasis: Emphasis.high,
-  size: Size.m,
-  theme: Theme.light
+  size: Size.m
 };
 
 /**
@@ -5328,6 +5341,7 @@ const DEFAULT_PROPS$U = {
  * @return React element.
  */
 const Button = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       children,
       className,
@@ -5335,7 +5349,7 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
       leftIcon,
       rightIcon,
       size,
-      theme
+      theme = defaultTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$1e);
   const buttonClassName = classNames(className, getBasicClass({
@@ -5364,7 +5378,7 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
 });
 Button.displayName = COMPONENT_NAME$1a;
 Button.className = CLASSNAME$18;
-Button.defaultProps = DEFAULT_PROPS$U;
+Button.defaultProps = DEFAULT_PROPS$V;
 
 const _excluded$1d = ["emphasis", "image", "icon", "label", "size", "theme", "tooltipProps", "hideTooltip"];
 /**
@@ -5380,10 +5394,9 @@ const CLASSNAME$17 = getRootClassName(COMPONENT_NAME$19);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$T = {
+const DEFAULT_PROPS$U = {
   emphasis: Emphasis.high,
-  size: Size.m,
-  theme: Theme.light
+  size: Size.m
 };
 
 /**
@@ -5394,13 +5407,14 @@ const DEFAULT_PROPS$T = {
  * @return React element.
  */
 const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       emphasis,
       image,
       icon,
       label,
       size,
-      theme,
+      theme = defaultTheme,
       tooltipProps,
       hideTooltip
     } = props,
@@ -5426,7 +5440,7 @@ const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
 });
 IconButton.displayName = COMPONENT_NAME$19;
 IconButton.className = CLASSNAME$17;
-IconButton.defaultProps = DEFAULT_PROPS$T;
+IconButton.defaultProps = DEFAULT_PROPS$U;
 
 const _excluded$1c = ["children", "className"];
 
@@ -5447,7 +5461,7 @@ const CLASSNAME$16 = getRootClassName(COMPONENT_NAME$18);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$S = {};
+const DEFAULT_PROPS$T = {};
 
 /**
  * ButtonGroup component.
@@ -5470,7 +5484,7 @@ const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
 });
 ButtonGroup.displayName = COMPONENT_NAME$18;
 ButtonGroup.className = CLASSNAME$16;
-ButtonGroup.defaultProps = DEFAULT_PROPS$S;
+ButtonGroup.defaultProps = DEFAULT_PROPS$T;
 
 const _excluded$1b = ["checked", "className", "disabled", "helper", "id", "inputRef", "isChecked", "isDisabled", "label", "name", "onChange", "theme", "value", "inputProps"];
 
@@ -5496,9 +5510,7 @@ const CLASSNAME$15 = getRootClassName(COMPONENT_NAME$17);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$R = {
-  theme: Theme.light
-};
+const DEFAULT_PROPS$S = {};
 
 /**
  * Checkbox component.
@@ -5508,6 +5520,7 @@ const DEFAULT_PROPS$R = {
  * @return React element.
  */
 const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       checked,
       className,
@@ -5520,7 +5533,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
       label,
       name,
       onChange,
-      theme,
+      theme = defaultTheme,
       value,
       inputProps = {}
     } = props,
@@ -5586,7 +5599,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
 });
 Checkbox.displayName = COMPONENT_NAME$17;
 Checkbox.className = CLASSNAME$15;
-Checkbox.defaultProps = DEFAULT_PROPS$R;
+Checkbox.defaultProps = DEFAULT_PROPS$S;
 
 /**
  * Wrap mouse event handler to stop event propagation.
@@ -5627,9 +5640,8 @@ const CLASSNAME$14 = getRootClassName(COMPONENT_NAME$16);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Q = {
-  size: Size.m,
-  theme: Theme.light
+const DEFAULT_PROPS$R = {
+  size: Size.m
 };
 
 /**
@@ -5640,6 +5652,7 @@ const DEFAULT_PROPS$Q = {
  * @return React element.
  */
 const Chip = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       after,
       before,
@@ -5655,7 +5668,7 @@ const Chip = /*#__PURE__*/forwardRef((props, ref) => {
       onBeforeClick,
       onClick,
       size,
-      theme,
+      theme = defaultTheme,
       href,
       onKeyDown
     } = props,
@@ -5723,7 +5736,7 @@ const Chip = /*#__PURE__*/forwardRef((props, ref) => {
 });
 Chip.displayName = COMPONENT_NAME$16;
 Chip.className = CLASSNAME$14;
-Chip.defaultProps = DEFAULT_PROPS$Q;
+Chip.defaultProps = DEFAULT_PROPS$R;
 
 const INITIAL_STATE_ACTIVE_CHIP = -1;
 
@@ -5786,7 +5799,7 @@ const _excluded$19 = ["align", "children", "className"];
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$P = {};
+const DEFAULT_PROPS$Q = {};
 
 /**
  * Component display name.
@@ -5823,7 +5836,7 @@ const InternalChipGroup = /*#__PURE__*/forwardRef((props, ref) => {
 });
 InternalChipGroup.displayName = COMPONENT_NAME$15;
 InternalChipGroup.className = CLASSNAME$13;
-InternalChipGroup.defaultProps = DEFAULT_PROPS$P;
+InternalChipGroup.defaultProps = DEFAULT_PROPS$Q;
 const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
 });
@@ -5854,8 +5867,7 @@ const CLASSNAME$12 = getRootClassName(COMPONENT_NAME$14);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$O = {
-  theme: Theme.light,
+const DEFAULT_PROPS$P = {
   variant: CommentBlockVariant.indented
 };
 
@@ -5867,6 +5879,7 @@ const DEFAULT_PROPS$O = {
  * @return React element.
  */
 const CommentBlock = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       actions,
       avatarProps,
@@ -5883,7 +5896,7 @@ const CommentBlock = /*#__PURE__*/forwardRef((props, ref) => {
       onMouseEnter,
       onMouseLeave,
       text,
-      theme,
+      theme = defaultTheme,
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$18);
@@ -5938,7 +5951,7 @@ const CommentBlock = /*#__PURE__*/forwardRef((props, ref) => {
 });
 CommentBlock.displayName = COMPONENT_NAME$14;
 CommentBlock.className = CLASSNAME$12;
-CommentBlock.defaultProps = DEFAULT_PROPS$O;
+CommentBlock.defaultProps = DEFAULT_PROPS$P;
 
 /**
  * Add a number of months from a date while resetting the day to prevent month length mismatches.
@@ -6854,7 +6867,7 @@ const CLASSNAME$10 = getRootClassName(COMPONENT_NAME$10);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$N = {
+const DEFAULT_PROPS$O = {
   size: Size.big,
   disableBodyScroll: true
 };
@@ -6972,7 +6985,9 @@ const Dialog = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$10}__overlay`
-  }), /*#__PURE__*/React__default.createElement("section", _extends({
+  }), /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: undefined
+  }, /*#__PURE__*/React__default.createElement("section", _extends({
     className: `${CLASSNAME$10}__container`,
     role: "dialog",
     "aria-modal": "true"
@@ -7000,11 +7015,11 @@ const Dialog = /*#__PURE__*/forwardRef((props, ref) => {
     className: `${CLASSNAME$10}__progress-overlay`
   }, /*#__PURE__*/React__default.createElement(Progress, {
     variant: ProgressVariant.circular
-  })))))), document.body) : null;
+  }))))))), document.body) : null;
 });
 Dialog.displayName = COMPONENT_NAME$10;
 Dialog.className = CLASSNAME$10;
-Dialog.defaultProps = DEFAULT_PROPS$N;
+Dialog.defaultProps = DEFAULT_PROPS$O;
 
 const _excluded$14 = ["className", "theme"];
 
@@ -7025,9 +7040,7 @@ const CLASSNAME$$ = getRootClassName(COMPONENT_NAME$$);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$M = {
-  theme: Theme.light
-};
+const DEFAULT_PROPS$N = {};
 
 /**
  * Divider component.
@@ -7037,9 +7050,10 @@ const DEFAULT_PROPS$M = {
  * @return React element.
  */
 const Divider = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       className,
-      theme
+      theme = defaultTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$14);
   return /*#__PURE__*/React__default.createElement("hr", _extends({
@@ -7053,7 +7067,7 @@ const Divider = /*#__PURE__*/forwardRef((props, ref) => {
 });
 Divider.displayName = COMPONENT_NAME$$;
 Divider.className = CLASSNAME$$;
-Divider.defaultProps = DEFAULT_PROPS$M;
+Divider.defaultProps = DEFAULT_PROPS$N;
 
 const _excluded$13 = ["className", "theme"];
 
@@ -7079,9 +7093,10 @@ const CLASSNAME$_ = getRootClassName(COMPONENT_NAME$_);
  * @return React element.
  */
 const DragHandle = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme();
   const {
       className,
-      theme
+      theme = defaultTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$13);
   return /*#__PURE__*/React__default.createElement("div", _extends({
@@ -7119,9 +7134,7 @@ const CLASSNAME$Z = getRootClassName(COMPONENT_NAME$Z);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$L = {
-  theme: Theme.light
-};
+const DEFAULT_PROPS$M = {};
 const isDragHandle = isComponent(DragHandle);
 const isHeader = isComponent('header');
 const isFooter = isComponent('footer');
@@ -7134,6 +7147,7 @@ const isFooter = isComponent('footer');
  * @return React element.
  */
 const ExpansionPanel = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       className,
       children: anyChildren,
@@ -7144,7 +7158,7 @@ const ExpansionPanel = /*#__PURE__*/forwardRef((props, ref) => {
       onClose,
       onOpen,
       onToggleOpen,
-      theme,
+      theme = defaultTheme,
       toggleButtonProps
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$12);
@@ -7226,14 +7240,12 @@ const ExpansionPanel = /*#__PURE__*/forwardRef((props, ref) => {
 });
 ExpansionPanel.displayName = COMPONENT_NAME$Z;
 ExpansionPanel.className = CLASSNAME$Z;
-ExpansionPanel.defaultProps = DEFAULT_PROPS$L;
+ExpansionPanel.defaultProps = DEFAULT_PROPS$M;
 
 const _excluded$11 = ["label", "icon", "color", "className", "theme", "truncate"];
 const COMPONENT_NAME$Y = 'Flag';
 const CLASSNAME$Y = getRootClassName(COMPONENT_NAME$Y);
-const DEFAULT_PROPS$K = {
-  theme: Theme.light
-};
+const DEFAULT_PROPS$L = {};
 
 /**
  * Flag component.
@@ -7243,12 +7255,13 @@ const DEFAULT_PROPS$K = {
  * @return React element.
  */
 const Flag = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       label,
       icon,
       color,
       className,
-      theme,
+      theme = defaultTheme,
       truncate
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$11);
@@ -7274,7 +7287,7 @@ const Flag = /*#__PURE__*/forwardRef((props, ref) => {
 });
 Flag.displayName = COMPONENT_NAME$Y;
 Flag.className = CLASSNAME$Y;
-Flag.defaultProps = DEFAULT_PROPS$K;
+Flag.defaultProps = DEFAULT_PROPS$L;
 
 const _excluded$10 = ["as", "children", "className", "fillSpace", "gap", "hAlign", "marginAuto", "noShrink", "orientation", "vAlign", "wrap"];
 
@@ -7343,7 +7356,7 @@ const CLASSNAME$W = getRootClassName(COMPONENT_NAME$W);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$J = {
+const DEFAULT_PROPS$K = {
   gap: Size.big,
   orientation: Orientation.horizontal
 };
@@ -7421,7 +7434,7 @@ const BaseGenericBlock = /*#__PURE__*/forwardRef((props, ref) => {
 });
 BaseGenericBlock.displayName = COMPONENT_NAME$W;
 BaseGenericBlock.className = CLASSNAME$W;
-BaseGenericBlock.defaultProps = DEFAULT_PROPS$J;
+BaseGenericBlock.defaultProps = DEFAULT_PROPS$K;
 const GenericBlock = Object.assign(BaseGenericBlock, {
   Figure,
   Content,
@@ -7496,7 +7509,7 @@ const CLASSNAME$V = getRootClassName(COMPONENT_NAME$V);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$I = {};
+const DEFAULT_PROPS$J = {};
 
 /**
  * Text component.
@@ -7562,7 +7575,7 @@ const Text = /*#__PURE__*/forwardRef((props, ref) => {
 });
 Text.displayName = COMPONENT_NAME$V;
 Text.className = CLASSNAME$V;
-Text.defaultProps = DEFAULT_PROPS$I;
+Text.defaultProps = DEFAULT_PROPS$J;
 
 /** The maximum authorized heading level. */
 const MAX_HEADING_LEVEL = 6;
@@ -7615,7 +7628,7 @@ const CLASSNAME$U = getRootClassName(COMPONENT_NAME$U);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$H = {};
+const DEFAULT_PROPS$I = {};
 
 /**
  * Renders a heading component.
@@ -7644,7 +7657,7 @@ const Heading = /*#__PURE__*/forwardRef((props, ref) => {
 });
 Heading.displayName = COMPONENT_NAME$U;
 Heading.className = CLASSNAME$U;
-Heading.defaultProps = DEFAULT_PROPS$H;
+Heading.defaultProps = DEFAULT_PROPS$I;
 
 /**
  * Provide a new heading level context.
@@ -7688,7 +7701,7 @@ const CLASSNAME$T = getRootClassName(COMPONENT_NAME$T);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$G = {
+const DEFAULT_PROPS$H = {
   orientation: Orientation.horizontal,
   wrap: 'nowrap'
 };
@@ -7728,7 +7741,7 @@ const Grid = /*#__PURE__*/forwardRef((props, ref) => {
 });
 Grid.displayName = COMPONENT_NAME$T;
 Grid.className = CLASSNAME$T;
-Grid.defaultProps = DEFAULT_PROPS$G;
+Grid.defaultProps = DEFAULT_PROPS$H;
 
 const _excluded$X = ["children", "className", "width", "align", "order"];
 
@@ -7795,7 +7808,7 @@ const CLASSNAME$R = getRootClassName(COMPONENT_NAME$R);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$F = {};
+const DEFAULT_PROPS$G = {};
 
 /**
  * The GridColumn is a layout component that can display children in a grid
@@ -7831,7 +7844,7 @@ const GridColumn = /*#__PURE__*/forwardRef((props, ref) => {
 });
 GridColumn.displayName = COMPONENT_NAME$R;
 GridColumn.className = CLASSNAME$R;
-GridColumn.defaultProps = DEFAULT_PROPS$F;
+GridColumn.defaultProps = DEFAULT_PROPS$G;
 
 const _excluded$V = ["className", "color", "colorVariant", "hasShape", "icon", "size", "theme", "alt"];
 
@@ -7852,7 +7865,7 @@ const CLASSNAME$Q = getRootClassName(COMPONENT_NAME$Q);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$E = {};
+const DEFAULT_PROPS$F = {};
 
 /**
  * Icon component.
@@ -7862,6 +7875,7 @@ const DEFAULT_PROPS$E = {};
  * @return React element.
  */
 const Icon = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme();
   const {
       className,
       color,
@@ -7869,7 +7883,7 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
       hasShape,
       icon,
       size,
-      theme,
+      theme = defaultTheme,
       alt
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$V);
@@ -7926,7 +7940,7 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
 });
 Icon.displayName = COMPONENT_NAME$Q;
 Icon.className = CLASSNAME$Q;
-Icon.defaultProps = DEFAULT_PROPS$E;
+Icon.defaultProps = DEFAULT_PROPS$F;
 
 /** Internal component used to render image captions */
 const ImageCaption = props => {
@@ -8016,9 +8030,8 @@ const CLASSNAME$P = getRootClassName(COMPONENT_NAME$P);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$D = {
+const DEFAULT_PROPS$E = {
   captionPosition: ImageBlockCaptionPosition.below,
-  theme: Theme.light,
   align: Alignment.left
 };
 
@@ -8030,6 +8043,7 @@ const DEFAULT_PROPS$D = {
  * @return React element.
  */
 const ImageBlock = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       actions,
       align,
@@ -8043,7 +8057,7 @@ const ImageBlock = /*#__PURE__*/forwardRef((props, ref) => {
       image,
       size,
       tags,
-      theme,
+      theme = defaultTheme,
       thumbnailProps,
       title,
       titleProps
@@ -8085,7 +8099,7 @@ const ImageBlock = /*#__PURE__*/forwardRef((props, ref) => {
 });
 ImageBlock.displayName = COMPONENT_NAME$P;
 ImageBlock.className = CLASSNAME$P;
-ImageBlock.defaultProps = DEFAULT_PROPS$D;
+ImageBlock.defaultProps = DEFAULT_PROPS$E;
 
 /**
  * Component display name.
@@ -8854,7 +8868,7 @@ const CLASSNAME$N = getRootClassName(COMPONENT_NAME$N);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$C = {};
+const DEFAULT_PROPS$D = {};
 
 /**
  * InlineList component.
@@ -8904,7 +8918,7 @@ const InlineList = /*#__PURE__*/forwardRef((props, ref) => {
 });
 InlineList.displayName = COMPONENT_NAME$N;
 InlineList.className = CLASSNAME$N;
-InlineList.defaultProps = DEFAULT_PROPS$C;
+InlineList.defaultProps = DEFAULT_PROPS$D;
 
 const _excluded$Q = ["children", "className", "htmlFor", "isRequired", "theme"];
 
@@ -8925,9 +8939,7 @@ const CLASSNAME$M = getRootClassName(COMPONENT_NAME$M);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$B = {
-  theme: Theme.light
-};
+const DEFAULT_PROPS$C = {};
 
 /**
  * InputLabel component.
@@ -8937,12 +8949,13 @@ const DEFAULT_PROPS$B = {
  * @return React element.
  */
 const InputLabel = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       children,
       className,
       htmlFor,
       isRequired,
-      theme
+      theme = defaultTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$Q);
   return /*#__PURE__*/React__default.createElement("label", _extends({
@@ -8958,7 +8971,7 @@ const InputLabel = /*#__PURE__*/forwardRef((props, ref) => {
 });
 InputLabel.displayName = COMPONENT_NAME$M;
 InputLabel.className = CLASSNAME$M;
-InputLabel.defaultProps = DEFAULT_PROPS$B;
+InputLabel.defaultProps = DEFAULT_PROPS$C;
 
 const _excluded$P = ["aria-labelledby", "ariaLabelledBy", "aria-label", "ariaLabel", "children", "className", "closeButtonProps", "isOpen", "onClose", "parentElement", "focusElement", "preventAutoClose", "theme", "zIndex"];
 
@@ -9079,14 +9092,16 @@ const Lightbox = /*#__PURE__*/forwardRef((props, ref) => {
     theme: "dark",
     type: "button",
     onClick: onClose
-  }))), /*#__PURE__*/React__default.createElement(ClickAwayProvider, {
+  }))), /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: undefined
+  }, /*#__PURE__*/React__default.createElement(ClickAwayProvider, {
     callback: !preventAutoClose && onClose,
     childrenRefs: clickAwayRefs
   }, /*#__PURE__*/React__default.createElement("div", {
     ref: childrenRef,
     className: `${CLASSNAME$L}__wrapper`,
     role: "presentation"
-  }, children))), document.body);
+  }, children)))), document.body);
 });
 Lightbox.displayName = COMPONENT_NAME$L;
 Lightbox.className = CLASSNAME$L;
@@ -9221,9 +9236,8 @@ const CLASSNAME$J = getRootClassName(COMPONENT_NAME$J);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$A = {
+const DEFAULT_PROPS$B = {
   size: Size.regular,
-  theme: Theme.light,
   titleHeading: 'h2'
 };
 
@@ -9235,6 +9249,7 @@ const DEFAULT_PROPS$A = {
  * @return React element.
  */
 const LinkPreview = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       className,
       description,
@@ -9242,7 +9257,7 @@ const LinkPreview = /*#__PURE__*/forwardRef((props, ref) => {
       linkAs,
       linkProps,
       size,
-      theme,
+      theme = defaultTheme,
       thumbnailProps,
       title,
       titleHeading
@@ -9300,7 +9315,7 @@ const LinkPreview = /*#__PURE__*/forwardRef((props, ref) => {
 });
 LinkPreview.displayName = COMPONENT_NAME$J;
 LinkPreview.className = CLASSNAME$J;
-LinkPreview.defaultProps = DEFAULT_PROPS$A;
+LinkPreview.defaultProps = DEFAULT_PROPS$B;
 
 const _excluded$M = ["className"];
 
@@ -9490,9 +9505,7 @@ const CLASSNAME$F = getRootClassName(COMPONENT_NAME$F);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$z = {
-  theme: Theme.light
-};
+const DEFAULT_PROPS$A = {};
 
 /**
  * Mosaic component.
@@ -9502,9 +9515,10 @@ const DEFAULT_PROPS$z = {
  * @return React element.
  */
 const Mosaic = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       className,
-      theme,
+      theme = defaultTheme,
       thumbnails,
       onImageClick
     } = props,
@@ -9554,9 +9568,7 @@ const Mosaic = /*#__PURE__*/forwardRef((props, ref) => {
 });
 Mosaic.displayName = COMPONENT_NAME$F;
 Mosaic.className = CLASSNAME$F;
-Mosaic.defaultProps = DEFAULT_PROPS$z;
-
-const ThemeContext = /*#__PURE__*/createContext(undefined);
+Mosaic.defaultProps = DEFAULT_PROPS$A;
 
 /** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
 function forwardRefPolymorphic(render) {
@@ -9589,7 +9601,7 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
       as: Element = 'a'
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$I);
-  const theme = useContext(ThemeContext);
+  const theme = useTheme();
   const {
     tooltipLabel,
     labelRef
@@ -9656,7 +9668,7 @@ const NavigationSection = Object.assign( /*#__PURE__*/forwardRef((props, ref) =>
   const {
     orientation
   } = useContext(NavigationContext) || {};
-  const theme = useContext(ThemeContext);
+  const theme = useTheme();
   const isDropdown = orientation === Orientation.horizontal;
   return /*#__PURE__*/React__default.createElement("li", {
     className: classNames(className, CLASSNAME$D, CLASSNAME$E, handleBasicClasses({
@@ -9696,7 +9708,7 @@ const NavigationSection = Object.assign( /*#__PURE__*/forwardRef((props, ref) =>
     onClick: () => setIsOpen(false),
     onClose: () => setIsOpen(false),
     zIndex: 996
-  }, /*#__PURE__*/React__default.createElement(ThemeContext.Provider, {
+  }, /*#__PURE__*/React__default.createElement(ThemeProvider, {
     value: Theme.light
   }, /*#__PURE__*/React__default.createElement("ul", {
     className: `${CLASSNAME$D}__drawer--popover`,
@@ -9724,18 +9736,26 @@ const COMPONENT_NAME$C = 'Navigation';
  * Component default class name and class prefix.
  */
 const CLASSNAME$C = getRootClassName(COMPONENT_NAME$C);
+
+/**
+ * Component default props
+ */
+const DEFAULT_PROPS$z = {
+  orientation: Orientation.vertical
+};
 const Navigation = Object.assign(
 /*#__PURE__*/
 // eslint-disable-next-line react/display-name
 forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       children,
       className,
-      theme,
+      theme = defaultTheme,
       orientation
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$G);
-  return /*#__PURE__*/React__default.createElement(ThemeContext.Provider, {
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
     value: theme
   }, /*#__PURE__*/React__default.createElement("nav", _extends({
     className: classNames(className, handleBasicClasses({
@@ -9754,10 +9774,7 @@ forwardRef((props, ref) => {
 }), {
   displayName: COMPONENT_NAME$C,
   className: CLASSNAME$C,
-  defaultProps: {
-    theme: Theme.light,
-    orientation: Orientation.vertical
-  },
+  defaultProps: DEFAULT_PROPS$z,
   // Sub components
   Section: NavigationSection,
   Item: NavigationItem
@@ -9805,7 +9822,6 @@ const CLASSNAME$B = getRootClassName(COMPONENT_NAME$B);
  * Component default props.
  */
 const DEFAULT_PROPS$y = {
-  theme: Theme.light,
   zIndex: 9999,
   usePortal: true
 };
@@ -9819,6 +9835,7 @@ const DEFAULT_PROPS$y = {
  * @return React element.
  */
 const Notification = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       actionLabel,
       className,
@@ -9826,7 +9843,7 @@ const Notification = /*#__PURE__*/forwardRef((props, ref) => {
       isOpen,
       onActionClick,
       onClick,
-      theme,
+      theme = defaultTheme,
       type,
       zIndex,
       usePortal,
@@ -9972,8 +9989,7 @@ const CLASSNAME$z = getRootClassName(COMPONENT_NAME$z);
  * Component default props.
  */
 const DEFAULT_PROPS$w = {
-  orientation: Orientation.horizontal,
-  theme: Theme.light
+  orientation: Orientation.horizontal
 };
 
 /**
@@ -9984,6 +10000,7 @@ const DEFAULT_PROPS$w = {
  * @return React element.
  */
 const PostBlock = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       actions,
       attachments,
@@ -9994,7 +10011,7 @@ const PostBlock = /*#__PURE__*/forwardRef((props, ref) => {
       orientation,
       tags,
       text,
-      theme,
+      theme = defaultTheme,
       thumbnailProps,
       title
     } = props,
@@ -10057,9 +10074,7 @@ const CLASSNAME$y = getRootClassName(COMPONENT_NAME$y);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$v = {
-  theme: Theme.light
-};
+const DEFAULT_PROPS$v = {};
 
 /**
  * ProgressLinear component.
@@ -10069,9 +10084,10 @@ const DEFAULT_PROPS$v = {
  * @return React element.
  */
 const ProgressLinear = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       className,
-      theme
+      theme = defaultTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$C);
   return /*#__PURE__*/React__default.createElement("div", _extends({
@@ -10115,7 +10131,6 @@ const CLASSNAME$x = getRootClassName(COMPONENT_NAME$x);
  * Component default props.
  */
 const DEFAULT_PROPS$u = {
-  theme: Theme.light,
   size: Size.m
 };
 
@@ -10127,9 +10142,10 @@ const DEFAULT_PROPS$u = {
  * @return React element.
  */
 const ProgressCircular = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       className,
-      theme,
+      theme = defaultTheme,
       size
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$B);
@@ -10189,7 +10205,6 @@ const CLASSNAME$w = getRootClassName(COMPONENT_NAME$w);
  * Component default props.
  */
 const DEFAULT_PROPS$t = {
-  theme: Theme.light,
   variant: ProgressVariant.circular
 };
 
@@ -10202,9 +10217,10 @@ const DEFAULT_PROPS$t = {
  * @return React element.
  */
 const Progress = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       className,
-      theme,
+      theme = defaultTheme,
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$A);
@@ -10736,9 +10752,7 @@ const CLASSNAME$s = getRootClassName(COMPONENT_NAME$s);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$o = {
-  theme: Theme.light
-};
+const DEFAULT_PROPS$o = {};
 
 /**
  * RadioButton component.
@@ -10748,6 +10762,7 @@ const DEFAULT_PROPS$o = {
  * @return React element.
  */
 const RadioButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       checked,
       className,
@@ -10760,7 +10775,7 @@ const RadioButton = /*#__PURE__*/forwardRef((props, ref) => {
       label,
       name,
       onChange,
-      theme,
+      theme = defaultTheme,
       value,
       inputProps
     } = props,
@@ -10875,8 +10890,9 @@ const stopPropagation = evt => evt.stopPropagation();
 /**
  * Select component.
  */
-const SelectField = _ref => {
-  let {
+const SelectField = props => {
+  const defaultTheme = useTheme();
+  const {
       anchorRef,
       clearButtonProps,
       handleKeyboardNav,
@@ -10893,12 +10909,12 @@ const SelectField = _ref => {
       onInputClick,
       placeholder,
       selectedValueRender,
-      theme,
+      theme = defaultTheme,
       value,
       variant,
       selectElementRef
-    } = _ref,
-    forwardedProps = _objectWithoutProperties(_ref, _excluded$t);
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$t);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, variant === SelectVariant.input && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label && /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$q}__header`
   }, /*#__PURE__*/React__default.createElement(InputLabel, {
@@ -11007,8 +11023,9 @@ const DEFAULT_PROPS$m = {
   },
   selectedValueRender: choice => choice
 };
-const SelectMultipleField = _ref => {
-  let {
+const SelectMultipleField = props => {
+  const defaultTheme = useTheme();
+  const {
       anchorRef,
       handleKeyboardNav,
       hasError,
@@ -11024,12 +11041,12 @@ const SelectMultipleField = _ref => {
       placeholder,
       selectedChipRender,
       selectedValueRender,
-      theme,
+      theme = defaultTheme,
       value,
       variant,
       selectElementRef
-    } = _ref,
-    forwardedProps = _objectWithoutProperties(_ref, _excluded$s);
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$s);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, variant === SelectVariant.input && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label && /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$p}__header`
   }, /*#__PURE__*/React__default.createElement(InputLabel, {
@@ -11123,10 +11140,11 @@ const CLASSNAME$o = getRootClassName(COMPONENT_NAME$o);
  * @return React element.
  */
 const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme();
   const {
       children,
       className,
-      theme
+      theme = defaultTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$r);
   const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
@@ -11275,9 +11293,7 @@ const _excluded$o = ["className", "size", "color", "theme"];
  * Defines the props of the component.
  */
 
-const DEFAULT_PROPS$k = {
-  theme: Theme.light
-};
+const DEFAULT_PROPS$k = {};
 
 /**
  * Component display name.
@@ -11297,11 +11313,12 @@ const CLASSNAME$m = getRootClassName(COMPONENT_NAME$m);
  * @return React element.
  */
 const SkeletonCircle = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       className,
       size,
       color,
-      theme
+      theme = defaultTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$o);
   return /*#__PURE__*/React__default.createElement("div", _extends({
@@ -11335,7 +11352,6 @@ const SkeletonRectangleVariant = {
  */
 
 const DEFAULT_PROPS$j = {
-  theme: Theme.light,
   variant: SkeletonRectangleVariant.squared
 };
 
@@ -11357,11 +11373,12 @@ const CLASSNAME$l = getRootClassName(COMPONENT_NAME$l);
  * @return React element.
  */
 const SkeletonRectangle = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       aspectRatio,
       className,
       height,
-      theme,
+      theme = defaultTheme,
       variant,
       width,
       color
@@ -11393,9 +11410,7 @@ const _excluded$m = ["className", "theme", "typography", "width", "color"];
  * Defines the props of the component.
  */
 
-const DEFAULT_PROPS$i = {
-  theme: Theme.light
-};
+const DEFAULT_PROPS$i = {};
 
 /**
  * Component display name.
@@ -11415,9 +11430,10 @@ const CLASSNAME$k = getRootClassName(COMPONENT_NAME$k);
  * @return React element.
  */
 const SkeletonTypography = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       className,
-      theme,
+      theme = defaultTheme,
       typography,
       width,
       color
@@ -11498,8 +11514,7 @@ const CLASSNAME$j = getRootClassName(COMPONENT_NAME$j);
  */
 const DEFAULT_PROPS$h = {
   precision: 0,
-  steps: 0,
-  theme: Theme.light
+  steps: 0
 };
 
 /**
@@ -11534,6 +11549,7 @@ const computePercentFromValue = (value, min, max) => Number((value - min) / (max
  * @return React element.
  */
 const Slider = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       className,
       disabled,
@@ -11549,7 +11565,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
       onMouseDown,
       precision,
       steps,
-      theme,
+      theme = defaultTheme,
       value
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$l);
@@ -12121,9 +12137,7 @@ const _excluded$j = ["activeIndex", "autoPlay", "children", "className", "fillHe
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$g = _objectSpread2(_objectSpread2({}, DEFAULT_OPTIONS), {}, {
-  theme: Theme.light
-});
+const DEFAULT_PROPS$g = _objectSpread2({}, DEFAULT_OPTIONS);
 
 /**
  * Slideshow component.
@@ -12133,6 +12147,7 @@ const DEFAULT_PROPS$g = _objectSpread2(_objectSpread2({}, DEFAULT_OPTIONS), {},
  * @return React element.
  */
 const Slideshow = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       activeIndex,
       autoPlay,
@@ -12143,7 +12158,7 @@ const Slideshow = /*#__PURE__*/forwardRef((props, ref) => {
       interval,
       onChange,
       slideshowControlsProps,
-      theme,
+      theme = defaultTheme,
       id,
       slidesId,
       slideGroupLabel
@@ -12347,8 +12362,7 @@ const CLASSNAME$g = getRootClassName(COMPONENT_NAME$g);
  * Component default props.
  */
 const DEFAULT_PROPS$f = {
-  activeIndex: 0,
-  theme: Theme.light
+  activeIndex: 0
 };
 
 /**
@@ -12359,6 +12373,7 @@ const DEFAULT_PROPS$f = {
  * @return React element.
  */
 const InternalSlideshowControls = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       activeIndex,
       className,
@@ -12370,7 +12385,7 @@ const InternalSlideshowControls = /*#__PURE__*/forwardRef((props, ref) => {
       previousButtonProps,
       paginationProps,
       slidesCount,
-      theme,
+      theme = defaultTheme,
       isAutoPlaying = false,
       playButtonProps,
       paginationItemLabel,
@@ -12497,11 +12512,12 @@ const CLASSNAME$f = getRootClassName(COMPONENT_NAME$f);
  * @return React element.
  */
 const Slides = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme();
   const {
       activeIndex,
       id,
       className,
-      theme,
+      theme = defaultTheme,
       fillHeight,
       groupBy,
       isAutoPlaying,
@@ -12578,8 +12594,7 @@ const CLASSNAME$e = getRootClassName(COMPONENT_NAME$e);
  * Component default props.
  */
 const DEFAULT_PROPS$e = {
-  position: Alignment.left,
-  theme: Theme.light
+  position: Alignment.left
 };
 
 /**
@@ -12590,6 +12605,7 @@ const DEFAULT_PROPS$e = {
  * @return React element.
  */
 const Switch = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       checked,
       children,
@@ -12602,7 +12618,7 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
       name,
       onChange,
       position,
-      theme,
+      theme = defaultTheme,
       value,
       inputProps = {}
     } = props,
@@ -12681,9 +12697,7 @@ const CLASSNAME$d = getRootClassName(COMPONENT_NAME$d);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$d = {
-  theme: Theme.light
-};
+const DEFAULT_PROPS$d = {};
 
 /**
  * Table component.
@@ -12693,12 +12707,13 @@ const DEFAULT_PROPS$d = {
  * @return React element.
  */
 const Table = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       children,
       className,
       hasBefore,
       hasDividers,
-      theme
+      theme = defaultTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$e);
   return /*#__PURE__*/React__default.createElement("table", _extends({
@@ -13039,8 +13054,7 @@ const CLASSNAME$8 = `${CSS_PREFIX}-tabs`;
  */
 const DEFAULT_PROPS$8 = {
   layout: TabListLayout.fixed,
-  position: Alignment.left,
-  theme: Theme.light
+  position: Alignment.left
 };
 
 /**
@@ -13053,13 +13067,14 @@ const DEFAULT_PROPS$8 = {
  * @return React element.
  */
 const TabList = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       'aria-label': ariaLabel,
       children,
       className,
       layout,
       position,
-      theme
+      theme = defaultTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$8);
   const tabListRef = React__default.useRef(null);
@@ -13267,7 +13282,6 @@ const DEFAULT_MIN_ROWS = 2;
  * Component default props.
  */
 const DEFAULT_PROPS$5 = {
-  theme: Theme.light,
   type: 'text'
 };
 
@@ -13380,6 +13394,7 @@ const renderInputNative = props => {
  * @return React element.
  */
 const TextField = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       chips,
       className,
@@ -13407,7 +13422,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
       onFocus,
       placeholder,
       textFieldRef,
-      theme,
+      theme = defaultTheme,
       type,
       value,
       afterElement
@@ -13732,8 +13747,7 @@ const CLASSNAME$4 = getRootClassName(COMPONENT_NAME$4);
  */
 const DEFAULT_PROPS$4 = {
   fallback: mdiImageBroken,
-  loading: 'lazy',
-  theme: Theme.light
+  loading: 'lazy'
 };
 
 /**
@@ -13745,6 +13759,7 @@ const DEFAULT_PROPS$4 = {
  */
 const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
   var _loadingPlaceholderIm;
+  const defaultTheme = useTheme() || Theme.light;
   const {
       align,
       alt,
@@ -13765,7 +13780,7 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
       loading,
       loadingPlaceholderImageRef,
       size,
-      theme,
+      theme = defaultTheme,
       variant,
       linkProps,
       linkAs
@@ -14305,7 +14320,6 @@ const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
 const DEFAULT_PROPS$1 = {
   aspectRatio: AspectRatio.horizontal,
   size: Size.xl,
-  theme: Theme.light,
   variant: UploaderVariant.square
 };
 
@@ -14317,13 +14331,14 @@ const DEFAULT_PROPS$1 = {
  * @return React element.
  */
 const Uploader = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       aspectRatio,
       className,
       label,
       icon,
       size,
-      theme,
+      theme = defaultTheme,
       variant,
       fileInputProps
     } = props,
@@ -14413,8 +14428,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS = {
   orientation: Orientation.horizontal,
-  size: Size.m,
-  theme: Theme.light
+  size: Size.m
 };
 
 /**
@@ -14425,6 +14439,7 @@ const DEFAULT_PROPS = {
  * @return React element.
  */
 const UserBlock = /*#__PURE__*/forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       avatarProps,
       className,
@@ -14440,7 +14455,7 @@ const UserBlock = /*#__PURE__*/forwardRef((props, ref) => {
       orientation,
       simpleAction,
       size,
-      theme
+      theme = defaultTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded);
   let componentSize = size;
@@ -14513,5 +14528,5 @@ UserBlock.displayName = COMPONENT_NAME;
 UserBlock.className = CLASSNAME;
 UserBlock.defaultProps = DEFAULT_PROPS;
 
-export { AlertDialog, Alignment, AspectRatio, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonEmphasis, ButtonGroup, Checkbox, Chip, ChipGroup, ColorPalette, ColorVariant, CommentBlock, CommentBlockVariant, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, Emphasis, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Kind, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Orientation, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, Select, SelectMultiple, SelectMultipleField, SelectVariant, SideNavigation, SideNavigationItem, Size, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, Theme, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, Uploader, UploaderVariant, UserBlock, WhiteSpace, clamp, isClickable, useFocusPointStyle, useHeadingLevel };
+export { AlertDialog, Alignment, AspectRatio, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonEmphasis, ButtonGroup, Checkbox, Chip, ChipGroup, ColorPalette, ColorVariant, CommentBlock, CommentBlockVariant, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, Emphasis, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Kind, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Orientation, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, Select, SelectMultiple, SelectMultipleField, SelectVariant, SideNavigation, SideNavigationItem, Size, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, Theme, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, Uploader, UploaderVariant, UserBlock, WhiteSpace, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
 //# sourceMappingURL=index.js.map