@kaizen/components 1.47.2 → 1.47.4

package/dist/esm/TextField/TextField.module.scss.mjs

@@ -10,5 +10,5 @@ var styles = {
   "caution": "TextField-module_caution__3gzHk",
   "message": "TextField-module_message__bQOgK"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/Tile/MultiActionTile/MultiActionTile.module.scss.mjs

@@ -4,5 +4,5 @@ var styles = {
   "actions": "MultiActionTile-module_actions__mntsC",
   "secondaryAction": "MultiActionTile-module_secondaryAction__DuXdD"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/Tile/TileGrid/TileGrid.module.scss.mjs

@@ -3,5 +3,5 @@ var css_248z = ".TileGrid-module_grid__1WCNc{grid-gap:var(--spacing-md,1.5rem);d
 var styles = {
   "grid": "TileGrid-module_grid__1WCNc"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/Tile/subcomponents/GenericTile/GenericTile.module.scss.mjs

@@ -20,5 +20,5 @@ var styles = {
   "information": "GenericTile-module_information__wKXBp",
   "footer": "GenericTile-module_footer__u2Pei"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/TimeField/TimeField.module.scss.mjs

@@ -8,5 +8,5 @@ var styles = {
   "isDisabled": "TimeField-module_isDisabled__rpEc8",
   "error": "TimeField-module_error__tK2QY"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/TimeField/subcomponents/TimeSegment/TimeSegment.module.scss.mjs

@@ -7,5 +7,5 @@ var styles = {
   "literal": "TimeSegment-module_literal__mOkqz",
   "dayPeriod": "TimeSegment-module_dayPeriod__fzT5I"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/TitleBlockZen/TitleBlockZen.module.scss.mjs

@@ -51,5 +51,5 @@ var styles = {
   "breadcrumbText": "TitleBlockZen-module_breadcrumbText__O-GCu",
   "circle": "TitleBlockZen-module_circle__4bfl6"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/TitleBlockZen/subcomponents/MainActions.module.scss.mjs

@@ -3,5 +3,5 @@ var css_248z = ".MainActions-module_mainActionsContainer__wN117{align-items:cent
 var styles = {
   "mainActionsContainer": "MainActions-module_mainActionsContainer__wN117"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/TitleBlockZen/subcomponents/MobileActions.module.scss.mjs

@@ -14,5 +14,5 @@ var styles = {
   "mobileActionsExpandButton": "MobileActions-module_mobileActionsExpandButton__shDFU",
   "mobileActionsChevronSquare": "MobileActions-module_mobileActionsChevronSquare__u4OYT"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/TitleBlockZen/subcomponents/NavigationTabs.module.scss.mjs

@@ -6,5 +6,5 @@ var styles = {
   "active": "NavigationTabs-module_active__-38QW",
   "lightBackground": "NavigationTabs-module_lightBackground__TR-5T"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/TitleBlockZen/subcomponents/TitleBlockMenuItem.module.scss.mjs

@@ -9,5 +9,5 @@ var styles = {
   "menuItem--active": "TitleBlockMenuItem-module_menuItem--active__f-tGu",
   "menuItem__Label": "TitleBlockMenuItem-module_menuItem__Label__YUtc5"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/TitleBlockZen/subcomponents/Toolbar.module.scss.mjs

@@ -5,5 +5,5 @@ var styles = {
   "toolbarItem": "Toolbar-module_toolbarItem__eekUL",
   "noGap": "Toolbar-module_noGap__4mNlF"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.scss.mjs

@@ -9,5 +9,5 @@ var styles = {
   "off": "ToggleSwitch-module_off__OhSEP",
   "reversed": "ToggleSwitch-module_reversed__Q3-iM"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.module.scss.mjs

@@ -6,5 +6,5 @@ var styles = {
   "inner": "ToggleSwitchField-module_inner__9-O0m",
   "on": "ToggleSwitchField-module_on__HQOkN"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/Tooltip/Tooltip.module.scss.mjs

@@ -18,5 +18,5 @@ var styles = {
   "displayFlex": "Tooltip-module_displayFlex__DZdVc",
   "displayInlineFlex": "Tooltip-module_displayInlineFlex__quEIM"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/VisuallyHidden/VisuallyHidden.module.scss.mjs

@@ -3,5 +3,5 @@ var css_248z = ".VisuallyHidden-module_srOnly__tTjOK{clip:rect(0 0 0 0);clip-pat
 var styles = {
   "srOnly": "VisuallyHidden-module_srOnly__tTjOK"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/Well/Well.module.scss.mjs

@@ -14,5 +14,5 @@ var styles = {
   "dashed": "Well-module_dashed__csujS",
   "none": "Well-module_none__rWwTB"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.module.scss.mjs

@@ -5,5 +5,5 @@ var styles = {
   "footerActionPrevious": "FooterActions-module_footerActionPrevious__yyzsX",
   "footerActionNext": "FooterActions-module_footerActionNext__GIowc"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.scss.mjs

@@ -11,5 +11,5 @@ var styles = {
   "stepDivider": "ProgressStepper-module_stepDivider__SaO4y",
   "stepperDescription": "ProgressStepper-module_stepperDescription__XT8Ra"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/Workflow/subcomponents/Footer/components/Root/FooterRoot.module.scss.mjs

@@ -3,5 +3,5 @@ var css_248z = ".FooterRoot-module_footerRoot__bvMSa{align-items:center;backgrou
 var styles = {
   "footerRoot": "FooterRoot-module_footerRoot__bvMSa"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/Workflow/subcomponents/Header/components/Actions/Actions.module.scss.mjs

@@ -3,5 +3,5 @@ var css_248z = ".Actions-module_actions__2Zdtd{align-items:center;display:flex;f
 var styles = {
   "actions": "Actions-module_actions__2Zdtd"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/Workflow/subcomponents/Header/components/Branding/Branding.module.scss.mjs

@@ -4,5 +4,5 @@ var styles = {
   "branding": "Branding-module_branding__Oayqr",
   "logo": "Branding-module_logo__rTXU9"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/Workflow/subcomponents/Header/components/Root/Root.module.scss.mjs

@@ -3,5 +3,5 @@ var css_248z = ".Root-module_root__cfRZi{align-items:center;background-color:var
 var styles = {
   "root": "Root-module_root__cfRZi"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/Workflow/subcomponents/Header/components/Titles/Titles.module.scss.mjs

@@ -6,5 +6,5 @@ var styles = {
   "prefix": "Titles-module_prefix__vV-WW",
   "status": "Titles-module_status__RvbTg"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/Workflow/subcomponents/Main/Main.module.scss.mjs

@@ -3,5 +3,5 @@ var css_248z = ".Main-module_main__H-zGJ{z-index:0}";
 var styles = {
   "main": "Main-module_main__H-zGJ"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/Workflow/subcomponents/Wrapper/Wrapper.module.scss.mjs

@@ -3,5 +3,5 @@ var css_248z = ".Wrapper-module_wrapper__EUUEZ{background:var(--color-gray-100,#
 var styles = {
   "wrapper": "Wrapper-module_wrapper__EUUEZ"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/__future__/Select/Select.module.scss.mjs

@@ -4,5 +4,5 @@ var styles = {
   "container": "Select-module_container__TaMKg",
   "notFullWidth": "Select-module_notFullWidth__Mr-3G"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/__future__/Select/subcomponents/ListBox/ListBox.module.scss.mjs

@@ -4,5 +4,5 @@ var styles = {
   "listBox": "ListBox-module_listBox__Uf6Mc",
   "focus": "ListBox-module_focus__yrwu3"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/__future__/Select/subcomponents/ListBoxSection/ListBoxSection.module.scss.mjs

@@ -5,5 +5,5 @@ var styles = {
   "sectionHeading": "ListBoxSection-module_sectionHeading__o6WzT",
   "sectionList": "ListBoxSection-module_sectionList__lJ35F"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/__future__/Select/subcomponents/Option/Option.module.scss.mjs

@@ -7,5 +7,5 @@ var styles = {
   "disabled": "Option-module_disabled__ob1Pw",
   "isSelected": "Option-module_isSelected__J3Z-z"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/__future__/Select/subcomponents/SectionDivider/SectionDivider.module.scss.mjs

@@ -3,5 +3,5 @@ var css_248z = ".SectionDivider-module_divider__qtq-c{margin:var(--spacing-8,.5r
 var styles = {
   "divider": "SectionDivider-module_divider__qtq-c"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/__future__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.module.scss.mjs

@@ -3,5 +3,5 @@ var css_248z = ".SelectPopoverContents-module_selectPopoverContents__9V5SB{paddi
 var styles = {
   "selectPopoverContents": "SelectPopoverContents-module_selectPopoverContents__9V5SB"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/__future__/Select/subcomponents/SelectToggle/SelectToggle.module.scss.mjs

@@ -11,5 +11,5 @@ var styles = {
   "reversed": "SelectToggle-module_reversed__ku-Ph",
   "value": "SelectToggle-module_value__XRxRl"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/__future__/Tag/RemovableTag/RemovableTag.module.scss.mjs

@@ -3,5 +3,5 @@ var css_248z = ".RemovableTag-module_removableTag__IwJHj{padding:var(--spacing-4
 var styles = {
   "removableTag": "RemovableTag-module_removableTag__IwJHj"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/__future__/Tag/RemovableTag/subcomponents/RemoveButton.module.scss.mjs

@@ -3,5 +3,5 @@ var css_248z = ".RemoveButton-module_removeButton__9yzxJ{appearance:none;backgro
 var styles = {
   "removeButton": "RemoveButton-module_removeButton__9yzxJ"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/__future__/Tag/Tag/Tag.module.scss.mjs

@@ -11,5 +11,5 @@ var styles = {
   "red": "Tag-module_red__cg1Rf",
   "purple": "Tag-module_purple__OR2Jt"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/__future__/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.module.scss.mjs

@@ -5,5 +5,5 @@ var styles = {
   "footerActionPrevious": "FooterActions-module_footerActionPrevious__2XByZ",
   "footerActionNext": "FooterActions-module_footerActionNext__IKRta"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/__future__/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.scss.mjs

@@ -11,5 +11,5 @@ var styles = {
   "stepDivider": "ProgressStepper-module_stepDivider__KEZPU",
   "stepperDescription": "ProgressStepper-module_stepperDescription__B00hX"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/__future__/Workflow/subcomponents/Footer/components/Root/FooterRoot.module.scss.mjs

@@ -3,5 +3,5 @@ var css_248z = ".FooterRoot-module_footerRoot__N-6nQ{align-items:center;backgrou
 var styles = {
   "footerRoot": "FooterRoot-module_footerRoot__N-6nQ"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/__future__/Workflow/subcomponents/Header/components/Actions/Actions.module.scss.mjs

@@ -3,5 +3,5 @@ var css_248z = ".Actions-module_actions__Prrp0{align-items:center;display:flex;f
 var styles = {
   "actions": "Actions-module_actions__Prrp0"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/__future__/Workflow/subcomponents/Header/components/Branding/Branding.module.scss.mjs

@@ -4,5 +4,5 @@ var styles = {
   "branding": "Branding-module_branding__4h-rD",
   "logo": "Branding-module_logo__vqqec"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/__future__/Workflow/subcomponents/Header/components/Root/Root.module.scss.mjs

@@ -3,5 +3,5 @@ var css_248z = ".Root-module_root__7DVw5{align-items:center;background-color:var
 var styles = {
   "root": "Root-module_root__7DVw5"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/__future__/Workflow/subcomponents/Header/components/Titles/Titles.module.scss.mjs

@@ -6,5 +6,5 @@ var styles = {
   "prefix": "Titles-module_prefix__40x8n",
   "status": "Titles-module_status__huuP7"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/__future__/Workflow/subcomponents/Main/Main.module.scss.mjs

@@ -3,5 +3,5 @@ var css_248z = ".Main-module_main__hMyB1{z-index:0}";
 var styles = {
   "main": "Main-module_main__hMyB1"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/esm/__future__/Workflow/subcomponents/Wrapper/Wrapper.module.scss.mjs

@@ -3,5 +3,5 @@ var css_248z = ".Wrapper-module_wrapper__89WmC{background:var(--color-gray-100,#
 var styles = {
   "wrapper": "Wrapper-module_wrapper__89WmC"
 };
-/*#__PURE__*/styleInject(css_248z);
+styleInject(css_248z);
 export { styles as default };

package/dist/types/Calendar/CalendarPopover/CalendarPopover.d.ts

@@ -1,16 +1,16 @@
 import React, { HTMLAttributes } from "react";
-import { Options } from "@popperjs/core";
+import { UseFloatingOptions } from "@floating-ui/react-dom";
 import { OverrideClassName } from "../../types/OverrideClassName";
 export type CalendarPopoverProps = {
     children: React.ReactNode;
     referenceElement: HTMLElement | null;
-    popperOptions?: Partial<Options>;
+    floatingOptions?: Partial<UseFloatingOptions>;
 } & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
 /**
  * Only for use with Calendar components.
  * @todo: Replace with Popover when we have a reusable one.
  */
 export declare const CalendarPopover: {
-    ({ children, referenceElement, popperOptions, classNameOverride, ...restProps }: CalendarPopoverProps): JSX.Element;
+    ({ children, referenceElement, floatingOptions, classNameOverride, ...restProps }: CalendarPopoverProps): JSX.Element;
     displayName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.47.2",
+  "version": "1.47.4",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -26,26 +26,26 @@
     "styles.css"
   ],
   "dependencies": {
-    "@floating-ui/react-dom": "^2.0.9",
+    "@floating-ui/react-dom": "^2.1.0",
     "@headlessui/react": "<=1.5.0",
-    "@internationalized/date": "^3.5.3",
+    "@internationalized/date": "^3.5.4",
     "@popperjs/core": "^2.11.8",
     "@reach/tabs": "^0.18.0",
-    "@react-aria/button": "^3.9.4",
-    "@react-aria/datepicker": "^3.10.0",
-    "@react-aria/focus": "^3.17.0",
-    "@react-aria/i18n": "^3.11.0",
-    "@react-aria/listbox": "^3.12.0",
-    "@react-aria/menu": "^3.14.0",
-    "@react-aria/overlays": "^3.22.0",
-    "@react-aria/select": "^3.14.4",
-    "@react-aria/utils": "^3.24.0",
-    "@react-stately/collections": "^3.10.6",
-    "@react-stately/datepicker": "^3.9.3",
-    "@react-stately/list": "^3.10.4",
-    "@react-stately/menu": "^3.7.0",
-    "@react-stately/select": "^3.6.3",
-    "@react-types/shared": "^3.23.0",
+    "@react-aria/button": "^3.9.5",
+    "@react-aria/datepicker": "^3.10.1",
+    "@react-aria/focus": "^3.17.1",
+    "@react-aria/i18n": "^3.11.1",
+    "@react-aria/listbox": "^3.12.1",
+    "@react-aria/menu": "^3.14.1",
+    "@react-aria/overlays": "^3.22.1",
+    "@react-aria/select": "^3.14.5",
+    "@react-aria/utils": "^3.24.1",
+    "@react-stately/collections": "^3.10.7",
+    "@react-stately/datepicker": "^3.9.4",
+    "@react-stately/list": "^3.10.5",
+    "@react-stately/menu": "^3.7.1",
+    "@react-stately/select": "^3.6.4",
+    "@react-types/shared": "^3.23.1",
     "classnames": "^2.5.1",
     "date-fns": "^3.6.0",
     "lodash.debounce": "^4.0.8",
@@ -70,7 +70,7 @@
     "react-select": "^5.8.0",
     "react-textfit": "^1.1.1",
     "resize-observer-polyfill": "^1.5.1",
-    "use-debounce": "^10.0.0",
+    "use-debounce": "^10.0.1",
     "uuid": "^9.0.1",
     "@kaizen/hosted-assets": "2.0.3"
   },
@@ -78,26 +78,24 @@
     "react-day-picker": "Version locked until a11y gets fixed (https://github.com/gpbl/react-day-picker/pull/1708)"
   },
   "devDependencies": {
-    "@babel/plugin-transform-react-pure-annotations": "^7.24.1",
     "@cultureamp/frontend-apis": "^9.5.0",
-    "@cultureamp/i18n-react-intl": "^2.5.6",
+    "@cultureamp/i18n-react-intl": "^2.5.7",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react-dom": "^18.3.0",
     "@types/react-textfit": "^1.1.4",
     "@types/uuid": "^9.0.8",
-    "agadoo": "^3.0.0",
     "autoprefixer": "^10.4.19",
     "query-string": "^9.0.0",
     "react-intl": "^6.6.8",
-    "rollup": "^4.17.2",
+    "rollup": "^4.18.0",
     "sass": "^1.77.2",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.3.2",
-    "ts-jest": "^29.1.2",
+    "ts-jest": "^29.1.3",
     "tslib": "^2.6.2",
     "tsx": "^4.10.2",
-    "@kaizen/package-bundler": "1.0.0",
-    "@kaizen/design-tokens": "10.4.0"
+    "@kaizen/design-tokens": "10.4.0",
+    "@kaizen/package-bundler": "1.0.2"
   },
   "devDependenciesComments": {
     "postcss": "Installed in root",
@@ -105,7 +103,7 @@
     "postcss-preset-env": "Installed in root"
   },
   "peerDependencies": {
-    "@cultureamp/i18n-react-intl": "^2.5.6",
+    "@cultureamp/i18n-react-intl": "^2.5.7",
     "react": "^18.3.1",
     "react-intl": "^6.6.8"
   },
@@ -113,9 +111,9 @@
     "build": "pnpm package-bundler build-shared-ui && pnpm build:global-styles",
     "build:global-styles": "postcss ./styles/global.css --output dist/styles.css",
     "clean": "rm -rf dist",
+    "lint:ts": "tsc --noEmit",
     "test": "FORCE_COLOR=1 jest",
     "test:ci": "pnpm test -- --ci",
-    "test:treeshake": "agadoo ./dist/esm/index.mjs",
     "update-icons": "./src/Icon/bin/update-icons.sh",
     "i18n:extract": "pnpm i18n-extract"
   }

package/src/Calendar/CalendarPopover/CalendarPopover.module.scss

@@ -2,11 +2,18 @@
 @import "~@kaizen/design-tokens/sass/color";
 @import "~@kaizen/design-tokens/sass/shadow";
 @import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/layout";
 
 .calendarPopover {
   background-color: $color-white;
   z-index: 1010;
   box-shadow: $shadow-large-box-shadow;
   border-radius: $border-borderless-border-radius;
-  padding: $spacing-md;
+  padding: $spacing-12 $spacing-8;
+  box-sizing: border-box;
+  overflow: auto;
+
+  @media (min-width: $layout-breakpoints-medium) {
+    padding: $spacing-24;
+  }
 }

package/src/Calendar/CalendarPopover/CalendarPopover.tsx

@@ -1,14 +1,20 @@
 import React, { HTMLAttributes, useState } from "react"
-import { Options } from "@popperjs/core"
+import {
+  autoUpdate,
+  offset,
+  useFloating,
+  UseFloatingOptions,
+  size,
+  autoPlacement,
+} from "@floating-ui/react-dom"
 import classnames from "classnames"
-import { usePopper } from "react-popper"
 import { OverrideClassName } from "~types/OverrideClassName"
 import styles from "./CalendarPopover.module.scss"
 
 export type CalendarPopoverProps = {
   children: React.ReactNode
   referenceElement: HTMLElement | null
-  popperOptions?: Partial<Options>
+  floatingOptions?: Partial<UseFloatingOptions>
 } & OverrideClassName<HTMLAttributes<HTMLDivElement>>
 
 /**
@@ -18,37 +24,45 @@ export type CalendarPopoverProps = {
 export const CalendarPopover = ({
   children,
   referenceElement,
-  popperOptions,
+  floatingOptions,
   classNameOverride,
   ...restProps
 }: CalendarPopoverProps): JSX.Element => {
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+  const [floatingElement, setFloatingElement] = useState<HTMLDivElement | null>(
     null
   )
 
-  const { styles: popperStyles, attributes: popperAttributes } = usePopper(
-    referenceElement,
-    popperElement,
-    {
-      modifiers: [
-        {
-          name: "offset",
-          options: {
-            offset: [0, 15],
-          },
+  const { floatingStyles } = useFloating({
+    placement: "bottom-start",
+    elements: {
+      reference: referenceElement,
+      floating: floatingElement,
+    },
+    strategy: "fixed",
+    middleware: [
+      size({
+        apply({ availableHeight, availableWidth, elements }) {
+          Object.assign(elements.floating.style, {
+            // 155 is enough of a minimum to cut off half of the second row of dates.
+            // This indicates to users that there is more content that is scrollable
+            maxHeight: `${Math.max(availableHeight - 25, 155)}px`,
+            maxWidth: `${availableWidth}px`,
+          })
         },
-      ],
-      placement: "bottom-start",
-      strategy: "fixed",
-      ...popperOptions,
-    }
-  )
+      }),
+      offset(15),
+      autoPlacement({
+        allowedPlacements: ["bottom-start", "bottom", "top-start", "top"],
+      }),
+    ],
+    whileElementsMounted: autoUpdate,
+    ...floatingOptions,
+  })
 
   return (
     <div
-      ref={setPopperElement}
-      style={popperStyles?.popper}
-      {...popperAttributes?.popper}
+      ref={setFloatingElement}
+      style={floatingStyles}
       className={classnames(styles.calendarPopover, classNameOverride)}
       role="dialog"
       aria-modal="true"