@spaced-out/ui-design-system 0.1.59 → 0.1.61

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.61](https://github.com/spaced-out/ui-design-system/compare/v0.1.60...v0.1.61) (2023-10-19)
+
+
+### Features
+
+* 🆎 JumboLarge typography and changes to base font tokens ([529dd89](https://github.com/spaced-out/ui-design-system/commit/529dd89e7248596c6ab450f65915e690f46a1d49))
+* add avatar and icon large ([#148](https://github.com/spaced-out/ui-design-system/issues/148)) ([f6a8b70](https://github.com/spaced-out/ui-design-system/commit/f6a8b70e5b88c5eaf6b3dd74f5d4563449fc1553))
+
+### [0.1.60](https://github.com/spaced-out/ui-design-system/compare/v0.1.59...v0.1.60) (2023-10-16)
+
+
+### Bug Fixes
+
+* storybook upgrade ([#147](https://github.com/spaced-out/ui-design-system/issues/147)) ([38cb012](https://github.com/spaced-out/ui-design-system/commit/38cb012464a05ac26fb6bebe7299e06ebff4a65a))
+
 ### [0.1.59](https://github.com/spaced-out/ui-design-system/compare/v0.1.58...v0.1.59) (2023-10-13)
 
 

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

@@ -35,6 +35,9 @@
       "26": {
         "value": "26px"
       },
+      "36": {
+        "value": "36px"
+      },
       "46": {
         "value": "46px"
       }
@@ -58,6 +61,9 @@
       "minus2": {
         "value": "-0.02em"
       },
+      "minus3": {
+        "value": "-0.03em"
+      },
       "minus4": {
         "value": "-0.04em"
       }

package/lib/components/Avatar/Avatar.js

@@ -18,7 +18,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const AVATAR_SIZE = Object.freeze({
   small: 'small',
   medium: 'medium',
-  large: 'large'
+  large: 'large',
+  extraLarge: 'extraLarge'
 });
 exports.AVATAR_SIZE = AVATAR_SIZE;
 const avatarSizeOptions = [...Object.keys(AVATAR_SIZE)];
@@ -58,6 +59,10 @@ const AvatarTextDecorator = _ref => {
       return /*#__PURE__*/React.createElement(_Text.SubTitleLarge, {
         className: className
       }, avatarText);
+    case 'extraLarge':
+      return /*#__PURE__*/React.createElement(_Text.JumboSmall, {
+        className: className
+      }, avatarText);
   }
 };
 
@@ -65,7 +70,8 @@ const AvatarTextDecorator = _ref => {
 const iconSize = Object.freeze({
   small: 'small',
   medium: 'medium',
-  large: 'medium'
+  large: 'medium',
+  extraLarge: 'large'
 });
 const AvatarConditionalContent = _ref2 => {
   let {
@@ -123,6 +129,7 @@ const Avatar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   } = _ref3;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_AvatarModule.default.container, {
+      [_AvatarModule.default.extraLargeSize]: size === 'extraLarge',
       [_AvatarModule.default.largeSize]: size === 'large',
       [_AvatarModule.default.mediumSize]: size === 'medium',
       [_AvatarModule.default.smallSize]: size === 'small'
@@ -166,6 +173,7 @@ const BaseAvatar = _ref4 => {
   } = _ref4;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_AvatarModule.default.container, {
+      [_AvatarModule.default.baseExtraLargeSize]: size === 'extraLarge',
       [_AvatarModule.default.baseLargeSize]: size === 'large',
       [_AvatarModule.default.baseMediumSize]: size === 'medium',
       [_AvatarModule.default.baseSmallSize]: size === 'small'

package/lib/components/Avatar/Avatar.js.flow

@@ -3,6 +3,7 @@
 import * as React from 'react';
 
 import {
+  JumboSmall,
   SubTitleLarge,
   SubTitleMedium,
   SubTitleSmall,
@@ -38,6 +39,7 @@ export const AVATAR_SIZE = Object.freeze({
   small: 'small',
   medium: 'medium',
   large: 'large',
+  extraLarge: 'extraLarge',
 });
 export const avatarSizeOptions: Array<mixed> = [...Object.keys(AVATAR_SIZE)];
 
@@ -94,6 +96,8 @@ const AvatarTextDecorator = ({
     );
   case 'large':
     return <SubTitleLarge className={className}>{avatarText}</SubTitleLarge>;
+  case 'extraLarge':
+    return <JumboSmall className={className}>{avatarText}</JumboSmall>;
   }
 };
 
@@ -102,6 +106,7 @@ const iconSize = Object.freeze({
   small: 'small',
   medium: 'medium',
   large: 'medium',
+  extraLarge: 'large',
 });
 
 export type AvatarContentProps = {
@@ -193,6 +198,7 @@ export const Avatar: React$AbstractComponent<AvatarProps, HTMLDivElement> =
         className={classify(
           css.container,
           {
+            [css.extraLargeSize]: size === 'extraLarge',
             [css.largeSize]: size === 'large',
             [css.mediumSize]: size === 'medium',
             [css.smallSize]: size === 'small',
@@ -246,6 +252,7 @@ export const BaseAvatar = ({
     className={classify(
       css.container,
       {
+        [css.baseExtraLargeSize]: size === 'extraLarge',
         [css.baseLargeSize]: size === 'large',
         [css.baseMediumSize]: size === 'medium',
         [css.baseSmallSize]: size === 'small',

package/lib/components/Avatar/Avatar.module.css

@@ -1,5 +1,5 @@
 @value (colorFillPrimary, colorBackgroundTertiary, colorInformation, colorInformationLightest) from '../../styles/variables/_color.css';
-@value ( size34, size42, size60, sizeFluid) from '../../styles/variables/_size.css';
+@value ( size34, size42, size60, size100, sizeFluid) from '../../styles/variables/_size.css';
 @value (borderRadiusCircle, borderRadiusLarge, borderRadiusXLarge, borderWidthSecondary) from '../../styles/variables/_border.css';
 @value (spaceNone, spaceXXSmall, spaceXSmall) from '../../styles/variables/_space.css';
 
@@ -10,6 +10,13 @@
   justify-content: center;
 }
 
+.container.extraLargeSize {
+  width: size100;
+  height: size100;
+  min-width: size100;
+  min-height: size100;
+}
+
 .container.largeSize {
   width: size60;
   height: size60;
@@ -31,6 +38,13 @@
   min-height: size34;
 }
 
+.container.baseExtraLargeSize {
+  min-width: size100;
+  height: size100;
+  border-radius: borderRadiusCircle;
+  padding: spaceNone spaceSmall;
+}
+
 .container.baseLargeSize {
   min-width: size60;
   height: size60;

package/lib/components/AvatarGroup/AvatarGroup.js

@@ -30,7 +30,8 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const leftOverlap = {
     small: _space.spaceXXSmall,
     medium: `${parseInt(_space.spaceSmall) / 2}px`,
-    large: _space.spaceXSmall
+    large: _space.spaceXSmall,
+    extraLarge: _space.spaceSmall
   };
   let colorIndex = -1;
   const avatarInGroup = (child, index, color) => {
@@ -113,6 +114,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   });
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_AvatarGroupModule.default.avatarGroupContainer, {
+      [_AvatarGroupModule.default.extraLargeSize]: size === 'extraLarge',
       [_AvatarGroupModule.default.largeSize]: size === 'large',
       [_AvatarGroupModule.default.mediumSize]: size === 'medium',
       [_AvatarGroupModule.default.smallSize]: size === 'small'

package/lib/components/AvatarGroup/AvatarGroup.js.flow

@@ -51,6 +51,7 @@ export const AvatarGroup: React$AbstractComponent<
       small: spaceXXSmall,
       medium: `${parseInt(spaceSmall) / 2}px`,
       large: spaceXSmall,
+      extraLarge: spaceSmall,
     };
 
     let colorIndex = -1;
@@ -142,6 +143,7 @@ export const AvatarGroup: React$AbstractComponent<
     return (
       <div
         className={classify(css.avatarGroupContainer, {
+          [css.extraLargeSize]: size === 'extraLarge',
           [css.largeSize]: size === 'large',
           [css.mediumSize]: size === 'medium',
           [css.smallSize]: size === 'small',

package/lib/components/AvatarGroup/AvatarGroup.module.css

@@ -1,12 +1,17 @@
 @value (colorFillPrimary, colorBackgroundTertiary) from '../../styles/variables/_color.css';
 @value (borderWidthTertiary) from '../../styles/variables/_border.css';
-@value ( size34, size42, size60) from '../../styles/variables/_size.css';
+@value ( size34, size42, size60, size100) from '../../styles/variables/_size.css';
 
 .avatarGroupContainer {
   display: flex;
   flex-direction: row;
 }
 
+.avatarGroupContainer.extraLargeSize {
+  height: size100;
+  width: size100;
+}
+
 .avatarGroupContainer.largeSize {
   height: size60;
 }

package/lib/components/Icon/Icon.js

@@ -14,7 +14,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const ICON_SIZE = Object.freeze({
   small: 'small',
-  medium: 'medium'
+  medium: 'medium',
+  large: 'large'
 });
 exports.ICON_SIZE = ICON_SIZE;
 const Icon = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {

package/lib/components/Icon/Icon.js.flow

@@ -14,6 +14,7 @@ export type IconType = 'regular' | 'solid' | 'duotone' | 'brands';
 export const ICON_SIZE = Object.freeze({
   small: 'small',
   medium: 'medium',
+  large: 'large',
 });
 
 export type IconSize = $Keys<typeof ICON_SIZE>;

package/lib/components/Text/Text.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TitleMedium = exports.SubTitleSmall = exports.SubTitleMedium = exports.SubTitleLarge = exports.SubTitleExtraSmall = exports.JumboSmall = exports.JumboMedium = exports.FormLabelSmall = exports.FormLabelMedium = exports.FormInputSmall = exports.FormInputMedium = exports.ButtonTextSmallUnderline = exports.ButtonTextSmall = exports.ButtonTextMediumUnderline = exports.ButtonTextMedium = exports.ButtonTextExtraSmallUnderline = exports.ButtonTextExtraSmall = exports.BodySmallBold = exports.BodySmall = exports.BodyMediumBold = exports.BodyMedium = exports.BodyLargeBold = exports.BodyLarge = void 0;
+exports.TitleMedium = exports.SubTitleSmall = exports.SubTitleMedium = exports.SubTitleLarge = exports.SubTitleExtraSmall = exports.JumboSmall = exports.JumboMedium = exports.JumboLarge = exports.FormLabelSmall = exports.FormLabelMedium = exports.FormInputSmall = exports.FormInputMedium = exports.ButtonTextSmallUnderline = exports.ButtonTextSmall = exports.ButtonTextMediumUnderline = exports.ButtonTextMedium = exports.ButtonTextExtraSmallUnderline = exports.ButtonTextExtraSmall = exports.BodySmallBold = exports.BodySmall = exports.BodyMediumBold = exports.BodyMedium = exports.BodyLargeBold = exports.BodyLarge = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _typography = require("../../types/typography");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
@@ -39,7 +39,7 @@ const HighlightText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }, part) : part;
   }));
 });
-const JumboMedium = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+const JumboLarge = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -50,6 +50,29 @@ const JumboMedium = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     highlightWithBackground,
     ...props
   } = _ref2;
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: (0, _classify.default)(_typographyModule.default.jumboLarge, _typographyModule.default[color], className),
+    ref: ref
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
+});
+exports.JumboLarge = JumboLarge;
+const JumboMedium = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
+    ...props
+  } = _ref3;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.jumboMedium, _typographyModule.default[color], className),
     ref: ref
@@ -62,7 +85,7 @@ const JumboMedium = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   }) : children);
 });
 exports.JumboMedium = JumboMedium;
-const JumboSmall = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+const JumboSmall = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -72,7 +95,7 @@ const JumboSmall = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref3;
+  } = _ref4;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.jumboSmall, _typographyModule.default[color], className),
     ref: ref
@@ -85,7 +108,7 @@ const JumboSmall = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   }) : children);
 });
 exports.JumboSmall = JumboSmall;
