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

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.57](https://github.com/spaced-out/ui-design-system/compare/v0.1.56...v0.1.57) (2023-10-04)
+
+
+### Features
+
+* new KPIBox component, new JumboSmall typography component and new SemanticIcon component ([#145](https://github.com/spaced-out/ui-design-system/issues/145)) ([c433c3d](https://github.com/spaced-out/ui-design-system/commit/c433c3d48409461aa06d69dfe2d2485c7dd8d9df))
+
 ### [0.1.56](https://github.com/spaced-out/ui-design-system/compare/v0.1.55...v0.1.56) (2023-09-27)
 
 

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

@@ -29,6 +29,9 @@
       "18": {
         "value": "18px"
       },
+      "24": {
+        "value": "24px"
+      },
       "26": {
         "value": "26px"
       },
@@ -66,6 +69,9 @@
       "120%": {
         "value": "120%"
       },
+      "125%": {
+        "value": "125%"
+      },
       "130%": {
         "value": "130%"
       },

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

@@ -90,6 +90,9 @@
     "240": {
       "value": "240px"
     },
+    "252": {
+      "value": "252px"
+    },
     "260": {
       "value": "260px"
     },

package/lib/components/Banner/Banner.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Banner = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _common = require("../../types/common");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _InContextAlert = require("../InContextAlert");
 var _BannerModule = _interopRequireDefault(require("./Banner.module.css"));
@@ -26,11 +27,11 @@ const Banner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ref: ref,
     classNames: {
       wrapper: (0, _classify.default)(_BannerModule.default.bannerContainer, {
-        [_BannerModule.default.neutral]: semantic === _InContextAlert.ALERT_SEMANTIC.neutral,
-        [_BannerModule.default.success]: semantic === _InContextAlert.ALERT_SEMANTIC.success,
-        [_BannerModule.default.information]: semantic === _InContextAlert.ALERT_SEMANTIC.information,
-        [_BannerModule.default.warning]: semantic === _InContextAlert.ALERT_SEMANTIC.warning,
-        [_BannerModule.default.danger]: semantic === _InContextAlert.ALERT_SEMANTIC.danger,
+        [_BannerModule.default.neutral]: semantic === _common.ALERT_SEMANTIC.neutral,
+        [_BannerModule.default.success]: semantic === _common.ALERT_SEMANTIC.success,
+        [_BannerModule.default.information]: semantic === _common.ALERT_SEMANTIC.information,
+        [_BannerModule.default.warning]: semantic === _common.ALERT_SEMANTIC.warning,
+        [_BannerModule.default.danger]: semantic === _common.ALERT_SEMANTIC.danger,
         [_BannerModule.default.topAligned]: alignment === 'top',
         [_BannerModule.default.bottomAligned]: alignment === 'bottom'
       }, classNames?.wrapper),

package/lib/components/Banner/Banner.js.flow

@@ -2,9 +2,10 @@
 
 import * as React from 'react';
 
+import {ALERT_SEMANTIC} from '../../types/common';
 import classify from '../../utils/classify';
 import type {InContextAlertProps} from '../InContextAlert';
-import {ALERT_SEMANTIC, InContextAlert} from '../InContextAlert';
+import {InContextAlert} from '../InContextAlert';
 
 import css from './Banner.module.css';
 

package/lib/components/Icon/SemanticIcon.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SemanticIcon = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _typography = require("../../types/typography");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Icon = require("./Icon");
+var _SemanticIconModule = _interopRequireDefault(require("./SemanticIcon.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); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const SemanticIcon = _ref => {
+  let {
+    semantic = 'neutral',
+    type = 'solid',
+    classNames,
+    ...iconProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !!iconProps.name && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_SemanticIconModule.default.iconContainer, _SemanticIconModule.default[semantic], classNames?.wrapper)
+  }, /*#__PURE__*/React.createElement(_Icon.Icon, _extends({}, iconProps, {
+    color: _typography.TEXT_COLORS[semantic],
+    type: type
+  }))));
+};
+exports.SemanticIcon = SemanticIcon;

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

@@ -0,0 +1,42 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {AlertSemanticType} from '../../types/common';
+import {TEXT_COLORS} from '../../types/typography';
+import classify from '../../utils/classify';
+
+import type {IconProps} from './Icon';
+import {Icon} from './Icon';
+
+import css from './SemanticIcon.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string, icon?: string}>;
+
+export type SemanticIconProps = {
+  ...IconProps,
+  classNames?: ClassNames,
+  semantic?: AlertSemanticType,
+};
+
+export const SemanticIcon = ({
+  semantic = 'neutral',
+  type = 'solid',
+  classNames,
+  ...iconProps
+}: SemanticIconProps): React.Node => (
+  <>
+    {!!iconProps.name && (
+      <div
+        className={classify(
+          css.iconContainer,
+          css[semantic],
+          classNames?.wrapper,
+        )}
+      >
+        <Icon {...iconProps} color={TEXT_COLORS[semantic]} type={type} />
+      </div>
+    )}
+  </>
+);

package/lib/components/Icon/SemanticIcon.module.css

@@ -0,0 +1,47 @@
+@value (
+  colorNeutralLightest,
+  colorSuccessLightest,
+  colorInformationLightest,
+  colorWarningLightest,
+  colorDangerLightest
+) from '../../styles/variables/_color.css';
+
+@value (
+  size60,
+  size24
+) from '../../styles/variables/_size.css';
+
+@value (
+  borderRadiusMedium
+) from '../../styles/variables/_border.css';
+
+.iconContainer {
+  display: flex;
+  width: fit-content;
+  min-width: size60;
+  min-height: size60;
+  justify-content: center;
+  align-items: center;
+  border-radius: borderRadiusMedium;
+  background-color: colorNeutralLightest;
+}
+
+.neutral {
+  background-color: colorNeutralLightest;
+}
+
+.success {
+  background-color: colorSuccessLightest;
+}
+
+.information {
+  background-color: colorInformationLightest;
+}
+
+.warning {
+  background-color: colorWarningLightest;
+}
+
+.danger {
+  background-color: colorDangerLightest;
+}

package/lib/components/Icon/index.js

@@ -21,5 +21,12 @@ Object.defineProperty(exports, "Icon", {
     return _Icon.Icon;
   }
 });
+Object.defineProperty(exports, "SemanticIcon", {
+  enumerable: true,
+  get: function () {
+    return _SemanticIcon.SemanticIcon;
+  }
+});
 var _ClickableIcon = require("./ClickableIcon");
-var _Icon = require("./Icon");
+var _Icon = require("./Icon");
+var _SemanticIcon = require("./SemanticIcon");

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

@@ -4,3 +4,5 @@ export type {CloseIconProps} from './ClickableIcon';
 export {ClickableIcon, CloseIcon} from './ClickableIcon';
 export type {IconProps, IconSize, IconType} from './Icon';
 export {Icon} from './Icon';
+export type {SemanticIconProps} from './SemanticIcon';
+export {SemanticIcon} from './SemanticIcon';

package/lib/components/InContextAlert/InContextAlert.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InContextAlert = exports.ALERT_SEMANTIC = void 0;
+exports.InContextAlert = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _common = require("../../types/common");
 var _typography = require("../../types/typography");
 var _classify = require("../../utils/classify");
 var _Icon = require("../Icon");
@@ -16,14 +17,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const ALERT_SEMANTIC = Object.freeze({
-  neutral: 'neutral',
-  success: 'success',
-  information: 'information',
-  warning: 'warning',
-  danger: 'danger'
-});
-exports.ALERT_SEMANTIC = ALERT_SEMANTIC;
 const AlertIcon = _ref => {
   let {
     semantic,
@@ -31,35 +24,35 @@ const AlertIcon = _ref => {
     leftIconType
   } = _ref;
   switch (semantic) {
-    case ALERT_SEMANTIC.neutral:
+    case _common.ALERT_SEMANTIC.neutral:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
         color: _typography.TEXT_COLORS.neutral,
         name: leftIconName ? leftIconName : 'face-smile',
         size: "small",
         type: leftIconType
       });
-    case ALERT_SEMANTIC.success:
+    case _common.ALERT_SEMANTIC.success:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
         name: leftIconName ? leftIconName : 'circle-check',
         size: "small",
         color: _typography.TEXT_COLORS.success,
         type: leftIconType
       });
