@spaced-out/ui-design-system 0.1.41 → 0.1.43

package/.cspell/custom-words.txt

@@ -2,6 +2,7 @@ amet
 Anant
 argstable
 atleast
+ashwini-sensehq
 autodocs
 circlehollow
 CODEOWNERS

package/.github/workflows/pages-stage.yml

@@ -0,0 +1,54 @@
+# Author: Anant Raj
+# Note: Do not change
+
+# Simple workflow for deploying static content to GitHub Pages
+name: Stage - Publish Genesis Design System Storybook to Github Pages
+
+on:
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}/stage
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: Install and Build 🔧
+        # Install npm packages and build the Storybook files
+        run: |
+          echo "🔎 The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}."
+          yarn
+          yarn storybook:export
+      - name: List files in the repository after build
+        run: |
+          ls ${{ github.workspace }}
+          echo "🍏 This job's status is ${{ job.status }}."
+      - name: Setup Pages
+        uses: actions/configure-pages@v2
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # Upload storybook-static folder's content
+          path: './storybook-static/'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

package/.github/workflows/publish_to_npm.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Check Permissions
         id: check-permissions
         env:
-          ALLOWED_USERS: superrover, Anant-Raj, nsfmc
+          ALLOWED_USERS: superrover, Anant-Raj, nsfmc, ashwini-sensehq
         if: ${{ !contains(env.ALLOWED_USERS, github.actor) }}
         run: |
           echo "You don't have correct permissions to do this release"

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 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.43](https://github.com/spaced-out/ui-design-system/compare/v0.1.42...v0.1.43) (2023-08-17)
+
+
+### Bug Fixes
+
+* add actions for stage environment ([#137](https://github.com/spaced-out/ui-design-system/issues/137)) ([87b1d4e](https://github.com/spaced-out/ui-design-system/commit/87b1d4e0136f35b09d8fd704740d07112568cd8d))
+* add list reference support to focus manager with arrow key navigation ([#132](https://github.com/spaced-out/ui-design-system/issues/132)) ([4b13735](https://github.com/spaced-out/ui-design-system/commit/4b13735345b3fd998a256f5f815b54223f6b705e))
+* ButtonDropdown menu clipping issue ([#135](https://github.com/spaced-out/ui-design-system/issues/135)) ([0b86e21](https://github.com/spaced-out/ui-design-system/commit/0b86e2183e61b5d6b908617f3f5a269bc9aae51f))
+* highlight text fixes ([#134](https://github.com/spaced-out/ui-design-system/issues/134)) ([831c96f](https://github.com/spaced-out/ui-design-system/commit/831c96fac9036af667e5fb1fd83ff063d01e9434))
+
+### [0.1.42](https://github.com/spaced-out/ui-design-system/compare/v0.1.41...v0.1.42) (2023-08-04)
+
+
+### Features
+
+* panel background interactivity and background for panel body ([#131](https://github.com/spaced-out/ui-design-system/issues/131)) ([223e692](https://github.com/spaced-out/ui-design-system/commit/223e6928d977cb326ac973fe9103415eeb86300a))
+
 ### [0.1.41](https://github.com/spaced-out/ui-design-system/compare/v0.1.40...v0.1.41) (2023-08-02)
 
 

package/lib/components/ButtonDropdown/ButtonDropdown.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ButtonDropdown = exports.ANCHOR_POSITION_TYPE = void 0;
+exports.STRATEGY_TYPE = exports.ButtonDropdown = exports.ANCHOR_POSITION_TYPE = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _react2 = require("@floating-ui/react");
 var _size = require("../../styles/variables/_size");
@@ -28,9 +28,15 @@ const ANCHOR_POSITION_TYPE = Object.freeze({
   bottomEnd: 'bottom-end'
 });
 exports.ANCHOR_POSITION_TYPE = ANCHOR_POSITION_TYPE;
+const STRATEGY_TYPE = Object.freeze({
+  absolute: 'absolute',
+  fixed: 'fixed'
+});
+exports.STRATEGY_TYPE = STRATEGY_TYPE;
 const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   let {
     anchorPosition = 'bottom-start',
+    positionStrategy = STRATEGY_TYPE.absolute,
     size = 'medium',
     onOptionSelect,
     menu,
@@ -56,7 +62,7 @@ const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
     strategy
   } = (0, _react2.useFloating)({
     open: true,
-    strategy: 'absolute',
+    strategy: positionStrategy,
     placement: anchorPosition,
     whileElementsMounted: _react2.autoUpdate,
     middleware: [(0, _react2.shift)(), (0, _react2.flip)(), (0, _react2.offset)(parseInt(_space.spaceXXSmall))]

package/lib/components/ButtonDropdown/ButtonDropdown.js.flow

@@ -38,7 +38,14 @@ export const ANCHOR_POSITION_TYPE = Object.freeze({
   bottomEnd: 'bottom-end',
 });
 
+export const STRATEGY_TYPE = Object.freeze({
+  absolute: 'absolute',
+  fixed: 'fixed',
+});
+
 export type AnchorType = $Values<typeof ANCHOR_POSITION_TYPE>;
+export type Strategy = $Values<typeof STRATEGY_TYPE>;
+
 type ClassNames = $ReadOnly<{
   buttonWrapper?: string,
   dropdownContainer?: string,
@@ -49,6 +56,7 @@ export type ButtonDropdownProps = {
   ...ButtonProps,
   classNames?: ClassNames,
   menu?: MenuProps,
+  positionStrategy?: Strategy,
   anchorPosition?: AnchorType,
   onOptionSelect?: (option: MenuOption) => mixed,
   onMenuOpen?: () => mixed,
@@ -64,6 +72,7 @@ export const ButtonDropdown: React$AbstractComponent<
   (
     {
       anchorPosition = 'bottom-start',
+      positionStrategy = STRATEGY_TYPE.absolute,
       size = 'medium',
       onOptionSelect,
       menu,
@@ -86,7 +95,7 @@ export const ButtonDropdown: React$AbstractComponent<
     React.useImperativeHandle(forwardRef, () => menuBtnRef.current);
     const {x, y, refs, strategy} = useFloating({
       open: true,
-      strategy: 'absolute',
+      strategy: positionStrategy,
       placement: anchorPosition,
       whileElementsMounted: autoUpdate,
       middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],

package/lib/components/Card/index.js

@@ -3,16 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Card", {
-  enumerable: true,
-  get: function () {
-    return _Card.Card;
-  }
-});
-Object.defineProperty(exports, "ClickableCard", {
-  enumerable: true,
-  get: function () {
-    return _Card.ClickableCard;
-  }
-});
-var _Card = require("./Card");
+var _Card = require("./Card");
+Object.keys(_Card).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Card[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Card[key];
+    }
+  });
+});

package/lib/components/Card/index.js.flow

@@ -1,4 +1,3 @@
 // @flow strict
 
-export type {CardProps} from './Card';
-export {Card, ClickableCard} from './Card';
+export * from './Card';

package/lib/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.js

@@ -37,6 +37,7 @@ const FocusManagerWithArrowKeyNavigation = props => {
     cols = 1,
     focusItemOnOpen = 'auto',
     loop = false,
+    listReference,
     ...restFloatingFocusManagerProps
   } = props;
   const {
@@ -61,11 +62,23 @@ const FocusManagerWithArrowKeyNavigation = props => {
     setActiveIndex(index);
   };
 
+  // Add childOnClickPassthrough for the list of references passed in case of custom nodes passed
+  if (listReference) {
+    listReference.current.map((element, index) => {
+      const childClickHandler = element.onclick;
+      element.onclick = function () {
+        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+          args[_key2] = arguments[_key2];
+        }
+        childOnClickPassthrough(childClickHandler, index, ...args);
+      };
+    });
+  }
   // Note(Nishant): Force the list navigation props onto the children
   // while using this component make sure your all the passed children have a focus state
 
   let skippedChildrenCount = 0;
-  const clonedChildren = childrenArray.map((child, index) => {
+  const clonedChildren = listReference ? children : childrenArray.map((child, index) => {
     const {
       onClick: childClickHandler
     } = child.props;
@@ -83,8 +96,8 @@ const FocusManagerWithArrowKeyNavigation = props => {
         }
       },
       onClick: function () {
-        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-          args[_key2] = arguments[_key2];
+        for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+          args[_key3] = arguments[_key3];
         }
         childOnClickPassthrough(childClickHandler, adjustedIndex, ...args);
       }
@@ -93,7 +106,7 @@ const FocusManagerWithArrowKeyNavigation = props => {
   const listNavigation = (0, _react2.useListNavigation)(context, {
     orientation,
     cols,
-    listRef,
+    listRef: listReference ? listReference : listRef,
     activeIndex,
     onNavigate: setActiveIndex,
     focusItemOnOpen,

package/lib/components/FocusManagerWithArrowKeyNavigation/FocusManagerWithArrowKeyNavigation.js.flow

@@ -48,6 +48,7 @@ export type FocusManagerWithArrowKeyNavigationProps = {
   orientation?: 'horizontal' | 'vertical',
   focusItemOnOpen?: 'auto' | boolean,
   loop?: boolean,
+  listReference?: {current: Array<HTMLElement>},
 };
 
 export const FocusManagerWithArrowKeyNavigation = (
@@ -62,6 +63,7 @@ export const FocusManagerWithArrowKeyNavigation = (
     cols = 1,
     focusItemOnOpen = 'auto',
     loop = false,
+    listReference,
     ...restFloatingFocusManagerProps
   } = props;
 
@@ -79,39 +81,50 @@ export const FocusManagerWithArrowKeyNavigation = (
     setActiveIndex(index);
   };
 
+  // Add childOnClickPassthrough for the list of references passed in case of custom nodes passed
+  if (listReference) {
+    listReference.current.map((element, index) => {
+      const childClickHandler = element.onclick;
+      element.onclick = (...args) => {
+        childOnClickPassthrough(childClickHandler, index, ...args);
+      };
+    });
+  }
   // Note(Nishant): Force the list navigation props onto the children
   // while using this component make sure your all the passed children have a focus state
 
   let skippedChildrenCount = 0;
 
-  const clonedChildren = childrenArray.map((child, index) => {
-    const {onClick: childClickHandler} = child.props;
-
-    let adjustedIndex = index - skippedChildrenCount;
-
-    if (child?.type?.displayName === SKIP_ELEMENT_DISPLAY_NAME) {
-      skippedChildrenCount++;
-      adjustedIndex = null;
-    }
-
-    return React.cloneElement(child, {
-      ...child.props,
-      tabIndex: activeIndex === index ? 0 : -1,
-      ref: (node) => {
-        if (adjustedIndex !== null) {
-          listRef.current[adjustedIndex] = node;
-        }
-      },
-      onClick: (...args) => {
-        childOnClickPassthrough(childClickHandler, adjustedIndex, ...args);
-      },
+  const clonedChildren = listReference
+    ? children
+    : childrenArray.map((child, index) => {
+      const {onClick: childClickHandler} = child.props;
+
+      let adjustedIndex = index - skippedChildrenCount;
+
+      if (child?.type?.displayName === SKIP_ELEMENT_DISPLAY_NAME) {
+        skippedChildrenCount++;
+        adjustedIndex = null;
+      }
+
+      return React.cloneElement(child, {
+        ...child.props,
+        tabIndex: activeIndex === index ? 0 : -1,
+        ref: (node) => {
+          if (adjustedIndex !== null) {
+            listRef.current[adjustedIndex] = node;
+          }
+        },
+        onClick: (...args) => {
+          childOnClickPassthrough(childClickHandler, adjustedIndex, ...args);
+        },
+      });
     });
-  });
 
   const listNavigation = useListNavigation(context, {
     orientation,
     cols,
-    listRef,
+    listRef: listReference ? listReference : listRef,
     activeIndex,
     onNavigate: setActiveIndex,
     focusItemOnOpen,

package/lib/components/Modal/Modal.js

@@ -121,6 +121,7 @@ const Modal = _ref4 => {
     tapOutsideToClose = true,
     initialFocus = -1,
     customAnimation,
+    allowBackgroundInteraction = false,
     // Size is not set to default for backward compatibility. Don't change if you don't know this.
     size
   } = _ref4;
@@ -209,7 +210,7 @@ const Modal = _ref4 => {
       [_ModalModule.default.in]: isTransitioning,
       [_ModalModule.default.open]: isOpen
     }, classNames?.container)
-  }, /*#__PURE__*/React.createElement("div", {
+  }, !allowBackgroundInteraction && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_ModalModule.default.backdrop, {
       [_ModalModule.default.darkBackdrop]: !hideBackdrop
     }, classNames?.backdrop),

package/lib/components/Modal/Modal.js.flow

@@ -52,6 +52,7 @@ export type ModalProps = {
   onClose?: ?(SyntheticEvent<HTMLElement>) => mixed,
   hideBackdrop?: boolean,
   tapOutsideToClose?: boolean,
+  allowBackgroundInteraction?: boolean,
   initialFocus?: number,
   customAnimation?: UseTransitionStylesProps,
 };
@@ -194,6 +195,7 @@ export const Modal = ({
   tapOutsideToClose = true,
   initialFocus = -1,
   customAnimation,
+  allowBackgroundInteraction = false,
   // Size is not set to default for backward compatibility. Don't change if you don't know this.
   size,
 }: BaseModalProps): React.Node => {
@@ -296,16 +298,19 @@ export const Modal = ({
           classNames?.container,
         )}
       >
-        <div
-          className={classify(
-            css.backdrop,
-            {
-              [css.darkBackdrop]: !hideBackdrop,
-            },
-            classNames?.backdrop,
-          )}
-          onClick={onBackdropClick}
-        />
+        {!allowBackgroundInteraction && (
+          <div
+            className={classify(
+              css.backdrop,
+              {
+                [css.darkBackdrop]: !hideBackdrop,
+              },
+              classNames?.backdrop,
+            )}
+            onClick={onBackdropClick}
+          />
+        )}
+
         {isMounted && (
           <div
             className={classify(

package/lib/components/Panel/Panel.js

@@ -86,6 +86,8 @@ const Panel = _ref4 => {
     hideBackdrop = true,
     classNames,
     customAnimation,
+    tapOutsideToClose = true,
+    allowBackgroundInteraction,
     ...restPanelProps
   } = _ref4;
   const isTransitioning = (0, _useMountTransition.default)(isOpen, parseInt(_motion.motionDurationNormal));
@@ -93,7 +95,9 @@ const Panel = _ref4 => {
   return /*#__PURE__*/React.createElement(_Modal.Modal, _extends({
     isOpen: isOpen,
     onClose: onClose,
-    hideBackdrop: hideBackdrop
+    hideBackdrop: hideBackdrop,
+    tapOutsideToClose: allowBackgroundInteraction ? false : tapOutsideToClose,
+    allowBackgroundInteraction: allowBackgroundInteraction
   }, restPanelProps, {
     classNames: {
       container: (0, _classify.default)(_PanelModule.default.panelContainer, {

package/lib/components/Panel/Panel.js.flow

@@ -49,6 +49,7 @@ export type PanelBodyProps = {
 
 export type PanelProps = {
   ...ModalProps,
+  allowBackgroundInteraction?: boolean,
   size?: PanelSize,
   anchor?: PanelAnchor,
 };
@@ -128,6 +129,8 @@ export const Panel = ({
   hideBackdrop = true,
   classNames,
   customAnimation,
+  tapOutsideToClose = true,
+  allowBackgroundInteraction,
   ...restPanelProps
 }: PanelProps): React.Node => {
   const isTransitioning = useMountTransition(
@@ -142,6 +145,8 @@ export const Panel = ({
       isOpen={isOpen}
       onClose={onClose}
       hideBackdrop={hideBackdrop}
+      tapOutsideToClose={allowBackgroundInteraction ? false : tapOutsideToClose}
+      allowBackgroundInteraction={allowBackgroundInteraction}
       {...restPanelProps}
       classNames={{
         container: classify(

package/lib/components/Panel/Panel.module.css

@@ -1,7 +1,7 @@
 @value (spaceNegFluid, spaceNone, spaceMedium, spaceSmall, spaceFluid) from '../../styles/variables/_space.css';
 @value (size4, size60, size480, size580, size720, sizeFluid) from '../../styles/variables/_size.css';
 @value (motionDurationNormal, motionEaseInEaseOut) from '../../styles/variables/_motion.css';
-@value (colorBackgroundTertiary, colorBackgroundPrimary) from '../../styles/variables/_color.css';
+@value (colorBackgroundTertiary, colorBackgroundPrimary, colorBackgroundSecondary) from '../../styles/variables/_color.css';
 @value (borderRadiusNone) from '../../styles/variables/_border.css';
 
 .panel {
@@ -51,6 +51,7 @@
   justify-content: space-between;
   align-items: center;
   gap: spaceMedium;
+  background-color: colorBackgroundTertiary;
 }
 
 .headerContent {
@@ -61,11 +62,12 @@
   padding: spaceMedium;
   height: sizeFluid;
   overflow: auto;
+  background-color: colorBackgroundSecondary;
 }
 
 .panelFooter {
   composes: borderTopPrimary from '../../styles/border.module.css';
-  background-color: colorBackgroundPrimary;
+  background-color: colorBackgroundTertiary;
   margin-top: auto;
   padding: spaceMedium;
   display: flex;

package/lib/components/Text/Text.js

@@ -22,22 +22,22 @@ const HighlightText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     highlightWithBackground
   } = _ref;
   // Split text on highlight term, include term itself into parts, ignore case
-  let highlights = '';
-  if (Array.isArray(highlight)) {
-    highlights = highlight.map(_string.escapeRegExp).join('|');
-  } else {
-    highlights = (0, _string.escapeRegExp)(highlight);
-  }
+  // Convert highlight to an array if it's not already
+  const highlightArray = [].concat(highlight).filter(item => item !== '');
+  const highlights = highlightArray.map(_string.escapeRegExp).join('|');
   const parts = text.split(new RegExp(`(${highlights})`, caseSensitiveHighlighting ? '' : 'gi')).filter(part => part !== '');
   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));
+  }, parts.map((part, idx) => {
+    const isHighlighted = highlightArray.some(highlightTerm => caseSensitiveHighlighting ? (0, _string.escapeRegExp)(part).includes((0, _string.escapeRegExp)(highlightTerm)) : (0, _string.escapeRegExp)(part).toLowerCase().includes((0, _string.escapeRegExp)(highlightTerm).toLowerCase()));
+    return isHighlighted ? /*#__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 = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {

package/lib/components/Text/Text.js.flow

@@ -29,51 +29,64 @@ export type HighlightTextProps = {
   highlightWithBackground?: boolean,
 };
 
-const HighlightText: React$AbstractComponent<HighlightTextProps, HTMLSpanElement> =
-React.forwardRef<HighlightTextProps, HTMLSpanElement>( ({
-  text,
-  highlight,
-  highlightClassName,
-  caseSensitiveHighlighting,
-  highlightWithBackground,
-}: HighlightTextProps, ref) => {
-  // Split text on highlight term, include term itself into parts, ignore case
-  let highlights = '';
-  if (Array.isArray(highlight)) {
-    highlights = highlight.map(escapeRegExp).join('|');
-  } else {
-    highlights = escapeRegExp(highlight);
-  }
+const HighlightText: React$AbstractComponent<
+  HighlightTextProps,
+  HTMLSpanElement,
+> = React.forwardRef<HighlightTextProps, HTMLSpanElement>(
+  (
+    {
+      text,
+      highlight,
+      highlightClassName,
+      caseSensitiveHighlighting,
+      highlightWithBackground,
+    }: HighlightTextProps,
+    ref,
+  ) => {
+    // Split text on highlight term, include term itself into parts, ignore case
+    // Convert highlight to an array if it's not already
+    const highlightArray = [].concat(highlight).filter((item) => item !== '');
+    const highlights = highlightArray.map(escapeRegExp).join('|');
 
-  const parts = text
-    .split(new RegExp(`(${highlights})`, caseSensitiveHighlighting ? '' : 'gi'))
-    .filter((part) => part !== '');
+    const parts = text
+      .split(
+        new RegExp(`(${highlights})`, caseSensitiveHighlighting ? '' : 'gi'),
+      )
+      .filter((part) => part !== '');
 
-  return (
-    <span ref={ref}>
-      {parts.map((part, idx) =>
-        highlights.toLowerCase().includes(escapeRegExp(part).toLowerCase()) ? (
-          <span
-            // eslint-disable-next-line react/no-array-index-key
-            key={idx}
-            className={classify(
-              css.highlightText,
-              {
-                [css.bgHighlighting]: highlightWithBackground,
-              },
-              highlightClassName,
-            )}
-          >
-            {part}
-          </span>
-        ) : (
-          part
-        ),
-      )}
-    </span>
-  );
-}
-)
+    return (
+      <span ref={ref}>
+        {parts.map((part, idx) => {
+          const isHighlighted = highlightArray.some((highlightTerm) =>
+            caseSensitiveHighlighting
+              ? escapeRegExp(part).includes(escapeRegExp(highlightTerm))
+              : escapeRegExp(part)
+                .toLowerCase()
+                .includes(escapeRegExp(highlightTerm).toLowerCase()),
+          );
+
+          return isHighlighted ? (
+            <span
+              // eslint-disable-next-line react/no-array-index-key
+              key={idx}
+              className={classify(
+                css.highlightText,
+                {
+                  [css.bgHighlighting]: highlightWithBackground,
+                },
+                highlightClassName,
+              )}
+            >
+              {part}
+            </span>
+          ) : (
+            part
+          );
+        })}
+      </span>
+    );
+  },
+);
 
 export const JumboMedium: React$AbstractComponent<TextProps, HTMLSpanElement> =
   React.forwardRef<TextProps, HTMLSpanElement>(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.41",
+  "version": "0.1.43",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {