@spaced-out/ui-design-system 0.1.100 → 0.1.102

package/.cspell/custom-words.txt

@@ -90,6 +90,8 @@ senseai
 Stapleton
 storysource
 superrover
+sharad
+kushwah
 Syowa
 systemjs
 tablist

package/.github/workflows/publish_to_npm.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Check Permissions
         id: check-permissions
         env:
-          ALLOWED_USERS: superrover, Anant-Raj, ashwini-sensehq, vish-sah, VishalBarnawal, sanskar-s, VivekJangid
+          ALLOWED_USERS: superrover, Anant-Raj, ashwini-sensehq, vish-sah, VishalBarnawal, sanskar-s, VivekJangid, sharad-kushwah
         if: ${{ !contains(env.ALLOWED_USERS, github.actor) }}
         run: |
           echo "You don't have correct permissions to do this release"

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 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.102](https://github.com/spaced-out/ui-design-system/compare/v0.1.101...v0.1.102) (2024-07-03)
+
+
+### Features
+
+* 🌈 form title wrapper gradient button and basic table ([#232](https://github.com/spaced-out/ui-design-system/issues/232)) ([8905147](https://github.com/spaced-out/ui-design-system/commit/89051477ad5320dfb1324f657a1ad745f43269c4))
+
+### [0.1.101](https://github.com/spaced-out/ui-design-system/compare/v0.1.100...v0.1.101) (2024-06-21)
+
+
+### Features
+
+* [GDS-413] tz offset in dateRangePicker prop ([#230](https://github.com/spaced-out/ui-design-system/issues/230)) ([e155e85](https://github.com/spaced-out/ui-design-system/commit/e155e85779589fd0a3c31dbeb5818f212415bf48))
+* timeZone changed to timezone ([#231](https://github.com/spaced-out/ui-design-system/issues/231)) ([1a680f0](https://github.com/spaced-out/ui-design-system/commit/1a680f02d49095cc53a6c1d7a785e05cb6648f65))
+
 ### [0.1.100](https://github.com/spaced-out/ui-design-system/compare/v0.1.99...v0.1.100) (2024-06-13)
 
 

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

@@ -150,6 +150,9 @@
     "720": {
       "value": "720px"
     },
+    "800": {
+      "value": "800px"
+    },
     "880": {
       "value": "880px"
     },

package/lib/components/Button/Button.js

@@ -14,12 +14,22 @@ 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; }
 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); }
+/**
+ * Note(Nishant): Although Button supports gradient as a type, its not currently customizable really.
+ * This only supports pre-defined gradient that moves from left to right.
+ * If someone wants to add more gradients, the expectation is that they would add it through a wrapper className.
+ *
+ * We could have taken an extra prop to take in the Gradient colors but that should not be encouraged
+ * as it would add an additional overhead on the component to figure out exact color values from string tokens
+ * and since this is rarely used type anyway, it should be avoided.
+ */
 const BUTTON_TYPES = Object.freeze({
   primary: 'primary',
   secondary: 'secondary',
   tertiary: 'tertiary',
   ghost: 'ghost',
-  danger: 'danger'
+  danger: 'danger',
+  gradient: 'gradient'
 });
 exports.BUTTON_TYPES = BUTTON_TYPES;
 const BUTTON_ACTION_TYPE = Object.freeze({
@@ -33,14 +43,16 @@ const ButtonTypeToIconColorMap = {
   secondary: 'clickable',
   tertiary: 'primary',
   ghost: 'primary',
-  danger: 'inversePrimary'
+  danger: 'inversePrimary',
+  gradient: 'inversePrimary'
 };
 const ButtonTypeToLoaderColorMap = {
   primary: 'colorTextInversePrimary',
   secondary: 'colorTextClickable',
   tertiary: 'colorTextPrimary',
   ghost: 'colorTextPrimary',
-  danger: 'colorTextInversePrimary'
+  danger: 'colorTextInversePrimary',
+  gradient: 'colorTextInversePrimary'
 };
 const UnstyledButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
@@ -98,6 +110,7 @@ const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       [_ButtonModule.default.tertiary]: type === 'tertiary',
       [_ButtonModule.default.ghost]: type === 'ghost',
       [_ButtonModule.default.danger]: type === 'danger',
+      [_ButtonModule.default.gradient]: type === 'gradient',
       [_ButtonModule.default.disabled]: disabled,
       [_ButtonModule.default.small]: size === 'small',
       [_ButtonModule.default.medium]: size === 'medium',

package/lib/components/Button/Button.js.flow

@@ -13,12 +13,22 @@ import css from './Button.module.css';
 
 type ClassNames = $ReadOnly<{wrapper?: string, icon?: string, text?: string}>;
 
+/**
+ * Note(Nishant): Although Button supports gradient as a type, its not currently customizable really.
+ * This only supports pre-defined gradient that moves from left to right.
+ * If someone wants to add more gradients, the expectation is that they would add it through a wrapper className.
+ *
+ * We could have taken an extra prop to take in the Gradient colors but that should not be encouraged
+ * as it would add an additional overhead on the component to figure out exact color values from string tokens
+ * and since this is rarely used type anyway, it should be avoided.
+ */
 export const BUTTON_TYPES = Object.freeze({
   primary: 'primary',
   secondary: 'secondary',
   tertiary: 'tertiary',
   ghost: 'ghost',
   danger: 'danger',
+  gradient: 'gradient',
 });
 
 export const BUTTON_ACTION_TYPE = Object.freeze({
@@ -66,6 +76,7 @@ const ButtonTypeToIconColorMap = {
   tertiary: 'primary',
   ghost: 'primary',
   danger: 'inversePrimary',
+  gradient: 'inversePrimary',
 };
 
 const ButtonTypeToLoaderColorMap = {
@@ -74,6 +85,7 @@ const ButtonTypeToLoaderColorMap = {
   tertiary: 'colorTextPrimary',
   ghost: 'colorTextPrimary',
   danger: 'colorTextInversePrimary',
+  gradient: 'colorTextInversePrimary',
 };
 
 export const UnstyledButton: React$AbstractComponent<
@@ -146,6 +158,7 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
             [css.tertiary]: type === 'tertiary',
             [css.ghost]: type === 'ghost',
             [css.danger]: type === 'danger',
+            [css.gradient]: type === 'gradient',
             [css.disabled]: disabled,
             [css.small]: size === 'small',
             [css.medium]: size === 'medium',

package/lib/components/Button/Button.module.css

@@ -29,7 +29,10 @@
   colorTextClickable,
   colorTextDisabled,
 
-  colorBorderSecondary
+  colorBorderSecondary,
+
+  colorFillPrimary,
+  colorInformation
 
 ) from '../../styles/variables/_color.css';
 
@@ -151,6 +154,16 @@ button {
   background-color: colorButtonFillPrimaryPressed;
 }
 
+/* Currently Gradient Buttons don't support hover / active states */
+.gradient {
+  color: colorTextInversePrimary;
+  background-image: linear-gradient(
+    to right,
+    colorFillPrimary,
+    colorInformation
+  );
+}
+
 .secondary {
   color: colorTextClickable;
   background-color: colorButtonFillSecondaryEnabled;
@@ -231,6 +244,7 @@ button {
   color: colorTextDisabled;
   background-color: colorFillDisabled;
   border: initial;
+  background-image: initial;
 }
 
 .hidden {

package/lib/components/DateRangePicker/DateRangePicker.js

@@ -21,16 +21,17 @@ const DateRangePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onApply,
     onCancel,
     classNames,
-    initialDateRange = {}
+    selectedDateRange = {},
+    hideTimezone = false
   } = _ref;
   const today = (0, _utils.formatIsoDate)();
-  const currentTimezone = _momentTimezone.default.tz.guess();
   const {
+    timezone: initialTimezone,
     dateRange: initialRange,
     monthRange
-  } = (0, _utils.getInitialDates)(initialDateRange);
+  } = (0, _utils.getInitialDates)(selectedDateRange);
   const [dateRange, setDateRange] = React.useState(initialRange);
-  const [timeZone, setTimeZone] = React.useState(currentTimezone);
+  const [timezone, setTimezone] = React.useState(initialTimezone);
   const [rangeStartMonth, setRangeStartMonth] = React.useState(monthRange.rangeStartMonth);
   const [rangeEndMonth, setRangeEndMonth] = React.useState(monthRange.rangeEndMonth);
   const [hoverDay, setHoverDay] = React.useState('');
@@ -92,14 +93,15 @@ const DateRangePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     handlers: handlers,
     hoverDay: hoverDay,
     onCancel: onCancel,
-    timeZone: timeZone,
+    timezone: timezone,
     dateRange: dateRange,
-    setTimeZone: setTimeZone,
+    setTimezone: setTimezone,
     rangeStartMonth: rangeStartMonth,
     rangeEndMonth: rangeEndMonth,
     inHoverRange: inHoverRange,
     setRangeStartMonth: setRangeStartMonthValidated,
     setRangeEndMonth: setRangeEndMonthValidated,
+    hideTimezone: hideTimezone,
     cardWrapperClass: (0, _classify.default)(_DateRangePickerModule.default.container, classNames?.wrapper)
   });
 });

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

@@ -25,9 +25,10 @@ type ClassNames = $ReadOnly<{wrapper?: string}>;
 
 export type DateRangePickerProps = {
   classNames?: ClassNames,
-  initialDateRange?: DateRange,
+  selectedDateRange?: DateRangeWithTimezone,
   onApply: (datePickerSelectedRange: DateRangeWithTimezone) => void,
   onCancel: () => void,
+  hideTimezone?: boolean,
 };
 
 export const DateRangePicker: React$AbstractComponent<
@@ -39,18 +40,21 @@ export const DateRangePicker: React$AbstractComponent<
       onApply,
       onCancel,
       classNames,
-      initialDateRange = {},
+      selectedDateRange = {},
+      hideTimezone = false,
     }: DateRangePickerProps,
     ref,
   ): React.Node => {
     const today = formatIsoDate();
-    const currentTimezone = moment.tz.guess();
 
-    const {dateRange: initialRange, monthRange} =
-      getInitialDates(initialDateRange);
+    const {
+      timezone: initialTimezone,
+      dateRange: initialRange,
+      monthRange,
+    } = getInitialDates(selectedDateRange);
 
     const [dateRange, setDateRange] = React.useState<DateRange>(initialRange);
-    const [timeZone, setTimeZone] = React.useState<string>(currentTimezone);
+    const [timezone, setTimezone] = React.useState<string>(initialTimezone);
     const [rangeStartMonth, setRangeStartMonth] = React.useState<string>(
       monthRange.rangeStartMonth,
     );
@@ -156,14 +160,15 @@ export const DateRangePicker: React$AbstractComponent<
         handlers={handlers}
         hoverDay={hoverDay}
         onCancel={onCancel}
-        timeZone={timeZone}
+        timezone={timezone}
         dateRange={dateRange}
-        setTimeZone={setTimeZone}
+        setTimezone={setTimezone}
         rangeStartMonth={rangeStartMonth}
         rangeEndMonth={rangeEndMonth}
         inHoverRange={inHoverRange}
         setRangeStartMonth={setRangeStartMonthValidated}
         setRangeEndMonth={setRangeEndMonthValidated}
+        hideTimezone={hideTimezone}
         cardWrapperClass={classify(css.container, classNames?.wrapper)}
       />
     );

package/lib/components/DateRangePicker/DateRangeWrapper.js

@@ -81,15 +81,16 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     onCancel,
     handlers,
     hoverDay,
-    timeZone,
+    timezone,
     dateRange,
     rangeStartMonth,
-    setTimeZone,
+    setTimezone,
     rangeEndMonth,
     inHoverRange,
     setRangeStartMonth,
     setRangeEndMonth,
-    cardWrapperClass
+    cardWrapperClass,
+    hideTimezone
   } = _ref2;
   const canNavigateCloser = (0, _momentTimezone.default)(rangeStartMonth).year() !== (0, _momentTimezone.default)(rangeEndMonth).year() || Math.abs((0, _momentTimezone.default)(rangeStartMonth).month() - (0, _momentTimezone.default)(rangeEndMonth).month()) > 1;
   const handleApplyClick = () => {
@@ -97,14 +98,14 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       startDate,
       endDate
     } = dateRange;
-    const startDateUTC = startDate && (0, _utils.addTimeZone)(startDate, timeZone);
-    const endDateUTC = endDate && (0, _utils.addTimeZone)(endDate, timeZone);
+    const startDateUTC = startDate && (0, _utils.addTimezone)(startDate, timezone);
+    const endDateUTC = endDate && (0, _utils.addTimezone)(endDate, timezone);
     onApply({
       startDate,
       endDate,
       startDateUTC,
       endDateUTC,
-      timeZone
+      timezone
     });
   };
   const {
@@ -155,13 +156,13 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     value: rangeEndMonth
   }, commonProps))), /*#__PURE__*/React.createElement(_Card.CardFooter, null, /*#__PURE__*/React.createElement(_Card.CardTitle, {
     className: _DateRangeWrapperModule.default.timezoneDropdownContainer
-  }, /*#__PURE__*/React.createElement(_Dropdown.SimpleDropdown, {
-    options: (0, _utils.getTimeZones)(),
+  }, !hideTimezone && /*#__PURE__*/React.createElement(_Dropdown.SimpleDropdown, {
+    options: (0, _utils.getTimezones)(),
     classNames: {
       box: _DateRangeWrapperModule.default.timezoneDropdown
     },
-    selectedKeys: [timeZone],
-    onChange: event => setTimeZone(event.key),
+    selectedKeys: [timezone],
+    onChange: event => setTimezone(event.key),
     size: "small",
     menuVirtualization: {
       enable: true

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

@@ -21,12 +21,12 @@ import {ClickableIcon} from '../Icon';
 import {Calendar} from './Calendar.js';
 import type {DateRange, DateRangeWithTimezone} from './utils';
 import {
-  addTimeZone,
+  addTimezone,
   generateAvailableYears,
   getAddedDate,
   getAvailableMonths,
   getMonthStartDate,
-  getTimeZones,
+  getTimezones,
   MARKERS,
   MONTHS,
   NAVIGATION_ACTION,
@@ -55,11 +55,12 @@ type DateRangeWrapperProps = {
   cardWrapperClass: ?string,
   setRangeStartMonth: (string) => void,
   setRangeEndMonth: (string) => void,
-  setTimeZone: (string) => void,
-  timeZone: string,
+  setTimezone: (string) => void,
+  timezone: string,
   onApply: (datePickerSelectedRange: DateRangeWithTimezone) => void,
   onCancel: () => void,
   inHoverRange: (day: string) => boolean,
+  hideTimezone: boolean,
   handlers: {
     onDayClick: (day: string) => void,
     onDayHover: (day: string) => void,
@@ -149,15 +150,16 @@ export const DateRangeWrapper: React$AbstractComponent<
       onCancel,
       handlers,
       hoverDay,
-      timeZone,
+      timezone,
       dateRange,
       rangeStartMonth,
-      setTimeZone,
+      setTimezone,
       rangeEndMonth,
       inHoverRange,
       setRangeStartMonth,
       setRangeEndMonth,
       cardWrapperClass,
+      hideTimezone,
     }: DateRangeWrapperProps,
     ref,
   ): React.Node => {
@@ -169,14 +171,14 @@ export const DateRangeWrapper: React$AbstractComponent<
 
     const handleApplyClick = () => {
       const {startDate, endDate} = dateRange;
-      const startDateUTC = startDate && addTimeZone(startDate, timeZone);
-      const endDateUTC = endDate && addTimeZone(endDate, timeZone);
+      const startDateUTC = startDate && addTimezone(startDate, timezone);
+      const endDateUTC = endDate && addTimezone(endDate, timezone);
       onApply({
         startDate,
         endDate,
         startDateUTC,
         endDateUTC,
-        timeZone,
+        timezone,
       });
     };
 
@@ -252,19 +254,21 @@ export const DateRangeWrapper: React$AbstractComponent<
           </CardContent>
           <CardFooter>
             <CardTitle className={css.timezoneDropdownContainer}>
-              <SimpleDropdown
-                options={getTimeZones()}
-                classNames={{
-                  box: css.timezoneDropdown,
-                }}
-                selectedKeys={[timeZone]}
-                onChange={(event) => setTimeZone(event.key)}
-                size="small"
-                menuVirtualization={{
-                  enable: true,
-                }}
-                allowSearch
-              />
+              {!hideTimezone && (
+                <SimpleDropdown
+                  options={getTimezones()}
+                  classNames={{
+                    box: css.timezoneDropdown,
+                  }}
+                  selectedKeys={[timezone]}
+                  onChange={(event) => setTimezone(event.key)}
+                  size="small"
+                  menuVirtualization={{
+                    enable: true,
+                  }}
+                  allowSearch
+                />
+              )}
             </CardTitle>
             <CardActions>
               <Button type="ghost" onClick={onCancel} size="small">

package/lib/components/DateRangePicker/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrangleMoment = exports.isStartOfRange = exports.isStartDateEndDateSame = exports.isEndOfRange = exports.inDateRange = exports.getTimeZones = exports.getSubtractedDate = exports.getMonthStartDate = exports.getInitialDates = exports.getDaysInMonth = exports.getAvailableMonths = exports.getAddedDate = exports.generateAvailableYears = exports.formatIsoDate = exports.addTimeZone = exports.WEEKDAYS = exports.NAVIGATION_ACTION = exports.MONTHS = exports.MARKERS = void 0;
+exports.wrangleMoment = exports.isStartOfRange = exports.isStartDateEndDateSame = exports.isEndOfRange = exports.inDateRange = exports.getTimezones = exports.getSubtractedDate = exports.getMonthStartDate = exports.getInitialDates = exports.getDaysInMonth = exports.getAvailableMonths = exports.getAddedDate = exports.generateAvailableYears = exports.formatIsoDate = exports.addTimezone = exports.WEEKDAYS = exports.NAVIGATION_ACTION = exports.MONTHS = exports.MARKERS = void 0;
 var _formatISO = _interopRequireDefault(require("date-fns/formatISO"));
 var _parseISO = _interopRequireDefault(require("date-fns/parseISO"));
 var _lodash = _interopRequireDefault(require("lodash"));
@@ -153,16 +153,16 @@ const getSubtractedDate = (date, subtractCount, timeUnit) => formatIsoDate((0, _
 exports.getSubtractedDate = getSubtractedDate;
 const getMonthStartDate = date => formatIsoDate((0, _momentTimezone.default)(date).startOf('M'));
 exports.getMonthStartDate = getMonthStartDate;
-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) => {
+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({
     key,
     label: _timezones.TIMEZONES[key]
   });
   return menuOptions;
 }, []);
-exports.getTimeZones = getTimeZones;
+exports.getTimezones = getTimezones;
 const generateAvailableYears = (count, firstCalendarDate, secondCalendarDate, marker) => {
   const startYear = (0, _momentTimezone.default)().year() - count + 1;
   const firstCalendarYear = (0, _momentTimezone.default)(firstCalendarDate).add(1, 'M').year();
@@ -201,12 +201,14 @@ const getAvailableMonths = (Months, first, second, marker) => {
   });
 };
 exports.getAvailableMonths = getAvailableMonths;
-const getInitialDates = initialDateRange => {
+const getInitialDates = selectedDateRange => {
   const today = formatIsoDate();
+  const currentTimezone = _momentTimezone.default.tz.guess();
   const {
     startDate,
-    endDate
-  } = initialDateRange;
+    endDate,
+    timezone
+  } = selectedDateRange;
   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) ? {
@@ -227,7 +229,8 @@ const getInitialDates = initialDateRange => {
   };
   return {
     dateRange,
-    monthRange
+    monthRange,
+    timezone: timezone ?? currentTimezone
   };
 };
 exports.getInitialDates = getInitialDates;

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

@@ -19,13 +19,14 @@ export type DateRangeWithTimezone = {|
   ...DateRange,
   startDateUTC?: string,
   endDateUTC?: string,
-  timeZone?: string,
+  timezone?: string,
 |};
 
 type MonthRange = {rangeStartMonth: string, rangeEndMonth: string};
-type InitialDateRanges = {
+type SelectedDateRangeTimezone = {
   dateRange: DateRange,
   monthRange: MonthRange,
+  timezone: string,
 };
 
 export const NAVIGATION_ACTION = Object.freeze({
@@ -141,10 +142,10 @@ export const getSubtractedDate = (
 export const getMonthStartDate = (date: string): string =>
   formatIsoDate(moment(date).startOf('M'));
 
-export const addTimeZone = (date: string, timeZone: string): string =>
-  moment.tz(date, timeZone).startOf('d').utc().toISOString();
+export const addTimezone = (date: string, timezone: string): string =>
+  moment.tz(date, timezone).startOf('d').utc().toISOString();
 
-export const getTimeZones = (): Array<MenuOption> =>
+export const getTimezones = (): Array<MenuOption> =>
   Object.keys(TIMEZONES).reduce((menuOptions, key) => {
     menuOptions.push({
       key,
@@ -206,10 +207,11 @@ export const getAvailableMonths = (
 };
 
 export const getInitialDates = (
-  initialDateRange: DateRange,
-): InitialDateRanges => {
+  selectedDateRange: DateRangeWithTimezone,
+): SelectedDateRangeTimezone => {
   const today = formatIsoDate();
-  const {startDate, endDate} = initialDateRange;
+  const currentTimezone = moment.tz.guess();
+  const {startDate, endDate, timezone} = selectedDateRange;
 
   const isStartDateValid = moment(startDate).isSameOrBefore(today);
   const isEndDateValid = moment(endDate).isSameOrBefore(today);
@@ -235,5 +237,9 @@ export const getInitialDates = (
   }
 
   const monthRange = {rangeStartMonth: startMonth, rangeEndMonth: endMonth};
-  return {dateRange, monthRange};
+  return {
+    dateRange,
+    monthRange,
+    timezone: timezone ?? currentTimezone,
+  };
 };

package/lib/components/FormTitleWrapper/FormTitleWrapper.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormTitleWrapper = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Icon = require("../Icon");
+var _FormTitleWrapperModule = _interopRequireDefault(require("./FormTitleWrapper.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 FormTitleWrapper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    classNames,
+    iconType,
+    iconName,
+    iconSize = 'small',
+    iconColor,
+    title,
+    rightSlot
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-testid": "FormTitleWrapper",
+    className: _FormTitleWrapperModule.default.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_FormTitleWrapperModule.default.leftSection, classNames?.wrapper)
+  }, !!iconName && /*#__PURE__*/React.createElement(_Icon.Icon, {
+    type: iconType,
+    name: iconName,
+    size: iconSize,
+    color: iconColor
+  }), /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_FormTitleWrapperModule.default.componentHousing, classNames?.title)
+  }, title)), /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_FormTitleWrapperModule.default.rightSection, classNames?.rightSlot)
+  }, rightSlot));
+});
+exports.FormTitleWrapper = FormTitleWrapper;

package/lib/components/FormTitleWrapper/FormTitleWrapper.js.flow

@@ -0,0 +1,68 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {ColorTypes} from '../../types/typography';
+import classify from '../../utils/classify';
+import type {IconSize, IconType} from '../Icon';
+import {Icon} from '../Icon';
+
+import css from './FormTitleWrapper.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  title?: string,
+  rightSlot?: string,
+}>;
+
+export type FormTitleWrapperProps = {
+  classNames?: ClassNames,
+  iconType?: IconType,
+  iconName?: string,
+  iconSize?: IconSize,
+  iconColor?: ColorTypes,
+  title: React.Node, // Should always atleast have a title
+  rightSlot?: React.Node,
+};
+
+export const FormTitleWrapper: React$AbstractComponent<
+  FormTitleWrapperProps,
+  HTMLDivElement,
+> = React.forwardRef<FormTitleWrapperProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      iconType,
+      iconName,
+      iconSize = 'small',
+      iconColor,
+      title,
+      rightSlot,
+    }: FormTitleWrapperProps,
+    ref,
+  ) => (
+    <div ref={ref} data-testid="FormTitleWrapper" className={css.container}>
+      <div className={classify(css.leftSection, classNames?.wrapper)}>
+        {!!iconName && (
+          <Icon
+            type={iconType}
+            name={iconName}
+            size={iconSize}
+            color={iconColor}
+          />
+        )}
+        {/* This is to safeguard semantics as it internally composes from a subTitleSmall className
+            we don't fix the component here as <SubtitleSmall> resolves to <h4> and since title is a React.Node,
+            this would break semantics in case custom components are passed inside
+         */}
+        <div className={classify(css.componentHousing, classNames?.title)}>
+          {title}
+        </div>
+      </div>
+      <div className={classify(css.rightSection, classNames?.rightSlot)}>
+        {rightSlot}
+      </div>
+    </div>
+  ),
+);

package/lib/components/FormTitleWrapper/FormTitleWrapper.module.css

@@ -0,0 +1,24 @@
+@value (colorFillPrimary) from '../../styles/variables/_color.css';
+@value (sizeFluid) from '../../styles/variables/_size.css';
+@value (spaceSmall, spaceXSmall) from '../../styles/variables/_space.css';
+
+.container {
+  display: flex;
+  composes: borderTopPrimary from '../../styles/border.module.css';
+  justify-content: space-between;
+  align-items: center;
+  width: sizeFluid;
+  padding-top: spaceSmall;
+  padding-bottom: spaceSmall;
+}
+
+.leftSection {
+  display: flex;
+  align-items: center;
+  gap: spaceXSmall;
+}
+
+.componentHousing {
+  display: flex;
+  composes: subTitleSmall from '../../styles/typography.module.css';
+}

package/lib/components/FormTitleWrapper/index.js

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

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

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

package/lib/components/index.js

@@ -256,6 +256,17 @@ Object.keys(_FocusManagerWithArrowKeyNavigation).forEach(function (key) {
     }
   });
 });
