@spaced-out/ui-design-system 0.1.56 → 0.1.58

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

@@ -123,6 +123,41 @@ export const JumboMedium: React$AbstractComponent<TextProps, HTMLSpanElement> =
     ),
   );
 
+export const JumboSmall: 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.jumboSmall, 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 TitleMedium: React$AbstractComponent<
   TextProps,
   HTMLHeadingElement,
@@ -419,6 +454,132 @@ export const ButtonTextExtraSmall: React$AbstractComponent<
   ),
 );
 
+export const ButtonTextMediumUnderline: 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.buttonTextMedium,
+        css.underline,
+        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 ButtonTextSmallUnderline: 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.buttonTextSmall,
+        css.underline,
+        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 ButtonTextExtraSmallUnderline: 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.buttonTextExtraSmall,
+        css.underline,
+        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 FormInputMedium: React$AbstractComponent<
   TextProps,
   HTMLParagraphElement,
@@ -604,6 +765,117 @@ export const BodySmall: React$AbstractComponent<
   ),
 );
 
+export const BodyLargeBold: React$AbstractComponent<
+  TextProps,
+  HTMLParagraphElement,
+> = React.forwardRef<TextProps, HTMLParagraphElement>(
+  (
+    {
+      color = TEXT_COLORS.primary,
+      children,
+      className,
+      highlightedTextClassName,
+      highlightString,
+      caseSensitiveHighlighting,
+      highlightWithBackground,
+      ...props
+    }: TextProps,
+    ref,
+  ): React.Node => (
+    <p
+      {...props}
+      className={classify(css.bodyLarge, css.bold, css[color], className)}
+      ref={ref}
+    >
+      {!!highlightString?.length && typeof children === 'string' ? (
+        <HighlightText
+          text={children}
+          highlight={highlightString}
+          caseSensitiveHighlighting={caseSensitiveHighlighting}
+          highlightClassName={highlightedTextClassName}
+          highlightWithBackground={highlightWithBackground}
+        />
+      ) : (
+        children
+      )}
+    </p>
+  ),
+);
+
+export const BodyMediumBold: React$AbstractComponent<
+  TextProps,
+  HTMLParagraphElement,
+> = React.forwardRef<TextProps, HTMLParagraphElement>(
+  (
+    {
+      color = TEXT_COLORS.primary,
+      children,
+      className,
+      highlightedTextClassName,
+      highlightString,
+      caseSensitiveHighlighting,
+      highlightWithBackground,
+      ...props
+    }: TextProps,
+    ref,
+  ): React.Node => (
+    <p
+      {...props}
+      className={classify(css.bodyMedium, css.bold, css[color], className)}
+      ref={ref}
+    >
+      {!!highlightString?.length && typeof children === 'string' ? (
+        <HighlightText
+          text={children}
+          highlight={highlightString}
+          caseSensitiveHighlighting={caseSensitiveHighlighting}
+          highlightClassName={highlightedTextClassName}
+          highlightWithBackground={highlightWithBackground}
+        />
+      ) : (
+        children
+      )}
+    </p>
+  ),
+);
+
+export const BodySmallBold: React$AbstractComponent<
+  TextProps,
+  HTMLParagraphElement,
+> = React.forwardRef<TextProps, HTMLParagraphElement>(
+  (
+    {
+      color = TEXT_COLORS.primary,
+      children,
+      className,
+      highlightedTextClassName,
+      highlightString,
+      caseSensitiveHighlighting,
+      highlightWithBackground,
+      ...props
+    }: TextProps,
+    ref,
+  ): React.Node => (
+    <p
+      {...props}
+      className={classify(css.bodySmall, css.bold, css[color], className)}
+      ref={ref}
+    >
+      {!!highlightString?.length && typeof children === 'string' ? (
+        <HighlightText
+          text={children}
+          highlight={highlightString}
+          caseSensitiveHighlighting={caseSensitiveHighlighting}
+          highlightClassName={highlightedTextClassName}
+          highlightWithBackground={highlightWithBackground}
+        />
+      ) : (
+        children
+      )}
+    </p>
+  ),
+);
+
 export const FormLabelMedium: React$AbstractComponent<
   TextProps,
   HTMLSpanElement,

