@spaced-out/ui-design-system 0.1.9 → 0.1.10

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.10](https://github.com/spaced-out/ui-design-system/compare/v0.1.9...v0.1.10) (2023-04-10)
+
+
+### Bug Fixes
+
+* added tabIndex support for buttons ([e3eb705](https://github.com/spaced-out/ui-design-system/commit/e3eb705a1dee1ee6ac9b9431974f0e216dcea171))
+* aded nested dialog example ([b56a835](https://github.com/spaced-out/ui-design-system/commit/b56a835350137f1b291b3a5e72e241af5f6b0b9b))
+* props fix ([952c7f0](https://github.com/spaced-out/ui-design-system/commit/952c7f0c8e9bd85b9a05db3564064985d8e6d852))
+* ref forwarding in text, truncate, menu etc ([#94](https://github.com/spaced-out/ui-design-system/issues/94)) ([eb4f559](https://github.com/spaced-out/ui-design-system/commit/eb4f559e83c298d0376c99abf59cea386afd4bca))
+
 ### [0.1.9](https://github.com/spaced-out/ui-design-system/compare/v0.1.8...v0.1.9) (2023-04-05)
 
 

package/lib/components/Button/Button.js

@@ -41,6 +41,7 @@ const UnstyledButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     className,
     ariaLabel,
     actionType,
+    tabIndex = 0,
     ...props
   } = _ref;
   return /*#__PURE__*/React.createElement("button", _extends({}, props, ariaLabel ? {
@@ -50,6 +51,7 @@ const UnstyledButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ref: ref,
     role: "button",
     disabled: disabled,
+    tabIndex: disabled ? -1 : tabIndex,
     type: actionType,
     onClick: event => {
       if (disabled) {

package/lib/components/Button/Button.js.flow

@@ -36,6 +36,7 @@ export type UnstyledButtonProps = {
   onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
   className?: string,
   ariaLabel?: string,
+  tabIndex?: number,
   ...
 };
 
@@ -53,6 +54,7 @@ export type ButtonProps = {
   disabled?: boolean,
   size?: 'medium' | 'small',
   ariaLabel?: string,
+  tabIndex?: number,
   ...
 };
 
@@ -75,6 +77,7 @@ export const UnstyledButton: React$AbstractComponent<
       className,
       ariaLabel,
       actionType,
+      tabIndex = 0,
       ...props
     }: UnstyledButtonProps,
     ref: React.Ref<'button'>,
@@ -86,6 +89,7 @@ export const UnstyledButton: React$AbstractComponent<
       ref={ref}
       role="button"
       disabled={disabled}
+      tabIndex={disabled ? -1 : tabIndex}
       type={actionType}
       onClick={(event) => {
         if (disabled) {

package/lib/components/Dropdown/Dropdown.js

@@ -59,15 +59,14 @@ const Dropdown = _ref => {
       "data-testid": "Dropdown",
       className: (0, _classify.classify)(_DropdownModule.default.dropdownContainer, classNames?.wrapper),
       ref: dropdownRef
-    }, /*#__PURE__*/React.createElement(_Input.Input, _extends({
+    }, /*#__PURE__*/React.createElement(_Input.Input, _extends({}, inputProps, {
       boxRef: reference,
       size: size,
       placeholder: placeholder,
       value: dropdownInputText,
       classNames: {
         box: _DropdownModule.default.inputBox
-      }
-    }, inputProps, {
+      },
       iconRightName: isOpen ? 'angle-up' : 'angle-down',
       readOnly: true,
       onContainerClick: e => {

package/lib/components/Dropdown/Dropdown.js.flow

@@ -35,6 +35,7 @@ export type DropdownProps = {
   onMenuClose?: () => mixed,
   dropdownInputText?: string,
   menu?: MenuProps,
+  ...
 };
 
 export const Dropdown = ({
@@ -69,12 +70,12 @@ export const Dropdown = ({
           ref={dropdownRef}
         >
           <Input
+            {...inputProps}
             boxRef={reference}
             size={size}
             placeholder={placeholder}
             value={dropdownInputText}
             classNames={{box: css.inputBox}}
-            {...inputProps}
             iconRightName={isOpen ? 'angle-up' : 'angle-down'}
             readOnly
             onContainerClick={(e) => {

package/lib/components/Input/Input.js

@@ -97,7 +97,7 @@ const Input_ = (props, ref) => {
     color: disabled ? 'disabled' : 'secondary',
     size: "small",
     type: iconLeftType
-  }), /*#__PURE__*/React.createElement("input", _extends({
+  }), /*#__PURE__*/React.createElement("input", _extends({}, inputProps, {
     disabled: locked || disabled,
     name: name,
     ref: ref,
@@ -108,7 +108,7 @@ const Input_ = (props, ref) => {
     onBlur: onBlur,
     type: showPassword ? 'text' : type,
     readOnly: readOnly && 'readOnly'
-  }, inputProps)), type === 'color' && /*#__PURE__*/React.createElement("div", {
+  })), type === 'color' && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_InputModule.default.colorText, _InputModule.default[size], {
       [_InputModule.default.hasValue]: value
     })

package/lib/components/Input/Input.js.flow

@@ -72,6 +72,7 @@ export type InputProps = {
    * Only values which are equal to the basis for stepping (min if specified, value otherwise, and an
    * appropriate default value if neither of those is provided) are valid. */
   step?: string,
+  ...
 };
 
 const Input_ = (props: InputProps, ref): React.Node => {
@@ -156,6 +157,7 @@ const Input_ = (props: InputProps, ref): React.Node => {
           />
         )}
         <input
+          {...inputProps}
           disabled={locked || disabled}
           name={name}
           ref={ref}
@@ -166,7 +168,6 @@ const Input_ = (props: InputProps, ref): React.Node => {
           onBlur={onBlur}
           type={showPassword ? 'text' : type}
           readOnly={readOnly && 'readOnly'}
-          {...inputProps}
         />
         {type === 'color' && (
           <div

package/lib/components/Menu/Menu.js

@@ -59,7 +59,7 @@ const RenderOption = _ref => {
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null);
 };
-const Menu = props => {
+const Menu = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     classNames,
     size = 'medium',
@@ -74,7 +74,8 @@ const Menu = props => {
     }, classNames?.wrapper),
     style: {
       width
-    }
+    },
+    ref: ref
   }, /*#__PURE__*/React.createElement(RenderOption, props));
-};
+});
 exports.Menu = Menu;

package/lib/components/Menu/Menu.js.flow

@@ -147,23 +147,27 @@ const RenderOption = ({
   return <></>;
 };
 
-export const Menu = (props: MenuProps): React.Node => {
-  const {classNames, size = 'medium', width, isFluid = true} = props;
-
-  return (
-    <div
-      className={classify(
-        css.menuCard,
-        {
-          [css.fluid]: isFluid,
-          [css.medium]: size === 'medium',
-          [css.small]: size === 'small',
-        },
-        classNames?.wrapper,
-      )}
-      style={{width}}
-    >
-      <RenderOption {...props} />
-    </div>
+export const Menu: React$AbstractComponent<MenuProps, HTMLDivElement> =
+  React.forwardRef<MenuProps, HTMLDivElement>(
+    (props: MenuProps, ref): React.Node => {
+      const {classNames, size = 'medium', width, isFluid = true} = props;
+
+      return (
+        <div
+          className={classify(
+            css.menuCard,
+            {
+              [css.fluid]: isFluid,
+              [css.medium]: size === 'medium',
+              [css.small]: size === 'small',
+            },
+            classNames?.wrapper,
+          )}
+          style={{width}}
+          ref={ref}
+        >
+          <RenderOption {...props} />
+        </div>
+      );
+    },
   );
-};

package/lib/components/SearchInput/SearchInput.js

@@ -31,9 +31,8 @@ const SearchInput = _ref => {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_SearchInputModule.default.searchInputWrapper, classNames?.wrapper)
-  }, /*#__PURE__*/React.createElement(_Input.Input, _extends({
-    type: "text"
-  }, searchInputProps, {
+  }, /*#__PURE__*/React.createElement(_Input.Input, _extends({}, searchInputProps, {
+    type: "text",
     classNames: {
       iconRight: value && !(disabled || locked) ? _SearchInputModule.default.clickable : '',
       iconLeft: value && !disabled ? _SearchInputModule.default.primaryText : '',

package/lib/components/SearchInput/SearchInput.js.flow

@@ -21,6 +21,7 @@ export type SearchInputProps = {
   classNames?: ClassNames,
   onClear?: () => void,
   isLoading?: boolean,
+  ...
 };
 
 export const SearchInput = ({
@@ -42,8 +43,8 @@ export const SearchInput = ({
   return (
     <div className={classify(css.searchInputWrapper, classNames?.wrapper)}>
       <Input
-        type="text"
         {...searchInputProps}
+        type="text"
         classNames={{
           iconRight: value && !(disabled || locked) ? css.clickable : '',
           iconLeft: value && !disabled ? css.primaryText : '',

package/lib/components/Text/Text.js

@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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); }
-const HighlightText = _ref => {
+const HighlightText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     text,
     highlight,
@@ -29,15 +29,17 @@ const HighlightText = _ref => {
     highlights = (0, _string.escapeRegExp)(highlight);
   }
   const parts = text.split(new RegExp(`(${highlights})`, caseSensitiveHighlighting ? '' : 'gi')).filter(part => part !== '');
-  return /*#__PURE__*/React.createElement("span", null, parts.map((part, idx) => highlights.toLowerCase().includes((0, _string.escapeRegExp)(part).toLowerCase()) ? /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref
+  }, parts.map((part, idx) => highlights.toLowerCase().includes((0, _string.escapeRegExp)(part).toLowerCase()) ? /*#__PURE__*/React.createElement("span", {
     // eslint-disable-next-line react/no-array-index-key
     key: idx,
     className: (0, _classify.default)(_typographyModule.default.highlightText, {
       [_typographyModule.default.bgHighlighting]: highlightWithBackground
     }, highlightClassName)
   }, part) : part));
-};
-const JumboMedium = _ref2 => {
+});
+const JumboMedium = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -49,7 +51,8 @@ const JumboMedium = _ref2 => {
     ...props
   } = _ref2;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.jumboMedium, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.jumboMedium, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -57,9 +60,9 @@ const JumboMedium = _ref2 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.JumboMedium = JumboMedium;
-const TitleMedium = _ref3 => {
+const TitleMedium = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -71,7 +74,8 @@ const TitleMedium = _ref3 => {
     ...props
   } = _ref3;
   return /*#__PURE__*/React.createElement("h1", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.titleMedium, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.titleMedium, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -79,9 +83,9 @@ const TitleMedium = _ref3 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.TitleMedium = TitleMedium;
-const SubTitleLarge = _ref4 => {
+const SubTitleLarge = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -93,7 +97,8 @@ const SubTitleLarge = _ref4 => {
     ...props
   } = _ref4;
   return /*#__PURE__*/React.createElement("h2", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.subTitleLarge, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.subTitleLarge, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -101,9 +106,9 @@ const SubTitleLarge = _ref4 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.SubTitleLarge = SubTitleLarge;
-const SubTitleMedium = _ref5 => {
+const SubTitleMedium = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -115,7 +120,8 @@ const SubTitleMedium = _ref5 => {
     ...props
   } = _ref5;
   return /*#__PURE__*/React.createElement("h3", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.subTitleMedium, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.subTitleMedium, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -123,9 +129,9 @@ const SubTitleMedium = _ref5 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.SubTitleMedium = SubTitleMedium;
-const SubTitleSmall = _ref6 => {
+const SubTitleSmall = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -137,7 +143,8 @@ const SubTitleSmall = _ref6 => {
     ...props
   } = _ref6;
   return /*#__PURE__*/React.createElement("h4", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.subTitleSmall, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.subTitleSmall, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -145,9 +152,9 @@ const SubTitleSmall = _ref6 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.SubTitleSmall = SubTitleSmall;
-const SubTitleExtraSmall = _ref7 => {
+const SubTitleExtraSmall = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -159,7 +166,8 @@ const SubTitleExtraSmall = _ref7 => {
     ...props
   } = _ref7;
   return /*#__PURE__*/React.createElement("h5", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.subTitleExtraSmall, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.subTitleExtraSmall, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -167,9 +175,9 @@ const SubTitleExtraSmall = _ref7 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.SubTitleExtraSmall = SubTitleExtraSmall;
-const ButtonTextMedium = _ref8 => {
+const ButtonTextMedium = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -181,7 +189,8 @@ const ButtonTextMedium = _ref8 => {
     ...props
   } = _ref8;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.buttonTextMedium, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.buttonTextMedium, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -189,9 +198,9 @@ const ButtonTextMedium = _ref8 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.ButtonTextMedium = ButtonTextMedium;
-const ButtonTextSmall = _ref9 => {
+const ButtonTextSmall = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -203,7 +212,8 @@ const ButtonTextSmall = _ref9 => {
     ...props
   } = _ref9;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.buttonTextSmall, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.buttonTextSmall, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -211,9 +221,9 @@ const ButtonTextSmall = _ref9 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.ButtonTextSmall = ButtonTextSmall;
-const ButtonTextExtraSmall = _ref10 => {
+const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -225,7 +235,8 @@ const ButtonTextExtraSmall = _ref10 => {
     ...props
   } = _ref10;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -233,9 +244,9 @@ const ButtonTextExtraSmall = _ref10 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.ButtonTextExtraSmall = ButtonTextExtraSmall;
-const FormInputMedium = _ref11 => {
+const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -247,7 +258,8 @@ const FormInputMedium = _ref11 => {
     ...props
   } = _ref11;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.formInputMedium, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.formInputMedium, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -255,9 +267,9 @@ const FormInputMedium = _ref11 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.FormInputMedium = FormInputMedium;
-const FormInputSmall = _ref12 => {
+const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -269,7 +281,8 @@ const FormInputSmall = _ref12 => {
     ...props
   } = _ref12;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.formInputSmall, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.formInputSmall, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -277,9 +290,9 @@ const FormInputSmall = _ref12 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.FormInputSmall = FormInputSmall;
-const BodyLarge = _ref13 => {
+const BodyLarge = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -291,7 +304,8 @@ const BodyLarge = _ref13 => {
     ...props
   } = _ref13;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -299,9 +313,9 @@ const BodyLarge = _ref13 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.BodyLarge = BodyLarge;
-const BodyMedium = _ref14 => {
+const BodyMedium = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -313,7 +327,8 @@ const BodyMedium = _ref14 => {
     ...props
   } = _ref14;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -321,9 +336,9 @@ const BodyMedium = _ref14 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.BodyMedium = BodyMedium;
-const BodySmall = _ref15 => {
+const BodySmall = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -335,7 +350,8 @@ const BodySmall = _ref15 => {
     ...props
   } = _ref15;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -343,9 +359,9 @@ const BodySmall = _ref15 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.BodySmall = BodySmall;
-const FormLabelMedium = _ref16 => {
+const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -357,7 +373,8 @@ const FormLabelMedium = _ref16 => {
     ...props
   } = _ref16;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.formLabelMedium, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.formLabelMedium, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -365,9 +382,9 @@ const FormLabelMedium = _ref16 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.FormLabelMedium = FormLabelMedium;
-const FormLabelSmall = _ref17 => {
+const FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -379,7 +396,8 @@ const FormLabelSmall = _ref17 => {
     ...props
   } = _ref17;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: (0, _classify.default)(_typographyModule.default.formLabelSmall, _typographyModule.default[color], className)
+    className: (0, _classify.default)(_typographyModule.default.formLabelSmall, _typographyModule.default[color], className),
+    ref: ref
   }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
     text: children,
     highlight: highlightString,
@@ -387,5 +405,5 @@ const FormLabelSmall = _ref17 => {
     highlightClassName: highlightedTextClassName,
     highlightWithBackground: highlightWithBackground
   }) : children);
-};
+});
 exports.FormLabelSmall = FormLabelSmall;