-    case ALERT_SEMANTIC.information:
+    case _common.ALERT_SEMANTIC.information:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
         name: leftIconName ? leftIconName : 'circle-info',
         size: "small",
         color: _typography.TEXT_COLORS.information,
         type: leftIconType
       });
-    case ALERT_SEMANTIC.warning:
+    case _common.ALERT_SEMANTIC.warning:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
         name: leftIconName ? leftIconName : 'circle-exclamation',
         size: "small",
         color: _typography.TEXT_COLORS.warning,
         type: leftIconType
       });
-    case ALERT_SEMANTIC.danger:
+    case _common.ALERT_SEMANTIC.danger:
       return /*#__PURE__*/React.createElement(_Icon.Icon, {
         name: leftIconName ? leftIconName : 'shield-exclamation',
         size: "small",
@@ -78,7 +71,7 @@ const AlertIcon = _ref => {
 const InContextAlert = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     classNames,
-    semantic = ALERT_SEMANTIC.neutral,
+    semantic = _common.ALERT_SEMANTIC.neutral,
     dismissable,
     children,
     selfDismiss = false,
@@ -95,11 +88,11 @@ const InContextAlert = /*#__PURE__*/React.forwardRef((props, ref) => {
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, !dismissed && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.classify)(_InContextAlertModule.default.alertContainer, {
-      [_InContextAlertModule.default.neutral]: semantic === ALERT_SEMANTIC.neutral,
-      [_InContextAlertModule.default.success]: semantic === ALERT_SEMANTIC.success,
-      [_InContextAlertModule.default.information]: semantic === ALERT_SEMANTIC.information,
-      [_InContextAlertModule.default.warning]: semantic === ALERT_SEMANTIC.warning,
-      [_InContextAlertModule.default.danger]: semantic === ALERT_SEMANTIC.danger
+      [_InContextAlertModule.default.neutral]: semantic === _common.ALERT_SEMANTIC.neutral,
+      [_InContextAlertModule.default.success]: semantic === _common.ALERT_SEMANTIC.success,
+      [_InContextAlertModule.default.information]: semantic === _common.ALERT_SEMANTIC.information,
+      [_InContextAlertModule.default.warning]: semantic === _common.ALERT_SEMANTIC.warning,
+      [_InContextAlertModule.default.danger]: semantic === _common.ALERT_SEMANTIC.danger
     }, classNames?.wrapper),
     ref: ref
   }, /*#__PURE__*/React.createElement(AlertIcon, {

package/lib/components/InContextAlert/InContextAlert.js.flow

@@ -2,6 +2,8 @@
 
 import * as React from 'react';
 
+import type {AlertSemanticType} from '../../types/common';
+import {ALERT_SEMANTIC} from '../../types/common';
 import {TEXT_COLORS} from '../../types/typography';
 import {classify} from '../../utils/classify';
 import type {IconType} from '../Icon';
@@ -13,20 +15,11 @@ import {Truncate} from '../Truncate';
 import css from './InContextAlert.module.css';
 
 
-export const ALERT_SEMANTIC = Object.freeze({
-  neutral: 'neutral',
-  success: 'success',
-  information: 'information',
-  warning: 'warning',
-  danger: 'danger',
-});
-
 type ClassNames = $ReadOnly<{
   wrapper?: string,
   alertText?: string,
   actionContainer?: string,
 }>;
-export type AlertSemanticType = $Values<typeof ALERT_SEMANTIC>;
 
 type InContextAlertBaseProps = {
   classNames?: ClassNames,

package/lib/components/KPIBox/KPIBox.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KPIBox = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Icon = require("../Icon");
+var _KPIBoxModule = _interopRequireDefault(require("./KPIBox.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); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const KPIBox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    classNames,
+    semantic = 'neutral',
+    topContent,
+    middleContent,
+    bottomContent,
+    iconName,
+    iconSize,
+    iconType = 'solid',
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    ref: ref,
+    "data-testid": "KPIBox",
+    className: (0, _classify.default)(_KPIBoxModule.default.wrapper, classNames?.wrapper)
+  }), !!iconName && /*#__PURE__*/React.createElement(_Icon.SemanticIcon, {
+    semantic: semantic,
+    name: iconName,
+    size: iconSize,
+    type: iconType
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _KPIBoxModule.default.textContainer
+  }, !!topContent && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_KPIBoxModule.default.topFoldContent, classNames?.topFoldContent)
+  }, topContent), !!middleContent && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_KPIBoxModule.default.middleFoldContent, classNames?.middleFoldContent)
+  }, middleContent), !!bottomContent && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_KPIBoxModule.default.bottomFoldContent, classNames?.bottomFoldContent)
+  }, bottomContent)));
+});
+exports.KPIBox = KPIBox;