package/lib/components/Text/index.js

@@ -9,36 +9,72 @@ Object.defineProperty(exports, "BodyLarge", {
     return _Text.BodyLarge;
   }
 });
+Object.defineProperty(exports, "BodyLargeBold", {
+  enumerable: true,
+  get: function () {
+    return _Text.BodyLargeBold;
+  }
+});
 Object.defineProperty(exports, "BodyMedium", {
   enumerable: true,
   get: function () {
     return _Text.BodyMedium;
   }
 });
+Object.defineProperty(exports, "BodyMediumBold", {
+  enumerable: true,
+  get: function () {
+    return _Text.BodyMediumBold;
+  }
+});
 Object.defineProperty(exports, "BodySmall", {
   enumerable: true,
   get: function () {
     return _Text.BodySmall;
   }
 });
+Object.defineProperty(exports, "BodySmallBold", {
+  enumerable: true,
+  get: function () {
+    return _Text.BodySmallBold;
+  }
+});
 Object.defineProperty(exports, "ButtonTextExtraSmall", {
   enumerable: true,
   get: function () {
     return _Text.ButtonTextExtraSmall;
   }
 });
+Object.defineProperty(exports, "ButtonTextExtraSmallUnderline", {
+  enumerable: true,
+  get: function () {
+    return _Text.ButtonTextExtraSmallUnderline;
+  }
+});
 Object.defineProperty(exports, "ButtonTextMedium", {
   enumerable: true,
   get: function () {
     return _Text.ButtonTextMedium;
   }
 });
+Object.defineProperty(exports, "ButtonTextMediumUnderline", {
+  enumerable: true,
+  get: function () {
+    return _Text.ButtonTextMediumUnderline;
+  }
+});
 Object.defineProperty(exports, "ButtonTextSmall", {
   enumerable: true,
   get: function () {
     return _Text.ButtonTextSmall;
   }
 });
+Object.defineProperty(exports, "ButtonTextSmallUnderline", {
+  enumerable: true,
+  get: function () {
+    return _Text.ButtonTextSmallUnderline;
+  }
+});
 Object.defineProperty(exports, "FormInputMedium", {
   enumerable: true,
   get: function () {
@@ -69,6 +105,12 @@ Object.defineProperty(exports, "JumboMedium", {
     return _Text.JumboMedium;
   }
 });
+Object.defineProperty(exports, "JumboSmall", {
+  enumerable: true,
+  get: function () {
+    return _Text.JumboSmall;
+  }
+});
 Object.defineProperty(exports, "SubTitleExtraSmall", {
   enumerable: true,
   get: function () {

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

@@ -4,16 +4,23 @@ export {TEXT_COLORS} from '../../types/typography';
 export type {TextProps} from './Text';
 export {
   BodyLarge,
+  BodyLargeBold,
   BodyMedium,
+  BodyMediumBold,
   BodySmall,
+  BodySmallBold,
   ButtonTextExtraSmall,
+  ButtonTextExtraSmallUnderline,
   ButtonTextMedium,
+  ButtonTextMediumUnderline,
   ButtonTextSmall,
+  ButtonTextSmallUnderline,
   FormInputMedium,
   FormInputSmall,
   FormLabelMedium,
   FormLabelSmall,
   JumboMedium,
+  JumboSmall,
   SubTitleExtraSmall,
   SubTitleLarge,
   SubTitleMedium,

package/lib/components/Toggle/Toggle.js

@@ -22,6 +22,7 @@ const Toggle = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
     focused,
     onChange,
     ariaLabel,
+    labelPosition = 'right',
     ...props
   } = _ref;
   const toggleInput = /*#__PURE__*/React.createRef();
@@ -48,7 +49,9 @@ const Toggle = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
       [_ToggleModule.default.disabled]: disabled
     }, classNames?.wrapper),
     onClick: onWrapClickHandler
-  }, /*#__PURE__*/React.createElement("span", {
+  }, labelPosition === 'left' && React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_ToggleModule.default.toggleLabel, classNames?.label)
+  }, children), /*#__PURE__*/React.createElement("span", {
     className: _ToggleModule.default.toggleWrap
   }, /*#__PURE__*/React.createElement("input", _extends({
     type: "checkbox",
@@ -63,7 +66,7 @@ const Toggle = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
     className: (0, _classify.default)(_ToggleModule.default.toggle, {
       [_ToggleModule.default.disabledButton]: disabled
     })
-  })), React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
+  })), labelPosition === 'right' && React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_ToggleModule.default.toggleLabel, classNames?.label)
   }, children));
 });