-const TitleMedium = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+const TitleMedium = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -95,7 +118,7 @@ const TitleMedium = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref4;
+  } = _ref5;
   return /*#__PURE__*/React.createElement("h1", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.titleMedium, _typographyModule.default[color], className),
     ref: ref
@@ -108,7 +131,7 @@ const TitleMedium = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   }) : children);
 });
 exports.TitleMedium = TitleMedium;
-const SubTitleLarge = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+const SubTitleLarge = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -118,7 +141,7 @@ const SubTitleLarge = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref5;
+  } = _ref6;
   return /*#__PURE__*/React.createElement("h2", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.subTitleLarge, _typographyModule.default[color], className),
     ref: ref
@@ -131,7 +154,7 @@ const SubTitleLarge = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   }) : children);
 });
 exports.SubTitleLarge = SubTitleLarge;
-const SubTitleMedium = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+const SubTitleMedium = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -141,7 +164,7 @@ const SubTitleMedium = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref6;
+  } = _ref7;
   return /*#__PURE__*/React.createElement("h3", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.subTitleMedium, _typographyModule.default[color], className),
     ref: ref
@@ -154,7 +177,7 @@ const SubTitleMedium = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   }) : children);
 });
 exports.SubTitleMedium = SubTitleMedium;
-const SubTitleSmall = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+const SubTitleSmall = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -164,7 +187,7 @@ const SubTitleSmall = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref7;
+  } = _ref8;
   return /*#__PURE__*/React.createElement("h4", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.subTitleSmall, _typographyModule.default[color], className),
     ref: ref
