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

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.58](https://github.com/spaced-out/ui-design-system/compare/v0.1.57...v0.1.58) (2023-10-09)
+
+
+### Features
+
+* new typography components, added toggle label position prop ([869ed49](https://github.com/spaced-out/ui-design-system/commit/869ed49f8448b8a0630b2eebf0e2a65eb533160e))
+
+### [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';