package/lib/components/Toggle/Toggle.js.flow

@@ -25,6 +25,7 @@ export type ToggleProps = {
   focused?: boolean,
   value?: string,
   ariaLabel?: string,
+  labelPosition?: 'left' | 'right',
 };
 
 export const Toggle: React$AbstractComponent<ToggleProps, HTMLInputElement> =
@@ -40,6 +41,7 @@ export const Toggle: React$AbstractComponent<ToggleProps, HTMLInputElement> =
         focused,
         onChange,
         ariaLabel,
+        labelPosition = 'right',
         ...props
       }: ToggleProps,
       forwardRef,
@@ -77,6 +79,11 @@ export const Toggle: React$AbstractComponent<ToggleProps, HTMLInputElement> =
           )}
           onClick={onWrapClickHandler}
         >
+          {labelPosition === 'left' && React.Children.count(children) > 0 && (
+            <div className={classify(css.toggleLabel, classNames?.label)}>
+              {children}
+            </div>
+          )}
           <span className={css.toggleWrap}>
             <input
               type="checkbox"
@@ -95,7 +102,7 @@ export const Toggle: React$AbstractComponent<ToggleProps, HTMLInputElement> =
               })}
             />
           </span>
-          {React.Children.count(children) > 0 && (
+          {labelPosition === 'right' && React.Children.count(children) > 0 && (
             <div className={classify(css.toggleLabel, classNames?.label)}>
               {children}
             </div>

package/lib/components/index.js

@@ -289,6 +289,17 @@ Object.keys(_Input).forEach(function (key) {
     }
   });
 });
+var _KPIBox = require("./KPIBox");
+Object.keys(_KPIBox).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _KPIBox[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _KPIBox[key];
+    }
+  });
+});
 var _LinearLoader = require("./LinearLoader");
 Object.keys(_LinearLoader).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -26,6 +26,7 @@ export * from './Icon';
 export * from './InContextAlert';
 export * from './InlineDropdown';
 export * from './Input';
+export * from './KPIBox';
 export * from './LinearLoader';
 export * from './Link';
 export * from './Menu';

package/lib/styles/index.css

@@ -200,6 +200,8 @@
 
 @value fontSize18: 18px;
 
+@value fontSize24: 24px;
+
 @value fontSize26: 26px;
 
 @value fontSize46: 46px;
@@ -222,6 +224,8 @@
 
 @value fontLineHeight120: 120%;
 
+@value fontLineHeight125: 125%;
+
 @value fontLineHeight130: 130%;
 
 @value fontLineHeight140: 140%;
@@ -386,6 +390,8 @@
 
 @value size240: 240px;
 
+@value size252: 252px;
+
 @value size260: 260px;
 
 @value size276: 276px;

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.size60 = exports.size580 = exports.size58 = 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.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.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = 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 = 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;
 
 const borderWidthNone = '0px';
 exports.borderWidthNone = borderWidthNone;
