@simplybusiness/mobius 4.14.1 → 4.15.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 4.15.0
+
+### Minor Changes
+
+- c2f1d0a: Add `usePrefersReducedMotion` hook
+
 ## 4.14.1
 
 ### Patch Changes

package/dist/cjs/components/Accordion/Accordion.js

@@ -15,6 +15,7 @@ const _dedupe = /*#__PURE__*/ _interop_require_default(require("classnames/dedup
 const _react = require("react");
 const _Flex = require("../Flex");
 const _Icon = require("../Icon");
+const _usePrefersReducedMotion = require("../../hooks/usePrefersReducedMotion");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -91,7 +92,7 @@ const Accordion = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         open: true,
         withAnimation: false
     });
-    const prefersReducedMotion = typeof window === "object" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const prefersReducedMotion = (0, _usePrefersReducedMotion.usePrefersReducedMotion)();
     const containerClasses = (0, _dedupe.default)("mobius", "mobius/Accordion", props.className, {
         "--should-animate": accordionState.withAnimation && !prefersReducedMotion,
         "--is-open": accordionState.open

package/dist/cjs/components/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport { chevronDown } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport {\n  KeyboardEvent,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  forwardRef,\n  useEffect,\n  useState,\n} from \"react\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Flex } from \"../Flex\";\nimport { Icon } from \"../Icon\";\n\nexport type AccordionElementType = HTMLDivElement;\nexport type AccordionRef = Ref<AccordionElementType>;\nexport interface AccordionLinkProps extends DOMProps {\n  /** Link text to show accordion content */\n  text?: string;\n  onClick?: () => void;\n  toggle: () => void;\n  headerChildren?: ReactNode;\n  ariaExpanded: boolean | undefined;\n}\n\nconst AccordionLink = ({\n  text,\n  toggle,\n  onClick,\n  headerChildren,\n  ariaExpanded,\n}: AccordionLinkProps) => {\n  const linkClasses = classNames(\"mobius/AccordionLink\", {\n    \"--is-open\": ariaExpanded,\n  });\n  const iconClasses = classNames(\"mobius/AccordionLinkIcon\", {\n    \"--is-open\": ariaExpanded,\n  });\n\n  const handleOnClick = (): void => {\n    if (onClick) {\n      onClick();\n    }\n    toggle();\n  };\n\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === \" \" || e.key === \"Enter\") {\n      toggle();\n    }\n  };\n\n  if (headerChildren) {\n    return (\n      <Flex\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        className=\"mobius/AccordionHeader\"\n      >\n        <div\n          className={linkClasses}\n          onClick={handleOnClick}\n          onKeyDown={handleKeyDown}\n          role=\"button\"\n          tabIndex={0}\n          aria-expanded={!!ariaExpanded}\n        >\n          <span className=\"mobius/AccordionLinkText\">{text}</span>\n          <Icon icon={chevronDown} className={iconClasses} />\n        </div>\n        {headerChildren}\n      </Flex>\n    );\n  }\n\n  return (\n    <div\n      className={linkClasses}\n      onClick={handleOnClick}\n      onKeyDown={handleKeyDown}\n      role=\"button\"\n      tabIndex={0}\n      aria-expanded={!!ariaExpanded}\n    >\n      <span className=\"mobius/AccordionLinkText\">{text}</span>\n      <Icon icon={chevronDown} className={iconClasses} />\n    </div>\n  );\n};\n\nexport interface AccordionProps\n  extends DOMProps,\n    RefAttributes<AccordionElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Link text to show accordion content */\n  showText?: string;\n  /** Link text to hide accordion content */\n  hideText?: string;\n  /** Whether header is above or below content */\n  headerPosition?: \"top\" | \"bottom\";\n  /** Whether to expand the accordion initially */\n  startOpen?: boolean | undefined;\n  /** Callback that fires each time the accordion is opened */\n  onOpen?: () => void;\n  /** Callback that fires each time the accordion is closed */\n  onClose?: () => void;\n  /** Callback that fires each time the accordion state changes */\n  onChange?: (state: boolean) => void;\n  children?: ReactNode;\n  headerChildren?: ReactNode;\n}\n\nexport const Accordion: ForwardedRefComponent<\n  AccordionProps,\n  AccordionElementType\n> = forwardRef((props: AccordionProps, ref: AccordionRef) => {\n  const {\n    showText = \"See more\",\n    hideText = \"See less\",\n    headerPosition = \"top\",\n    startOpen = false,\n    onOpen,\n    onClose,\n    onChange = () => {},\n    headerChildren,\n    ...rest\n  } = props;\n  const [accordionState, setAccordionState] = useState({\n    open: true,\n    withAnimation: false,\n  });\n  const prefersReducedMotion =\n    typeof window === \"object\" &&\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n  const containerClasses = classNames(\n    \"mobius\",\n    \"mobius/Accordion\",\n    props.className,\n    {\n      \"--should-animate\": accordionState.withAnimation && !prefersReducedMotion,\n      \"--is-open\": accordionState.open,\n    },\n  );\n  const contentContainerClasses = classNames(\n    \"mobius/AccordionContentContainer\",\n    {\n      \"--is-open\": accordionState.open,\n    },\n  );\n  const contentClasses = classNames(\"mobius/AccordionContent\", {\n    \"--is-open\": accordionState.open,\n  });\n  const linkText = accordionState.open ? hideText : showText;\n\n  const handleChange = () => {\n    // Fire events\n    if (!accordionState.open && onOpen) {\n      onOpen();\n    }\n    if (accordionState.open && onClose) {\n      onClose();\n    }\n    if (onChange) {\n      onChange(!accordionState.open);\n    }\n    setAccordionState({\n      open: !accordionState.open,\n      withAnimation: true,\n    });\n  };\n\n  useEffect(() => {\n    setAccordionState({\n      open: startOpen,\n      withAnimation: false,\n    });\n  }, [startOpen]);\n\n  return (\n    <div ref={ref} {...rest} className={containerClasses}>\n      {headerPosition === \"top\" && (\n        <AccordionLink\n          text={linkText}\n          toggle={handleChange}\n          ariaExpanded={accordionState.open}\n          headerChildren={headerChildren}\n        />\n      )}\n      <div\n        className={contentContainerClasses}\n        aria-hidden={!accordionState.open}\n      >\n        <div className={contentClasses}>{props.children}</div>\n      </div>\n      {headerPosition === \"bottom\" && (\n        <AccordionLink\n          text={linkText}\n          toggle={handleChange}\n          ariaExpanded={accordionState.open}\n          headerChildren={headerChildren}\n        />\n      )}\n    </div>\n  );\n});\n"],"names":["Accordion","AccordionLink","text","toggle","onClick","headerChildren","ariaExpanded","linkClasses","classNames","iconClasses","handleOnClick","handleKeyDown","e","key","Flex","justifyContent","alignItems","className","div","onKeyDown","role","tabIndex","aria-expanded","span","Icon","icon","chevronDown","forwardRef","props","ref","showText","hideText","headerPosition","startOpen","onOpen","onClose","onChange","rest","accordionState","setAccordionState","useState","open","withAnimation","prefersReducedMotion","window","matchMedia","matches","containerClasses","contentContainerClasses","contentClasses","linkText","handleChange","useEffect","aria-hidden","children"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport { chevronDown } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport {\n  KeyboardEvent,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  forwardRef,\n  useEffect,\n  useState,\n} from \"react\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Flex } from \"../Flex\";\nimport { Icon } from \"../Icon\";\nimport { usePrefersReducedMotion } from \"../../hooks/usePrefersReducedMotion\";\n\nexport type AccordionElementType = HTMLDivElement;\nexport type AccordionRef = Ref<AccordionElementType>;\nexport interface AccordionLinkProps extends DOMProps {\n  /** Link text to show accordion content */\n  text?: string;\n  onClick?: () => void;\n  toggle: () => void;\n  headerChildren?: ReactNode;\n  ariaExpanded: boolean | undefined;\n}\n\nconst AccordionLink = ({\n  text,\n  toggle,\n  onClick,\n  headerChildren,\n  ariaExpanded,\n}: AccordionLinkProps) => {\n  const linkClasses = classNames(\"mobius/AccordionLink\", {\n    \"--is-open\": ariaExpanded,\n  });\n  const iconClasses = classNames(\"mobius/AccordionLinkIcon\", {\n    \"--is-open\": ariaExpanded,\n  });\n\n  const handleOnClick = (): void => {\n    if (onClick) {\n      onClick();\n    }\n    toggle();\n  };\n\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === \" \" || e.key === \"Enter\") {\n      toggle();\n    }\n  };\n\n  if (headerChildren) {\n    return (\n      <Flex\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        className=\"mobius/AccordionHeader\"\n      >\n        <div\n          className={linkClasses}\n          onClick={handleOnClick}\n          onKeyDown={handleKeyDown}\n          role=\"button\"\n          tabIndex={0}\n          aria-expanded={!!ariaExpanded}\n        >\n          <span className=\"mobius/AccordionLinkText\">{text}</span>\n          <Icon icon={chevronDown} className={iconClasses} />\n        </div>\n        {headerChildren}\n      </Flex>\n    );\n  }\n\n  return (\n    <div\n      className={linkClasses}\n      onClick={handleOnClick}\n      onKeyDown={handleKeyDown}\n      role=\"button\"\n      tabIndex={0}\n      aria-expanded={!!ariaExpanded}\n    >\n      <span className=\"mobius/AccordionLinkText\">{text}</span>\n      <Icon icon={chevronDown} className={iconClasses} />\n    </div>\n  );\n};\n\nexport interface AccordionProps\n  extends DOMProps,\n    RefAttributes<AccordionElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Link text to show accordion content */\n  showText?: string;\n  /** Link text to hide accordion content */\n  hideText?: string;\n  /** Whether header is above or below content */\n  headerPosition?: \"top\" | \"bottom\";\n  /** Whether to expand the accordion initially */\n  startOpen?: boolean | undefined;\n  /** Callback that fires each time the accordion is opened */\n  onOpen?: () => void;\n  /** Callback that fires each time the accordion is closed */\n  onClose?: () => void;\n  /** Callback that fires each time the accordion state changes */\n  onChange?: (state: boolean) => void;\n  children?: ReactNode;\n  headerChildren?: ReactNode;\n}\n\nexport const Accordion: ForwardedRefComponent<\n  AccordionProps,\n  AccordionElementType\n> = forwardRef((props: AccordionProps, ref: AccordionRef) => {\n  const {\n    showText = \"See more\",\n    hideText = \"See less\",\n    headerPosition = \"top\",\n    startOpen = false,\n    onOpen,\n    onClose,\n    onChange = () => {},\n    headerChildren,\n    ...rest\n  } = props;\n  const [accordionState, setAccordionState] = useState({\n    open: true,\n    withAnimation: false,\n  });\n  const prefersReducedMotion = usePrefersReducedMotion();\n\n  const containerClasses = classNames(\n    \"mobius\",\n    \"mobius/Accordion\",\n    props.className,\n    {\n      \"--should-animate\": accordionState.withAnimation && !prefersReducedMotion,\n      \"--is-open\": accordionState.open,\n    },\n  );\n  const contentContainerClasses = classNames(\n    \"mobius/AccordionContentContainer\",\n    {\n      \"--is-open\": accordionState.open,\n    },\n  );\n  const contentClasses = classNames(\"mobius/AccordionContent\", {\n    \"--is-open\": accordionState.open,\n  });\n  const linkText = accordionState.open ? hideText : showText;\n\n  const handleChange = () => {\n    // Fire events\n    if (!accordionState.open && onOpen) {\n      onOpen();\n    }\n    if (accordionState.open && onClose) {\n      onClose();\n    }\n    if (onChange) {\n      onChange(!accordionState.open);\n    }\n    setAccordionState({\n      open: !accordionState.open,\n      withAnimation: true,\n    });\n  };\n\n  useEffect(() => {\n    setAccordionState({\n      open: startOpen,\n      withAnimation: false,\n    });\n  }, [startOpen]);\n\n  return (\n    <div ref={ref} {...rest} className={containerClasses}>\n      {headerPosition === \"top\" && (\n        <AccordionLink\n          text={linkText}\n          toggle={handleChange}\n          ariaExpanded={accordionState.open}\n          headerChildren={headerChildren}\n        />\n      )}\n      <div\n        className={contentContainerClasses}\n        aria-hidden={!accordionState.open}\n      >\n        <div className={contentClasses}>{props.children}</div>\n      </div>\n      {headerPosition === \"bottom\" && (\n        <AccordionLink\n          text={linkText}\n          toggle={handleChange}\n          ariaExpanded={accordionState.open}\n          headerChildren={headerChildren}\n        />\n      )}\n    </div>\n  );\n});\n"],"names":["Accordion","AccordionLink","text","toggle","onClick","headerChildren","ariaExpanded","linkClasses","classNames","iconClasses","handleOnClick","handleKeyDown","e","key","Flex","justifyContent","alignItems","className","div","onKeyDown","role","tabIndex","aria-expanded","span","Icon","icon","chevronDown","forwardRef","props","ref","showText","hideText","headerPosition","startOpen","onOpen","onClose","onChange","rest","accordionState","setAccordionState","useState","open","withAnimation","prefersReducedMotion","usePrefersReducedMotion","containerClasses","contentContainerClasses","contentClasses","linkText","handleChange","useEffect","aria-hidden","children"],"mappings":"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"}