+var _FormTitleWrapper = require("./FormTitleWrapper");
+Object.keys(_FormTitleWrapper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FormTitleWrapper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FormTitleWrapper[key];
+    }
+  });
+});
 var _Grid = require("./Grid");
 Object.keys(_Grid).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -23,6 +23,7 @@ export * from './ErrorMessage';
 export * from './FileUpload';
 export * from './FocusManager';
 export * from './FocusManagerWithArrowKeyNavigation';
+export * from './FormTitleWrapper';
 export * from './Grid';
 export * from './Icon';
 export * from './InContextAlert';

package/lib/styles/index.css

@@ -476,6 +476,8 @@
 
 @value size720: 720px;
 
+@value size800: 800px;
+
 @value size880: 880px;
 
 @value size960: 960px;

package/lib/styles/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 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.colorSideMenuBackgroundSelected = exports.colorSideMenuBackgroundHovered = exports.colorSideMenuBackgroundDefault = exports.colorSideMenuAccountBarFill = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGroupMenuTextDefault = exports.colorGroupMenuBackgroundSelected = exports.colorGroupMenuBackgroundHovered = exports.colorGroupMenuBackgroundDefault = 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.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 = exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = 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.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size44 = 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.size200 = exports.size20 = 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.size800 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size44 = 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.size200 = exports.size20 = void 0;
 
 const borderWidthNone = '0px';
 exports.borderWidthNone = borderWidthNone;