@@ -177,7 +200,7 @@ const SubTitleSmall = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   }) : children);
 });
 exports.SubTitleSmall = SubTitleSmall;
-const SubTitleExtraSmall = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
+const SubTitleExtraSmall = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -187,7 +210,7 @@ const SubTitleExtraSmall = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref8;
+  } = _ref9;
   return /*#__PURE__*/React.createElement("h5", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.subTitleExtraSmall, _typographyModule.default[color], className),
     ref: ref
@@ -200,7 +223,7 @@ const SubTitleExtraSmall = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   }) : children);
 });
 exports.SubTitleExtraSmall = SubTitleExtraSmall;
-const ButtonTextMedium = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
+const ButtonTextMedium = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -210,7 +233,7 @@ const ButtonTextMedium = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref9;
+  } = _ref10;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextMedium, _typographyModule.default[color], className),
     ref: ref
@@ -223,7 +246,7 @@ const ButtonTextMedium = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
   }) : children);
 });
 exports.ButtonTextMedium = ButtonTextMedium;
-const ButtonTextSmall = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
+const ButtonTextSmall = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -233,7 +256,7 @@ const ButtonTextSmall = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref10;
+  } = _ref11;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextSmall, _typographyModule.default[color], className),
     ref: ref
@@ -246,7 +269,7 @@ const ButtonTextSmall = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
   }) : children);
 });
 exports.ButtonTextSmall = ButtonTextSmall;
