@simplybusiness/mobius 4.6.0 → 4.6.3

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 4.6.3
+
+### Patch Changes
+
+- f49a94b: Icons: rename 'question' to 'circleQuestion'; add 'question'; rename 'info' to 'circleInfo'
+- Updated dependencies [f49a94b]
+  - @simplybusiness/icons@4.3.1
+
+## 4.6.2
+
+### Patch Changes
+
+- a06350a: Fix `<TradeSelector>` in Safari 14
+
+## 4.6.1
+
+### Patch Changes
+
+- 0061f97: Add InsuranceBee partner theme
+
 ## 4.6.0
 
 ### Minor Changes

package/dist/cjs/components/Alert/Alert.js

@@ -29,8 +29,8 @@ const Alert = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
         "--has-header": header
     }, otherProps.className);
     const icon = {
-        info: _icons.info,
-        success: _icons.success,
+        info: _icons.circleInfo,
+        success: _icons.circleTick,
         warning: _icons.warning,
         error: _icons.error
     };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { info, success, warning, error } from \"@simplybusiness/icons\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Icon } from \"../Icon\";\n\nexport type AlertElementType = HTMLDivElement;\n\nexport interface AlertProps extends DOMProps, RefAttributes<AlertElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: string | React.ElementType;\n  variant?: \"info\" | \"success\" | \"warning\" | \"error\";\n  show?: boolean;\n  header?: string;\n}\n\nexport type AlertRef = Ref<AlertElementType>;\n\nconst Alert: ForwardedRefComponent<AlertProps, AlertElementType> = forwardRef(\n  (props: AlertProps, ref: AlertRef) => {\n    const {\n      elementType: Element = \"div\",\n      variant = \"info\",\n      show = true,\n      header,\n      children,\n      ...otherProps\n    } = props;\n\n    if (!show) return null;\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Alert\",\n      {\n        \"--info\": variant === \"info\",\n        \"--success\": variant === \"success\",\n        \"--warning\": variant === \"warning\",\n        \"--error\": variant === \"error\",\n        \"--has-header\": header,\n      },\n      otherProps.className,\n    );\n    const icon = {\n      info,\n      success,\n      warning,\n      error,\n    };\n\n    const headerClasses = classNames(\"mobius\", \"mobius/AlertHeader\");\n    const iconClasses = classNames(\"mobius\", \"mobius/AlertIcon\");\n    const contentClasses = classNames(\"mobius\", \"mobius/AlertContent\");\n\n    return (\n      <Element ref={ref} role=\"alert\" {...otherProps} className={classes}>\n        <span className={iconClasses}>\n          <Icon icon={icon[variant]} />\n        </span>\n        <div>\n          {header && <p className={headerClasses}>{header}</p>}\n          <div className={contentClasses}>{children}</div>\n        </div>\n      </Element>\n    );\n  },\n);\n\nAlert.displayName = \"Alert\";\nexport { Alert };\n"],"names":["Alert","forwardRef","props","ref","elementType","Element","variant","show","header","children","otherProps","classes","classNames","className","icon","info","success","warning","error","headerClasses","iconClasses","contentClasses","role","span","Icon","div","p","displayName"],"mappings":";;;;+BAwESA;;;eAAAA;;;;uBAxEiD;+DACnC;uBACuB;sBAGzB;;;;;;AAgBrB,MAAMA,sBAA6DC,IAAAA,iBAAU,EAC3E,CAACC,OAAmBC;IAClB,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,UAAU,MAAM,EAChBC,OAAO,IAAI,EACXC,MAAM,EACNC,QAAQ,EACR,GAAGC,YACJ,GAAGR;IAEJ,IAAI,CAACK,MAAM,OAAO;IAElB,MAAMI,UAAUC,IAAAA,eAAU,EACxB,UACA,gBACA;QACE,UAAUN,YAAY;QACtB,aAAaA,YAAY;QACzB,aAAaA,YAAY;QACzB,WAAWA,YAAY;QACvB,gBAAgBE;IAClB,GACAE,WAAWG,SAAS;IAEtB,MAAMC,OAAO;QACXC,MAAAA,WAAI;QACJC,SAAAA,cAAO;QACPC,SAAAA,cAAO;QACPC,OAAAA,YAAK;IACP;IAEA,MAAMC,gBAAgBP,IAAAA,eAAU,EAAC,UAAU;IAC3C,MAAMQ,cAAcR,IAAAA,eAAU,EAAC,UAAU;IACzC,MAAMS,iBAAiBT,IAAAA,eAAU,EAAC,UAAU;IAE5C,qBACE,sBAACP;QAAQF,KAAKA;QAAKmB,MAAK;QAAS,GAAGZ,UAAU;QAAEG,WAAWF;;0BACzD,qBAACY;gBAAKV,WAAWO;0BACf,cAAA,qBAACI,UAAI;oBAACV,MAAMA,IAAI,CAACR,QAAQ;;;0BAE3B,sBAACmB;;oBACEjB,wBAAU,qBAACkB;wBAAEb,WAAWM;kCAAgBX;;kCACzC,qBAACiB;wBAAIZ,WAAWQ;kCAAiBZ;;;;;;AAIzC;AAGFT,MAAM2B,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { circleInfo, circleTick, warning, error } from \"@simplybusiness/icons\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Icon } from \"../Icon\";\n\nexport type AlertElementType = HTMLDivElement;\n\nexport interface AlertProps extends DOMProps, RefAttributes<AlertElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: string | React.ElementType;\n  variant?: \"info\" | \"success\" | \"warning\" | \"error\";\n  show?: boolean;\n  header?: string;\n}\n\nexport type AlertRef = Ref<AlertElementType>;\n\nconst Alert: ForwardedRefComponent<AlertProps, AlertElementType> = forwardRef(\n  (props: AlertProps, ref: AlertRef) => {\n    const {\n      elementType: Element = \"div\",\n      variant = \"info\",\n      show = true,\n      header,\n      children,\n      ...otherProps\n    } = props;\n\n    if (!show) return null;\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Alert\",\n      {\n        \"--info\": variant === \"info\",\n        \"--success\": variant === \"success\",\n        \"--warning\": variant === \"warning\",\n        \"--error\": variant === \"error\",\n        \"--has-header\": header,\n      },\n      otherProps.className,\n    );\n    const icon = {\n      info: circleInfo,\n      success: circleTick,\n      warning,\n      error,\n    };\n\n    const headerClasses = classNames(\"mobius\", \"mobius/AlertHeader\");\n    const iconClasses = classNames(\"mobius\", \"mobius/AlertIcon\");\n    const contentClasses = classNames(\"mobius\", \"mobius/AlertContent\");\n\n    return (\n      <Element ref={ref} role=\"alert\" {...otherProps} className={classes}>\n        <span className={iconClasses}>\n          <Icon icon={icon[variant]} />\n        </span>\n        <div>\n          {header && <p className={headerClasses}>{header}</p>}\n          <div className={contentClasses}>{children}</div>\n        </div>\n      </Element>\n    );\n  },\n);\n\nAlert.displayName = \"Alert\";\nexport { Alert };\n"],"names":["Alert","forwardRef","props","ref","elementType","Element","variant","show","header","children","otherProps","classes","classNames","className","icon","info","circleInfo","success","circleTick","warning","error","headerClasses","iconClasses","contentClasses","role","span","Icon","div","p","displayName"],"mappings":";;;;+BAwESA;;;eAAAA;;;;uBAxEiD;+DACnC;uBACgC;sBAGlC;;;;;;AAgBrB,MAAMA,sBAA6DC,IAAAA,iBAAU,EAC3E,CAACC,OAAmBC;IAClB,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,UAAU,MAAM,EAChBC,OAAO,IAAI,EACXC,MAAM,EACNC,QAAQ,EACR,GAAGC,YACJ,GAAGR;IAEJ,IAAI,CAACK,MAAM,OAAO;IAElB,MAAMI,UAAUC,IAAAA,eAAU,EACxB,UACA,gBACA;QACE,UAAUN,YAAY;QACtB,aAAaA,YAAY;QACzB,aAAaA,YAAY;QACzB,WAAWA,YAAY;QACvB,gBAAgBE;IAClB,GACAE,WAAWG,SAAS;IAEtB,MAAMC,OAAO;QACXC,MAAMC,iBAAU;QAChBC,SAASC,iBAAU;QACnBC,SAAAA,cAAO;QACPC,OAAAA,YAAK;IACP;IAEA,MAAMC,gBAAgBT,IAAAA,eAAU,EAAC,UAAU;IAC3C,MAAMU,cAAcV,IAAAA,eAAU,EAAC,UAAU;IACzC,MAAMW,iBAAiBX,IAAAA,eAAU,EAAC,UAAU;IAE5C,qBACE,sBAACP;QAAQF,KAAKA;QAAKqB,MAAK;QAAS,GAAGd,UAAU;QAAEG,WAAWF;;0BACzD,qBAACc;gBAAKZ,WAAWS;0BACf,cAAA,qBAACI,UAAI;oBAACZ,MAAMA,IAAI,CAACR,QAAQ;;;0BAE3B,sBAACqB;;oBACEnB,wBAAU,qBAACoB;wBAAEf,WAAWQ;kCAAgBb;;kCACzC,qBAACmB;wBAAId,WAAWU;kCAAiBd;;;;;;AAIzC;AAGFT,MAAM6B,WAAW,GAAG"}

package/dist/cjs/components/Popover/Popover.js

@@ -113,7 +113,8 @@ const Popover = (props)=>{
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_react.FloatingArrow, {
                         ref: arrowRef,
                         context: context,
-                        width: 20
+                        width: 20,
+                        className: "mobius/PopoverArrowIcon"
                     })
                 ]
             })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import {\n  FloatingArrow,\n  arrow,\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { cross } from \"@simplybusiness/icons\";\nimport classNames from \"classnames\";\nimport {\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  useRef,\n  useState,\n} from \"react\";\nimport { useWindowEvent } from \"../../hooks\";\nimport { DOMProps } from \"../../types\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\n\nexport type PopoverElementType = HTMLDivElement;\n\nexport interface PopoverProps\n  extends DOMProps,\n    RefAttributes<PopoverElementType> {\n  children?: ReactNode;\n  trigger: ReactElement;\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  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nexport type PopoverRef = Ref<PopoverElementType>;\n\nconst OFFSET_FROM_CONTENT_DEFAULT = 10;\n\nexport const Popover = (props: PopoverProps) => {\n  const { trigger, children, onOpen, onClose, className } = props;\n  const arrowRef = useRef(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      arrow({\n        element: arrowRef,\n      }),\n      offset(OFFSET_FROM_CONTENT_DEFAULT),\n      shift(),\n      flip(),\n    ],\n  });\n  const dismiss = useDismiss(context, {\n    bubbles: true,\n    outsidePress: (event: MouseEvent) => {\n      // Prevent 'onClose' from firing when clicking the toggle to close\n      const toggle = refs.reference.current as HTMLElement;\n      const isToggleClick = !toggle?.contains(event.target as HTMLElement);\n      if (isToggleClick) {\n        onClose?.();\n      }\n      return true;\n    },\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);\n\n  const containerClasses = classNames(\n    \"mobius\",\n    \"mobius/PopoverContainer\",\n    className,\n  );\n\n  const toggleVisibility = () => {\n    if (isOpen) {\n      setIsOpen(false);\n      onClose?.();\n      return;\n    }\n\n    setIsOpen(true);\n    onOpen?.();\n  };\n\n  const triggerComponent = cloneElement(trigger, {\n    ref: refs.setReference,\n    className: classNames(trigger.props.className, \"mobius/PopoverToggle\"),\n    onClick: toggleVisibility,\n    ...getReferenceProps(),\n  });\n\n  useWindowEvent(\"keydown\", e => {\n    if (e.key === \"Escape\") {\n      onClose?.();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  });\n\n  return (\n    <>\n      {triggerComponent}\n      {isOpen && (\n        <div\n          className={containerClasses}\n          ref={refs.setFloating}\n          style={floatingStyles}\n          {...getFloatingProps()}\n        >\n          <div className=\"mobius/Popover\">\n            <header className=\"mobius/PopoverHeader\">\n              <Button\n                type=\"button\"\n                className=\"mobius/PopoverCloseButton\"\n                onClick={toggleVisibility}\n                aria-label=\"Close\"\n                variant=\"ghost\"\n              >\n                <Icon\n                  icon={cross}\n                  size=\"md\"\n                  className=\"mobius/PopoverCloseIcon\"\n                />\n              </Button>\n            </header>\n            <div className=\"mobius/PopoverBody\">{children}</div>\n          </div>\n          <FloatingArrow ref={arrowRef} context={context} width={20} />\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":["Popover","OFFSET_FROM_CONTENT_DEFAULT","props","trigger","children","onOpen","onClose","className","arrowRef","useRef","isOpen","setIsOpen","useState","refs","floatingStyles","context","useFloating","open","onOpenChange","whileElementsMounted","autoUpdate","middleware","arrow","element","offset","shift","flip","dismiss","useDismiss","bubbles","outsidePress","event","toggle","reference","current","isToggleClick","contains","target","getReferenceProps","getFloatingProps","useInteractions","containerClasses","classNames","toggleVisibility","triggerComponent","cloneElement","ref","setReference","onClick","useWindowEvent","e","key","preventDefault","stopPropagation","div","setFloating","style","header","Button","type","aria-label","variant","Icon","icon","cross","size","FloatingArrow","width"],"mappings":";;;;+BA8CaA;;;eAAAA;;;;uBApCN;uBACe;mEACC;wBAShB;uBACwB;wBAER;sBACF;;;;;;AAmBrB,MAAMC,8BAA8B;AAE7B,MAAMD,UAAU,CAACE;IACtB,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGL;IAC1D,MAAMM,WAAWC,IAAAA,cAAM,EAAC;IACxB,MAAM,CAACC,QAAQC,UAAU,GAAGC,IAAAA,gBAAQ,EAAC;IACrC,MAAM,EAAEC,IAAI,EAAEC,cAAc,EAAEC,OAAO,EAAE,GAAGC,IAAAA,kBAAW,EAAC;QACpDC,MAAMP;QACNQ,cAAcP;QACdQ,sBAAsBC,iBAAU;QAChCC,YAAY;YACVC,IAAAA,YAAK,EAAC;gBACJC,SAASf;YACX;YACAgB,IAAAA,aAAM,EAACvB;YACPwB,IAAAA,YAAK;YACLC,IAAAA,WAAI;SACL;IACH;IACA,MAAMC,UAAUC,IAAAA,iBAAU,EAACb,SAAS;QAClCc,SAAS;QACTC,cAAc,CAACC;YACb,kEAAkE;YAClE,MAAMC,SAASnB,KAAKoB,SAAS,CAACC,OAAO;YACrC,MAAMC,gBAAgB,EAACH,mBAAAA,6BAAAA,OAAQI,QAAQ,CAACL,MAAMM,MAAM;YACpD,IAAIF,eAAe;gBACjB7B,oBAAAA,8BAAAA;YACF;YACA,OAAO;QACT;IACF;IACA,MAAM,EAAEgC,iBAAiB,EAAEC,gBAAgB,EAAE,GAAGC,IAAAA,sBAAe,EAAC;QAACb;KAAQ;IAEzE,MAAMc,mBAAmBC,IAAAA,mBAAU,EACjC,UACA,2BACAnC;IAGF,MAAMoC,mBAAmB;QACvB,IAAIjC,QAAQ;YACVC,UAAU;YACVL,oBAAAA,8BAAAA;YACA;QACF;QAEAK,UAAU;QACVN,mBAAAA,6BAAAA;IACF;IAEA,MAAMuC,iCAAmBC,IAAAA,oBAAY,EAAC1C,SAAS;QAC7C2C,KAAKjC,KAAKkC,YAAY;QACtBxC,WAAWmC,IAAAA,mBAAU,EAACvC,QAAQD,KAAK,CAACK,SAAS,EAAE;QAC/CyC,SAASL;QACT,GAAGL,mBAAmB;IACxB;IAEAW,IAAAA,qBAAc,EAAC,WAAWC,CAAAA;QACxB,IAAIA,EAAEC,GAAG,KAAK,UAAU;YACtB7C,oBAAAA,8BAAAA;YACA4C,EAAEE,cAAc;YAChBF,EAAEG,eAAe;QACnB;IACF;IAEA,qBACE;;YACGT;YACAlC,wBACC,sBAAC4C;gBACC/C,WAAWkC;gBACXK,KAAKjC,KAAK0C,WAAW;gBACrBC,OAAO1C;gBACN,GAAGyB,kBAAkB;;kCAEtB,sBAACe;wBAAI/C,WAAU;;0CACb,qBAACkD;gCAAOlD,WAAU;0CAChB,cAAA,qBAACmD,cAAM;oCACLC,MAAK;oCACLpD,WAAU;oCACVyC,SAASL;oCACTiB,cAAW;oCACXC,SAAQ;8CAER,cAAA,qBAACC,UAAI;wCACHC,MAAMC,YAAK;wCACXC,MAAK;wCACL1D,WAAU;;;;0CAIhB,qBAAC+C;gCAAI/C,WAAU;0CAAsBH;;;;kCAEvC,qBAAC8D,oBAAa;wBAACpB,KAAKtC;wBAAUO,SAASA;wBAASoD,OAAO;;;;;;AAKjE"}