package/dist/cjs/hooks/index.js

@@ -10,6 +10,7 @@ _export_star(require("./useDialog"), exports);
 _export_star(require("./useDialogPolyfill"), exports);
 _export_star(require("./useLabel"), exports);
 _export_star(require("./useOnClickOutside"), exports);
+_export_star(require("./usePrefersReducedMotion"), exports);
 _export_star(require("./useTextField"), exports);
 _export_star(require("./useValidationClasses"), exports);
 _export_star(require("./useWindowEvent"), exports);

package/dist/cjs/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/index.tsx"],"sourcesContent":["export * from \"./useBodyScrollLock\";\nexport * from \"./useBreakpoint\";\nexport * from \"./useButton\";\nexport * from \"./useDeprecationWarning\";\nexport * from \"./useDialog\";\nexport * from \"./useDialogPolyfill\";\nexport * from \"./useLabel\";\nexport * from \"./useOnClickOutside\";\nexport * from \"./useTextField\";\nexport * from \"./useValidationClasses\";\nexport * from \"./useWindowEvent\";\n"],"names":[],"mappings":";;;;qBAAc;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA"}
+{"version":3,"sources":["../../../src/hooks/index.tsx"],"sourcesContent":["export * from \"./useBodyScrollLock\";\nexport * from \"./useBreakpoint\";\nexport * from \"./useButton\";\nexport * from \"./useDeprecationWarning\";\nexport * from \"./useDialog\";\nexport * from \"./useDialogPolyfill\";\nexport * from \"./useLabel\";\nexport * from \"./useOnClickOutside\";\nexport * from \"./usePrefersReducedMotion\";\nexport * from \"./useTextField\";\nexport * from \"./useValidationClasses\";\nexport * from \"./useWindowEvent\";\n"],"names":[],"mappings":";;;;qBAAc;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA"}