-const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
+const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -256,7 +279,7 @@ const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref11;
+  } = _ref12;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default[color], className),
     ref: ref
@@ -269,7 +292,7 @@ const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
   }) : children);
 });
 exports.ButtonTextExtraSmall = ButtonTextExtraSmall;
-const ButtonTextMediumUnderline = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
+const ButtonTextMediumUnderline = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -279,7 +302,7 @@ const ButtonTextMediumUnderline = /*#__PURE__*/React.forwardRef((_ref12, ref) =>
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref12;
+  } = _ref13;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextMedium, _typographyModule.default.underline, _typographyModule.default[color], className),
     ref: ref
@@ -292,7 +315,7 @@ const ButtonTextMediumUnderline = /*#__PURE__*/React.forwardRef((_ref12, ref) =>
   }) : children);
 });
 exports.ButtonTextMediumUnderline = ButtonTextMediumUnderline;
-const ButtonTextSmallUnderline = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
+const ButtonTextSmallUnderline = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -302,7 +325,7 @@ const ButtonTextSmallUnderline = /*#__PURE__*/React.forwardRef((_ref13, ref) =>
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref13;
+  } = _ref14;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextSmall, _typographyModule.default.underline, _typographyModule.default[color], className),
     ref: ref
@@ -315,7 +338,7 @@ const ButtonTextSmallUnderline = /*#__PURE__*/React.forwardRef((_ref13, ref) =>
   }) : children);
 });
 exports.ButtonTextSmallUnderline = ButtonTextSmallUnderline;