+{"version":3,"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import {\n  FloatingArrow,\n  arrow,\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { cross } from \"@simplybusiness/icons\";\nimport classNames from \"classnames\";\nimport {\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  useRef,\n  useState,\n} from \"react\";\nimport { useWindowEvent } from \"../../hooks\";\nimport { DOMProps } from \"../../types\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\n\nexport type PopoverElementType = HTMLDivElement;\n\nexport interface PopoverProps\n  extends DOMProps,\n    RefAttributes<PopoverElementType> {\n  children?: ReactNode;\n  trigger: ReactElement;\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  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nexport type PopoverRef = Ref<PopoverElementType>;\n\nconst OFFSET_FROM_CONTENT_DEFAULT = 10;\n\nexport const Popover = (props: PopoverProps) => {\n  const { trigger, children, onOpen, onClose, className } = props;\n  const arrowRef = useRef(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      arrow({\n        element: arrowRef,\n      }),\n      offset(OFFSET_FROM_CONTENT_DEFAULT),\n      shift(),\n      flip(),\n    ],\n  });\n  const dismiss = useDismiss(context, {\n    bubbles: true,\n    outsidePress: (event: MouseEvent) => {\n      // Prevent 'onClose' from firing when clicking the toggle to close\n      const toggle = refs.reference.current as HTMLElement;\n      const isToggleClick = !toggle?.contains(event.target as HTMLElement);\n      if (isToggleClick) {\n        onClose?.();\n      }\n      return true;\n    },\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);\n\n  const containerClasses = classNames(\n    \"mobius\",\n    \"mobius/PopoverContainer\",\n    className,\n  );\n\n  const toggleVisibility = () => {\n    if (isOpen) {\n      setIsOpen(false);\n      onClose?.();\n      return;\n    }\n\n    setIsOpen(true);\n    onOpen?.();\n  };\n\n  const triggerComponent = cloneElement(trigger, {\n    ref: refs.setReference,\n    className: classNames(trigger.props.className, \"mobius/PopoverToggle\"),\n    onClick: toggleVisibility,\n    ...getReferenceProps(),\n  });\n\n  useWindowEvent(\"keydown\", e => {\n    if (e.key === \"Escape\") {\n      onClose?.();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  });\n\n  return (\n    <>\n      {triggerComponent}\n      {isOpen && (\n        <div\n          className={containerClasses}\n          ref={refs.setFloating}\n          style={floatingStyles}\n          {...getFloatingProps()}\n        >\n          <div className=\"mobius/Popover\">\n            <header className=\"mobius/PopoverHeader\">\n              <Button\n                type=\"button\"\n                className=\"mobius/PopoverCloseButton\"\n                onClick={toggleVisibility}\n                aria-label=\"Close\"\n                variant=\"ghost\"\n              >\n                <Icon\n                  icon={cross}\n                  size=\"md\"\n                  className=\"mobius/PopoverCloseIcon\"\n                />\n              </Button>\n            </header>\n            <div className=\"mobius/PopoverBody\">{children}</div>\n          </div>\n          <FloatingArrow\n            ref={arrowRef}\n            context={context}\n            width={20}\n            className=\"mobius/PopoverArrowIcon\"\n          />\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":["Popover","OFFSET_FROM_CONTENT_DEFAULT","props","trigger","children","onOpen","onClose","className","arrowRef","useRef","isOpen","setIsOpen","useState","refs","floatingStyles","context","useFloating","open","onOpenChange","whileElementsMounted","autoUpdate","middleware","arrow","element","offset","shift","flip","dismiss","useDismiss","bubbles","outsidePress","event","toggle","reference","current","isToggleClick","contains","target","getReferenceProps","getFloatingProps","useInteractions","containerClasses","classNames","toggleVisibility","triggerComponent","cloneElement","ref","setReference","onClick","useWindowEvent","e","key","preventDefault","stopPropagation","div","setFloating","style","header","Button","type","aria-label","variant","Icon","icon","cross","size","FloatingArrow","width"],"mappings":";;;;+BA8CaA;;;eAAAA;;;;uBApCN;uBACe;mEACC;wBAShB;uBACwB;wBAER;sBACF;;;;;;AAmBrB,MAAMC,8BAA8B;AAE7B,MAAMD,UAAU,CAACE;IACtB,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGL;IAC1D,MAAMM,WAAWC,IAAAA,cAAM,EAAC;IACxB,MAAM,CAACC,QAAQC,UAAU,GAAGC,IAAAA,gBAAQ,EAAC;IACrC,MAAM,EAAEC,IAAI,EAAEC,cAAc,EAAEC,OAAO,EAAE,GAAGC,IAAAA,kBAAW,EAAC;QACpDC,MAAMP;QACNQ,cAAcP;QACdQ,sBAAsBC,iBAAU;QAChCC,YAAY;YACVC,IAAAA,YAAK,EAAC;gBACJC,SAASf;YACX;YACAgB,IAAAA,aAAM,EAACvB;YACPwB,IAAAA,YAAK;YACLC,IAAAA,WAAI;SACL;IACH;IACA,MAAMC,UAAUC,IAAAA,iBAAU,EAACb,SAAS;QAClCc,SAAS;QACTC,cAAc,CAACC;YACb,kEAAkE;YAClE,MAAMC,SAASnB,KAAKoB,SAAS,CAACC,OAAO;YACrC,MAAMC,gBAAgB,EAACH,mBAAAA,6BAAAA,OAAQI,QAAQ,CAACL,MAAMM,MAAM;YACpD,IAAIF,eAAe;gBACjB7B,oBAAAA,8BAAAA;YACF;YACA,OAAO;QACT;IACF;IACA,MAAM,EAAEgC,iBAAiB,EAAEC,gBAAgB,EAAE,GAAGC,IAAAA,sBAAe,EAAC;QAACb;KAAQ;IAEzE,MAAMc,mBAAmBC,IAAAA,mBAAU,EACjC,UACA,2BACAnC;IAGF,MAAMoC,mBAAmB;QACvB,IAAIjC,QAAQ;YACVC,UAAU;YACVL,oBAAAA,8BAAAA;YACA;QACF;QAEAK,UAAU;QACVN,mBAAAA,6BAAAA;IACF;IAEA,MAAMuC,iCAAmBC,IAAAA,oBAAY,EAAC1C,SAAS;QAC7C2C,KAAKjC,KAAKkC,YAAY;QACtBxC,WAAWmC,IAAAA,mBAAU,EAACvC,QAAQD,KAAK,CAACK,SAAS,EAAE;QAC/CyC,SAASL;QACT,GAAGL,mBAAmB;IACxB;IAEAW,IAAAA,qBAAc,EAAC,WAAWC,CAAAA;QACxB,IAAIA,EAAEC,GAAG,KAAK,UAAU;YACtB7C,oBAAAA,8BAAAA;YACA4C,EAAEE,cAAc;YAChBF,EAAEG,eAAe;QACnB;IACF;IAEA,qBACE;;YACGT;YACAlC,wBACC,sBAAC4C;gBACC/C,WAAWkC;gBACXK,KAAKjC,KAAK0C,WAAW;gBACrBC,OAAO1C;gBACN,GAAGyB,kBAAkB;;kCAEtB,sBAACe;wBAAI/C,WAAU;;0CACb,qBAACkD;gCAAOlD,WAAU;0CAChB,cAAA,qBAACmD,cAAM;oCACLC,MAAK;oCACLpD,WAAU;oCACVyC,SAASL;oCACTiB,cAAW;oCACXC,SAAQ;8CAER,cAAA,qBAACC,UAAI;wCACHC,MAAMC,YAAK;wCACXC,MAAK;wCACL1D,WAAU;;;;0CAIhB,qBAAC+C;gCAAI/C,WAAU;0CAAsBH;;;;kCAEvC,qBAAC8D,oBAAa;wBACZpB,KAAKtC;wBACLO,SAASA;wBACToD,OAAO;wBACP5D,WAAU;;;;;;AAMtB"}

package/dist/cjs/hooks/index.js

@@ -6,6 +6,7 @@ _export_star(require("./useBodyScrollLock"), exports);
 _export_star(require("./useBreakpoint"), exports);
 _export_star(require("./useButton"), exports);
 _export_star(require("./useDialog"), exports);
+_export_star(require("./useDialogPolyfill"), exports);
 _export_star(require("./useLabel"), exports);
 _export_star(require("./useOnClickOutside"), exports);
 _export_star(require("./useTextField"), 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 \"./useDialog\";\nexport * from \"./useLabel\";\nexport * from \"./useOnClickOutside\";\nexport * from \"./useTextField\";\nexport * from \"./useWindowEvent\";\n"],"names":[],"mappings":";;;;qBAAc;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 \"./useDialog\";\nexport * from \"./useDialogPolyfill\";\nexport * from \"./useLabel\";\nexport * from \"./useOnClickOutside\";\nexport * from \"./useTextField\";\nexport * from \"./useWindowEvent\";\n"],"names":[],"mappings":";;;;qBAAc;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA;qBACA"}

package/dist/cjs/hooks/useDialog/useDialog.js