package/dist/cjs/hooks/usePrefersReducedMotion/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./usePrefersReducedMotion"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}
+
+//# sourceMappingURL=index.js.map

package/dist/cjs/hooks/usePrefersReducedMotion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/usePrefersReducedMotion/index.tsx"],"sourcesContent":["export * from \"./usePrefersReducedMotion\";\n"],"names":[],"mappings":";;;;qBAAc"}

package/dist/cjs/hooks/usePrefersReducedMotion/usePrefersReducedMotion.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "usePrefersReducedMotion", {
+    enumerable: true,
+    get: function() {
+        return usePrefersReducedMotion;
+    }
+});
+const _react = require("react");
+function usePrefersReducedMotion() {
+    const [prefersReducedMotion, setPrefersReducedMotion] = (0, _react.useState)(false);
+    (0, _react.useEffect)(()=>{
+        const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+        setPrefersReducedMotion(mediaQuery.matches);
+        const listener = (event)=>{
+            setPrefersReducedMotion(event.matches);
+        };
+        mediaQuery.addEventListener("change", listener);
+        return ()=>{
+            mediaQuery.removeEventListener("change", listener);
+        };
+    }, []);
+    return prefersReducedMotion;
+}
+
+//# sourceMappingURL=usePrefersReducedMotion.js.map

