@pega/cosmos-react-core 4.0.0-dev.13.0 → 4.0.0-dev.14.0

package/lib/components/Popover/PopoverManager.js

@@ -1,21 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { PopoverManagerContext } from './PopoverContext';
 const PopoverManager = ({ children }) => {
     const [popovers, setPopovers] = useState({});
-    const checkActive = (id, groupId) => {
+    const checkActive = useCallback((id, groupId) => {
         return popovers[groupId] === id;
-    };
-    const setActive = (id, groupId) => {
+    }, [popovers]);
+    const setActive = useCallback((id, groupId) => {
         setPopovers(curr => {
             return { ...curr, [groupId]: id };
         });
-    };
-    return (_jsx(PopoverManagerContext.Provider, { value: {
-            checkActive,
-            setActive,
-            popovers
-        }, children: children }));
+    }, []);
+    const ctx = useMemo(() => ({
+        checkActive,
+        setActive,
+        popovers
+    }), [checkActive, setActive, popovers]);
+    return _jsx(PopoverManagerContext.Provider, { value: ctx, children: children });
 };
 export default PopoverManager;
 //# sourceMappingURL=PopoverManager.js.map

package/lib/components/Popover/PopoverManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverManager.js","sourceRoot":"","sources":["../../../src/components/Popover/PopoverManager.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgC,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,cAAc,GAA+C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAClF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAyB,EAAE,CAAC,CAAC;IAErE,MAAM,WAAW,GAAG,CAAC,EAAU,EAAE,OAAe,EAAW,EAAE;QAC3D,OAAO,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAClC,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,EAAU,EAAE,OAAe,EAAE,EAAE;QAChD,WAAW,CAAC,IAAI,CAAC,EAAE;YACjB,OAAO,EAAE,GAAG,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,CAAC;QACpC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,qBAAqB,CAAC,QAAQ,IAC7B,KAAK,EAAE;YACL,WAAW;YACX,SAAS;YACT,QAAQ;SACT,YAEA,QAAQ,GACsB,CAClC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, useState } from 'react';\n\nimport { PopoverManagerContext } from './PopoverContext';\n\nconst PopoverManager: FunctionComponent<{ children: ReactNode }> = ({ children }) => {\n  const [popovers, setPopovers] = useState<Record<string, string>>({});\n\n  const checkActive = (id: string, groupId: string): boolean => {\n    return popovers[groupId] === id;\n  };\n\n  const setActive = (id: string, groupId: string) => {\n    setPopovers(curr => {\n      return { ...curr, [groupId]: id };\n    });\n  };\n\n  return (\n    <PopoverManagerContext.Provider\n      value={{\n        checkActive,\n        setActive,\n        popovers\n      }}\n    >\n      {children}\n    </PopoverManagerContext.Provider>\n  );\n};\n\nexport default PopoverManager;\n"]}
+{"version":3,"file":"PopoverManager.js","sourceRoot":"","sources":["../../../src/components/Popover/PopoverManager.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgC,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErF,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,cAAc,GAA+C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAClF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAyB,EAAE,CAAC,CAAC;IAErE,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,EAAU,EAAE,OAAe,EAAW,EAAE;QACvC,OAAO,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAClC,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,EAAU,EAAE,OAAe,EAAE,EAAE;QAC5D,WAAW,CAAC,IAAI,CAAC,EAAE;YACjB,OAAO,EAAE,GAAG,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,CAAC;QACpC,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,GAAG,GAAG,OAAO,CACjB,GAAG,EAAE,CAAC,CAAC;QACL,WAAW;QACX,SAAS;QACT,QAAQ;KACT,CAAC,EACF,CAAC,WAAW,EAAE,SAAS,EAAE,QAAQ,CAAC,CACnC,CAAC;IAEF,OAAO,KAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,YAAG,QAAQ,GAAkC,CAAC;AACjG,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, useCallback, useMemo, useState } from 'react';\n\nimport { PopoverManagerContext } from './PopoverContext';\n\nconst PopoverManager: FunctionComponent<{ children: ReactNode }> = ({ children }) => {\n  const [popovers, setPopovers] = useState<Record<string, string>>({});\n\n  const checkActive = useCallback(\n    (id: string, groupId: string): boolean => {\n      return popovers[groupId] === id;\n    },\n    [popovers]\n  );\n\n  const setActive = useCallback((id: string, groupId: string) => {\n    setPopovers(curr => {\n      return { ...curr, [groupId]: id };\n    });\n  }, []);\n\n  const ctx = useMemo(\n    () => ({\n      checkActive,\n      setActive,\n      popovers\n    }),\n    [checkActive, setActive, popovers]\n  );\n\n  return <PopoverManagerContext.Provider value={ctx}>{children}</PopoverManagerContext.Provider>;\n};\n\nexport default PopoverManager;\n"]}

package/lib/components/Popover/modifiers.d.ts

@@ -1,3 +1,4 @@
 import { Modifier } from '@popperjs/core';
 export declare const sameWidth: Modifier<'sameWidth', object>;
+export declare const placeAndContain: Modifier<'placeAndContain', object>;
 //# sourceMappingURL=modifiers.d.ts.map

package/lib/components/Popover/modifiers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modifiers.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/modifiers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,WAAW,EAAE,MAAM,CAQlD,CAAC"}
+{"version":3,"file":"modifiers.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/modifiers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI1C,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAC,WAAW,EAAE,MAAM,CAQlD,CAAC;AAKH,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAC,iBAAiB,EAAE,MAAM,CAwI9D,CAAC"}

package/lib/components/Popover/modifiers.js