@@ -17,9 +17,9 @@ const FALLBACK_TRANSITION_DURATION = 0;
 const useDialog = (props)=>{
     const { ref, isOpen, transition, onOpen, onClose } = props;
     const shouldTransition = (0, _utils.supportsDialog)() && transition.isEnabled;
+    const { polyfillDialog } = (0, _useDialogPolyfill.useDialogPolyfill)();
     // Read CSS variable value as number
     const TRANSITION_DURATION_IN_MS = ref.current && Number(getComputedStyle(ref.current).getPropertyValue(transition.CSSVariable).replace("ms", "")) || FALLBACK_TRANSITION_DURATION;
-    (0, _useDialogPolyfill.useDialogPolyfill)(ref);
     (0, _useBodyScrollLock.useBodyScrollLock)({
         enabled: isOpen
     });
@@ -67,6 +67,7 @@ const useDialog = (props)=>{
         async function toggleDialog() {
             var _ref_current, _ref_current1;
             if (isOpen && !((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.open)) {
+                await polyfillDialog(ref);
                 open();
                 // Fix opening transition in Safari being skipped
                 // by wrapping with setTimeout
@@ -83,7 +84,8 @@ const useDialog = (props)=>{
         handleClose,
         isOpen,
         open,
-        ref
+        ref,
+        polyfillDialog
     ]);
     return {
         open,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/hooks/useDialog/useDialog.ts"],"sourcesContent":["import {\n  MutableRefObject,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n} from \"react\";\nimport { useDialogPolyfill } from \"../useDialogPolyfill\";\nimport { useBodyScrollLock } from \"../useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils\";\n\nexport type TransitionProps = {\n  isEnabled: boolean;\n  CSSVariable: string;\n};\n\nexport type useDialogProps = {\n  ref: MutableRefObject<HTMLDialogElement | null>;\n  transition: TransitionProps;\n  isOpen: boolean;\n  onOpen?: () => void;\n  onClose?: () => void;\n};\n\nconst TRANSITION_CLASS_NAME = \"--transition\";\nconst FALLBACK_TRANSITION_DURATION = 0;\n\nexport const useDialog = (props: useDialogProps) => {\n  const { ref, isOpen, transition, onOpen, onClose } = props;\n  const shouldTransition = supportsDialog() && transition.isEnabled;\n\n  // Read CSS variable value as number\n  const TRANSITION_DURATION_IN_MS =\n    (ref.current &&\n      Number(\n        getComputedStyle(ref.current)\n          .getPropertyValue(transition.CSSVariable)\n          .replace(\"ms\", \"\"),\n      )) ||\n    FALLBACK_TRANSITION_DURATION;\n\n  useDialogPolyfill(ref);\n  useBodyScrollLock({ enabled: isOpen });\n\n  const open = useCallback(() => {\n    ref.current?.showModal();\n    onOpen?.();\n  }, [onOpen, ref]);\n\n  const close = useCallback(() => {\n    ref.current?.close();\n    onClose?.();\n  }, [onClose, ref]);\n\n  // Add close handler, to enable closing transitions\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        // Prevent default event coming from onCancel,\n        // which is triggered by pressing ESC key\n        event.preventDefault();\n        // Ensure that nested `<dialog>` elements\n        // don't close the parent\n        event.stopPropagation();\n      }\n\n      if (shouldTransition) {\n        ref.current?.classList.remove(TRANSITION_CLASS_NAME);\n        // Delay close to allow exit transition\n        setTimeout(() => close(), TRANSITION_DURATION_IN_MS);\n      } else {\n        close();\n      }\n    },\n    [TRANSITION_DURATION_IN_MS, close, ref, shouldTransition],\n  );\n\n  useEffect(() => {\n    async function toggleDialog() {\n      if (isOpen && !ref.current?.open) {\n        open();\n        // Fix opening transition in Safari being skipped\n        // by wrapping with setTimeout\n        setTimeout(() => {\n          ref.current?.classList.add(TRANSITION_CLASS_NAME);\n        }, 0);\n      } else if (!isOpen && ref.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleDialog();\n  }, [handleClose, isOpen, open, ref]);\n\n  return {\n    open,\n    close: handleClose,\n  };\n};\n"],"names":["useDialog","TRANSITION_CLASS_NAME","FALLBACK_TRANSITION_DURATION","props","ref","isOpen","transition","onOpen","onClose","shouldTransition","supportsDialog","isEnabled","TRANSITION_DURATION_IN_MS","current","Number","getComputedStyle","getPropertyValue","CSSVariable","replace","useDialogPolyfill","useBodyScrollLock","enabled","open","useCallback","showModal","close","handleClose","event","preventDefault","stopPropagation","classList","remove","setTimeout","useEffect","toggleDialog","add"],"mappings":";;;;+BA0BaA;;;eAAAA;;;uBArBN;mCAC2B;mCACA;uBACH;AAe/B,MAAMC,wBAAwB;AAC9B,MAAMC,+BAA+B;AAE9B,MAAMF,YAAY,CAACG;IACxB,MAAM,EAAEC,GAAG,EAAEC,MAAM,EAAEC,UAAU,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGL;IACrD,MAAMM,mBAAmBC,IAAAA,qBAAc,OAAMJ,WAAWK,SAAS;IAEjE,oCAAoC;IACpC,MAAMC,4BACJ,AAACR,IAAIS,OAAO,IACVC,OACEC,iBAAiBX,IAAIS,OAAO,EACzBG,gBAAgB,CAACV,WAAWW,WAAW,EACvCC,OAAO,CAAC,MAAM,QAErBhB;IAEFiB,IAAAA,oCAAiB,EAACf;IAClBgB,IAAAA,oCAAiB,EAAC;QAAEC,SAAShB;IAAO;IAEpC,MAAMiB,OAAOC,IAAAA,kBAAW,EAAC;YACvBnB;SAAAA,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAaoB,SAAS;QACtBjB,mBAAAA,6BAAAA;IACF,GAAG;QAACA;QAAQH;KAAI;IAEhB,MAAMqB,QAAQF,IAAAA,kBAAW,EAAC;YACxBnB;SAAAA,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAaqB,KAAK;QAClBjB,oBAAAA,8BAAAA;IACF,GAAG;QAACA;QAASJ;KAAI;IAEjB,mDAAmD;IACnD,MAAMsB,cAAcH,IAAAA,kBAAW,EAC7B,CAACI;QACC,IAAIA,OAAO;YACT,8CAA8C;YAC9C,yCAAyC;YACzCA,MAAMC,cAAc;YACpB,yCAAyC;YACzC,yBAAyB;YACzBD,MAAME,eAAe;QACvB;QAEA,IAAIpB,kBAAkB;gBACpBL;aAAAA,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAa0B,SAAS,CAACC,MAAM,CAAC9B;YAC9B,uCAAuC;YACvC+B,WAAW,IAAMP,SAASb;QAC5B,OAAO;YACLa;QACF;IACF,GACA;QAACb;QAA2Ba;QAAOrB;QAAKK;KAAiB;IAG3DwB,IAAAA,gBAAS,EAAC;QACR,eAAeC;gBACE9B,cAOOA;YAPtB,IAAIC,UAAU,GAACD,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAakB,IAAI,GAAE;gBAChCA;gBACA,iDAAiD;gBACjD,8BAA8B;gBAC9BU,WAAW;wBACT5B;qBAAAA,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAa0B,SAAS,CAACK,GAAG,CAAClC;gBAC7B,GAAG;YACL,OAAO,IAAI,CAACI,YAAUD,gBAAAA,IAAIS,OAAO,cAAXT,oCAAAA,cAAakB,IAAI,GAAE;gBACvCI;YACF;QACF;QAEAQ;IACF,GAAG;QAACR;QAAarB;QAAQiB;QAAMlB;KAAI;IAEnC,OAAO;QACLkB;QACAG,OAAOC;IACT;AACF"}
+{"version":3,"sources":["../../../../src/hooks/useDialog/useDialog.ts"],"sourcesContent":["import {\n  MutableRefObject,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n} from \"react\";\nimport { useDialogPolyfill } from \"../useDialogPolyfill\";\nimport { useBodyScrollLock } from \"../useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils\";\n\nexport type TransitionProps = {\n  isEnabled: boolean;\n  CSSVariable: string;\n};\n\nexport type useDialogProps = {\n  ref: MutableRefObject<HTMLDialogElement | null>;\n  transition: TransitionProps;\n  isOpen: boolean;\n  onOpen?: () => void;\n  onClose?: () => void;\n};\n\nconst TRANSITION_CLASS_NAME = \"--transition\";\nconst FALLBACK_TRANSITION_DURATION = 0;\n\nexport const useDialog = (props: useDialogProps) => {\n  const { ref, isOpen, transition, onOpen, onClose } = props;\n  const shouldTransition = supportsDialog() && transition.isEnabled;\n  const { polyfillDialog } = useDialogPolyfill();\n\n  // Read CSS variable value as number\n  const TRANSITION_DURATION_IN_MS =\n    (ref.current &&\n      Number(\n        getComputedStyle(ref.current)\n          .getPropertyValue(transition.CSSVariable)\n          .replace(\"ms\", \"\"),\n      )) ||\n    FALLBACK_TRANSITION_DURATION;\n\n  useBodyScrollLock({ enabled: isOpen });\n\n  const open = useCallback(() => {\n    ref.current?.showModal();\n    onOpen?.();\n  }, [onOpen, ref]);\n\n  const close = useCallback(() => {\n    ref.current?.close();\n    onClose?.();\n  }, [onClose, ref]);\n\n  // Add close handler, to enable closing transitions\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        // Prevent default event coming from onCancel,\n        // which is triggered by pressing ESC key\n        event.preventDefault();\n        // Ensure that nested `<dialog>` elements\n        // don't close the parent\n        event.stopPropagation();\n      }\n\n      if (shouldTransition) {\n        ref.current?.classList.remove(TRANSITION_CLASS_NAME);\n        // Delay close to allow exit transition\n        setTimeout(() => close(), TRANSITION_DURATION_IN_MS);\n      } else {\n        close();\n      }\n    },\n    [TRANSITION_DURATION_IN_MS, close, ref, shouldTransition],\n  );\n\n  useEffect(() => {\n    async function toggleDialog() {\n      if (isOpen && !ref.current?.open) {\n        await polyfillDialog(ref);\n\n        open();\n        // Fix opening transition in Safari being skipped\n        // by wrapping with setTimeout\n        setTimeout(() => {\n          ref.current?.classList.add(TRANSITION_CLASS_NAME);\n        }, 0);\n      } else if (!isOpen && ref.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleDialog();\n  }, [handleClose, isOpen, open, ref, polyfillDialog]);\n\n  return {\n    open,\n    close: handleClose,\n  };\n};\n"],"names":["useDialog","TRANSITION_CLASS_NAME","FALLBACK_TRANSITION_DURATION","props","ref","isOpen","transition","onOpen","onClose","shouldTransition","supportsDialog","isEnabled","polyfillDialog","useDialogPolyfill","TRANSITION_DURATION_IN_MS","current","Number","getComputedStyle","getPropertyValue","CSSVariable","replace","useBodyScrollLock","enabled","open","useCallback","showModal","close","handleClose","event","preventDefault","stopPropagation","classList","remove","setTimeout","useEffect","toggleDialog","add"],"mappings":";;;;+BA0BaA;;;eAAAA;;;uBArBN;mCAC2B;mCACA;uBACH;AAe/B,MAAMC,wBAAwB;AAC9B,MAAMC,+BAA+B;AAE9B,MAAMF,YAAY,CAACG;IACxB,MAAM,EAAEC,GAAG,EAAEC,MAAM,EAAEC,UAAU,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGL;IACrD,MAAMM,mBAAmBC,IAAAA,qBAAc,OAAMJ,WAAWK,SAAS;IACjE,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,oCAAiB;IAE5C,oCAAoC;IACpC,MAAMC,4BACJ,AAACV,IAAIW,OAAO,IACVC,OACEC,iBAAiBb,IAAIW,OAAO,EACzBG,gBAAgB,CAACZ,WAAWa,WAAW,EACvCC,OAAO,CAAC,MAAM,QAErBlB;IAEFmB,IAAAA,oCAAiB,EAAC;QAAEC,SAASjB;IAAO;IAEpC,MAAMkB,OAAOC,IAAAA,kBAAW,EAAC;YACvBpB;SAAAA,eAAAA,IAAIW,OAAO,cAAXX,mCAAAA,aAAaqB,SAAS;QACtBlB,mBAAAA,6BAAAA;IACF,GAAG;QAACA;QAAQH;KAAI;IAEhB,MAAMsB,QAAQF,IAAAA,kBAAW,EAAC;YACxBpB;SAAAA,eAAAA,IAAIW,OAAO,cAAXX,mCAAAA,aAAasB,KAAK;QAClBlB,oBAAAA,8BAAAA;IACF,GAAG;QAACA;QAASJ;KAAI;IAEjB,mDAAmD;IACnD,MAAMuB,cAAcH,IAAAA,kBAAW,EAC7B,CAACI;QACC,IAAIA,OAAO;YACT,8CAA8C;YAC9C,yCAAyC;YACzCA,MAAMC,cAAc;YACpB,yCAAyC;YACzC,yBAAyB;YACzBD,MAAME,eAAe;QACvB;QAEA,IAAIrB,kBAAkB;gBACpBL;aAAAA,eAAAA,IAAIW,OAAO,cAAXX,mCAAAA,aAAa2B,SAAS,CAACC,MAAM,CAAC/B;YAC9B,uCAAuC;YACvCgC,WAAW,IAAMP,SAASZ;QAC5B,OAAO;YACLY;QACF;IACF,GACA;QAACZ;QAA2BY;QAAOtB;QAAKK;KAAiB;IAG3DyB,IAAAA,gBAAS,EAAC;QACR,eAAeC;gBACE/B,cASOA;YATtB,IAAIC,UAAU,GAACD,eAAAA,IAAIW,OAAO,cAAXX,mCAAAA,aAAamB,IAAI,GAAE;gBAChC,MAAMX,eAAeR;gBAErBmB;gBACA,iDAAiD;gBACjD,8BAA8B;gBAC9BU,WAAW;wBACT7B;qBAAAA,eAAAA,IAAIW,OAAO,cAAXX,mCAAAA,aAAa2B,SAAS,CAACK,GAAG,CAACnC;gBAC7B,GAAG;YACL,OAAO,IAAI,CAACI,YAAUD,gBAAAA,IAAIW,OAAO,cAAXX,oCAAAA,cAAamB,IAAI,GAAE;gBACvCI;YACF;QACF;QAEAQ;IACF,GAAG;QAACR;QAAatB;QAAQkB;QAAMnB;QAAKQ;KAAe;IAEnD,OAAO;QACLW;QACAG,OAAOC;IACT;AACF"}

package/dist/cjs/hooks/useDialogPolyfill/useDialogPolyfill.js

@@ -51,27 +51,23 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const useDialogPolyfill = (ref)=>{
+const useDialogPolyfill = ()=>{
     const hasDialogSupport = (0, _utils.supportsDialog)();
-    (0, _react.useEffect)(()=>{
-        async function polyfillDialog() {
-            if (!hasDialogSupport && typeof window !== "undefined" && ref.current !== null) {
-                const { default: dialogPolyfill } = await Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("dialog-polyfill")));
-                try {
-                    dialogPolyfill.registerDialog(ref.current);
-                } catch (error) {
-                    // In iOS 15 <= 15.2 this intermittently fails with
-                    // TypeError: null is not an object (evaluating 'element.showModal')
-                    // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️
-                    console.error("Failed to load dialog-polyfill", error);
-                }
+    const hasAlreadyLoaded = (0, _react.useRef)(false);
+    const polyfillDialog = async (ref)=>{
+        if (!hasAlreadyLoaded.current && !hasDialogSupport && typeof window !== "undefined" && ref.current !== null) {
+            const { default: dialogPolyfill } = await Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("dialog-polyfill")));
+            hasAlreadyLoaded.current = true;
+            try {
+                dialogPolyfill.registerDialog(ref.current);
+            } catch (error) {
+                console.error("Failed to load dialog-polyfill", error);
             }
         }
-        polyfillDialog();
-    }, [
-        ref,
-        hasDialogSupport
-    ]);
+    };
+    return {
+        polyfillDialog
+    };
 };
 
 //# sourceMappingURL=useDialogPolyfill.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/hooks/useDialogPolyfill/useDialogPolyfill.ts"],"sourcesContent":["import { MutableRefObject, useEffect } from \"react\";\nimport { supportsDialog } from \"../../utils\";\n\n// Add polyfill for HTML Dialog in old browsers\nexport const useDialogPolyfill = (\n  ref: MutableRefObject<HTMLDialogElement | null>,\n) => {\n  const hasDialogSupport = supportsDialog();\n\n  useEffect(() => {\n    async function polyfillDialog() {\n      if (\n        !hasDialogSupport &&\n        typeof window !== \"undefined\" &&\n        ref.current !== null\n      ) {\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n\n        try {\n          dialogPolyfill.registerDialog(ref.current);\n        } catch (error) {\n          // In iOS 15 <= 15.2 this intermittently fails with\n          // TypeError: null is not an object (evaluating 'element.showModal')\n          // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️\n          console.error(\"Failed to load dialog-polyfill\", error);\n        }\n      }\n    }\n\n    polyfillDialog();\n  }, [ref, hasDialogSupport]);\n};\n"],"names":["useDialogPolyfill","ref","hasDialogSupport","supportsDialog","useEffect","polyfillDialog","window","current","default","dialogPolyfill","registerDialog","error","console"],"mappings":";;;;+BAIaA;;;eAAAA;;;uBAJ+B;uBACb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGxB,MAAMA,oBAAoB,CAC/BC;IAEA,MAAMC,mBAAmBC,IAAAA,qBAAc;IAEvCC,IAAAA,gBAAS,EAAC;QACR,eAAeC;YACb,IACE,CAACH,oBACD,OAAOI,WAAW,eAClBL,IAAIM,OAAO,KAAK,MAChB;gBACA,MAAM,EAAEC,SAASC,cAAc,EAAE,GAAG,MAAM,mEAAA,QAAO;gBAEjD,IAAI;oBACFA,eAAeC,cAAc,CAACT,IAAIM,OAAO;gBAC3C,EAAE,OAAOI,OAAO;oBACd,mDAAmD;oBACnD,oEAAoE;oBACpE,qGAAqG;oBACrGC,QAAQD,KAAK,CAAC,kCAAkCA;gBAClD;YACF;QACF;QAEAN;IACF,GAAG;QAACJ;QAAKC;KAAiB;AAC5B"}
+{"version":3,"sources":["../../../../src/hooks/useDialogPolyfill/useDialogPolyfill.ts"],"sourcesContent":["import { MutableRefObject, useRef } from \"react\";\nimport { supportsDialog } from \"../../utils\";\n\n// Add polyfill for HTML Dialog in old browsers\nexport const useDialogPolyfill = () => {\n  const hasDialogSupport = supportsDialog();\n  const hasAlreadyLoaded = useRef(false);\n\n  const polyfillDialog = async (\n    ref: MutableRefObject<HTMLDialogElement | null>,\n  ) => {\n    if (\n      !hasAlreadyLoaded.current &&\n      !hasDialogSupport &&\n      typeof window !== \"undefined\" &&\n      ref.current !== null\n    ) {\n      const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n      hasAlreadyLoaded.current = true;\n\n      try {\n        dialogPolyfill.registerDialog(ref.current);\n      } catch (error) {\n        console.error(\"Failed to load dialog-polyfill\", error);\n      }\n    }\n  };\n\n  return {\n    polyfillDialog,\n  };\n};\n"],"names":["useDialogPolyfill","hasDialogSupport","supportsDialog","hasAlreadyLoaded","useRef","polyfillDialog","ref","current","window","default","dialogPolyfill","registerDialog","error","console"],"mappings":";;;;+BAIaA;;;eAAAA;;;uBAJ4B;uBACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGxB,MAAMA,oBAAoB;IAC/B,MAAMC,mBAAmBC,IAAAA,qBAAc;IACvC,MAAMC,mBAAmBC,IAAAA,aAAM,EAAC;IAEhC,MAAMC,iBAAiB,OACrBC;QAEA,IACE,CAACH,iBAAiBI,OAAO,IACzB,CAACN,oBACD,OAAOO,WAAW,eAClBF,IAAIC,OAAO,KAAK,MAChB;YACA,MAAM,EAAEE,SAASC,cAAc,EAAE,GAAG,MAAM,mEAAA,QAAO;YACjDP,iBAAiBI,OAAO,GAAG;YAE3B,IAAI;gBACFG,eAAeC,cAAc,CAACL,IAAIC,OAAO;YAC3C,EAAE,OAAOK,OAAO;gBACdC,QAAQD,KAAK,CAAC,kCAAkCA;YAClD;QACF;IACF;IAEA,OAAO;QACLP;IACF;AACF"}

package/dist/esm/components/Alert/Alert.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import classNames from "classnames/dedupe";
-import { info, success, warning, error } from "@simplybusiness/icons";
+import { circleInfo, circleTick, warning, error } from "@simplybusiness/icons";
 import { Icon } from "../Icon";
 const Alert = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { elementType: Element = "div", variant = "info", show = true, header, children, ...otherProps } = props;
@@ -14,8 +14,8 @@ const Alert = /*#__PURE__*/ forwardRef((props, ref)=>{
         "--has-header": header
     }, otherProps.className);
     const icon = {
-        info,
-        success,
+        info: circleInfo,
+        success: circleTick,
         warning,
         error
     };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { info, success, warning, error } from \"@simplybusiness/icons\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Icon } from \"../Icon\";\n\nexport type AlertElementType = HTMLDivElement;\n\nexport interface AlertProps extends DOMProps, RefAttributes<AlertElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: string | React.ElementType;\n  variant?: \"info\" | \"success\" | \"warning\" | \"error\";\n  show?: boolean;\n  header?: string;\n}\n\nexport type AlertRef = Ref<AlertElementType>;\n\nconst Alert: ForwardedRefComponent<AlertProps, AlertElementType> = forwardRef(\n  (props: AlertProps, ref: AlertRef) => {\n    const {\n      elementType: Element = \"div\",\n      variant = \"info\",\n      show = true,\n      header,\n      children,\n      ...otherProps\n    } = props;\n\n    if (!show) return null;\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Alert\",\n      {\n        \"--info\": variant === \"info\",\n        \"--success\": variant === \"success\",\n        \"--warning\": variant === \"warning\",\n        \"--error\": variant === \"error\",\n        \"--has-header\": header,\n      },\n      otherProps.className,\n    );\n    const icon = {\n      info,\n      success,\n      warning,\n      error,\n    };\n\n    const headerClasses = classNames(\"mobius\", \"mobius/AlertHeader\");\n    const iconClasses = classNames(\"mobius\", \"mobius/AlertIcon\");\n    const contentClasses = classNames(\"mobius\", \"mobius/AlertContent\");\n\n    return (\n      <Element ref={ref} role=\"alert\" {...otherProps} className={classes}>\n        <span className={iconClasses}>\n          <Icon icon={icon[variant]} />\n        </span>\n        <div>\n          {header && <p className={headerClasses}>{header}</p>}\n          <div className={contentClasses}>{children}</div>\n        </div>\n      </Element>\n    );\n  },\n);\n\nAlert.displayName = \"Alert\";\nexport { Alert };\n"],"names":["forwardRef","classNames","info","success","warning","error","Icon","Alert","props","ref","elementType","Element","variant","show","header","children","otherProps","classes","className","icon","headerClasses","iconClasses","contentClasses","role","span","div","p","displayName"],"mappings":";AAAA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAC3C,SAASC,IAAI,EAAEC,OAAO,EAAEC,OAAO,EAAEC,KAAK,QAAQ,wBAAwB;AAGtE,SAASC,IAAI,QAAQ,UAAU;AAgB/B,MAAMC,sBAA6DP,WACjE,CAACQ,OAAmBC;IAClB,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,UAAU,MAAM,EAChBC,OAAO,IAAI,EACXC,MAAM,EACNC,QAAQ,EACR,GAAGC,YACJ,GAAGR;IAEJ,IAAI,CAACK,MAAM,OAAO;IAElB,MAAMI,UAAUhB,WACd,UACA,gBACA;QACE,UAAUW,YAAY;QACtB,aAAaA,YAAY;QACzB,aAAaA,YAAY;QACzB,WAAWA,YAAY;QACvB,gBAAgBE;IAClB,GACAE,WAAWE,SAAS;IAEtB,MAAMC,OAAO;QACXjB;QACAC;QACAC;QACAC;IACF;IAEA,MAAMe,gBAAgBnB,WAAW,UAAU;IAC3C,MAAMoB,cAAcpB,WAAW,UAAU;IACzC,MAAMqB,iBAAiBrB,WAAW,UAAU;IAE5C,qBACE,MAACU;QAAQF,KAAKA;QAAKc,MAAK;QAAS,GAAGP,UAAU;QAAEE,WAAWD;;0BACzD,KAACO;gBAAKN,WAAWG;0BACf,cAAA,KAACf;oBAAKa,MAAMA,IAAI,CAACP,QAAQ;;;0BAE3B,MAACa;;oBACEX,wBAAU,KAACY;wBAAER,WAAWE;kCAAgBN;;kCACzC,KAACW;wBAAIP,WAAWI;kCAAiBP;;;;;;AAIzC;AAGFR,MAAMoB,WAAW,GAAG;AACpB,SAASpB,KAAK,GAAG"}
