@spaced-out/ui-design-system 0.1.94-beta.3 → 0.1.94-beta.5

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.94-beta.5](https://github.com/spaced-out/ui-design-system/compare/v0.1.94-beta.4...v0.1.94-beta.5) (2024-05-16)
+
+
+### Features
+
+* [GDS-371] side menu changes for new app-shell ([#206](https://github.com/spaced-out/ui-design-system/issues/206)) ([ae32af8](https://github.com/spaced-out/ui-design-system/commit/ae32af8d6512249b91091e0104f413f16151c888))
+
+### [0.1.94-beta.4](https://github.com/spaced-out/ui-design-system/compare/v0.1.94-beta.3...v0.1.94-beta.4) (2024-05-16)
+
+
+### Bug Fixes
+
+* **chart:** fixed the type for axis ([#205](https://github.com/spaced-out/ui-design-system/issues/205)) ([740994a](https://github.com/spaced-out/ui-design-system/commit/740994a42e6376c6a3781c807814b2ea4acf49dc))
+
 ### [0.1.94-beta.3](https://github.com/spaced-out/ui-design-system/compare/v0.1.94-beta.2...v0.1.94-beta.3) (2024-05-15)
 
 

package/design-tokens/color/app-color.json

@@ -183,6 +183,11 @@
         "active": {
           "value": "{baseColor.white.100.value}"
         }
+      },
+      "account-bar":{
+        "fill": {
+          "value": "{baseColor.indigo.920.value}"
+        }
       }
     },
     "sub-menu": {

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

@@ -33,9 +33,15 @@
     "26": {
       "value": "26px"
     },
+    "28": {
+      "value": "28px"
+    },
     "30": {
       "value": "30px"
     },
+    "32": {
+      "value": "32px"
+    },
     "34": {
       "value": "34px"
     },

package/lib/components/DateRangePicker/utils.js

@@ -7,7 +7,7 @@ exports.wrangleMoment = exports.isStartOfRange = exports.isStartDateEndDateSame
 var _formatISO = _interopRequireDefault(require("date-fns/formatISO"));
 var _parseISO = _interopRequireDefault(require("date-fns/parseISO"));
 var _lodash = _interopRequireDefault(require("lodash"));
-var _moment = _interopRequireDefault(require("moment"));
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 var _timezones = require("./timezones");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -73,7 +73,7 @@ const wrangleMoment = date => {
   } else if (!date) {
     return new Date();
   }
-  return date instanceof _moment.default ? date.toDate() : (0, _parseISO.default)(date);
+  return date instanceof _momentTimezone.default ? date.toDate() : (0, _parseISO.default)(date);
 };
 exports.wrangleMoment = wrangleMoment;
 const formatIsoDate = date => (0, _formatISO.default)(wrangleMoment(date), {
@@ -84,14 +84,14 @@ const isStartOfRange = (_ref, date) => {
   let {
     startDate
   } = _ref;
-  return Boolean(startDate) && (0, _moment.default)(date).isSame((0, _moment.default)(startDate), 'd');
+  return Boolean(startDate) && (0, _momentTimezone.default)(date).isSame((0, _momentTimezone.default)(startDate), 'd');
 };
 exports.isStartOfRange = isStartOfRange;
 const isEndOfRange = (_ref2, date) => {
   let {
     endDate
   } = _ref2;
-  return Boolean(endDate) && (0, _moment.default)(date).isSame((0, _moment.default)(endDate), 'd');
+  return Boolean(endDate) && (0, _momentTimezone.default)(date).isSame((0, _momentTimezone.default)(endDate), 'd');
 };
 exports.isEndOfRange = isEndOfRange;
 const inDateRange = (_ref3, date) => {
@@ -100,9 +100,9 @@ const inDateRange = (_ref3, date) => {
     endDate
   } = _ref3;
   if (startDate && endDate) {
-    const momentDay = (0, _moment.default)(date);
-    const momentStartDate = (0, _moment.default)(startDate);
-    const momentEndDate = (0, _moment.default)(endDate);
+    const momentDay = (0, _momentTimezone.default)(date);
+    const momentStartDate = (0, _momentTimezone.default)(startDate);
+    const momentEndDate = (0, _momentTimezone.default)(endDate);
     return momentDay.isBetween(momentStartDate, momentEndDate, null, '[]');
   }
   return false;
@@ -114,18 +114,18 @@ const isStartDateEndDateSame = _ref4 => {
     endDate
   } = _ref4;
   if (startDate && endDate) {
-    return (0, _moment.default)(startDate).isSame((0, _moment.default)(endDate), 'd');
+    return (0, _momentTimezone.default)(startDate).isSame((0, _momentTimezone.default)(endDate), 'd');
   }
   return false;
 };
 exports.isStartDateEndDateSame = isStartDateEndDateSame;
 const getMonthAndYear = date => {
-  const momentDate = date ? (0, _moment.default)(date) : (0, _moment.default)();
+  const momentDate = date ? (0, _momentTimezone.default)(date) : (0, _momentTimezone.default)();
   return [momentDate.month(), momentDate.year()];
 };
 const getDaysInMonth = date => {
-  const startWeek = (0, _moment.default)(date).startOf('month').startOf('week');
-  const endWeek = (0, _moment.default)(date).endOf('month').endOf('week');
+  const startWeek = (0, _momentTimezone.default)(date).startOf('month').startOf('week');
+  const endWeek = (0, _momentTimezone.default)(date).endOf('month').endOf('week');
   const days = [],
     current = startWeek;
   while (current.isBefore(endWeek)) {
@@ -147,13 +147,13 @@ const getDaysInMonth = date => {
   return daysInChunks;
 };
 exports.getDaysInMonth = getDaysInMonth;
-const getAddedDate = (date, addCount, timeUnit) => formatIsoDate((0, _moment.default)(date).add(addCount, timeUnit));
+const getAddedDate = (date, addCount, timeUnit) => formatIsoDate((0, _momentTimezone.default)(date).add(addCount, timeUnit));
 exports.getAddedDate = getAddedDate;
-const getSubtractedDate = (date, subtractCount, timeUnit) => formatIsoDate((0, _moment.default)(date).subtract(subtractCount, timeUnit));
+const getSubtractedDate = (date, subtractCount, timeUnit) => formatIsoDate((0, _momentTimezone.default)(date).subtract(subtractCount, timeUnit));
 exports.getSubtractedDate = getSubtractedDate;
-const getMonthStartDate = date => formatIsoDate((0, _moment.default)(date).startOf('M'));
+const getMonthStartDate = date => formatIsoDate((0, _momentTimezone.default)(date).startOf('M'));
 exports.getMonthStartDate = getMonthStartDate;
-const addTimeZone = (date, timeZone) => _moment.default.tz(date, timeZone).startOf('d').utc().toISOString();
+const addTimeZone = (date, timeZone) => _momentTimezone.default.tz(date, timeZone).startOf('d').utc().toISOString();
 exports.addTimeZone = addTimeZone;
 const getTimeZones = () => Object.keys(_timezones.TIMEZONES).reduce((menuOptions, key) => {
   menuOptions.push({
@@ -164,9 +164,9 @@ const getTimeZones = () => Object.keys(_timezones.TIMEZONES).reduce((menuOptions
 }, []);
 exports.getTimeZones = getTimeZones;
 const generateAvailableYears = (count, firstCalendarDate, secondCalendarDate, marker) => {
-  const startYear = (0, _moment.default)().year() - count + 1;
-  const firstCalendarYear = (0, _moment.default)(firstCalendarDate).add(1, 'M').year();
-  const secondCalendarYear = (0, _moment.default)(secondCalendarDate).subtract(1, 'M').year();
+  const startYear = (0, _momentTimezone.default)().year() - count + 1;
+  const firstCalendarYear = (0, _momentTimezone.default)(firstCalendarDate).add(1, 'M').year();
+  const secondCalendarYear = (0, _momentTimezone.default)(secondCalendarDate).subtract(1, 'M').year();
   const isWithinRange = year => marker === MARKERS.DATE_RANGE_START ? year <= secondCalendarYear : year >= firstCalendarYear;
   return Array.from({
     length: count
@@ -207,9 +207,9 @@ const getInitialDates = initialDateRange => {
     startDate,
     endDate
   } = initialDateRange;
-  const isStartDateValid = (0, _moment.default)(startDate).isSameOrBefore(today);
-  const isEndDateValid = (0, _moment.default)(endDate).isSameOrBefore(today);
-  const dateRange = startDate && endDate && isStartDateValid && isEndDateValid && (0, _moment.default)(endDate).isSameOrAfter(startDate) ? {
+  const isStartDateValid = (0, _momentTimezone.default)(startDate).isSameOrBefore(today);
+  const isEndDateValid = (0, _momentTimezone.default)(endDate).isSameOrBefore(today);
+  const dateRange = startDate && endDate && isStartDateValid && isEndDateValid && (0, _momentTimezone.default)(endDate).isSameOrAfter(startDate) ? {
     startDate,
     endDate
   } : {
@@ -218,7 +218,7 @@ const getInitialDates = initialDateRange => {
   };
   let startMonth = dateRange.startDate ? getMonthStartDate(dateRange.startDate) : getMonthStartDate(getSubtractedDate(today, 1, 'M'));
   const endMonth = dateRange.endDate ? getMonthStartDate(dateRange.endDate) : getMonthStartDate(today);
-  if ((0, _moment.default)(startMonth).isSame((0, _moment.default)(endMonth), 'M')) {
+  if ((0, _momentTimezone.default)(startMonth).isSame((0, _momentTimezone.default)(endMonth), 'M')) {
     startMonth = getSubtractedDate(endMonth, 1, 'M');
   }
   const monthRange = {

package/lib/components/DateRangePicker/utils.js.flow

@@ -6,7 +6,7 @@ import formatISO from 'date-fns/formatISO';
 import parseISO from 'date-fns/parseISO';
 import lodash from 'lodash';
 // $FlowFixMe[untyped-import]
-import moment from 'moment';
+import moment from 'moment-timezone';
 
 import type {MenuOption} from '../Menu';
 

package/lib/components/PageTitle/PageTitle.js

@@ -26,6 +26,18 @@ const PAGE_NAME_LIST = Object.freeze({
     iconType: 'duotone',
     iconSwapOpacity: true
   },
+  journeys: {
+    title: 'Journeys',
+    iconName: 'bullseye-pointer',
+    iconType: 'duotone',
+    iconSwapOpacity: true
+  },
+  workflows: {
+    title: 'Workflows',
+    iconName: 'bullseye-pointer',
+    iconType: 'duotone',
+    iconSwapOpacity: true
+  },
   trm: {
     title: 'TRM',
     iconName: 'screen-users',

package/lib/components/PageTitle/PageTitle.js.flow

@@ -34,6 +34,18 @@ export const PAGE_NAME_LIST = Object.freeze({
     iconType: 'duotone',
     iconSwapOpacity: true,
   },
+  journeys: {
+    title: 'Journeys',
+    iconName: 'bullseye-pointer',
+    iconType: 'duotone',
+    iconSwapOpacity: true,
+  },
+  workflows: {
+    title: 'Workflows',
+    iconName: 'bullseye-pointer',
+    iconType: 'duotone',
+    iconSwapOpacity: true,
+  },
   trm: {
     title: 'TRM',
     iconName: 'screen-users',

package/lib/components/SideMenuLink/SideMenuLink.js

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.SideMenuLink = exports.MENU_NAME_LIST = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
 var _Icon = require("../Icon");
 var _Text = require("../Text");
 var _SideMenuLinkModule = _interopRequireDefault(require("./SideMenuLink.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 MENU_NAME_LIST = Object.freeze({
   dashboard: {
     title: 'Dashboard',
@@ -24,6 +25,16 @@ const MENU_NAME_LIST = Object.freeze({
     iconName: 'bullseye-pointer',
     iconType: 'duotone'
   },
+  journeys: {
+    title: 'Journeys',
+    iconName: 'bullseye-pointer',
+    iconType: 'duotone'
+  },
+  automation: {
+    title: 'Automation',
+    iconName: 'bullseye-pointer',
+    iconType: 'duotone'
+  },
   trm: {
     title: 'TRM',
     iconName: 'screen-users',
@@ -44,6 +55,11 @@ const MENU_NAME_LIST = Object.freeze({
     iconName: 'message-bot',
     iconType: 'duotone'
   },
+  referral: {
+    title: 'Referrals',
+    iconName: 'user-check',
+    iconType: 'duotone'
+  },
   referrals: {
     title: 'Referrals',
     iconName: 'user-check',
@@ -54,7 +70,7 @@ const MENU_NAME_LIST = Object.freeze({
     iconName: 'folder-open',
     iconType: 'duotone'
   },
-  bulkCleanup: {
+  'database-cleanup': {
     title: 'Bulk Cleanup',
     iconName: 'retweet',
     iconType: 'duotone'
@@ -69,7 +85,7 @@ const MENU_NAME_LIST = Object.freeze({
     iconName: 'print-magnifying-glass',
     iconType: 'duotone'
   },
-  timeline: {
+  schedule: {
     title: 'Timeline',
     iconName: 'timeline',
     iconType: 'duotone'
@@ -99,6 +115,11 @@ const MENU_NAME_LIST = Object.freeze({
     iconName: 'sparkles',
     iconType: 'duotone'
   },
+  'sense-jd-ai': {
+    title: 'Jd generator',
+    iconName: 'sparkles',
+    iconType: 'duotone'
+  },
   tracking: {
     title: 'Tracking',
     iconName: 'user-check',
@@ -109,6 +130,21 @@ const MENU_NAME_LIST = Object.freeze({
     iconName: 'briefcase',
     iconType: 'duotone'
   },
+  drive: {
+    title: 'Events',
+    iconName: 'briefcase',
+    iconType: 'duotone'
+  },
+  conversations: {
+    title: 'Conversations',
+    iconName: 'message-smile',
+    iconType: 'duotone'
+  },
+  pages: {
+    title: 'Pages',
+    iconName: 'pager',
+    iconType: 'duotone'
+  },
   earnings: {
     title: 'Earnings',
     iconName: 'wallet',
@@ -128,21 +164,26 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     disabled,
     opened,
     selectedValue,
-    onChange
+    onChange,
+    tabIndex = 0,
+    ...restButtonProps
   } = _ref;
   const selected = selectedValue === pageNameKey;
+  const inActive = !onChange;
   const onChangeHandler = e => {
     onChange && onChange(e, pageNameKey);
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, restButtonProps, {
     className: (0, _classify.default)(_SideMenuLinkModule.default.linkWrapper, {
       [_SideMenuLinkModule.default.selected]: selected,
       [_SideMenuLinkModule.default.disabled]: disabled,
+      [_SideMenuLinkModule.default.inActive]: inActive,
       [_SideMenuLinkModule.default.closed]: !opened
     }, classNames?.wrapper),
     onClick: onChangeHandler,
-    ref: ref
-  }, pageNameKey && MENU_NAME_LIST[pageNameKey] ? /*#__PURE__*/React.createElement(_Icon.Icon, {
+    ref: ref,
+    tabIndex: disabled ? -1 : tabIndex
+  }), pageNameKey && MENU_NAME_LIST[pageNameKey] ? /*#__PURE__*/React.createElement(_Icon.Icon, {
     type: MENU_NAME_LIST[pageNameKey].iconType,
     name: MENU_NAME_LIST[pageNameKey].iconName,
     size: "medium",

package/lib/components/SideMenuLink/SideMenuLink.js.flow

@@ -3,6 +3,7 @@
 import * as React from 'react';
 
 import classify from '../../utils/classify';
+import {UnstyledButton} from '../Button';
 import {Icon} from '../Icon';
 import {SubTitleSmall, TEXT_COLORS} from '../Text';
 
@@ -20,6 +21,16 @@ export const MENU_NAME_LIST = Object.freeze({
     iconName: 'bullseye-pointer',
     iconType: 'duotone',
   },
+  journeys: {
+    title: 'Journeys',
+    iconName: 'bullseye-pointer',
+    iconType: 'duotone',
+  },
+  automation: {
+    title: 'Automation',
+    iconName: 'bullseye-pointer',
+    iconType: 'duotone',
+  },
   trm: {
     title: 'TRM',
     iconName: 'screen-users',
@@ -40,6 +51,11 @@ export const MENU_NAME_LIST = Object.freeze({
     iconName: 'message-bot',
     iconType: 'duotone',
   },
+  referral: {
+    title: 'Referrals',
+    iconName: 'user-check',
+    iconType: 'duotone',
+  },
   referrals: {
     title: 'Referrals',
     iconName: 'user-check',
@@ -50,7 +66,7 @@ export const MENU_NAME_LIST = Object.freeze({
     iconName: 'folder-open',
     iconType: 'duotone',
   },
-  bulkCleanup: {
+  'database-cleanup': {
     title: 'Bulk Cleanup',
     iconName: 'retweet',
     iconType: 'duotone',
@@ -65,7 +81,7 @@ export const MENU_NAME_LIST = Object.freeze({
     iconName: 'print-magnifying-glass',
     iconType: 'duotone',
   },
-  timeline: {
+  schedule: {
     title: 'Timeline',
     iconName: 'timeline',
     iconType: 'duotone',
@@ -95,6 +111,11 @@ export const MENU_NAME_LIST = Object.freeze({
     iconName: 'sparkles',
     iconType: 'duotone',
   },
+  'sense-jd-ai': {
+    title: 'Jd generator',
+    iconName: 'sparkles',
+    iconType: 'duotone',
+  },
   tracking: {
     title: 'Tracking',
     iconName: 'user-check',
@@ -105,6 +126,21 @@ export const MENU_NAME_LIST = Object.freeze({
     iconName: 'briefcase',
     iconType: 'duotone',
   },
+  drive: {
+    title: 'Events',
+    iconName: 'briefcase',
+    iconType: 'duotone',
+  },
+  conversations: {
+    title: 'Conversations',
+    iconName: 'message-smile',
+    iconType: 'duotone',
+  },
+  pages: {
+    title: 'Pages',
+    iconName: 'pager',
+    iconType: 'duotone',
+  },
   earnings: {
     title: 'Earnings',
     iconName: 'wallet',
@@ -128,12 +164,14 @@ export type SideMenuLinkProps = {
   selectedValue?: string,
   opened?: boolean,
   onChange?: (e: SyntheticEvent<HTMLElement>, newValue: string) => mixed,
+  tabIndex?: number,
+  ...
 };
 
 export const SideMenuLink: React$AbstractComponent<
   SideMenuLinkProps,
-  HTMLDivElement,
-> = React.forwardRef<SideMenuLinkProps, HTMLDivElement>(
+  HTMLButtonElement,
+> = React.forwardRef<SideMenuLinkProps, HTMLButtonElement>(
   (
     {
       classNames,
@@ -142,26 +180,32 @@ export const SideMenuLink: React$AbstractComponent<
       opened,
       selectedValue,
       onChange,
+      tabIndex = 0,
+      ...restButtonProps
     }: SideMenuLinkProps,
     ref,
   ): React.Node => {
     const selected = selectedValue === pageNameKey;
+    const inActive = !onChange;
     const onChangeHandler = (e: SyntheticEvent<HTMLElement>) => {
       onChange && onChange(e, pageNameKey);
     };
     return (
-      <div
+      <UnstyledButton
+        {...restButtonProps}
         className={classify(
           css.linkWrapper,
           {
             [css.selected]: selected,
             [css.disabled]: disabled,
+            [css.inActive]: inActive,
             [css.closed]: !opened,
           },
           classNames?.wrapper,
         )}
         onClick={onChangeHandler}
         ref={ref}
+        tabIndex={disabled ? -1 : tabIndex}
       >
         {pageNameKey && MENU_NAME_LIST[pageNameKey] ? (
           <Icon
@@ -180,7 +224,7 @@ export const SideMenuLink: React$AbstractComponent<
             {MENU_NAME_LIST[pageNameKey].title}
           </SubTitleSmall>
         ) : null}
-      </div>
+      </UnstyledButton>
     );
   },
 );

package/lib/components/SideMenuLink/SideMenuLink.module.css

@@ -4,10 +4,18 @@
   colorTextInverseSecondary,
   colorTextInversePrimary,
   colorSideMenuIconDefault,
-  colorSideMenuIconActive ) from '../../styles/variables/_color.css';
-@value ( spaceXSmall, spaceSmall ) from '../../styles/variables/_space.css';
-@value ( size42, sizeFluid) from '../../styles/variables/_size.css';
-@value ( borderRadiusSmall) from '../../styles/variables/_border.css';
+  colorSideMenuIconActive,
+  colorFocusPrimary
+  ) from '../../styles/variables/_color.css';
+@value ( spaceNone, spaceXXSmall, spaceXSmall, spaceSmall ) from '../../styles/variables/_space.css';
+@value ( size28, size32, sizeFluid) from '../../styles/variables/_size.css';
+@value (
+  borderWidthPrimary,
+  borderWidthTertiary,
+  borderWidthNone,
+  borderRadiusSmall,
+  borderRadiusNone
+  ) from '../../styles/variables/_border.css';
 
 .linkWrapper {
   display: flex;
@@ -17,27 +25,36 @@
   gap: spaceXSmall;
   justify-content: flex-start;
   align-items: center;
-  flex: auto;
-  height: size42;
-  min-width: size42;
+  max-height: size32;
+  min-height: size32;
   border-radius: borderRadiusSmall;
   width: sizeFluid;
   cursor: pointer;
   user-select: none;
+  padding: spaceNone spaceXXSmall;
+}
+
+.linkWrapper:focus-visible {
+  outline: none;
+}
+
+.linkWrapper:focus {
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
 }
 
 .linkWrapper.closed {
-  width: size42;
+  width: size32;
 }
 
-.linkWrapper:not(.selected):hover {
+.linkWrapper:not(.selected):not(.inActive):hover {
   background: colorNeutralDarkest;
   color: colorTextInversePrimary;
 }
 
 .menuIcon {
-  height: size42;
-  width: size42;
+  height: size28;
+  width: size28;
   color: colorSideMenuIconDefault;
 }
 
@@ -50,7 +67,7 @@
   color: colorSideMenuIconActive;
 }
 
-.linkWrapper:hover .menuIcon {
+.linkWrapper:not(.inActive):hover .menuIcon {
   color: colorSideMenuIconActive;
 }
 

package/lib/styles/index.css

@@ -124,6 +124,8 @@
 
 @value colorSideMenuIconActive: #ffffff;
 
+@value colorSideMenuAccountBarFill: #1F1F36;
+
 @value colorSubMenuBackgroundDefault: #1F1F36;
 
 @value colorSubMenuStar: #DFBD0D;
@@ -382,8 +384,12 @@
 
 @value size26: 26px;
 
+@value size28: 28px;
+
 @value size30: 30px;
 
+@value size32: 32px;
+
 @value size34: 34px;
 
 @value size36: 36px;

package/lib/styles/index.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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.colorTextFavorite = 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.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = 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.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = exports.shadowBoxShadow4Y = exports.shadowBoxShadow4X = exports.shadowBoxShadow4Type = exports.shadowBoxShadow4Spread = exports.shadowBoxShadow4Color = exports.shadowBoxShadow4Blur = exports.shadowBoxShadow3Y = exports.shadowBoxShadow3X = exports.shadowBoxShadow3Type = exports.shadowBoxShadow3Spread = exports.shadowBoxShadow3Color = exports.shadowBoxShadow3Blur = exports.shadowBoxShadow2Y = exports.shadowBoxShadow2X = exports.shadowBoxShadow2Type = exports.shadowBoxShadow2Spread = exports.shadowBoxShadow2Color = exports.shadowBoxShadow2Blur = exports.shadowBoxShadow1Y = exports.shadowBoxShadow1X = exports.shadowBoxShadow1Type = exports.shadowBoxShadow1Spread = exports.shadowBoxShadow1Color = exports.shadowBoxShadow1Blur = exports.opacity95 = exports.opacity90 = exports.opacity85 = exports.opacity80 = exports.opacity70 = exports.opacity60 = exports.opacity50 = exports.opacity5 = exports.opacity40 = exports.opacity30 = exports.opacity20 = exports.opacity15 = exports.opacity100 = exports.opacity10 = exports.opacity0 = exports.motionEaseInEaseOut = exports.motionDurationSlowest = exports.motionDurationSlower = exports.motionDurationSlow = exports.motionDurationNormal = exports.motionDurationFast = exports.fontWeightMedium = exports.fontWeightBook = exports.fontTextDecorationNone = exports.fontTextCaseNone = exports.fontSize46 = exports.fontSize36 = exports.fontSize26 = exports.fontSize24 = exports.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = exports.fontLineHeight125 = exports.fontLineHeight120 = exports.fontLineHeight100 = exports.fontLetterSpacingMinus4 = exports.fontLetterSpacingMinus3 = 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 = 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.size880 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = 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 = void 0;
+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.colorTextFavorite = 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.colorSideMenuAccountBarFill = 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.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = 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.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = exports.shadowBoxShadow4Y = exports.shadowBoxShadow4X = exports.shadowBoxShadow4Type = exports.shadowBoxShadow4Spread = exports.shadowBoxShadow4Color = exports.shadowBoxShadow4Blur = exports.shadowBoxShadow3Y = exports.shadowBoxShadow3X = exports.shadowBoxShadow3Type = exports.shadowBoxShadow3Spread = exports.shadowBoxShadow3Color = exports.shadowBoxShadow3Blur = exports.shadowBoxShadow2Y = exports.shadowBoxShadow2X = exports.shadowBoxShadow2Type = exports.shadowBoxShadow2Spread = exports.shadowBoxShadow2Color = exports.shadowBoxShadow2Blur = exports.shadowBoxShadow1Y = exports.shadowBoxShadow1X = exports.shadowBoxShadow1Type = exports.shadowBoxShadow1Spread = exports.shadowBoxShadow1Color = exports.shadowBoxShadow1Blur = exports.opacity95 = exports.opacity90 = exports.opacity85 = exports.opacity80 = exports.opacity70 = exports.opacity60 = exports.opacity50 = exports.opacity5 = exports.opacity40 = exports.opacity30 = exports.opacity20 = exports.opacity15 = exports.opacity100 = exports.opacity10 = exports.opacity0 = exports.motionEaseInEaseOut = exports.motionDurationSlowest = exports.motionDurationSlower = exports.motionDurationSlow = exports.motionDurationNormal = exports.motionDurationFast = exports.fontWeightMedium = exports.fontWeightBook = exports.fontTextDecorationNone = exports.fontTextCaseNone = exports.fontSize46 = exports.fontSize36 = exports.fontSize26 = exports.fontSize24 = exports.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = exports.fontLineHeight125 = exports.fontLineHeight120 = exports.fontLineHeight100 = exports.fontLetterSpacingMinus4 = exports.fontLetterSpacingMinus3 = 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 = 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.size880 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = 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.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = void 0;
 
 const borderWidthNone = '0px';
 exports.borderWidthNone = borderWidthNone;
@@ -133,6 +133,8 @@ const colorSideMenuIconDefault = '#9F9FBC';
 exports.colorSideMenuIconDefault = colorSideMenuIconDefault;
 const colorSideMenuIconActive = '#ffffff';
 exports.colorSideMenuIconActive = colorSideMenuIconActive;
+const colorSideMenuAccountBarFill = '#1F1F36';
+exports.colorSideMenuAccountBarFill = colorSideMenuAccountBarFill;
 const colorSubMenuBackgroundDefault = '#1F1F36';
 exports.colorSubMenuBackgroundDefault = colorSubMenuBackgroundDefault;
 const colorSubMenuStar = '#DFBD0D';
@@ -391,8 +393,12 @@ const size24 = '24px';
 exports.size24 = size24;
 const size26 = '26px';
 exports.size26 = size26;
+const size28 = '28px';
+exports.size28 = size28;
 const size30 = '30px';
 exports.size30 = size30;
+const size32 = '32px';
+exports.size32 = size32;
 const size34 = '34px';
 exports.size34 = size34;
 const size36 = '36px';

package/lib/styles/index.js.flow

@@ -126,6 +126,8 @@ export const colorSideMenuIconDefault = '#9F9FBC';
 
 export const colorSideMenuIconActive = '#ffffff';
 
+export const colorSideMenuAccountBarFill = '#1F1F36';
+
 export const colorSubMenuBackgroundDefault = '#1F1F36';
 
 export const colorSubMenuStar = '#DFBD0D';
@@ -384,8 +386,12 @@ export const size24 = '24px';
 
 export const size26 = '26px';
 
+export const size28 = '28px';
+
 export const size30 = '30px';
 
+export const size32 = '32px';
+
 export const size34 = '34px';
 
 export const size36 = '36px';

package/lib/styles/variables/_color.css

@@ -100,6 +100,8 @@
 
 @value colorSideMenuIconActive: #ffffff;
 
+@value colorSideMenuAccountBarFill: #1F1F36;
+
 @value colorSubMenuBackgroundDefault: #1F1F36;
 
 @value colorSubMenuStar: #DFBD0D;

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.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextFavorite = 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.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = 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 = void 0;
+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.colorTextFavorite = 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.colorSideMenuAccountBarFill = 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.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = 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 = void 0;
 
 const colorTextPrimary = '#17172A';
 exports.colorTextPrimary = colorTextPrimary;
@@ -107,6 +107,8 @@ const colorSideMenuIconDefault = '#9F9FBC';
 exports.colorSideMenuIconDefault = colorSideMenuIconDefault;
 const colorSideMenuIconActive = '#ffffff';
 exports.colorSideMenuIconActive = colorSideMenuIconActive;
+const colorSideMenuAccountBarFill = '#1F1F36';
+exports.colorSideMenuAccountBarFill = colorSideMenuAccountBarFill;
 const colorSubMenuBackgroundDefault = '#1F1F36';
 exports.colorSubMenuBackgroundDefault = colorSubMenuBackgroundDefault;
 const colorSubMenuStar = '#DFBD0D';

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

@@ -102,6 +102,8 @@ export const colorSideMenuIconDefault = '#9F9FBC';
 
 export const colorSideMenuIconActive = '#ffffff';
 
+export const colorSideMenuAccountBarFill = '#1F1F36';
+
 export const colorSubMenuBackgroundDefault = '#1F1F36';
 
 export const colorSubMenuStar = '#DFBD0D';

package/lib/styles/variables/_size.css

@@ -20,8 +20,12 @@
 
 @value size26: 26px;
 
+@value size28: 28px;
+
 @value size30: 30px;
 
+@value size32: 32px;
+
 @value size34: 34px;
 
 @value size36: 36px;

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.size880 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = 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.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
+exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = 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.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
 
 const size2 = '2px';
 exports.size2 = size2;
@@ -27,8 +27,12 @@ const size24 = '24px';
 exports.size24 = size24;
 const size26 = '26px';
 exports.size26 = size26;
+const size28 = '28px';
+exports.size28 = size28;
 const size30 = '30px';
 exports.size30 = size30;
+const size32 = '32px';
+exports.size32 = size32;
 const size34 = '34px';
 exports.size34 = size34;
 const size36 = '36px';

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

@@ -22,8 +22,12 @@ export const size24 = '24px';
 
 export const size26 = '26px';
 
+export const size28 = '28px';
+
 export const size30 = '30px';
 
+export const size32 = '32px';
+
 export const size34 = '34px';
 
 export const size36 = '36px';

package/lib/types/charts.js.flow

@@ -29,7 +29,7 @@ export type ChartOptions = {
     allowTableSorting?: boolean,
     buttons?: {
       contextButton?: {
-        enabled: boolean,
+        enabled?: boolean,
       },
     },
     enabled?: boolean,
@@ -54,15 +54,15 @@ export type ChartOptions = {
   subtitle?: {
     useHTML: boolean,
     text?: string,
-    verticalAlign: 'middle',
-    align: string,
-    style: CSSObject,
+    verticalAlign?: 'middle',
+    align?: string,
+    style?: CSSObject,
     x?: number,
     ...
   },
   pane?: {
-    center: [string, string],
-    size: string,
+    center?: [string, string],
+    size?: string,
     ...
   },
   legend?: Legend,
@@ -83,7 +83,7 @@ export type AxisOptions = {
   title?: {
     text?: string,
     margin?: number,
-    style: ?CSSObject,
+    style?: CSSObject,
     ...
   },
   type?: string,
@@ -157,20 +157,20 @@ export type Drilldown = {
 
 export type PlotOptionsType = {
   ['pie' | 'line']: {
-    innerSize: string,
-    allowPointSelect: boolean,
-    cursor: 'pointer',
-    dataLabels: {
+    innerSize?: string,
+    allowPointSelect?: boolean,
+    cursor?: 'pointer',
+    dataLabels?: {
       enabled?: boolean,
       distance?: number,
       connectorColor?: string,
     },
-    showInLegend: boolean,
-    center: [string, string],
-    size: string,
+    showInLegend?: boolean,
+    center?: [string, string],
+    size?: string,
     minSize?: number | string,
-    borderWidth: number,
-    borderRadius: number,
+    borderWidth?: number,
+    borderRadius?: number,
     ...
   },
 };

package/package.json

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