package/lib/components/KPIBox/KPIBox.js.flow

@@ -0,0 +1,97 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {AlertSemanticType} from '../../types/common';
+import classify from '../../utils/classify';
+import type {IconSize, IconType} from '../Icon';
+import {SemanticIcon} from '../Icon';
+
+import css from './KPIBox.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  topFoldContent?: string,
+  middleFoldContent?: string,
+  bottomFoldContent?: string,
+}>;
+
+export type KPIBoxProps = {
+  classNames?: ClassNames,
+  semantic: AlertSemanticType,
+  topContent?: React.Node,
+  middleContent?: React.Node,
+  bottomContent?: React.Node,
+  iconName?: string,
+  iconSize?: IconSize,
+  iconType?: IconType,
+  ...
+};
+
+export const KPIBox: React$AbstractComponent<KPIBoxProps, HTMLDivElement> =
+  React.forwardRef<KPIBoxProps, HTMLDivElement>(
+    (
+      {
+        classNames,
+        semantic = 'neutral',
+        topContent,
+        middleContent,
+        bottomContent,
+        iconName,
+        iconSize,
+        iconType = 'solid',
+        ...props
+      }: KPIBoxProps,
+      ref,
+    ) => (
+      <div
+        {...props}
+        ref={ref}
+        data-testid="KPIBox"
+        className={classify(css.wrapper, classNames?.wrapper)}
+      >
+        {!!iconName && (
+          <SemanticIcon
+            semantic={semantic}
+            name={iconName}
+            size={iconSize}
+            type={iconType}
+          />
+        )}
+
+        <div className={css.textContainer}>
+          {!!topContent && (
+            <div
+              className={classify(
+                css.topFoldContent,
+                classNames?.topFoldContent,
+              )}
+            >
+              {topContent}
+            </div>
+          )}
+          {!!middleContent && (
+            <div
+              className={classify(
+                css.middleFoldContent,
+                classNames?.middleFoldContent,
+              )}
+            >
+              {middleContent}
+            </div>
+          )}
+          {!!bottomContent && (
+            <div
+              className={classify(
+                css.bottomFoldContent,
+                classNames?.bottomFoldContent,
+              )}
+            >
+              {bottomContent}
+            </div>
+          )}
+        </div>
+      </div>
+    ),
+  );

