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

package/.cspell/custom-words.txt

@@ -57,6 +57,7 @@ Jangid
 jscodeshift
 Kamchatskiy
 Kemshetty
+keshavsensehq
 khanacademy
 Kiritimati
 Kosrae

package/.github/workflows/pages.yml

@@ -35,7 +35,7 @@ jobs:
         uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '18.20.5'
+          node-version: '20.19.2'
       - name: Install and Build 🔧
         # Install npm packages and build the Storybook files
         run: |

package/.github/workflows/publish_to_npm.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Check Permissions
         id: check-permissions
         env:
-          ALLOWED_USERS: superrover, Anant-Raj, diwakersurya, ashwini-sensehq, vish-sah, VishalBarnawal, sanskar-s, VivekJangid, sharad-kushwah, Swatantramishra1, bhatiarush27, darsh-mecwan-sense
+          ALLOWED_USERS: superrover, Anant-Raj, diwakersurya, ashwini-sensehq, vish-sah, VishalBarnawal, sanskar-s, VivekJangid, sharad-kushwah, Swatantramishra1, bhatiarush27, darsh-mecwan-sense, keshavsensehq
         if: ${{ !contains(env.ALLOWED_USERS, github.actor) }}
         run: |
           echo "You don't have correct permissions to do this release"
@@ -36,21 +36,11 @@ jobs:
         with:
           token: ${{ secrets.NPM_PUBLISH_USER_ACCESS_TOKEN }}
           fetch-depth: '0'
-
-      # Note(Nishant): Possible cleanup required Setup Node 18 for the base npm package
       - name: Setup Node.js @18
         uses: actions/setup-node@v4
         with:
           registry-url: https://registry.npmjs.org/
-          node-version: '18.20.5'
-
-      # Note(Nishant): Possible cleanup required Setup Node 20 for the dts-generator
-      # We already pin the node versions with volta so this should be fine(but not ideal)
-      - name: Setup Node.js @20
-        uses: actions/setup-node@v4
-        with:
-          registry-url: https://registry.npmjs.org/
-          node-version: '20.9.0'
+          node-version: '20.19.2'
 
       # -------------------------------------------------------------------------------------
       # Note(Nishant): Install isolated dependencies for app and the DTS generator tool

package/.github/workflows/pull_request_checks.yml

@@ -19,21 +19,11 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
-
-      # Note(Nishant): Possible cleanup required Setup Node 18 for the base npm package
       - name: Setup Node.js @18
         uses: actions/setup-node@v4
         with:
           registry-url: https://registry.npmjs.org/
-          node-version: '18.20.5'
-
-      # Note(Nishant): Possible cleanup required Setup Node 20 for the dts-generator
-      # We already pin the node versions with volta so this should be fine(but not ideal)
-      - name: Setup Node.js @20
-        uses: actions/setup-node@v4
-        with:
-          registry-url: https://registry.npmjs.org/
-          node-version: '20.9.0'
+          node-version: '20.19.2'
 
       # Install project dependencies
       - name: Install dependencies

package/.storybook/SenseTheme.js

