@codecademy/gamut

68.2.268.2.3-alpha.93a7da.0
dist/DatePicker/DatePickerCalendar/Calendar/CalendarFooter.js
+dist/DatePicker/DatePickerCalendar/Calendar/CalendarFooter.jsNew file
+63
Index: package/dist/DatePicker/DatePickerCalendar/Calendar/CalendarFooter.js
===================================================================
--- package/dist/DatePicker/DatePickerCalendar/Calendar/CalendarFooter.js
+++ package/dist/DatePicker/DatePickerCalendar/Calendar/CalendarFooter.js
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { FlexBox } from '../../../Box';
+import { TextButton } from '../../../Button';
+import { DEFAULT_DATE_PICKER_TRANSLATIONS } from '../../utils/translations';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CalendarFooter = ({
+  clearButton,
+  quickActions = []
+}) => {
+  if (quickActions.length === 0 && !clearButton) return null;
+  const actions = quickActions.slice(0, 3);
+  return /*#__PURE__*/_jsxs(FlexBox, {
+    alignItems: {
+      _: 'flex-start',
+      xs: 'center'
+    },
+    borderTop: 1,
+    flexDirection: {
+      _: 'column',
+      xs: 'row'
+    },
+    gap: 12,
+    justifyContent: clearButton ? 'space-between' : 'flex-end',
+    p: 12,
+    children: [clearButton && /*#__PURE__*/_jsx(FlexBox, {
+      order: {
+        _: 2,
+        xs: 1
+      },
+      children: /*#__PURE__*/_jsx(TextButton, {
+        alignSelf: {
+          _: 'flex-start',
+          xs: 'center'
+        },
+        disabled: clearButton.disabled,
+        onClick: () => clearButton.onClick?.(),
+        children: clearButton.text ?? DEFAULT_DATE_PICKER_TRANSLATIONS.clearButtonText
+      })
+    }), /*#__PURE__*/_jsx(FlexBox, {
+      flexDirection: {
+        _: 'column',
+        xs: 'row'
+      },
+      gap: 8,
+      order: {
+        _: 1,
+        xs: 2
+      },
+      wrap: true,
+      children: actions.map((action, index) => /*#__PURE__*/_jsx(TextButton, {
+        alignSelf: {
+          _: 'flex-start',
+          xs: 'center'
+        }
+        // eslint-disable-next-line react/no-array-index-key -- displayText may duplicate
+        ,
+
+        onClick: action.onClick,
+        children: action.displayText
+      }, `${action.displayText}-${index}`))
+    })]
+  });
+};
\ No newline at end of file