package/lib/components/KPIBox/KPIBox.module.css

@@ -0,0 +1,47 @@
+@value (
+  colorBackgroundTertiary,
+  colorTextSecondary,
+  colorTextPrimary
+) from '../../styles/variables/_color.css';
+@value (spaceXXSmall, spaceSmall, spaceLarge, spaceMedium) from '../../styles/variables/_space.css';
+@value (borderRadiusMedium) from '../../styles/variables/_border.css';
+@value (size60, size140, size252) from '../../styles/variables/_size.css';
+
+.wrapper {
+  display: flex;
+  composes: borderPrimary from '../../styles/border.module.css';
+  min-width: size252;
+  height: fit-content;
+  align-items: center;
+  gap: spaceSmall;
+  background-color: colorBackgroundTertiary;
+  border-radius: borderRadiusMedium;
+  padding: spaceLarge spaceMedium;
+}
+
+.textContainer {
+  display: flex;
+  flex-direction: column;
+  gap: spaceXXSmall;
+}
+
+.topFoldContent,
+.middleFoldContent,
+.bottomFoldContent {
+  display: flex;
+}
+
+.topFoldContent {
+  composes: formLabelSmall from '../../styles/typography.module.css';
+  color: colorTextSecondary;
+}
+
+.middleFoldContent {
+  composes: jumboSmall from '../../styles/typography.module.css';
+  color: colorTextPrimary;
+}
+
+.bottomFoldContent {
+  composes: bodySmall from '../../styles/typography.module.css';
+  color: colorTextSecondary;
+}

package/lib/components/KPIBox/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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];
+    }
+  });
+});

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

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './KPIBox';

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.JumboMedium = exports.FormLabelSmall = exports.FormLabelMedium = exports.FormInputSmall = exports.FormInputMedium = exports.ButtonTextSmall = exports.ButtonTextMedium = exports.ButtonTextExtraSmall = exports.BodySmall = exports.BodyMedium = exports.BodyLarge = void 0;
+exports.TitleMedium = exports.SubTitleSmall = exports.SubTitleMedium = exports.SubTitleLarge = exports.SubTitleExtraSmall = exports.JumboSmall = exports.JumboMedium = exports.FormLabelSmall = exports.FormLabelMedium = exports.FormInputSmall = exports.FormInputMedium = exports.ButtonTextSmall = exports.ButtonTextMedium = exports.ButtonTextExtraSmall = exports.BodySmall = exports.BodyMedium = exports.BodyLarge = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _typography = require("../../types/typography");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
@@ -62,7 +62,7 @@ const JumboMedium = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   }) : children);
 });
 exports.JumboMedium = JumboMedium;
