@spaced-out/ui-design-system 0.0.7 → 0.0.9

package/lib/components/TabList/TabList.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabList = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _size = require("../../styles/variables/_size");
+var _space = require("../../styles/variables/_space");
+var _classify = require("../../utils/classify");
+var _TabDropdown = require("./TabDropdown.js");
+var _TabListModule = _interopRequireDefault(require("./TabList.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; }
+
+const TabList = _ref => {
+  let {
+    classNames,
+    children,
+    size,
+    onSelect,
+    selectedTab,
+    menuWidth
+  } = _ref;
+  const ref = React.useRef(null);
+  const [containerWidth, setContainerWidth] = React.useState(0);
+  const childrenWithProps = () => {
+    const childrenArray = React.Children.toArray(children);
+    const totalChildCount = childrenArray.length;
+    let tabListWidth = 0;
+    const menuOptions = [];
+    let nodes = [];
+    const tabListNodes = [];
+    for (let i = 0; i < totalChildCount; i++) {
+      const child = childrenArray[i];
+      const {
+        width = _size.size100,
+        tabId,
+        label,
+        disabled,
+        iconName,
+        iconType
+      } = child.props;
+      const widthInt = parseInt(width);
+      tabListWidth = tabListWidth + widthInt;
+      if (tabListWidth < containerWidth || i === 0) {
+        const childOnSelect = params => {
+          onSelect && onSelect(params); // call the tab level onSelect
+        };
+
+        tabListNodes.push( /*#__PURE__*/React.cloneElement(child, {
+          size,
+          onSelect: childOnSelect,
+          selectedTab
+        }));
+      } else {
+        menuOptions.push({
+          key: tabId,
+          label,
+          disabled,
+          iconLeft: iconName,
+          iconLeftType: iconType
+        });
+      }
+    }
+    const menuOnSelect = _ref2 => {
+      let {
+        key,
+        label
+      } = _ref2;
+      onSelect && onSelect({
+        tabId: key,
+        label
+      });
+    };
+    const selectedOption = {
+      key: selectedTab?.tabId,
+      label: selectedTab?.label || ''
+    };
+    const isMenuOptionSelected = (() => {
+      for (let i = 0; i < menuOptions.length; i++) {
+        if (menuOptions[i].key === selectedTab?.tabId) {
+          return true;
+        }
+      }
+      return false;
+    })();
+    const tabDropDownNode = menuOptions.length ? /*#__PURE__*/React.createElement(_TabDropdown.TabDropdown, {
+      key: 'tabDropdown' + menuOptions.length,
+      size: size,
+      onOptionSelect: menuOnSelect,
+      props: {
+        tab: {
+          label: '...',
+          tabId: 'tab-dropdown',
+          selectedTab: {
+            tabId: isMenuOptionSelected ? 'tab-dropdown' : ''
+          }
+        },
+        menu: {
+          isFluid: false,
+          menuDisabled: false,
+          options: menuOptions,
+          selectedOption,
+          width: menuWidth
+        }
+      }
+    }) : null;
+    nodes = [...tabListNodes, tabDropDownNode];
+    return nodes;
+  };
+  React.useLayoutEffect(() => {
+    if (ref.current && ref.current.offsetWidth) {
+      const availableContainerWidth = ref.current.offsetWidth - (parseInt(_size.size36) + parseInt(_space.spaceMedium));
+      setContainerWidth(availableContainerWidth);
+    }
+  }, [ref.current]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": "Tabs",
+    className: (0, _classify.classify)(_TabListModule.default.tabsContainer, {
+      [_TabListModule.default.mediumSize]: size === 'medium',
+      [_TabListModule.default.smallSize]: size === 'small'
+    }, classNames?.wrapper)
+  }, containerWidth ? childrenWithProps() : null);
+};
+exports.TabList = TabList;

package/lib/components/TabList/TabList.js.flow

@@ -0,0 +1,147 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {size36, size100} from '../../styles/variables/_size';
+import {spaceMedium} from '../../styles/variables/_space';
+import {classify} from '../../utils/classify';
+
+import {TabDropdown} from './TabDropdown.js';
+
+import css from './TabList.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type TabsProps = {
+  classNames?: ClassNames,
+  onSelect?: ({tabId?: string, label?: string}) => mixed,
+  children?: React.Node,
+  size?: 'medium',
+  selectedTab?: {tabId?: string, label?: string},
+  menuWidth?: string,
+};
+
+export const TabList = ({
+  classNames,
+  children,
+  size,
+  onSelect,
+  selectedTab,
+  menuWidth,
+}: TabsProps): React.Node => {
+  const ref = React.useRef(null);
+
+  const [containerWidth, setContainerWidth] = React.useState(0);
+
+  const childrenWithProps = () => {
+    const childrenArray = React.Children.toArray(children);
+    const totalChildCount = childrenArray.length;
+    let tabListWidth = 0;
+    const menuOptions = [];
+
+    let nodes: React.Node[] = [];
+    const tabListNodes: React.Node[] = [];
+    for (let i = 0; i < totalChildCount; i++) {
+      const child = childrenArray[i];
+      const {
+        width = size100,
+        tabId,
+        label,
+        disabled,
+        iconName,
+        iconType,
+      } = child.props;
+      const widthInt = parseInt(width);
+      tabListWidth = tabListWidth + widthInt;
+
+      if (tabListWidth < containerWidth || i === 0) {
+        const childOnSelect = (params) => {
+          onSelect && onSelect(params); // call the tab level onSelect
+        };
+        tabListNodes.push(
+          React.cloneElement(child, {
+            size,
+            onSelect: childOnSelect,
+            selectedTab,
+          }),
+        );
+      } else {
+        menuOptions.push({
+          key: tabId,
+          label,
+          disabled,
+          iconLeft: iconName,
+          iconLeftType: iconType,
+        });
+      }
+    }
+
+    const menuOnSelect = ({key, label}) => {
+      onSelect && onSelect({tabId: key, label});
+    };
+    const selectedOption = {
+      key: selectedTab?.tabId,
+      label: selectedTab?.label || '',
+    };
+
+    const isMenuOptionSelected = (() => {
+      for (let i = 0; i < menuOptions.length; i++) {
+        if (menuOptions[i].key === selectedTab?.tabId) {
+          return true;
+        }
+      }
+      return false;
+    })();
+
+    const tabDropDownNode = menuOptions.length ? (
+      <TabDropdown
+        key={'tabDropdown' + menuOptions.length}
+        size={size}
+        onOptionSelect={menuOnSelect}
+        props={{
+          tab: {
+            label: '...',
+            tabId: 'tab-dropdown',
+            selectedTab: {tabId: isMenuOptionSelected ? 'tab-dropdown' : ''},
+          },
+          menu: {
+            isFluid: false,
+            menuDisabled: false,
+            options: menuOptions,
+            selectedOption,
+            width: menuWidth,
+          },
+        }}
+      />
+    ) : null;
+
+    nodes = [...tabListNodes, tabDropDownNode];
+    return nodes;
+  };
+
+  React.useLayoutEffect(() => {
+    if (ref.current && ref.current.offsetWidth) {
+      const availableContainerWidth =
+        ref.current.offsetWidth - (parseInt(size36) + parseInt(spaceMedium));
+      setContainerWidth(availableContainerWidth);
+    }
+  }, [ref.current]);
+
+  return (
+    <div
+      ref={ref}
+      data-testid="Tabs"
+      className={classify(
+        css.tabsContainer,
+        {
+          [css.mediumSize]: size === 'medium',
+          [css.smallSize]: size === 'small',
+        },
+        classNames?.wrapper,
+      )}
+    >
+      {containerWidth ? childrenWithProps() : null}
+    </div>
+  );
+};