+{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { Ref, forwardRef, RefAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { circleInfo, circleTick, warning, error } from \"@simplybusiness/icons\";\nimport { DOMProps } from \"../../types/dom\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { Icon } from \"../Icon\";\n\nexport type AlertElementType = HTMLDivElement;\n\nexport interface AlertProps extends DOMProps, RefAttributes<AlertElementType> {\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  className?: string;\n  elementType?: string | React.ElementType;\n  variant?: \"info\" | \"success\" | \"warning\" | \"error\";\n  show?: boolean;\n  header?: string;\n}\n\nexport type AlertRef = Ref<AlertElementType>;\n\nconst Alert: ForwardedRefComponent<AlertProps, AlertElementType> = forwardRef(\n  (props: AlertProps, ref: AlertRef) => {\n    const {\n      elementType: Element = \"div\",\n      variant = \"info\",\n      show = true,\n      header,\n      children,\n      ...otherProps\n    } = props;\n\n    if (!show) return null;\n\n    const classes = classNames(\n      \"mobius\",\n      \"mobius/Alert\",\n      {\n        \"--info\": variant === \"info\",\n        \"--success\": variant === \"success\",\n        \"--warning\": variant === \"warning\",\n        \"--error\": variant === \"error\",\n        \"--has-header\": header,\n      },\n      otherProps.className,\n    );\n    const icon = {\n      info: circleInfo,\n      success: circleTick,\n      warning,\n      error,\n    };\n\n    const headerClasses = classNames(\"mobius\", \"mobius/AlertHeader\");\n    const iconClasses = classNames(\"mobius\", \"mobius/AlertIcon\");\n    const contentClasses = classNames(\"mobius\", \"mobius/AlertContent\");\n\n    return (\n      <Element ref={ref} role=\"alert\" {...otherProps} className={classes}>\n        <span className={iconClasses}>\n          <Icon icon={icon[variant]} />\n        </span>\n        <div>\n          {header && <p className={headerClasses}>{header}</p>}\n          <div className={contentClasses}>{children}</div>\n        </div>\n      </Element>\n    );\n  },\n);\n\nAlert.displayName = \"Alert\";\nexport { Alert };\n"],"names":["forwardRef","classNames","circleInfo","circleTick","warning","error","Icon","Alert","props","ref","elementType","Element","variant","show","header","children","otherProps","classes","className","icon","info","success","headerClasses","iconClasses","contentClasses","role","span","div","p","displayName"],"mappings":";AAAA,SAAcA,UAAU,QAAkC,QAAQ;AAClE,OAAOC,gBAAgB,oBAAoB;AAC3C,SAASC,UAAU,EAAEC,UAAU,EAAEC,OAAO,EAAEC,KAAK,QAAQ,wBAAwB;AAG/E,SAASC,IAAI,QAAQ,UAAU;AAgB/B,MAAMC,sBAA6DP,WACjE,CAACQ,OAAmBC;IAClB,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,UAAU,MAAM,EAChBC,OAAO,IAAI,EACXC,MAAM,EACNC,QAAQ,EACR,GAAGC,YACJ,GAAGR;IAEJ,IAAI,CAACK,MAAM,OAAO;IAElB,MAAMI,UAAUhB,WACd,UACA,gBACA;QACE,UAAUW,YAAY;QACtB,aAAaA,YAAY;QACzB,aAAaA,YAAY;QACzB,WAAWA,YAAY;QACvB,gBAAgBE;IAClB,GACAE,WAAWE,SAAS;IAEtB,MAAMC,OAAO;QACXC,MAAMlB;QACNmB,SAASlB;QACTC;QACAC;IACF;IAEA,MAAMiB,gBAAgBrB,WAAW,UAAU;IAC3C,MAAMsB,cAActB,WAAW,UAAU;IACzC,MAAMuB,iBAAiBvB,WAAW,UAAU;IAE5C,qBACE,MAACU;QAAQF,KAAKA;QAAKgB,MAAK;QAAS,GAAGT,UAAU;QAAEE,WAAWD;;0BACzD,KAACS;gBAAKR,WAAWK;0BACf,cAAA,KAACjB;oBAAKa,MAAMA,IAAI,CAACP,QAAQ;;;0BAE3B,MAACe;;oBACEb,wBAAU,KAACc;wBAAEV,WAAWI;kCAAgBR;;kCACzC,KAACa;wBAAIT,WAAWM;kCAAiBT;;;;;;AAIzC;AAGFR,MAAMsB,WAAW,GAAG;AACpB,SAAStB,KAAK,GAAG"}