-const TitleMedium = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+const JumboSmall = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -73,6 +73,29 @@ const TitleMedium = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     highlightWithBackground,
     ...props
   } = _ref3;
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: (0, _classify.default)(_typographyModule.default.jumboSmall, _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.JumboSmall = JumboSmall;
+const TitleMedium = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
+    ...props
+  } = _ref4;
   return /*#__PURE__*/React.createElement("h1", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.titleMedium, _typographyModule.default[color], className),
     ref: ref
@@ -85,7 +108,7 @@ const TitleMedium = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   }) : children);
 });
 exports.TitleMedium = TitleMedium;
-const SubTitleLarge = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+const SubTitleLarge = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -95,7 +118,7 @@ const SubTitleLarge = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref4;
+  } = _ref5;
   return /*#__PURE__*/React.createElement("h2", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.subTitleLarge, _typographyModule.default[color], className),
     ref: ref
@@ -108,7 +131,7 @@ const SubTitleLarge = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   }) : children);
 });
 exports.SubTitleLarge = SubTitleLarge;
-const SubTitleMedium = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+const SubTitleMedium = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -118,7 +141,7 @@ const SubTitleMedium = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref5;
+  } = _ref6;
   return /*#__PURE__*/React.createElement("h3", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.subTitleMedium, _typographyModule.default[color], className),
     ref: ref
@@ -131,7 +154,7 @@ const SubTitleMedium = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   }) : children);
 });
 exports.SubTitleMedium = SubTitleMedium;
-const SubTitleSmall = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+const SubTitleSmall = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -141,7 +164,7 @@ const SubTitleSmall = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref6;
+  } = _ref7;
   return /*#__PURE__*/React.createElement("h4", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.subTitleSmall, _typographyModule.default[color], className),
     ref: ref
@@ -154,7 +177,7 @@ const SubTitleSmall = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   }) : children);
 });
 exports.SubTitleSmall = SubTitleSmall;
-const SubTitleExtraSmall = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+const SubTitleExtraSmall = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -164,7 +187,7 @@ const SubTitleExtraSmall = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref7;
+  } = _ref8;
   return /*#__PURE__*/React.createElement("h5", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.subTitleExtraSmall, _typographyModule.default[color], className),
     ref: ref
@@ -177,7 +200,7 @@ const SubTitleExtraSmall = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   }) : children);
 });
 exports.SubTitleExtraSmall = SubTitleExtraSmall;
-const ButtonTextMedium = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
+const ButtonTextMedium = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -187,7 +210,7 @@ const ButtonTextMedium = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref8;
+  } = _ref9;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextMedium, _typographyModule.default[color], className),
     ref: ref
@@ -200,7 +223,7 @@ const ButtonTextMedium = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   }) : children);
 });
 exports.ButtonTextMedium = ButtonTextMedium;
-const ButtonTextSmall = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
+const ButtonTextSmall = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -210,7 +233,7 @@ const ButtonTextSmall = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref9;
+  } = _ref10;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextSmall, _typographyModule.default[color], className),
     ref: ref
@@ -223,7 +246,7 @@ const ButtonTextSmall = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
   }) : children);
 });
 exports.ButtonTextSmall = ButtonTextSmall;
-const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
+const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -233,7 +256,7 @@ const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref10;
+  } = _ref11;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default[color], className),
     ref: ref
@@ -246,7 +269,7 @@ const ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
   }) : children);
 });
 exports.ButtonTextExtraSmall = ButtonTextExtraSmall;
-const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
+const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -256,7 +279,7 @@ const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref11;
+  } = _ref12;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formInputMedium, _typographyModule.default[color], className),
     ref: ref
@@ -269,7 +292,7 @@ const FormInputMedium = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
   }) : children);
 });
 exports.FormInputMedium = FormInputMedium;
-const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
+const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -279,7 +302,7 @@ const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref12;
+  } = _ref13;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formInputSmall, _typographyModule.default[color], className),
     ref: ref
@@ -292,7 +315,7 @@ const FormInputSmall = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
   }) : children);
 });
 exports.FormInputSmall = FormInputSmall;
-const BodyLarge = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
+const BodyLarge = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -302,7 +325,7 @@ const BodyLarge = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref13;
+  } = _ref14;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default[color], className),
     ref: ref
