@lumx/react 3.10.0 → 3.10.1-alpha.1

package/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { forwardRef, useState, useEffect, useMemo, useRef, Children, isValidElement, cloneElement, useLayoutEffect, useCallback, Fragment, createContext, useContext, useReducer } from 'react';
+import React__default, { useState, useEffect, useMemo, useRef, Children, isValidElement, cloneElement, useLayoutEffect, useCallback, Fragment, createContext, forwardRef as forwardRef$1, useContext, useReducer } from 'react';
 import kebabCase from 'lodash/kebabCase';
 import isBoolean from 'lodash/isBoolean';
 import isEmpty from 'lodash/isEmpty';
@@ -635,6 +635,12 @@ function useId() {
   }, []);
 }
 
+/**
+ * React.forwardRef but re-typed to attach some custom metadata on our components.
+ */
+
+const forwardRef = React__default.forwardRef;
+
 const _excluded$1s = ["id", "title", "className", "cancelProps", "confirmProps", "kind", "size", "dialogProps", "children"],
   _excluded2$3 = ["label", "onClick"],
   _excluded3 = ["label", "onClick"];
@@ -673,7 +679,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
 };
@@ -687,7 +693,7 @@ const DEFAULT_PROPS$13 = {
  * It should not have a complex content.
  * Children of this component should only be strings, paragraphs or links.
  */
-const AlertDialog = /*#__PURE__*/forwardRef((props, ref) => {
+const AlertDialog = forwardRef((props, ref) => {
   const {
       id,
       title,
@@ -770,7 +776,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 +829,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 +858,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,
@@ -857,7 +873,8 @@ const DEFAULT_PROPS$12 = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Autocomplete = /*#__PURE__*/forwardRef((props, ref) => {
+const Autocomplete = forwardRef((props, ref) => {
+  const defaultTheme = useTheme();
   const {
       anchorToInput,
       children,
@@ -889,7 +906,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((props, ref) => {
       placeholder,
       placement,
       shouldFocusOnClose,
-      theme,
+      theme = defaultTheme,
       value,
       textFieldProps = {},
       focusAnchorOnClose
@@ -942,7 +959,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 +980,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) {
@@ -990,7 +1007,8 @@ const DEFAULT_PROPS$11 = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const AutocompleteMultiple = /*#__PURE__*/forwardRef((props, ref) => {
+const AutocompleteMultiple = forwardRef((props, ref) => {
+  const defaultTheme = useTheme();
   const {
       anchorToInput,
       children,
@@ -1024,7 +1042,7 @@ const AutocompleteMultiple = /*#__PURE__*/forwardRef((props, ref) => {
       placement,
       selectedChipRender,
       shouldFocusOnClose,
-      theme,
+      theme = defaultTheme,
       type,
       value,
       values
@@ -1070,7 +1088,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 +1113,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
 };
 
 /**
@@ -1107,7 +1124,8 @@ const DEFAULT_PROPS$10 = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Avatar = /*#__PURE__*/forwardRef((props, ref) => {
+const Avatar = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       actions,
       alt,
@@ -1119,7 +1137,7 @@ const Avatar = /*#__PURE__*/forwardRef((props, ref) => {
       onClick,
       onKeyPress,
       size,
-      theme,
+      theme = defaultTheme,
       thumbnailProps
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$1p);
@@ -1151,7 +1169,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 +1190,7 @@ const CLASSNAME$1g = getRootClassName(COMPONENT_NAME$1j);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$$ = {
+const DEFAULT_PROPS$10 = {
   color: ColorPalette.primary
 };
 
@@ -1183,7 +1201,7 @@ const DEFAULT_PROPS$$ = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Badge = /*#__PURE__*/forwardRef((props, ref) => {
+const Badge = forwardRef((props, ref) => {
   const {
       children,
       className,
@@ -1201,7 +1219,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 +1428,7 @@ const CLASSNAME$1f = getRootClassName(COMPONENT_NAME$1i);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$_ = {
+const DEFAULT_PROPS$$ = {
   size: Size.regular
 };
 
@@ -1433,7 +1451,7 @@ function isClickable(_ref) {
  * @param  ref   Component ref.
  * @return React element.
  */
-const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
+const ListItem = forwardRef((props, ref) => {
   const {
       after,
       before,
@@ -1498,7 +1516,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 +2035,7 @@ const CLASSNAME$1e = getRootClassName(COMPONENT_NAME$1h);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Z = {
+const DEFAULT_PROPS$_ = {
   tabIndex: -1
 };
 
@@ -2029,7 +2047,7 @@ const DEFAULT_PROPS$Z = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const InternalList = /*#__PURE__*/forwardRef((props, ref) => {
+const InternalList = forwardRef((props, ref) => {
   const {
       children,
       className,
@@ -2060,7 +2078,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 +4674,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,
@@ -4670,7 +4688,7 @@ const renderPopover = (children, usePortal) => {
 };
 
 // Inner component (must be wrapped before export)
-const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
+const _InnerPopover = forwardRef((props, ref) => {
   const {
       anchorRef,
       as: Component = 'div',
@@ -4753,7 +4771,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 +4789,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 +4853,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,
@@ -4851,7 +4871,7 @@ const DEFAULT_PROPS$X = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Dropdown = /*#__PURE__*/forwardRef((props, ref) => {
+const Dropdown = forwardRef((props, ref) => {
   const {
       anchorRef,
       children,
@@ -4913,7 +4933,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 +4966,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
 };
 
 /**
@@ -4958,12 +4977,13 @@ const DEFAULT_PROPS$W = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const InputHelper = /*#__PURE__*/forwardRef((props, ref) => {
+const InputHelper = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       children,
       className,
       kind,
-      theme
+      theme = defaultTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$1i);
   const {
@@ -4981,7 +5001,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 +5044,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 +5071,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);
@@ -5140,7 +5160,7 @@ const COMPONENT_NAME$1c = 'BadgeWrapper';
  * Component default class name and class prefix.
  */
 const CLASSNAME$19 = getRootClassName(COMPONENT_NAME$1c);
-const BadgeWrapper = /*#__PURE__*/forwardRef((props, ref) => {
+const BadgeWrapper = forwardRef((props, ref) => {
   const {
       badge,
       children,
@@ -5159,7 +5179,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"];
 
@@ -5209,7 +5229,7 @@ const renderButtonWrapper = props => {
  * @param  ref   Component ref.
  * @return React element.
  */
-const ButtonRoot = /*#__PURE__*/forwardRef((props, ref) => {
+const ButtonRoot = forwardRef((props, ref) => {
   const {
       'aria-label': ariaLabel,
       children,
@@ -5314,10 +5334,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
 };
 
 /**
@@ -5327,7 +5346,8 @@ const DEFAULT_PROPS$U = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Button = /*#__PURE__*/forwardRef((props, ref) => {
+const Button = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       children,
       className,
@@ -5335,7 +5355,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 +5384,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 +5400,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
 };
 
 /**
@@ -5393,14 +5412,15 @@ const DEFAULT_PROPS$T = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
+const IconButton = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       emphasis,
       image,
       icon,
       label,
       size,
-      theme,
+      theme = defaultTheme,
       tooltipProps,
       hideTooltip
     } = props,
@@ -5426,7 +5446,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 +5467,7 @@ const CLASSNAME$16 = getRootClassName(COMPONENT_NAME$18);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$S = {};
+const DEFAULT_PROPS$T = {};
 
 /**
  * ButtonGroup component.
@@ -5456,7 +5476,7 @@ const DEFAULT_PROPS$S = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
+const ButtonGroup = forwardRef((props, ref) => {
   const {
       children,
       className
@@ -5470,7 +5490,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 +5516,7 @@ const CLASSNAME$15 = getRootClassName(COMPONENT_NAME$17);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$R = {
-  theme: Theme.light
-};
+const DEFAULT_PROPS$S = {};
 
 /**
  * Checkbox component.
@@ -5507,7 +5525,8 @@ const DEFAULT_PROPS$R = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
+const Checkbox = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       checked,
       className,
@@ -5520,7 +5539,7 @@ const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
       label,
       name,
       onChange,
-      theme,
+      theme = defaultTheme,
       value,
       inputProps = {}
     } = props,
@@ -5586,7 +5605,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 +5646,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
 };
 
 /**
@@ -5639,7 +5657,8 @@ const DEFAULT_PROPS$Q = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Chip = /*#__PURE__*/forwardRef((props, ref) => {
+const Chip = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       after,
       before,
@@ -5655,7 +5674,7 @@ const Chip = /*#__PURE__*/forwardRef((props, ref) => {
       onBeforeClick,
       onClick,
       size,
-      theme,
+      theme = defaultTheme,
       href,
       onKeyDown
     } = props,
@@ -5723,7 +5742,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 +5805,7 @@ const _excluded$19 = ["align", "children", "className"];
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$P = {};
+const DEFAULT_PROPS$Q = {};
 
 /**
  * Component display name.
@@ -5805,7 +5824,7 @@ const CLASSNAME$13 = getRootClassName(COMPONENT_NAME$15);
  * @param  ref   Component ref.
  * @return React element.
  */
-const InternalChipGroup = /*#__PURE__*/forwardRef((props, ref) => {
+const InternalChipGroup = forwardRef((props, ref) => {
   const {
       align,
       children,
@@ -5823,7 +5842,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 +5873,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
 };
 
@@ -5866,7 +5884,8 @@ const DEFAULT_PROPS$O = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const CommentBlock = /*#__PURE__*/forwardRef((props, ref) => {
+const CommentBlock = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       actions,
       avatarProps,
@@ -5883,7 +5902,7 @@ const CommentBlock = /*#__PURE__*/forwardRef((props, ref) => {
       onMouseEnter,
       onMouseLeave,
       text,
-      theme,
+      theme = defaultTheme,
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$18);
@@ -5938,7 +5957,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.
@@ -6199,7 +6218,7 @@ const COMPONENT_NAME$12 = 'DatePickerControlled';
  * @param  ref   Component ref.
  * @return React element.
  */
-const DatePickerControlled = /*#__PURE__*/forwardRef((props, ref) => {
+const DatePickerControlled = forwardRef((props, ref) => {
   var _RegExp$exec;
   const {
     locale = getCurrentLocale(),
@@ -6382,7 +6401,7 @@ const _excluded$17 = ["defaultMonth", "locale", "value", "onChange"];
  * @param  ref   Component ref.
  * @return React element.
  */
-const DatePicker = /*#__PURE__*/forwardRef((props, ref) => {
+const DatePicker = forwardRef((props, ref) => {
   const {
       defaultMonth,
       locale,
@@ -6444,7 +6463,7 @@ const COMPONENT_NAME$11 = 'DatePickerField';
  * @param  ref   Component ref.
  * @return React element.
  */
-const DatePickerField = /*#__PURE__*/forwardRef((props, ref) => {
+const DatePickerField = forwardRef((props, ref) => {
   const {
       defaultMonth,
       disabled,
@@ -6854,7 +6873,7 @@ const CLASSNAME$10 = getRootClassName(COMPONENT_NAME$10);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$N = {
+const DEFAULT_PROPS$O = {
   size: Size.big,
   disableBodyScroll: true
 };
@@ -6866,7 +6885,7 @@ const DEFAULT_PROPS$N = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Dialog = /*#__PURE__*/forwardRef((props, ref) => {
+const Dialog = forwardRef((props, ref) => {
   var _intersections$get$is, _intersections$get, _intersections$get$is2, _intersections$get2;
   if (!DOCUMENT) {
     // Can't render in SSR.
@@ -6972,7 +6991,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 +7021,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 +7046,7 @@ const CLASSNAME$$ = getRootClassName(COMPONENT_NAME$$);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$M = {
-  theme: Theme.light
-};
+const DEFAULT_PROPS$N = {};
 
 /**
  * Divider component.
@@ -7036,10 +7055,11 @@ const DEFAULT_PROPS$M = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Divider = /*#__PURE__*/forwardRef((props, ref) => {
+const Divider = 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 +7073,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"];
 
@@ -7078,10 +7098,11 @@ const CLASSNAME$_ = getRootClassName(COMPONENT_NAME$_);
  * @param  ref   Component ref.
  * @return React element.
  */
-const DragHandle = /*#__PURE__*/forwardRef((props, ref) => {
+const DragHandle = 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 +7140,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');
@@ -7133,7 +7152,8 @@ const isFooter = isComponent('footer');
  * @param  ref   Component ref.
  * @return React element.
  */
-const ExpansionPanel = /*#__PURE__*/forwardRef((props, ref) => {
+const ExpansionPanel = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       className,
       children: anyChildren,
@@ -7144,7 +7164,7 @@ const ExpansionPanel = /*#__PURE__*/forwardRef((props, ref) => {
       onClose,
       onOpen,
       onToggleOpen,
-      theme,
+      theme = defaultTheme,
       toggleButtonProps
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$12);
@@ -7226,14 +7246,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.
@@ -7242,13 +7260,14 @@ const DEFAULT_PROPS$K = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Flag = /*#__PURE__*/forwardRef((props, ref) => {
+const Flag = 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 +7293,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"];
 
@@ -7299,7 +7318,7 @@ const CLASSNAME$X = getRootClassName(COMPONENT_NAME$X);
  * @param  ref   Component ref.
  * @return React element.
  */
-const FlexBox = /*#__PURE__*/forwardRef((props, ref) => {
+const FlexBox = forwardRef((props, ref) => {
   const {
       as: Component = 'div',
       children,
@@ -7343,7 +7362,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
 };
@@ -7365,7 +7384,7 @@ const isActions = isComponentType(Actions);
  *
  * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076
  */
-const BaseGenericBlock = /*#__PURE__*/forwardRef((props, ref) => {
+const BaseGenericBlock = forwardRef((props, ref) => {
   var _sections$figureChild, _sections$figureChild2, _sections$figureChild3, _sections$figureChild4, _sections$contentChil, _sections$contentChil2, _sections$contentChil3, _sections$contentChil4, _sections$actionsChil, _sections$actionsChil2, _sections$actionsChil3, _sections$actionsChil4;
   const {
       className,
@@ -7421,7 +7440,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 +7515,7 @@ const CLASSNAME$V = getRootClassName(COMPONENT_NAME$V);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$I = {};
+const DEFAULT_PROPS$J = {};
 
 /**
  * Text component.
@@ -7505,7 +7524,7 @@ const DEFAULT_PROPS$I = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-const Text = /*#__PURE__*/forwardRef((props, ref) => {
+const Text = forwardRef((props, ref) => {
   const {
       as: Component,
       children,
@@ -7562,7 +7581,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,14 +7634,14 @@ const CLASSNAME$U = getRootClassName(COMPONENT_NAME$U);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$H = {};
+const DEFAULT_PROPS$I = {};
 
 /**
  * Renders a heading component.
  * Extends the `Text` Component with the heading level automatically computed based on
  * the current level provided by the context.
  */
-const Heading = /*#__PURE__*/forwardRef((props, ref) => {
+const Heading = forwardRef((props, ref) => {
   const {
       children,
       as,
@@ -7644,7 +7663,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 +7707,7 @@ const CLASSNAME$T = getRootClassName(COMPONENT_NAME$T);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$G = {
+const DEFAULT_PROPS$H = {
   orientation: Orientation.horizontal,
   wrap: 'nowrap'
 };
@@ -7700,7 +7719,7 @@ const DEFAULT_PROPS$G = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Grid = /*#__PURE__*/forwardRef((props, ref) => {
+const Grid = forwardRef((props, ref) => {
   const {
       children,
       className,
@@ -7728,7 +7747,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"];
 
@@ -7753,7 +7772,7 @@ const CLASSNAME$S = getRootClassName(COMPONENT_NAME$S);
  * @param  ref   Component ref.
  * @return React element.
  */
-const GridItem = /*#__PURE__*/forwardRef((props, ref) => {
+const GridItem = forwardRef((props, ref) => {
   const {
       children,
       className,
@@ -7795,7 +7814,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
@@ -7806,7 +7825,7 @@ const DEFAULT_PROPS$F = {};
  * @param ref Component ref.
  * @return React element.
  */
-const GridColumn = /*#__PURE__*/forwardRef((props, ref) => {
+const GridColumn = forwardRef((props, ref) => {
   const {
       as: Component = 'div',
       gap,
@@ -7831,7 +7850,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 +7871,7 @@ const CLASSNAME$Q = getRootClassName(COMPONENT_NAME$Q);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$E = {};
+const DEFAULT_PROPS$F = {};
 
 /**
  * Icon component.
@@ -7861,7 +7880,8 @@ const DEFAULT_PROPS$E = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-const Icon = /*#__PURE__*/forwardRef((props, ref) => {
+const Icon = forwardRef((props, ref) => {
+  const defaultTheme = useTheme();
   const {
       className,
       color,
@@ -7869,7 +7889,7 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
       hasShape,
       icon,
       size,
-      theme,
+      theme = defaultTheme,
       alt
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$V);
@@ -7926,7 +7946,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 +8036,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
 };
 
@@ -8029,7 +8048,8 @@ const DEFAULT_PROPS$D = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const ImageBlock = /*#__PURE__*/forwardRef((props, ref) => {
+const ImageBlock = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       actions,
       align,
@@ -8043,7 +8063,7 @@ const ImageBlock = /*#__PURE__*/forwardRef((props, ref) => {
       image,
       size,
       tags,
-      theme,
+      theme = defaultTheme,
       thumbnailProps,
       title,
       titleProps
@@ -8085,7 +8105,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.
@@ -8767,7 +8787,7 @@ function useImageLightbox(props) {
 }
 
 const _excluded$S = ["className", "isOpen", "closeButtonProps", "onClose", "parentElement", "activeImageIndex", "slideshowControlsProps", "slideGroupLabel", "images", "zoomOutButtonProps", "zoomInButtonProps", "activeImageRef"];
-const Inner = /*#__PURE__*/forwardRef((props, ref) => {
+const Inner = forwardRef((props, ref) => {
   const {
       className,
       isOpen,
@@ -8854,7 +8874,7 @@ const CLASSNAME$N = getRootClassName(COMPONENT_NAME$N);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$C = {};
+const DEFAULT_PROPS$D = {};
 
 /**
  * InlineList component.
@@ -8863,7 +8883,7 @@ const DEFAULT_PROPS$C = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-const InlineList = /*#__PURE__*/forwardRef((props, ref) => {
+const InlineList = forwardRef((props, ref) => {
   const {
       className,
       color,
@@ -8904,7 +8924,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 +8945,7 @@ const CLASSNAME$M = getRootClassName(COMPONENT_NAME$M);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$B = {
-  theme: Theme.light
-};
+const DEFAULT_PROPS$C = {};
 
 /**
  * InputLabel component.
@@ -8936,13 +8954,14 @@ const DEFAULT_PROPS$B = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const InputLabel = /*#__PURE__*/forwardRef((props, ref) => {
+const InputLabel = 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 +8977,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"];
 
@@ -8983,7 +9002,7 @@ const CLASSNAME$L = getRootClassName(COMPONENT_NAME$L);
  * @param  ref   Component ref.
  * @return React element.
  */
-const Lightbox = /*#__PURE__*/forwardRef((props, ref) => {
+const Lightbox = forwardRef((props, ref) => {
   const {
       'aria-labelledby': propAriaLabelledBy,
       ariaLabelledBy = propAriaLabelledBy,
@@ -9079,14 +9098,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;
@@ -9139,7 +9160,7 @@ const getIconSize = typography => {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Link = /*#__PURE__*/forwardRef((props, ref) => {
+const Link = forwardRef((props, ref) => {
   const {
       children,
       className,
@@ -9221,9 +9242,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'
 };
 
@@ -9234,7 +9254,8 @@ const DEFAULT_PROPS$A = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const LinkPreview = /*#__PURE__*/forwardRef((props, ref) => {
+const LinkPreview = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       className,
       description,
@@ -9242,7 +9263,7 @@ const LinkPreview = /*#__PURE__*/forwardRef((props, ref) => {
       linkAs,
       linkProps,
       size,
-      theme,
+      theme = defaultTheme,
       thumbnailProps,
       title,
       titleHeading
@@ -9300,7 +9321,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"];
 
@@ -9325,7 +9346,7 @@ const CLASSNAME$I = getRootClassName(COMPONENT_NAME$I);
  * @param  ref   Component ref.
  * @return React element.
  */
-const ListDivider = /*#__PURE__*/forwardRef((props, ref) => {
+const ListDivider = forwardRef((props, ref) => {
   const {
       className
     } = props,
@@ -9364,7 +9385,7 @@ const CLASSNAME$H = getRootClassName(COMPONENT_NAME$H);
  * @param  ref   Component ref.
  * @return React element.
  */
-const ListSubheader = /*#__PURE__*/forwardRef((props, ref) => {
+const ListSubheader = forwardRef((props, ref) => {
   const {
       children,
       className
@@ -9426,7 +9447,7 @@ const CONFIG = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Message = /*#__PURE__*/forwardRef((props, ref) => {
+const Message = forwardRef((props, ref) => {
   const {
       children,
       className,
@@ -9490,9 +9511,7 @@ const CLASSNAME$F = getRootClassName(COMPONENT_NAME$F);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$z = {
-  theme: Theme.light
-};
+const DEFAULT_PROPS$A = {};
 
 /**
  * Mosaic component.
@@ -9501,10 +9520,11 @@ const DEFAULT_PROPS$z = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Mosaic = /*#__PURE__*/forwardRef((props, ref) => {
+const Mosaic = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       className,
-      theme,
+      theme = defaultTheme,
       thumbnails,
       onImageClick
     } = props,
@@ -9554,14 +9574,11 @@ 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) {
-  return /*#__PURE__*/React__default.forwardRef(render);
-}
+
+const forwardRefPolymorphic = React__default.forwardRef;
 
 const _excluded$I = ["className", "icon", "label", "isCurrentPage", "as"];
 
@@ -9589,7 +9606,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
@@ -9642,7 +9659,7 @@ const COMPONENT_NAME$D = 'NavigationSection';
  * Component default class name and class prefix.
  */
 const CLASSNAME$D = getRootClassName(COMPONENT_NAME$D);
-const NavigationSection = Object.assign( /*#__PURE__*/forwardRef((props, ref) => {
+const NavigationSection = Object.assign( /*#__PURE__*/forwardRef$1((props, ref) => {
   const {
       children,
       className,
@@ -9656,7 +9673,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 +9713,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 +9741,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) => {
+forwardRef$1((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 +9779,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 +9827,6 @@ const CLASSNAME$B = getRootClassName(COMPONENT_NAME$B);
  * Component default props.
  */
 const DEFAULT_PROPS$y = {
-  theme: Theme.light,
   zIndex: 9999,
   usePortal: true
 };
@@ -9818,7 +9839,8 @@ const DEFAULT_PROPS$y = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Notification = /*#__PURE__*/forwardRef((props, ref) => {
+const Notification = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       actionLabel,
       className,
@@ -9826,7 +9848,7 @@ const Notification = /*#__PURE__*/forwardRef((props, ref) => {
       isOpen,
       onActionClick,
       onClick,
-      theme,
+      theme = defaultTheme,
       type,
       zIndex,
       usePortal,
@@ -9919,7 +9941,7 @@ const DEFAULT_PROPS$x = {};
  * * Sets a focus trap within the popover
  * * Closes on click away and escape.
  */
-const PopoverDialog = /*#__PURE__*/forwardRef((props, ref) => {
+const PopoverDialog = forwardRef((props, ref) => {
   const {
       children,
       isOpen,
@@ -9972,8 +9994,7 @@ const CLASSNAME$z = getRootClassName(COMPONENT_NAME$z);
  * Component default props.
  */
 const DEFAULT_PROPS$w = {
-  orientation: Orientation.horizontal,
-  theme: Theme.light
+  orientation: Orientation.horizontal
 };
 
 /**
@@ -9983,7 +10004,8 @@ const DEFAULT_PROPS$w = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const PostBlock = /*#__PURE__*/forwardRef((props, ref) => {
+const PostBlock = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       actions,
       attachments,
@@ -9994,7 +10016,7 @@ const PostBlock = /*#__PURE__*/forwardRef((props, ref) => {
       orientation,
       tags,
       text,
-      theme,
+      theme = defaultTheme,
       thumbnailProps,
       title
     } = props,
@@ -10057,9 +10079,7 @@ const CLASSNAME$y = getRootClassName(COMPONENT_NAME$y);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$v = {
-  theme: Theme.light
-};
+const DEFAULT_PROPS$v = {};
 
 /**
  * ProgressLinear component.
@@ -10068,10 +10088,11 @@ const DEFAULT_PROPS$v = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const ProgressLinear = /*#__PURE__*/forwardRef((props, ref) => {
+const ProgressLinear = 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 +10136,6 @@ const CLASSNAME$x = getRootClassName(COMPONENT_NAME$x);
  * Component default props.
  */
 const DEFAULT_PROPS$u = {
-  theme: Theme.light,
   size: Size.m
 };
 
@@ -10126,10 +10146,11 @@ const DEFAULT_PROPS$u = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const ProgressCircular = /*#__PURE__*/forwardRef((props, ref) => {
+const ProgressCircular = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       className,
-      theme,
+      theme = defaultTheme,
       size
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$B);
@@ -10189,7 +10210,6 @@ const CLASSNAME$w = getRootClassName(COMPONENT_NAME$w);
  * Component default props.
  */
 const DEFAULT_PROPS$t = {
-  theme: Theme.light,
   variant: ProgressVariant.circular
 };
 
@@ -10201,10 +10221,11 @@ const DEFAULT_PROPS$t = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Progress = /*#__PURE__*/forwardRef((props, ref) => {
+const Progress = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       className,
-      theme,
+      theme = defaultTheme,
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$A);
@@ -10500,7 +10521,7 @@ const DEFAULT_PROPS$r = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-const ProgressTracker = /*#__PURE__*/forwardRef((props, ref) => {
+const ProgressTracker = forwardRef((props, ref) => {
   var _state$ids, _state$ids$tab;
   const {
       'aria-label': ariaLabel,
@@ -10578,7 +10599,7 @@ const DEFAULT_PROPS$q = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-const ProgressTrackerStep = /*#__PURE__*/forwardRef((props, ref) => {
+const ProgressTrackerStep = forwardRef((props, ref) => {
   const {
       className,
       disabled,
@@ -10690,7 +10711,7 @@ const DEFAULT_PROPS$p = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-const ProgressTrackerStepPanel = /*#__PURE__*/forwardRef((props, ref) => {
+const ProgressTrackerStepPanel = forwardRef((props, ref) => {
   const {
       children,
       id,
@@ -10736,9 +10757,7 @@ const CLASSNAME$s = getRootClassName(COMPONENT_NAME$s);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$o = {
-  theme: Theme.light
-};
+const DEFAULT_PROPS$o = {};
 
 /**
  * RadioButton component.
@@ -10747,7 +10766,8 @@ const DEFAULT_PROPS$o = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const RadioButton = /*#__PURE__*/forwardRef((props, ref) => {
+const RadioButton = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       checked,
       className,
@@ -10760,7 +10780,7 @@ const RadioButton = /*#__PURE__*/forwardRef((props, ref) => {
       label,
       name,
       onChange,
-      theme,
+      theme = defaultTheme,
       value,
       inputProps
     } = props,
@@ -10841,7 +10861,7 @@ const CLASSNAME$r = getRootClassName(COMPONENT_NAME$r);
  * @param  ref   Component ref.
  * @return React element.
  */
-const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
+const RadioGroup = forwardRef((props, ref) => {
   const {
       children,
       className
@@ -10875,8 +10895,9 @@ const stopPropagation = evt => evt.stopPropagation();
 /**
  * Select component.
  */
-const SelectField = _ref => {
-  let {
+const SelectField = props => {
+  const defaultTheme = useTheme();
+  const {
       anchorRef,
       clearButtonProps,
       handleKeyboardNav,
@@ -10893,12 +10914,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, {
@@ -10960,7 +10981,7 @@ const SelectField = _ref => {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Select = /*#__PURE__*/forwardRef((props, ref) => {
+const Select = forwardRef((props, ref) => {
   const isEmpty$1 = isEmpty(props.value);
   const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty$1;
   return WithSelectContext(SelectField, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -11007,8 +11028,9 @@ const DEFAULT_PROPS$m = {
   },
   selectedValueRender: choice => choice
 };
-const SelectMultipleField = _ref => {
-  let {
+const SelectMultipleField = props => {
+  const defaultTheme = useTheme();
+  const {
       anchorRef,
       handleKeyboardNav,
       hasError,
@@ -11024,12 +11046,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, {
@@ -11085,7 +11107,7 @@ const SelectMultipleField = _ref => {
  * @param  ref   Component ref.
  * @return React element.
  */
-const SelectMultiple = /*#__PURE__*/forwardRef((props, ref) => {
+const SelectMultiple = forwardRef((props, ref) => {
   return WithSelectContext(SelectMultipleField, _objectSpread2(_objectSpread2({}, props), {}, {
     className: classNames(props.className, handleBasicClasses({
       hasMultiple: !props.isEmpty,
@@ -11122,11 +11144,12 @@ const CLASSNAME$o = getRootClassName(COMPONENT_NAME$o);
  * @param  ref   Component ref.
  * @return React element.
  */
-const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
+const SideNavigation = 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));
@@ -11191,7 +11214,7 @@ const DEFAULT_PROPS$l = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const SideNavigationItem = /*#__PURE__*/forwardRef((props, ref) => {
+const SideNavigationItem = forwardRef((props, ref) => {
   const {
       children,
       className,
@@ -11275,9 +11298,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.
@@ -11296,12 +11317,13 @@ const CLASSNAME$m = getRootClassName(COMPONENT_NAME$m);
  * @param  ref   Component ref.
  * @return React element.
  */
-const SkeletonCircle = /*#__PURE__*/forwardRef((props, ref) => {
+const SkeletonCircle = 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 +11357,6 @@ const SkeletonRectangleVariant = {
  */
 
 const DEFAULT_PROPS$j = {
-  theme: Theme.light,
   variant: SkeletonRectangleVariant.squared
 };
 
@@ -11356,12 +11377,13 @@ const CLASSNAME$l = getRootClassName(COMPONENT_NAME$l);
  * @param  ref   Component ref.
  * @return React element.
  */
-const SkeletonRectangle = /*#__PURE__*/forwardRef((props, ref) => {
+const SkeletonRectangle = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       aspectRatio,
       className,
       height,
-      theme,
+      theme = defaultTheme,
       variant,
       width,
       color
@@ -11393,9 +11415,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.
@@ -11414,10 +11434,11 @@ const CLASSNAME$k = getRootClassName(COMPONENT_NAME$k);
  * @param  ref   Component ref.
  * @return React element.
  */
-const SkeletonTypography = /*#__PURE__*/forwardRef((props, ref) => {
+const SkeletonTypography = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       className,
-      theme,
+      theme = defaultTheme,
       typography,
       width,
       color
@@ -11498,8 +11519,7 @@ const CLASSNAME$j = getRootClassName(COMPONENT_NAME$j);
  */
 const DEFAULT_PROPS$h = {
   precision: 0,
-  steps: 0,
-  theme: Theme.light
+  steps: 0
 };
 
 /**
@@ -11533,7 +11553,8 @@ const computePercentFromValue = (value, min, max) => Number((value - min) / (max
  * @param  ref   Component ref.
  * @return React element.
  */
-const Slider = /*#__PURE__*/forwardRef((props, ref) => {
+const Slider = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       className,
       disabled,
@@ -11549,7 +11570,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
       onMouseDown,
       precision,
       steps,
-      theme,
+      theme = defaultTheme,
       value
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$l);
@@ -12085,7 +12106,7 @@ const buildSlideShowGroupId = (slidesId, index) => `${slidesId}-slide-${index}`;
  * @param  ref   Component ref.
  * @return React element.
  */
-const SlideshowItemGroup = /*#__PURE__*/forwardRef((props, ref) => {
+const SlideshowItemGroup = forwardRef((props, ref) => {
   const {
       className,
       children,
@@ -12121,9 +12142,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.
@@ -12132,7 +12151,8 @@ const DEFAULT_PROPS$g = _objectSpread2(_objectSpread2({}, DEFAULT_OPTIONS), {},
  * @param  ref   Component ref.
  * @return React element.
  */
-const Slideshow = /*#__PURE__*/forwardRef((props, ref) => {
+const Slideshow = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       activeIndex,
       autoPlay,
@@ -12143,7 +12163,7 @@ const Slideshow = /*#__PURE__*/forwardRef((props, ref) => {
       interval,
       onChange,
       slideshowControlsProps,
-      theme,
+      theme = defaultTheme,
       id,
       slidesId,
       slideGroupLabel
@@ -12253,7 +12273,7 @@ const CLASSNAME$h = getRootClassName(COMPONENT_NAME$h);
  * @param  ref   Component ref.
  * @return React element.
  */
-const SlideshowItem = /*#__PURE__*/forwardRef((props, ref) => {
+const SlideshowItem = forwardRef((props, ref) => {
   const {
       className,
       children
@@ -12347,8 +12367,7 @@ const CLASSNAME$g = getRootClassName(COMPONENT_NAME$g);
  * Component default props.
  */
 const DEFAULT_PROPS$f = {
-  activeIndex: 0,
-  theme: Theme.light
+  activeIndex: 0
 };
 
 /**
@@ -12358,7 +12377,8 @@ const DEFAULT_PROPS$f = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const InternalSlideshowControls = /*#__PURE__*/forwardRef((props, ref) => {
+const InternalSlideshowControls = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       activeIndex,
       className,
@@ -12370,7 +12390,7 @@ const InternalSlideshowControls = /*#__PURE__*/forwardRef((props, ref) => {
       previousButtonProps,
       paginationProps,
       slidesCount,
-      theme,
+      theme = defaultTheme,
       isAutoPlaying = false,
       playButtonProps,
       paginationItemLabel,
@@ -12496,12 +12516,13 @@ const CLASSNAME$f = getRootClassName(COMPONENT_NAME$f);
  * @param  ref   Component ref.
  * @return React element.
  */
-const Slides = /*#__PURE__*/forwardRef((props, ref) => {
+const Slides = forwardRef((props, ref) => {
+  const defaultTheme = useTheme();
   const {
       activeIndex,
       id,
       className,
-      theme,
+      theme = defaultTheme,
       fillHeight,
       groupBy,
       isAutoPlaying,
@@ -12578,8 +12599,7 @@ const CLASSNAME$e = getRootClassName(COMPONENT_NAME$e);
  * Component default props.
  */
 const DEFAULT_PROPS$e = {
-  position: Alignment.left,
-  theme: Theme.light
+  position: Alignment.left
 };
 
 /**
@@ -12589,7 +12609,8 @@ const DEFAULT_PROPS$e = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Switch = /*#__PURE__*/forwardRef((props, ref) => {
+const Switch = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       checked,
       children,
@@ -12602,7 +12623,7 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
       name,
       onChange,
       position,
-      theme,
+      theme = defaultTheme,
       value,
       inputProps = {}
     } = props,
@@ -12681,9 +12702,7 @@ const CLASSNAME$d = getRootClassName(COMPONENT_NAME$d);
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$d = {
-  theme: Theme.light
-};
+const DEFAULT_PROPS$d = {};
 
 /**
  * Table component.
@@ -12692,13 +12711,14 @@ const DEFAULT_PROPS$d = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Table = /*#__PURE__*/forwardRef((props, ref) => {
+const Table = 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({
@@ -12739,7 +12759,7 @@ const CLASSNAME$c = getRootClassName(COMPONENT_NAME$c, true);
  * @param  ref   Component ref.
  * @return React element.
  */
-const TableBody = /*#__PURE__*/forwardRef((props, ref) => {
+const TableBody = forwardRef((props, ref) => {
   const {
       children,
       className
@@ -12801,7 +12821,7 @@ const DEFAULT_PROPS$c = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const TableCell = /*#__PURE__*/forwardRef((props, ref) => {
+const TableCell = forwardRef((props, ref) => {
   const {
       children,
       className,
@@ -12892,7 +12912,7 @@ const DEFAULT_PROPS$b = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-const TableHeader = /*#__PURE__*/forwardRef((props, ref) => {
+const TableHeader = forwardRef((props, ref) => {
   const {
       children,
       className
@@ -12938,7 +12958,7 @@ const DEFAULT_PROPS$a = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-const TableRow = /*#__PURE__*/forwardRef((props, ref) => {
+const TableRow = forwardRef((props, ref) => {
   const {
       children,
       className,
@@ -13039,8 +13059,7 @@ const CLASSNAME$8 = `${CSS_PREFIX}-tabs`;
  */
 const DEFAULT_PROPS$8 = {
   layout: TabListLayout.fixed,
-  position: Alignment.left,
-  theme: Theme.light
+  position: Alignment.left
 };
 
 /**
@@ -13052,14 +13071,15 @@ const DEFAULT_PROPS$8 = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const TabList = /*#__PURE__*/forwardRef((props, ref) => {
+const TabList = 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);
@@ -13118,7 +13138,7 @@ const DEFAULT_PROPS$7 = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-const Tab = /*#__PURE__*/forwardRef((props, ref) => {
+const Tab = forwardRef((props, ref) => {
   const {
       className,
       disabled,
@@ -13214,7 +13234,7 @@ const DEFAULT_PROPS$6 = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-const TabPanel = /*#__PURE__*/forwardRef((props, ref) => {
+const TabPanel = forwardRef((props, ref) => {
   const {
       children,
       id,
@@ -13267,7 +13287,6 @@ const DEFAULT_MIN_ROWS = 2;
  * Component default props.
  */
 const DEFAULT_PROPS$5 = {
-  theme: Theme.light,
   type: 'text'
 };
 
@@ -13379,7 +13398,8 @@ const renderInputNative = props => {
  * @param  ref   Component ref.
  * @return React element.
  */
-const TextField = /*#__PURE__*/forwardRef((props, ref) => {
+const TextField = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       chips,
       className,
@@ -13407,7 +13427,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
       onFocus,
       placeholder,
       textFieldRef,
-      theme,
+      theme = defaultTheme,
       type,
       value,
       afterElement
@@ -13732,8 +13752,7 @@ const CLASSNAME$4 = getRootClassName(COMPONENT_NAME$4);
  */
 const DEFAULT_PROPS$4 = {
   fallback: mdiImageBroken,
-  loading: 'lazy',
-  theme: Theme.light
+  loading: 'lazy'
 };
 
 /**
@@ -13743,8 +13762,9 @@ const DEFAULT_PROPS$4 = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
+const Thumbnail = forwardRef((props, ref) => {
   var _loadingPlaceholderIm;
+  const defaultTheme = useTheme() || Theme.light;
   const {
       align,
       alt,
@@ -13765,7 +13785,7 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
       loading,
       loadingPlaceholderImageRef,
       size,
-      theme,
+      theme = defaultTheme,
       variant,
       linkProps,
       linkAs
@@ -13927,7 +13947,7 @@ const DEFAULT_PROPS$3 = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-const Toolbar = /*#__PURE__*/forwardRef((props, ref) => {
+const Toolbar = forwardRef((props, ref) => {
   const {
       after,
       before,
@@ -14184,7 +14204,7 @@ const ARROW_SIZE = 8;
  * @param  ref   Component ref.
  * @return React element.
  */
-const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
+const Tooltip = forwardRef((props, ref) => {
   var _attributes$popper$da, _attributes$popper;
   const {
       label,
@@ -14305,7 +14325,6 @@ const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
 const DEFAULT_PROPS$1 = {
   aspectRatio: AspectRatio.horizontal,
   size: Size.xl,
-  theme: Theme.light,
   variant: UploaderVariant.square
 };
 
@@ -14316,14 +14335,15 @@ const DEFAULT_PROPS$1 = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const Uploader = /*#__PURE__*/forwardRef((props, ref) => {
+const Uploader = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       aspectRatio,
       className,
       label,
       icon,
       size,
-      theme,
+      theme = defaultTheme,
       variant,
       fileInputProps
     } = props,
@@ -14413,8 +14433,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS = {
   orientation: Orientation.horizontal,
-  size: Size.m,
-  theme: Theme.light
+  size: Size.m
 };
 
 /**
@@ -14424,7 +14443,8 @@ const DEFAULT_PROPS = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const UserBlock = /*#__PURE__*/forwardRef((props, ref) => {
+const UserBlock = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
       avatarProps,
       className,
@@ -14440,7 +14460,7 @@ const UserBlock = /*#__PURE__*/forwardRef((props, ref) => {
       orientation,
       simpleAction,
       size,
-      theme
+      theme = defaultTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded);
   let componentSize = size;
@@ -14513,5 +14533,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