package/dist/esm/components/Popover/Popover.js

@@ -98,7 +98,8 @@ export const Popover = (props)=>{
                     /*#__PURE__*/ _jsx(FloatingArrow, {
                         ref: arrowRef,
                         context: context,
-                        width: 20
+                        width: 20,
+                        className: "mobius/PopoverArrowIcon"
                     })
                 ]
             })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import {\n  FloatingArrow,\n  arrow,\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { cross } from \"@simplybusiness/icons\";\nimport classNames from \"classnames\";\nimport {\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  useRef,\n  useState,\n} from \"react\";\nimport { useWindowEvent } from \"../../hooks\";\nimport { DOMProps } from \"../../types\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\n\nexport type PopoverElementType = HTMLDivElement;\n\nexport interface PopoverProps\n  extends DOMProps,\n    RefAttributes<PopoverElementType> {\n  children?: ReactNode;\n  trigger: ReactElement;\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  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nexport type PopoverRef = Ref<PopoverElementType>;\n\nconst OFFSET_FROM_CONTENT_DEFAULT = 10;\n\nexport const Popover = (props: PopoverProps) => {\n  const { trigger, children, onOpen, onClose, className } = props;\n  const arrowRef = useRef(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      arrow({\n        element: arrowRef,\n      }),\n      offset(OFFSET_FROM_CONTENT_DEFAULT),\n      shift(),\n      flip(),\n    ],\n  });\n  const dismiss = useDismiss(context, {\n    bubbles: true,\n    outsidePress: (event: MouseEvent) => {\n      // Prevent 'onClose' from firing when clicking the toggle to close\n      const toggle = refs.reference.current as HTMLElement;\n      const isToggleClick = !toggle?.contains(event.target as HTMLElement);\n      if (isToggleClick) {\n        onClose?.();\n      }\n      return true;\n    },\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);\n\n  const containerClasses = classNames(\n    \"mobius\",\n    \"mobius/PopoverContainer\",\n    className,\n  );\n\n  const toggleVisibility = () => {\n    if (isOpen) {\n      setIsOpen(false);\n      onClose?.();\n      return;\n    }\n\n    setIsOpen(true);\n    onOpen?.();\n  };\n\n  const triggerComponent = cloneElement(trigger, {\n    ref: refs.setReference,\n    className: classNames(trigger.props.className, \"mobius/PopoverToggle\"),\n    onClick: toggleVisibility,\n    ...getReferenceProps(),\n  });\n\n  useWindowEvent(\"keydown\", e => {\n    if (e.key === \"Escape\") {\n      onClose?.();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  });\n\n  return (\n    <>\n      {triggerComponent}\n      {isOpen && (\n        <div\n          className={containerClasses}\n          ref={refs.setFloating}\n          style={floatingStyles}\n          {...getFloatingProps()}\n        >\n          <div className=\"mobius/Popover\">\n            <header className=\"mobius/PopoverHeader\">\n              <Button\n                type=\"button\"\n                className=\"mobius/PopoverCloseButton\"\n                onClick={toggleVisibility}\n                aria-label=\"Close\"\n                variant=\"ghost\"\n              >\n                <Icon\n                  icon={cross}\n                  size=\"md\"\n                  className=\"mobius/PopoverCloseIcon\"\n                />\n              </Button>\n            </header>\n            <div className=\"mobius/PopoverBody\">{children}</div>\n          </div>\n          <FloatingArrow ref={arrowRef} context={context} width={20} />\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":["FloatingArrow","arrow","autoUpdate","flip","offset","shift","useDismiss","useFloating","useInteractions","cross","classNames","cloneElement","useRef","useState","useWindowEvent","Button","Icon","OFFSET_FROM_CONTENT_DEFAULT","Popover","props","trigger","children","onOpen","onClose","className","arrowRef","isOpen","setIsOpen","refs","floatingStyles","context","open","onOpenChange","whileElementsMounted","middleware","element","dismiss","bubbles","outsidePress","event","toggle","reference","current","isToggleClick","contains","target","getReferenceProps","getFloatingProps","containerClasses","toggleVisibility","triggerComponent","ref","setReference","onClick","e","key","preventDefault","stopPropagation","div","setFloating","style","header","type","aria-label","variant","icon","size","width"],"mappings":";AAAA,SACEA,aAAa,EACbC,KAAK,EACLC,UAAU,EACVC,IAAI,EACJC,MAAM,EACNC,KAAK,EACLC,UAAU,EACVC,WAAW,EACXC,eAAe,QACV,qBAAqB;AAC5B,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,OAAOC,gBAAgB,aAAa;AACpC,SAKEC,YAAY,EACZC,MAAM,EACNC,QAAQ,QACH,QAAQ;AACf,SAASC,cAAc,QAAQ,cAAc;AAE7C,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,IAAI,QAAQ,UAAU;AAmB/B,MAAMC,8BAA8B;AAEpC,OAAO,MAAMC,UAAU,CAACC;IACtB,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGL;IAC1D,MAAMM,WAAWb,OAAO;IACxB,MAAM,CAACc,QAAQC,UAAU,GAAGd,SAAS;IACrC,MAAM,EAAEe,IAAI,EAAEC,cAAc,EAAEC,OAAO,EAAE,GAAGvB,YAAY;QACpDwB,MAAML;QACNM,cAAcL;QACdM,sBAAsB/B;QACtBgC,YAAY;YACVjC,MAAM;gBACJkC,SAASV;YACX;YACArB,OAAOa;YACPZ;YACAF;SACD;IACH;IACA,MAAMiC,UAAU9B,WAAWwB,SAAS;QAClCO,SAAS;QACTC,cAAc,CAACC;YACb,kEAAkE;YAClE,MAAMC,SAASZ,KAAKa,SAAS,CAACC,OAAO;YACrC,MAAMC,gBAAgB,EAACH,mBAAAA,6BAAAA,OAAQI,QAAQ,CAACL,MAAMM,MAAM;YACpD,IAAIF,eAAe;gBACjBpB,oBAAAA,8BAAAA;YACF;YACA,OAAO;QACT;IACF;IACA,MAAM,EAAEuB,iBAAiB,EAAEC,gBAAgB,EAAE,GAAGvC,gBAAgB;QAAC4B;KAAQ;IAEzE,MAAMY,mBAAmBtC,WACvB,UACA,2BACAc;IAGF,MAAMyB,mBAAmB;QACvB,IAAIvB,QAAQ;YACVC,UAAU;YACVJ,oBAAAA,8BAAAA;YACA;QACF;QAEAI,UAAU;QACVL,mBAAAA,6BAAAA;IACF;IAEA,MAAM4B,iCAAmBvC,aAAaS,SAAS;QAC7C+B,KAAKvB,KAAKwB,YAAY;QACtB5B,WAAWd,WAAWU,QAAQD,KAAK,CAACK,SAAS,EAAE;QAC/C6B,SAASJ;QACT,GAAGH,mBAAmB;IACxB;IAEAhC,eAAe,WAAWwC,CAAAA;QACxB,IAAIA,EAAEC,GAAG,KAAK,UAAU;YACtBhC,oBAAAA,8BAAAA;YACA+B,EAAEE,cAAc;YAChBF,EAAEG,eAAe;QACnB;IACF;IAEA,qBACE;;YACGP;YACAxB,wBACC,MAACgC;gBACClC,WAAWwB;gBACXG,KAAKvB,KAAK+B,WAAW;gBACrBC,OAAO/B;gBACN,GAAGkB,kBAAkB;;kCAEtB,MAACW;wBAAIlC,WAAU;;0CACb,KAACqC;gCAAOrC,WAAU;0CAChB,cAAA,KAACT;oCACC+C,MAAK;oCACLtC,WAAU;oCACV6B,SAASJ;oCACTc,cAAW;oCACXC,SAAQ;8CAER,cAAA,KAAChD;wCACCiD,MAAMxD;wCACNyD,MAAK;wCACL1C,WAAU;;;;0CAIhB,KAACkC;gCAAIlC,WAAU;0CAAsBH;;;;kCAEvC,KAACrB;wBAAcmD,KAAK1B;wBAAUK,SAASA;wBAASqC,OAAO;;;;;;AAKjE,EAAE"}