@@ -1,4 +1,4 @@
-// eslint-disable-next-line import/prefer-default-export
+import { getScrollbarWidth, testElForOverflow } from '../../utils';
 export const sameWidth = Object.freeze({
     name: 'sameWidth',
     enabled: true,
@@ -8,4 +8,100 @@ export const sameWidth = Object.freeze({
     },
     requires: ['computeStyles']
 });
+const scrollbarSize = getScrollbarWidth();
+const paddingFromViewport = 16;
+export const placeAndContain = Object.freeze({
+    name: 'placeAndContain',
+    enabled: true,
+    phase: 'beforeWrite',
+    requires: ['computeStyles', 'offset'],
+    fn: ({ state }) => {
+        const [requestedPrimaryPlacement, requestedSecondaryPlacement] = state.placement.split('-');
+        const vw = document.documentElement.clientWidth;
+        const vh = document.documentElement.clientHeight;
+        const targetRect = state.rects.reference;
+        const targetRectXStart = targetRect.x;
+        const targetRectXEnd = targetRectXStart + targetRect.width;
+        const targetRectYStart = targetRect.y;
+        const targetRectYEnd = targetRectYStart + targetRect.height;
+        const targetXMid = (targetRectXStart + targetRectXEnd) / 2;
+        const targetYMid = (targetRectYStart + targetRectYEnd) / 2;
+        const targetIsInLeftHalfOfViewport = targetXMid < vw / 2;
+        const targetIsInTopHalfOfViewport = targetYMid < vh / 2;
+        const offsetFromTargetX = state.modifiersData.offset?.[state.placement]?.x ?? 0;
+        const offsetFromTargetY = state.modifiersData.offset?.[state.placement]?.y ?? 0;
+        let popoverMaxWidth = null;
+        let popoverMaxHeight = null;
+        const totalScrollableChildHeight = Array.from(state.elements.popper.children).reduce((sum, el) => {
+            if (el === state.elements.arrow) {
+                return sum;
+            }
+            if (testElForOverflow(el)[0]) {
+                return sum + el.scrollHeight + scrollbarSize;
+            }
+            return sum + el.scrollHeight;
+        }, 0);
+        const naturalPopoverHeight = Math.max(state.elements.popper.scrollHeight, totalScrollableChildHeight);
+        const naturalPopoverWidth = Math.max(state.elements.popper.scrollWidth, ...Array.from(state.elements.popper.children).map(el => {
+            if (el === state.elements.arrow) {
+                return -Infinity;
+            }
+            if (testElForOverflow(el)[1]) {
+                return el.scrollWidth + scrollbarSize;
+            }
+            return el.scrollWidth;
+        }));
+        let resolvedPlacement = requestedPrimaryPlacement;
+        if (requestedPrimaryPlacement === 'bottom') {
+            popoverMaxHeight = vh - targetRectYEnd - offsetFromTargetY - paddingFromViewport;
+            if (
+            // If the popover will overflow the viewport bottom
+            targetRectYEnd + offsetFromTargetY + naturalPopoverHeight >
+                vh) {
+                // Choose the side with most allowance
+                resolvedPlacement = targetIsInTopHalfOfViewport ? 'bottom' : 'top';
+            }
+        }
+        else if (requestedPrimaryPlacement === 'top') {
+            popoverMaxHeight = targetRectYStart + offsetFromTargetY - paddingFromViewport;
+            if (
+            // If the popover will overflow the viewport top
+            targetRectYStart + offsetFromTargetY - naturalPopoverHeight <
+                0) {
+                // Choose the side with most allowance
+                resolvedPlacement = targetIsInTopHalfOfViewport ? 'bottom' : 'top';
+            }
+        }
+        else if (requestedPrimaryPlacement === 'left') {
+            popoverMaxWidth = targetRectXStart + offsetFromTargetX - paddingFromViewport;
+            if (
+            // If the popover will overflow the viewport left
+            targetRectXStart + offsetFromTargetX - naturalPopoverWidth <
+                0) {
+                // Choose the side with most allowance
+                resolvedPlacement = targetIsInLeftHalfOfViewport ? 'right' : 'left';
+            }
+        }
+        else if (requestedPrimaryPlacement === 'right') {
+            popoverMaxWidth = vw - targetRectXEnd - offsetFromTargetX - paddingFromViewport;
+            if (
+            // If the popover will overflow the viewport right
+            targetRectXEnd + offsetFromTargetX + naturalPopoverWidth >
+                vw) {
+                // Choose the side with most allowance
+                resolvedPlacement = targetIsInLeftHalfOfViewport ? 'right' : 'left';
+            }
+        }
+        if (resolvedPlacement === 'left' || resolvedPlacement === 'right') {
+            popoverMaxHeight = vh - paddingFromViewport;
+        }
+        state.elements.popper.style.maxHeight = `${popoverMaxHeight}px`;
+        state.elements.popper.style.maxWidth = popoverMaxWidth !== null ? `${popoverMaxWidth}px` : '';
+        resolvedPlacement = `${resolvedPlacement}${(requestedSecondaryPlacement ? `-${requestedSecondaryPlacement}` : '')}`;
+        if (state.placement !== resolvedPlacement) {
+            state.placement = resolvedPlacement;
+            state.reset = true;
+        }
+    }
+});
 //# sourceMappingURL=modifiers.js.map

package/lib/components/Popover/modifiers.js.map

@@ -1 +1 @@
-{"version":3,"file":"modifiers.js","sourceRoot":"","sources":["../../../src/components/Popover/modifiers.ts"],"names":[],"mappings":"AAEA,wDAAwD;AACxD,MAAM,CAAC,MAAM,SAAS,GAAkC,MAAM,CAAC,MAAM,CAAC;IACpE,IAAI,EAAE,WAAW;IACjB,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,aAAa;IACpB,EAAE,CAAC,EAAE,KAAK,EAAE;QACV,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;IACjE,CAAC;IACD,QAAQ,EAAE,CAAC,eAAe,CAAC;CAC5B,CAAC,CAAC","sourcesContent":["import { Modifier } from '@popperjs/core';\n\n// eslint-disable-next-line import/prefer-default-export\nexport const sameWidth: Modifier<'sameWidth', object> = Object.freeze({\n  name: 'sameWidth',\n  enabled: true,\n  phase: 'beforeWrite',\n  fn({ state }) {\n    state.styles.popper.width = `${state.rects.reference.width}px`;\n  },\n  requires: ['computeStyles']\n});\n"]}
+{"version":3,"file":"modifiers.js","sourceRoot":"","sources":["../../../src/components/Popover/modifiers.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEnE,MAAM,CAAC,MAAM,SAAS,GAAkC,MAAM,CAAC,MAAM,CAAC;IACpE,IAAI,EAAE,WAAW;IACjB,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,aAAa;IACpB,EAAE,CAAC,EAAE,KAAK,EAAE;QACV,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;IACjE,CAAC;IACD,QAAQ,EAAE,CAAC,eAAe,CAAC;CAC5B,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,iBAAiB,EAAE,CAAC;AAC1C,MAAM,mBAAmB,GAAG,EAAE,CAAC;AAE/B,MAAM,CAAC,MAAM,eAAe,GAAwC,MAAM,CAAC,MAAM,CAAC;IAChF,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,aAAa;IACpB,QAAQ,EAAE,CAAC,eAAe,EAAE,QAAQ,CAAC;IACrC,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;QAChB,MAAM,CAAC,yBAAyB,EAAE,2BAA2B,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAGzF,CAAC;QAEF,MAAM,EAAE,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC;QAChD,MAAM,EAAE,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC;QAEjD,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC;QACzC,MAAM,gBAAgB,GAAG,UAAU,CAAC,CAAC,CAAC;QACtC,MAAM,cAAc,GAAG,gBAAgB,GAAG,UAAU,CAAC,KAAK,CAAC;QAC3D,MAAM,gBAAgB,GAAG,UAAU,CAAC,CAAC,CAAC;QACtC,MAAM,cAAc,GAAG,gBAAgB,GAAG,UAAU,CAAC,MAAM,CAAC;QAC5D,MAAM,UAAU,GAAG,CAAC,gBAAgB,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;QAC3D,MAAM,UAAU,GAAG,CAAC,gBAAgB,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;QAC3D,MAAM,4BAA4B,GAAG,UAAU,GAAG,EAAE,GAAG,CAAC,CAAC;QACzD,MAAM,2BAA2B,GAAG,UAAU,GAAG,EAAE,GAAG,CAAC,CAAC;QAExD,MAAM,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;QAChF,MAAM,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;QAEhF,IAAI,eAAe,GAAkB,IAAI,CAAC;QAC1C,IAAI,gBAAgB,GAAkB,IAAI,CAAC;QAE3C,MAAM,0BAA0B,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,CAClF,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE;YACV,IAAI,EAAE,KAAK,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAE;gBAC/B,OAAO,GAAG,CAAC;aACZ;YAED,IAAI,iBAAiB,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE;gBAC5B,OAAO,GAAG,GAAG,EAAE,CAAC,YAAY,GAAG,aAAa,CAAC;aAC9C;YAED,OAAO,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC;QAC/B,CAAC,EACD,CAAC,CACF,CAAC;QAEF,MAAM,oBAAoB,GAAG,IAAI,CAAC,GAAG,CACnC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,YAAY,EAClC,0BAA0B,CAC3B,CAAC;QAEF,MAAM,mBAAmB,GAAG,IAAI,CAAC,GAAG,CAClC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,WAAW,EACjC,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;YACrD,IAAI,EAAE,KAAK,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAE;gBAC/B,OAAO,CAAC,QAAQ,CAAC;aAClB;YAED,IAAI,iBAAiB,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE;gBAC5B,OAAO,EAAE,CAAC,WAAW,GAAG,aAAa,CAAC;aACvC;YAED,OAAO,EAAE,CAAC,WAAW,CAAC;QACxB,CAAC,CAAC,CACH,CAAC;QAEF,IAAI,iBAAiB,GAGN,yBAAyB,CAAC;QAEzC,IAAI,yBAAyB,KAAK,QAAQ,EAAE;YAC1C,gBAAgB,GAAG,EAAE,GAAG,cAAc,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;YAEjF;YACE,mDAAmD;YACnD,cAAc,GAAG,iBAAiB,GAAG,oBAAoB;gBACzD,EAAE,EACF;gBACA,sCAAsC;gBACtC,iBAAiB,GAAG,2BAA2B,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;aACpE;SACF;aAAM,IAAI,yBAAyB,KAAK,KAAK,EAAE;YAC9C,gBAAgB,GAAG,gBAAgB,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;YAE9E;YACE,gDAAgD;YAChD,gBAAgB,GAAG,iBAAiB,GAAG,oBAAoB;gBAC3D,CAAC,EACD;gBACA,sCAAsC;gBACtC,iBAAiB,GAAG,2BAA2B,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;aACpE;SACF;aAAM,IAAI,yBAAyB,KAAK,MAAM,EAAE;YAC/C,eAAe,GAAG,gBAAgB,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;YAE7E;YACE,iDAAiD;YACjD,gBAAgB,GAAG,iBAAiB,GAAG,mBAAmB;gBAC1D,CAAC,EACD;gBACA,sCAAsC;gBACtC,iBAAiB,GAAG,4BAA4B,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;aACrE;SACF;aAAM,IAAI,yBAAyB,KAAK,OAAO,EAAE;YAChD,eAAe,GAAG,EAAE,GAAG,cAAc,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;YAEhF;YACE,kDAAkD;YAClD,cAAc,GAAG,iBAAiB,GAAG,mBAAmB;gBACxD,EAAE,EACF;gBACA,sCAAsC;gBACtC,iBAAiB,GAAG,4BAA4B,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;aACrE;SACF;QAED,IAAI,iBAAiB,KAAK,MAAM,IAAI,iBAAiB,KAAK,OAAO,EAAE;YACjE,gBAAgB,GAAG,EAAE,GAAG,mBAAmB,CAAC;SAC7C;QAED,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,gBAAgB,IAAI,CAAC;QAEhE,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,eAAe,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,eAAe,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;QAE9F,iBAAiB,GAAG,GAAG,iBAAiB,GACtC,CAAC,2BAA2B,CAAC,CAAC,CAAC,IAAI,2BAA2B,EAAE,CAAC,CAAC,CAAC,EAAE,CAIvE,EAAE,CAAC;QAEH,IAAI,KAAK,CAAC,SAAS,KAAK,iBAAiB,EAAE;YACzC,KAAK,CAAC,SAAS,GAAG,iBAAiB,CAAC;YACpC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;SACpB;IACH,CAAC;CACF,CAAC,CAAC","sourcesContent":["import { Modifier } from '@popperjs/core';\n\nimport { getScrollbarWidth, testElForOverflow } from '../../utils';\n\nexport const sameWidth: Modifier<'sameWidth', object> = Object.freeze({\n  name: 'sameWidth',\n  enabled: true,\n  phase: 'beforeWrite',\n  fn({ state }) {\n    state.styles.popper.width = `${state.rects.reference.width}px`;\n  },\n  requires: ['computeStyles']\n});\n\nconst scrollbarSize = getScrollbarWidth();\nconst paddingFromViewport = 16;\n\nexport const placeAndContain: Modifier<'placeAndContain', object> = Object.freeze({\n  name: 'placeAndContain',\n  enabled: true,\n  phase: 'beforeWrite',\n  requires: ['computeStyles', 'offset'],\n  fn: ({ state }) => {\n    const [requestedPrimaryPlacement, requestedSecondaryPlacement] = state.placement.split('-') as [\n      primaryPlacement: 'top' | 'bottom' | 'left' | 'right' | 'auto',\n      secondaryPlacement?: 'start' | 'end' | undefined\n    ];\n\n    const vw = document.documentElement.clientWidth;\n    const vh = document.documentElement.clientHeight;\n\n    const targetRect = state.rects.reference;\n    const targetRectXStart = targetRect.x;\n    const targetRectXEnd = targetRectXStart + targetRect.width;\n    const targetRectYStart = targetRect.y;\n    const targetRectYEnd = targetRectYStart + targetRect.height;\n    const targetXMid = (targetRectXStart + targetRectXEnd) / 2;\n    const targetYMid = (targetRectYStart + targetRectYEnd) / 2;\n    const targetIsInLeftHalfOfViewport = targetXMid < vw / 2;\n    const targetIsInTopHalfOfViewport = targetYMid < vh / 2;\n\n    const offsetFromTargetX = state.modifiersData.offset?.[state.placement]?.x ?? 0;\n    const offsetFromTargetY = state.modifiersData.offset?.[state.placement]?.y ?? 0;\n\n    let popoverMaxWidth: null | number = null;\n    let popoverMaxHeight: null | number = null;\n\n    const totalScrollableChildHeight = Array.from(state.elements.popper.children).reduce(\n      (sum, el) => {\n        if (el === state.elements.arrow) {\n          return sum;\n        }\n\n        if (testElForOverflow(el)[0]) {\n          return sum + el.scrollHeight + scrollbarSize;\n        }\n\n        return sum + el.scrollHeight;\n      },\n      0\n    );\n\n    const naturalPopoverHeight = Math.max(\n      state.elements.popper.scrollHeight,\n      totalScrollableChildHeight\n    );\n\n    const naturalPopoverWidth = Math.max(\n      state.elements.popper.scrollWidth,\n      ...Array.from(state.elements.popper.children).map(el => {\n        if (el === state.elements.arrow) {\n          return -Infinity;\n        }\n\n        if (testElForOverflow(el)[1]) {\n          return el.scrollWidth + scrollbarSize;\n        }\n\n        return el.scrollWidth;\n      })\n    );\n\n    let resolvedPlacement: `${'top' | 'bottom' | 'left' | 'right' | 'auto'}${\n      | ''\n      | '-start'\n      | '-end'}` = requestedPrimaryPlacement;\n\n    if (requestedPrimaryPlacement === 'bottom') {\n      popoverMaxHeight = vh - targetRectYEnd - offsetFromTargetY - paddingFromViewport;\n\n      if (\n        // If the popover will overflow the viewport bottom\n        targetRectYEnd + offsetFromTargetY + naturalPopoverHeight >\n        vh\n      ) {\n        // Choose the side with most allowance\n        resolvedPlacement = targetIsInTopHalfOfViewport ? 'bottom' : 'top';\n      }\n    } else if (requestedPrimaryPlacement === 'top') {\n      popoverMaxHeight = targetRectYStart + offsetFromTargetY - paddingFromViewport;\n\n      if (\n        // If the popover will overflow the viewport top\n        targetRectYStart + offsetFromTargetY - naturalPopoverHeight <\n        0\n      ) {\n        // Choose the side with most allowance\n        resolvedPlacement = targetIsInTopHalfOfViewport ? 'bottom' : 'top';\n      }\n    } else if (requestedPrimaryPlacement === 'left') {\n      popoverMaxWidth = targetRectXStart + offsetFromTargetX - paddingFromViewport;\n\n      if (\n        // If the popover will overflow the viewport left\n        targetRectXStart + offsetFromTargetX - naturalPopoverWidth <\n        0\n      ) {\n        // Choose the side with most allowance\n        resolvedPlacement = targetIsInLeftHalfOfViewport ? 'right' : 'left';\n      }\n    } else if (requestedPrimaryPlacement === 'right') {\n      popoverMaxWidth = vw - targetRectXEnd - offsetFromTargetX - paddingFromViewport;\n\n      if (\n        // If the popover will overflow the viewport right\n        targetRectXEnd + offsetFromTargetX + naturalPopoverWidth >\n        vw\n      ) {\n        // Choose the side with most allowance\n        resolvedPlacement = targetIsInLeftHalfOfViewport ? 'right' : 'left';\n      }\n    }\n\n    if (resolvedPlacement === 'left' || resolvedPlacement === 'right') {\n      popoverMaxHeight = vh - paddingFromViewport;\n    }\n\n    state.elements.popper.style.maxHeight = `${popoverMaxHeight}px`;\n\n    state.elements.popper.style.maxWidth = popoverMaxWidth !== null ? `${popoverMaxWidth}px` : '';\n\n    resolvedPlacement = `${resolvedPlacement}${\n      (requestedSecondaryPlacement ? `-${requestedSecondaryPlacement}` : '') as\n        | ''\n        | '-start'\n        | '-end'\n    }`;\n\n    if (state.placement !== resolvedPlacement) {\n      state.placement = resolvedPlacement;\n      state.reset = true;\n    }\n  }\n});\n"]}

package/lib/components/Progress/Progress.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.styles.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,sBAAsB,yMAAqB,CAAC;AAczD,eAAO,MAAM,kBAAkB;iBACqB,OAAO;SAkDzD,CAAC;AAIH,eAAO,MAAM,iBAAiB;iBACG,OAAO;SAmDtC,CAAC;AAIH,eAAO,MAAM,sBAAsB,uIAsEjC,CAAC;AAIH,eAAO,MAAM,aAAa,0GAexB,CAAC;AAIH,eAAO,MAAM,cAAc,+NAc1B,CAAC"}
+{"version":3,"file":"Progress.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.styles.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,sBAAsB,yMAAqB,CAAC;AAczD,eAAO,MAAM,kBAAkB;iBACqB,OAAO;SAkDzD,CAAC;AAIH,eAAO,MAAM,iBAAiB;iBACG,OAAO;SAwDtC,CAAC;AAIH,eAAO,MAAM,sBAAsB,uIAsEjC,CAAC;AAIH,eAAO,MAAM,aAAa,0GAexB,CAAC;AAIH,eAAO,MAAM,cAAc,+NAc1B,CAAC"}

package/lib/components/Progress/Progress.styles.js

@@ -19,15 +19,6 @@ StyledProgressVisual.defaultProps = defaultThemeProp;
 export const StyledProgressRing = styled(StyledProgressVisual)(({ theme, placement, determinate }) => {
     const size = placement === 'inline' ? '1em' : '2rem';
     return css `
-    @keyframes LoadingRing {
-      0% {
-        transform: rotate(0deg);
-      }
-
-      100% {
-        transform: rotate(360deg);
-      }
-    }
     position: relative;
 
     svg {
@@ -52,6 +43,15 @@ export const StyledProgressRing = styled(StyledProgressVisual)(({ theme, placeme
 
           ${!determinate &&
         css `
+            @keyframes LoadingRing {
+              0% {
+                transform: rotate(0deg);
+              }
+
+              100% {
+                transform: rotate(360deg);
+              }
+            }
             animation: LoadingRing calc(4 * ${theme.base.animation.speed}) linear infinite;
           `}
         }
@@ -70,22 +70,18 @@ export const StyledProgressBar = styled(StyledProgressVisual)(({ theme, placemen
     return css `
     background-color: ${theme.base.colors.gray['extra-light']};
     border-radius: ${theme.base['border-radius']};
-    width: calc(100% - ${placement === 'local' ? css `4 * ${theme.base.spacing}` : '0rem'});
+    ${placement === 'local'
+        ? css `
+          width: calc(100% - 4 * ${theme.base.spacing});
+        `
+        : css `
+          width: 100%;
+        `}
     height: 0.375rem;
     min-width: 2rem;
     max-width: min(calc(100vw - 4 * ${theme.base.spacing}), ${theme.base['content-width'].lg});
     overflow: hidden;
 
-    @keyframes LoadingBar {
-      0% {
-        transform: translateX(-100%);
-      }
-
-      100% {
-        transform: translateX(200%);
-      }
-    }
-
     ::before {
       content: '';
       display: block;
@@ -104,6 +100,15 @@ export const StyledProgressBar = styled(StyledProgressVisual)(({ theme, placemen
 
       ${!determinate &&
         css `
+        @keyframes LoadingBar {
+          0% {
+            transform: translateX(-100%);
+          }
+
+          100% {
+            transform: translateX(200%);
+          }
+        }
         animation: LoadingBar calc(8 * ${theme.base.animation.speed}) linear infinite;
         width: 50%;
       `}

package/lib/components/Progress/Progress.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.styles.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { rgba, readableColor } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport Backdrop from '../Backdrop';\nimport Flex from '../Flex';\n\nimport { ProgressProps } from './Progress.types';\n\nexport const StyledProgressBackdrop = styled(Backdrop)``;\n\nconst StyledProgressVisual = styled.div(({ theme }) => {\n  return css`\n    &:focus-visible {\n      box-shadow: ${theme.components.button['focus-shadow']};\n      outline: none;\n      border-radius: calc(9999 * ${theme.base['border-radius']});\n    }\n  `;\n});\n\nStyledProgressVisual.defaultProps = defaultThemeProp;\n\nexport const StyledProgressRing = styled(StyledProgressVisual)<\n  Pick<ProgressProps, 'placement'> & { determinate: boolean }\n>(({ theme, placement, determinate }) => {\n  const size = placement === 'inline' ? '1em' : '2rem';\n\n  return css`\n    @keyframes LoadingRing {\n      0% {\n        transform: rotate(0deg);\n      }\n\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n    position: relative;\n\n    svg {\n      display: block;\n      width: ${size};\n      height: ${size};\n\n      circle {\n        fill: transparent;\n        stroke: ${theme.base.colors.gray['extra-light']};\n        stroke-width: 2;\n        r: 45%;\n        cx: 50%;\n        cy: 50%;\n        transform: rotate(-90deg);\n        transform-origin: 50% 50%;\n\n        &:nth-child(2) {\n          stroke: ${theme.components.progress['progress-color']};\n          transition: stroke-dashoffset calc(0.5 * ${theme.base.animation.speed})\n            ${theme.base.animation.timing.ease};\n\n          ${!determinate &&\n          css`\n            animation: LoadingRing calc(4 * ${theme.base.animation.speed}) linear infinite;\n          `}\n        }\n      }\n    }\n\n    ${placement === 'inline' &&\n    css`\n      display: inline-flex;\n      vertical-align: top;\n    `}\n  `;\n});\n\nStyledProgressRing.defaultProps = defaultThemeProp;\n\nexport const StyledProgressBar = styled(StyledProgressVisual)<\n  ProgressProps & { determinate: boolean }\n>(({ theme, placement, determinate }) => {\n  return css`\n    background-color: ${theme.base.colors.gray['extra-light']};\n    border-radius: ${theme.base['border-radius']};\n    width: calc(100% - ${placement === 'local' ? css`4 * ${theme.base.spacing}` : '0rem'});\n    height: 0.375rem;\n    min-width: 2rem;\n    max-width: min(calc(100vw - 4 * ${theme.base.spacing}), ${theme.base['content-width'].lg});\n    overflow: hidden;\n\n    @keyframes LoadingBar {\n      0% {\n        transform: translateX(-100%);\n      }\n\n      100% {\n        transform: translateX(200%);\n      }\n    }\n\n    ::before {\n      content: '';\n      display: block;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      border-radius: ${theme.base['border-radius']};\n      background-color: ${theme.components.progress['progress-color']};\n      ${determinate &&\n      css`\n        transform: translateX(var(--progress, 0));\n        transform-origin: 0 50%;\n        transition: transform calc(0.5 * ${theme.base.animation.speed})\n          ${theme.base.animation.timing.ease};\n      `}\n\n      ${!determinate &&\n      css`\n        animation: LoadingBar calc(8 * ${theme.base.animation.speed}) linear infinite;\n        width: 50%;\n      `}\n    }\n\n    ${placement === 'inline' &&\n    css`\n      width: 3rem;\n      display: inline-block;\n      position: relative;\n    `}\n  `;\n});\n\nStyledProgressBar.defaultProps = defaultThemeProp;\n\nexport const StyledProgressEllipsis = styled(StyledProgressVisual)<\n  Pick<ProgressProps, 'placement'>\n>(({ theme, placement }) => {\n  return css`\n    line-height: 1;\n    display: ${placement === 'inline' ? 'inline-flex' : 'block'};\n\n    @keyframes LoadingEllipsis {\n      0% {\n        transform: scale(0);\n        opacity: 0;\n      }\n\n      50% {\n        transform: scale(1);\n        opacity: 1;\n      }\n\n      100% {\n        transform: scale(0);\n        opacity: 0;\n      }\n    }\n\n    > span {\n      display: flex;\n      justify-content: center;\n      mix-blend-mode: multiply;\n\n      ${placement === 'inline' &&\n      css`\n        display: inline-flex;\n      `}\n    }\n\n    > span span {\n      margin: 0 0.3125rem;\n      background: ${theme.components.progress['progress-color']};\n      border-radius: 50%;\n      animation: LoadingEllipsis calc(4 * ${theme.base.animation.speed}) infinite;\n\n      ${placement === 'global' &&\n      css`\n        width: 1.25rem;\n        height: 1.25rem;\n      `}\n\n      ${(placement === 'local' || placement === 'block') &&\n      css`\n        width: 0.625rem;\n        height: 0.625rem;\n      `}\n\n      ${placement === 'inline' &&\n      css`\n        width: 0.1875rem;\n        height: 0.1875rem;\n        margin: 0 0.1875rem;\n        animation-duration: calc(4 * ${theme.base.animation.speed});\n      `}\n\n      &:nth-child(2) {\n        animation-delay: 0.1667s;\n      }\n\n      &:nth-child(3) {\n        animation-delay: ${0.1667 * 2}s;\n      }\n    }\n  `;\n});\n\nStyledProgressEllipsis.defaultProps = defaultThemeProp;\n\nexport const StyledMessage = styled.span(({ theme }) => {\n  const color = tryCatch(() => {\n    return rgba(\n      readableColor(theme.base.palette['primary-background']),\n      theme.base.transparency['transparent-3']\n    );\n  });\n\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    font-size: ${fontSize[theme.components.label['font-size'] as FontSize]};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    color: ${color};\n  `;\n});\n\nStyledMessage.defaultProps = defaultThemeProp;\n\nexport const StyledProgress = styled(Flex)<Pick<ProgressProps, 'placement'>>(\n  ({ theme, placement }) => {\n    return css`\n      ${placement !== 'inline' &&\n      css`\n        width: 100%;\n      `}\n\n      ${placement === 'block' &&\n      css`\n        margin-block: calc(2 * ${theme.base.spacing});\n      `}\n    `;\n  }\n);\n\nStyledProgress.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Progress.styles.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { rgba, readableColor } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { calculateFontSize, FontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport Backdrop from '../Backdrop';\nimport Flex from '../Flex';\n\nimport { ProgressProps } from './Progress.types';\n\nexport const StyledProgressBackdrop = styled(Backdrop)``;\n\nconst StyledProgressVisual = styled.div(({ theme }) => {\n  return css`\n    &:focus-visible {\n      box-shadow: ${theme.components.button['focus-shadow']};\n      outline: none;\n      border-radius: calc(9999 * ${theme.base['border-radius']});\n    }\n  `;\n});\n\nStyledProgressVisual.defaultProps = defaultThemeProp;\n\nexport const StyledProgressRing = styled(StyledProgressVisual)<\n  Pick<ProgressProps, 'placement'> & { determinate: boolean }\n>(({ theme, placement, determinate }) => {\n  const size = placement === 'inline' ? '1em' : '2rem';\n\n  return css`\n    position: relative;\n\n    svg {\n      display: block;\n      width: ${size};\n      height: ${size};\n\n      circle {\n        fill: transparent;\n        stroke: ${theme.base.colors.gray['extra-light']};\n        stroke-width: 2;\n        r: 45%;\n        cx: 50%;\n        cy: 50%;\n        transform: rotate(-90deg);\n        transform-origin: 50% 50%;\n\n        &:nth-child(2) {\n          stroke: ${theme.components.progress['progress-color']};\n          transition: stroke-dashoffset calc(0.5 * ${theme.base.animation.speed})\n            ${theme.base.animation.timing.ease};\n\n          ${!determinate &&\n          css`\n            @keyframes LoadingRing {\n              0% {\n                transform: rotate(0deg);\n              }\n\n              100% {\n                transform: rotate(360deg);\n              }\n            }\n            animation: LoadingRing calc(4 * ${theme.base.animation.speed}) linear infinite;\n          `}\n        }\n      }\n    }\n\n    ${placement === 'inline' &&\n    css`\n      display: inline-flex;\n      vertical-align: top;\n    `}\n  `;\n});\n\nStyledProgressRing.defaultProps = defaultThemeProp;\n\nexport const StyledProgressBar = styled(StyledProgressVisual)<\n  ProgressProps & { determinate: boolean }\n>(({ theme, placement, determinate }) => {\n  return css`\n    background-color: ${theme.base.colors.gray['extra-light']};\n    border-radius: ${theme.base['border-radius']};\n    ${placement === 'local'\n      ? css`\n          width: calc(100% - 4 * ${theme.base.spacing});\n        `\n      : css`\n          width: 100%;\n        `}\n    height: 0.375rem;\n    min-width: 2rem;\n    max-width: min(calc(100vw - 4 * ${theme.base.spacing}), ${theme.base['content-width'].lg});\n    overflow: hidden;\n\n    ::before {\n      content: '';\n      display: block;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      border-radius: ${theme.base['border-radius']};\n      background-color: ${theme.components.progress['progress-color']};\n      ${determinate &&\n      css`\n        transform: translateX(var(--progress, 0));\n        transform-origin: 0 50%;\n        transition: transform calc(0.5 * ${theme.base.animation.speed})\n          ${theme.base.animation.timing.ease};\n      `}\n\n      ${!determinate &&\n      css`\n        @keyframes LoadingBar {\n          0% {\n            transform: translateX(-100%);\n          }\n\n          100% {\n            transform: translateX(200%);\n          }\n        }\n        animation: LoadingBar calc(8 * ${theme.base.animation.speed}) linear infinite;\n        width: 50%;\n      `}\n    }\n\n    ${placement === 'inline' &&\n    css`\n      width: 3rem;\n      display: inline-block;\n      position: relative;\n    `}\n  `;\n});\n\nStyledProgressBar.defaultProps = defaultThemeProp;\n\nexport const StyledProgressEllipsis = styled(StyledProgressVisual)<\n  Pick<ProgressProps, 'placement'>\n>(({ theme, placement }) => {\n  return css`\n    line-height: 1;\n    display: ${placement === 'inline' ? 'inline-flex' : 'block'};\n\n    @keyframes LoadingEllipsis {\n      0% {\n        transform: scale(0);\n        opacity: 0;\n      }\n\n      50% {\n        transform: scale(1);\n        opacity: 1;\n      }\n\n      100% {\n        transform: scale(0);\n        opacity: 0;\n      }\n    }\n\n    > span {\n      display: flex;\n      justify-content: center;\n      mix-blend-mode: multiply;\n\n      ${placement === 'inline' &&\n      css`\n        display: inline-flex;\n      `}\n    }\n\n    > span span {\n      margin: 0 0.3125rem;\n      background: ${theme.components.progress['progress-color']};\n      border-radius: 50%;\n      animation: LoadingEllipsis calc(4 * ${theme.base.animation.speed}) infinite;\n\n      ${placement === 'global' &&\n      css`\n        width: 1.25rem;\n        height: 1.25rem;\n      `}\n\n      ${(placement === 'local' || placement === 'block') &&\n      css`\n        width: 0.625rem;\n        height: 0.625rem;\n      `}\n\n      ${placement === 'inline' &&\n      css`\n        width: 0.1875rem;\n        height: 0.1875rem;\n        margin: 0 0.1875rem;\n        animation-duration: calc(4 * ${theme.base.animation.speed});\n      `}\n\n      &:nth-child(2) {\n        animation-delay: 0.1667s;\n      }\n\n      &:nth-child(3) {\n        animation-delay: ${0.1667 * 2}s;\n      }\n    }\n  `;\n});\n\nStyledProgressEllipsis.defaultProps = defaultThemeProp;\n\nexport const StyledMessage = styled.span(({ theme }) => {\n  const color = tryCatch(() => {\n    return rgba(\n      readableColor(theme.base.palette['primary-background']),\n      theme.base.transparency['transparent-3']\n    );\n  });\n\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    font-size: ${fontSize[theme.components.label['font-size'] as FontSize]};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n    color: ${color};\n  `;\n});\n\nStyledMessage.defaultProps = defaultThemeProp;\n\nexport const StyledProgress = styled(Flex)<Pick<ProgressProps, 'placement'>>(\n  ({ theme, placement }) => {\n    return css`\n      ${placement !== 'inline' &&\n      css`\n        width: 100%;\n      `}\n\n      ${placement === 'block' &&\n      css`\n        margin-block: calc(2 * ${theme.base.spacing});\n      `}\n    `;\n  }\n);\n\nStyledProgress.defaultProps = defaultThemeProp;\n"]}

package/lib/components/RadioCheck/RadioCheck.js

@@ -45,8 +45,6 @@ export const StyledRadioCheckInput = styled.input(props => {
     const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;
     const { ltr } = useDirection();
     return css `
-    ${hideVisually}
-
     ${!disabled &&
         css `
       &:focus ${prcSelector} {
@@ -112,6 +110,8 @@ export const StyledRadioCheckInput = styled.input(props => {
         background-color: ${foreground};
       }
     }
+
+    ${hideVisually}
   `;
 });
 StyledRadioCheckInput.defaultProps = defaultThemeProp;

package/lib/components/RadioCheck/RadioCheck.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCheck.js","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FC,\n  Ref,\n  useEffect,\n  MouseEvent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  MouseEventHandler,\n  KeyboardEventHandler\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, hideVisually, mix } from 'polished';\n\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useConsolidatedRef, useDirection, useI18n, useUID } from '../../hooks';\nimport { StyledLabel } from '../Label';\nimport { calculateFontSize } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface RadioCheckProps extends BaseProps, NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Sets the type of input. */\n  type: 'radio' | 'checkbox';\n  /** Sets checked prop via onChange when using as controlled component. */\n  checked?: boolean;\n  /** Initialize checked prop when using as uncontrolled component. */\n  defaultChecked?: boolean;\n  /**\n   * Sets control to an an indeterminate state.\n   * @default false\n   */\n  indeterminate?: boolean;\n  /**\n   * Controls the styling of the RadioCheck.\n   * @default 'simple'\n   */\n  variant?: 'simple' | 'card';\n  /** Callback function for onClick events. */\n  onClick?: MouseEventHandler<HTMLInputElement>;\n  /** Callback function for onKeyDown events. */\n  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** info like error, success, warning messages */\n  info?: FormControlProps['info'];\n  /** Ref forwarded to the underlying input. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledPseudoRadioCheck = styled.div<Pick<RadioCheckProps, 'readOnly' | 'status'>>(\n  props => {\n    const {\n      theme: {\n        base: {\n          spacing,\n          palette: { 'primary-background': primaryBackground }\n        },\n        components: {\n          'form-field': formField,\n          'radio-check': {\n            size,\n            'touch-size': touchSize,\n            'background-color': backgroundColor,\n            'border-color': borderColor,\n            'border-width': borderWidth\n          }\n        }\n      },\n      status\n    } = props;\n\n    const useBorderColor = status === 'error' ? formField.error['status-color'] : borderColor;\n    const useBackgroundColor =\n      status && formField[status]\n        ? tryCatch(() => mix(0.8, primaryBackground, formField[status]['status-color']))\n        : backgroundColor;\n\n    return css`\n      display: flex;\n      flex-shrink: 0;\n      position: relative;\n      width: ${size};\n      height: ${size};\n      margin-inline-end: ${spacing};\n      border: ${borderWidth} solid ${useBorderColor};\n      background-color: ${useBackgroundColor};\n\n      @media (pointer: coarse) {\n        width: ${touchSize};\n        height: ${touchSize};\n      }\n\n      &::after {\n        content: '';\n        display: none;\n      }\n    `;\n  }\n);\n\nStyledPseudoRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckInput = styled.input(props => {\n  const {\n    disabled,\n    theme: {\n      base: { 'border-radius': baseBorderRadius },\n      components: {\n        'form-control': {\n          ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n          ':read-only': { 'background-color': readOnlyBackgroundColor }\n        },\n        'radio-check': {\n          ':checked': {\n            'background-color': checkedBackgroundColor,\n            'border-color': checkedBorderColor\n          }\n        },\n        checkbox: { 'border-radius': checkRadius },\n        'radio-button': { 'border-radius': radioRadius }\n      }\n    }\n  } = props;\n\n  const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;\n  const foreground = tryCatch(() => readableColor(backgroundColor));\n\n  const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;\n  const { ltr } = useDirection();\n\n  return css`\n    ${hideVisually}\n\n    ${!disabled &&\n    css`\n      &:focus ${prcSelector} {\n        box-shadow: ${shadow};\n        border-color: ${focusBorderColor};\n      }\n    `}\n\n    &:checked\n      ${prcSelector},\n      &:checked:disabled\n      ${prcSelector},\n      &[type='checkbox']:indeterminate\n      ${prcSelector},\n      &[type='checkbox']:indeterminate:disabled\n      ${prcSelector} {\n      border-color: ${props.readOnly ? 'inherit' : checkedBorderColor};\n      background-color: ${backgroundColor};\n\n      &::after {\n        display: block;\n      }\n    }\n\n    &[type='radio'] ${prcSelector}, &[type='radio'] ${prcSelector}::after {\n      border-radius: ${radioRadius};\n    }\n\n    &[type='radio'] ${prcSelector}::after {\n      margin: auto;\n      width: 100%;\n      height: 100%;\n      background-color: ${foreground};\n      transform: scale(0.4);\n    }\n\n    &[type='checkbox'] ${prcSelector} {\n      border-radius: min(calc(${baseBorderRadius} * ${checkRadius}), 0.25rem);\n    }\n\n    &[type='checkbox']:not(:indeterminate) ${prcSelector} {\n      &::after {\n        width: 40%;\n        height: 75%;\n        ${ltr\n          ? css`\n              transform: rotate(45deg) translate(50%, -30%);\n            `\n          : css`\n              transform: rotate(45deg) translate(-50%, 30%);\n            `}\n        border-right: 0.15em solid ${foreground};\n        border-bottom: 0.15em solid ${foreground};\n      }\n    }\n\n    &[type='checkbox']:indeterminate ${prcSelector} {\n      display: flex;\n      &::after {\n        width: 90%;\n        height: 0.15em;\n        margin: auto;\n        background-color: ${foreground};\n      }\n    }\n  `;\n});\n\nStyledRadioCheckInput.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheck = styled.div<Pick<RadioCheckProps, 'disabled' | 'readOnly'>>(\n  props => {\n    const {\n      disabled,\n      readOnly,\n      theme: {\n        base,\n        components: {\n          'radio-check': {\n            label: { color: labelColor, 'font-weight': labelFontWeight }\n          },\n          'form-control': {\n            ':hover': { 'border-color': hoverBorderColor }\n          }\n        }\n      }\n    } = props;\n\n    const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n    return css`\n      > ${StyledLabel} {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        font-weight: ${labelFontWeight};\n        word-break: break-word;\n        font-size: ${fontSize.s};\n        color: ${labelColor};\n        margin: 0;\n        min-height: ${base['hit-area']['mouse-min']};\n\n        @media (pointer: coarse) {\n          min-height: ${base['hit-area']['finger-min']};\n        }\n      }\n\n      ${!(disabled || readOnly) &&\n      css`\n        &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {\n          border-color: ${hoverBorderColor};\n        }\n      `}\n    `;\n  }\n);\n\nStyledRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckCard = styled.label<\n  Pick<RadioCheckProps, 'disabled' | 'readOnly' | 'status'>\n>(\n  ({\n    disabled,\n    readOnly,\n    status,\n    theme: {\n      base: { palette, shadow, spacing },\n      components: {\n        card,\n        'form-field': formField,\n        'radio-check': { label },\n        'form-control': {\n          ':hover': { 'border-color': hoverBorderColor }\n        }\n      }\n    }\n  }) => {\n    const useBorderColor =\n      status === 'error' ? formField.error['status-color'] : palette['border-line'];\n\n    return css`\n      min-width: min-content;\n      align-items: start;\n      cursor: pointer;\n      background-color: ${card.background};\n      border-radius: ${card['border-radius']};\n      border: 0.0625rem solid ${useBorderColor};\n      padding: ${spacing};\n\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n      `}\n\n      ${!(disabled || readOnly) &&\n      css`\n        :hover:not(:focus-within) {\n          border-color: ${hoverBorderColor};\n          ${StyledLabel} ${StyledPseudoRadioCheck} {\n            border-color: ${hoverBorderColor};\n          }\n        }\n\n        :focus-within {\n          box-shadow: ${shadow.focus};\n          border-color: transparent;\n        }\n      `}\n\n    > ${StyledLabel} {\n        display: grid;\n        grid-template-columns: auto 1fr;\n        color: ${label.color};\n        font-weight: ${label['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledRadioCheckCard.defaultProps = defaultThemeProp;\n\nconst RadioCheck: FC<RadioCheckProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<RadioCheckProps>, ref: RadioCheckProps['ref']) => {\n    const uid = useUID();\n    const t = useI18n();\n\n    const {\n      type,\n      id = uid,\n      label,\n      required = false,\n      disabled = false,\n      indeterminate = false,\n      readOnly = false,\n      variant = 'simple',\n      onClick,\n      onKeyDown,\n      status,\n      info,\n      additionalInfo,\n      ...restProps\n    } = props;\n\n    const isRadio = type === 'radio';\n    const card = variant === 'card';\n    const newRef = useConsolidatedRef(ref);\n\n    useEffect(() => {\n      if (!isRadio && newRef.current) {\n        newRef.current.indeterminate = !!indeterminate;\n      }\n    }, [newRef, indeterminate, isRadio]);\n\n    return (\n      <FormField\n        as={card ? StyledRadioCheckCard : StyledRadioCheck}\n        label={\n          <>\n            <StyledPseudoRadioCheck\n              status={status}\n              isRadio={isRadio}\n              as={StyledFormControl}\n              required={required}\n              disabled={disabled}\n              readOnly={readOnly}\n            />\n            <>\n              {label}\n              {readOnly && <VisuallyHiddenText>{` ${t('read_only')}`}</VisuallyHiddenText>}\n            </>\n          </>\n        }\n        labelAs={card ? 'div' : undefined}\n        id={id}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        status={status}\n        info={info}\n        isRadioCheck\n        inline\n        labelAfter\n        additionalInfo={additionalInfo}\n      >\n        <StyledRadioCheckInput\n          {...restProps}\n          id={id}\n          type={type}\n          required={required}\n          disabled={disabled}\n          readOnly={readOnly}\n          onClick={(e: MouseEvent<HTMLInputElement>) => {\n            if (readOnly) e.preventDefault();\n\n            onClick?.(e);\n          }}\n          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n            if (type === 'checkbox' && readOnly && e.key === ' ') {\n              e.preventDefault();\n            }\n            if (type === 'radio' && readOnly && e.key.includes('Arrow')) {\n              e.preventDefault();\n            }\n\n            onKeyDown?.(e);\n          }}\n          ref={newRef}\n        />\n      </FormField>\n    );\n  }\n);\n\nexport default RadioCheck;\n"]}
+{"version":3,"file":"RadioCheck.js","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FC,\n  Ref,\n  useEffect,\n  MouseEvent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  MouseEventHandler,\n  KeyboardEventHandler\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, hideVisually, mix } from 'polished';\n\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useConsolidatedRef, useDirection, useI18n, useUID } from '../../hooks';\nimport { StyledLabel } from '../Label';\nimport { calculateFontSize } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface RadioCheckProps extends BaseProps, NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Sets the type of input. */\n  type: 'radio' | 'checkbox';\n  /** Sets checked prop via onChange when using as controlled component. */\n  checked?: boolean;\n  /** Initialize checked prop when using as uncontrolled component. */\n  defaultChecked?: boolean;\n  /**\n   * Sets control to an an indeterminate state.\n   * @default false\n   */\n  indeterminate?: boolean;\n  /**\n   * Controls the styling of the RadioCheck.\n   * @default 'simple'\n   */\n  variant?: 'simple' | 'card';\n  /** Callback function for onClick events. */\n  onClick?: MouseEventHandler<HTMLInputElement>;\n  /** Callback function for onKeyDown events. */\n  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** info like error, success, warning messages */\n  info?: FormControlProps['info'];\n  /** Ref forwarded to the underlying input. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledPseudoRadioCheck = styled.div<Pick<RadioCheckProps, 'readOnly' | 'status'>>(\n  props => {\n    const {\n      theme: {\n        base: {\n          spacing,\n          palette: { 'primary-background': primaryBackground }\n        },\n        components: {\n          'form-field': formField,\n          'radio-check': {\n            size,\n            'touch-size': touchSize,\n            'background-color': backgroundColor,\n            'border-color': borderColor,\n            'border-width': borderWidth\n          }\n        }\n      },\n      status\n    } = props;\n\n    const useBorderColor = status === 'error' ? formField.error['status-color'] : borderColor;\n    const useBackgroundColor =\n      status && formField[status]\n        ? tryCatch(() => mix(0.8, primaryBackground, formField[status]['status-color']))\n        : backgroundColor;\n\n    return css`\n      display: flex;\n      flex-shrink: 0;\n      position: relative;\n      width: ${size};\n      height: ${size};\n      margin-inline-end: ${spacing};\n      border: ${borderWidth} solid ${useBorderColor};\n      background-color: ${useBackgroundColor};\n\n      @media (pointer: coarse) {\n        width: ${touchSize};\n        height: ${touchSize};\n      }\n\n      &::after {\n        content: '';\n        display: none;\n      }\n    `;\n  }\n);\n\nStyledPseudoRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckInput = styled.input(props => {\n  const {\n    disabled,\n    theme: {\n      base: { 'border-radius': baseBorderRadius },\n      components: {\n        'form-control': {\n          ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n          ':read-only': { 'background-color': readOnlyBackgroundColor }\n        },\n        'radio-check': {\n          ':checked': {\n            'background-color': checkedBackgroundColor,\n            'border-color': checkedBorderColor\n          }\n        },\n        checkbox: { 'border-radius': checkRadius },\n        'radio-button': { 'border-radius': radioRadius }\n      }\n    }\n  } = props;\n\n  const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;\n  const foreground = tryCatch(() => readableColor(backgroundColor));\n\n  const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;\n  const { ltr } = useDirection();\n\n  return css`\n    ${!disabled &&\n    css`\n      &:focus ${prcSelector} {\n        box-shadow: ${shadow};\n        border-color: ${focusBorderColor};\n      }\n    `}\n\n    &:checked\n      ${prcSelector},\n      &:checked:disabled\n      ${prcSelector},\n      &[type='checkbox']:indeterminate\n      ${prcSelector},\n      &[type='checkbox']:indeterminate:disabled\n      ${prcSelector} {\n      border-color: ${props.readOnly ? 'inherit' : checkedBorderColor};\n      background-color: ${backgroundColor};\n\n      &::after {\n        display: block;\n      }\n    }\n\n    &[type='radio'] ${prcSelector}, &[type='radio'] ${prcSelector}::after {\n      border-radius: ${radioRadius};\n    }\n\n    &[type='radio'] ${prcSelector}::after {\n      margin: auto;\n      width: 100%;\n      height: 100%;\n      background-color: ${foreground};\n      transform: scale(0.4);\n    }\n\n    &[type='checkbox'] ${prcSelector} {\n      border-radius: min(calc(${baseBorderRadius} * ${checkRadius}), 0.25rem);\n    }\n\n    &[type='checkbox']:not(:indeterminate) ${prcSelector} {\n      &::after {\n        width: 40%;\n        height: 75%;\n        ${ltr\n          ? css`\n              transform: rotate(45deg) translate(50%, -30%);\n            `\n          : css`\n              transform: rotate(45deg) translate(-50%, 30%);\n            `}\n        border-right: 0.15em solid ${foreground};\n        border-bottom: 0.15em solid ${foreground};\n      }\n    }\n\n    &[type='checkbox']:indeterminate ${prcSelector} {\n      display: flex;\n      &::after {\n        width: 90%;\n        height: 0.15em;\n        margin: auto;\n        background-color: ${foreground};\n      }\n    }\n\n    ${hideVisually}\n  `;\n});\n\nStyledRadioCheckInput.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheck = styled.div<Pick<RadioCheckProps, 'disabled' | 'readOnly'>>(\n  props => {\n    const {\n      disabled,\n      readOnly,\n      theme: {\n        base,\n        components: {\n          'radio-check': {\n            label: { color: labelColor, 'font-weight': labelFontWeight }\n          },\n          'form-control': {\n            ':hover': { 'border-color': hoverBorderColor }\n          }\n        }\n      }\n    } = props;\n\n    const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n    return css`\n      > ${StyledLabel} {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        font-weight: ${labelFontWeight};\n        word-break: break-word;\n        font-size: ${fontSize.s};\n        color: ${labelColor};\n        margin: 0;\n        min-height: ${base['hit-area']['mouse-min']};\n\n        @media (pointer: coarse) {\n          min-height: ${base['hit-area']['finger-min']};\n        }\n      }\n\n      ${!(disabled || readOnly) &&\n      css`\n        &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {\n          border-color: ${hoverBorderColor};\n        }\n      `}\n    `;\n  }\n);\n\nStyledRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckCard = styled.label<\n  Pick<RadioCheckProps, 'disabled' | 'readOnly' | 'status'>\n>(\n  ({\n    disabled,\n    readOnly,\n    status,\n    theme: {\n      base: { palette, shadow, spacing },\n      components: {\n        card,\n        'form-field': formField,\n        'radio-check': { label },\n        'form-control': {\n          ':hover': { 'border-color': hoverBorderColor }\n        }\n      }\n    }\n  }) => {\n    const useBorderColor =\n      status === 'error' ? formField.error['status-color'] : palette['border-line'];\n\n    return css`\n      min-width: min-content;\n      align-items: start;\n      cursor: pointer;\n      background-color: ${card.background};\n      border-radius: ${card['border-radius']};\n      border: 0.0625rem solid ${useBorderColor};\n      padding: ${spacing};\n\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n      `}\n\n      ${!(disabled || readOnly) &&\n      css`\n        :hover:not(:focus-within) {\n          border-color: ${hoverBorderColor};\n          ${StyledLabel} ${StyledPseudoRadioCheck} {\n            border-color: ${hoverBorderColor};\n          }\n        }\n\n        :focus-within {\n          box-shadow: ${shadow.focus};\n          border-color: transparent;\n        }\n      `}\n\n    > ${StyledLabel} {\n        display: grid;\n        grid-template-columns: auto 1fr;\n        color: ${label.color};\n        font-weight: ${label['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledRadioCheckCard.defaultProps = defaultThemeProp;\n\nconst RadioCheck: FC<RadioCheckProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<RadioCheckProps>, ref: RadioCheckProps['ref']) => {\n    const uid = useUID();\n    const t = useI18n();\n\n    const {\n      type,\n      id = uid,\n      label,\n      required = false,\n      disabled = false,\n      indeterminate = false,\n      readOnly = false,\n      variant = 'simple',\n      onClick,\n      onKeyDown,\n      status,\n      info,\n      additionalInfo,\n      ...restProps\n    } = props;\n\n    const isRadio = type === 'radio';\n    const card = variant === 'card';\n    const newRef = useConsolidatedRef(ref);\n\n    useEffect(() => {\n      if (!isRadio && newRef.current) {\n        newRef.current.indeterminate = !!indeterminate;\n      }\n    }, [newRef, indeterminate, isRadio]);\n\n    return (\n      <FormField\n        as={card ? StyledRadioCheckCard : StyledRadioCheck}\n        label={\n          <>\n            <StyledPseudoRadioCheck\n              status={status}\n              isRadio={isRadio}\n              as={StyledFormControl}\n              required={required}\n              disabled={disabled}\n              readOnly={readOnly}\n            />\n            <>\n              {label}\n              {readOnly && <VisuallyHiddenText>{` ${t('read_only')}`}</VisuallyHiddenText>}\n            </>\n          </>\n        }\n        labelAs={card ? 'div' : undefined}\n        id={id}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        status={status}\n        info={info}\n        isRadioCheck\n        inline\n        labelAfter\n        additionalInfo={additionalInfo}\n      >\n        <StyledRadioCheckInput\n          {...restProps}\n          id={id}\n          type={type}\n          required={required}\n          disabled={disabled}\n          readOnly={readOnly}\n          onClick={(e: MouseEvent<HTMLInputElement>) => {\n            if (readOnly) e.preventDefault();\n\n            onClick?.(e);\n          }}\n          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n            if (type === 'checkbox' && readOnly && e.key === ' ') {\n              e.preventDefault();\n            }\n            if (type === 'radio' && readOnly && e.key.includes('Arrow')) {\n              e.preventDefault();\n            }\n\n            onKeyDown?.(e);\n          }}\n          ref={newRef}\n        />\n      </FormField>\n    );\n  }\n);\n\nexport default RadioCheck;\n"]}

package/lib/components/SearchInput/SearchInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAYlD,OAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAmB1C,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEpG,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEtF,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,yEAAyE;IACzE,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,wEAAwE;IACxE,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,kBAAkB,CAAC,EAAE,UAAU,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;IACvD,2DAA2D;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAgQnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAYlD,OAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAmB1C,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEpG,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEtF,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,yEAAyE;IACzE,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,wEAAwE;IACxE,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,kBAAkB,CAAC,EAAE,UAAU,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;IACvD,2DAA2D;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAwPnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/SearchInput/SearchInput.js

@@ -125,15 +125,7 @@ const SearchInput = forwardRef((props, ref) => {
                         }, autoComplete: 'off' }), value && (_jsx(StyledCancelButton, { icon: true, onClick: () => {
                             onSearchChange?.('');
                             inputRef.current?.focus();
-                        }, variant: 'simple', compact: true, label: t('clear'), children: _jsx(Icon, { name: 'times' }) }))] }), showSearchMenu && resultsPopover && (_jsx(Popover, { as: StyledResultsPopover, target: inputRef.current, show: searchMenuOpen, placement: 'bottom-start', modifiers: [
-                    {
-                        name: 'flip',
-                        options: {
-                            fallbackPlacements: ['top-start']
-                        }
-                    },
-                    sameWidth
-                ], onBlur: () => {
+                        }, variant: 'simple', compact: true, label: t('clear'), children: _jsx(Icon, { name: 'times' }) }))] }), showSearchMenu && resultsPopover && (_jsx(Popover, { as: StyledResultsPopover, target: inputRef.current, show: searchMenuOpen, placement: 'bottom-start', modifiers: [sameWidth], onBlur: () => {
                     setSearchMenuOpen(false);
                 }, ref: searchResultsRef, children: searchMenu })), !resultsPopover && showSearchMenu && (_jsx(StyledSearchResultsContainer, { children: searchMenu })), searchMenuVisible && (_jsx(VisuallyHiddenText, { id: instructionTextId, children: `${t('search_instructions')} ` }))] }));
 });

package/lib/components/SearchInput/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  forwardRef,\n  useState,\n  ChangeEvent,\n  useCallback,\n  KeyboardEvent,\n  useEffect,\n  useRef\n} from 'react';\n\nimport { ForwardProps, NoChildrenProp, OmitStrict } from '../../types';\nimport Icon, { registerIcon } from '../Icon';\nimport * as searchIcon from '../Icon/icons/search.icon';\nimport { FormControlProps } from '../FormControl';\nimport {\n  useConsolidatedRef,\n  useEscape,\n  useI18n,\n  useOuterEvent,\n  useLiveLog,\n  useUID\n} from '../../hooks';\nimport Flex from '../Flex';\nimport Popover from '../Popover';\nimport { sameWidth } from '../Popover/modifiers';\nimport Menu, { MenuItemProps } from '../Menu';\nimport Link, { LinkProps } from '../Link';\nimport Text from '../Text';\nimport { createStringMatcher } from '../../utils';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport {\n  StyledCancelButton,\n  StyledResultsPopover,\n  StyledSearchButton,\n  StyledSearchFilterText,\n  StyledSearchInput,\n  StyledSearchMenu,\n  StyledSearchResultsContainer,\n  StyledSearchTextInput,\n  StyledMenuButton\n} from './SearchInput.styles';\n\nregisterIcon(searchIcon);\n\nexport type SearchResult = Pick<MenuItemProps, 'id' | 'primary' | 'secondary' | 'href' | 'onClick'>;\n\nexport type RecentSearch = Pick<MenuItemProps, 'id' | 'primary' | 'href' | 'onClick'>;\n\nexport interface SearchInputProps extends NoChildrenProp {\n  /**\n   * Placeholder text. The default value is a locale translation of 'Search…'\n   * @default \"Search…\"\n   */\n  placeholder?: FormControlProps['placeholder'];\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value?: FormControlProps['value'];\n  /** Called when the SearchInput value changes. */\n  onSearchChange?: (value: string) => void;\n  /**\n   * Called when the SearchButton is clicked or when the Enter key is pressed while SearchInput is in focus.\n   * NOTE: this does not trigger an actual form submit event. It simply represents an explicit action by the user to search as opposed to onSearchChange.\n   */\n  onSearchSubmit?: (value: string) => void;\n  /** A list of user selectable scopes to filter search with. */\n  filters?: string[];\n  /** The selected scope filter on initial render. */\n  defaultFilter?: string;\n  /** Called when user changes scope filter. */\n  onFilterChange?: (value: string) => void;\n  /** A list of matching results presented in the input's dropdown menu. */\n  searchResults?: SearchResult[];\n  /** A list of recent searches presented in the input's dropdown menu. */\n  recentSearches?: RecentSearch[];\n  /** Places the menu into an indeterminate loading state. */\n  loading?: boolean;\n  /** Prop passed to the advanced search page link. */\n  advancedSearchLink?: OmitStrict<LinkProps, 'children'>;\n  /** Aria label for search input, used by screen readers. */\n  searchInputAriaLabel?: string;\n  /**\n   * Boolean for determining for whether the search results will render in a popover.\n   * @default true\n   */\n  resultsPopover?: boolean;\n}\n\nconst SearchInput: FunctionComponent<SearchInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SearchInputProps>, ref: Ref<HTMLInputElement>) => {\n    const t = useI18n();\n\n    const {\n      value = '',\n      defaultFilter,\n      filters,\n      onFilterChange,\n      searchResults,\n      recentSearches,\n      loading: loadingProp,\n      advancedSearchLink,\n      placeholder = t('search_placeholder_default'),\n      onSearchChange,\n      onSearchSubmit,\n      searchInputAriaLabel,\n      resultsPopover = true,\n      ...restProps\n    } = props;\n    const instructionTextId = useUID();\n    const { announcePolite } = useLiveLog();\n    const inputRef = useConsolidatedRef(ref);\n    const filterButtonRef = useRef<HTMLButtonElement>(null);\n    const filtersRef = useRef<HTMLDivElement>(null);\n    const searchResultsRef = useRef<HTMLDivElement>(null);\n\n    const [searchMenuOpen, setSearchMenuOpen] = useState(false);\n    const [filterMenuOpen, setFilterMenuOpen] = useState(false);\n    const [searchResultItems, setSearchResultItems] = useState<MenuItemProps[] | undefined>(\n      undefined\n    );\n    const [selectedFilter, setSelectedFilter] = useState(defaultFilter ?? '');\n    const [downPressed, setDownPressed] = useState(false);\n\n    const completeFilters = [t('all'), ...(filters ?? [])];\n    const hasFilters = completeFilters.length > 1;\n    const hasSearchResults = !!(searchResults && searchResults.length);\n    const hasRecentSearches = !!(recentSearches && recentSearches.length);\n    const showSearchMenu = (value || recentSearches?.length) && (searchResultItems || loadingProp);\n    const useRecents = hasRecentSearches && !value;\n    const loading = useRecents ? false : !!loadingProp;\n    const [selectedFilterValue, setSelectedFilterValue] = useState('All');\n    const searchMenuVisible =\n      (resultsPopover && showSearchMenu && searchMenuOpen) || (!resultsPopover && showSearchMenu);\n\n    useEscape(e => {\n      e.preventDefault();\n      if (searchMenuOpen) {\n        setSearchMenuOpen(false);\n      }\n      if (filterMenuOpen) {\n        setFilterMenuOpen(false);\n      }\n    });\n\n    const onKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter') {\n          onSearchSubmit?.(value);\n        }\n        if (e.key === 'ArrowDown') {\n          setDownPressed(true);\n        }\n      },\n      [onSearchSubmit, value]\n    );\n\n    useOuterEvent('click', [filterButtonRef], () => {\n      setFilterMenuOpen(false);\n    });\n\n    useOuterEvent('click', [searchResultsRef, inputRef, filtersRef], () => {\n      setSearchMenuOpen(false);\n    });\n\n    useEffect(() => {\n      setDownPressed(false);\n    }, [value]);\n\n    useEffect(() => {\n      let items: MenuItemProps[] | undefined = [];\n      if (hasSearchResults && value) {\n        items = searchResults;\n      } else if (useRecents) {\n        items = recentSearches;\n      } else if (!searchResults && (!recentSearches || recentSearches.length === 0)) {\n        items = undefined;\n      }\n      setSearchResultItems(items);\n    }, [searchResults, recentSearches, searchMenuOpen, hasSearchResults, hasRecentSearches, value]);\n\n    // Announce results\n    useEffect(() => {\n      if (!searchMenuVisible || loading) return;\n\n      const timeout = setTimeout(() => {\n        announcePolite({\n          message: t(\n            useRecents ? 'recent_results_count' : 'results_count',\n            [searchResultItems?.length ?? 0],\n            {\n              count: searchResultItems?.length ?? 0\n            }\n          ),\n          type: 'status'\n        });\n      }, 1000);\n\n      return () => {\n        clearTimeout(timeout);\n      };\n    }, [loading, searchMenuVisible, searchResultItems]);\n\n    const searchMenu = (\n      <Menu\n        as={StyledSearchMenu}\n        header={\n          recentSearches && !value ? (\n            <Text variant='secondary'>{t('recent_searches')}</Text>\n          ) : undefined\n        }\n        mode='action'\n        items={searchResultItems ?? []}\n        loading={loading}\n        footer={\n          advancedSearchLink ? (\n            <Link {...advancedSearchLink}>{t('advanced_search')}</Link>\n          ) : undefined\n        }\n        accent={hasSearchResults ? createStringMatcher(value, undefined, 'gi') : undefined}\n        focusControlEl={(downPressed && inputRef.current) || undefined}\n        aria-label={searchInputAriaLabel || t('search')}\n      />\n    );\n    return (\n      <>\n        <Flex container as={StyledSearchInput} hasFilters={hasFilters}>\n          {hasFilters ? (\n            <StyledMenuButton\n              text={selectedFilterValue}\n              variant='text'\n              icon='search'\n              aria-label={\n                selectedFilterValue === 'All'\n                  ? t('select_search_filter')\n                  : t('selected_search_filter', [selectedFilterValue])\n              }\n              menu={{\n                mode: 'single-select',\n                items: completeFilters.map(filter => ({\n                  primary: filter,\n                  id: filter,\n                  selected: filter === t('all') ? selectedFilter === '' : selectedFilter === filter,\n                  onClick: () => {\n                    setSelectedFilterValue(filter);\n                    setSelectedFilter(filter === t('all') ? '' : filter);\n                    onFilterChange?.(filter);\n                    inputRef.current?.focus();\n                  }\n                }))\n              }}\n            />\n          ) : (\n            <Flex\n              as={StyledSearchButton}\n              ref={filterButtonRef}\n              forwardedAs={hasFilters ? undefined : 'div'}\n              container={{\n                justify: 'center',\n                alignItems: 'center',\n                gap: selectedFilter ? 0.5 : undefined\n              }}\n              decoupled={hasFilters}\n              aria-label={hasFilters ? t('select_search_filter') : undefined}\n            >\n              <Icon name='search' />\n              {selectedFilter && <StyledSearchFilterText>{selectedFilter}</StyledSearchFilterText>}\n              {hasFilters && <Icon name='arrow-micro-down' />}\n            </Flex>\n          )}\n\n          <StyledSearchTextInput\n            ref={inputRef}\n            type='search'\n            aria-label={searchInputAriaLabel}\n            placeholder={placeholder}\n            {...restProps}\n            aria-describedby={searchMenuVisible ? instructionTextId : undefined}\n            value={value}\n            onChange={(e: ChangeEvent<HTMLInputElement>) => {\n              onSearchChange?.(e.target.value);\n              if (e.target.value) setSearchMenuOpen(true);\n            }}\n            onKeyDown={onKeyDown}\n            onFocus={() => {\n              setSearchMenuOpen(true);\n            }}\n            decoupled={hasFilters}\n            onBlur={() => {\n              setDownPressed(false);\n              if (!advancedSearchLink) {\n                setSearchMenuOpen(false);\n              }\n            }}\n            autoComplete='off'\n          />\n          {value && (\n            <StyledCancelButton\n              icon\n              onClick={() => {\n                onSearchChange?.('');\n                inputRef.current?.focus();\n              }}\n              variant='simple'\n              compact\n              label={t('clear')}\n            >\n              <Icon name='times' />\n            </StyledCancelButton>\n          )}\n        </Flex>\n        {showSearchMenu && resultsPopover && (\n          <Popover\n            as={StyledResultsPopover}\n            target={inputRef.current}\n            show={searchMenuOpen}\n            placement='bottom-start'\n            modifiers={[\n              {\n                name: 'flip',\n                options: {\n                  fallbackPlacements: ['top-start']\n                }\n              },\n              sameWidth\n            ]}\n            onBlur={() => {\n              setSearchMenuOpen(false);\n            }}\n            ref={searchResultsRef}\n          >\n            {searchMenu}\n          </Popover>\n        )}\n        {!resultsPopover && showSearchMenu && (\n          <StyledSearchResultsContainer>{searchMenu}</StyledSearchResultsContainer>\n        )}\n        {searchMenuVisible && (\n          <VisuallyHiddenText id={instructionTextId}>\n            {`${t('search_instructions')} `}\n          </VisuallyHiddenText>\n        )}\n      </>\n    );\n  }\n);\n\nexport default SearchInput;\n"]}
+{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  forwardRef,\n  useState,\n  ChangeEvent,\n  useCallback,\n  KeyboardEvent,\n  useEffect,\n  useRef\n} from 'react';\n\nimport { ForwardProps, NoChildrenProp, OmitStrict } from '../../types';\nimport Icon, { registerIcon } from '../Icon';\nimport * as searchIcon from '../Icon/icons/search.icon';\nimport { FormControlProps } from '../FormControl';\nimport {\n  useConsolidatedRef,\n  useEscape,\n  useI18n,\n  useOuterEvent,\n  useLiveLog,\n  useUID\n} from '../../hooks';\nimport Flex from '../Flex';\nimport Popover from '../Popover';\nimport { sameWidth } from '../Popover/modifiers';\nimport Menu, { MenuItemProps } from '../Menu';\nimport Link, { LinkProps } from '../Link';\nimport Text from '../Text';\nimport { createStringMatcher } from '../../utils';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport {\n  StyledCancelButton,\n  StyledResultsPopover,\n  StyledSearchButton,\n  StyledSearchFilterText,\n  StyledSearchInput,\n  StyledSearchMenu,\n  StyledSearchResultsContainer,\n  StyledSearchTextInput,\n  StyledMenuButton\n} from './SearchInput.styles';\n\nregisterIcon(searchIcon);\n\nexport type SearchResult = Pick<MenuItemProps, 'id' | 'primary' | 'secondary' | 'href' | 'onClick'>;\n\nexport type RecentSearch = Pick<MenuItemProps, 'id' | 'primary' | 'href' | 'onClick'>;\n\nexport interface SearchInputProps extends NoChildrenProp {\n  /**\n   * Placeholder text. The default value is a locale translation of 'Search…'\n   * @default \"Search…\"\n   */\n  placeholder?: FormControlProps['placeholder'];\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value?: FormControlProps['value'];\n  /** Called when the SearchInput value changes. */\n  onSearchChange?: (value: string) => void;\n  /**\n   * Called when the SearchButton is clicked or when the Enter key is pressed while SearchInput is in focus.\n   * NOTE: this does not trigger an actual form submit event. It simply represents an explicit action by the user to search as opposed to onSearchChange.\n   */\n  onSearchSubmit?: (value: string) => void;\n  /** A list of user selectable scopes to filter search with. */\n  filters?: string[];\n  /** The selected scope filter on initial render. */\n  defaultFilter?: string;\n  /** Called when user changes scope filter. */\n  onFilterChange?: (value: string) => void;\n  /** A list of matching results presented in the input's dropdown menu. */\n  searchResults?: SearchResult[];\n  /** A list of recent searches presented in the input's dropdown menu. */\n  recentSearches?: RecentSearch[];\n  /** Places the menu into an indeterminate loading state. */\n  loading?: boolean;\n  /** Prop passed to the advanced search page link. */\n  advancedSearchLink?: OmitStrict<LinkProps, 'children'>;\n  /** Aria label for search input, used by screen readers. */\n  searchInputAriaLabel?: string;\n  /**\n   * Boolean for determining for whether the search results will render in a popover.\n   * @default true\n   */\n  resultsPopover?: boolean;\n}\n\nconst SearchInput: FunctionComponent<SearchInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SearchInputProps>, ref: Ref<HTMLInputElement>) => {\n    const t = useI18n();\n\n    const {\n      value = '',\n      defaultFilter,\n      filters,\n      onFilterChange,\n      searchResults,\n      recentSearches,\n      loading: loadingProp,\n      advancedSearchLink,\n      placeholder = t('search_placeholder_default'),\n      onSearchChange,\n      onSearchSubmit,\n      searchInputAriaLabel,\n      resultsPopover = true,\n      ...restProps\n    } = props;\n    const instructionTextId = useUID();\n    const { announcePolite } = useLiveLog();\n    const inputRef = useConsolidatedRef(ref);\n    const filterButtonRef = useRef<HTMLButtonElement>(null);\n    const filtersRef = useRef<HTMLDivElement>(null);\n    const searchResultsRef = useRef<HTMLDivElement>(null);\n\n    const [searchMenuOpen, setSearchMenuOpen] = useState(false);\n    const [filterMenuOpen, setFilterMenuOpen] = useState(false);\n    const [searchResultItems, setSearchResultItems] = useState<MenuItemProps[] | undefined>(\n      undefined\n    );\n    const [selectedFilter, setSelectedFilter] = useState(defaultFilter ?? '');\n    const [downPressed, setDownPressed] = useState(false);\n\n    const completeFilters = [t('all'), ...(filters ?? [])];\n    const hasFilters = completeFilters.length > 1;\n    const hasSearchResults = !!(searchResults && searchResults.length);\n    const hasRecentSearches = !!(recentSearches && recentSearches.length);\n    const showSearchMenu = (value || recentSearches?.length) && (searchResultItems || loadingProp);\n    const useRecents = hasRecentSearches && !value;\n    const loading = useRecents ? false : !!loadingProp;\n    const [selectedFilterValue, setSelectedFilterValue] = useState('All');\n    const searchMenuVisible =\n      (resultsPopover && showSearchMenu && searchMenuOpen) || (!resultsPopover && showSearchMenu);\n\n    useEscape(e => {\n      e.preventDefault();\n      if (searchMenuOpen) {\n        setSearchMenuOpen(false);\n      }\n      if (filterMenuOpen) {\n        setFilterMenuOpen(false);\n      }\n    });\n\n    const onKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter') {\n          onSearchSubmit?.(value);\n        }\n        if (e.key === 'ArrowDown') {\n          setDownPressed(true);\n        }\n      },\n      [onSearchSubmit, value]\n    );\n\n    useOuterEvent('click', [filterButtonRef], () => {\n      setFilterMenuOpen(false);\n    });\n\n    useOuterEvent('click', [searchResultsRef, inputRef, filtersRef], () => {\n      setSearchMenuOpen(false);\n    });\n\n    useEffect(() => {\n      setDownPressed(false);\n    }, [value]);\n\n    useEffect(() => {\n      let items: MenuItemProps[] | undefined = [];\n      if (hasSearchResults && value) {\n        items = searchResults;\n      } else if (useRecents) {\n        items = recentSearches;\n      } else if (!searchResults && (!recentSearches || recentSearches.length === 0)) {\n        items = undefined;\n      }\n      setSearchResultItems(items);\n    }, [searchResults, recentSearches, searchMenuOpen, hasSearchResults, hasRecentSearches, value]);\n\n    // Announce results\n    useEffect(() => {\n      if (!searchMenuVisible || loading) return;\n\n      const timeout = setTimeout(() => {\n        announcePolite({\n          message: t(\n            useRecents ? 'recent_results_count' : 'results_count',\n            [searchResultItems?.length ?? 0],\n            {\n              count: searchResultItems?.length ?? 0\n            }\n          ),\n          type: 'status'\n        });\n      }, 1000);\n\n      return () => {\n        clearTimeout(timeout);\n      };\n    }, [loading, searchMenuVisible, searchResultItems]);\n\n    const searchMenu = (\n      <Menu\n        as={StyledSearchMenu}\n        header={\n          recentSearches && !value ? (\n            <Text variant='secondary'>{t('recent_searches')}</Text>\n          ) : undefined\n        }\n        mode='action'\n        items={searchResultItems ?? []}\n        loading={loading}\n        footer={\n          advancedSearchLink ? (\n            <Link {...advancedSearchLink}>{t('advanced_search')}</Link>\n          ) : undefined\n        }\n        accent={hasSearchResults ? createStringMatcher(value, undefined, 'gi') : undefined}\n        focusControlEl={(downPressed && inputRef.current) || undefined}\n        aria-label={searchInputAriaLabel || t('search')}\n      />\n    );\n    return (\n      <>\n        <Flex container as={StyledSearchInput} hasFilters={hasFilters}>\n          {hasFilters ? (\n            <StyledMenuButton\n              text={selectedFilterValue}\n              variant='text'\n              icon='search'\n              aria-label={\n                selectedFilterValue === 'All'\n                  ? t('select_search_filter')\n                  : t('selected_search_filter', [selectedFilterValue])\n              }\n              menu={{\n                mode: 'single-select',\n                items: completeFilters.map(filter => ({\n                  primary: filter,\n                  id: filter,\n                  selected: filter === t('all') ? selectedFilter === '' : selectedFilter === filter,\n                  onClick: () => {\n                    setSelectedFilterValue(filter);\n                    setSelectedFilter(filter === t('all') ? '' : filter);\n                    onFilterChange?.(filter);\n                    inputRef.current?.focus();\n                  }\n                }))\n              }}\n            />\n          ) : (\n            <Flex\n              as={StyledSearchButton}\n              ref={filterButtonRef}\n              forwardedAs={hasFilters ? undefined : 'div'}\n              container={{\n                justify: 'center',\n                alignItems: 'center',\n                gap: selectedFilter ? 0.5 : undefined\n              }}\n              decoupled={hasFilters}\n              aria-label={hasFilters ? t('select_search_filter') : undefined}\n            >\n              <Icon name='search' />\n              {selectedFilter && <StyledSearchFilterText>{selectedFilter}</StyledSearchFilterText>}\n              {hasFilters && <Icon name='arrow-micro-down' />}\n            </Flex>\n          )}\n\n          <StyledSearchTextInput\n            ref={inputRef}\n            type='search'\n            aria-label={searchInputAriaLabel}\n            placeholder={placeholder}\n            {...restProps}\n            aria-describedby={searchMenuVisible ? instructionTextId : undefined}\n            value={value}\n            onChange={(e: ChangeEvent<HTMLInputElement>) => {\n              onSearchChange?.(e.target.value);\n              if (e.target.value) setSearchMenuOpen(true);\n            }}\n            onKeyDown={onKeyDown}\n            onFocus={() => {\n              setSearchMenuOpen(true);\n            }}\n            decoupled={hasFilters}\n            onBlur={() => {\n              setDownPressed(false);\n              if (!advancedSearchLink) {\n                setSearchMenuOpen(false);\n              }\n            }}\n            autoComplete='off'\n          />\n          {value && (\n            <StyledCancelButton\n              icon\n              onClick={() => {\n                onSearchChange?.('');\n                inputRef.current?.focus();\n              }}\n              variant='simple'\n              compact\n              label={t('clear')}\n            >\n              <Icon name='times' />\n            </StyledCancelButton>\n          )}\n        </Flex>\n        {showSearchMenu && resultsPopover && (\n          <Popover\n            as={StyledResultsPopover}\n            target={inputRef.current}\n            show={searchMenuOpen}\n            placement='bottom-start'\n            modifiers={[sameWidth]}\n            onBlur={() => {\n              setSearchMenuOpen(false);\n            }}\n            ref={searchResultsRef}\n          >\n            {searchMenu}\n          </Popover>\n        )}\n        {!resultsPopover && showSearchMenu && (\n          <StyledSearchResultsContainer>{searchMenu}</StyledSearchResultsContainer>\n        )}\n        {searchMenuVisible && (\n          <VisuallyHiddenText id={instructionTextId}>\n            {`${t('search_instructions')} `}\n          </VisuallyHiddenText>\n        )}\n      </>\n    );\n  }\n);\n\nexport default SearchInput;\n"]}

package/lib/components/Select/Select.js

@@ -23,7 +23,7 @@ export const StyledSelect = styled.select(props => {
     padding-inline-start: ${select.padding};
     padding-inline-end: calc(4 * ${base.spacing});
 
-    /* cSpell:disable-next-line */
+    /* cspell:disable-next-line */
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='${foreground}'%3E%3Cpath d='M12.1476563,16.5726562 C12.1476563,16.5726562 3.2875,9.72421875 3.2875,9.72421875 C3.2875,9.72421875 3.14375,9.58046875 3.14375,9.58046875 C3.04765625,9.3890625 3,9.19765625 3,9.00546875 C3,9.00546875 3,9.00546875 3,9.00546875 C3,8.33515625 3.33515625,8 3.9578125,8 C3.9578125,8 3.9578125,8 3.9578125,8 C4.1015625,8 4.29296875,8.09609375 4.628125,8.2390625 C4.628125,8.2390625 4.628125,8.2390625 4.628125,8.2390625 C4.628125,8.2390625 12.8179688,14.2257813 12.8179688,14.2257813 C12.8179688,14.2257813 21.103125,8.19140625 21.103125,8.19140625 C21.3421875,8.04765625 21.534375,8 21.678125,8 C21.678125,8 21.678125,8 21.678125,8 C22.3007813,8 22.6359375,8.33515625 22.6359375,9.00546875 C22.6359375,9.00546875 22.6359375,9.00546875 22.6359375,9.00546875 C22.6359375,9.196875 22.5882813,9.38828125 22.4921875,9.58046875 C22.4921875,9.58046875 22.4921875,9.58046875 22.4921875,9.58046875 C22.4921875,9.58046875 22.3484375,9.72421875 22.3484375,9.72421875 C22.3484375,9.72421875 13.4882812,16.525 13.4882812,16.525 C13.296875,16.7164063 13.0570312,16.8125 12.8179688,16.8125 C12.8179688,16.8125 12.8179688,16.8125 12.8179688,16.8125 C12.5789062,16.8125 12.3867188,16.7164062 12.1476563,16.5734375 C12.1476563,16.5734375 12.1476563,16.5734375 12.1476563,16.5734375 L12.1476563,16.5726562 Z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-size: calc(2 * ${base.spacing}) auto;
@@ -68,7 +68,7 @@ const Select = forwardRef((props, ref) => {
             }
             : undefined, children: children }));
     return label ? (_jsx(FormField, { ...{
-            testId: testIds.root,
+            testId: testIds,
             label: (_jsxs(_Fragment, { children: [label, readOnly && _jsx(VisuallyHiddenText, { children: ` ${t('read_only')}` })] })),
             labelHidden,
             id,