@@ -209,6 +209,8 @@ const fontSize16 = '16px';
 exports.fontSize16 = fontSize16;
 const fontSize18 = '18px';
 exports.fontSize18 = fontSize18;
+const fontSize24 = '24px';
+exports.fontSize24 = fontSize24;
 const fontSize26 = '26px';
 exports.fontSize26 = fontSize26;
 const fontSize46 = '46px';
@@ -231,6 +233,8 @@ const fontLineHeight100 = '100%';
 exports.fontLineHeight100 = fontLineHeight100;
 const fontLineHeight120 = '120%';
 exports.fontLineHeight120 = fontLineHeight120;
+const fontLineHeight125 = '125%';
+exports.fontLineHeight125 = fontLineHeight125;
 const fontLineHeight130 = '130%';
 exports.fontLineHeight130 = fontLineHeight130;
 const fontLineHeight140 = '140%';
@@ -395,6 +399,8 @@ const size228 = '228px';
 exports.size228 = size228;
 const size240 = '240px';
 exports.size240 = size240;
+const size252 = '252px';
+exports.size252 = size252;
 const size260 = '260px';
 exports.size260 = size260;
 const size276 = '276px';

package/lib/styles/index.js.flow

@@ -202,6 +202,8 @@ export const fontSize16 = '16px';
 
 export const fontSize18 = '18px';
 
+export const fontSize24 = '24px';
+
 export const fontSize26 = '26px';
 
 export const fontSize46 = '46px';
@@ -224,6 +226,8 @@ export const fontLineHeight100 = '100%';
 
 export const fontLineHeight120 = '120%';
 
+export const fontLineHeight125 = '125%';
+
 export const fontLineHeight130 = '130%';
 
 export const fontLineHeight140 = '140%';
@@ -388,6 +392,8 @@ export const size228 = '228px';
 
 export const size240 = '240px';
 
+export const size252 = '252px';
+
 export const size260 = '260px';
 
 export const size276 = '276px';

package/lib/styles/typography.module.css

@@ -18,6 +18,7 @@
 @value (
   fontFamilyCentra,
   fontSize46,
+  fontSize24,
   fontSize26,
   fontSize18,
   fontSize16,
@@ -28,6 +29,8 @@
   fontWeightBook,
   fontLineHeight100,
   fontLineHeight120,
+  fontLineHeight125,
+  fontLineHeight130,
   fontLineHeight140,
   fontLineHeight150,
   fontLineHeight170,
@@ -59,6 +62,10 @@
   align-items: center;
 }
 
+.underline {
+  text-decoration: underline;
+}
+
 .jumboMedium {
   composes: baseType;
   font-size: fontSize46;
@@ -66,6 +73,13 @@
   letter-spacing: fontLetterSpacingMinus4;
 }
 
+.jumboSmall {
+  composes: baseType;
+  font-size: fontSize24;
+  line-height: fontLineHeight125;
+  letter-spacing: fontLetterSpacingMinus2;
+}
+
 .titleMedium {
   composes: baseType;
   font-size: fontSize26;
@@ -145,7 +159,7 @@
   composes: baseType;
   font-size: fontSize12;
   font-weight: fontWeightBook;
-  line-height: fontLineHeight150;
+  line-height: fontLineHeight130;
   letter-spacing: fontLetterSpacing4;
 }
 
@@ -161,6 +175,10 @@
   line-height: fontLineHeight140;
 }
 
+.bold {
+  font-weight: fontWeightMedium;
+}
+
 .primary {
   color: colorTextPrimary;
 }

package/lib/styles/variables/_font.css

@@ -14,6 +14,8 @@
 
 @value fontSize18: 18px;
 
+@value fontSize24: 24px;
+
 @value fontSize26: 26px;
 
 @value fontSize46: 46px;
@@ -36,6 +38,8 @@
 
 @value fontLineHeight120: 120%;
 
+@value fontLineHeight125: 125%;
+
 @value fontLineHeight130: 130%;
 
 @value fontLineHeight140: 140%;