+{"version":3,"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import {\n  FloatingArrow,\n  arrow,\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { cross } from \"@simplybusiness/icons\";\nimport classNames from \"classnames\";\nimport {\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  cloneElement,\n  useRef,\n  useState,\n} from \"react\";\nimport { useWindowEvent } from \"../../hooks\";\nimport { DOMProps } from \"../../types\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\n\nexport type PopoverElementType = HTMLDivElement;\n\nexport interface PopoverProps\n  extends DOMProps,\n    RefAttributes<PopoverElementType> {\n  children?: ReactNode;\n  trigger: ReactElement;\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  /** Custom class name for setting specific CSS */\n  className?: string;\n}\n\nexport type PopoverRef = Ref<PopoverElementType>;\n\nconst OFFSET_FROM_CONTENT_DEFAULT = 10;\n\nexport const Popover = (props: PopoverProps) => {\n  const { trigger, children, onOpen, onClose, className } = props;\n  const arrowRef = useRef(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    whileElementsMounted: autoUpdate,\n    middleware: [\n      arrow({\n        element: arrowRef,\n      }),\n      offset(OFFSET_FROM_CONTENT_DEFAULT),\n      shift(),\n      flip(),\n    ],\n  });\n  const dismiss = useDismiss(context, {\n    bubbles: true,\n    outsidePress: (event: MouseEvent) => {\n      // Prevent 'onClose' from firing when clicking the toggle to close\n      const toggle = refs.reference.current as HTMLElement;\n      const isToggleClick = !toggle?.contains(event.target as HTMLElement);\n      if (isToggleClick) {\n        onClose?.();\n      }\n      return true;\n    },\n  });\n  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);\n\n  const containerClasses = classNames(\n    \"mobius\",\n    \"mobius/PopoverContainer\",\n    className,\n  );\n\n  const toggleVisibility = () => {\n    if (isOpen) {\n      setIsOpen(false);\n      onClose?.();\n      return;\n    }\n\n    setIsOpen(true);\n    onOpen?.();\n  };\n\n  const triggerComponent = cloneElement(trigger, {\n    ref: refs.setReference,\n    className: classNames(trigger.props.className, \"mobius/PopoverToggle\"),\n    onClick: toggleVisibility,\n    ...getReferenceProps(),\n  });\n\n  useWindowEvent(\"keydown\", e => {\n    if (e.key === \"Escape\") {\n      onClose?.();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  });\n\n  return (\n    <>\n      {triggerComponent}\n      {isOpen && (\n        <div\n          className={containerClasses}\n          ref={refs.setFloating}\n          style={floatingStyles}\n          {...getFloatingProps()}\n        >\n          <div className=\"mobius/Popover\">\n            <header className=\"mobius/PopoverHeader\">\n              <Button\n                type=\"button\"\n                className=\"mobius/PopoverCloseButton\"\n                onClick={toggleVisibility}\n                aria-label=\"Close\"\n                variant=\"ghost\"\n              >\n                <Icon\n                  icon={cross}\n                  size=\"md\"\n                  className=\"mobius/PopoverCloseIcon\"\n                />\n              </Button>\n            </header>\n            <div className=\"mobius/PopoverBody\">{children}</div>\n          </div>\n          <FloatingArrow\n            ref={arrowRef}\n            context={context}\n            width={20}\n            className=\"mobius/PopoverArrowIcon\"\n          />\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":["FloatingArrow","arrow","autoUpdate","flip","offset","shift","useDismiss","useFloating","useInteractions","cross","classNames","cloneElement","useRef","useState","useWindowEvent","Button","Icon","OFFSET_FROM_CONTENT_DEFAULT","Popover","props","trigger","children","onOpen","onClose","className","arrowRef","isOpen","setIsOpen","refs","floatingStyles","context","open","onOpenChange","whileElementsMounted","middleware","element","dismiss","bubbles","outsidePress","event","toggle","reference","current","isToggleClick","contains","target","getReferenceProps","getFloatingProps","containerClasses","toggleVisibility","triggerComponent","ref","setReference","onClick","e","key","preventDefault","stopPropagation","div","setFloating","style","header","type","aria-label","variant","icon","size","width"],"mappings":";AAAA,SACEA,aAAa,EACbC,KAAK,EACLC,UAAU,EACVC,IAAI,EACJC,MAAM,EACNC,KAAK,EACLC,UAAU,EACVC,WAAW,EACXC,eAAe,QACV,qBAAqB;AAC5B,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,OAAOC,gBAAgB,aAAa;AACpC,SAKEC,YAAY,EACZC,MAAM,EACNC,QAAQ,QACH,QAAQ;AACf,SAASC,cAAc,QAAQ,cAAc;AAE7C,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,IAAI,QAAQ,UAAU;AAmB/B,MAAMC,8BAA8B;AAEpC,OAAO,MAAMC,UAAU,CAACC;IACtB,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGL;IAC1D,MAAMM,WAAWb,OAAO;IACxB,MAAM,CAACc,QAAQC,UAAU,GAAGd,SAAS;IACrC,MAAM,EAAEe,IAAI,EAAEC,cAAc,EAAEC,OAAO,EAAE,GAAGvB,YAAY;QACpDwB,MAAML;QACNM,cAAcL;QACdM,sBAAsB/B;QACtBgC,YAAY;YACVjC,MAAM;gBACJkC,SAASV;YACX;YACArB,OAAOa;YACPZ;YACAF;SACD;IACH;IACA,MAAMiC,UAAU9B,WAAWwB,SAAS;QAClCO,SAAS;QACTC,cAAc,CAACC;YACb,kEAAkE;YAClE,MAAMC,SAASZ,KAAKa,SAAS,CAACC,OAAO;YACrC,MAAMC,gBAAgB,EAACH,mBAAAA,6BAAAA,OAAQI,QAAQ,CAACL,MAAMM,MAAM;YACpD,IAAIF,eAAe;gBACjBpB,oBAAAA,8BAAAA;YACF;YACA,OAAO;QACT;IACF;IACA,MAAM,EAAEuB,iBAAiB,EAAEC,gBAAgB,EAAE,GAAGvC,gBAAgB;QAAC4B;KAAQ;IAEzE,MAAMY,mBAAmBtC,WACvB,UACA,2BACAc;IAGF,MAAMyB,mBAAmB;QACvB,IAAIvB,QAAQ;YACVC,UAAU;YACVJ,oBAAAA,8BAAAA;YACA;QACF;QAEAI,UAAU;QACVL,mBAAAA,6BAAAA;IACF;IAEA,MAAM4B,iCAAmBvC,aAAaS,SAAS;QAC7C+B,KAAKvB,KAAKwB,YAAY;QACtB5B,WAAWd,WAAWU,QAAQD,KAAK,CAACK,SAAS,EAAE;QAC/C6B,SAASJ;QACT,GAAGH,mBAAmB;IACxB;IAEAhC,eAAe,WAAWwC,CAAAA;QACxB,IAAIA,EAAEC,GAAG,KAAK,UAAU;YACtBhC,oBAAAA,8BAAAA;YACA+B,EAAEE,cAAc;YAChBF,EAAEG,eAAe;QACnB;IACF;IAEA,qBACE;;YACGP;YACAxB,wBACC,MAACgC;gBACClC,WAAWwB;gBACXG,KAAKvB,KAAK+B,WAAW;gBACrBC,OAAO/B;gBACN,GAAGkB,kBAAkB;;kCAEtB,MAACW;wBAAIlC,WAAU;;0CACb,KAACqC;gCAAOrC,WAAU;0CAChB,cAAA,KAACT;oCACC+C,MAAK;oCACLtC,WAAU;oCACV6B,SAASJ;oCACTc,cAAW;oCACXC,SAAQ;8CAER,cAAA,KAAChD;wCACCiD,MAAMxD;wCACNyD,MAAK;wCACL1C,WAAU;;;;0CAIhB,KAACkC;gCAAIlC,WAAU;0CAAsBH;;;;kCAEvC,KAACrB;wBACCmD,KAAK1B;wBACLK,SAASA;wBACTqC,OAAO;wBACP3C,WAAU;;;;;;AAMtB,EAAE"}

package/dist/esm/hooks/index.js

@@ -2,6 +2,7 @@ export * from "./useBodyScrollLock";
 export * from "./useBreakpoint";
 export * from "./useButton";
 export * from "./useDialog";
+export * from "./useDialogPolyfill";
 export * from "./useLabel";
 export * from "./useOnClickOutside";
 export * from "./useTextField";

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 \"./useDialog\";\nexport * from \"./useLabel\";\nexport * from \"./useOnClickOutside\";\nexport * from \"./useTextField\";\nexport * from \"./useWindowEvent\";\n"],"names":[],"mappings":"AAAA,cAAc,sBAAsB;AACpC,cAAc,kBAAkB;AAChC,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,cAAc,aAAa;AAC3B,cAAc,sBAAsB;AACpC,cAAc,iBAAiB;AAC/B,cAAc,mBAAmB"}
+{"version":3,"sources":["../../../src/hooks/index.tsx"],"sourcesContent":["export * from \"./useBodyScrollLock\";\nexport * from \"./useBreakpoint\";\nexport * from \"./useButton\";\nexport * from \"./useDialog\";\nexport * from \"./useDialogPolyfill\";\nexport * from \"./useLabel\";\nexport * from \"./useOnClickOutside\";\nexport * from \"./useTextField\";\nexport * from \"./useWindowEvent\";\n"],"names":[],"mappings":"AAAA,cAAc,sBAAsB;AACpC,cAAc,kBAAkB;AAChC,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,cAAc,sBAAsB;AACpC,cAAc,aAAa;AAC3B,cAAc,sBAAsB;AACpC,cAAc,iBAAiB;AAC/B,cAAc,mBAAmB"}

package/dist/esm/hooks/useDialog/useDialog.js