@@ -485,6 +485,8 @@ const size660 = '660px';
 exports.size660 = size660;
 const size720 = '720px';
 exports.size720 = size720;
+const size800 = '800px';
+exports.size800 = size800;
 const size880 = '880px';
 exports.size880 = size880;
 const size960 = '960px';

package/lib/styles/index.js.flow

@@ -478,6 +478,8 @@ export const size660 = '660px';
 
 export const size720 = '720px';
 
+export const size800 = '800px';
+
 export const size880 = '880px';
 
 export const size960 = '960px';

package/lib/styles/variables/_size.css

@@ -98,6 +98,8 @@
 
 @value size720: 720px;
 
+@value size800: 800px;
+
 @value size880: 880px;
 
 @value size960: 960px;

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.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size44 = 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.size200 = 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.size800 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size44 = 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.size200 = 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;
@@ -105,6 +105,8 @@ const size660 = '660px';
 exports.size660 = size660;
 const size720 = '720px';
 exports.size720 = size720;
+const size800 = '800px';
+exports.size800 = size800;
 const size880 = '880px';
 exports.size880 = size880;
 const size960 = '960px';

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

@@ -100,6 +100,8 @@ export const size660 = '660px';
 
 export const size720 = '720px';
 
+export const size800 = '800px';
+
 export const size880 = '880px';
 
 export const size960 = '960px';

package/package.json

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