@kaizen/components 1.47.0 → 1.47.1

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

@@ -0,0 +1,29 @@
+import { styleInject } from '../__build-tools/styleInject.mjs';
+var css_248z = "@keyframes LikertScaleLegacy-module_pop__hTH48{0%{opacity:50%;-webkit-transform:scale(1)}to{opacity:0;-webkit-transform:scale(1.78)}}.LikertScaleLegacy-module_container__5wjIJ{box-sizing:border-box;position:relative;width:220px}@media only screen and (max-width:767px){.LikertScaleLegacy-module_container__5wjIJ{position:static;width:258px}}.LikertScaleLegacy-module_container__5wjIJ.LikertScaleLegacy-module_rated__KXpzU .LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_unselected__nP5p9 .LikertScaleLegacy-module_likertItemFill__yj0tC{transition:background .1s}.LikertScaleLegacy-module_container__5wjIJ.LikertScaleLegacy-module_reversed__qrwrP.LikertScaleLegacy-module_rated__KXpzU .LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_unselected__nP5p9 .LikertScaleLegacy-module_likertItemFill__yj0tC{background-color:transparent;border-color:rgba(var(--color-white-rgb,255,255,255),.65)}.LikertScaleLegacy-module_container__5wjIJ :where(.LikertScaleLegacy-module_likertItem4__0SWtD,.LikertScaleLegacy-module_likertItem5__ZF0By) .LikertScaleLegacy-module_check__3wQsx{color:#fff}.LikertScaleLegacy-module_container__5wjIJ :is(.LikertScaleLegacy-module_likertItem4__0SWtD.LikertScaleLegacy-module_suggested__0xk0D,.LikertScaleLegacy-module_likertItem5__ZF0By.LikertScaleLegacy-module_suggested__0xk0D) .LikertScaleLegacy-module_check__3wQsx{color:#fff}.LikertScaleLegacy-module_likertItemFill__yj0tC:focus,.LikertScaleLegacy-module_likertItem__LwX2w:focus{outline:none}.LikertScaleLegacy-module_likertItem__LwX2w:focus-visible .LikertScaleLegacy-module_likertItemFill__yj0tC{outline:var(--color-blue-500,#0168b3) var(--border-focus-ring-border-style,solid) var(--border-focus-ring-border-width,2px);outline-offset:1px}.LikertScaleLegacy-module_reversed__qrwrP .LikertScaleLegacy-module_likertItem__LwX2w:focus-visible .LikertScaleLegacy-module_likertItemFill__yj0tC{outline-color:var(--color-blue-300,#73c0e8)}.LikertScaleLegacy-module_itemContainer__9Vfq0{display:inline-block;font-size:0;height:37px;white-space:nowrap;width:100%}.LikertScaleLegacy-module_legend__HYNg-{left:0;position:absolute;right:0;text-align:center;top:calc(var(--spacing-md, 1.5rem)*-1)}@media only screen and (max-width:767px){.LikertScaleLegacy-module_legend__HYNg-{position:static;top:0}}.LikertScaleLegacy-module_likertItem__LwX2w{display:inline-block;font-size:1px;line-height:1;margin-left:2px;margin-right:2px;overflow-x:visible;padding:0;position:relative;width:18.5%}.LikertScaleLegacy-module_likertItem__LwX2w[dir=rtl]:first-child,[dir=rtl] .LikertScaleLegacy-module_likertItem__LwX2w:first-child{margin-left:2px}.LikertScaleLegacy-module_likertItem__LwX2w[dir=rtl]:last-child,[dir=rtl] .LikertScaleLegacy-module_likertItem__LwX2w:last-child{margin-right:2px}.LikertScaleLegacy-module_likertItem__LwX2w:first-child .LikertScaleLegacy-module_likertItemFill__yj0tC{border-bottom-left-radius:35px;border-top-left-radius:35px}[dir=rtl] .LikertScaleLegacy-module_likertItem__LwX2w:first-child .LikertScaleLegacy-module_likertItemFill__yj0tC{border-radius:0;border-bottom-right-radius:35px;border-top-right-radius:35px}.LikertScaleLegacy-module_likertItem__LwX2w:first-child .LikertScaleLegacy-module_likertItemFill__yj0tC:after{border-bottom-left-radius:35px;border-top-left-radius:35px}[dir=rtl] .LikertScaleLegacy-module_likertItem__LwX2w:first-child .LikertScaleLegacy-module_likertItemFill__yj0tC:after{border-radius:0;border-bottom-right-radius:35px;border-top-right-radius:35px}.LikertScaleLegacy-module_likertItem__LwX2w:last-child .LikertScaleLegacy-module_likertItemFill__yj0tC{border-bottom-right-radius:35px;border-top-right-radius:35px}[dir=rtl] .LikertScaleLegacy-module_likertItem__LwX2w:last-child .LikertScaleLegacy-module_likertItemFill__yj0tC{border-radius:0;border-bottom-left-radius:35px;border-top-left-radius:35px}.LikertScaleLegacy-module_likertItem__LwX2w:last-child .LikertScaleLegacy-module_likertItemFill__yj0tC:after{border-bottom-right-radius:35px;border-top-right-radius:35px}[dir=rtl] .LikertScaleLegacy-module_likertItem__LwX2w:last-child .LikertScaleLegacy-module_likertItemFill__yj0tC:after{border-radius:0;border-bottom-left-radius:35px;border-top-left-radius:35px}.LikertScaleLegacy-module_likertItem__LwX2w:first-child{margin-left:0;margin-right:2px}.LikertScaleLegacy-module_likertItem__LwX2w:last-child{margin-left:2px;margin-right:0}.LikertScaleLegacy-module_likertItem__LwX2w:after,.LikertScaleLegacy-module_likertItem__LwX2w:before{content:\"\";height:100%;position:absolute;right:100%;top:0;width:2px}.LikertScaleLegacy-module_likertItem__LwX2w:after{left:100%;right:auto}.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_selected__MVmcb.LikertScaleLegacy-module_classicalColorSchema__nPw3y .LikertScaleLegacy-module_field1__TDRE-,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_selected__MVmcb.LikertScaleLegacy-module_classicalColorSchema__nPw3y .LikertScaleLegacy-module_field1__TDRE-:after,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_suggested__0xk0D.LikertScaleLegacy-module_classicalColorSchema__nPw3y .LikertScaleLegacy-module_field1__TDRE-,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_suggested__0xk0D.LikertScaleLegacy-module_classicalColorSchema__nPw3y .LikertScaleLegacy-module_field1__TDRE-:after{background-color:var(--color-yellow-300,#ffe36e)}.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_selected__MVmcb.LikertScaleLegacy-module_classicalColorSchema__nPw3y .LikertScaleLegacy-module_field2__s-CD7,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_selected__MVmcb.LikertScaleLegacy-module_classicalColorSchema__nPw3y .LikertScaleLegacy-module_field2__s-CD7:after,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_suggested__0xk0D.LikertScaleLegacy-module_classicalColorSchema__nPw3y .LikertScaleLegacy-module_field2__s-CD7,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_suggested__0xk0D.LikertScaleLegacy-module_classicalColorSchema__nPw3y .LikertScaleLegacy-module_field2__s-CD7:after{background-color:var(--color-yellow-400,#ffca4d)}.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_selected__MVmcb.LikertScaleLegacy-module_classicalColorSchema__nPw3y .LikertScaleLegacy-module_field3__xp5eQ,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_selected__MVmcb.LikertScaleLegacy-module_classicalColorSchema__nPw3y .LikertScaleLegacy-module_field3__xp5eQ:after,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_suggested__0xk0D.LikertScaleLegacy-module_classicalColorSchema__nPw3y .LikertScaleLegacy-module_field3__xp5eQ,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_suggested__0xk0D.LikertScaleLegacy-module_classicalColorSchema__nPw3y .LikertScaleLegacy-module_field3__xp5eQ:after{background-color:var(--color-orange-400,#ff9461)}.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_selected__MVmcb.LikertScaleLegacy-module_classicalColorSchema__nPw3y .LikertScaleLegacy-module_field4__IVK7E,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_selected__MVmcb.LikertScaleLegacy-module_classicalColorSchema__nPw3y .LikertScaleLegacy-module_field4__IVK7E:after,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_suggested__0xk0D.LikertScaleLegacy-module_classicalColorSchema__nPw3y .LikertScaleLegacy-module_field4__IVK7E,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_suggested__0xk0D.LikertScaleLegacy-module_classicalColorSchema__nPw3y .LikertScaleLegacy-module_field4__IVK7E:after{background-color:var(--color-orange-500,#e96c2f)}.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_selected__MVmcb.LikertScaleLegacy-module_classicalColorSchema__nPw3y .LikertScaleLegacy-module_field5__9sETV,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_selected__MVmcb.LikertScaleLegacy-module_classicalColorSchema__nPw3y .LikertScaleLegacy-module_field5__9sETV:after,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_suggested__0xk0D.LikertScaleLegacy-module_classicalColorSchema__nPw3y .LikertScaleLegacy-module_field5__9sETV,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_suggested__0xk0D.LikertScaleLegacy-module_classicalColorSchema__nPw3y .LikertScaleLegacy-module_field5__9sETV:after{background-color:var(--color-red-500,#c93b55)}.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_selected__MVmcb.LikertScaleLegacy-module_blueColorSchema__w8XlF .LikertScaleLegacy-module_field1__TDRE-,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_selected__MVmcb.LikertScaleLegacy-module_blueColorSchema__w8XlF .LikertScaleLegacy-module_field1__TDRE-:after,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_suggested__0xk0D.LikertScaleLegacy-module_blueColorSchema__w8XlF .LikertScaleLegacy-module_field1__TDRE-,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_suggested__0xk0D.LikertScaleLegacy-module_blueColorSchema__w8XlF .LikertScaleLegacy-module_field1__TDRE-:after{background-color:var(--color-blue-100,#e6f6ff)}.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_selected__MVmcb.LikertScaleLegacy-module_blueColorSchema__w8XlF .LikertScaleLegacy-module_field2__s-CD7,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_selected__MVmcb.LikertScaleLegacy-module_blueColorSchema__w8XlF .LikertScaleLegacy-module_field2__s-CD7:after,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_suggested__0xk0D.LikertScaleLegacy-module_blueColorSchema__w8XlF .LikertScaleLegacy-module_field2__s-CD7,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_suggested__0xk0D.LikertScaleLegacy-module_blueColorSchema__w8XlF .LikertScaleLegacy-module_field2__s-CD7:after{background-color:var(--color-blue-200,#bde2f5)}.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_selected__MVmcb.LikertScaleLegacy-module_blueColorSchema__w8XlF .LikertScaleLegacy-module_field3__xp5eQ,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_selected__MVmcb.LikertScaleLegacy-module_blueColorSchema__w8XlF .LikertScaleLegacy-module_field3__xp5eQ:after,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_suggested__0xk0D.LikertScaleLegacy-module_blueColorSchema__w8XlF .LikertScaleLegacy-module_field3__xp5eQ,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_suggested__0xk0D.LikertScaleLegacy-module_blueColorSchema__w8XlF .LikertScaleLegacy-module_field3__xp5eQ:after{background-color:var(--color-blue-300,#73c0e8)}.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_selected__MVmcb.LikertScaleLegacy-module_blueColorSchema__w8XlF .LikertScaleLegacy-module_field4__IVK7E,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_selected__MVmcb.LikertScaleLegacy-module_blueColorSchema__w8XlF .LikertScaleLegacy-module_field4__IVK7E:after,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_suggested__0xk0D.LikertScaleLegacy-module_blueColorSchema__w8XlF .LikertScaleLegacy-module_field4__IVK7E,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_suggested__0xk0D.LikertScaleLegacy-module_blueColorSchema__w8XlF .LikertScaleLegacy-module_field4__IVK7E:after{background-color:var(--color-blue-400,#008bd6)}.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_selected__MVmcb.LikertScaleLegacy-module_blueColorSchema__w8XlF .LikertScaleLegacy-module_field5__9sETV,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_selected__MVmcb.LikertScaleLegacy-module_blueColorSchema__w8XlF .LikertScaleLegacy-module_field5__9sETV:after,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_suggested__0xk0D.LikertScaleLegacy-module_blueColorSchema__w8XlF .LikertScaleLegacy-module_field5__9sETV,.LikertScaleLegacy-module_likertItem__LwX2w.LikertScaleLegacy-module_suggested__0xk0D.LikertScaleLegacy-module_blueColorSchema__w8XlF .LikertScaleLegacy-module_field5__9sETV:after{background-color:var(--color-blue-500,#0168b3)}.LikertScaleLegacy-module_likertItemFill__yj0tC{border:var(--border-solid-border-width,2px) var(--border-solid-border-style,solid) var(--color-gray-500,#878792);height:35px;transition:background .1s,border-color .1s}.LikertScaleLegacy-module_likertItemFill__yj0tC:hover{transition:background 0s,border-color 0s}.LikertScaleLegacy-module_likertItemFill__yj0tC:after{content:\" \";display:block;height:100%;pointer-events:none;width:100%}.LikertScaleLegacy-module_likertItemFill__yj0tC.LikertScaleLegacy-module_pop__hTH48:after{-webkit-animation:LikertScaleLegacy-module_pop__hTH48 .7s cubic-bezier(0,.94,.32,1) 1}.LikertScaleLegacy-module_reversed__qrwrP .LikertScaleLegacy-module_likertItemFill__yj0tC{border-color:rgba(var(--color-white-rgb,255,255,255),.65)}.LikertScaleLegacy-module_check__3wQsx{color:#000;display:block;left:50%;margin:-10px 0 0 -10px;position:absolute;top:50%}.LikertScaleLegacy-module_likertItem1__cYmY6 .LikertScaleLegacy-module_check__3wQsx{margin-left:-9px}[dir=rtl] .LikertScaleLegacy-module_likertItem1__cYmY6 .LikertScaleLegacy-module_check__3wQsx{margin-left:-11px}.LikertScaleLegacy-module_likertItem5__ZF0By .LikertScaleLegacy-module_check__3wQsx{margin-left:-12px}[dir=rtl] .LikertScaleLegacy-module_likertItem5__ZF0By .LikertScaleLegacy-module_check__3wQsx{margin-left:-9px}.LikertScaleLegacy-module_hovered__vVUN6 :where(.LikertScaleLegacy-module_likertItem4__0SWtD,.LikertScaleLegacy-module_likertItem5__ZF0By) .LikertScaleLegacy-module_check__3wQsx{color:#000}.LikertScaleLegacy-module_hovered__vVUN6.LikertScaleLegacy-module_reversed__qrwrP .LikertScaleLegacy-module_itemContainer__9Vfq0>:not(.LikertScaleLegacy-module_suggested__0xk0D.LikertScaleLegacy-module_likertItem__LwX2w) .LikertScaleLegacy-module_check__3wQsx{color:#fff}@media only screen and (max-width:767px){.LikertScaleLegacy-module_container__5wjIJ{min-width:258px}.LikertScaleLegacy-module_itemContainer__9Vfq0{height:50px}.LikertScaleLegacy-module_likertItem__LwX2w:first-child .LikertScaleLegacy-module_likertItemFill__yj0tC{border-bottom-left-radius:48px;border-top-left-radius:48px}[dir=rtl] .LikertScaleLegacy-module_likertItem__LwX2w:first-child .LikertScaleLegacy-module_likertItemFill__yj0tC{border-radius:0;border-bottom-right-radius:48px;border-top-right-radius:48px}.LikertScaleLegacy-module_likertItem__LwX2w:first-child .LikertScaleLegacy-module_likertItemFill__yj0tC:after{border-bottom-left-radius:48px;border-top-left-radius:48px}[dir=rtl] .LikertScaleLegacy-module_likertItem__LwX2w:first-child .LikertScaleLegacy-module_likertItemFill__yj0tC:after{border-radius:0;border-bottom-right-radius:48px;border-top-right-radius:48px}.LikertScaleLegacy-module_likertItem__LwX2w:last-child .LikertScaleLegacy-module_likertItemFill__yj0tC{border-bottom-right-radius:48px;border-top-right-radius:48px}[dir=rtl] .LikertScaleLegacy-module_likertItem__LwX2w:last-child .LikertScaleLegacy-module_likertItemFill__yj0tC{border-radius:0;border-bottom-left-radius:48px;border-top-left-radius:48px}.LikertScaleLegacy-module_likertItem__LwX2w:last-child .LikertScaleLegacy-module_likertItemFill__yj0tC:after{border-bottom-right-radius:48px;border-top-right-radius:48px}[dir=rtl] .LikertScaleLegacy-module_likertItem__LwX2w:last-child .LikertScaleLegacy-module_likertItemFill__yj0tC:after{border-radius:0;border-bottom-left-radius:48px;border-top-left-radius:48px}.LikertScaleLegacy-module_likertItemFill__yj0tC{height:48px}}@media print{.LikertScaleLegacy-module_legend__HYNg-{display:none}.LikertScaleLegacy-module_container__5wjIJ{right:2em;top:1em;width:150px}.LikertScaleLegacy-module_container__5wjIJ .LikertScaleLegacy-module_likertItem__LwX2w .LikertScaleLegacy-module_likertItemFill__yj0tC{background:#fff;border:1px solid #d7d8d8;height:25px}.LikertScaleLegacy-module_container__5wjIJ .LikertScaleLegacy-module_likertItem__LwX2w:first-child .LikertScaleLegacy-module_likertItemFill__yj0tC,.LikertScaleLegacy-module_container__5wjIJ .LikertScaleLegacy-module_likertItem__LwX2w:last-child .LikertScaleLegacy-module_likertItemFill__yj0tC{background:#fff;border-width:2px}}";
+var styles = {
+  "container": "LikertScaleLegacy-module_container__5wjIJ",
+  "rated": "LikertScaleLegacy-module_rated__KXpzU",
+  "likertItem": "LikertScaleLegacy-module_likertItem__LwX2w",
+  "unselected": "LikertScaleLegacy-module_unselected__nP5p9",
+  "likertItemFill": "LikertScaleLegacy-module_likertItemFill__yj0tC",
+  "reversed": "LikertScaleLegacy-module_reversed__qrwrP",
+  "likertItem4": "LikertScaleLegacy-module_likertItem4__0SWtD",
+  "likertItem5": "LikertScaleLegacy-module_likertItem5__ZF0By",
+  "check": "LikertScaleLegacy-module_check__3wQsx",
+  "suggested": "LikertScaleLegacy-module_suggested__0xk0D",
+  "itemContainer": "LikertScaleLegacy-module_itemContainer__9Vfq0",
+  "legend": "LikertScaleLegacy-module_legend__HYNg-",
+  "classicalColorSchema": "LikertScaleLegacy-module_classicalColorSchema__nPw3y",
+  "field1": "LikertScaleLegacy-module_field1__TDRE-",
+  "selected": "LikertScaleLegacy-module_selected__MVmcb",
+  "field2": "LikertScaleLegacy-module_field2__s-CD7",
+  "field3": "LikertScaleLegacy-module_field3__xp5eQ",
+  "field4": "LikertScaleLegacy-module_field4__IVK7E",
+  "field5": "LikertScaleLegacy-module_field5__9sETV",
+  "blueColorSchema": "LikertScaleLegacy-module_blueColorSchema__w8XlF",
+  "pop": "LikertScaleLegacy-module_pop__hTH48",
+  "likertItem1": "LikertScaleLegacy-module_likertItem1__cYmY6",
+  "hovered": "LikertScaleLegacy-module_hovered__vVUN6"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/LikertScaleLegacy/utils/determineSelectionFromKeyPress.mjs

@@ -0,0 +1,47 @@
+/**
+ * Takes a keypress on a div that's imitating a radio and determines where the selection should go.
+ * Uses the following as a guide, with one modification - allowing space press on a selected item to unselect:
+ * https://www.w3.org/TR/wai-aria-practices/examples/radio/radio-1/radio-1.html
+ */
+var SCALE_VALUE_RESPONSE = new Map([[-1, -1], [1, 1], [2, 2], [3, 3], [4, 4], [5, 5]]);
+var determineSelectionFromKeyPress = function (keyCode, currentSelection, focusedItem) {
+  var supportedKeyCodes = [32, 37, 38, 39, 40];
+  if (supportedKeyCodes.indexOf(keyCode) === -1) {
+    return null;
+  }
+  var spacePressed = keyCode === 32;
+  var backPressed = keyCode === 37 || keyCode === 38;
+  var forwardPressed = keyCode === 39 || keyCode === 40;
+  var noCurrentSelection = !currentSelection || currentSelection.value <= 0;
+  if (spacePressed) {
+    return noCurrentSelection ? focusedItem.value : -1;
+  }
+  if (noCurrentSelection || !currentSelection) {
+    if (backPressed) {
+      return oneSelectionBackward(focusedItem.value);
+    }
+    return oneSelectionForward(focusedItem.value);
+  }
+  if (backPressed) {
+    return oneSelectionBackward(currentSelection.value);
+  }
+  if (forwardPressed) {
+    return oneSelectionForward(currentSelection.value);
+  }
+  return null;
+};
+var oneSelectionForward = function (value) {
+  if (value === 5) {
+    return 1;
+  }
+  var calculatedPosition = SCALE_VALUE_RESPONSE.get(value + 1);
+  return calculatedPosition || null;
+};
+var oneSelectionBackward = function (value) {
+  if (value === 1) {
+    return 5;
+  }
+  var calculatedPosition = SCALE_VALUE_RESPONSE.get(value - 1);
+  return calculatedPosition || null;
+};
+export { determineSelectionFromKeyPress as default };

package/dist/esm/Loading/LoadingGraphic/LoadingGraphic.mjs

@@ -0,0 +1,29 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './LoadingGraphic.module.scss.mjs';
+var loadingGraphicSizeMap = new Map([["small", 1.25], ["medium", 3], ["large", 4.5], ["xlarge", 6], ["xxlarge", 7.5], ["scene", 18.75]]);
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060062/Loading+Skeleton Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-loading-states-loadinggraphic--docs Storybook}
+ */
+const LoadingGraphic = /*#__PURE__*/function () {
+  const LoadingGraphic = function (_a) {
+    var isAnimated = _a.isAnimated,
+      isReversed = _a.isReversed,
+      size = _a.size,
+      classNameOverride = _a.classNameOverride,
+      props = __rest(_a, ["isAnimated", "isReversed", "size", "classNameOverride"]);
+    var sizeValue = "".concat(loadingGraphicSizeMap.get(size), "rem");
+    return /*#__PURE__*/React.createElement("div", __assign({
+      className: classnames(styles.loadingGraphic, isAnimated && styles.isAnimated, isReversed && styles.isReversed, classNameOverride),
+      style: {
+        width: sizeValue,
+        height: sizeValue
+      }
+    }, props));
+  };
+  LoadingGraphic.displayName = "LoadingGraphic";
+  return LoadingGraphic;
+}();
+export { LoadingGraphic };