package/dist/cjs/hooks/usePrefersReducedMotion/usePrefersReducedMotion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/usePrefersReducedMotion/usePrefersReducedMotion.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nexport function usePrefersReducedMotion(): boolean {\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n\n  useEffect(() => {\n    const mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    setPrefersReducedMotion(mediaQuery.matches);\n\n    const listener = (event: MediaQueryListEvent) => {\n      setPrefersReducedMotion(event.matches);\n    };\n\n    mediaQuery.addEventListener(\"change\", listener);\n\n    return () => {\n      mediaQuery.removeEventListener(\"change\", listener);\n    };\n  }, []);\n\n  return prefersReducedMotion;\n}\n"],"names":["usePrefersReducedMotion","prefersReducedMotion","setPrefersReducedMotion","useState","useEffect","mediaQuery","window","matchMedia","matches","listener","event","addEventListener","removeEventListener"],"mappings":";;;;+BAEgBA;;;eAAAA;;;uBAFoB;AAE7B,SAASA;IACd,MAAM,CAACC,sBAAsBC,wBAAwB,GAAGC,IAAAA,eAAQ,EAAC;IAEjEC,IAAAA,gBAAS,EAAC;QACR,MAAMC,aAAaC,OAAOC,UAAU,CAAC;QACrCL,wBAAwBG,WAAWG,OAAO;QAE1C,MAAMC,WAAW,CAACC;YAChBR,wBAAwBQ,MAAMF,OAAO;QACvC;QAEAH,WAAWM,gBAAgB,CAAC,UAAUF;QAEtC,OAAO;YACLJ,WAAWO,mBAAmB,CAAC,UAAUH;QAC3C;IACF,GAAG,EAAE;IAEL,OAAOR;AACT"}

package/dist/esm/components/Accordion/Accordion.js

@@ -5,6 +5,7 @@ import classNames from "classnames/dedupe";
 import { forwardRef, useEffect, useState } from "react";
 import { Flex } from "../Flex";
 import { Icon } from "../Icon";
+import { usePrefersReducedMotion } from "../../hooks/usePrefersReducedMotion";
 const AccordionLink = ({ text, toggle, onClick, headerChildren, ariaExpanded })=>{
     const linkClasses = classNames("mobius/AccordionLink", {
         "--is-open": ariaExpanded
@@ -76,7 +77,7 @@ export const Accordion = /*#__PURE__*/ forwardRef((props, ref)=>{
         open: true,
         withAnimation: false
     });
-    const prefersReducedMotion = typeof window === "object" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const prefersReducedMotion = usePrefersReducedMotion();
     const containerClasses = classNames("mobius", "mobius/Accordion", props.className, {
         "--should-animate": accordionState.withAnimation && !prefersReducedMotion,
         "--is-open": accordionState.open

package/dist/esm/components/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport { chevronDown } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport {\n  KeyboardEvent,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  forwardRef,\n  useEffect,\n  useState,\n} from \"react\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Flex } from \"../Flex\";\nimport { Icon } from \"../Icon\";\n\nexport type AccordionElementType = HTMLDivElement;\nexport type AccordionRef = Ref<AccordionElementType>;\nexport interface AccordionLinkProps extends DOMProps {\n  /** Link text to show accordion content */\n  text?: string;\n  onClick?: () => void;\n  toggle: () => void;\n  headerChildren?: ReactNode;\n  ariaExpanded: boolean | undefined;\n}\n\nconst AccordionLink = ({\n  text,\n  toggle,\n  onClick,\n  headerChildren,\n  ariaExpanded,\n}: AccordionLinkProps) => {\n  const linkClasses = classNames(\"mobius/AccordionLink\", {\n    \"--is-open\": ariaExpanded,\n  });\n  const iconClasses = classNames(\"mobius/AccordionLinkIcon\", {\n    \"--is-open\": ariaExpanded,\n  });\n\n  const handleOnClick = (): void => {\n    if (onClick) {\n      onClick();\n    }\n    toggle();\n  };\n\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === \" \" || e.key === \"Enter\") {\n      toggle();\n    }\n  };\n\n  if (headerChildren) {\n    return (\n      <Flex\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        className=\"mobius/AccordionHeader\"\n      >\n        <div\n          className={linkClasses}\n          onClick={handleOnClick}\n          onKeyDown={handleKeyDown}\n          role=\"button\"\n          tabIndex={0}\n          aria-expanded={!!ariaExpanded}\n        >\n          <span className=\"mobius/AccordionLinkText\">{text}</span>\n          <Icon icon={chevronDown} className={iconClasses} />\n        </div>\n        {headerChildren}\n      </Flex>\n    );\n  }\n\n  return (\n    <div\n      className={linkClasses}\n      onClick={handleOnClick}\n      onKeyDown={handleKeyDown}\n      role=\"button\"\n      tabIndex={0}\n      aria-expanded={!!ariaExpanded}\n    >\n      <span className=\"mobius/AccordionLinkText\">{text}</span>\n      <Icon icon={chevronDown} className={iconClasses} />\n    </div>\n  );\n};\n\nexport interface AccordionProps\n  extends DOMProps,\n    RefAttributes<AccordionElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Link text to show accordion content */\n  showText?: string;\n  /** Link text to hide accordion content */\n  hideText?: string;\n  /** Whether header is above or below content */\n  headerPosition?: \"top\" | \"bottom\";\n  /** Whether to expand the accordion initially */\n  startOpen?: boolean | undefined;\n  /** Callback that fires each time the accordion is opened */\n  onOpen?: () => void;\n  /** Callback that fires each time the accordion is closed */\n  onClose?: () => void;\n  /** Callback that fires each time the accordion state changes */\n  onChange?: (state: boolean) => void;\n  children?: ReactNode;\n  headerChildren?: ReactNode;\n}\n\nexport const Accordion: ForwardedRefComponent<\n  AccordionProps,\n  AccordionElementType\n> = forwardRef((props: AccordionProps, ref: AccordionRef) => {\n  const {\n    showText = \"See more\",\n    hideText = \"See less\",\n    headerPosition = \"top\",\n    startOpen = false,\n    onOpen,\n    onClose,\n    onChange = () => {},\n    headerChildren,\n    ...rest\n  } = props;\n  const [accordionState, setAccordionState] = useState({\n    open: true,\n    withAnimation: false,\n  });\n  const prefersReducedMotion =\n    typeof window === \"object\" &&\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n  const containerClasses = classNames(\n    \"mobius\",\n    \"mobius/Accordion\",\n    props.className,\n    {\n      \"--should-animate\": accordionState.withAnimation && !prefersReducedMotion,\n      \"--is-open\": accordionState.open,\n    },\n  );\n  const contentContainerClasses = classNames(\n    \"mobius/AccordionContentContainer\",\n    {\n      \"--is-open\": accordionState.open,\n    },\n  );\n  const contentClasses = classNames(\"mobius/AccordionContent\", {\n    \"--is-open\": accordionState.open,\n  });\n  const linkText = accordionState.open ? hideText : showText;\n\n  const handleChange = () => {\n    // Fire events\n    if (!accordionState.open && onOpen) {\n      onOpen();\n    }\n    if (accordionState.open && onClose) {\n      onClose();\n    }\n    if (onChange) {\n      onChange(!accordionState.open);\n    }\n    setAccordionState({\n      open: !accordionState.open,\n      withAnimation: true,\n    });\n  };\n\n  useEffect(() => {\n    setAccordionState({\n      open: startOpen,\n      withAnimation: false,\n    });\n  }, [startOpen]);\n\n  return (\n    <div ref={ref} {...rest} className={containerClasses}>\n      {headerPosition === \"top\" && (\n        <AccordionLink\n          text={linkText}\n          toggle={handleChange}\n          ariaExpanded={accordionState.open}\n          headerChildren={headerChildren}\n        />\n      )}\n      <div\n        className={contentContainerClasses}\n        aria-hidden={!accordionState.open}\n      >\n        <div className={contentClasses}>{props.children}</div>\n      </div>\n      {headerPosition === \"bottom\" && (\n        <AccordionLink\n          text={linkText}\n          toggle={handleChange}\n          ariaExpanded={accordionState.open}\n          headerChildren={headerChildren}\n        />\n      )}\n    </div>\n  );\n});\n"],"names":["chevronDown","classNames","forwardRef","useEffect","useState","Flex","Icon","AccordionLink","text","toggle","onClick","headerChildren","ariaExpanded","linkClasses","iconClasses","handleOnClick","handleKeyDown","e","key","justifyContent","alignItems","className","div","onKeyDown","role","tabIndex","aria-expanded","span","icon","Accordion","props","ref","showText","hideText","headerPosition","startOpen","onOpen","onClose","onChange","rest","accordionState","setAccordionState","open","withAnimation","prefersReducedMotion","window","matchMedia","matches","containerClasses","contentContainerClasses","contentClasses","linkText","handleChange","aria-hidden","children"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport { chevronDown } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport {\n  KeyboardEvent,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  forwardRef,\n  useEffect,\n  useState,\n} from \"react\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { DOMProps } from \"../../types/dom\";\nimport { Flex } from \"../Flex\";\nimport { Icon } from \"../Icon\";\nimport { usePrefersReducedMotion } from \"../../hooks/usePrefersReducedMotion\";\n\nexport type AccordionElementType = HTMLDivElement;\nexport type AccordionRef = Ref<AccordionElementType>;\nexport interface AccordionLinkProps extends DOMProps {\n  /** Link text to show accordion content */\n  text?: string;\n  onClick?: () => void;\n  toggle: () => void;\n  headerChildren?: ReactNode;\n  ariaExpanded: boolean | undefined;\n}\n\nconst AccordionLink = ({\n  text,\n  toggle,\n  onClick,\n  headerChildren,\n  ariaExpanded,\n}: AccordionLinkProps) => {\n  const linkClasses = classNames(\"mobius/AccordionLink\", {\n    \"--is-open\": ariaExpanded,\n  });\n  const iconClasses = classNames(\"mobius/AccordionLinkIcon\", {\n    \"--is-open\": ariaExpanded,\n  });\n\n  const handleOnClick = (): void => {\n    if (onClick) {\n      onClick();\n    }\n    toggle();\n  };\n\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === \" \" || e.key === \"Enter\") {\n      toggle();\n    }\n  };\n\n  if (headerChildren) {\n    return (\n      <Flex\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        className=\"mobius/AccordionHeader\"\n      >\n        <div\n          className={linkClasses}\n          onClick={handleOnClick}\n          onKeyDown={handleKeyDown}\n          role=\"button\"\n          tabIndex={0}\n          aria-expanded={!!ariaExpanded}\n        >\n          <span className=\"mobius/AccordionLinkText\">{text}</span>\n          <Icon icon={chevronDown} className={iconClasses} />\n        </div>\n        {headerChildren}\n      </Flex>\n    );\n  }\n\n  return (\n    <div\n      className={linkClasses}\n      onClick={handleOnClick}\n      onKeyDown={handleKeyDown}\n      role=\"button\"\n      tabIndex={0}\n      aria-expanded={!!ariaExpanded}\n    >\n      <span className=\"mobius/AccordionLinkText\">{text}</span>\n      <Icon icon={chevronDown} className={iconClasses} />\n    </div>\n  );\n};\n\nexport interface AccordionProps\n  extends DOMProps,\n    RefAttributes<AccordionElementType> {\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  /** Link text to show accordion content */\n  showText?: string;\n  /** Link text to hide accordion content */\n  hideText?: string;\n  /** Whether header is above or below content */\n  headerPosition?: \"top\" | \"bottom\";\n  /** Whether to expand the accordion initially */\n  startOpen?: boolean | undefined;\n  /** Callback that fires each time the accordion is opened */\n  onOpen?: () => void;\n  /** Callback that fires each time the accordion is closed */\n  onClose?: () => void;\n  /** Callback that fires each time the accordion state changes */\n  onChange?: (state: boolean) => void;\n  children?: ReactNode;\n  headerChildren?: ReactNode;\n}\n\nexport const Accordion: ForwardedRefComponent<\n  AccordionProps,\n  AccordionElementType\n> = forwardRef((props: AccordionProps, ref: AccordionRef) => {\n  const {\n    showText = \"See more\",\n    hideText = \"See less\",\n    headerPosition = \"top\",\n    startOpen = false,\n    onOpen,\n    onClose,\n    onChange = () => {},\n    headerChildren,\n    ...rest\n  } = props;\n  const [accordionState, setAccordionState] = useState({\n    open: true,\n    withAnimation: false,\n  });\n  const prefersReducedMotion = usePrefersReducedMotion();\n\n  const containerClasses = classNames(\n    \"mobius\",\n    \"mobius/Accordion\",\n    props.className,\n    {\n      \"--should-animate\": accordionState.withAnimation && !prefersReducedMotion,\n      \"--is-open\": accordionState.open,\n    },\n  );\n  const contentContainerClasses = classNames(\n    \"mobius/AccordionContentContainer\",\n    {\n      \"--is-open\": accordionState.open,\n    },\n  );\n  const contentClasses = classNames(\"mobius/AccordionContent\", {\n    \"--is-open\": accordionState.open,\n  });\n  const linkText = accordionState.open ? hideText : showText;\n\n  const handleChange = () => {\n    // Fire events\n    if (!accordionState.open && onOpen) {\n      onOpen();\n    }\n    if (accordionState.open && onClose) {\n      onClose();\n    }\n    if (onChange) {\n      onChange(!accordionState.open);\n    }\n    setAccordionState({\n      open: !accordionState.open,\n      withAnimation: true,\n    });\n  };\n\n  useEffect(() => {\n    setAccordionState({\n      open: startOpen,\n      withAnimation: false,\n    });\n  }, [startOpen]);\n\n  return (\n    <div ref={ref} {...rest} className={containerClasses}>\n      {headerPosition === \"top\" && (\n        <AccordionLink\n          text={linkText}\n          toggle={handleChange}\n          ariaExpanded={accordionState.open}\n          headerChildren={headerChildren}\n        />\n      )}\n      <div\n        className={contentContainerClasses}\n        aria-hidden={!accordionState.open}\n      >\n        <div className={contentClasses}>{props.children}</div>\n      </div>\n      {headerPosition === \"bottom\" && (\n        <AccordionLink\n          text={linkText}\n          toggle={handleChange}\n          ariaExpanded={accordionState.open}\n          headerChildren={headerChildren}\n        />\n      )}\n    </div>\n  );\n});\n"],"names":["chevronDown","classNames","forwardRef","useEffect","useState","Flex","Icon","usePrefersReducedMotion","AccordionLink","text","toggle","onClick","headerChildren","ariaExpanded","linkClasses","iconClasses","handleOnClick","handleKeyDown","e","key","justifyContent","alignItems","className","div","onKeyDown","role","tabIndex","aria-expanded","span","icon","Accordion","props","ref","showText","hideText","headerPosition","startOpen","onOpen","onClose","onChange","rest","accordionState","setAccordionState","open","withAnimation","prefersReducedMotion","containerClasses","contentContainerClasses","contentClasses","linkText","handleChange","aria-hidden","children"],"mappings":"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"}

package/dist/esm/hooks/index.js

@@ -6,6 +6,7 @@ export * from "./useDialog";
 export * from "./useDialogPolyfill";
 export * from "./useLabel";
 export * from "./useOnClickOutside";
+export * from "./usePrefersReducedMotion";
 export * from "./useTextField";
 export * from "./useValidationClasses";
 export * from "./useWindowEvent";

package/dist/esm/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/index.tsx"],"sourcesContent":["export * from \"./useBodyScrollLock\";\nexport * from \"./useBreakpoint\";\nexport * from \"./useButton\";\nexport * from \"./useDeprecationWarning\";\nexport * from \"./useDialog\";\nexport * from \"./useDialogPolyfill\";\nexport * from \"./useLabel\";\nexport * from \"./useOnClickOutside\";\nexport * from \"./useTextField\";\nexport * from \"./useValidationClasses\";\nexport * from \"./useWindowEvent\";\n"],"names":[],"mappings":"AAAA,cAAc,sBAAsB;AACpC,cAAc,kBAAkB;AAChC,cAAc,cAAc;AAC5B,cAAc,0BAA0B;AACxC,cAAc,cAAc;AAC5B,cAAc,sBAAsB;AACpC,cAAc,aAAa;AAC3B,cAAc,sBAAsB;AACpC,cAAc,iBAAiB;AAC/B,cAAc,yBAAyB;AACvC,cAAc,mBAAmB"}
+{"version":3,"sources":["../../../src/hooks/index.tsx"],"sourcesContent":["export * from \"./useBodyScrollLock\";\nexport * from \"./useBreakpoint\";\nexport * from \"./useButton\";\nexport * from \"./useDeprecationWarning\";\nexport * from \"./useDialog\";\nexport * from \"./useDialogPolyfill\";\nexport * from \"./useLabel\";\nexport * from \"./useOnClickOutside\";\nexport * from \"./usePrefersReducedMotion\";\nexport * from \"./useTextField\";\nexport * from \"./useValidationClasses\";\nexport * from \"./useWindowEvent\";\n"],"names":[],"mappings":"AAAA,cAAc,sBAAsB;AACpC,cAAc,kBAAkB;AAChC,cAAc,cAAc;AAC5B,cAAc,0BAA0B;AACxC,cAAc,cAAc;AAC5B,cAAc,sBAAsB;AACpC,cAAc,aAAa;AAC3B,cAAc,sBAAsB;AACpC,cAAc,4BAA4B;AAC1C,cAAc,iBAAiB;AAC/B,cAAc,yBAAyB;AACvC,cAAc,mBAAmB"}

package/dist/esm/hooks/usePrefersReducedMotion/index.js

@@ -0,0 +1,3 @@
+export * from "./usePrefersReducedMotion";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/usePrefersReducedMotion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/usePrefersReducedMotion/index.tsx"],"sourcesContent":["export * from \"./usePrefersReducedMotion\";\n"],"names":[],"mappings":"AAAA,cAAc,4BAA4B"}

package/dist/esm/hooks/usePrefersReducedMotion/usePrefersReducedMotion.js

@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+export function usePrefersReducedMotion() {
+    const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+    useEffect(()=>{
+        const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+        setPrefersReducedMotion(mediaQuery.matches);
+        const listener = (event)=>{
+            setPrefersReducedMotion(event.matches);
+        };
+        mediaQuery.addEventListener("change", listener);
+        return ()=>{
+            mediaQuery.removeEventListener("change", listener);
+        };
+    }, []);
+    return prefersReducedMotion;
+}
+
+//# sourceMappingURL=usePrefersReducedMotion.js.map

package/dist/esm/hooks/usePrefersReducedMotion/usePrefersReducedMotion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/hooks/usePrefersReducedMotion/usePrefersReducedMotion.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nexport function usePrefersReducedMotion(): boolean {\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n\n  useEffect(() => {\n    const mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    setPrefersReducedMotion(mediaQuery.matches);\n\n    const listener = (event: MediaQueryListEvent) => {\n      setPrefersReducedMotion(event.matches);\n    };\n\n    mediaQuery.addEventListener(\"change\", listener);\n\n    return () => {\n      mediaQuery.removeEventListener(\"change\", listener);\n    };\n  }, []);\n\n  return prefersReducedMotion;\n}\n"],"names":["useEffect","useState","usePrefersReducedMotion","prefersReducedMotion","setPrefersReducedMotion","mediaQuery","window","matchMedia","matches","listener","event","addEventListener","removeEventListener"],"mappings":"AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAE5C,OAAO,SAASC;IACd,MAAM,CAACC,sBAAsBC,wBAAwB,GAAGH,SAAS;IAEjED,UAAU;QACR,MAAMK,aAAaC,OAAOC,UAAU,CAAC;QACrCH,wBAAwBC,WAAWG,OAAO;QAE1C,MAAMC,WAAW,CAACC;YAChBN,wBAAwBM,MAAMF,OAAO;QACvC;QAEAH,WAAWM,gBAAgB,CAAC,UAAUF;QAEtC,OAAO;YACLJ,WAAWO,mBAAmB,CAAC,UAAUH;QAC3C;IACF,GAAG,EAAE;IAEL,OAAON;AACT"}

package/dist/types/hooks/index.d.ts

@@ -6,6 +6,7 @@ export * from "./useDialog";
 export * from "./useDialogPolyfill";
 export * from "./useLabel";
 export * from "./useOnClickOutside";
+export * from "./usePrefersReducedMotion";
 export * from "./useTextField";
 export * from "./useValidationClasses";
 export * from "./useWindowEvent";

package/dist/types/hooks/usePrefersReducedMotion/index.d.ts

@@ -0,0 +1 @@
+export * from "./usePrefersReducedMotion";

package/dist/types/hooks/usePrefersReducedMotion/usePrefersReducedMotion.d.ts

@@ -0,0 +1 @@
+export declare function usePrefersReducedMotion(): boolean;

package/dist/types/hooks/usePrefersReducedMotion/usePrefersReducedMotion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "4.14.1",
+  "version": "4.15.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",

package/src/components/Accordion/Accordion.tsx

@@ -15,6 +15,7 @@ import { ForwardedRefComponent } from "../../types/components";
 import { DOMProps } from "../../types/dom";
 import { Flex } from "../Flex";
 import { Icon } from "../Icon";
+import { usePrefersReducedMotion } from "../../hooks/usePrefersReducedMotion";
 
 export type AccordionElementType = HTMLDivElement;
 export type AccordionRef = Ref<AccordionElementType>;
@@ -134,9 +135,7 @@ export const Accordion: ForwardedRefComponent<
     open: true,
     withAnimation: false,
   });
-  const prefersReducedMotion =
-    typeof window === "object" &&
-    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const prefersReducedMotion = usePrefersReducedMotion();
 
   const containerClasses = classNames(
     "mobius",

package/src/hooks/index.tsx

@@ -6,6 +6,7 @@ export * from "./useDialog";
 export * from "./useDialogPolyfill";
 export * from "./useLabel";
 export * from "./useOnClickOutside";
+export * from "./usePrefersReducedMotion";
 export * from "./useTextField";
 export * from "./useValidationClasses";
 export * from "./useWindowEvent";

package/src/hooks/usePrefersReducedMotion/index.tsx

@@ -0,0 +1 @@
+export * from "./usePrefersReducedMotion";

package/src/hooks/usePrefersReducedMotion/usePrefersReducedMotion.test.tsx

@@ -0,0 +1,48 @@
+import { renderHook } from "@testing-library/react";
+import { usePrefersReducedMotion } from "./usePrefersReducedMotion";
+
+function mockMatchMedia(matches: boolean) {
+  window.matchMedia = jest.fn().mockReturnValue({
+    matches,
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+  });
+}
+
+describe("usePrefersReducedMotion", () => {
+  it("should return a boolean", () => {
+    mockMatchMedia(false);
+
+    const { result } = renderHook(() => usePrefersReducedMotion());
+    expect(typeof result.current).toBe("boolean");
+  });
+
+  it("should return false by default", () => {
+    mockMatchMedia(false);
+
+    const { result } = renderHook(() => usePrefersReducedMotion());
+    expect(result.current).toBe(false);
+  });
+
+  it("should return true when the user prefers reduced motion", () => {
+    mockMatchMedia(true);
+
+    const { result } = renderHook(() => usePrefersReducedMotion());
+    expect(result.current).toBe(true);
+  });
+
+  it("should return false when the user does not prefer reduced motion", () => {
+    mockMatchMedia(false);
+
+    const { result } = renderHook(() => usePrefersReducedMotion());
+    expect(result.current).toBe(false);
+  });
+
+  // TODO: These tests need better mocking to work
+  it.todo(
+    "should return true when the user prefers reduced motion after changing",
+  );
+  it.todo(
+    "should return false when the user does not prefer reduced motion after changing",
+  );
+});

package/src/hooks/usePrefersReducedMotion/usePrefersReducedMotion.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+
+export function usePrefersReducedMotion(): boolean {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+
+    const listener = (event: MediaQueryListEvent) => {
+      setPrefersReducedMotion(event.matches);
+    };
+
+    mediaQuery.addEventListener("change", listener);
+
+    return () => {
+      mediaQuery.removeEventListener("change", listener);
+    };
+  }, []);
+
+  return prefersReducedMotion;
+}

package/src/public-whitelist.test.ts

@@ -12,8 +12,6 @@ const PUBLIC_PACKAGE_WHITELIST = [
   "@simplybusiness/icons",
   "@simplybusiness/mobius-datepicker",
   "@simplybusiness/services",
-  "@simplybusiness/theme-insurancebee",
-  "@simplybusiness/theme-ott",
   "@simplybusiness/theme-sb",
 ];