@spaced-out/ui-design-system 0.3.45 → 0.3.47-beta.0

package/lib/components/Tabs/TabList/TabDropdown.js.flow

@@ -7,6 +7,10 @@ import {
   // $FlowFixMe[untyped-import]
   flip,
   // $FlowFixMe[untyped-import]
+  FloatingFocusManager,
+  // $FlowFixMe[untyped-import]
+  FloatingPortal,
+  // $FlowFixMe[untyped-import]
   offset,
   // $FlowFixMe[untyped-import]
   shift,
@@ -21,6 +25,8 @@ import {mergeRefs} from '../../../utils/merge-refs';
 import type {AnchorType} from '../../ButtonDropdown';
 import type {MenuOption, MenuProps} from '../../Menu';
 import {Menu} from '../../Menu';
+import type {ElevationType} from '../../Tooltip';
+import {getElevationValue} from '../../Tooltip';
 import type {TabProps} from '../Tab';
 import {Tab} from '../Tab';
 
@@ -40,6 +46,7 @@ export type TabDropdownProps = {
   classNames?: ClassNames,
   selected?: boolean,
   disabled?: boolean,
+  elevation?: ElevationType,
 };
 
 export const TabDropdown = ({
@@ -47,10 +54,10 @@ export const TabDropdown = ({
   size,
   onOptionSelect,
   props,
+  elevation = 'modal',
   classNames,
 }: TabDropdownProps): React.Node => {
-  const menuBtnRef = React.useRef();
-  const {x, y, refs, strategy} = useFloating({
+  const {x, y, refs, strategy, context} = useFloating({
     open: true,
     strategy: 'absolute',
     placement: anchorPosition,
@@ -64,7 +71,6 @@ export const TabDropdown = ({
         <div
           data-testid="TabDropdown"
           className={classify(css.tabDropdownContainer, classNames?.wrapper)}
-          ref={menuBtnRef}
         >
           <Tab
             {...props?.tab}
@@ -80,25 +86,35 @@ export const TabDropdown = ({
             }}
           />
           {isOpen && props?.menu && (
-            <div
-              ref={mergeRefs([refs.setFloating, boundaryRef])}
-              style={{
-                display: 'flex',
-                position: strategy,
-                top: y ?? spaceNone,
-                left: x ?? spaceNone,
-              }}
-            >
-              <Menu
-                {...props.menu}
-                onSelect={(option, e) => {
-                  onOptionSelect && onOptionSelect(option, e);
-                  clickAway();
-                }}
-                size={props.menu.size || size}
-                onTabOut={clickAway}
-              />
-            </div>
+            <FloatingPortal>
+              <FloatingFocusManager
+                modal={false}
+                context={context}
+                initialFocus={refs.reference}
+              >
+                <div
+                  ref={mergeRefs([refs.setFloating, boundaryRef])}
+                  className={css.menuWrapper}
+                  style={{
+                    display: 'flex',
+                    position: strategy,
+                    top: y ?? spaceNone,
+                    left: x ?? spaceNone,
+                    '--menu-elevation': getElevationValue(elevation),
+                  }}
+                >
+                  <Menu
+                    {...props.menu}
+                    onSelect={(option, e) => {
+                      onOptionSelect && onOptionSelect(option, e);
+                      clickAway();
+                    }}
+                    size={props.menu.size || size}
+                    onTabOut={clickAway}
+                  />
+                </div>
+              </FloatingFocusManager>
+            </FloatingPortal>
           )}
         </div>
       )}

package/lib/components/Tabs/TabList/TabDropdown.module.css

@@ -20,3 +20,7 @@
 .dotTextWrap {
   width: spaceFluid;
 }
+
+.menuWrapper {
+  z-index: var(--menu-elevation);
+}

package/lib/components/Tabs/TabList/TabList.js

@@ -11,18 +11,17 @@ var _space = require("../../../styles/variables/_space");
 var _classify = require("../../../utils/classify");
 var _TabDropdown = require("./TabDropdown");
 var _TabListModule = _interopRequireDefault(require("./TabList.module.css"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const TabList = exports.TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   let {
     classNames,
     children,
     size,
     onSelect,
     selectedTab,
-    menuWidth
+    menuWidth,
+    elevation = 'modal'
   } = _ref;
   const ref = React.useRef(null);
   React.useImperativeHandle(forwardRef, () => ref.current);
@@ -53,8 +52,7 @@ const TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
         const childOnSelect = params => {
           onSelect && onSelect(params); // call the tab level onSelect
         };
-
-        tabListNodes.push( /*#__PURE__*/React.cloneElement(child, {
+        tabListNodes.push(/*#__PURE__*/React.cloneElement(child, {
           size,
           onSelect: childOnSelect,
           selectedTab
@@ -107,7 +105,8 @@ const TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
           selectedKeys,
           width: menuWidth
         }
-      }
+      },
+      elevation: elevation
     }) : null;
     nodes = [...tabListNodes, tabDropDownNode];
     return nodes;
@@ -127,5 +126,4 @@ const TabList = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
       [_TabListModule.default.smallSize]: size === 'small'
     }, classNames?.wrapper)
   }, containerWidth ? childrenWithProps() : null);
-});
-exports.TabList = TabList;
+});

package/lib/components/Tabs/TabList/TabList.js.flow

@@ -6,6 +6,7 @@ import {useWindowSize} from '../../../hooks/useWindowSize/useWindowSize';
 import {size36, size100} from '../../../styles/variables/_size';
 import {spaceMedium} from '../../../styles/variables/_space';
 import {classify} from '../../../utils/classify';
+import type {ElevationType} from '../../Tooltip';
 
 import {TabDropdown} from './TabDropdown';
 
@@ -21,6 +22,7 @@ export type TabListProps = {
   size?: 'medium',
   selectedTab?: {tabId: string, label?: string},
   menuWidth?: string,
+  elevation?: ElevationType,
 };
 
 export const TabList: React$AbstractComponent<TabListProps, HTMLDivElement> =
@@ -33,6 +35,7 @@ export const TabList: React$AbstractComponent<TabListProps, HTMLDivElement> =
         onSelect,
         selectedTab,
         menuWidth,
+        elevation = 'modal',
       }: TabListProps,
       forwardRef,
     ): React.Node => {
@@ -120,6 +123,7 @@ export const TabList: React$AbstractComponent<TabListProps, HTMLDivElement> =
                 width: menuWidth,
               },
             }}