package/dist/esm/Loading/LoadingGraphic/LoadingGraphic.module.scss.mjs

@@ -0,0 +1,10 @@
+import { styleInject } from '../../__build-tools/styleInject.mjs';
+var css_248z = ".LoadingGraphic-module_loadingGraphic__lg-gH{border-radius:var(--border-solid-border-radius,7px);top:calc(var(--spacing-md, 1.5rem)*.175)}@keyframes LoadingGraphic-module_fade-in-out__VFBMB{0%{opacity:60%}50%{opacity:100%}to{opacity:60%}}.LoadingGraphic-module_isAnimated__tyskp{animation-duration:calc(var(--animation-duration-deliberate, .7s)*2);animation-iteration-count:infinite;animation-name:LoadingGraphic-module_fade-in-out__VFBMB}.LoadingGraphic-module_loadingGraphic__lg-gH{background-color:rgba(var(--color-gray-600-rgb,82,78,86),.1);border-radius:50%}.LoadingGraphic-module_isReversed__HmZ4H{background-color:rgba(var(--color-white-rgb,255,255,255),.1)}";
+var styles = {
+  "loadingGraphic": "LoadingGraphic-module_loadingGraphic__lg-gH",
+  "isAnimated": "LoadingGraphic-module_isAnimated__tyskp",
+  "fade-in-out": "LoadingGraphic-module_fade-in-out__VFBMB",
+  "isReversed": "LoadingGraphic-module_isReversed__HmZ4H"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Loading/LoadingHeading/LoadingHeading.mjs

@@ -0,0 +1,29 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './LoadingHeading.module.scss.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060062/Loading+Skeleton Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-loading-states-loadingheading--docs Storybook}
+ */
+const LoadingHeading = /*#__PURE__*/function () {
+  const LoadingHeading = function (_a) {
+    var isAnimated = _a.isAnimated,
+      isReversed = _a.isReversed,
+      width = _a.width,
+      isLink = _a.isLink,
+      classNameOverride = _a.classNameOverride,
+      variant = _a.variant,
+      props = __rest(_a, ["isAnimated", "isReversed", "width", "isLink", "classNameOverride", "variant"]);
+    return /*#__PURE__*/React.createElement("div", __assign({
+      className: classnames(styles.loadingHeading, classNameOverride, styles[variant], isAnimated && styles.isAnimated, isReversed && styles.isReversed, isLink && styles.link),
+      style: {
+        width: "".concat(width, "%")
+      }
+    }, props));
+  };
+  LoadingHeading.displayName = "LoadingHeading";
+  return LoadingHeading;
+}();
+export { LoadingHeading };

package/dist/esm/Loading/LoadingHeading/LoadingHeading.module.scss.mjs

@@ -0,0 +1,18 @@
+import { styleInject } from '../../__build-tools/styleInject.mjs';
+var css_248z = ".LoadingHeading-module_loadingHeading__tb9a-{border-radius:var(--border-solid-border-radius,7px);top:calc(var(--spacing-md, 1.5rem)*.175)}@keyframes LoadingHeading-module_fade-in-out__4e-Ds{0%{opacity:60%}50%{opacity:100%}to{opacity:60%}}.LoadingHeading-module_isAnimated__cbstI{animation-duration:calc(var(--animation-duration-deliberate, .7s)*2);animation-iteration-count:infinite;animation-name:LoadingHeading-module_fade-in-out__4e-Ds}.LoadingHeading-module_loadingHeading__tb9a-{background-color:rgba(var(--color-gray-500-rgb,135,135,146),.2)}.LoadingHeading-module_display-0__SXmNU{height:var(--typography-display-0-font-size,4.5rem);margin-bottom:calc(var(--typography-display-0-line-height, 5.25rem) - var(--typography-display-0-font-size, 4.5rem))}.LoadingHeading-module_heading-1__09eOy{height:var(--typography-heading-1-font-size,2.125rem);margin-bottom:calc(var(--typography-heading-1-line-height, 2.625rem) - var(--typography-heading-1-font-size, 2.125rem))}.LoadingHeading-module_heading-2__bxtDS{height:var(--typography-heading-2-font-size,1.75rem);margin-bottom:calc(var(--typography-heading-2-line-height, 2.25rem) - var(--typography-heading-2-font-size, 1.75rem))}.LoadingHeading-module_heading-3__h8MXB{height:var(--typography-heading-3-font-size,1.375rem);margin-bottom:calc(var(--typography-heading-3-line-height, 1.875rem) - var(--typography-heading-3-font-size, 1.375rem))}.LoadingHeading-module_heading-4__VsC1Y{height:var(--typography-heading-4-font-size,1.125rem);margin-bottom:calc(var(--typography-heading-4-line-height, 1.5rem) - var(--typography-heading-4-font-size, 1.125rem))}.LoadingHeading-module_heading-5__5arKU{height:var(--typography-heading-5-font-size,1rem);margin-bottom:calc(var(--typography-heading-5-line-height, 1.5rem) - var(--typography-heading-5-font-size, 1rem))}.LoadingHeading-module_heading-6__sLipd{height:var(--typography-heading-6-font-size,.875rem);margin-bottom:calc(var(--typography-heading-6-line-height, 1.5rem) - var(--typography-heading-6-font-size, .875rem))}.LoadingHeading-module_isReversed__vz6G1{background-color:rgba(var(--color-white-rgb,255,255,255),.2)}.LoadingHeading-module_link__E7uU1{background-color:rgba(var(--color-blue-500-rgb,1,104,179),.2)}.LoadingHeading-module_link__E7uU1.LoadingHeading-module_isReversed__vz6G1{background-color:rgba(var(--color-white-rgb,255,255,255),.65)}";
+var styles = {
+  "loadingHeading": "LoadingHeading-module_loadingHeading__tb9a-",
+  "isAnimated": "LoadingHeading-module_isAnimated__cbstI",
+  "fade-in-out": "LoadingHeading-module_fade-in-out__4e-Ds",
+  "display-0": "LoadingHeading-module_display-0__SXmNU",
+  "heading-1": "LoadingHeading-module_heading-1__09eOy",
+  "heading-2": "LoadingHeading-module_heading-2__bxtDS",
+  "heading-3": "LoadingHeading-module_heading-3__h8MXB",
+  "heading-4": "LoadingHeading-module_heading-4__VsC1Y",
+  "heading-5": "LoadingHeading-module_heading-5__5arKU",
+  "heading-6": "LoadingHeading-module_heading-6__sLipd",
+  "isReversed": "LoadingHeading-module_isReversed__vz6G1",
+  "link": "LoadingHeading-module_link__E7uU1"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Loading/LoadingInput/LoadingInput.mjs

@@ -0,0 +1,30 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './LoadingInput.module.scss.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060062/Loading+Skeleton Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-loading-states-loadinginput--docs Storybook}
+ */
+const LoadingInput = /*#__PURE__*/function () {
+  const LoadingInput = function (_a) {
+    var isAnimated = _a.isAnimated,
+      isReversed = _a.isReversed,
+      width = _a.width,
+      classNameOverride = _a.classNameOverride,
+      _b = _a.height,
+      height = _b === void 0 ? 48 : _b,
+      props = __rest(_a, ["isAnimated", "isReversed", "width", "classNameOverride", "height"]);
+    return /*#__PURE__*/React.createElement("div", __assign({
+      className: classnames(styles.loadingInput, isAnimated && styles.isAnimated, isReversed && styles.isReversed, classNameOverride),
+      style: {
+        width: "".concat(width, "%"),
+        height: "".concat(height, "px")
+      }
+    }, props));
+  };
+  LoadingInput.displayName = "LoadingInput";
+  return LoadingInput;
+}();
+export { LoadingInput };

package/dist/esm/Loading/LoadingInput/LoadingInput.module.scss.mjs

@@ -0,0 +1,10 @@
+import { styleInject } from '../../__build-tools/styleInject.mjs';
+var css_248z = ".LoadingInput-module_loadingInput__65Cpe{border-radius:var(--border-solid-border-radius,7px);top:calc(var(--spacing-md, 1.5rem)*.175)}@keyframes LoadingInput-module_fade-in-out__XW4tT{0%{opacity:60%}50%{opacity:100%}to{opacity:60%}}.LoadingInput-module_isAnimated__hJtl-{animation-duration:calc(var(--animation-duration-deliberate, .7s)*2);animation-iteration-count:infinite;animation-name:LoadingInput-module_fade-in-out__XW4tT}.LoadingInput-module_loadingInput__65Cpe{background-color:rgba(var(--color-gray-600-rgb,82,78,86),.1)}.LoadingInput-module_isReversed__wyVkD{background-color:rgba(var(--color-white-rgb,255,255,255),.1)}";
+var styles = {
+  "loadingInput": "LoadingInput-module_loadingInput__65Cpe",
+  "isAnimated": "LoadingInput-module_isAnimated__hJtl-",
+  "fade-in-out": "LoadingInput-module_fade-in-out__XW4tT",
+  "isReversed": "LoadingInput-module_isReversed__wyVkD"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Loading/LoadingParagraph/LoadingParagraph.mjs

@@ -0,0 +1,32 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './LoadingParagraph.module.scss.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060062/Loading+Skeleton Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-loading-states-loadingparagraph--docs Storybook}
+ */
+const LoadingParagraph = /*#__PURE__*/function () {
+  const LoadingParagraph = function (_a) {
+    var isAnimated = _a.isAnimated,
+      isCentred = _a.isCentred,
+      isReversed = _a.isReversed,
+      isInline = _a.isInline,
+      noBottomMargin = _a.noBottomMargin,
+      width = _a.width,
+      isLink = _a.isLink,
+      inheritBaseline = _a.inheritBaseline,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["isAnimated", "isCentred", "isReversed", "isInline", "noBottomMargin", "width", "isLink", "inheritBaseline", "classNameOverride"]);
+    return /*#__PURE__*/React.createElement("div", __assign({
+      className: classnames(styles.loadingParagraph, classNameOverride, isAnimated && styles.isAnimated, isCentred && styles.isCentered, isReversed && styles.isReversed, isLink && styles.isLink, inheritBaseline && styles.inheritBaseline, isInline && styles.isInline, noBottomMargin && styles.noBottomMargin),
+      style: {
+        width: "".concat(width, "%")
+      }
+    }, restProps));
+  };
+  LoadingParagraph.displayName = "LoadingParagraph";
+  return LoadingParagraph;
+}();
+export { LoadingParagraph };

package/dist/esm/Loading/LoadingParagraph/LoadingParagraph.module.scss.mjs

@@ -0,0 +1,15 @@
+import { styleInject } from '../../__build-tools/styleInject.mjs';
+var css_248z = ".LoadingParagraph-module_loadingParagraph__-riGM{border-radius:var(--border-solid-border-radius,7px);top:calc(var(--spacing-md, 1.5rem)*.175)}@keyframes LoadingParagraph-module_fade-in-out__wzszr{0%{opacity:60%}50%{opacity:100%}to{opacity:60%}}.LoadingParagraph-module_isAnimated__FWmuv{animation-duration:calc(var(--animation-duration-deliberate, .7s)*2);animation-iteration-count:infinite;animation-name:LoadingParagraph-module_fade-in-out__wzszr}.LoadingParagraph-module_loadingParagraph__-riGM{background-color:var(--color-gray-300,#eaeaec);height:calc(var(--spacing-md, 1.5rem)*.625);margin-bottom:calc(var(--spacing-md, 1.5rem)*.5)}.LoadingParagraph-module_isReversed__hD0mn{background-color:rgba(var(--color-white-rgb,255,255,255),.1)}.LoadingParagraph-module_isLink__gVurw{background-color:rgba(var(--color-blue-500-rgb,1,104,179),.2)}.LoadingParagraph-module_isLink__gVurw.LoadingParagraph-module_isReversed__hD0mn{background-color:rgba(var(--color-white-rgb,255,255,255),.65)}.LoadingParagraph-module_isCentered__Pkyts{margin-left:auto;margin-right:auto}.LoadingParagraph-module_isInline__-mSTd{display:inline-block;margin-bottom:calc(var(--spacing-md, 1.5rem)*.35)}.LoadingParagraph-module_isInline__-mSTd+.LoadingParagraph-module_isInline__-mSTd{margin-inline-start:var(--spacing-md,1.5rem)}.LoadingParagraph-module_noBottomMargin__9Qt0n{margin-bottom:0}.LoadingParagraph-module_inheritBaseline__RU-tb.LoadingParagraph-module_inheritBaseline__RU-tb{position:static}";
+var styles = {
+  "loadingParagraph": "LoadingParagraph-module_loadingParagraph__-riGM",
+  "isAnimated": "LoadingParagraph-module_isAnimated__FWmuv",
+  "fade-in-out": "LoadingParagraph-module_fade-in-out__wzszr",
+  "isReversed": "LoadingParagraph-module_isReversed__hD0mn",
+  "isLink": "LoadingParagraph-module_isLink__gVurw",
+  "isCentered": "LoadingParagraph-module_isCentered__Pkyts",
+  "isInline": "LoadingParagraph-module_isInline__-mSTd",
+  "noBottomMargin": "LoadingParagraph-module_noBottomMargin__9Qt0n",
+  "inheritBaseline": "LoadingParagraph-module_inheritBaseline__RU-tb"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Loading/LoadingSpinner/LoadingSpinner.mjs

@@ -0,0 +1,66 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.mjs';
+import styles from './LoadingSpinner.module.scss.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093253/Loading+Spinner Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-loading-loadingspinner--docs Storybook}
+ */
+const LoadingSpinner = /*#__PURE__*/function () {
+  const LoadingSpinner = function (_a) {
+    var _b = _a.accessibilityLabel,
+      accessibilityLabel = _b === void 0 ? "Loading" : _b,
+      _c = _a.size,
+      size = _c === void 0 ? "md" : _c,
+      classNameOverride = _a.classNameOverride,
+      props = __rest(_a, ["accessibilityLabel", "size", "classNameOverride"]);
+    return /*#__PURE__*/React.createElement("div", __assign({
+      "data-automation-id": "loading-spinner",
+      className: classnames(styles.loadingSpinner, classNameOverride),
+      role: "status"
+    }, props), /*#__PURE__*/React.createElement(VisuallyHidden, null, accessibilityLabel), size === "md" ? ( /*#__PURE__*/React.createElement("svg", {
+      className: styles.spinner,
+      "aria-hidden": "true",
+      viewBox: "0 0 48 48",
+      width: 48,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React.createElement("circle", {
+      cx: "24",
+      cy: "24",
+      r: "22.5",
+      stroke: "currentColor",
+      strokeWidth: "3",
+      strokeOpacity: "0.3"
+    }), /*#__PURE__*/React.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      fill: "currentColor",
+      d: "M46.5 24c.8284 0 1.5049-.6734 1.4539-1.5002C47.21 10.44 37.5601.789989 25.5003.0461639 24.6734-.004835 24 .671607 24 1.50003c0 .82843.6738 1.49444 1.5002 1.55277 10.4023.73424 18.7128 9.0447 19.447 19.447C45.0056 23.3262 45.6716 24 46.5 24z"
+    }))) : ( /*#__PURE__*/React.createElement("svg", {
+      className: styles.spinner,
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      width: 24,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React.createElement("circle", {
+      cx: "12",
+      cy: "12",
+      r: "9",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeOpacity: "0.3"
+    }), /*#__PURE__*/React.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      fill: "currentColor",
+      d: "M21.0564 13c.5076 0 .9377-.3851.9431-.8926.0004-.0358.0005-.0716.0005-.1074 0-5.52285-4.4771-10-10-10-.0359 0-.0718.00019-.1076.00057-.5076.00535-.8926.43552-.8926.94308v.11543C10.9998 3.59163 11.4675 4 12 4c4.4183 0 8 3.58172 8 8 0 .5324.4083 1 .9407 1h.1157z"
+    }))));
+  };
+  LoadingSpinner.displayName = "LoadingSpinner";
+  return LoadingSpinner;
+}();
+export { LoadingSpinner };

package/dist/esm/Loading/LoadingSpinner/LoadingSpinner.module.scss.mjs

@@ -0,0 +1,8 @@
+import { styleInject } from '../../__build-tools/styleInject.mjs';
+var css_248z = ".LoadingSpinner-module_loadingSpinner__4SQsH{display:flex}.LoadingSpinner-module_spinner__bDpy0{animation:LoadingSpinner-module_spinner__bDpy0 var(--animation-duration-deliberate,.7s) var(--animation-easing-function-ease-in-out,cubic-bezier(.455,.03,.515,.955)) infinite}@keyframes LoadingSpinner-module_spinner__bDpy0{to{transform:rotate(1turn)}}";
+var styles = {
+  "loadingSpinner": "LoadingSpinner-module_loadingSpinner__4SQsH",
+  "spinner": "LoadingSpinner-module_spinner__bDpy0"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Menu/Menu.mjs

@@ -0,0 +1,53 @@
+import { __rest, __assign } from 'tslib';
+import React, { useState } from 'react';
+import { StatelessMenu } from './subcomponents/StatelessMenu/StatelessMenu.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082059782/Menu Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-menu--docs Storybook}
+ */
+const Menu = /*#__PURE__*/function () {
+  const Menu = function (_a) {
+    var button = _a.button,
+      _b = _a.menuVisible,
+      menuVisible = _b === void 0 ? false : _b,
+      rest = __rest(_a, ["button", "menuVisible"]);
+    var _c = useState(menuVisible),
+      isMenuVisible = _c[0],
+      setIsMenuVisible = _c[1];
+    var toggleMenuDropdown = function () {
+      setIsMenuVisible(!isMenuVisible);
+    };
+    var hideMenuDropdown = function () {
+      setIsMenuVisible(false);
+    };
+    return /*#__PURE__*/React.createElement(StatelessMenu, __assign({}, rest, {
+      isMenuVisible: isMenuVisible,
+      toggleMenuDropdown: toggleMenuDropdown,
+      hideMenuDropdown: hideMenuDropdown,
+      // `StatelessMenu` is one of the newer components, so it uses a render function,
+      // as opposed to `React.cloneElement`.
+      // `cloneElement` has its problems, mainly because it's somewhat magical, can lead
+      // to unexpected behaviour, and it doesn't self document. Hence, the switch
+      // to the render function. It would be nice if the `Menu` component also
+      // used this pattern, but it's probably not worth the time and effort.
+      renderButton: function (props) {
+        return /*#__PURE__*/React.cloneElement(button, __assign(__assign({}, props), {
+          onClick: function (e) {
+            var _a, _b;
+            props.onClick(e);
+            (_b = (_a = button.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+          },
+          onMouseDown: function (e) {
+            var _a, _b;
+            props.onMouseDown(e);
+            (_b = (_a = button.props).onMouseDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+          }
+        }));
+      }
+    }));
+  };
+  Menu.displayName = "Menu";
+  return Menu;
+}();
+export { Menu };

package/dist/esm/Menu/subcomponents/MenuDropdown/MenuDropdown.mjs

@@ -0,0 +1,88 @@
+import { __assign } from 'tslib';
+import React, { useState, useCallback, useEffect } from 'react';
+import classnames from 'classnames';
+import { FocusOn } from 'react-focus-on';
+import { usePopper } from 'react-popper';
+import styles from './MenuDropdown.module.scss.mjs';
+const MenuDropdown = /*#__PURE__*/function () {
+  const MenuDropdown = function (_a) {
+    var children = _a.children,
+      referenceElement = _a.referenceElement,
+      id = _a.id,
+      hideMenuDropdown = _a.hideMenuDropdown,
+      _b = _a.autoHide,
+      autoHide = _b === void 0 ? "on" : _b,
+      _c = _a.align,
+      align = _c === void 0 ? "left" : _c,
+      _d = _a.width,
+      width = _d === void 0 ? "default" : _d;
+    var _e = useState(null),
+      popperElement = _e[0],
+      setPopperElement = _e[1];
+    var _f = usePopper(referenceElement, popperElement, {
+        modifiers: [{
+          name: "offset",
+          options: {
+            offset: [0, 6] // value used from the $spacing-xs scss variable,
+          }
+        }, {
+          name: "preventOverflow",
+          options: {
+            // Gives some room so the menu shadow doesn't get clipped if near the edge of the viewport.
+            padding: 8
+          }
+        }],
+        placement: align === "left" ? "bottom-start" : "bottom-end"
+      }),
+      popperStyles = _f.styles,
+      attributes = _f.attributes;
+    // This callback handler will not run when autoHide === "off"
+    var handleDocumentClickForAutoHide = useCallback(function (e) {
+      if (popperElement && e.target instanceof Node && !popperElement.contains(e.target) && referenceElement !== e.target && !(referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.contains(e.target))) {
+        hideMenuDropdown();
+      }
+    }, [popperElement, referenceElement, hideMenuDropdown]);
+    var handleDocumentResize = useCallback(function () {
+      hideMenuDropdown();
+    }, [hideMenuDropdown]);
+    var handleRootClick = function () {
+      if (autoHide === "on") {
+        // ie. is not equal to "off" | "outside-click-only"
+        hideMenuDropdown();
+      }
+    };
+    useEffect(function () {
+      window.addEventListener("resize", handleDocumentResize, false);
+      return function () {
+        window.removeEventListener("resize", handleDocumentResize, false);
+      };
+    }, [handleDocumentResize]);
+    useEffect(function () {
+      if (autoHide !== "off") {
+        document.addEventListener("click", handleDocumentClickForAutoHide, true);
+      }
+      return function () {
+        if (autoHide !== "off") {
+          document.removeEventListener("click", handleDocumentClickForAutoHide, true);
+        }
+      };
+    }, [autoHide, handleDocumentClickForAutoHide]);
+    return /*#__PURE__*/React.createElement(FocusOn, {
+      enabled: !!referenceElement,
+      scrollLock: false,
+      noIsolation: true,
+      shards: referenceElement ? [referenceElement] : undefined,
+      onEscapeKey: hideMenuDropdown
+    }, /*#__PURE__*/React.createElement("div", __assign({
+      id: id,
+      ref: setPopperElement
+    }, attributes.popper, {
+      style: popperStyles.popper,
+      className: classnames(styles.menuContainer, width == "default" && styles.defaultWidth),
+      onClick: handleRootClick
+    }), children));
+  };
+  MenuDropdown.displayName = "MenuDropdown";
+  return MenuDropdown;
+}();
+export { MenuDropdown };

package/dist/esm/Menu/subcomponents/MenuDropdown/MenuDropdown.module.scss.mjs

@@ -0,0 +1,8 @@
+import { styleInject } from '../../../__build-tools/styleInject.mjs';
+var css_248z = ".MenuDropdown-module_menuContainer__kRPv-{background:var(--color-white,#fff);border-radius:var(--border-solid-border-radius,7px);box-shadow:var(--shadow-large-box-shadow,0 3px 9px 0 rgba(0,0,0,.1),0 8px 40px 0 rgba(0,0,0,.08));box-sizing:border-box;color:var(--color-purple-800,#2f2438);max-height:22rem;overflow:auto;padding:var(--spacing-xs,.375rem) 0;text-align:left;z-index:1000}[dir=rtl] .MenuDropdown-module_menuContainer__kRPv-{text-align:right}.MenuDropdown-module_defaultWidth__-k0La{width:248px}";
+var styles = {
+  "menuContainer": "MenuDropdown-module_menuContainer__kRPv-",
+  "defaultWidth": "MenuDropdown-module_defaultWidth__-k0La"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Menu/subcomponents/MenuHeading/MenuHeading.mjs

@@ -0,0 +1,21 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { Heading } from '../../../Heading/Heading.mjs';
+import styles from './MenuHeading.module.scss.mjs';
+const MenuHeading = /*#__PURE__*/function () {
+  const MenuHeading = function (_a) {
+    var id = _a.id,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["id", "classNameOverride"]);
+    return /*#__PURE__*/React.createElement(Heading, __assign({
+      id: id,
+      variant: "heading-6",
+      tag: "span",
+      classNameOverride: classnames(styles.heading, classNameOverride)
+    }, restProps));
+  };
+  MenuHeading.displayName = "MenuHeading";
+  return MenuHeading;
+}();
+export { MenuHeading };

package/dist/esm/Menu/subcomponents/MenuHeading/MenuHeading.module.scss.mjs

@@ -0,0 +1,7 @@
+import { styleInject } from '../../../__build-tools/styleInject.mjs';
+var css_248z = ".MenuHeading-module_heading__a9BY8{color:var(--color-purple-800,#2f2438);display:block;margin:0 calc(var(--spacing-md, 1.5rem)*1/6);padding:10px var(--spacing-sm,.75rem) 5px}";
+var styles = {
+  "heading": "MenuHeading-module_heading__a9BY8"
+};
+/*#__PURE__*/styleInject(css_248z);
+export { styles as default };

package/dist/esm/Menu/subcomponents/MenuItem/MenuItem.mjs

@@ -0,0 +1,59 @@
+import React from 'react';
+import classnames from 'classnames';
+import styles from './MenuItem.module.scss.mjs';
+const MenuItem = /*#__PURE__*/function () {
+  const MenuItem = function (_a) {
+    var label = _a.label,
+      icon = _a.icon,
+      destructive = _a.destructive,
+      disabled = _a.disabled,
+      onClick = _a.onClick,
+      href = _a.href,
+      target = _a.target,
+      isActive = _a.isActive,
+      dataTestId = _a["data-testid"],
+      id = _a.id;
+    var wrappedLabel = /*#__PURE__*/React.createElement("span", {
+      className: styles.menuItem__Label
+    }, label);
+    var iconNode = icon && /*#__PURE__*/React.createElement("span", {
+      className: styles.menuItem__Icon
+    }, icon);
+    var className = classnames(styles.menuItem, destructive && styles["menuItem--destructive"], disabled && styles["menuItem--disabled"], isActive && styles["menuItem--active"]);
+    if (disabled) {
+      return /*#__PURE__*/React.createElement("li", {
+        className: styles.menuListItem
+      }, /*#__PURE__*/React.createElement("button", {
+        id: id,
+        type: "button",
+        disabled: true,
+        className: className,
+        "data-testid": dataTestId
+      }, iconNode, wrappedLabel));
+    }
+    if (href) {
+      return /*#__PURE__*/React.createElement("li", {
+        className: styles.menuListItem
+      }, /*#__PURE__*/React.createElement("a", {
+        id: id,
+        href: href,
+        className: className,
+        target: target,
+        "aria-current": isActive ? "page" : undefined,
+        "data-testid": dataTestId
+      }, iconNode, wrappedLabel));
+    }
+    return /*#__PURE__*/React.createElement("li", {
+      className: styles.menuListItem
+    }, /*#__PURE__*/React.createElement("button", {
+      id: id,
+      type: "button",
+      onClick: onClick,
+      className: className,
+      "data-testid": dataTestId
+    }, iconNode, wrappedLabel));
+  };
+  MenuItem.displayName = "MenuItem";
+  return MenuItem;
+}();
+export { MenuItem };