-const ButtonTextExtraSmallUnderline = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
+const ButtonTextExtraSmallUnderline = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -325,7 +348,7 @@ const ButtonTextExtraSmallUnderline = /*#__PURE__*/React.forwardRef((_ref14, ref
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref14;
+  } = _ref15;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default.underline, _typographyModule.default[color], className),
     ref: ref
@@ -338,7 +361,7 @@ const ButtonTextExtraSmallUnderline = /*#__PURE__*/React.forwardRef((_ref14, ref
   }) : children);
 });
 exports.ButtonTextExtraSmallUnderline = ButtonTextExtraSmallUnderline;
-const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
+const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -348,7 +371,7 @@ const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref15;
+  } = _ref16;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formInputMedium, _typographyModule.default[color], className),
     ref: ref
@@ -361,7 +384,7 @@ const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
   }) : children);
 });
 exports.FormInputMedium = FormInputMedium;
-const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
+const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -371,7 +394,7 @@ const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref16;
+  } = _ref17;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formInputSmall, _typographyModule.default[color], className),
     ref: ref
@@ -384,7 +407,7 @@ const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   }) : children);
 });
 exports.FormInputSmall = FormInputSmall;
-const BodyLarge = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
+const BodyLarge = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -394,7 +417,7 @@ const BodyLarge = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref17;
+  } = _ref18;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default[color], className),
     ref: ref
@@ -407,7 +430,7 @@ const BodyLarge = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
   }) : children);
 });
 exports.BodyLarge = BodyLarge;
-const BodyMedium = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
+const BodyMedium = /*#__PURE__*/React.forwardRef((_ref19, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -417,7 +440,7 @@ const BodyMedium = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref18;
+  } = _ref19;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default[color], className),
     ref: ref
@@ -430,7 +453,7 @@ const BodyMedium = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
   }) : children);
 });
 exports.BodyMedium = BodyMedium;
-const BodySmall = /*#__PURE__*/React.forwardRef((_ref19, ref) => {
+const BodySmall = /*#__PURE__*/React.forwardRef((_ref20, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -440,7 +463,7 @@ const BodySmall = /*#__PURE__*/React.forwardRef((_ref19, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref19;
+  } = _ref20;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default[color], className),
     ref: ref
@@ -453,7 +476,7 @@ const BodySmall = /*#__PURE__*/React.forwardRef((_ref19, ref) => {
   }) : children);
 });
 exports.BodySmall = BodySmall;
-const BodyLargeBold = /*#__PURE__*/React.forwardRef((_ref20, ref) => {
+const BodyLargeBold = /*#__PURE__*/React.forwardRef((_ref21, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -463,7 +486,7 @@ const BodyLargeBold = /*#__PURE__*/React.forwardRef((_ref20, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref20;
+  } = _ref21;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default.bold, _typographyModule.default[color], className),
     ref: ref
@@ -476,7 +499,7 @@ const BodyLargeBold = /*#__PURE__*/React.forwardRef((_ref20, ref) => {
   }) : children);
 });
 exports.BodyLargeBold = BodyLargeBold;
-const BodyMediumBold = /*#__PURE__*/React.forwardRef((_ref21, ref) => {
+const BodyMediumBold = /*#__PURE__*/React.forwardRef((_ref22, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -486,7 +509,7 @@ const BodyMediumBold = /*#__PURE__*/React.forwardRef((_ref21, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref21;
+  } = _ref22;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default.bold, _typographyModule.default[color], className),
     ref: ref
@@ -499,7 +522,7 @@ const BodyMediumBold = /*#__PURE__*/React.forwardRef((_ref21, ref) => {
   }) : children);
 });
 exports.BodyMediumBold = BodyMediumBold;
-const BodySmallBold = /*#__PURE__*/React.forwardRef((_ref22, ref) => {
+const BodySmallBold = /*#__PURE__*/React.forwardRef((_ref23, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -509,7 +532,7 @@ const BodySmallBold = /*#__PURE__*/React.forwardRef((_ref22, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref22;
+  } = _ref23;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default.bold, _typographyModule.default[color], className),
     ref: ref
@@ -522,7 +545,7 @@ const BodySmallBold = /*#__PURE__*/React.forwardRef((_ref22, ref) => {
   }) : children);
 });
 exports.BodySmallBold = BodySmallBold;
-const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref23, ref) => {
+const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref24, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -532,7 +555,7 @@ const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref23, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref23;
+  } = _ref24;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formLabelMedium, _typographyModule.default[color], className),
     ref: ref
@@ -545,7 +568,7 @@ const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref23, ref) => {
   }) : children);
 });
 exports.FormLabelMedium = FormLabelMedium;