+            elevation={elevation}
           />
         ) : null;
 

package/lib/components/Text/Text.js

@@ -9,10 +9,9 @@ var _typography = require("../../types/typography");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _string = require("../../utils/string");
 var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const HighlightText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     text,
@@ -39,7 +38,7 @@ const HighlightText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }, part) : part;
   }));
 });
-const JumboLarge = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+const JumboLarge = exports.JumboLarge = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -61,8 +60,7 @@ const JumboLarge = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.JumboLarge = JumboLarge;
-const JumboMedium = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+const JumboMedium = exports.JumboMedium = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -84,8 +82,7 @@ const JumboMedium = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.JumboMedium = JumboMedium;
-const JumboSmall = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+const JumboSmall = exports.JumboSmall = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -107,8 +104,7 @@ const JumboSmall = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.JumboSmall = JumboSmall;
-const TitleMedium = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+const TitleMedium = exports.TitleMedium = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -130,8 +126,7 @@ const TitleMedium = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.TitleMedium = TitleMedium;
-const SubTitleLarge = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+const SubTitleLarge = exports.SubTitleLarge = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -153,8 +148,7 @@ const SubTitleLarge = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.SubTitleLarge = SubTitleLarge;
-const SubTitleMedium = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+const SubTitleMedium = exports.SubTitleMedium = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -176,8 +170,7 @@ const SubTitleMedium = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.SubTitleMedium = SubTitleMedium;
-const SubTitleSmall = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
+const SubTitleSmall = exports.SubTitleSmall = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -199,8 +192,7 @@ const SubTitleSmall = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.SubTitleSmall = SubTitleSmall;
-const SubTitleExtraSmall = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
+const SubTitleExtraSmall = exports.SubTitleExtraSmall = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -222,8 +214,7 @@ const SubTitleExtraSmall = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.SubTitleExtraSmall = SubTitleExtraSmall;
-const ButtonTextMedium = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
+const ButtonTextMedium = exports.ButtonTextMedium = /*#__PURE__*/React.forwardRef((_ref0, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -233,7 +224,7 @@ const ButtonTextMedium = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref10;
+  } = _ref0;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextMedium, _typographyModule.default[color], className),
     ref: ref
@@ -245,8 +236,7 @@ const ButtonTextMedium = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.ButtonTextMedium = ButtonTextMedium;
-const ButtonTextSmall = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
+const ButtonTextSmall = exports.ButtonTextSmall = /*#__PURE__*/React.forwardRef((_ref1, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -256,7 +246,7 @@ const ButtonTextSmall = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref11;
+  } = _ref1;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextSmall, _typographyModule.default[color], className),
     ref: ref