package/lib/components/TabList/TabList.module.css

@@ -0,0 +1,11 @@
+@value (colorFillPrimary) from '../../styles/variables/_color.css';
+@value (spaceMedium) from '../../styles/variables/_space.css';
+
+@value ( sizeFluid) from '../../styles/variables/_size.css';
+
+.tabsContainer {
+  display: flex;
+  flex-direction: row;
+  gap: spaceMedium;
+  width: sizeFluid;
+}

package/lib/components/TabList/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _TabList = require("./TabList");
+Object.keys(_TabList).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TabList[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TabList[key];
+    }
+  });
+});

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

@@ -0,0 +1,4 @@
+// @flow strict
+
+export type {TabsProps} from './TabList';
+export * from './TabList';

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.BodySmall = exports.BodyMedium = exports.BodyLarge = void 0;
+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;
 var React = _interopRequireWildcard(require("react"));
 var _typography = require("../../types/typography");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
@@ -108,85 +108,97 @@ const ButtonTextSmall = _ref8 => {
   }), children);
 };
 exports.ButtonTextSmall = ButtonTextSmall;
-const FormInputMedium = _ref9 => {
+const ButtonTextExtraSmall = _ref9 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
     ...props
   } = _ref9;
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default[color], className)
+  }), children);
+};
+exports.ButtonTextExtraSmall = ButtonTextExtraSmall;
+const FormInputMedium = _ref10 => {
+  let {
+    color = _typography.TEXT_COLORS.primary,
+    children,
+    className,
+    ...props
+  } = _ref10;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formInputMedium, _typographyModule.default[color], className)
   }), children);
 };
 exports.FormInputMedium = FormInputMedium;
