@spaced-out/ui-design-system 0.1.94-beta.5 → 0.1.94-beta.7

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 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.94-beta.7](https://github.com/spaced-out/ui-design-system/compare/v0.1.94-beta.6...v0.1.94-beta.7) (2024-05-20)
+
+
+### Features
+
+* padding enhancements page title ([#211](https://github.com/spaced-out/ui-design-system/issues/211)) ([5c3a728](https://github.com/spaced-out/ui-design-system/commit/5c3a72886a536035cc0842535b49b3c9fea07da5))
+* side menu toottip ([#212](https://github.com/spaced-out/ui-design-system/issues/212)) ([53b5cf1](https://github.com/spaced-out/ui-design-system/commit/53b5cf1ca59bfab6d15d9749d90f95762af9bb71))
+
+### [0.1.94-beta.6](https://github.com/spaced-out/ui-design-system/compare/v0.1.94-beta.5...v0.1.94-beta.6) (2024-05-16)
+
+
+### Bug Fixes
+
+* removed line height in chartjs typography and removed unused style ([#207](https://github.com/spaced-out/ui-design-system/issues/207)) ([fea7e30](https://github.com/spaced-out/ui-design-system/commit/fea7e30fcd8ce0c3e955e69f55ab5be67ae482f4))
+
 ### [0.1.94-beta.5](https://github.com/spaced-out/ui-design-system/compare/v0.1.94-beta.4...v0.1.94-beta.5) (2024-05-16)
 
 

package/design-tokens/size/base-size.json

@@ -69,6 +69,9 @@
     "60": {
       "value": "60px"
     },
+    "66": {
+      "value": "66px"
+    },
     "70": {
       "value": "70px"
     },

package/lib/components/PageTitle/PageTitle.module.css

@@ -1,5 +1,5 @@
 @value (colorBackgroundTertiary) from '../../styles/variables/_color.css';
-@value (spaceNone, spaceXSmall, spaceSmall, spaceMedium, spaceLarge) from '../../styles/variables/_space.css';
+@value (spaceNone, spaceXSmall, spaceSmall, spaceMedium) from '../../styles/variables/_space.css';
 
 @value (sizeFluid, size60) from '../../styles/variables/_size.css';
 
@@ -10,7 +10,7 @@
   flex-direction: row;
   justify-content: space-between;
   box-sizing: border-box;
-  padding: spaceSmall spaceLarge spaceXSmall spaceLarge;
+  padding: spaceSmall spaceMedium spaceXSmall spaceMedium;
   width: sizeFluid;
   min-height: size60;
   gap: spaceMedium;

package/lib/components/SideMenuLink/SideMenuLink.js

@@ -7,8 +7,10 @@ exports.SideMenuLink = exports.MENU_NAME_LIST = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Button = require("../Button");
+var _ConditionalWrapper = require("../ConditionalWrapper");
 var _Icon = require("../Icon");
 var _Text = require("../Text");
+var _Tooltip = require("../Tooltip");
 var _SideMenuLinkModule = _interopRequireDefault(require("./SideMenuLink.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); }
@@ -50,6 +52,11 @@ const MENU_NAME_LIST = Object.freeze({
     iconName: 'messages',
     iconType: 'duotone'
   },
+  messages: {
+    title: 'Messaging',
+    iconName: 'messages',
+    iconType: 'duotone'
+  },
   chatbot: {
     title: 'Chatbot',
     iconName: 'message-bot',
@@ -145,6 +152,11 @@ const MENU_NAME_LIST = Object.freeze({
     iconName: 'pager',
     iconType: 'duotone'
   },
+  sourcing: {
+    title: 'Sourcing',
+    iconName: 'browser',
+    iconType: 'duotone'
+  },
   earnings: {
     title: 'Earnings',
     iconName: 'wallet',
@@ -166,6 +178,7 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     selectedValue,
     onChange,
     tabIndex = 0,
+    tooltip,
     ...restButtonProps
   } = _ref;
   const selected = selectedValue === pageNameKey;
@@ -173,7 +186,12 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const onChangeHandler = e => {
     onChange && onChange(e, pageNameKey);
   };
-  return /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, restButtonProps, {
+  return /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
+    condition: Boolean(!opened && !inActive),
+    wrapper: children => /*#__PURE__*/React.createElement(_Tooltip.Tooltip, _extends({
+      body: MENU_NAME_LIST[pageNameKey].title
+    }, tooltip), children)
+  }, /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, restButtonProps, {
     className: (0, _classify.default)(_SideMenuLinkModule.default.linkWrapper, {
       [_SideMenuLinkModule.default.selected]: selected,
       [_SideMenuLinkModule.default.disabled]: disabled,
@@ -192,6 +210,7 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }) : null, pageNameKey && MENU_NAME_LIST[pageNameKey] && opened ? /*#__PURE__*/React.createElement(_Text.SubTitleSmall, {
     color: _Text.TEXT_COLORS.inverseSecondary,
     className: _SideMenuLinkModule.default.menuText
-  }, MENU_NAME_LIST[pageNameKey].title) : null);
+  }, MENU_NAME_LIST[pageNameKey].title) : null));
 });
-exports.SideMenuLink = SideMenuLink;
+exports.SideMenuLink = SideMenuLink;
+SideMenuLink.displayName = 'SideMenuLink';

package/lib/components/SideMenuLink/SideMenuLink.js.flow

@@ -4,8 +4,11 @@ import * as React from 'react';
 
 import classify from '../../utils/classify';
 import {UnstyledButton} from '../Button';
+import {ConditionalWrapper} from '../ConditionalWrapper';
 import {Icon} from '../Icon';
 import {SubTitleSmall, TEXT_COLORS} from '../Text';
+import type {BaseTooltipProps} from '../Tooltip';
+import {Tooltip} from '../Tooltip';
 
 import css from './SideMenuLink.module.css';
 
@@ -46,6 +49,11 @@ export const MENU_NAME_LIST = Object.freeze({
     iconName: 'messages',
     iconType: 'duotone',
   },
+  messages: {
+    title: 'Messaging',
+    iconName: 'messages',
+    iconType: 'duotone',
+  },
   chatbot: {
     title: 'Chatbot',
     iconName: 'message-bot',
@@ -141,6 +149,11 @@ export const MENU_NAME_LIST = Object.freeze({
     iconName: 'pager',
     iconType: 'duotone',
   },
+  sourcing: {
+    title: 'Sourcing',
+    iconName: 'browser',
+    iconType: 'duotone',
+  },
   earnings: {
     title: 'Earnings',
     iconName: 'wallet',
@@ -165,6 +178,7 @@ export type SideMenuLinkProps = {
   opened?: boolean,
   onChange?: (e: SyntheticEvent<HTMLElement>, newValue: string) => mixed,
   tabIndex?: number,
+  tooltip?: BaseTooltipProps,
   ...
 };
 
@@ -181,6 +195,7 @@ export const SideMenuLink: React$AbstractComponent<
       selectedValue,
       onChange,
       tabIndex = 0,
+      tooltip,
       ...restButtonProps
     }: SideMenuLinkProps,
     ref,
@@ -190,41 +205,53 @@ export const SideMenuLink: React$AbstractComponent<
     const onChangeHandler = (e: SyntheticEvent<HTMLElement>) => {
       onChange && onChange(e, pageNameKey);
     };
+
     return (
-      <UnstyledButton
-        {...restButtonProps}
-        className={classify(
-          css.linkWrapper,
-          {
-            [css.selected]: selected,
-            [css.disabled]: disabled,
-            [css.inActive]: inActive,
-            [css.closed]: !opened,
-          },
-          classNames?.wrapper,
+      <ConditionalWrapper
+        condition={Boolean(!opened && !inActive)}
+        wrapper={(children) => (
+          <Tooltip body={MENU_NAME_LIST[pageNameKey].title} {...tooltip}>
+            {children}
+          </Tooltip>
         )}
-        onClick={onChangeHandler}
-        ref={ref}
-        tabIndex={disabled ? -1 : tabIndex}
       >
-        {pageNameKey && MENU_NAME_LIST[pageNameKey] ? (
-          <Icon
-            type={MENU_NAME_LIST[pageNameKey].iconType}
-            name={MENU_NAME_LIST[pageNameKey].iconName}
-            size="medium"
-            color={TEXT_COLORS.inverseSecondary}
-            className={css.menuIcon}
-          />
-        ) : null}
-        {pageNameKey && MENU_NAME_LIST[pageNameKey] && opened ? (
-          <SubTitleSmall
-            color={TEXT_COLORS.inverseSecondary}
-            className={css.menuText}
-          >
-            {MENU_NAME_LIST[pageNameKey].title}
-          </SubTitleSmall>
-        ) : null}
-      </UnstyledButton>
+        <UnstyledButton
+          {...restButtonProps}
+          className={classify(
+            css.linkWrapper,
+            {
+              [css.selected]: selected,
+              [css.disabled]: disabled,
+              [css.inActive]: inActive,
+              [css.closed]: !opened,
+            },
+            classNames?.wrapper,
+          )}
+          onClick={onChangeHandler}
+          ref={ref}
+          tabIndex={disabled ? -1 : tabIndex}
+        >
+          {pageNameKey && MENU_NAME_LIST[pageNameKey] ? (
+            <Icon
+              type={MENU_NAME_LIST[pageNameKey].iconType}
+              name={MENU_NAME_LIST[pageNameKey].iconName}
+              size="medium"
+              color={TEXT_COLORS.inverseSecondary}
+              className={css.menuIcon}
+            />
+          ) : null}
+          {pageNameKey && MENU_NAME_LIST[pageNameKey] && opened ? (
+            <SubTitleSmall
+              color={TEXT_COLORS.inverseSecondary}
+              className={css.menuText}
+            >
+              {MENU_NAME_LIST[pageNameKey].title}
+            </SubTitleSmall>
+          ) : null}
+        </UnstyledButton>
+      </ConditionalWrapper>
     );
   },
 );
+
+SideMenuLink.displayName = 'SideMenuLink';

package/lib/styles/index.css

@@ -408,6 +408,8 @@
 
 @value size60: 60px;
 
+@value size66: 66px;
+
 @value size70: 70px;
 
 @value size90: 90px;

package/lib/styles/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextFavorite = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorSideMenuAccountBarFill = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = exports.borderWidthTertiary = exports.borderWidthSecondary = exports.borderWidthPrimary = exports.borderWidthNone = exports.borderRadiusXSmall = exports.borderRadiusXLarge = exports.borderRadiusSmall = exports.borderRadiusRadioButton = exports.borderRadiusNone = exports.borderRadiusMedium = exports.borderRadiusLarge = exports.borderRadiusCircle = void 0;
 exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = exports.shadowBoxShadow4Y = exports.shadowBoxShadow4X = exports.shadowBoxShadow4Type = exports.shadowBoxShadow4Spread = exports.shadowBoxShadow4Color = exports.shadowBoxShadow4Blur = exports.shadowBoxShadow3Y = exports.shadowBoxShadow3X = exports.shadowBoxShadow3Type = exports.shadowBoxShadow3Spread = exports.shadowBoxShadow3Color = exports.shadowBoxShadow3Blur = exports.shadowBoxShadow2Y = exports.shadowBoxShadow2X = exports.shadowBoxShadow2Type = exports.shadowBoxShadow2Spread = exports.shadowBoxShadow2Color = exports.shadowBoxShadow2Blur = exports.shadowBoxShadow1Y = exports.shadowBoxShadow1X = exports.shadowBoxShadow1Type = exports.shadowBoxShadow1Spread = exports.shadowBoxShadow1Color = exports.shadowBoxShadow1Blur = exports.opacity95 = exports.opacity90 = exports.opacity85 = exports.opacity80 = exports.opacity70 = exports.opacity60 = exports.opacity50 = exports.opacity5 = exports.opacity40 = exports.opacity30 = exports.opacity20 = exports.opacity15 = exports.opacity100 = exports.opacity10 = exports.opacity0 = exports.motionEaseInEaseOut = exports.motionDurationSlowest = exports.motionDurationSlower = exports.motionDurationSlow = exports.motionDurationNormal = exports.motionDurationFast = exports.fontWeightMedium = exports.fontWeightBook = exports.fontTextDecorationNone = exports.fontTextCaseNone = exports.fontSize46 = exports.fontSize36 = exports.fontSize26 = exports.fontSize24 = exports.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = exports.fontLineHeight125 = exports.fontLineHeight120 = exports.fontLineHeight100 = exports.fontLetterSpacingMinus4 = exports.fontLetterSpacingMinus3 = exports.fontLetterSpacingMinus2 = exports.fontLetterSpacingMinus1 = exports.fontLetterSpacing4 = exports.fontLetterSpacing2 = exports.fontLetterSpacing1 = exports.fontLetterSpacing0 = exports.fontFamilyCentra = exports.elevationTooltip = exports.elevationToast = exports.elevationNone = exports.elevationModal = exports.elevationMenu = exports.elevationCard = exports.elevationBackdrop = void 0;
-exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = void 0;
+exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = void 0;
 
 const borderWidthNone = '0px';
 exports.borderWidthNone = borderWidthNone;
@@ -417,6 +417,8 @@ const size58 = '58px';
 exports.size58 = size58;
 const size60 = '60px';
 exports.size60 = size60;
+const size66 = '66px';
+exports.size66 = size66;
 const size70 = '70px';
 exports.size70 = size70;
 const size90 = '90px';

package/lib/styles/index.js.flow

@@ -410,6 +410,8 @@ export const size58 = '58px';
 
 export const size60 = '60px';
 
+export const size66 = '66px';
+
 export const size70 = '70px';
 
 export const size90 = '90px';

package/lib/styles/variables/_size.css

@@ -44,6 +44,8 @@
 
 @value size60: 60px;
 
+@value size66: 66px;
+
 @value size70: 70px;
 
 @value size90: 90px;

package/lib/styles/variables/_size.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
+exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
 
 const size2 = '2px';
 exports.size2 = size2;
@@ -51,6 +51,8 @@ const size58 = '58px';
 exports.size58 = size58;
 const size60 = '60px';
 exports.size60 = size60;
+const size66 = '66px';
+exports.size66 = size66;
 const size70 = '70px';
 exports.size70 = size70;
 const size90 = '90px';

package/lib/styles/variables/_size.js.flow

@@ -46,6 +46,8 @@ export const size58 = '58px';
 
 export const size60 = '60px';
 
+export const size66 = '66px';
+
 export const size70 = '70px';
 
 export const size90 = '90px';

package/lib/utils/charts/typography.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.underline = exports.subTitleExtraSmall = exports.jumboMedium = exports.formLabelSmall = exports.buttonTextExtraSmall = exports.bodySmall = exports.baseType = void 0;
+exports.underline = exports.subTitleExtraSmall = exports.formLabelSmall = exports.buttonTextExtraSmall = exports.bodySmall = exports.baseType = void 0;
 var _color = require("../../styles/variables/_color");
 var _font = require("../../styles/variables/_font");
 
@@ -18,13 +18,6 @@ const baseType = {
   alignItems: 'center'
 };
 exports.baseType = baseType;
-const jumboMedium = {
-  ...baseType,
-  fontSize: _font.fontSize36,
-  lineHeight: _font.fontLineHeight100,
-  letterSpacing: _font.fontLetterSpacingMinus3
-};
-exports.jumboMedium = jumboMedium;
 const bodySmall = {
   ...baseType,
   fontSize: _font.fontSize12,
@@ -41,8 +34,8 @@ exports.formLabelSmall = formLabelSmall;
 const buttonTextExtraSmall = {
   ...baseType,
   fontSize: _font.fontSize12,
-  letterSpacing: _font.fontLetterSpacing1,
-  lineHeight: _font.fontLineHeight120
+  letterSpacing: _font.fontLetterSpacing1
+  // Removing the font height as its breaking the chart axis labels
 };
 exports.buttonTextExtraSmall = buttonTextExtraSmall;
 const underline = {
@@ -52,7 +45,7 @@ exports.underline = underline;
 const subTitleExtraSmall = {
   ...baseType,
   fontSize: _font.fontSize12,
-  letterSpacing: _font.fontLetterSpacing0,
-  lineHeight: _font.fontLineHeight140
+  letterSpacing: _font.fontLetterSpacing0
+  // Removing the font height as its breaking the chart axis labels
 };
 exports.subTitleExtraSmall = subTitleExtraSmall;

package/lib/utils/charts/typography.js.flow

@@ -4,12 +4,7 @@ import {
   fontLetterSpacing0,
   fontLetterSpacing1,
   fontLetterSpacing4,
-  fontLetterSpacingMinus3,
-  fontLineHeight100,
-  fontLineHeight120,
-  fontLineHeight140,
   fontSize12,
-  fontSize36,
   fontWeightBook,
   fontWeightMedium,
 } from '../../styles/variables/_font';
@@ -26,13 +21,6 @@ export const baseType = {
   alignItems: 'center',
 };
 
-export const jumboMedium = {
-  ...baseType,
-  fontSize: fontSize36,
-  lineHeight: fontLineHeight100,
-  letterSpacing: fontLetterSpacingMinus3,
-};
-
 export const bodySmall = {
   ...baseType,
   fontSize: fontSize12,
@@ -50,7 +38,7 @@ export const buttonTextExtraSmall = {
   ...baseType,
   fontSize: fontSize12,
   letterSpacing: fontLetterSpacing1,
-  lineHeight: fontLineHeight120,
+  // Removing the font height as its breaking the chart axis labels
 };
 
 export const underline = {
@@ -61,5 +49,5 @@ export const subTitleExtraSmall = {
   ...baseType,
   fontSize: fontSize12,
   letterSpacing: fontLetterSpacing0,
-  lineHeight: fontLineHeight140,
+  // Removing the font height as its breaking the chart axis labels
 };

package/package.json

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