@@ -268,8 +258,7 @@ const ButtonTextSmall = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.ButtonTextSmall = ButtonTextSmall;
-const MenuTextMedium = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
+const MenuTextMedium = exports.MenuTextMedium = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -279,7 +268,7 @@ const MenuTextMedium = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref12;
+  } = _ref10;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.menuTextMedium, _typographyModule.default[color], className),
     ref: ref
@@ -291,8 +280,7 @@ const MenuTextMedium = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.MenuTextMedium = MenuTextMedium;
-const MenuTextSmall = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
+const MenuTextSmall = exports.MenuTextSmall = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -302,7 +290,7 @@ const MenuTextSmall = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref13;
+  } = _ref11;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.menuTextSmall, _typographyModule.default[color], className),
     ref: ref
@@ -314,8 +302,7 @@ const MenuTextSmall = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.MenuTextSmall = MenuTextSmall;
-const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
+const ButtonTextExtraSmall = exports.ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -325,7 +312,7 @@ const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref14;
+  } = _ref12;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default[color], className),
     ref: ref
@@ -337,8 +324,7 @@ const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.ButtonTextExtraSmall = ButtonTextExtraSmall;
-const ButtonTextMediumUnderline = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
+const ButtonTextMediumUnderline = exports.ButtonTextMediumUnderline = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -348,7 +334,7 @@ const ButtonTextMediumUnderline = /*#__PURE__*/React.forwardRef((_ref15, ref) =>
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref15;
+  } = _ref13;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextMedium, _typographyModule.default.underline, _typographyModule.default[color], className),
     ref: ref
@@ -360,8 +346,7 @@ const ButtonTextMediumUnderline = /*#__PURE__*/React.forwardRef((_ref15, ref) =>
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.ButtonTextMediumUnderline = ButtonTextMediumUnderline;
-const ButtonTextSmallUnderline = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
+const ButtonTextSmallUnderline = exports.ButtonTextSmallUnderline = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -371,7 +356,7 @@ const ButtonTextSmallUnderline = /*#__PURE__*/React.forwardRef((_ref16, ref) =>
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref16;
+  } = _ref14;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextSmall, _typographyModule.default.underline, _typographyModule.default[color], className),
     ref: ref
@@ -383,8 +368,7 @@ const ButtonTextSmallUnderline = /*#__PURE__*/React.forwardRef((_ref16, ref) =>
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.ButtonTextSmallUnderline = ButtonTextSmallUnderline;
-const ButtonTextExtraSmallUnderline = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
+const ButtonTextExtraSmallUnderline = exports.ButtonTextExtraSmallUnderline = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -394,7 +378,7 @@ const ButtonTextExtraSmallUnderline = /*#__PURE__*/React.forwardRef((_ref17, ref
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref17;
+  } = _ref15;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default.underline, _typographyModule.default[color], className),
     ref: ref
@@ -406,8 +390,7 @@ const ButtonTextExtraSmallUnderline = /*#__PURE__*/React.forwardRef((_ref17, ref
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.ButtonTextExtraSmallUnderline = ButtonTextExtraSmallUnderline;
-const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
+const FormInputMedium = exports.FormInputMedium = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -417,7 +400,7 @@ const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref18;
+  } = _ref16;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formInputMedium, _typographyModule.default[color], className),
     ref: ref
@@ -429,8 +412,7 @@ const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.FormInputMedium = FormInputMedium;
-const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref19, ref) => {
+const FormInputSmall = exports.FormInputSmall = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -440,7 +422,7 @@ const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref19, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref19;
+  } = _ref17;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formInputSmall, _typographyModule.default[color], className),
     ref: ref