-const FormInputSmall = _ref10 => {
+const FormInputSmall = _ref11 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
     ...props
-  } = _ref10;
+  } = _ref11;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formInputSmall, _typographyModule.default[color], className)
   }), children);
 };
 exports.FormInputSmall = FormInputSmall;
-const BodyLarge = _ref11 => {
+const BodyLarge = _ref12 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
     ...props
-  } = _ref11;
+  } = _ref12;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default[color], className)
   }), children);
 };
 exports.BodyLarge = BodyLarge;
-const BodyMedium = _ref12 => {
+const BodyMedium = _ref13 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
     ...props
-  } = _ref12;
+  } = _ref13;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default[color], className)
   }), children);
 };
 exports.BodyMedium = BodyMedium;
-const BodySmall = _ref13 => {
+const BodySmall = _ref14 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
     ...props
-  } = _ref13;
+  } = _ref14;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default[color], className)
   }), children);
 };
 exports.BodySmall = BodySmall;
-const FormLabelMedium = _ref14 => {
+const FormLabelMedium = _ref15 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
     ...props
-  } = _ref14;
+  } = _ref15;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formLabelMedium, _typographyModule.default[color], className)
   }), children);
 };
 exports.FormLabelMedium = FormLabelMedium;
-const FormLabelSmall = _ref15 => {
+const FormLabelSmall = _ref16 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
     ...props
-  } = _ref15;
+  } = _ref16;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formLabelSmall, _typographyModule.default[color], className)
   }), children);

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