@@ -1,4 +1,4 @@
-import {create} from '@storybook/theming';
+import {create} from 'storybook/theming';
 
 export default create({
   base: 'light',

package/.storybook/main.js

@@ -7,45 +7,21 @@ module.exports = {
   },
 
   // Add any Storybook addons you want here: https://storybook.js.org/addons/
-  addons: [{
-    name: '@storybook/addon-docs',
-    options: {
-      configureJSX: true,
-      babelOptions: {},
-      sourceLoaderOptions: null,
-      transcludeMarkdown: true,
-    },
-  }, 'storybook-css-modules', '@storybook/addon-a11y', '@storybook/addon-essentials', // 'storybook-vscode-component/register', This is not supported in storybook 7
-  '@storybook/testing-react', '@storybook/addon-mdx-gfm', {
-    name: '@storybook/addon-storysource',
-    options: {
-      loaderOptions: {
-        injectStoryParameters: false,
-        prettierConfig: {
-          singleQuote: true,
-          trailingComma: 'all',
-          printWidth: 80,
-          tabWidth: 2,
-          bracketSpacing: false,
-          endOfLine: 'lf',
-          overrides: [
-            {
-              files: ['*.js', '*.jsx'],
-              options: {
-                parser: 'babel-flow',
-              },
-            },
-            {
-              files: ['*.css'],
-              options: {
-                parser: 'css',
-              },
-            },
-          ],
-        },
+  addons: [
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        configureJSX: true,
+        babelOptions: {},
+        sourceLoaderOptions: null,
+        transcludeMarkdown: true,
       },
-    },
-  }, '@storybook/addon-webpack5-compiler-babel', '@chromatic-com/storybook'],
+    }, // 'storybook-vscode-component/register', This is not supported in storybook 7
+    'storybook-css-modules',
+    '@storybook/addon-a11y',
+    '@storybook/addon-webpack5-compiler-babel',
+    '@chromatic-com/storybook',
+  ],
 
   babel: async (options) => ({
     ...options,
@@ -112,6 +88,6 @@ module.exports = {
   },
 
   typescript: {
-    reactDocgen: 'react-docgen-typescript'
-  }
+    reactDocgen: 'react-docgen-typescript',
+  },
 };

package/.storybook/manager.js

@@ -1,10 +1,9 @@
 // .storybook/manager.js
 
-import {addons} from '@storybook/addons';
-import {themes} from '@storybook/theming';
-
+import {addons} from 'storybook/manager-api';
 import senseTheme from './SenseTheme';
 
+
 addons.setConfig({
   theme: senseTheme,
 });

package/.storybook/preview.js

@@ -31,10 +31,30 @@
  * You can set global parameters in this file
  **/
 
-import {themes} from '@storybook/theming';
+import {themes} from 'storybook/theming';
 import {wd} from 'paths.macro';
 
 export const parameters = {
+  // Note(Nishant): This is a workaround to disable the a11y checks for the storybook.
+  // This is because the storybook is not a web application and does not have a viewport.
+  a11y: {
+    config: {
+      rules: [
+        {
+          id: 'landmark-one-main',
+          enabled: false,
+        },
+        {
+          id: 'meta-viewport',
+          enabled: false,
+        },
+        {
+          id: 'page-has-heading-one',
+          enabled: false,
+        },
+      ],
+    },
+  },
   controls: {
     disableSaveFromUI: true,
   },
@@ -46,6 +66,7 @@ export const parameters = {
   },
   docs: {
     theme: themes.light,
+    codePanel: true,
   },
   Canvas: {
     theme: themes.light,

package/.vscode/settings.json

@@ -22,5 +22,6 @@
     "titleBar.inactiveBackground": "#42b88399",
     "titleBar.inactiveForeground": "#15202b99"
   },
-  "peacock.color": "#42b883"
+  "peacock.color": "#42b883",
+  "eslint.notebooks.rules.customizations": []
 }

package/CHANGELOG.md

@@ -2,6 +2,38 @@
 
 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.43](https://github.com/spaced-out/ui-design-system/compare/v0.3.42...v0.3.43) (2025-06-16)
+
+
+### Features
+
+* added new component filter button dropdown with children support ([#356](https://github.com/spaced-out/ui-design-system/issues/356)) ([968728f](https://github.com/spaced-out/ui-design-system/commit/968728f230497825f1d7a0dc74fee925747fe656))
+* **GDS-511:** infinite pagination with virtualised items list ([#339](https://github.com/spaced-out/ui-design-system/issues/339)) ([f10dc53](https://github.com/spaced-out/ui-design-system/commit/f10dc530f7a093aa5cf9d72d58a93975d2b4b0bc))
+* **icon:** disabled prop in clickable icon ([#354](https://github.com/spaced-out/ui-design-system/issues/354)) ([75f647c](https://github.com/spaced-out/ui-design-system/commit/75f647c875b965bc6bcac09016fe696ebfe4b904))
+* replaces deprecated componentSubtitle with docs.subtitle & stroke-width with strokeWidth ([#352](https://github.com/spaced-out/ui-design-system/issues/352)) ([4e0af03](https://github.com/spaced-out/ui-design-system/commit/4e0af037270ae3539a07741719d1f148b8a0874f))
+* **scripts:** support nested paths in create-component script ([#351](https://github.com/spaced-out/ui-design-system/issues/351)) ([fe20642](https://github.com/spaced-out/ui-design-system/commit/fe20642bc988cce6a0980f018a56be8d87822b98))
+* upgrade to storybook 9 and related changes ([#355](https://github.com/spaced-out/ui-design-system/issues/355)) ([caad155](https://github.com/spaced-out/ui-design-system/commit/caad1553f075f7e0e9f7654a9a901b38cad101bc))
+
+
+### Bug Fixes
+
+* added new node version ([3aa3152](https://github.com/spaced-out/ui-design-system/commit/3aa3152529d5e976be6b0d1f27a0442e24f6df21))
+* added user to release job ([fd3c071](https://github.com/spaced-out/ui-design-system/commit/fd3c071677f3335eea45fd9f2dbb8286090099df))
+* fixes the copy issue in the prerelease version ([cee9be4](https://github.com/spaced-out/ui-design-system/commit/cee9be469888914330e9dd8478933c6c701677d5))
+
+### [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/CONTRIBUTING.md

@@ -90,6 +90,25 @@ yarn generate YourComponentName
       index.js
 ```
 
+For nested components (like charts), use the following format:
+
+```bash
+yarn generate ParentFolder/YourComponentName
+```
+
+This will generate:
+```bash
+/src
+  /components
+    /ParentFolderName
+      /YourComponentName
+        YourComponentName.jsx
+        YourComponentName.stories.jsx
+        YourComponentName.module.css
+        YourComponentName.stories.module.css
+        index.js
+```
+
 > The default templates for each file can be modified under `scripts/templates`.
 
 > This script also appends YourComponentName exports in **`src/components/index.js`**.

package/dts-generator/package.json

@@ -10,7 +10,7 @@
     "jscodeshift": "^17.3.0"
   },
   "volta": {
-    "node": "20.9.0",
+    "node": "20.19.2",
     "yarn": "1.22.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)(),