@spaced-out/ui-design-system 0.3.41 → 0.3.42

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 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.3.42](https://github.com/spaced-out/ui-design-system/compare/v0.3.41...v0.3.42) (2025-05-22)
+
+
+### Features
+
+* **GDS-511:** updated ux for date range picker ([#348](https://github.com/spaced-out/ui-design-system/issues/348)) ([04d12e5](https://github.com/spaced-out/ui-design-system/commit/04d12e5b0db0d7e8797e613350ac4d32001c95d9))
+
+
+### Bug Fixes
+
+* [GDS-522 & GDS-523]tooltip error in tokenListInput & glitch in Modal ([#349](https://github.com/spaced-out/ui-design-system/issues/349)) ([0482a91](https://github.com/spaced-out/ui-design-system/commit/0482a91ea01a10481224ef64af6c9c9125be9c84))
+* fixes chip accessibility ([#347](https://github.com/spaced-out/ui-design-system/issues/347)) ([ea2d231](https://github.com/spaced-out/ui-design-system/commit/ea2d231ff0508b13aeb3af2581405393077b72c1))
+
 ### [0.3.41](https://github.com/spaced-out/ui-design-system/compare/v0.3.40...v0.3.41) (2025-05-19)
 
 

package/lib/components/Chip/Chip.d.ts

@@ -128,13 +128,16 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
               [css.dismissable]: dismissable,
               [css.withIcon]: !!iconName && size !== 'small',
               [css.disabled]: disabled,
-              [css.noHoverState]: showStatusIndicator || disableHoverState,
+              [css.noHoverState]:
+                showStatusIndicator || disableHoverState || disabled,
             },
             classNames?.wrapper,
           )}
           onClick={onClick}
           onKeyDown={handleKeyDown}
-          tabIndex={showStatusIndicator || disableHoverState ? undefined : 0}
+          tabIndex={
+            showStatusIndicator || disableHoverState || disabled ? undefined : 0
+          }
           role={showStatusIndicator || disableHoverState ? undefined : 'button'}
         >
           {showStatusIndicator && size !== 'small' && (

package/lib/components/Chip/Chip.js

@@ -84,11 +84,11 @@ const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       [_ChipModule.default.dismissable]: dismissable,
       [_ChipModule.default.withIcon]: !!iconName && size !== 'small',
       [_ChipModule.default.disabled]: disabled,
-      [_ChipModule.default.noHoverState]: showStatusIndicator || disableHoverState
+      [_ChipModule.default.noHoverState]: showStatusIndicator || disableHoverState || disabled
     }, classNames?.wrapper),
     onClick: onClick,
     onKeyDown: handleKeyDown,
-    tabIndex: showStatusIndicator || disableHoverState ? undefined : 0,
+    tabIndex: showStatusIndicator || disableHoverState || disabled ? undefined : 0,
     role: showStatusIndicator || disableHoverState ? undefined : 'button'
   }), showStatusIndicator && size !== 'small' && /*#__PURE__*/React.createElement(_StatusIndicator.StatusIndicator, {
     status: semantic,

package/lib/components/Chip/Chip.js.flow

@@ -129,13 +129,16 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
               [css.dismissable]: dismissable,
               [css.withIcon]: !!iconName && size !== 'small',
               [css.disabled]: disabled,
-              [css.noHoverState]: showStatusIndicator || disableHoverState,
+              [css.noHoverState]:
+                showStatusIndicator || disableHoverState || disabled,
             },
             classNames?.wrapper,
           )}
           onClick={onClick}
           onKeyDown={handleKeyDown}
-          tabIndex={showStatusIndicator || disableHoverState ? undefined : 0}
+          tabIndex={
+            showStatusIndicator || disableHoverState || disabled ? undefined : 0
+          }
           role={showStatusIndicator || disableHoverState ? undefined : 'button'}
         >
           {showStatusIndicator && size !== 'small' && (

package/lib/components/DateRangePicker/Calendar.d.ts

@@ -15,7 +15,7 @@ import {
   WEEKDAYS,
 } from '../../utils';
 import {isAfter, isBefore, isSame} from '../../utils/date-range-picker';
-import {BodySmall, SubTitleExtraSmall, TEXT_COLORS} from '../Text';
+import {BodySmall, TEXT_COLORS} from '../Text';
 import {Day} from './Day';
 import css from './Calendar.module.css';
 type CalendarProps = {
@@ -36,21 +36,6 @@ type CalendarProps = {
   };
   today: string;
 };
-
-const getFormattedDate = (marker: string, dateRange: DateRange) => {
-  const {startDate, endDate} = dateRange;
-
-  switch (marker) {
-    case MARKERS.DATE_RANGE_START:
-      return startDate
-        ? moment.utc(startDate).format('MMMM D, YYYY')
-        : 'Start Date';
-
-    default:
-      return endDate ? moment.utc(endDate).format('MMMM D, YYYY') : 'End Date';
-  }
-};
-
 export const Calendar = ({
   value,
   marker,
@@ -63,13 +48,6 @@ export const Calendar = ({
   today,
 }: CalendarProps): React.ReactNode => (
   <div className={css.calendar}>
-    <SubTitleExtraSmall
-      className={css.selectedDate}
-      color={TEXT_COLORS.secondary}
-    >
-      {getFormattedDate(marker, dateRange)}
-    </SubTitleExtraSmall>
-
     <div className={css.calendarRow}>
       {WEEKDAYS.map((day) => (
         <BodySmall

package/lib/components/DateRangePicker/Calendar.js

@@ -17,18 +17,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 // $FlowFixMe[untyped-import]
 
-const getFormattedDate = (marker, dateRange) => {
-  const {
-    startDate,
-    endDate
-  } = dateRange;
-  switch (marker) {
-    case _utils.MARKERS.DATE_RANGE_START:
-      return startDate ? _moment.default.utc(startDate).format('MMMM D, YYYY') : 'Start Date';
-    default:
-      return endDate ? _moment.default.utc(endDate).format('MMMM D, YYYY') : 'End Date';
-  }
-};
 const Calendar = _ref => {
   let {
     value,
@@ -43,10 +31,7 @@ const Calendar = _ref => {
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     className: _CalendarModule.default.calendar
-  }, /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
-    className: _CalendarModule.default.selectedDate,
-    color: _Text.TEXT_COLORS.secondary
-  }, getFormattedDate(marker, dateRange)), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: _CalendarModule.default.calendarRow
   }, _utils.WEEKDAYS.map(day => /*#__PURE__*/React.createElement(_Text.BodySmall, {
     key: day,

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

@@ -17,7 +17,7 @@ import {
   WEEKDAYS,
 } from '../../utils';
 import {isAfter, isBefore, isSame} from '../../utils/date-range-picker';
-import {BodySmall, SubTitleExtraSmall, TEXT_COLORS} from '../Text';
+import {BodySmall, TEXT_COLORS} from '../Text';
 
 import {Day} from './Day';
 
@@ -43,18 +43,6 @@ type CalendarProps = {
   today: string,
 };
 
-const getFormattedDate = (marker: string, dateRange: DateRange) => {
-  const {startDate, endDate} = dateRange;
-  switch (marker) {
-  case MARKERS.DATE_RANGE_START:
-    return startDate
-      ? moment.utc(startDate).format('MMMM D, YYYY')
-      : 'Start Date';
-  default:
-    return endDate ? moment.utc(endDate).format('MMMM D, YYYY') : 'End Date';
-  }
-};
-
 export const Calendar = ({
   value,
   marker,
@@ -67,13 +55,6 @@ export const Calendar = ({
   today,
 }: CalendarProps): React.Node => (
   <div className={css.calendar}>
-    <SubTitleExtraSmall
-      className={css.selectedDate}
-      color={TEXT_COLORS.secondary}
-    >
-      {getFormattedDate(marker, dateRange)}
-    </SubTitleExtraSmall>
-
     <div className={css.calendarRow}>
       {WEEKDAYS.map((day) => (
         <BodySmall

package/lib/components/DateRangePicker/DateRangeWrapper.d.ts

@@ -16,6 +16,7 @@ import classify from '../../utils/classify';
 import {
   addTimezoneEndOfDay,
   addTimezoneStartOfDay,
+  getFormattedDate,
   isAfter,
   isSameOrAfter,
   isSameOrBefore,
@@ -31,7 +32,8 @@ import {
 } from '../Card';
 import {Dropdown, SimpleDropdown} from '../Dropdown';
 import {FocusManager} from '../FocusManager';
-import {ClickableIcon} from '../Icon';
+import {ClickableIcon, Icon, ICON_SIZE, ICON_TYPE} from '../Icon';
+import {BodySmall, TEXT_COLORS} from '../Text';
 import {Calendar} from './Calendar';
 import css from './DateRangeWrapper.module.css';
 type HeaderProps = {
@@ -72,6 +74,8 @@ type DateRangeWrapperProps = {
     ) => void;
   };
   today: string;
+  startDateLabel?: string;
+  endDateLabel?: string;
 };
 
 const CalendarHeader = ({
@@ -176,6 +180,8 @@ export const DateRangeWrapper: React$AbstractComponent<
       cardWrapperClass,
       hideTimezone,
       today,
+      startDateLabel = 'Start Date',
+      endDateLabel = 'End Date',
     }: DateRangeWrapperProps,
     ref,
   ): React.ReactNode => {
@@ -218,6 +224,35 @@ export const DateRangeWrapper: React$AbstractComponent<
           ref={ref}
         >
           <CardHeader className={css.cardHeader}>
+            <BodySmall
+              className={css.selectedDate}
+              color={TEXT_COLORS.secondary}
+            >
+              {`${startDateLabel}: ${getFormattedDate(
+                MARKERS.DATE_RANGE_START,
+                dateRange,
+              )}`}
+            </BodySmall>
+
+            <Icon
+              name="minus"
+              size={ICON_SIZE.small}
+              type={ICON_TYPE.regular}
+              color={TEXT_COLORS.secondary}
+            />
+
+            <BodySmall
+              className={css.selectedDate}
+              color={TEXT_COLORS.secondary}
+            >
+              {`${endDateLabel}: ${getFormattedDate(
+                MARKERS.DATE_RANGE_END,
+                dateRange,
+              )}`}
+            </BodySmall>
+          </CardHeader>
+
+          <div className={css.calendarMenuContainer}>
             <CalendarHeader
               marker={MARKERS.DATE_RANGE_START}
               rangeStartMonth={rangeStartMonth}
@@ -258,7 +293,8 @@ export const DateRangeWrapper: React$AbstractComponent<
                 onMonthNavigate(MARKERS.DATE_RANGE_END, NAVIGATION_ACTION.PREV)
               }
             />
-          </CardHeader>
+          </div>
+
           <CardContent className={css.dateRangeCalendars}>
             <Calendar
               marker={MARKERS.DATE_RANGE_START}
@@ -272,7 +308,7 @@ export const DateRangeWrapper: React$AbstractComponent<
               {...commonProps}
             />
           </CardContent>
-          <CardFooter>
+          <CardFooter className={css.cardFooter}>
             <CardTitle className={css.timezoneDropdownContainer}>
               {!hideTimezone && (
                 <SimpleDropdown

package/lib/components/DateRangePicker/DateRangeWrapper.js

@@ -14,6 +14,7 @@ var _Card = require("../Card");
 var _Dropdown = require("../Dropdown");
 var _FocusManager = require("../FocusManager");
 var _Icon = require("../Icon");
+var _Text = require("../Text");
 var _Calendar = require("./Calendar.js");
 var _DateRangeWrapperModule = _interopRequireDefault(require("./DateRangeWrapper.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -112,7 +113,9 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     setRangeEndMonth,
     cardWrapperClass,
     hideTimezone,
-    today
+    today,
+    startDateLabel = 'Start Date',
+    endDateLabel = 'End Date'
   } = _ref2;
   const canNavigateCloser = _moment.default.utc(rangeStartMonth).year() !== _moment.default.utc(rangeEndMonth).year() || Math.abs(_moment.default.utc(rangeStartMonth).month() - _moment.default.utc(rangeEndMonth).month()) > 1;
   const handleApplyClick = () => {
@@ -149,6 +152,19 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ref: ref
   }, /*#__PURE__*/React.createElement(_Card.CardHeader, {
     className: _DateRangeWrapperModule.default.cardHeader
+  }, /*#__PURE__*/React.createElement(_Text.BodySmall, {
+    className: _DateRangeWrapperModule.default.selectedDate,
+    color: _Text.TEXT_COLORS.secondary
+  }, `${startDateLabel}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_START, dateRange)}`), /*#__PURE__*/React.createElement(_Icon.Icon, {
+    name: "minus",
+    size: _Icon.ICON_SIZE.small,
+    type: _Icon.ICON_TYPE.regular,
+    color: _Text.TEXT_COLORS.secondary
+  }), /*#__PURE__*/React.createElement(_Text.BodySmall, {
+    className: _DateRangeWrapperModule.default.selectedDate,
+    color: _Text.TEXT_COLORS.secondary
+  }, `${endDateLabel}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_END, dateRange)}`)), /*#__PURE__*/React.createElement("div", {
+    className: _DateRangeWrapperModule.default.calendarMenuContainer
   }, /*#__PURE__*/React.createElement(CalendarHeader, {
     marker: _utils.MARKERS.DATE_RANGE_START,
     rangeStartMonth: rangeStartMonth,
@@ -183,7 +199,9 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   }), /*#__PURE__*/React.createElement(_Calendar.Calendar, _extends({
     marker: _utils.MARKERS.DATE_RANGE_END,
     value: rangeEndMonth
-  }, commonProps))), /*#__PURE__*/React.createElement(_Card.CardFooter, null, /*#__PURE__*/React.createElement(_Card.CardTitle, {
+  }, commonProps))), /*#__PURE__*/React.createElement(_Card.CardFooter, {
+    className: _DateRangeWrapperModule.default.cardFooter
+  }, /*#__PURE__*/React.createElement(_Card.CardTitle, {
     className: _DateRangeWrapperModule.default.timezoneDropdownContainer
   }, !hideTimezone && /*#__PURE__*/React.createElement(_Dropdown.SimpleDropdown, {
     options: (0, _utils.getTimezones)(),

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

@@ -18,6 +18,7 @@ import classify from '../../utils/classify';
 import {
   addTimezoneEndOfDay,
   addTimezoneStartOfDay,
+  getFormattedDate,
   isAfter,
   isSameOrAfter,
   isSameOrBefore,
@@ -33,7 +34,8 @@ import {
 } from '../Card';
 import {Dropdown, SimpleDropdown} from '../Dropdown';
 import {FocusManager} from '../FocusManager';
-import {ClickableIcon} from '../Icon';
+import {ClickableIcon, Icon, ICON_SIZE, ICON_TYPE} from '../Icon';
+import {BodySmall, TEXT_COLORS} from '../Text';
 
 import {Calendar} from './Calendar.js';
 
@@ -79,6 +81,8 @@ type DateRangeWrapperProps = {
     ) => void,
   },
   today: string,
+  startDateLabel?: string,
+  endDateLabel?: string,
 };
 
 const CalendarHeader = ({
@@ -184,6 +188,8 @@ export const DateRangeWrapper: React$AbstractComponent<
       cardWrapperClass,
       hideTimezone,
       today,
+      startDateLabel = 'Start Date',
+      endDateLabel = 'End Date',
     }: DateRangeWrapperProps,
     ref,
   ): React.Node => {
@@ -228,6 +234,35 @@ export const DateRangeWrapper: React$AbstractComponent<
           ref={ref}
         >
           <CardHeader className={css.cardHeader}>
+            <BodySmall
+              className={css.selectedDate}
+              color={TEXT_COLORS.secondary}
+            >
+              {`${startDateLabel}: ${getFormattedDate(
+                MARKERS.DATE_RANGE_START,
+                dateRange,
+              )}`}
+            </BodySmall>
+
+            <Icon
+              name="minus"
+              size={ICON_SIZE.small}
+              type={ICON_TYPE.regular}
+              color={TEXT_COLORS.secondary}
+            />
+
+            <BodySmall
+              className={css.selectedDate}
+              color={TEXT_COLORS.secondary}
+            >
+              {`${endDateLabel}: ${getFormattedDate(
+                MARKERS.DATE_RANGE_END,
+                dateRange,
+              )}`}
+            </BodySmall>
+          </CardHeader>
+
+          <div className={css.calendarMenuContainer}>
             <CalendarHeader
               marker={MARKERS.DATE_RANGE_START}
               rangeStartMonth={rangeStartMonth}
@@ -268,7 +303,8 @@ export const DateRangeWrapper: React$AbstractComponent<
                 onMonthNavigate(MARKERS.DATE_RANGE_END, NAVIGATION_ACTION.PREV)
               }
             />
-          </CardHeader>
+          </div>
+
           <CardContent className={css.dateRangeCalendars}>
             <Calendar
               marker={MARKERS.DATE_RANGE_START}
@@ -282,7 +318,7 @@ export const DateRangeWrapper: React$AbstractComponent<
               {...commonProps}
             />
           </CardContent>
-          <CardFooter>
+          <CardFooter className={css.cardFooter}>
             <CardTitle className={css.timezoneDropdownContainer}>
               {!hideTimezone && (
                 <SimpleDropdown

package/lib/components/DateRangePicker/DateRangeWrapper.module.css

@@ -6,8 +6,11 @@
 @value (
   spaceNone, 
   spaceSmall,
-  spaceXSmall
+  spaceXSmall,
+  spaceMedium
 ) from '../../styles/variables/_space.css';
+@value (borderRadiusMedium) from '../../styles/variables/_border.css';
+@value (colorBackgroundPrimary) from '../../styles/variables/_color.css';
 
 .dateRangeWrapper {
   display: flex;
@@ -18,6 +21,15 @@
   width: sizeFluid;
   padding: spaceXSmall;
   gap: spaceSmall;
+  background-color: colorBackgroundPrimary;
+  border-top-left-radius: borderRadiusMedium;
+  border-top-right-radius: borderRadiusMedium;
+}
+
+.cardFooter {
+  background-color: colorBackgroundPrimary;
+  border-bottom-left-radius: borderRadiusMedium;
+  border-bottom-right-radius: borderRadiusMedium;
 }
 
 .calendarHeader {
@@ -62,3 +74,22 @@
 .mainContainer {
   width: sizeFluid;
 }
+
+.selectedDateContainer {
+  display: flex;
+  gap: spaceMedium;
+  padding: spaceXSmall spaceSmall;
+}
+
+.selectedDate {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+
+.calendarMenuContainer {
+  display: flex;
+  gap: spaceSmall;
+  width: sizeFluid;
+  padding: spaceXSmall;
+}

package/lib/components/Modal/Modal.d.ts

@@ -13,6 +13,7 @@ import {
   motionDurationNormal,
   motionDurationSlow,
 } from '../../styles/variables/_motion';
+import {opacity0, opacity100} from '../../styles/variables/_opacity';
 import {spaceNegHalfFluid} from '../../styles/variables/_space';
 import classify from '../../utils/classify';
 import {uuid} from '../../utils/helpers';
@@ -82,12 +83,15 @@ const DEFAULT_MODAL_ANIMATION = {
   },
   initial: {
     transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(0.95)`,
+    opacity: opacity0,
   },
   open: {
     transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(1)`,
+    opacity: opacity100,
   },
   close: {
     transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(0.95)`,
+    opacity: opacity0,
   },
 };
 export const ModalHeader = ({
@@ -270,7 +274,7 @@ export const Modal = ({
     };
   }, [isOpen, onClose]);
 
-  if (!isTransitioning && !isOpen) {
+  if (!isOpen && !isMounted) {
     // Check overflow after resetting the DOM for modal. This should always happen after DOM reset
     // TODO(Nishant): Better way to do this?
     setTimeout(() => {
@@ -311,6 +315,10 @@ export const Modal = ({
               classNames?.backdrop,
             )}
             onClick={onBackdropClick}
+            style={{
+              opacity: styles?.opacity,
+              transition: styles?.transition,
+            }}
           />
         )}
 

package/lib/components/Modal/Modal.js

@@ -9,6 +9,7 @@ var _reactDom = require("react-dom");
 var _react2 = require("@floating-ui/react");
 var _useMountTransition = _interopRequireDefault(require("../../hooks/useMountTransition"));
 var _motion = require("../../styles/variables/_motion");
+var _opacity = require("../../styles/variables/_opacity");
 var _space = require("../../styles/variables/_space");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _helpers = require("../../utils/helpers");
@@ -25,13 +26,16 @@ const DEFAULT_MODAL_ANIMATION = {
     close: parseInt(_motion.motionDurationNormal)
   },
   initial: {
-    transform: `translate(${_space.spaceNegHalfFluid}, ${_space.spaceNegHalfFluid}) scale(0.95)`
+    transform: `translate(${_space.spaceNegHalfFluid}, ${_space.spaceNegHalfFluid}) scale(0.95)`,
+    opacity: _opacity.opacity0
   },
   open: {
-    transform: `translate(${_space.spaceNegHalfFluid}, ${_space.spaceNegHalfFluid}) scale(1)`
+    transform: `translate(${_space.spaceNegHalfFluid}, ${_space.spaceNegHalfFluid}) scale(1)`,
+    opacity: _opacity.opacity100
   },
   close: {
-    transform: `translate(${_space.spaceNegHalfFluid}, ${_space.spaceNegHalfFluid}) scale(0.95)`
+    transform: `translate(${_space.spaceNegHalfFluid}, ${_space.spaceNegHalfFluid}) scale(0.95)`,
+    opacity: _opacity.opacity0
   }
 };
 const ModalHeader = _ref => {
@@ -193,7 +197,7 @@ const Modal = _ref4 => {
       window.removeEventListener('keyup', onKeyPress);
     };
   }, [isOpen, onClose]);
-  if (!isTransitioning && !isOpen) {
+  if (!isOpen && !isMounted) {
     // Check overflow after resetting the DOM for modal. This should always happen after DOM reset
     // TODO(Nishant): Better way to do this?
     setTimeout(() => {
@@ -222,7 +226,11 @@ const Modal = _ref4 => {
     className: (0, _classify.default)(_ModalModule.default.backdrop, {
       [_ModalModule.default.darkBackdrop]: !hideBackdrop
     }, classNames?.backdrop),
-    onClick: onBackdropClick
+    onClick: onBackdropClick,
+    style: {
+      opacity: styles?.opacity,
+      transition: styles?.transition
+    }
   }), isMounted && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_ModalModule.default.modal, {
       [_ModalModule.default.small]: size === 'small',

package/lib/components/Modal/Modal.js.flow

@@ -17,6 +17,7 @@ import {
   motionDurationNormal,
   motionDurationSlow,
 } from '../../styles/variables/_motion';
+import {opacity0, opacity100} from '../../styles/variables/_opacity';
 import {spaceNegHalfFluid} from '../../styles/variables/_space';
 import classify from '../../utils/classify';
 import {uuid} from '../../utils/helpers';
@@ -88,12 +89,15 @@ const DEFAULT_MODAL_ANIMATION = {
   },
   initial: {
     transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(0.95)`,
+    opacity: opacity0,
   },
   open: {
     transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(1)`,
+    opacity: opacity100,
   },
   close: {
     transform: `translate(${spaceNegHalfFluid}, ${spaceNegHalfFluid}) scale(0.95)`,
+    opacity: opacity0,
   },
 };
 
@@ -276,7 +280,7 @@ export const Modal = ({
     };
   }, [isOpen, onClose]);
 
-  if (!isTransitioning && !isOpen) {
+  if (!isOpen && !isMounted) {
     // Check overflow after resetting the DOM for modal. This should always happen after DOM reset
     // TODO(Nishant): Better way to do this?
     setTimeout(() => {
@@ -318,6 +322,10 @@ export const Modal = ({
               classNames?.backdrop,
             )}
             onClick={onBackdropClick}
+            style={{
+              opacity: styles?.opacity,
+              transition: styles?.transition,
+            }}
           />
         )}
 

package/lib/components/TokenListInput/TokenValueChips.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {elevationMenu} from '../../styles/variables/_elevation';
 import {Chip} from '../Chip';
 import {Tooltip} from '../Tooltip';
 type Props<T> = {
@@ -23,7 +24,7 @@ function defaultResolveTokenValue<T>({
   // $FlowFixMe[prop-missing] - assumes token has label and key
   return (
     // $FlowFixMe - assumes token has label and key
-    <Tooltip body={token?.label}>
+    <Tooltip body={token?.label} elevation={elevationMenu}>
       <Chip // $FlowFixMe - assumes token has key
         key={token?.key}
         onDismiss={(_) => onDismiss?.(token)}

package/lib/components/TokenListInput/TokenValueChips.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TokenValueChips = TokenValueChips;
 var React = _interopRequireWildcard(require("react"));
+var _elevation = require("../../styles/variables/_elevation");
 var _Chip = require("../Chip");
 var _Tooltip = require("../Tooltip");
 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); }
@@ -22,7 +23,8 @@ function defaultResolveTokenValue(_ref) {
     /*#__PURE__*/
     // $FlowFixMe - assumes token has label and key
     React.createElement(_Tooltip.Tooltip, {
-      body: token?.label
+      body: token?.label,
+      elevation: _elevation.elevationMenu
     }, /*#__PURE__*/React.createElement(_Chip.Chip
     // $FlowFixMe - assumes token has key
     , {

package/lib/components/TokenListInput/TokenValueChips.js.flow

@@ -1,6 +1,7 @@
 // @flow strict
 import * as React from 'react';
 
+import {elevationMenu} from '../../styles/variables/_elevation';
 import {Chip} from '../Chip';
 import {Tooltip} from '../Tooltip';
 
@@ -29,7 +30,7 @@ function defaultResolveTokenValue<T>({
 
   return (
     // $FlowFixMe - assumes token has label and key
-    <Tooltip body={token?.label}>
+    <Tooltip body={token?.label} elevation={elevationMenu}>
       <Chip
         // $FlowFixMe - assumes token has key
         key={token?.key}

package/lib/utils/date-range-picker/date-range-picker.d.ts

@@ -116,8 +116,10 @@ export const wrangleMoment = (date?: string | Date): Date => {
 
   return date instanceof moment ? date.toDate() : parseISO(date);
 };
-export const formatIsoDate = (date?: string | Date): string =>
-  moment.utc(date).format('YYYY-MM-DD');
+export const formatIsoDate = (
+  date?: string | Date,
+  format: string = 'YYYY-MM-DD',
+): string => moment.utc(date).format(format);
 export const isStartOfRange = ({startDate}: DateRange, date: string): boolean =>
   Boolean(startDate) && moment.utc(date).isSame(moment.utc(startDate), 'd');
 export const isEndOfRange = ({endDate}: DateRange, date: string): boolean =>
@@ -389,3 +391,21 @@ export const isBetween = (
 // If the date results in a date that exists in the calendar
 export const isValid = (date?: string | null | undefined): boolean =>
   moment.utc(date).isValid();
+export const getFormattedDate = (
+  marker: string,
+  dateRange: DateRange,
+): string => {
+  const {startDate, endDate} = dateRange;
+
+  switch (marker) {
+    case MARKERS.DATE_RANGE_START:
+      return startDate
+        ? moment.utc(startDate).format('MMM DD, YYYY')
+        : 'MMM DD, YYYY';
+
+    default:
+      return endDate
+        ? moment.utc(endDate).format('MMM DD, YYYY')
+        : 'MMM DD, YYYY';
+  }
+};

package/lib/utils/date-range-picker/date-range-picker.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrangleMoment = exports.isValid = exports.isStartOfRange = exports.isStartDateEndDateSame = exports.isSameOrBefore = exports.isSameOrAfter = exports.isSame = exports.isEndOfRange = exports.isBetween = exports.isBefore = exports.isAfter = exports.inDateRange = exports.getValidDates = exports.getTimezones = exports.getSubtractedDate = exports.getMonthEndDate = exports.getDaysInMonth = exports.getAvailableMonths = exports.getAddedDate = exports.generateAvailableYears = exports.formatIsoDate = exports.checkRangeValidity = exports.WEEKDAYS = exports.NAVIGATION_ACTION = exports.MONTHS = exports.MARKERS = exports.DATE_RANGE_PICKER_ERRORS = void 0;
+exports.wrangleMoment = exports.isValid = exports.isStartOfRange = exports.isStartDateEndDateSame = exports.isSameOrBefore = exports.isSameOrAfter = exports.isSame = exports.isEndOfRange = exports.isBetween = exports.isBefore = exports.isAfter = exports.inDateRange = exports.getValidDates = exports.getTimezones = exports.getSubtractedDate = exports.getMonthEndDate = exports.getFormattedDate = exports.getDaysInMonth = exports.getAvailableMonths = exports.getAddedDate = exports.generateAvailableYears = exports.formatIsoDate = exports.checkRangeValidity = exports.WEEKDAYS = exports.NAVIGATION_ACTION = exports.MONTHS = exports.MARKERS = exports.DATE_RANGE_PICKER_ERRORS = void 0;
 var _parseISO = _interopRequireDefault(require("date-fns/parseISO"));
 var _invariant = _interopRequireDefault(require("invariant"));
 var _lodash = require("lodash");
@@ -104,7 +104,10 @@ const wrangleMoment = date => {
   return date instanceof _moment.default ? date.toDate() : (0, _parseISO.default)(date);
 };
 exports.wrangleMoment = wrangleMoment;
-const formatIsoDate = date => _moment.default.utc(date).format('YYYY-MM-DD');
+const formatIsoDate = function (date) {
+  let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'YYYY-MM-DD';
+  return _moment.default.utc(date).format(format);
+};
 exports.formatIsoDate = formatIsoDate;
 const isStartOfRange = (_ref, date) => {
   let {
@@ -323,4 +326,17 @@ const isBetween = (date, startRange, endRange) => _moment.default.utc(date).isBe
 // If the date results in a date that exists in the calendar
 exports.isBetween = isBetween;
 const isValid = date => _moment.default.utc(date).isValid();
-exports.isValid = isValid;
+exports.isValid = isValid;
+const getFormattedDate = (marker, dateRange) => {
+  const {
+    startDate,
+    endDate
+  } = dateRange;
+  switch (marker) {
+    case MARKERS.DATE_RANGE_START:
+      return startDate ? _moment.default.utc(startDate).format('MMM DD, YYYY') : 'MMM DD, YYYY';
+    default:
+      return endDate ? _moment.default.utc(endDate).format('MMM DD, YYYY') : 'MMM DD, YYYY';
+  }
+};
+exports.getFormattedDate = getFormattedDate;

package/lib/utils/date-range-picker/date-range-picker.js.flow

@@ -88,8 +88,10 @@ export const wrangleMoment = (date?: string | Date): Date => {
   return date instanceof moment ? date.toDate() : parseISO(date);
 };
 
-export const formatIsoDate = (date?: string | Date): string =>
-  moment.utc(date).format('YYYY-MM-DD');
+export const formatIsoDate = (
+  date?: string | Date,
+  format?: string = 'YYYY-MM-DD',
+): string => moment.utc(date).format(format);
 
 export const isStartOfRange = ({startDate}: DateRange, date: string): boolean =>
   Boolean(startDate) && moment.utc(date).isSame(moment.utc(startDate), 'd');
@@ -370,3 +372,20 @@ export const isBetween = (
 
 // If the date results in a date that exists in the calendar
 export const isValid = (date?: ?string): boolean => moment.utc(date).isValid();
+
+export const getFormattedDate = (
+  marker: string,
+  dateRange: DateRange,
+): string => {
+  const {startDate, endDate} = dateRange;
+  switch (marker) {
+  case MARKERS.DATE_RANGE_START:
+    return startDate
+      ? moment.utc(startDate).format('MMM DD, YYYY')
+      : 'MMM DD, YYYY';
+  default:
+    return endDate
+      ? moment.utc(endDate).format('MMM DD, YYYY')
+      : 'MMM DD, YYYY';
+  }
+};

package/package.json

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