@@ -116,6 +116,20 @@ export const ButtonTextSmall = ({
   </span>
 );
 
+export const ButtonTextExtraSmall = ({
+  color = TEXT_COLORS.primary,
+  children,
+  className,
+  ...props
+}: TextProps): React.Node => (
+  <span
+    {...props}
+    className={classify(css.buttonTextExtraSmall, css[color], className)}
+  >
+    {children}
+  </span>
+);
+
 export const FormInputMedium = ({
   color = TEXT_COLORS.primary,
   children,

package/lib/components/Text/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "BodySmall", {
     return _Text.BodySmall;
   }
 });
+Object.defineProperty(exports, "ButtonTextExtraSmall", {
+  enumerable: true,
+  get: function () {
+    return _Text.ButtonTextExtraSmall;
+  }
+});
 Object.defineProperty(exports, "ButtonTextMedium", {
   enumerable: true,
   get: function () {

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

@@ -6,6 +6,7 @@ export {
   BodyLarge,
   BodyMedium,
   BodySmall,
+  ButtonTextExtraSmall,
   ButtonTextMedium,
   ButtonTextSmall,
   FormInputMedium,

package/lib/styles/typography.module.css

@@ -103,6 +103,12 @@
   letter-spacing: fontLetterSpacing1;
 }
 
+.buttonTextExtraSmall {
+  composes: baseType;
+  font-size: fontSize12;
+  letter-spacing: fontLetterSpacing1;
+}
+
 .formInputMedium {
   composes: baseType;
   font-size: fontSize14;

package/lib/styles/variables/_color.css

@@ -84,6 +84,8 @@
 
 @value colorNeutral: #706f9b;
 
+@value colorNeutralLighter: #d3d2e0;
+
 @value colorNeutralLightest: #f1f1f5;
 
 @value colorNeutralLight: #bdbdd1;
@@ -94,6 +96,8 @@
 
 @value colorSuccess: #03964d;
 
+@value colorSuccessLighter: #b1dec8;
+
 @value colorSuccessLightest: #e6f5ed;
 
 @value colorSuccessLight: #8bcfad;
@@ -104,6 +108,8 @@
 
 @value colorInformation: #0769f0;
 
+@value colorInformationLighter: #b2d1fa;
+
 @value colorInformationLightest: #e6f0fe;
 
 @value colorInformationLight: #8dbaf8;
@@ -114,6 +120,8 @@
 
 @value colorWarning: #df7e0c;
 
+@value colorWarningLighter: #f5d7b4;
+
 @value colorWarningLightest: #fcf2e7;
 
 @value colorWarningLight: #f0c48f;
@@ -124,6 +132,8 @@
 
 @value colorDanger: #e31c4c;
 
+@value colorDangerLighter: #f6b9c8;
+
 @value colorDangerLightest: #fce8ed;
 
 @value colorDangerLight: #f297ad;

package/lib/styles/variables/_color.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSelected = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextDisabled = exports.colorTextDanger = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = 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.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.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackdropFill = void 0;
+exports.colorWarningLightest = exports.colorWarningLighter = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSelected = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextDisabled = exports.colorTextDanger = exports.colorSuccessLightest = exports.colorSuccessLighter = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorNeutralLightest = exports.colorNeutralLighter = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLighter = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillDisabled = exports.colorDangerLightest = exports.colorDangerLighter = 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.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackdropFill = void 0;
 
 const colorTextPrimary = '#17172A';
 exports.colorTextPrimary = colorTextPrimary;
@@ -91,6 +91,8 @@ const colorGrayLightest = '#EBEBEB';
 exports.colorGrayLightest = colorGrayLightest;
 const colorNeutral = '#706f9b';
 exports.colorNeutral = colorNeutral;
+const colorNeutralLighter = '#d3d2e0';
+exports.colorNeutralLighter = colorNeutralLighter;
 const colorNeutralLightest = '#f1f1f5';
 exports.colorNeutralLightest = colorNeutralLightest;
 const colorNeutralLight = '#bdbdd1';
@@ -101,6 +103,8 @@ const colorNeutralDarkest = '#2C2C47';
 exports.colorNeutralDarkest = colorNeutralDarkest;
 const colorSuccess = '#03964d';
 exports.colorSuccess = colorSuccess;
+const colorSuccessLighter = '#b1dec8';
+exports.colorSuccessLighter = colorSuccessLighter;
 const colorSuccessLightest = '#e6f5ed';
 exports.colorSuccessLightest = colorSuccessLightest;
 const colorSuccessLight = '#8bcfad';
@@ -111,6 +115,8 @@ const colorSuccessDarkest = '#013f20';
 exports.colorSuccessDarkest = colorSuccessDarkest;
 const colorInformation = '#0769f0';
 exports.colorInformation = colorInformation;
+const colorInformationLighter = '#b2d1fa';
+exports.colorInformationLighter = colorInformationLighter;
 const colorInformationLightest = '#e6f0fe';
 exports.colorInformationLightest = colorInformationLightest;
 const colorInformationLight = '#8dbaf8';
@@ -121,6 +127,8 @@ const colorInformationDarkest = '#032c65';
 exports.colorInformationDarkest = colorInformationDarkest;
 const colorWarning = '#df7e0c';
 exports.colorWarning = colorWarning;
+const colorWarningLighter = '#f5d7b4';
+exports.colorWarningLighter = colorWarningLighter;
 const colorWarningLightest = '#fcf2e7';
 exports.colorWarningLightest = colorWarningLightest;
 const colorWarningLight = '#f0c48f';
@@ -131,6 +139,8 @@ const colorWarningDarkest = '#5e3505';
 exports.colorWarningDarkest = colorWarningDarkest;
 const colorDanger = '#e31c4c';
 exports.colorDanger = colorDanger;
+const colorDangerLighter = '#f6b9c8';
+exports.colorDangerLighter = colorDangerLighter;
 const colorDangerLightest = '#fce8ed';
 exports.colorDangerLightest = colorDangerLightest;
 const colorDangerLight = '#f297ad';

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

@@ -86,6 +86,8 @@ export const colorGrayLightest = '#EBEBEB';
 
 export const colorNeutral = '#706f9b';
 
+export const colorNeutralLighter = '#d3d2e0';
+
 export const colorNeutralLightest = '#f1f1f5';
 
 export const colorNeutralLight = '#bdbdd1';
@@ -96,6 +98,8 @@ export const colorNeutralDarkest = '#2C2C47';
 
 export const colorSuccess = '#03964d';
 
+export const colorSuccessLighter = '#b1dec8';
+
 export const colorSuccessLightest = '#e6f5ed';
 
 export const colorSuccessLight = '#8bcfad';
@@ -106,6 +110,8 @@ export const colorSuccessDarkest = '#013f20';
 
 export const colorInformation = '#0769f0';
 
+export const colorInformationLighter = '#b2d1fa';
+
 export const colorInformationLightest = '#e6f0fe';
 
 export const colorInformationLight = '#8dbaf8';
@@ -116,6 +122,8 @@ export const colorInformationDarkest = '#032c65';
 
 export const colorWarning = '#df7e0c';
 
+export const colorWarningLighter = '#f5d7b4';
+
 export const colorWarningLightest = '#fcf2e7';
 
 export const colorWarningLight = '#f0c48f';
@@ -126,6 +134,8 @@ export const colorWarningDarkest = '#5e3505';
 
 export const colorDanger = '#e31c4c';
 
+export const colorDangerLighter = '#f6b9c8';
+
 export const colorDangerLightest = '#fce8ed';
 
 export const colorDangerLight = '#f297ad';

package/lib/styles/variables/_size.css

@@ -24,6 +24,8 @@
 
 @value size36: 36px;
 
+@value size38: 38px;
+
 @value size40: 40px;
 
 @value size42: 42px;

package/lib/styles/variables/_size.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeFluid = exports.size960 = exports.size8 = exports.size720 = exports.size60 = exports.size580 = exports.size500 = exports.size5 = exports.size480 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size36 = exports.size34 = exports.size300 = exports.size30 = exports.size276 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
+exports.sizeFluid = exports.size960 = exports.size8 = exports.size720 = exports.size60 = exports.size580 = exports.size500 = exports.size5 = exports.size480 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size300 = exports.size30 = exports.size276 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
 
 const size2 = '2px';
 exports.size2 = size2;
@@ -31,6 +31,8 @@ const size34 = '34px';
 exports.size34 = size34;
 const size36 = '36px';
 exports.size36 = size36;
+const size38 = '38px';
+exports.size38 = size38;
 const size40 = '40px';
 exports.size40 = size40;
 const size42 = '42px';

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

@@ -26,6 +26,8 @@ export const size34 = '34px';
 
 export const size36 = '36px';
 
+export const size38 = '38px';
+
 export const size40 = '40px';
 
 export const size42 = '42px';