-const FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref24, ref) => {
+const FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref25, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -555,7 +578,7 @@ const FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref24, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref24;
+  } = _ref25;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formLabelSmall, _typographyModule.default[color], className),
     ref: ref

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

@@ -88,6 +88,41 @@ const HighlightText: React$AbstractComponent<
   },
 );
 
+export const JumboLarge: React$AbstractComponent<TextProps, HTMLSpanElement> =
+  React.forwardRef<TextProps, HTMLSpanElement>(
+    (
+      {
+        color = TEXT_COLORS.primary,
+        children,
+        className,
+        highlightedTextClassName,
+        highlightString,
+        caseSensitiveHighlighting,
+        highlightWithBackground,
+        ...props
+      }: TextProps,
+      ref,
+    ): React.Node => (
+      <span
+        {...props}
+        className={classify(css.jumboLarge, css[color], className)}
+        ref={ref}
+      >
+        {!!highlightString?.length && typeof children === 'string' ? (
+          <HighlightText
+            text={children}
+            highlight={highlightString}
+            caseSensitiveHighlighting={caseSensitiveHighlighting}
+            highlightClassName={highlightedTextClassName}
+            highlightWithBackground={highlightWithBackground}
+          />
+        ) : (
+          children
+        )}
+      </span>
+    ),
+  );
+
 export const JumboMedium: React$AbstractComponent<TextProps, HTMLSpanElement> =
   React.forwardRef<TextProps, HTMLSpanElement>(
     (

package/lib/components/Text/index.js

@@ -99,6 +99,12 @@ Object.defineProperty(exports, "FormLabelSmall", {
     return _Text.FormLabelSmall;
   }
 });
+Object.defineProperty(exports, "JumboLarge", {
+  enumerable: true,
+  get: function () {
+    return _Text.JumboLarge;
+  }
+});
 Object.defineProperty(exports, "JumboMedium", {
   enumerable: true,
   get: function () {

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

@@ -19,6 +19,7 @@ export {
   FormInputSmall,
   FormLabelMedium,
   FormLabelSmall,
+  JumboLarge,
   JumboMedium,
   JumboSmall,
   SubTitleExtraSmall,

package/lib/styles/index.css

@@ -204,6 +204,8 @@
 
 @value fontSize26: 26px;
 
+@value fontSize36: 36px;
+
 @value fontSize46: 46px;
 
 @value fontLetterSpacing0: 0em;
@@ -218,6 +220,8 @@
 
 @value fontLetterSpacingMinus2: -0.02em;
 
+@value fontLetterSpacingMinus3: -0.03em;
+
 @value fontLetterSpacingMinus4: -0.04em;
 
 @value fontLineHeight100: 100%;

package/lib/styles/index.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 = 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.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = 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.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = 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.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.size300 = exports.size30 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = 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.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 = 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.size8 = exports.size720 = exports.size70 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = void 0;
+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.size300 = exports.size30 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = 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 = 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.size8 = exports.size720 = exports.size70 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size500 = exports.size50 = void 0;
 
 const borderWidthNone = '0px';
 exports.borderWidthNone = borderWidthNone;
@@ -213,6 +213,8 @@ const fontSize24 = '24px';
 exports.fontSize24 = fontSize24;
 const fontSize26 = '26px';
 exports.fontSize26 = fontSize26;
+const fontSize36 = '36px';
+exports.fontSize36 = fontSize36;
 const fontSize46 = '46px';
 exports.fontSize46 = fontSize46;
 const fontLetterSpacing0 = '0em';
@@ -227,6 +229,8 @@ const fontLetterSpacingMinus1 = '-0.01em';
 exports.fontLetterSpacingMinus1 = fontLetterSpacingMinus1;
 const fontLetterSpacingMinus2 = '-0.02em';
 exports.fontLetterSpacingMinus2 = fontLetterSpacingMinus2;
+const fontLetterSpacingMinus3 = '-0.03em';
+exports.fontLetterSpacingMinus3 = fontLetterSpacingMinus3;
 const fontLetterSpacingMinus4 = '-0.04em';
 exports.fontLetterSpacingMinus4 = fontLetterSpacingMinus4;
 const fontLineHeight100 = '100%';

package/lib/styles/index.js.flow

@@ -206,6 +206,8 @@ export const fontSize24 = '24px';
 
 export const fontSize26 = '26px';
 
+export const fontSize36 = '36px';
+
 export const fontSize46 = '46px';
 
 export const fontLetterSpacing0 = '0em';
@@ -220,6 +222,8 @@ export const fontLetterSpacingMinus1 = '-0.01em';
 
 export const fontLetterSpacingMinus2 = '-0.02em';
 
+export const fontLetterSpacingMinus3 = '-0.03em';
+
 export const fontLetterSpacingMinus4 = '-0.04em';
 
 export const fontLineHeight100 = '100%';

package/lib/styles/typography.module.css

@@ -18,7 +18,7 @@
 @value (
   fontFamilyCentra,
   fontSize46,
-  fontSize24,
+  fontSize36,
   fontSize26,
   fontSize18,
   fontSize16,
@@ -37,13 +37,14 @@
   fontLetterSpacing0,
   fontLetterSpacingMinus1,
   fontLetterSpacingMinus2,
+  fontLetterSpacingMinus3,
   fontLetterSpacingMinus4,
   fontLetterSpacing1,
   fontLetterSpacing2,
   fontLetterSpacing4
 ) from 'variables/_font.css';
 
-@value (size24, size18) from 'variables/_size.css';
+@value (size36, size24, size18) from 'variables/_size.css';
 
 @value (spaceXXSmall, spaceNone) from 'variables/_space.css';
 
@@ -66,18 +67,25 @@
   text-decoration: underline;
 }
 
-.jumboMedium {
+.jumboLarge {
   composes: baseType;
   font-size: fontSize46;
   line-height: fontLineHeight100;
   letter-spacing: fontLetterSpacingMinus4;
 }
 
+.jumboMedium {
+  composes: baseType;
+  font-size: fontSize36;
+  line-height: fontLineHeight100;
+  letter-spacing: fontLetterSpacingMinus3;
+}
+
 .jumboSmall {
   composes: baseType;
-  font-size: fontSize24;
-  line-height: fontLineHeight125;
-  letter-spacing: fontLetterSpacingMinus2;
+  font-size: fontSize26;
+  line-height: fontLineHeight100;
+  letter-spacing: fontLetterSpacingMinus3;
 }
 
 .titleMedium {
@@ -243,6 +251,14 @@
   min-height: size24;
 }
 
+.largeIcon {
+  font-size: fontSize26;
+  height: size36;
+  width: size36;
+  min-width: size36;
+  min-height: size36;
+}
+
 .centerAlignFlex {
   display: flex;
   align-items: center;

package/lib/styles/variables/_font.css

@@ -18,6 +18,8 @@
 
 @value fontSize26: 26px;
 
+@value fontSize36: 36px;
+
 @value fontSize46: 46px;
 
 @value fontLetterSpacing0: 0em;
@@ -32,6 +34,8 @@
 
 @value fontLetterSpacingMinus2: -0.02em;
 
+@value fontLetterSpacingMinus3: -0.03em;
+
 @value fontLetterSpacingMinus4: -0.04em;
 
 @value fontLineHeight100: 100%;

package/lib/styles/variables/_font.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fontWeightMedium = exports.fontWeightBook = exports.fontTextDecorationNone = exports.fontTextCaseNone = exports.fontSize46 = 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.fontLetterSpacingMinus2 = exports.fontLetterSpacingMinus1 = exports.fontLetterSpacing4 = exports.fontLetterSpacing2 = exports.fontLetterSpacing1 = exports.fontLetterSpacing0 = exports.fontFamilyCentra = void 0;
+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 = void 0;
 
 const fontFamilyCentra = '"Centra No2"';
 exports.fontFamilyCentra = fontFamilyCentra;
@@ -25,6 +25,8 @@ const fontSize24 = '24px';
 exports.fontSize24 = fontSize24;
 const fontSize26 = '26px';
 exports.fontSize26 = fontSize26;
+const fontSize36 = '36px';
+exports.fontSize36 = fontSize36;
 const fontSize46 = '46px';
 exports.fontSize46 = fontSize46;
 const fontLetterSpacing0 = '0em';
@@ -39,6 +41,8 @@ const fontLetterSpacingMinus1 = '-0.01em';
 exports.fontLetterSpacingMinus1 = fontLetterSpacingMinus1;
 const fontLetterSpacingMinus2 = '-0.02em';
 exports.fontLetterSpacingMinus2 = fontLetterSpacingMinus2;
+const fontLetterSpacingMinus3 = '-0.03em';
+exports.fontLetterSpacingMinus3 = fontLetterSpacingMinus3;
 const fontLetterSpacingMinus4 = '-0.04em';
 exports.fontLetterSpacingMinus4 = fontLetterSpacingMinus4;
 const fontLineHeight100 = '100%';

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

@@ -20,6 +20,8 @@ export const fontSize24 = '24px';
 
 export const fontSize26 = '26px';
 
+export const fontSize36 = '36px';
+
 export const fontSize46 = '46px';
 
 export const fontLetterSpacing0 = '0em';
@@ -34,6 +36,8 @@ export const fontLetterSpacingMinus1 = '-0.01em';
 
 export const fontLetterSpacingMinus2 = '-0.02em';
 
+export const fontLetterSpacingMinus3 = '-0.03em';
+
 export const fontLetterSpacingMinus4 = '-0.04em';
 
 export const fontLineHeight100 = '100%';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.59",
+  "version": "0.1.61",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -59,16 +59,16 @@
     "@babel/preset-react": "^7.18.6",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
-    "@storybook/addon-a11y": "^7.0.8",
-    "@storybook/addon-essentials": "^7.0.8",
-    "@storybook/addon-mdx-gfm": "^7.0.8",
-    "@storybook/addon-storysource": "^7.0.12",
-    "@storybook/addons": "^7.0.8",
-    "@storybook/react": "^7.0.8",
-    "@storybook/react-webpack5": "^7.0.8",
-    "@storybook/test-runner": "^0.10.0",
+    "@storybook/addon-a11y": "^7.4.6",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-mdx-gfm": "^7.4.6",
+    "@storybook/addon-storysource": "^7.4.6",
+    "@storybook/addons": "^7.4.6",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-webpack5": "^7.4.6",
+    "@storybook/test-runner": "^0.13.0",
     "@storybook/testing-react": "^2.0.0",
-    "@storybook/theming": "^7.0.8",
+    "@storybook/theming": "^7.4.6",
     "@testing-library/react": "^11.2.7",
     "all-contributors-cli": "^6.20.0",
     "babel-eslint": "^10.1.0",
@@ -86,7 +86,7 @@
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-unused-imports": "^2.0.0",
     "flow-bin": "^0.184.0",
     "gulp": "^4.0.2",
@@ -105,7 +105,7 @@
     "rimraf": "^3.0.2",
     "simple-git": "^3.12.0",
     "standard-version": "^9.5.0",
-    "storybook": "^7.0.8",
+    "storybook": "^7.4.6",
     "storybook-css-modules": "^1.0.8",
     "storybook-vscode-component": "^1.0.9",
     "style-dictionary": "^3.7.1"