@@ -315,7 +338,7 @@ const BodyLarge = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
   }) : children);
 });
 exports.BodyLarge = BodyLarge;
-const BodyMedium = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
+const BodyMedium = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -325,7 +348,7 @@ const BodyMedium = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref14;
+  } = _ref15;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default[color], className),
     ref: ref
@@ -338,7 +361,7 @@ const BodyMedium = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
   }) : children);
 });
 exports.BodyMedium = BodyMedium;
-const BodySmall = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
+const BodySmall = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -348,7 +371,7 @@ const BodySmall = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref15;
+  } = _ref16;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default[color], className),
     ref: ref
@@ -361,7 +384,7 @@ const BodySmall = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
   }) : children);
 });
 exports.BodySmall = BodySmall;
-const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
+const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -371,7 +394,7 @@ const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref16;
+  } = _ref17;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formLabelMedium, _typographyModule.default[color], className),
     ref: ref
@@ -384,7 +407,7 @@ const FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
   }) : children);
 });
 exports.FormLabelMedium = FormLabelMedium;
-const FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
+const FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
@@ -394,7 +417,7 @@ const FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
     caseSensitiveHighlighting,
     highlightWithBackground,
     ...props
-  } = _ref17;
+  } = _ref18;
   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

@@ -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,

package/lib/components/Text/index.js

@@ -69,6 +69,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

@@ -14,6 +14,7 @@ export {
   FormLabelMedium,
   FormLabelSmall,
   JumboMedium,
+  JumboSmall,
   SubTitleExtraSmall,
   SubTitleLarge,
   SubTitleMedium,

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,7 @@
   fontWeightBook,
   fontLineHeight100,
   fontLineHeight120,
+  fontLineHeight125,
   fontLineHeight140,
   fontLineHeight150,
   fontLineHeight170,
@@ -66,6 +68,13 @@
   letter-spacing: fontLetterSpacingMinus4;
 }
 
+.jumboSmall {
+  composes: baseType;
+  font-size: fontSize24;
+  line-height: fontLineHeight125;
+  letter-spacing: fontLetterSpacingMinus2;
+}
+
 .titleMedium {
   composes: baseType;
   font-size: fontSize26;

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%;

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.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 = 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.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;
 
 const fontFamilyCentra = '"Centra No2"';
 exports.fontFamilyCentra = fontFamilyCentra;
@@ -21,6 +21,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';
@@ -43,6 +45,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%';

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

@@ -16,6 +16,8 @@ export const fontSize16 = '16px';
 
 export const fontSize18 = '18px';
 
+export const fontSize24 = '24px';
+
 export const fontSize26 = '26px';
 
 export const fontSize46 = '46px';
@@ -38,6 +40,8 @@ export const fontLineHeight100 = '100%';
 
 export const fontLineHeight120 = '120%';
 
+export const fontLineHeight125 = '125%';
+
 export const fontLineHeight130 = '130%';
 
 export const fontLineHeight140 = '140%';

package/lib/styles/variables/_size.css

@@ -58,6 +58,8 @@
 
 @value size240: 240px;
 
+@value size252: 252px;
+
 @value size260: 260px;
 
 @value size276: 276px;

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.size8 = exports.size720 = exports.size70 = exports.size640 = 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 = void 0;
+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 = 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 = void 0;
 
 const size2 = '2px';
 exports.size2 = size2;
@@ -65,6 +65,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/variables/_size.js.flow

@@ -60,6 +60,8 @@ export const size228 = '228px';
 
 export const size240 = '240px';
 
+export const size252 = '252px';
+
 export const size260 = '260px';
 
 export const size276 = '276px';

package/lib/types/common.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ALERT_SEMANTIC = void 0;
+
+const ALERT_SEMANTIC = Object.freeze({
+  neutral: 'neutral',
+  success: 'success',
+  information: 'information',
+  warning: 'warning',
+  danger: 'danger'
+});
+exports.ALERT_SEMANTIC = ALERT_SEMANTIC;

package/lib/types/common.js.flow

@@ -1,3 +1,13 @@
 // @flow strict
 
 export type GroupAlign = 'vertical' | 'horizontal-fixed' | 'horizontal-fluid';
+
+export const ALERT_SEMANTIC = Object.freeze({
+  neutral: 'neutral',
+  success: 'success',
+  information: 'information',
+  warning: 'warning',
+  danger: 'danger',
+});
+
+export type AlertSemanticType = $Values<typeof ALERT_SEMANTIC>;

package/package.json

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