@@ -7,9 +7,9 @@ const FALLBACK_TRANSITION_DURATION = 0;
 export const useDialog = (props)=>{
     const { ref, isOpen, transition, onOpen, onClose } = props;
     const shouldTransition = supportsDialog() && transition.isEnabled;
+    const { polyfillDialog } = useDialogPolyfill();
     // Read CSS variable value as number
     const TRANSITION_DURATION_IN_MS = ref.current && Number(getComputedStyle(ref.current).getPropertyValue(transition.CSSVariable).replace("ms", "")) || FALLBACK_TRANSITION_DURATION;
-    useDialogPolyfill(ref);
     useBodyScrollLock({
         enabled: isOpen
     });
@@ -57,6 +57,7 @@ export const useDialog = (props)=>{
         async function toggleDialog() {
             var _ref_current, _ref_current1;
             if (isOpen && !((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.open)) {
+                await polyfillDialog(ref);
                 open();
                 // Fix opening transition in Safari being skipped
                 // by wrapping with setTimeout
@@ -73,7 +74,8 @@ export const useDialog = (props)=>{
         handleClose,
         isOpen,
         open,
-        ref
+        ref,
+        polyfillDialog
     ]);
     return {
         open,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/hooks/useDialog/useDialog.ts"],"sourcesContent":["import {\n  MutableRefObject,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n} from \"react\";\nimport { useDialogPolyfill } from \"../useDialogPolyfill\";\nimport { useBodyScrollLock } from \"../useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils\";\n\nexport type TransitionProps = {\n  isEnabled: boolean;\n  CSSVariable: string;\n};\n\nexport type useDialogProps = {\n  ref: MutableRefObject<HTMLDialogElement | null>;\n  transition: TransitionProps;\n  isOpen: boolean;\n  onOpen?: () => void;\n  onClose?: () => void;\n};\n\nconst TRANSITION_CLASS_NAME = \"--transition\";\nconst FALLBACK_TRANSITION_DURATION = 0;\n\nexport const useDialog = (props: useDialogProps) => {\n  const { ref, isOpen, transition, onOpen, onClose } = props;\n  const shouldTransition = supportsDialog() && transition.isEnabled;\n\n  // Read CSS variable value as number\n  const TRANSITION_DURATION_IN_MS =\n    (ref.current &&\n      Number(\n        getComputedStyle(ref.current)\n          .getPropertyValue(transition.CSSVariable)\n          .replace(\"ms\", \"\"),\n      )) ||\n    FALLBACK_TRANSITION_DURATION;\n\n  useDialogPolyfill(ref);\n  useBodyScrollLock({ enabled: isOpen });\n\n  const open = useCallback(() => {\n    ref.current?.showModal();\n    onOpen?.();\n  }, [onOpen, ref]);\n\n  const close = useCallback(() => {\n    ref.current?.close();\n    onClose?.();\n  }, [onClose, ref]);\n\n  // Add close handler, to enable closing transitions\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        // Prevent default event coming from onCancel,\n        // which is triggered by pressing ESC key\n        event.preventDefault();\n        // Ensure that nested `<dialog>` elements\n        // don't close the parent\n        event.stopPropagation();\n      }\n\n      if (shouldTransition) {\n        ref.current?.classList.remove(TRANSITION_CLASS_NAME);\n        // Delay close to allow exit transition\n        setTimeout(() => close(), TRANSITION_DURATION_IN_MS);\n      } else {\n        close();\n      }\n    },\n    [TRANSITION_DURATION_IN_MS, close, ref, shouldTransition],\n  );\n\n  useEffect(() => {\n    async function toggleDialog() {\n      if (isOpen && !ref.current?.open) {\n        open();\n        // Fix opening transition in Safari being skipped\n        // by wrapping with setTimeout\n        setTimeout(() => {\n          ref.current?.classList.add(TRANSITION_CLASS_NAME);\n        }, 0);\n      } else if (!isOpen && ref.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleDialog();\n  }, [handleClose, isOpen, open, ref]);\n\n  return {\n    open,\n    close: handleClose,\n  };\n};\n"],"names":["useCallback","useEffect","useDialogPolyfill","useBodyScrollLock","supportsDialog","TRANSITION_CLASS_NAME","FALLBACK_TRANSITION_DURATION","useDialog","props","ref","isOpen","transition","onOpen","onClose","shouldTransition","isEnabled","TRANSITION_DURATION_IN_MS","current","Number","getComputedStyle","getPropertyValue","CSSVariable","replace","enabled","open","showModal","close","handleClose","event","preventDefault","stopPropagation","classList","remove","setTimeout","toggleDialog","add"],"mappings":"AAAA,SAGEA,WAAW,EACXC,SAAS,QACJ,QAAQ;AACf,SAASC,iBAAiB,QAAQ,uBAAuB;AACzD,SAASC,iBAAiB,QAAQ,uBAAuB;AACzD,SAASC,cAAc,QAAQ,cAAc;AAe7C,MAAMC,wBAAwB;AAC9B,MAAMC,+BAA+B;AAErC,OAAO,MAAMC,YAAY,CAACC;IACxB,MAAM,EAAEC,GAAG,EAAEC,MAAM,EAAEC,UAAU,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGL;IACrD,MAAMM,mBAAmBV,oBAAoBO,WAAWI,SAAS;IAEjE,oCAAoC;IACpC,MAAMC,4BACJ,AAACP,IAAIQ,OAAO,IACVC,OACEC,iBAAiBV,IAAIQ,OAAO,EACzBG,gBAAgB,CAACT,WAAWU,WAAW,EACvCC,OAAO,CAAC,MAAM,QAErBhB;IAEFJ,kBAAkBO;IAClBN,kBAAkB;QAAEoB,SAASb;IAAO;IAEpC,MAAMc,OAAOxB,YAAY;YACvBS;SAAAA,eAAAA,IAAIQ,OAAO,cAAXR,mCAAAA,aAAagB,SAAS;QACtBb,mBAAAA,6BAAAA;IACF,GAAG;QAACA;QAAQH;KAAI;IAEhB,MAAMiB,QAAQ1B,YAAY;YACxBS;SAAAA,eAAAA,IAAIQ,OAAO,cAAXR,mCAAAA,aAAaiB,KAAK;QAClBb,oBAAAA,8BAAAA;IACF,GAAG;QAACA;QAASJ;KAAI;IAEjB,mDAAmD;IACnD,MAAMkB,cAAc3B,YAClB,CAAC4B;QACC,IAAIA,OAAO;YACT,8CAA8C;YAC9C,yCAAyC;YACzCA,MAAMC,cAAc;YACpB,yCAAyC;YACzC,yBAAyB;YACzBD,MAAME,eAAe;QACvB;QAEA,IAAIhB,kBAAkB;gBACpBL;aAAAA,eAAAA,IAAIQ,OAAO,cAAXR,mCAAAA,aAAasB,SAAS,CAACC,MAAM,CAAC3B;YAC9B,uCAAuC;YACvC4B,WAAW,IAAMP,SAASV;QAC5B,OAAO;YACLU;QACF;IACF,GACA;QAACV;QAA2BU;QAAOjB;QAAKK;KAAiB;IAG3Db,UAAU;QACR,eAAeiC;gBACEzB,cAOOA;YAPtB,IAAIC,UAAU,GAACD,eAAAA,IAAIQ,OAAO,cAAXR,mCAAAA,aAAae,IAAI,GAAE;gBAChCA;gBACA,iDAAiD;gBACjD,8BAA8B;gBAC9BS,WAAW;wBACTxB;qBAAAA,eAAAA,IAAIQ,OAAO,cAAXR,mCAAAA,aAAasB,SAAS,CAACI,GAAG,CAAC9B;gBAC7B,GAAG;YACL,OAAO,IAAI,CAACK,YAAUD,gBAAAA,IAAIQ,OAAO,cAAXR,oCAAAA,cAAae,IAAI,GAAE;gBACvCG;YACF;QACF;QAEAO;IACF,GAAG;QAACP;QAAajB;QAAQc;QAAMf;KAAI;IAEnC,OAAO;QACLe;QACAE,OAAOC;IACT;AACF,EAAE"}
+{"version":3,"sources":["../../../../src/hooks/useDialog/useDialog.ts"],"sourcesContent":["import {\n  MutableRefObject,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n} from \"react\";\nimport { useDialogPolyfill } from \"../useDialogPolyfill\";\nimport { useBodyScrollLock } from \"../useBodyScrollLock\";\nimport { supportsDialog } from \"../../utils\";\n\nexport type TransitionProps = {\n  isEnabled: boolean;\n  CSSVariable: string;\n};\n\nexport type useDialogProps = {\n  ref: MutableRefObject<HTMLDialogElement | null>;\n  transition: TransitionProps;\n  isOpen: boolean;\n  onOpen?: () => void;\n  onClose?: () => void;\n};\n\nconst TRANSITION_CLASS_NAME = \"--transition\";\nconst FALLBACK_TRANSITION_DURATION = 0;\n\nexport const useDialog = (props: useDialogProps) => {\n  const { ref, isOpen, transition, onOpen, onClose } = props;\n  const shouldTransition = supportsDialog() && transition.isEnabled;\n  const { polyfillDialog } = useDialogPolyfill();\n\n  // Read CSS variable value as number\n  const TRANSITION_DURATION_IN_MS =\n    (ref.current &&\n      Number(\n        getComputedStyle(ref.current)\n          .getPropertyValue(transition.CSSVariable)\n          .replace(\"ms\", \"\"),\n      )) ||\n    FALLBACK_TRANSITION_DURATION;\n\n  useBodyScrollLock({ enabled: isOpen });\n\n  const open = useCallback(() => {\n    ref.current?.showModal();\n    onOpen?.();\n  }, [onOpen, ref]);\n\n  const close = useCallback(() => {\n    ref.current?.close();\n    onClose?.();\n  }, [onClose, ref]);\n\n  // Add close handler, to enable closing transitions\n  const handleClose = useCallback(\n    (event?: SyntheticEvent<HTMLElement, Event>) => {\n      if (event) {\n        // Prevent default event coming from onCancel,\n        // which is triggered by pressing ESC key\n        event.preventDefault();\n        // Ensure that nested `<dialog>` elements\n        // don't close the parent\n        event.stopPropagation();\n      }\n\n      if (shouldTransition) {\n        ref.current?.classList.remove(TRANSITION_CLASS_NAME);\n        // Delay close to allow exit transition\n        setTimeout(() => close(), TRANSITION_DURATION_IN_MS);\n      } else {\n        close();\n      }\n    },\n    [TRANSITION_DURATION_IN_MS, close, ref, shouldTransition],\n  );\n\n  useEffect(() => {\n    async function toggleDialog() {\n      if (isOpen && !ref.current?.open) {\n        await polyfillDialog(ref);\n\n        open();\n        // Fix opening transition in Safari being skipped\n        // by wrapping with setTimeout\n        setTimeout(() => {\n          ref.current?.classList.add(TRANSITION_CLASS_NAME);\n        }, 0);\n      } else if (!isOpen && ref.current?.open) {\n        handleClose();\n      }\n    }\n\n    toggleDialog();\n  }, [handleClose, isOpen, open, ref, polyfillDialog]);\n\n  return {\n    open,\n    close: handleClose,\n  };\n};\n"],"names":["useCallback","useEffect","useDialogPolyfill","useBodyScrollLock","supportsDialog","TRANSITION_CLASS_NAME","FALLBACK_TRANSITION_DURATION","useDialog","props","ref","isOpen","transition","onOpen","onClose","shouldTransition","isEnabled","polyfillDialog","TRANSITION_DURATION_IN_MS","current","Number","getComputedStyle","getPropertyValue","CSSVariable","replace","enabled","open","showModal","close","handleClose","event","preventDefault","stopPropagation","classList","remove","setTimeout","toggleDialog","add"],"mappings":"AAAA,SAGEA,WAAW,EACXC,SAAS,QACJ,QAAQ;AACf,SAASC,iBAAiB,QAAQ,uBAAuB;AACzD,SAASC,iBAAiB,QAAQ,uBAAuB;AACzD,SAASC,cAAc,QAAQ,cAAc;AAe7C,MAAMC,wBAAwB;AAC9B,MAAMC,+BAA+B;AAErC,OAAO,MAAMC,YAAY,CAACC;IACxB,MAAM,EAAEC,GAAG,EAAEC,MAAM,EAAEC,UAAU,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGL;IACrD,MAAMM,mBAAmBV,oBAAoBO,WAAWI,SAAS;IACjE,MAAM,EAAEC,cAAc,EAAE,GAAGd;IAE3B,oCAAoC;IACpC,MAAMe,4BACJ,AAACR,IAAIS,OAAO,IACVC,OACEC,iBAAiBX,IAAIS,OAAO,EACzBG,gBAAgB,CAACV,WAAWW,WAAW,EACvCC,OAAO,CAAC,MAAM,QAErBjB;IAEFH,kBAAkB;QAAEqB,SAASd;IAAO;IAEpC,MAAMe,OAAOzB,YAAY;YACvBS;SAAAA,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAaiB,SAAS;QACtBd,mBAAAA,6BAAAA;IACF,GAAG;QAACA;QAAQH;KAAI;IAEhB,MAAMkB,QAAQ3B,YAAY;YACxBS;SAAAA,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAakB,KAAK;QAClBd,oBAAAA,8BAAAA;IACF,GAAG;QAACA;QAASJ;KAAI;IAEjB,mDAAmD;IACnD,MAAMmB,cAAc5B,YAClB,CAAC6B;QACC,IAAIA,OAAO;YACT,8CAA8C;YAC9C,yCAAyC;YACzCA,MAAMC,cAAc;YACpB,yCAAyC;YACzC,yBAAyB;YACzBD,MAAME,eAAe;QACvB;QAEA,IAAIjB,kBAAkB;gBACpBL;aAAAA,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAauB,SAAS,CAACC,MAAM,CAAC5B;YAC9B,uCAAuC;YACvC6B,WAAW,IAAMP,SAASV;QAC5B,OAAO;YACLU;QACF;IACF,GACA;QAACV;QAA2BU;QAAOlB;QAAKK;KAAiB;IAG3Db,UAAU;QACR,eAAekC;gBACE1B,cASOA;YATtB,IAAIC,UAAU,GAACD,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAagB,IAAI,GAAE;gBAChC,MAAMT,eAAeP;gBAErBgB;gBACA,iDAAiD;gBACjD,8BAA8B;gBAC9BS,WAAW;wBACTzB;qBAAAA,eAAAA,IAAIS,OAAO,cAAXT,mCAAAA,aAAauB,SAAS,CAACI,GAAG,CAAC/B;gBAC7B,GAAG;YACL,OAAO,IAAI,CAACK,YAAUD,gBAAAA,IAAIS,OAAO,cAAXT,oCAAAA,cAAagB,IAAI,GAAE;gBACvCG;YACF;QACF;QAEAO;IACF,GAAG;QAACP;QAAalB;QAAQe;QAAMhB;QAAKO;KAAe;IAEnD,OAAO;QACLS;QACAE,OAAOC;IACT;AACF,EAAE"}

package/dist/esm/hooks/useDialogPolyfill/useDialogPolyfill.js

@@ -1,27 +1,23 @@
-import { useEffect } from "react";
+import { useRef } from "react";
 import { supportsDialog } from "../../utils";
 // Add polyfill for HTML Dialog in old browsers
-export const useDialogPolyfill = (ref)=>{
+export const useDialogPolyfill = ()=>{
     const hasDialogSupport = supportsDialog();
-    useEffect(()=>{
-        async function polyfillDialog() {
-            if (!hasDialogSupport && typeof window !== "undefined" && ref.current !== null) {
-                const { default: dialogPolyfill } = await import("dialog-polyfill");
-                try {
-                    dialogPolyfill.registerDialog(ref.current);
-                } catch (error) {
-                    // In iOS 15 <= 15.2 this intermittently fails with
-                    // TypeError: null is not an object (evaluating 'element.showModal')
-                    // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️
-                    console.error("Failed to load dialog-polyfill", error);
-                }
+    const hasAlreadyLoaded = useRef(false);
+    const polyfillDialog = async (ref)=>{
+        if (!hasAlreadyLoaded.current && !hasDialogSupport && typeof window !== "undefined" && ref.current !== null) {
+            const { default: dialogPolyfill } = await import("dialog-polyfill");
+            hasAlreadyLoaded.current = true;
+            try {
+                dialogPolyfill.registerDialog(ref.current);
+            } catch (error) {
+                console.error("Failed to load dialog-polyfill", error);
             }
         }
-        polyfillDialog();
-    }, [
-        ref,
-        hasDialogSupport
-    ]);
+    };
+    return {
+        polyfillDialog
+    };
 };
 
 //# sourceMappingURL=useDialogPolyfill.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/hooks/useDialogPolyfill/useDialogPolyfill.ts"],"sourcesContent":["import { MutableRefObject, useEffect } from \"react\";\nimport { supportsDialog } from \"../../utils\";\n\n// Add polyfill for HTML Dialog in old browsers\nexport const useDialogPolyfill = (\n  ref: MutableRefObject<HTMLDialogElement | null>,\n) => {\n  const hasDialogSupport = supportsDialog();\n\n  useEffect(() => {\n    async function polyfillDialog() {\n      if (\n        !hasDialogSupport &&\n        typeof window !== \"undefined\" &&\n        ref.current !== null\n      ) {\n        const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n\n        try {\n          dialogPolyfill.registerDialog(ref.current);\n        } catch (error) {\n          // In iOS 15 <= 15.2 this intermittently fails with\n          // TypeError: null is not an object (evaluating 'element.showModal')\n          // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️\n          console.error(\"Failed to load dialog-polyfill\", error);\n        }\n      }\n    }\n\n    polyfillDialog();\n  }, [ref, hasDialogSupport]);\n};\n"],"names":["useEffect","supportsDialog","useDialogPolyfill","ref","hasDialogSupport","polyfillDialog","window","current","default","dialogPolyfill","registerDialog","error","console"],"mappings":"AAAA,SAA2BA,SAAS,QAAQ,QAAQ;AACpD,SAASC,cAAc,QAAQ,cAAc;AAE7C,+CAA+C;AAC/C,OAAO,MAAMC,oBAAoB,CAC/BC;IAEA,MAAMC,mBAAmBH;IAEzBD,UAAU;QACR,eAAeK;YACb,IACE,CAACD,oBACD,OAAOE,WAAW,eAClBH,IAAII,OAAO,KAAK,MAChB;gBACA,MAAM,EAAEC,SAASC,cAAc,EAAE,GAAG,MAAM,MAAM,CAAC;gBAEjD,IAAI;oBACFA,eAAeC,cAAc,CAACP,IAAII,OAAO;gBAC3C,EAAE,OAAOI,OAAO;oBACd,mDAAmD;oBACnD,oEAAoE;oBACpE,qGAAqG;oBACrGC,QAAQD,KAAK,CAAC,kCAAkCA;gBAClD;YACF;QACF;QAEAN;IACF,GAAG;QAACF;QAAKC;KAAiB;AAC5B,EAAE"}
+{"version":3,"sources":["../../../../src/hooks/useDialogPolyfill/useDialogPolyfill.ts"],"sourcesContent":["import { MutableRefObject, useRef } from \"react\";\nimport { supportsDialog } from \"../../utils\";\n\n// Add polyfill for HTML Dialog in old browsers\nexport const useDialogPolyfill = () => {\n  const hasDialogSupport = supportsDialog();\n  const hasAlreadyLoaded = useRef(false);\n\n  const polyfillDialog = async (\n    ref: MutableRefObject<HTMLDialogElement | null>,\n  ) => {\n    if (\n      !hasAlreadyLoaded.current &&\n      !hasDialogSupport &&\n      typeof window !== \"undefined\" &&\n      ref.current !== null\n    ) {\n      const { default: dialogPolyfill } = await import(\"dialog-polyfill\");\n      hasAlreadyLoaded.current = true;\n\n      try {\n        dialogPolyfill.registerDialog(ref.current);\n      } catch (error) {\n        console.error(\"Failed to load dialog-polyfill\", error);\n      }\n    }\n  };\n\n  return {\n    polyfillDialog,\n  };\n};\n"],"names":["useRef","supportsDialog","useDialogPolyfill","hasDialogSupport","hasAlreadyLoaded","polyfillDialog","ref","current","window","default","dialogPolyfill","registerDialog","error","console"],"mappings":"AAAA,SAA2BA,MAAM,QAAQ,QAAQ;AACjD,SAASC,cAAc,QAAQ,cAAc;AAE7C,+CAA+C;AAC/C,OAAO,MAAMC,oBAAoB;IAC/B,MAAMC,mBAAmBF;IACzB,MAAMG,mBAAmBJ,OAAO;IAEhC,MAAMK,iBAAiB,OACrBC;QAEA,IACE,CAACF,iBAAiBG,OAAO,IACzB,CAACJ,oBACD,OAAOK,WAAW,eAClBF,IAAIC,OAAO,KAAK,MAChB;YACA,MAAM,EAAEE,SAASC,cAAc,EAAE,GAAG,MAAM,MAAM,CAAC;YACjDN,iBAAiBG,OAAO,GAAG;YAE3B,IAAI;gBACFG,eAAeC,cAAc,CAACL,IAAIC,OAAO;YAC3C,EAAE,OAAOK,OAAO;gBACdC,QAAQD,KAAK,CAAC,kCAAkCA;YAClD;QACF;IACF;IAEA,OAAO;QACLP;IACF;AACF,EAAE"}

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

@@ -2,6 +2,7 @@ export * from "./useBodyScrollLock";
 export * from "./useBreakpoint";
 export * from "./useButton";
 export * from "./useDialog";
+export * from "./useDialogPolyfill";
 export * from "./useLabel";
 export * from "./useOnClickOutside";
 export * from "./useTextField";

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

@@ -1,2 +1,4 @@
 import { MutableRefObject } from "react";
-export declare const useDialogPolyfill: (ref: MutableRefObject<HTMLDialogElement | null>) => void;
+export declare const useDialogPolyfill: () => {
+    polyfillDialog: (ref: MutableRefObject<HTMLDialogElement | null>) => Promise<void>;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "4.6.0",
+  "version": "4.6.3",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -82,7 +82,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.8",
-    "@simplybusiness/icons": "^4.3.0",
+    "@simplybusiness/icons": "^4.3.1",
     "classnames": "^2.5.1",
     "dialog-polyfill": "^0.5.6",
     "lodash.debounce": "^4.0.8",

package/src/components/Alert/Alert.tsx

@@ -1,6 +1,6 @@
 import { Ref, forwardRef, RefAttributes, ReactNode } from "react";
 import classNames from "classnames/dedupe";
-import { info, success, warning, error } from "@simplybusiness/icons";
+import { circleInfo, circleTick, warning, error } from "@simplybusiness/icons";
 import { DOMProps } from "../../types/dom";
 import { ForwardedRefComponent } from "../../types/components";
 import { Icon } from "../Icon";
@@ -45,8 +45,8 @@ const Alert: ForwardedRefComponent<AlertProps, AlertElementType> = forwardRef(
       otherProps.className,
     );
     const icon = {
-      info,
-      success,
+      info: circleInfo,
+      success: circleTick,
       warning,
       error,
     };

package/src/components/Button/Button.mdx

@@ -42,9 +42,13 @@ import { Button } from "@simplybusiness/mobius";
 
 <Canvas of={ButtonStories.Large} />
 
-## Link
+## As Link Element
 
-<Canvas of={ButtonStories.Link} />
+<Canvas of={ButtonStories.AsLinkElement} />
+
+## With Link Styles
+
+<Canvas of={ButtonStories.WithLinkStyles} />
 
 ## Loading
 

package/src/components/Drawer/Drawer.test.tsx

@@ -25,13 +25,15 @@ describe("Drawer", () => {
     expect(container).toBeTruthy();
   });
 
-  it("should render with default class names", () => {
+  it("should render with default class names", async () => {
     render(
       <Drawer isOpen direction="right">
         <Drawer.Header />
       </Drawer>,
     );
 
+    await waitFor(() => screen.getByRole("dialog"));
+
     const dialog = screen.getByRole("dialog");
     const closeButton = screen.getByLabelText("Close");
 
@@ -39,13 +41,15 @@ describe("Drawer", () => {
     expect(closeButton).toHaveClass(DRAWER_CLOSE_CLASS_NAME);
   });
 
-  it("should render with custom class name", () => {
+  it("should render with custom class name", async () => {
     render(
       <Drawer direction="right" className={DRAWER_TEST_CLASS_NAME} isOpen>
         <Drawer.Header />
       </Drawer>,
     );
 
+    await waitFor(() => screen.getByRole("dialog"));
+
     const dialog = screen.getByRole("dialog");
     const closeButton = screen.getByLabelText("Close");
 
@@ -55,17 +59,23 @@ describe("Drawer", () => {
   });
 
   describe("given the direction prop is set", () => {
-    it("should render with appropriate class name (right)", () => {
+    it("should render with appropriate class name (right)", async () => {
       render(<Drawer isOpen direction="right" />);
 
+      await waitFor(() => screen.getByRole("dialog"));
+
       const dialog = screen.getByRole("dialog");
+
       expect(dialog).toHaveClass("--right");
     });
 
-    it("should render with appropriate class name (bottom)", () => {
+    it("should render with appropriate class name (bottom)", async () => {
       render(<Drawer isOpen direction="bottom" />);
 
+      await waitFor(() => screen.getByRole("dialog"));
+
       const dialog = screen.getByRole("dialog");
+
       expect(dialog).toHaveClass("--bottom");
     });
   });
@@ -105,6 +115,8 @@ describe("Drawer", () => {
 
       render(<App />);
 
+      await waitFor(() => screen.getByRole("dialog"));
+
       const dialog = screen.getByRole("dialog");
       const drawerContent = screen.getByText("Sample content");
 

package/src/components/Modal/Modal.test.tsx

@@ -25,13 +25,15 @@ describe("Modal", () => {
     expect(container).toBeTruthy();
   });
 
-  it("should render with default class names", () => {
+  it("should render with default class names", async () => {
     render(
       <Modal isOpen>
         <Modal.Header />
       </Modal>,
     );
 
+    await waitFor(() => screen.getByRole("dialog"));
+
     const dialog = screen.getByRole("dialog");
     const closeButton = screen.getByLabelText("Close");
 
@@ -39,13 +41,15 @@ describe("Modal", () => {
     expect(closeButton).toHaveClass(MODAL_CLOSE_CLASS_NAME);
   });
 
-  it("should render with custom class name", () => {
+  it("should render with custom class name", async () => {
     render(
       <Modal className={MODAL_TEST_CLASS_NAME} isOpen>
         <Modal.Header />
       </Modal>,
     );
 
+    await waitFor(() => screen.getByRole("dialog"));
+
     const dialog = screen.getByRole("dialog");
     const closeButton = screen.getByLabelText("Close");
 
@@ -55,18 +59,22 @@ describe("Modal", () => {
   });
 
   describe("given the animation prop is set to slideUp", () => {
-    it("should render with appropriate class name", () => {
+    it("should render with appropriate class name", async () => {
       render(<Modal isOpen animation="slideUp" />);
 
+      await waitFor(() => screen.getByRole("dialog"));
+
       const dialog = screen.getByRole("dialog");
       expect(dialog).toHaveClass("--slide-up");
     });
   });
 
   describe("given the animation prop is set to fade", () => {
-    it("should render with appropriate class name", () => {
+    it("should render with appropriate class name", async () => {
       render(<Modal isOpen animation="fade" />);
 
+      await waitFor(() => screen.getByRole("dialog"));
+
       const dialog = screen.getByRole("dialog");
       expect(dialog).toHaveClass("--fade");
     });
@@ -87,6 +95,8 @@ describe("Modal", () => {
 
       render(<App />);
 
+      await waitFor(() => screen.getByRole("dialog"));
+
       const dialog = screen.getByRole("dialog");
       const drawerContent = screen.getByText("Sample content");
 

package/src/components/Popover/Popover.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Ref, forwardRef } from "react";
-import { Button, Flex, Popover, PopoverProps } from "..";
+import { circleQuestion } from "@simplybusiness/icons";
+import { Button, Flex, Popover, PopoverProps, Icon } from "..";
 import { excludeControls } from "../../utils";
 
 type StoryType = StoryObj<typeof Popover>;
@@ -21,44 +21,6 @@ const meta: Meta<typeof Popover> = {
   ],
 };
 
-type QuestionIconProps = {};
-
-const QuestionIcon = forwardRef(
-  (props: QuestionIconProps, ref: Ref<SVGSVGElement>) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      width="16px"
-      height="16px"
-      ref={ref}
-      {...props}
-    >
-      <g clipPath="url(#clip0_1641_88567)">
-        <path
-          d="M6.25 6.25002C6.25017 5.36011 6.91818 4.61203 7.80241 4.51155C8.68663 4.41107 9.50546 4.99019 9.7053 5.85737C9.90515 6.72456 9.42235 7.60364 8.58333 7.90027C8.23357 8.02393 7.99981 8.35471 8 8.72569V9.31253"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M8 11.0625C7.87919 11.0625 7.78125 11.1604 7.78125 11.2812C7.78125 11.4021 7.87919 11.5 8 11.5C8.12081 11.5 8.21875 11.4021 8.21875 11.2812C8.21875 11.1604 8.12081 11.0625 8 11.0625V11.0625"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <circle cx="8" cy="8" r="6.5625" stroke="currentColor" />
-      </g>
-      <defs>
-        <clipPath id="clip0_1641_88567">
-          <rect width="16" height="16" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  ),
-);
-
 export const Normal: StoryType = {
   render: (args: PopoverProps) => <Popover {...args} />,
   args: {
@@ -75,7 +37,7 @@ export const CustomTrigger: StoryType = {
           <Button variant="ghost">
             <Flex>
               <span>Occurrence Limit</span>
-              <QuestionIcon />
+              <Icon icon={circleQuestion} />
             </Flex>
           </Button>
         }

package/src/components/Popover/Popover.tsx

@@ -135,7 +135,12 @@ export const Popover = (props: PopoverProps) => {
             </header>
             <div className="mobius/PopoverBody">{children}</div>
           </div>
-          <FloatingArrow ref={arrowRef} context={context} width={20} />
+          <FloatingArrow
+            ref={arrowRef}
+            context={context}
+            width={20}
+            className="mobius/PopoverArrowIcon"
+          />
         </div>
       )}
     </>

package/src/hooks/index.tsx

@@ -2,6 +2,7 @@ export * from "./useBodyScrollLock";
 export * from "./useBreakpoint";
 export * from "./useButton";
 export * from "./useDialog";
+export * from "./useDialogPolyfill";
 export * from "./useLabel";
 export * from "./useOnClickOutside";
 export * from "./useTextField";

package/src/hooks/useDialog/useDialog.ts

@@ -27,6 +27,7 @@ const FALLBACK_TRANSITION_DURATION = 0;
 export const useDialog = (props: useDialogProps) => {
   const { ref, isOpen, transition, onOpen, onClose } = props;
   const shouldTransition = supportsDialog() && transition.isEnabled;
+  const { polyfillDialog } = useDialogPolyfill();
 
   // Read CSS variable value as number
   const TRANSITION_DURATION_IN_MS =
@@ -38,7 +39,6 @@ export const useDialog = (props: useDialogProps) => {
       )) ||
     FALLBACK_TRANSITION_DURATION;
 
-  useDialogPolyfill(ref);
   useBodyScrollLock({ enabled: isOpen });
 
   const open = useCallback(() => {
@@ -77,6 +77,8 @@ export const useDialog = (props: useDialogProps) => {
   useEffect(() => {
     async function toggleDialog() {
       if (isOpen && !ref.current?.open) {
+        await polyfillDialog(ref);
+
         open();
         // Fix opening transition in Safari being skipped
         // by wrapping with setTimeout
@@ -89,7 +91,7 @@ export const useDialog = (props: useDialogProps) => {
     }
 
     toggleDialog();
-  }, [handleClose, isOpen, open, ref]);
+  }, [handleClose, isOpen, open, ref, polyfillDialog]);
 
   return {
     open,

package/src/hooks/useDialogPolyfill/useDialogPolyfill.ts

@@ -1,32 +1,32 @@
-import { MutableRefObject, useEffect } from "react";
+import { MutableRefObject, useRef } from "react";
 import { supportsDialog } from "../../utils";
 
 // Add polyfill for HTML Dialog in old browsers
-export const useDialogPolyfill = (
-  ref: MutableRefObject<HTMLDialogElement | null>,
-) => {
+export const useDialogPolyfill = () => {
   const hasDialogSupport = supportsDialog();
+  const hasAlreadyLoaded = useRef(false);
 
-  useEffect(() => {
-    async function polyfillDialog() {
-      if (
-        !hasDialogSupport &&
-        typeof window !== "undefined" &&
-        ref.current !== null
-      ) {
-        const { default: dialogPolyfill } = await import("dialog-polyfill");
+  const polyfillDialog = async (
+    ref: MutableRefObject<HTMLDialogElement | null>,
+  ) => {
+    if (
+      !hasAlreadyLoaded.current &&
+      !hasDialogSupport &&
+      typeof window !== "undefined" &&
+      ref.current !== null
+    ) {
+      const { default: dialogPolyfill } = await import("dialog-polyfill");
+      hasAlreadyLoaded.current = true;
 
-        try {
-          dialogPolyfill.registerDialog(ref.current);
-        } catch (error) {
-          // In iOS 15 <= 15.2 this intermittently fails with
-          // TypeError: null is not an object (evaluating 'element.showModal')
-          // Checking showModal presence through hasOwnProperty is falsy natively, truthy with polyfill 🤷🏼‍♂️
-          console.error("Failed to load dialog-polyfill", error);
-        }
+      try {
+        dialogPolyfill.registerDialog(ref.current);
+      } catch (error) {
+        console.error("Failed to load dialog-polyfill", error);
       }
     }
+  };
 
-    polyfillDialog();
-  }, [ref, hasDialogSupport]);
+  return {
+    polyfillDialog,
+  };
 };