@@ -452,8 +434,7 @@ const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref19, ref) => {
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.FormInputSmall = FormInputSmall;
-const BodyLarge = /*#__PURE__*/React.forwardRef((_ref20, ref) => {
+const BodyLarge = exports.BodyLarge = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -463,7 +444,7 @@ const BodyLarge = /*#__PURE__*/React.forwardRef((_ref20, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref20;
+  } = _ref18;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default[color], className),
     ref: ref
@@ -475,8 +456,7 @@ const BodyLarge = /*#__PURE__*/React.forwardRef((_ref20, ref) => {
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.BodyLarge = BodyLarge;
-const BodyMedium = /*#__PURE__*/React.forwardRef((_ref21, ref) => {
+const BodyMedium = exports.BodyMedium = /*#__PURE__*/React.forwardRef((_ref19, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -486,7 +466,7 @@ const BodyMedium = /*#__PURE__*/React.forwardRef((_ref21, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref21;
+  } = _ref19;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default[color], className),
     ref: ref
@@ -498,8 +478,7 @@ const BodyMedium = /*#__PURE__*/React.forwardRef((_ref21, ref) => {
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.BodyMedium = BodyMedium;
-const BodySmall = /*#__PURE__*/React.forwardRef((_ref22, ref) => {
+const BodySmall = exports.BodySmall = /*#__PURE__*/React.forwardRef((_ref20, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -509,7 +488,7 @@ const BodySmall = /*#__PURE__*/React.forwardRef((_ref22, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref22;
+  } = _ref20;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default[color], className),
     ref: ref
@@ -521,8 +500,7 @@ const BodySmall = /*#__PURE__*/React.forwardRef((_ref22, ref) => {
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.BodySmall = BodySmall;
-const BodyLargeBold = /*#__PURE__*/React.forwardRef((_ref23, ref) => {
+const BodyLargeBold = exports.BodyLargeBold = /*#__PURE__*/React.forwardRef((_ref21, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -532,7 +510,7 @@ const BodyLargeBold = /*#__PURE__*/React.forwardRef((_ref23, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref23;
+  } = _ref21;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default.bold, _typographyModule.default[color], className),
     ref: ref
@@ -544,8 +522,7 @@ const BodyLargeBold = /*#__PURE__*/React.forwardRef((_ref23, ref) => {
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.BodyLargeBold = BodyLargeBold;
-const BodyMediumBold = /*#__PURE__*/React.forwardRef((_ref24, ref) => {
+const BodyMediumBold = exports.BodyMediumBold = /*#__PURE__*/React.forwardRef((_ref22, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -555,7 +532,7 @@ const BodyMediumBold = /*#__PURE__*/React.forwardRef((_ref24, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref24;
+  } = _ref22;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default.bold, _typographyModule.default[color], className),
     ref: ref
@@ -567,8 +544,7 @@ const BodyMediumBold = /*#__PURE__*/React.forwardRef((_ref24, ref) => {
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.BodyMediumBold = BodyMediumBold;
-const BodySmallBold = /*#__PURE__*/React.forwardRef((_ref25, ref) => {
+const BodySmallBold = exports.BodySmallBold = /*#__PURE__*/React.forwardRef((_ref23, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -578,7 +554,7 @@ const BodySmallBold = /*#__PURE__*/React.forwardRef((_ref25, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref25;
+  } = _ref23;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default.bold, _typographyModule.default[color], className),
     ref: ref
@@ -590,8 +566,7 @@ const BodySmallBold = /*#__PURE__*/React.forwardRef((_ref25, ref) => {
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.BodySmallBold = BodySmallBold;
-const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref26, ref) => {
+const FormLabelMedium = exports.FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref24, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -601,7 +576,7 @@ const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref26, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref26;
+  } = _ref24;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formLabelMedium, _typographyModule.default[color], className),
     ref: ref
@@ -613,8 +588,7 @@ const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref26, ref) => {
     highlightWithBackground: highlightWithBackground
   }) : children);
 });
-exports.FormLabelMedium = FormLabelMedium;
-const FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref27, ref) => {
+const FormLabelSmall = exports.FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref25, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -624,7 +598,7 @@ const FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref27, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref27;
+  } = _ref25;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formLabelSmall, _typographyModule.default[color], className),
     ref: ref
@@ -635,5 +609,4 @@ const FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref27, ref) => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-});
-exports.FormLabelSmall = FormLabelSmall;
+});

package/lib/components/TextTile/TextTile.js

@@ -9,11 +9,9 @@ var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Icon = require("../Icon");
 var _Text = require("../Text");
 var _TextTileModule = _interopRequireDefault(require("./TextTile.module.css"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const TextTile = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const TextTile = exports.TextTile = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     header,
     iconName = 'sparkles',
@@ -32,5 +30,4 @@ const TextTile = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     type: _Icon.ICON_TYPE.solid,
     className: _TextTileModule.default.sparkles
   }), /*#__PURE__*/React.createElement(_Text.JumboMedium, null, header)), /*#__PURE__*/React.createElement(_Text.BodyLarge, null, description));
-});
-exports.TextTile = TextTile;
+});