@transferwise/components 46.50.1 → 46.51.0

package/build/dimmer/Dimmer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dimmer.js","sources":["../../src/dimmer/Dimmer.tsx"],"sourcesContent":["import { ThemeProvider, useTheme } from '@wise/components-theming';\nimport classNames from 'classnames';\nimport { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  addNoScrollClass,\n  CommonProps,\n  PositionBottom,\n  PositionCenter,\n  PositionTop,\n  removeNoScrollClass,\n} from '../common';\nimport { isIosDevice } from '../common/deviceDetection';\nimport FocusBoundary from '../common/focusBoundary';\nimport withNextPortal from '../withNextPortal/withNextPortal';\n\nimport DimmerManager from './dimmerManager';\n\nexport const EXIT_ANIMATION = 350;\n\nconst dimmerManager = new DimmerManager();\n\nexport type DimmerProps = CommonProps & {\n  children?: ReactNode;\n  disableClickToClose?: boolean;\n  contentPosition?: PositionTop | PositionCenter | PositionBottom;\n  fadeContentOnEnter?: boolean;\n  fadeContentOnExit?: boolean;\n  open?: boolean;\n  scrollable?: boolean;\n  transparent?: boolean;\n  onClose?: (event: KeyboardEvent | MouseEvent) => void;\n};\n\nexport const handleTouchMove = (event: Event) => {\n  const isTouchedElementDimmer = (event.target as HTMLDivElement).classList.contains('dimmer');\n\n  // disable scroll on iOS devices for Dimmer area\n  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908\n  // note: scrolling still works for children(s) as expected\n  if (isIosDevice() && isTouchedElementDimmer) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n};\n\nconst Dimmer = ({\n  children,\n  className,\n  disableClickToClose = false,\n  contentPosition,\n  fadeContentOnEnter = false,\n  fadeContentOnExit = false,\n  open = false,\n  scrollable = false,\n  transparent = false,\n  onClose,\n}: DimmerProps) => {\n  const [hasNotExited, setHasNotExited] = useState(false);\n  const dimmerReference = useRef<HTMLDivElement>(null);\n\n  const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === dimmerReference.current) {\n      onClose?.(event);\n    }\n  };\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disableClickToClose || !onClose) {\n      return;\n    }\n\n    closeOnClick(event);\n  };\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return;\n      }\n      event.stopPropagation();\n\n      if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {\n        onClose(event);\n      }\n    },\n    [onClose],\n  );\n\n  const onEnter = () => {\n    setHasNotExited(true);\n\n    if (dimmerReference.current) {\n      dimmerManager.add(dimmerReference.current);\n    }\n  };\n  const onExited = () => {\n    setHasNotExited(false);\n\n    if (dimmerReference.current) {\n      dimmerManager.remove(dimmerReference.current);\n    }\n  };\n\n  useEffect(() => {\n    const localReferenceCopy = dimmerReference.current;\n\n    if (open) {\n      document.addEventListener('keydown', handleKeyDown);\n      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, { passive: true });\n    }\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n\n      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [handleKeyDown, open]);\n\n  return (\n    <DimmerWrapper open={open} hasNotExited={hasNotExited}>\n      <CSSTransition\n        nodeRef={dimmerReference}\n        in={open}\n        appear\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames={{\n          enter: classNames({ 'dimmer--enter-fade': fadeContentOnEnter }),\n          enterDone: classNames('dimmer--enter-done', {\n            'dimmer--enter-fade': fadeContentOnEnter,\n          }),\n          exit: classNames('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),\n        }}\n        unmountOnExit\n        onEnter={onEnter}\n        onExited={onExited}\n      >\n        <DimmerContentWrapper scrollBody={!transparent}>\n          <FocusBoundary>\n            <div\n              ref={dimmerReference}\n              className={classNames(\n                'dimmer',\n                { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },\n                className,\n              )}\n              role=\"presentation\"\n              onClick={handleClick}\n            >\n              <div\n                className={classNames(\n                  'dimmer-content-positioner',\n                  contentPosition != null && [\n                    'd-flex justify-content-center',\n                    {\n                      'align-items-start': contentPosition === 'top',\n                      'align-items-center': contentPosition === 'center',\n                      'align-items-end': contentPosition === 'bottom',\n                    },\n                  ],\n                )}\n              >\n                {children}\n              </div>\n            </div>\n          </FocusBoundary>\n        </DimmerContentWrapper>\n      </CSSTransition>\n    </DimmerWrapper>\n  );\n};\n\nconst DimmerWrapper: React.ComponentType<{\n  open: boolean;\n  hasNotExited: boolean;\n  children: React.ReactNode;\n}> = ({ open, hasNotExited, children }) => {\n  const { screenMode, theme } = useTheme();\n\n  return open || hasNotExited ? (\n    <ThemeProvider\n      theme=\"personal\"\n      screenMode={theme === 'personal' ? screenMode : 'light'}\n      isNotRootProvider\n    >\n      {children}\n    </ThemeProvider>\n  ) : (\n    <>{children}</>\n  );\n};\n\nexport const DimmerContentWrapper = ({\n  children,\n  scrollBody,\n}: {\n  children: React.ReactElement;\n  scrollBody: boolean;\n}) => {\n  useEffect(() => {\n    if (scrollBody) {\n      addNoScrollClass();\n    }\n\n    return () => {\n      if (scrollBody) {\n        removeNoScrollClass();\n      }\n    };\n  }, [scrollBody]);\n\n  return children;\n};\n\n// Export without the Portal for tests only\nexport { Dimmer };\n\nexport default withNextPortal(Dimmer);\n"],"names":["EXIT_ANIMATION","dimmerManager","DimmerManager","handleTouchMove","event","isTouchedElementDimmer","target","classList","contains","isIosDevice","stopPropagation","preventDefault","Dimmer","children","className","disableClickToClose","contentPosition","fadeContentOnEnter","fadeContentOnExit","open","scrollable","transparent","onClose","hasNotExited","setHasNotExited","useState","dimmerReference","useRef","closeOnClick","current","handleClick","handleKeyDown","useCallback","key","isTop","onEnter","add","onExited","remove","useEffect","localReferenceCopy","document","addEventListener","passive","removeEventListener","_jsx","DimmerWrapper","CSSTransition","nodeRef","in","appear","timeout","enter","exit","classNames","enterDone","unmountOnExit","DimmerContentWrapper","scrollBody","FocusBoundary","ref","role","onClick","screenMode","theme","useTheme","ThemeProvider","isNotRootProvider","_Fragment","addNoScrollClass","removeNoScrollClass","withNextPortal"],"mappings":"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"}
+{"version":3,"file":"Dimmer.js","sources":["../../src/dimmer/Dimmer.tsx"],"sourcesContent":["import { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  addNoScrollClass,\n  CommonProps,\n  PositionBottom,\n  PositionCenter,\n  PositionTop,\n  removeNoScrollClass,\n} from '../common';\nimport { isIosDevice } from '../common/deviceDetection';\nimport FocusBoundary from '../common/focusBoundary';\nimport withNextPortal from '../withNextPortal/withNextPortal';\n\nimport DimmerManager from './dimmerManager';\n\nexport const EXIT_ANIMATION = 350;\n\nconst dimmerManager = new DimmerManager();\n\nexport type DimmerProps = CommonProps & {\n  children?: ReactNode;\n  disableClickToClose?: boolean;\n  contentPosition?: PositionTop | PositionCenter | PositionBottom;\n  fadeContentOnEnter?: boolean;\n  fadeContentOnExit?: boolean;\n  open?: boolean;\n  scrollable?: boolean;\n  transparent?: boolean;\n  onClose?: (event: KeyboardEvent | MouseEvent) => void;\n};\n\nexport const handleTouchMove = (event: Event) => {\n  const isTouchedElementDimmer = (event.target as HTMLDivElement).classList.contains('dimmer');\n\n  // disable scroll on iOS devices for Dimmer area\n  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908\n  // note: scrolling still works for children(s) as expected\n  if (isIosDevice() && isTouchedElementDimmer) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n};\n\nconst Dimmer = ({\n  children,\n  className,\n  disableClickToClose = false,\n  contentPosition,\n  fadeContentOnEnter = false,\n  fadeContentOnExit = false,\n  open = false,\n  scrollable = false,\n  transparent = false,\n  onClose,\n}: DimmerProps) => {\n  const [hasNotExited, setHasNotExited] = useState(false);\n  const dimmerReference = useRef<HTMLDivElement>(null);\n\n  const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === dimmerReference.current) {\n      onClose?.(event);\n    }\n  };\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disableClickToClose || !onClose) {\n      return;\n    }\n\n    closeOnClick(event);\n  };\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return;\n      }\n      event.stopPropagation();\n\n      if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {\n        onClose(event);\n      }\n    },\n    [onClose],\n  );\n\n  const onEnter = () => {\n    setHasNotExited(true);\n\n    if (dimmerReference.current) {\n      dimmerManager.add(dimmerReference.current);\n    }\n  };\n  const onExited = () => {\n    setHasNotExited(false);\n\n    if (dimmerReference.current) {\n      dimmerManager.remove(dimmerReference.current);\n    }\n  };\n\n  useEffect(() => {\n    const localReferenceCopy = dimmerReference.current;\n\n    if (open) {\n      document.addEventListener('keydown', handleKeyDown);\n      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, { passive: true });\n    }\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n\n      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [handleKeyDown, open]);\n\n  return (\n    <DimmerWrapper open={open} hasNotExited={hasNotExited}>\n      <CSSTransition\n        nodeRef={dimmerReference}\n        in={open}\n        appear\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames={{\n          enter: clsx({ 'dimmer--enter-fade': fadeContentOnEnter }),\n          enterDone: clsx('dimmer--enter-done', {\n            'dimmer--enter-fade': fadeContentOnEnter,\n          }),\n          exit: clsx('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),\n        }}\n        unmountOnExit\n        onEnter={onEnter}\n        onExited={onExited}\n      >\n        <DimmerContentWrapper scrollBody={!transparent}>\n          <FocusBoundary>\n            <div\n              ref={dimmerReference}\n              className={clsx(\n                'dimmer',\n                { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },\n                className,\n              )}\n              role=\"presentation\"\n              onClick={handleClick}\n            >\n              <div\n                className={clsx(\n                  'dimmer-content-positioner',\n                  contentPosition != null && [\n                    'd-flex justify-content-center',\n                    {\n                      'align-items-start': contentPosition === 'top',\n                      'align-items-center': contentPosition === 'center',\n                      'align-items-end': contentPosition === 'bottom',\n                    },\n                  ],\n                )}\n              >\n                {children}\n              </div>\n            </div>\n          </FocusBoundary>\n        </DimmerContentWrapper>\n      </CSSTransition>\n    </DimmerWrapper>\n  );\n};\n\nconst DimmerWrapper: React.ComponentType<{\n  open: boolean;\n  hasNotExited: boolean;\n  children: React.ReactNode;\n}> = ({ open, hasNotExited, children }) => {\n  const { screenMode, theme } = useTheme();\n\n  return open || hasNotExited ? (\n    <ThemeProvider\n      theme=\"personal\"\n      screenMode={theme === 'personal' ? screenMode : 'light'}\n      isNotRootProvider\n    >\n      {children}\n    </ThemeProvider>\n  ) : (\n    <>{children}</>\n  );\n};\n\nexport const DimmerContentWrapper = ({\n  children,\n  scrollBody,\n}: {\n  children: React.ReactElement;\n  scrollBody: boolean;\n}) => {\n  useEffect(() => {\n    if (scrollBody) {\n      addNoScrollClass();\n    }\n\n    return () => {\n      if (scrollBody) {\n        removeNoScrollClass();\n      }\n    };\n  }, [scrollBody]);\n\n  return children;\n};\n\n// Export without the Portal for tests only\nexport { Dimmer };\n\nexport default withNextPortal(Dimmer);\n"],"names":["EXIT_ANIMATION","dimmerManager","DimmerManager","handleTouchMove","event","isTouchedElementDimmer","target","classList","contains","isIosDevice","stopPropagation","preventDefault","Dimmer","children","className","disableClickToClose","contentPosition","fadeContentOnEnter","fadeContentOnExit","open","scrollable","transparent","onClose","hasNotExited","setHasNotExited","useState","dimmerReference","useRef","closeOnClick","current","handleClick","handleKeyDown","useCallback","key","isTop","onEnter","add","onExited","remove","useEffect","localReferenceCopy","document","addEventListener","passive","removeEventListener","_jsx","DimmerWrapper","CSSTransition","nodeRef","in","appear","timeout","enter","exit","classNames","clsx","enterDone","unmountOnExit","DimmerContentWrapper","scrollBody","FocusBoundary","ref","role","onClick","screenMode","theme","useTheme","ThemeProvider","isNotRootProvider","_Fragment","addNoScrollClass","removeNoScrollClass","withNextPortal"],"mappings":";;;;;;;;;;;;;;;AAmBO,MAAMA,cAAc,GAAG,IAAG;AAEjC,MAAMC,aAAa,GAAG,IAAIC,aAAa,EAAE,CAAA;AAc5BC,MAAAA,eAAe,GAAIC,KAAY,IAAI;EAC9C,MAAMC,sBAAsB,GAAID,KAAK,CAACE,MAAyB,CAACC,SAAS,CAACC,QAAQ,CAAC,QAAQ,CAAC,CAAA;AAE5F;AACA;AACA;AACA,EAAA,IAAIC,2BAAW,EAAE,IAAIJ,sBAAsB,EAAE;IAC3CD,KAAK,CAACM,eAAe,EAAE,CAAA;IACvBN,KAAK,CAACO,cAAc,EAAE,CAAA;AACxB,GAAA;AACF,EAAC;AAEKC,MAAAA,MAAM,GAAGA,CAAC;EACdC,QAAQ;EACRC,SAAS;AACTC,EAAAA,mBAAmB,GAAG,KAAK;EAC3BC,eAAe;AACfC,EAAAA,kBAAkB,GAAG,KAAK;AAC1BC,EAAAA,iBAAiB,GAAG,KAAK;AACzBC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,WAAW,GAAG,KAAK;AACnBC,EAAAA,OAAAA;AAAO,CACK,KAAI;EAChB,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAA;AACvD,EAAA,MAAMC,eAAe,GAAGC,YAAM,CAAiB,IAAI,CAAC,CAAA;EAEpD,MAAMC,YAAY,GAAIxB,KAAiC,IAAI;AACzD,IAAA,IAAIA,KAAK,CAACE,MAAM,KAAKoB,eAAe,CAACG,OAAO,EAAE;MAC5CP,OAAO,GAAGlB,KAAK,CAAC,CAAA;AAClB,KAAA;GACD,CAAA;EAED,MAAM0B,WAAW,GAAI1B,KAAiC,IAAI;AACxD,IAAA,IAAIW,mBAAmB,IAAI,CAACO,OAAO,EAAE;AACnC,MAAA,OAAA;AACF,KAAA;IAEAM,YAAY,CAACxB,KAAK,CAAC,CAAA;GACpB,CAAA;AAED,EAAA,MAAM2B,aAAa,GAAGC,iBAAW,CAC9B5B,KAAoB,IAAI;AACvB,IAAA,IAAIA,KAAK,CAAC6B,GAAG,KAAK,QAAQ,EAAE;AAC1B,MAAA,OAAA;AACF,KAAA;IACA7B,KAAK,CAACM,eAAe,EAAE,CAAA;AAEvB,IAAA,IAAIY,OAAO,IAAII,eAAe,CAACG,OAAO,IAAI5B,aAAa,CAACiC,KAAK,CAACR,eAAe,CAACG,OAAO,CAAC,EAAE;MACtFP,OAAO,CAAClB,KAAK,CAAC,CAAA;AAChB,KAAA;AACF,GAAC,EACD,CAACkB,OAAO,CAAC,CACV,CAAA;EAED,MAAMa,OAAO,GAAGA,MAAK;IACnBX,eAAe,CAAC,IAAI,CAAC,CAAA;IAErB,IAAIE,eAAe,CAACG,OAAO,EAAE;AAC3B5B,MAAAA,aAAa,CAACmC,GAAG,CAACV,eAAe,CAACG,OAAO,CAAC,CAAA;AAC5C,KAAA;GACD,CAAA;EACD,MAAMQ,QAAQ,GAAGA,MAAK;IACpBb,eAAe,CAAC,KAAK,CAAC,CAAA;IAEtB,IAAIE,eAAe,CAACG,OAAO,EAAE;AAC3B5B,MAAAA,aAAa,CAACqC,MAAM,CAACZ,eAAe,CAACG,OAAO,CAAC,CAAA;AAC/C,KAAA;GACD,CAAA;AAEDU,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,MAAMC,kBAAkB,GAAGd,eAAe,CAACG,OAAO,CAAA;AAElD,IAAA,IAAIV,IAAI,EAAE;AACRsB,MAAAA,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEX,aAAa,CAAC,CAAA;AACnDS,MAAAA,kBAAkB,EAAEE,gBAAgB,CAAC,WAAW,EAAEvC,eAAe,EAAE;AAAEwC,QAAAA,OAAO,EAAE,IAAA;AAAI,OAAE,CAAC,CAAA;AACvF,KAAA;AACA,IAAA,OAAO,MAAK;AACVF,MAAAA,QAAQ,CAACG,mBAAmB,CAAC,SAAS,EAAEb,aAAa,CAAC,CAAA;AAEtDS,MAAAA,kBAAkB,EAAEI,mBAAmB,CAAC,WAAW,EAAEzC,eAAe,CAAC,CAAA;KACtE,CAAA;AACH,GAAC,EAAE,CAAC4B,aAAa,EAAEZ,IAAI,CAAC,CAAC,CAAA;EAEzB,oBACE0B,cAAA,CAACC,aAAa,EAAA;AAAC3B,IAAAA,IAAI,EAAEA,IAAK;AAACI,IAAAA,YAAY,EAAEA,YAAa;IAAAV,QAAA,eACpDgC,cAAA,CAACE,kCAAa,EAAA;AACZC,MAAAA,OAAO,EAAEtB,eAAgB;AACzBuB,MAAAA,EAAE,EAAE9B,IAAK;MACT+B,MAAM,EAAA,IAAA;AACN;AAAA;AACAC,MAAAA,OAAO,EAAE;AAAEC,QAAAA,KAAK,EAAE,CAAC;AAAEC,QAAAA,IAAI,EAAErD,cAAAA;OAAiB;AAC5CsD,MAAAA,UAAU,EAAE;QACVF,KAAK,EAAEG,SAAI,CAAC;AAAE,UAAA,oBAAoB,EAAEtC,kBAAAA;SAAoB,CAAC;AACzDuC,QAAAA,SAAS,EAAED,SAAI,CAAC,oBAAoB,EAAE;AACpC,UAAA,oBAAoB,EAAEtC,kBAAAA;SACvB,CAAC;AACFoC,QAAAA,IAAI,EAAEE,SAAI,CAAC,cAAc,EAAE;AAAE,UAAA,mBAAmB,EAAErC,iBAAAA;SAAmB,CAAA;OACrE;MACFuC,aAAa,EAAA,IAAA;AACbtB,MAAAA,OAAO,EAAEA,OAAQ;AACjBE,MAAAA,QAAQ,EAAEA,QAAS;MAAAxB,QAAA,eAEnBgC,cAAA,CAACa,oBAAoB,EAAA;QAACC,UAAU,EAAE,CAACtC,WAAY;QAAAR,QAAA,eAC7CgC,cAAA,CAACe,aAAa,EAAA;AAAA/C,UAAAA,QAAA,eACZgC,cAAA,CAAA,KAAA,EAAA;AACEgB,YAAAA,GAAG,EAAEnC,eAAgB;AACrBZ,YAAAA,SAAS,EAAEyC,SAAI,CACb,QAAQ,EACR;AAAE,cAAA,oBAAoB,EAAEnC,UAAU;AAAE,cAAA,qBAAqB,EAAEC,WAAAA;aAAa,EACxEP,SAAS,CACT;AACFgD,YAAAA,IAAI,EAAC,cAAc;AACnBC,YAAAA,OAAO,EAAEjC,WAAY;AAAAjB,YAAAA,QAAA,eAErBgC,cAAA,CAAA,KAAA,EAAA;cACE/B,SAAS,EAAEyC,SAAI,CACb,2BAA2B,EAC3BvC,eAAe,IAAI,IAAI,IAAI,CACzB,+BAA+B,EAC/B;gBACE,mBAAmB,EAAEA,eAAe,KAAK,KAAK;gBAC9C,oBAAoB,EAAEA,eAAe,KAAK,QAAQ;gBAClD,iBAAiB,EAAEA,eAAe,KAAK,QAAA;AACxC,eAAA,CACF,CACD;AAAAH,cAAAA,QAAA,EAEDA,QAAAA;aACE,CAAA;WACF,CAAA;SACQ,CAAA;OACK,CAAA;KACT,CAAA;AACjB,GAAe,CAAC,CAAA;AAEpB,EAAC;AAED,MAAMiC,aAAa,GAIdA,CAAC;EAAE3B,IAAI;EAAEI,YAAY;AAAEV,EAAAA,QAAAA;AAAU,CAAA,KAAI;EACxC,MAAM;IAAEmD,UAAU;AAAEC,IAAAA,KAAAA;GAAO,GAAGC,0BAAQ,EAAE,CAAA;AAExC,EAAA,OAAO/C,IAAI,IAAII,YAAY,gBACzBsB,cAAA,CAACsB,+BAAa,EAAA;AACZF,IAAAA,KAAK,EAAC,UAAU;AAChBD,IAAAA,UAAU,EAAEC,KAAK,KAAK,UAAU,GAAGD,UAAU,GAAG,OAAQ;IACxDI,iBAAiB,EAAA,IAAA;AAAAvD,IAAAA,QAAA,EAEhBA,QAAAA;AAAQ,GACI,CAAC,gBAEhBgC,cAAA,CAAAwB,mBAAA,EAAA;AAAAxD,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAC,CACb,CAAA;AACH,CAAC,CAAA;AAEM,MAAM6C,oBAAoB,GAAGA,CAAC;EACnC7C,QAAQ;AACR8C,EAAAA,UAAAA;AAID,CAAA,KAAI;AACHpB,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIoB,UAAU,EAAE;AACdW,MAAAA,8BAAgB,EAAE,CAAA;AACpB,KAAA;AAEA,IAAA,OAAO,MAAK;AACV,MAAA,IAAIX,UAAU,EAAE;AACdY,QAAAA,iCAAmB,EAAE,CAAA;AACvB,OAAA;KACD,CAAA;AACH,GAAC,EAAE,CAACZ,UAAU,CAAC,CAAC,CAAA;AAEhB,EAAA,OAAO9C,QAAQ,CAAA;AACjB,EAAC;AAKD,eAAe2D,cAAc,CAAC5D,MAAM,CAAC;;;;;;;;"}

package/build/dimmer/Dimmer.mjs

@@ -1,5 +1,5 @@
 import { useTheme, ThemeProvider } from '@wise/components-theming';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { isIosDevice } from '../common/deviceDetection/deviceDetection.mjs';
@@ -94,13 +94,13 @@ const Dimmer = ({
         exit: EXIT_ANIMATION
       },
       classNames: {
-        enter: classNames({
+        enter: clsx({
           'dimmer--enter-fade': fadeContentOnEnter
         }),
-        enterDone: classNames('dimmer--enter-done', {
+        enterDone: clsx('dimmer--enter-done', {
           'dimmer--enter-fade': fadeContentOnEnter
         }),
-        exit: classNames('dimmer--exit', {
+        exit: clsx('dimmer--exit', {
           'dimmer--exit-fade': fadeContentOnExit
         })
       },
@@ -112,14 +112,14 @@ const Dimmer = ({
         children: /*#__PURE__*/jsx(FocusBoundary, {
           children: /*#__PURE__*/jsx("div", {
             ref: dimmerReference,
-            className: classNames('dimmer', {
+            className: clsx('dimmer', {
               'dimmer--scrollable': scrollable,
               'dimmer--transparent': transparent
             }, className),
             role: "presentation",
             onClick: handleClick,
             children: /*#__PURE__*/jsx("div", {
-              className: classNames('dimmer-content-positioner', contentPosition != null && ['d-flex justify-content-center', {
+              className: clsx('dimmer-content-positioner', contentPosition != null && ['d-flex justify-content-center', {
                 'align-items-start': contentPosition === 'top',
                 'align-items-center': contentPosition === 'center',
                 'align-items-end': contentPosition === 'bottom'

package/build/dimmer/Dimmer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dimmer.mjs","sources":["../../src/dimmer/Dimmer.tsx"],"sourcesContent":["import { ThemeProvider, useTheme } from '@wise/components-theming';\nimport classNames from 'classnames';\nimport { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  addNoScrollClass,\n  CommonProps,\n  PositionBottom,\n  PositionCenter,\n  PositionTop,\n  removeNoScrollClass,\n} from '../common';\nimport { isIosDevice } from '../common/deviceDetection';\nimport FocusBoundary from '../common/focusBoundary';\nimport withNextPortal from '../withNextPortal/withNextPortal';\n\nimport DimmerManager from './dimmerManager';\n\nexport const EXIT_ANIMATION = 350;\n\nconst dimmerManager = new DimmerManager();\n\nexport type DimmerProps = CommonProps & {\n  children?: ReactNode;\n  disableClickToClose?: boolean;\n  contentPosition?: PositionTop | PositionCenter | PositionBottom;\n  fadeContentOnEnter?: boolean;\n  fadeContentOnExit?: boolean;\n  open?: boolean;\n  scrollable?: boolean;\n  transparent?: boolean;\n  onClose?: (event: KeyboardEvent | MouseEvent) => void;\n};\n\nexport const handleTouchMove = (event: Event) => {\n  const isTouchedElementDimmer = (event.target as HTMLDivElement).classList.contains('dimmer');\n\n  // disable scroll on iOS devices for Dimmer area\n  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908\n  // note: scrolling still works for children(s) as expected\n  if (isIosDevice() && isTouchedElementDimmer) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n};\n\nconst Dimmer = ({\n  children,\n  className,\n  disableClickToClose = false,\n  contentPosition,\n  fadeContentOnEnter = false,\n  fadeContentOnExit = false,\n  open = false,\n  scrollable = false,\n  transparent = false,\n  onClose,\n}: DimmerProps) => {\n  const [hasNotExited, setHasNotExited] = useState(false);\n  const dimmerReference = useRef<HTMLDivElement>(null);\n\n  const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === dimmerReference.current) {\n      onClose?.(event);\n    }\n  };\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disableClickToClose || !onClose) {\n      return;\n    }\n\n    closeOnClick(event);\n  };\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return;\n      }\n      event.stopPropagation();\n\n      if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {\n        onClose(event);\n      }\n    },\n    [onClose],\n  );\n\n  const onEnter = () => {\n    setHasNotExited(true);\n\n    if (dimmerReference.current) {\n      dimmerManager.add(dimmerReference.current);\n    }\n  };\n  const onExited = () => {\n    setHasNotExited(false);\n\n    if (dimmerReference.current) {\n      dimmerManager.remove(dimmerReference.current);\n    }\n  };\n\n  useEffect(() => {\n    const localReferenceCopy = dimmerReference.current;\n\n    if (open) {\n      document.addEventListener('keydown', handleKeyDown);\n      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, { passive: true });\n    }\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n\n      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [handleKeyDown, open]);\n\n  return (\n    <DimmerWrapper open={open} hasNotExited={hasNotExited}>\n      <CSSTransition\n        nodeRef={dimmerReference}\n        in={open}\n        appear\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames={{\n          enter: classNames({ 'dimmer--enter-fade': fadeContentOnEnter }),\n          enterDone: classNames('dimmer--enter-done', {\n            'dimmer--enter-fade': fadeContentOnEnter,\n          }),\n          exit: classNames('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),\n        }}\n        unmountOnExit\n        onEnter={onEnter}\n        onExited={onExited}\n      >\n        <DimmerContentWrapper scrollBody={!transparent}>\n          <FocusBoundary>\n            <div\n              ref={dimmerReference}\n              className={classNames(\n                'dimmer',\n                { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },\n                className,\n              )}\n              role=\"presentation\"\n              onClick={handleClick}\n            >\n              <div\n                className={classNames(\n                  'dimmer-content-positioner',\n                  contentPosition != null && [\n                    'd-flex justify-content-center',\n                    {\n                      'align-items-start': contentPosition === 'top',\n                      'align-items-center': contentPosition === 'center',\n                      'align-items-end': contentPosition === 'bottom',\n                    },\n                  ],\n                )}\n              >\n                {children}\n              </div>\n            </div>\n          </FocusBoundary>\n        </DimmerContentWrapper>\n      </CSSTransition>\n    </DimmerWrapper>\n  );\n};\n\nconst DimmerWrapper: React.ComponentType<{\n  open: boolean;\n  hasNotExited: boolean;\n  children: React.ReactNode;\n}> = ({ open, hasNotExited, children }) => {\n  const { screenMode, theme } = useTheme();\n\n  return open || hasNotExited ? (\n    <ThemeProvider\n      theme=\"personal\"\n      screenMode={theme === 'personal' ? screenMode : 'light'}\n      isNotRootProvider\n    >\n      {children}\n    </ThemeProvider>\n  ) : (\n    <>{children}</>\n  );\n};\n\nexport const DimmerContentWrapper = ({\n  children,\n  scrollBody,\n}: {\n  children: React.ReactElement;\n  scrollBody: boolean;\n}) => {\n  useEffect(() => {\n    if (scrollBody) {\n      addNoScrollClass();\n    }\n\n    return () => {\n      if (scrollBody) {\n        removeNoScrollClass();\n      }\n    };\n  }, [scrollBody]);\n\n  return children;\n};\n\n// Export without the Portal for tests only\nexport { Dimmer };\n\nexport default withNextPortal(Dimmer);\n"],"names":["EXIT_ANIMATION","dimmerManager","DimmerManager","handleTouchMove","event","isTouchedElementDimmer","target","classList","contains","isIosDevice","stopPropagation","preventDefault","Dimmer","children","className","disableClickToClose","contentPosition","fadeContentOnEnter","fadeContentOnExit","open","scrollable","transparent","onClose","hasNotExited","setHasNotExited","useState","dimmerReference","useRef","closeOnClick","current","handleClick","handleKeyDown","useCallback","key","isTop","onEnter","add","onExited","remove","useEffect","localReferenceCopy","document","addEventListener","passive","removeEventListener","_jsx","DimmerWrapper","CSSTransition","nodeRef","in","appear","timeout","enter","exit","classNames","enterDone","unmountOnExit","DimmerContentWrapper","scrollBody","FocusBoundary","ref","role","onClick","screenMode","theme","useTheme","ThemeProvider","isNotRootProvider","_Fragment","addNoScrollClass","removeNoScrollClass","withNextPortal"],"mappings":"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"}
+{"version":3,"file":"Dimmer.mjs","sources":["../../src/dimmer/Dimmer.tsx"],"sourcesContent":["import { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  addNoScrollClass,\n  CommonProps,\n  PositionBottom,\n  PositionCenter,\n  PositionTop,\n  removeNoScrollClass,\n} from '../common';\nimport { isIosDevice } from '../common/deviceDetection';\nimport FocusBoundary from '../common/focusBoundary';\nimport withNextPortal from '../withNextPortal/withNextPortal';\n\nimport DimmerManager from './dimmerManager';\n\nexport const EXIT_ANIMATION = 350;\n\nconst dimmerManager = new DimmerManager();\n\nexport type DimmerProps = CommonProps & {\n  children?: ReactNode;\n  disableClickToClose?: boolean;\n  contentPosition?: PositionTop | PositionCenter | PositionBottom;\n  fadeContentOnEnter?: boolean;\n  fadeContentOnExit?: boolean;\n  open?: boolean;\n  scrollable?: boolean;\n  transparent?: boolean;\n  onClose?: (event: KeyboardEvent | MouseEvent) => void;\n};\n\nexport const handleTouchMove = (event: Event) => {\n  const isTouchedElementDimmer = (event.target as HTMLDivElement).classList.contains('dimmer');\n\n  // disable scroll on iOS devices for Dimmer area\n  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908\n  // note: scrolling still works for children(s) as expected\n  if (isIosDevice() && isTouchedElementDimmer) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n};\n\nconst Dimmer = ({\n  children,\n  className,\n  disableClickToClose = false,\n  contentPosition,\n  fadeContentOnEnter = false,\n  fadeContentOnExit = false,\n  open = false,\n  scrollable = false,\n  transparent = false,\n  onClose,\n}: DimmerProps) => {\n  const [hasNotExited, setHasNotExited] = useState(false);\n  const dimmerReference = useRef<HTMLDivElement>(null);\n\n  const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === dimmerReference.current) {\n      onClose?.(event);\n    }\n  };\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disableClickToClose || !onClose) {\n      return;\n    }\n\n    closeOnClick(event);\n  };\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return;\n      }\n      event.stopPropagation();\n\n      if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {\n        onClose(event);\n      }\n    },\n    [onClose],\n  );\n\n  const onEnter = () => {\n    setHasNotExited(true);\n\n    if (dimmerReference.current) {\n      dimmerManager.add(dimmerReference.current);\n    }\n  };\n  const onExited = () => {\n    setHasNotExited(false);\n\n    if (dimmerReference.current) {\n      dimmerManager.remove(dimmerReference.current);\n    }\n  };\n\n  useEffect(() => {\n    const localReferenceCopy = dimmerReference.current;\n\n    if (open) {\n      document.addEventListener('keydown', handleKeyDown);\n      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, { passive: true });\n    }\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n\n      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [handleKeyDown, open]);\n\n  return (\n    <DimmerWrapper open={open} hasNotExited={hasNotExited}>\n      <CSSTransition\n        nodeRef={dimmerReference}\n        in={open}\n        appear\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames={{\n          enter: clsx({ 'dimmer--enter-fade': fadeContentOnEnter }),\n          enterDone: clsx('dimmer--enter-done', {\n            'dimmer--enter-fade': fadeContentOnEnter,\n          }),\n          exit: clsx('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),\n        }}\n        unmountOnExit\n        onEnter={onEnter}\n        onExited={onExited}\n      >\n        <DimmerContentWrapper scrollBody={!transparent}>\n          <FocusBoundary>\n            <div\n              ref={dimmerReference}\n              className={clsx(\n                'dimmer',\n                { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },\n                className,\n              )}\n              role=\"presentation\"\n              onClick={handleClick}\n            >\n              <div\n                className={clsx(\n                  'dimmer-content-positioner',\n                  contentPosition != null && [\n                    'd-flex justify-content-center',\n                    {\n                      'align-items-start': contentPosition === 'top',\n                      'align-items-center': contentPosition === 'center',\n                      'align-items-end': contentPosition === 'bottom',\n                    },\n                  ],\n                )}\n              >\n                {children}\n              </div>\n            </div>\n          </FocusBoundary>\n        </DimmerContentWrapper>\n      </CSSTransition>\n    </DimmerWrapper>\n  );\n};\n\nconst DimmerWrapper: React.ComponentType<{\n  open: boolean;\n  hasNotExited: boolean;\n  children: React.ReactNode;\n}> = ({ open, hasNotExited, children }) => {\n  const { screenMode, theme } = useTheme();\n\n  return open || hasNotExited ? (\n    <ThemeProvider\n      theme=\"personal\"\n      screenMode={theme === 'personal' ? screenMode : 'light'}\n      isNotRootProvider\n    >\n      {children}\n    </ThemeProvider>\n  ) : (\n    <>{children}</>\n  );\n};\n\nexport const DimmerContentWrapper = ({\n  children,\n  scrollBody,\n}: {\n  children: React.ReactElement;\n  scrollBody: boolean;\n}) => {\n  useEffect(() => {\n    if (scrollBody) {\n      addNoScrollClass();\n    }\n\n    return () => {\n      if (scrollBody) {\n        removeNoScrollClass();\n      }\n    };\n  }, [scrollBody]);\n\n  return children;\n};\n\n// Export without the Portal for tests only\nexport { Dimmer };\n\nexport default withNextPortal(Dimmer);\n"],"names":["EXIT_ANIMATION","dimmerManager","DimmerManager","handleTouchMove","event","isTouchedElementDimmer","target","classList","contains","isIosDevice","stopPropagation","preventDefault","Dimmer","children","className","disableClickToClose","contentPosition","fadeContentOnEnter","fadeContentOnExit","open","scrollable","transparent","onClose","hasNotExited","setHasNotExited","useState","dimmerReference","useRef","closeOnClick","current","handleClick","handleKeyDown","useCallback","key","isTop","onEnter","add","onExited","remove","useEffect","localReferenceCopy","document","addEventListener","passive","removeEventListener","_jsx","DimmerWrapper","CSSTransition","nodeRef","in","appear","timeout","enter","exit","classNames","clsx","enterDone","unmountOnExit","DimmerContentWrapper","scrollBody","FocusBoundary","ref","role","onClick","screenMode","theme","useTheme","ThemeProvider","isNotRootProvider","_Fragment","addNoScrollClass","removeNoScrollClass","withNextPortal"],"mappings":"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"}

package/build/display/Display.js

@@ -1,13 +1,9 @@
 'use strict';
 
-var classNames = require('classnames');
+var clsx = require('clsx');
 var jsxRuntime = require('react/jsx-runtime');
 var typography = require('../common/propsValues/typography.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 function Display({
   as: Heading = 'h1',
   type = typography.Typography.DISPLAY_LARGE,
@@ -17,7 +13,7 @@ function Display({
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(Heading, {
     id: id,
-    className: classNames__default.default(`np-text-${type}`, 'text-primary', className),
+    className: clsx.clsx(`np-text-${type}`, 'text-primary', className),
     children: children
   });
 }

package/build/display/Display.js.map

@@ -1 +1 @@
-{"version":3,"file":"Display.js","sources":["../../src/display/Display.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { PropsWithChildren } from 'react';\n\nimport { DisplayTypes, Typography } from '../common';\n\ntype Props = PropsWithChildren<{\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  id?: string;\n  type?: DisplayTypes;\n  className?: string;\n}>;\n\nfunction Display({\n  as: Heading = 'h1',\n  type = Typography.DISPLAY_LARGE,\n  children,\n  className,\n  id,\n}: Props) {\n  return (\n    <Heading id={id} className={classNames(`np-text-${type}`, 'text-primary', className)}>\n      {children}\n    </Heading>\n  );\n}\n\nexport default Display;\n"],"names":["Display","as","Heading","type","Typography","DISPLAY_LARGE","children","className","id","_jsx","classNames"],"mappings":";;;;;;;;;;AAYA,SAASA,OAAOA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAClBC,IAAI,GAAGC,qBAAU,CAACC,aAAa;EAC/BC,QAAQ;EACRC,SAAS;AACTC,EAAAA,EAAAA;AACM,CAAA,EAAA;EACN,oBACEC,cAAA,CAACP,OAAO,EAAA;AAACM,IAAAA,EAAE,EAAEA,EAAG;IAACD,SAAS,EAAEG,2BAAU,CAAC,CAAWP,QAAAA,EAAAA,IAAI,EAAE,EAAE,cAAc,EAAEI,SAAS,CAAE;AAAAD,IAAAA,QAAA,EAClFA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd;;;;"}
+{"version":3,"file":"Display.js","sources":["../../src/display/Display.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport { DisplayTypes, Typography } from '../common';\n\ntype Props = PropsWithChildren<{\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  id?: string;\n  type?: DisplayTypes;\n  className?: string;\n}>;\n\nfunction Display({\n  as: Heading = 'h1',\n  type = Typography.DISPLAY_LARGE,\n  children,\n  className,\n  id,\n}: Props) {\n  return (\n    <Heading id={id} className={clsx(`np-text-${type}`, 'text-primary', className)}>\n      {children}\n    </Heading>\n  );\n}\n\nexport default Display;\n"],"names":["Display","as","Heading","type","Typography","DISPLAY_LARGE","children","className","id","_jsx","clsx"],"mappings":";;;;;;AAYA,SAASA,OAAOA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAClBC,IAAI,GAAGC,qBAAU,CAACC,aAAa;EAC/BC,QAAQ;EACRC,SAAS;AACTC,EAAAA,EAAAA;AACM,CAAA,EAAA;EACN,oBACEC,cAAA,CAACP,OAAO,EAAA;AAACM,IAAAA,EAAE,EAAEA,EAAG;IAACD,SAAS,EAAEG,SAAI,CAAC,CAAWP,QAAAA,EAAAA,IAAI,EAAE,EAAE,cAAc,EAAEI,SAAS,CAAE;AAAAD,IAAAA,QAAA,EAC5EA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd;;;;"}

package/build/display/Display.mjs

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { jsx } from 'react/jsx-runtime';
 import { Typography } from '../common/propsValues/typography.mjs';
 
@@ -11,7 +11,7 @@ function Display({
 }) {
   return /*#__PURE__*/jsx(Heading, {
     id: id,
-    className: classNames(`np-text-${type}`, 'text-primary', className),
+    className: clsx(`np-text-${type}`, 'text-primary', className),
     children: children
   });
 }

package/build/display/Display.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Display.mjs","sources":["../../src/display/Display.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { PropsWithChildren } from 'react';\n\nimport { DisplayTypes, Typography } from '../common';\n\ntype Props = PropsWithChildren<{\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  id?: string;\n  type?: DisplayTypes;\n  className?: string;\n}>;\n\nfunction Display({\n  as: Heading = 'h1',\n  type = Typography.DISPLAY_LARGE,\n  children,\n  className,\n  id,\n}: Props) {\n  return (\n    <Heading id={id} className={classNames(`np-text-${type}`, 'text-primary', className)}>\n      {children}\n    </Heading>\n  );\n}\n\nexport default Display;\n"],"names":["Display","as","Heading","type","Typography","DISPLAY_LARGE","children","className","id","_jsx","classNames"],"mappings":";;;;AAYA,SAASA,OAAOA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAClBC,IAAI,GAAGC,UAAU,CAACC,aAAa;EAC/BC,QAAQ;EACRC,SAAS;AACTC,EAAAA,EAAAA;AACM,CAAA,EAAA;EACN,oBACEC,GAAA,CAACP,OAAO,EAAA;AAACM,IAAAA,EAAE,EAAEA,EAAG;IAACD,SAAS,EAAEG,UAAU,CAAC,CAAWP,QAAAA,EAAAA,IAAI,EAAE,EAAE,cAAc,EAAEI,SAAS,CAAE;AAAAD,IAAAA,QAAA,EAClFA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd;;;;"}
+{"version":3,"file":"Display.mjs","sources":["../../src/display/Display.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport { DisplayTypes, Typography } from '../common';\n\ntype Props = PropsWithChildren<{\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  id?: string;\n  type?: DisplayTypes;\n  className?: string;\n}>;\n\nfunction Display({\n  as: Heading = 'h1',\n  type = Typography.DISPLAY_LARGE,\n  children,\n  className,\n  id,\n}: Props) {\n  return (\n    <Heading id={id} className={clsx(`np-text-${type}`, 'text-primary', className)}>\n      {children}\n    </Heading>\n  );\n}\n\nexport default Display;\n"],"names":["Display","as","Heading","type","Typography","DISPLAY_LARGE","children","className","id","_jsx","clsx"],"mappings":";;;;AAYA,SAASA,OAAOA,CAAC;EACfC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAClBC,IAAI,GAAGC,UAAU,CAACC,aAAa;EAC/BC,QAAQ;EACRC,SAAS;AACTC,EAAAA,EAAAA;AACM,CAAA,EAAA;EACN,oBACEC,GAAA,CAACP,OAAO,EAAA;AAACM,IAAAA,EAAE,EAAEA,EAAG;IAACD,SAAS,EAAEG,IAAI,CAAC,CAAWP,QAAAA,EAAAA,IAAI,EAAE,EAAE,cAAc,EAAEI,SAAS,CAAE;AAAAD,IAAAA,QAAA,EAC5EA,QAAAA;AAAQ,GACF,CAAC,CAAA;AAEd;;;;"}

package/build/drawer/Drawer.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var classNames = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var CloseButton = require('../common/closeButton/CloseButton.js');
 var Dimmer = require('../dimmer/Dimmer.js');
@@ -13,10 +13,6 @@ var useLayout = require('../common/hooks/useLayout/useLayout.js');
 var position = require('../common/propsValues/position.js');
 var typography = require('../common/propsValues/typography.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 function Drawer({
   children,
   className,
@@ -43,9 +39,9 @@ function Drawer({
         role: "dialog",
         "aria-modal": true,
         "aria-labelledby": headerTitle ? titleId : undefined,
-        className: classNames__default.default('np-drawer', className),
+        className: clsx.clsx('np-drawer', className),
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: classNames__default.default('np-drawer-header', {
+          className: clsx.clsx('np-drawer-header', {
             'np-drawer-header--withborder': headerTitle
           }),
           children: [headerTitle && /*#__PURE__*/jsxRuntime.jsx(Title, {
@@ -56,10 +52,10 @@ function Drawer({
             onClick: onClose
           })]
         }), children && /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: classNames__default.default('np-drawer-content'),
+          className: clsx.clsx('np-drawer-content'),
           children: children
         }), footerContent && /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: classNames__default.default('np-drawer-footer'),
+          className: clsx.clsx('np-drawer-footer'),
           children: footerContent
         })]
       })

package/build/drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport interface DrawerProps {\n  /** The content to appear in the drawer body. */\n  children?: React.ReactNode;\n  className?: string;\n  /** The content to appear in the drawer footer. */\n  footerContent?: React.ReactNode;\n  /** The content to appear in the drawer header. */\n  headerTitle?: React.ReactNode;\n  /** The status of Drawer either open or not. */\n  open?: boolean;\n  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n  position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n  /** The action to perform on close click. */\n  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n}\n\nexport default function Drawer({\n  children,\n  className,\n  footerContent,\n  headerTitle,\n  onClose,\n  open = false,\n  position = 'right',\n}: DrawerProps) {\n  logActionRequiredIf(\n    'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n    !onClose,\n  );\n\n  const { isMobile } = useLayout();\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} onClose={onClose}>\n      <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n        <div\n          id={overlayId}\n          role=\"dialog\"\n          aria-modal\n          aria-labelledby={headerTitle ? titleId : undefined}\n          className={classNames('np-drawer', className)}\n        >\n          <div\n            className={classNames('np-drawer-header', {\n              'np-drawer-header--withborder': headerTitle,\n            })}\n          >\n            {headerTitle && (\n              <Title id={titleId} type={Typography.TITLE_BODY}>\n                {headerTitle}\n              </Title>\n            )}\n            <CloseButton onClick={onClose} />\n          </div>\n          {children && <div className={classNames('np-drawer-content')}>{children}</div>}\n          {footerContent && <div className={classNames('np-drawer-footer')}>{footerContent}</div>}\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","open","position","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","SlidingPanel","Position","BOTTOM","_jsxs","id","role","undefined","classNames","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;;;;;;;AA4BwB,SAAAA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;AACZC,YAAAA,UAAQ,GAAG,OAAA;AACC,CAAA,EAAA;AACZC,EAAAA,qCAAmB,CACjB,8GAA8G,EAC9G,CAACH,OAAO,CACT,CAAA;EAED,MAAM;AAAEI,IAAAA,QAAAA;GAAU,GAAGC,mBAAS,EAAE,CAAA;AAChC,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,SAAS,GAAGC,gBAAU,CAACC,kCAAgB,CAAC,CAAA;EAE9C,oBACEC,cAAA,CAACC,cAAM,EAAA;AAACX,IAAAA,IAAI,EAAEA,IAAK;AAACD,IAAAA,OAAO,EAAEA,OAAQ;IAAAJ,QAAA,eACnCe,cAAA,CAACE,oBAAY,EAAA;AAACZ,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEE,QAAQ,GAAGU,iBAAQ,CAACC,MAAM,GAAGb,UAAS;AAAAN,MAAAA,QAAA,eACxEoB,eAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAET,SAAU;AACdU,QAAAA,IAAI,EAAC,QAAQ;QACb,YAAU,EAAA,IAAA;AACV,QAAA,iBAAA,EAAiBnB,WAAW,GAAGO,OAAO,GAAGa,SAAU;AACnDtB,QAAAA,SAAS,EAAEuB,2BAAU,CAAC,WAAW,EAAEvB,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAE9CoB,eAAA,CAAA,KAAA,EAAA;AACEnB,UAAAA,SAAS,EAAEuB,2BAAU,CAAC,kBAAkB,EAAE;AACxC,YAAA,8BAA8B,EAAErB,WAAAA;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAEFG,CAAAA,WAAW,iBACVY,cAAA,CAACU,KAAK,EAAA;AAACJ,YAAAA,EAAE,EAAEX,OAAQ;YAACgB,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAA5B,YAAAA,QAAA,EAC7CG,WAAAA;AAAW,WACP,CACR,eACDY,cAAA,CAACc,uBAAW,EAAA;AAACC,YAAAA,OAAO,EAAE1B,OAAAA;AAAQ,WAChC,CAAA,CAAA;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIe,cAAA,CAAA,KAAA,EAAA;AAAKd,UAAAA,SAAS,EAAEuB,2BAAU,CAAC,mBAAmB,CAAE;AAAAxB,UAAAA,QAAA,EAAEA,QAAAA;AAAQ,SAAM,CAAC,EAC7EE,aAAa,iBAAIa,cAAA,CAAA,KAAA,EAAA;AAAKd,UAAAA,SAAS,EAAEuB,2BAAU,CAAC,kBAAkB,CAAE;AAAAxB,UAAAA,QAAA,EAAEE,aAAAA;AAAa,SAAM,CAAC,CAAA;OACpF,CAAA;KACO,CAAA;AAChB,GAAQ,CAAC,CAAA;AAEb;;;;"}
+{"version":3,"file":"Drawer.js","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport interface DrawerProps {\n  /** The content to appear in the drawer body. */\n  children?: React.ReactNode;\n  className?: string;\n  /** The content to appear in the drawer footer. */\n  footerContent?: React.ReactNode;\n  /** The content to appear in the drawer header. */\n  headerTitle?: React.ReactNode;\n  /** The status of Drawer either open or not. */\n  open?: boolean;\n  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n  position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n  /** The action to perform on close click. */\n  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n}\n\nexport default function Drawer({\n  children,\n  className,\n  footerContent,\n  headerTitle,\n  onClose,\n  open = false,\n  position = 'right',\n}: DrawerProps) {\n  logActionRequiredIf(\n    'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n    !onClose,\n  );\n\n  const { isMobile } = useLayout();\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} onClose={onClose}>\n      <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n        <div\n          id={overlayId}\n          role=\"dialog\"\n          aria-modal\n          aria-labelledby={headerTitle ? titleId : undefined}\n          className={clsx('np-drawer', className)}\n        >\n          <div\n            className={clsx('np-drawer-header', {\n              'np-drawer-header--withborder': headerTitle,\n            })}\n          >\n            {headerTitle && (\n              <Title id={titleId} type={Typography.TITLE_BODY}>\n                {headerTitle}\n              </Title>\n            )}\n            <CloseButton onClick={onClose} />\n          </div>\n          {children && <div className={clsx('np-drawer-content')}>{children}</div>}\n          {footerContent && <div className={clsx('np-drawer-footer')}>{footerContent}</div>}\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","open","position","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","SlidingPanel","Position","BOTTOM","_jsxs","id","role","undefined","clsx","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;;;AA4BwB,SAAAA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;AACZC,YAAAA,UAAQ,GAAG,OAAA;AACC,CAAA,EAAA;AACZC,EAAAA,qCAAmB,CACjB,8GAA8G,EAC9G,CAACH,OAAO,CACT,CAAA;EAED,MAAM;AAAEI,IAAAA,QAAAA;GAAU,GAAGC,mBAAS,EAAE,CAAA;AAChC,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,SAAS,GAAGC,gBAAU,CAACC,kCAAgB,CAAC,CAAA;EAE9C,oBACEC,cAAA,CAACC,cAAM,EAAA;AAACX,IAAAA,IAAI,EAAEA,IAAK;AAACD,IAAAA,OAAO,EAAEA,OAAQ;IAAAJ,QAAA,eACnCe,cAAA,CAACE,oBAAY,EAAA;AAACZ,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEE,QAAQ,GAAGU,iBAAQ,CAACC,MAAM,GAAGb,UAAS;AAAAN,MAAAA,QAAA,eACxEoB,eAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAET,SAAU;AACdU,QAAAA,IAAI,EAAC,QAAQ;QACb,YAAU,EAAA,IAAA;AACV,QAAA,iBAAA,EAAiBnB,WAAW,GAAGO,OAAO,GAAGa,SAAU;AACnDtB,QAAAA,SAAS,EAAEuB,SAAI,CAAC,WAAW,EAAEvB,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExCoB,eAAA,CAAA,KAAA,EAAA;AACEnB,UAAAA,SAAS,EAAEuB,SAAI,CAAC,kBAAkB,EAAE;AAClC,YAAA,8BAA8B,EAAErB,WAAAA;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAEFG,CAAAA,WAAW,iBACVY,cAAA,CAACU,KAAK,EAAA;AAACJ,YAAAA,EAAE,EAAEX,OAAQ;YAACgB,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAA5B,YAAAA,QAAA,EAC7CG,WAAAA;AAAW,WACP,CACR,eACDY,cAAA,CAACc,uBAAW,EAAA;AAACC,YAAAA,OAAO,EAAE1B,OAAAA;AAAQ,WAChC,CAAA,CAAA;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIe,cAAA,CAAA,KAAA,EAAA;AAAKd,UAAAA,SAAS,EAAEuB,SAAI,CAAC,mBAAmB,CAAE;AAAAxB,UAAAA,QAAA,EAAEA,QAAAA;AAAQ,SAAM,CAAC,EACvEE,aAAa,iBAAIa,cAAA,CAAA,KAAA,EAAA;AAAKd,UAAAA,SAAS,EAAEuB,SAAI,CAAC,kBAAkB,CAAE;AAAAxB,UAAAA,QAAA,EAAEE,aAAAA;AAAa,SAAM,CAAC,CAAA;OAC9E,CAAA;KACO,CAAA;AAChB,GAAQ,CAAC,CAAA;AAEb;;;;"}

package/build/drawer/Drawer.mjs

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useId, useContext } from 'react';
 import { CloseButton } from '../common/closeButton/CloseButton.mjs';
 import Dimmer from '../dimmer/Dimmer.mjs';
@@ -37,9 +37,9 @@ function Drawer({
         role: "dialog",
         "aria-modal": true,
         "aria-labelledby": headerTitle ? titleId : undefined,
-        className: classNames('np-drawer', className),
+        className: clsx('np-drawer', className),
         children: [/*#__PURE__*/jsxs("div", {
-          className: classNames('np-drawer-header', {
+          className: clsx('np-drawer-header', {
             'np-drawer-header--withborder': headerTitle
           }),
           children: [headerTitle && /*#__PURE__*/jsx(Title, {
@@ -50,10 +50,10 @@ function Drawer({
             onClick: onClose
           })]
         }), children && /*#__PURE__*/jsx("div", {
-          className: classNames('np-drawer-content'),
+          className: clsx('np-drawer-content'),
           children: children
         }), footerContent && /*#__PURE__*/jsx("div", {
-          className: classNames('np-drawer-footer'),
+          className: clsx('np-drawer-footer'),
           children: footerContent
         })]
       })

package/build/drawer/Drawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.mjs","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport interface DrawerProps {\n  /** The content to appear in the drawer body. */\n  children?: React.ReactNode;\n  className?: string;\n  /** The content to appear in the drawer footer. */\n  footerContent?: React.ReactNode;\n  /** The content to appear in the drawer header. */\n  headerTitle?: React.ReactNode;\n  /** The status of Drawer either open or not. */\n  open?: boolean;\n  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n  position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n  /** The action to perform on close click. */\n  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n}\n\nexport default function Drawer({\n  children,\n  className,\n  footerContent,\n  headerTitle,\n  onClose,\n  open = false,\n  position = 'right',\n}: DrawerProps) {\n  logActionRequiredIf(\n    'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n    !onClose,\n  );\n\n  const { isMobile } = useLayout();\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} onClose={onClose}>\n      <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n        <div\n          id={overlayId}\n          role=\"dialog\"\n          aria-modal\n          aria-labelledby={headerTitle ? titleId : undefined}\n          className={classNames('np-drawer', className)}\n        >\n          <div\n            className={classNames('np-drawer-header', {\n              'np-drawer-header--withborder': headerTitle,\n            })}\n          >\n            {headerTitle && (\n              <Title id={titleId} type={Typography.TITLE_BODY}>\n                {headerTitle}\n              </Title>\n            )}\n            <CloseButton onClick={onClose} />\n          </div>\n          {children && <div className={classNames('np-drawer-content')}>{children}</div>}\n          {footerContent && <div className={classNames('np-drawer-footer')}>{footerContent}</div>}\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","open","position","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","SlidingPanel","Position","BOTTOM","_jsxs","id","role","undefined","classNames","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;AA4BwB,SAAAA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,QAAQ,GAAG,OAAA;AACC,CAAA,EAAA;AACZC,EAAAA,mBAAmB,CACjB,8GAA8G,EAC9G,CAACH,OAAO,CACT,CAAA;EAED,MAAM;AAAEI,IAAAA,QAAAA;GAAU,GAAGC,SAAS,EAAE,CAAA;AAChC,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,SAAS,GAAGC,UAAU,CAACC,gBAAgB,CAAC,CAAA;EAE9C,oBACEC,GAAA,CAACC,MAAM,EAAA;AAACX,IAAAA,IAAI,EAAEA,IAAK;AAACD,IAAAA,OAAO,EAAEA,OAAQ;IAAAJ,QAAA,eACnCe,GAAA,CAACE,YAAY,EAAA;AAACZ,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEE,QAAQ,GAAGU,QAAQ,CAACC,MAAM,GAAGb,QAAS;AAAAN,MAAAA,QAAA,eACxEoB,IAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAET,SAAU;AACdU,QAAAA,IAAI,EAAC,QAAQ;QACb,YAAU,EAAA,IAAA;AACV,QAAA,iBAAA,EAAiBnB,WAAW,GAAGO,OAAO,GAAGa,SAAU;AACnDtB,QAAAA,SAAS,EAAEuB,UAAU,CAAC,WAAW,EAAEvB,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAE9CoB,IAAA,CAAA,KAAA,EAAA;AACEnB,UAAAA,SAAS,EAAEuB,UAAU,CAAC,kBAAkB,EAAE;AACxC,YAAA,8BAA8B,EAAErB,WAAAA;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAEFG,CAAAA,WAAW,iBACVY,GAAA,CAACU,KAAK,EAAA;AAACJ,YAAAA,EAAE,EAAEX,OAAQ;YAACgB,IAAI,EAAEC,UAAU,CAACC,UAAW;AAAA5B,YAAAA,QAAA,EAC7CG,WAAAA;AAAW,WACP,CACR,eACDY,GAAA,CAACc,WAAW,EAAA;AAACC,YAAAA,OAAO,EAAE1B,OAAAA;AAAQ,WAChC,CAAA,CAAA;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIe,GAAA,CAAA,KAAA,EAAA;AAAKd,UAAAA,SAAS,EAAEuB,UAAU,CAAC,mBAAmB,CAAE;AAAAxB,UAAAA,QAAA,EAAEA,QAAAA;AAAQ,SAAM,CAAC,EAC7EE,aAAa,iBAAIa,GAAA,CAAA,KAAA,EAAA;AAAKd,UAAAA,SAAS,EAAEuB,UAAU,CAAC,kBAAkB,CAAE;AAAAxB,UAAAA,QAAA,EAAEE,aAAAA;AAAa,SAAM,CAAC,CAAA;OACpF,CAAA;KACO,CAAA;AAChB,GAAQ,CAAC,CAAA;AAEb;;;;"}
+{"version":3,"file":"Drawer.mjs","sources":["../../src/drawer/Drawer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useContext, useId } from 'react';\n\nimport { Position, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../slidingPanel';\nimport Title from '../title';\nimport { logActionRequiredIf } from '../utilities';\n\nexport interface DrawerProps {\n  /** The content to appear in the drawer body. */\n  children?: React.ReactNode;\n  className?: string;\n  /** The content to appear in the drawer footer. */\n  footerContent?: React.ReactNode;\n  /** The content to appear in the drawer header. */\n  headerTitle?: React.ReactNode;\n  /** The status of Drawer either open or not. */\n  open?: boolean;\n  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */\n  position?: `${Position.LEFT | Position.RIGHT | Position.BOTTOM}`;\n  /** The action to perform on close click. */\n  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;\n}\n\nexport default function Drawer({\n  children,\n  className,\n  footerContent,\n  headerTitle,\n  onClose,\n  open = false,\n  position = 'right',\n}: DrawerProps) {\n  logActionRequiredIf(\n    'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',\n    !onClose,\n  );\n\n  const { isMobile } = useLayout();\n  const titleId = useId();\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} onClose={onClose}>\n      <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>\n        <div\n          id={overlayId}\n          role=\"dialog\"\n          aria-modal\n          aria-labelledby={headerTitle ? titleId : undefined}\n          className={clsx('np-drawer', className)}\n        >\n          <div\n            className={clsx('np-drawer-header', {\n              'np-drawer-header--withborder': headerTitle,\n            })}\n          >\n            {headerTitle && (\n              <Title id={titleId} type={Typography.TITLE_BODY}>\n                {headerTitle}\n              </Title>\n            )}\n            <CloseButton onClick={onClose} />\n          </div>\n          {children && <div className={clsx('np-drawer-content')}>{children}</div>}\n          {footerContent && <div className={clsx('np-drawer-footer')}>{footerContent}</div>}\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n}\n"],"names":["Drawer","children","className","footerContent","headerTitle","onClose","open","position","logActionRequiredIf","isMobile","useLayout","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","SlidingPanel","Position","BOTTOM","_jsxs","id","role","undefined","clsx","Title","type","Typography","TITLE_BODY","CloseButton","onClick"],"mappings":";;;;;;;;;;;;;AA4BwB,SAAAA,MAAMA,CAAC;EAC7BC,QAAQ;EACRC,SAAS;EACTC,aAAa;EACbC,WAAW;EACXC,OAAO;AACPC,EAAAA,IAAI,GAAG,KAAK;AACZC,EAAAA,QAAQ,GAAG,OAAA;AACC,CAAA,EAAA;AACZC,EAAAA,mBAAmB,CACjB,8GAA8G,EAC9G,CAACH,OAAO,CACT,CAAA;EAED,MAAM;AAAEI,IAAAA,QAAAA;GAAU,GAAGC,SAAS,EAAE,CAAA;AAChC,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,SAAS,GAAGC,UAAU,CAACC,gBAAgB,CAAC,CAAA;EAE9C,oBACEC,GAAA,CAACC,MAAM,EAAA;AAACX,IAAAA,IAAI,EAAEA,IAAK;AAACD,IAAAA,OAAO,EAAEA,OAAQ;IAAAJ,QAAA,eACnCe,GAAA,CAACE,YAAY,EAAA;AAACZ,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,QAAQ,EAAEE,QAAQ,GAAGU,QAAQ,CAACC,MAAM,GAAGb,QAAS;AAAAN,MAAAA,QAAA,eACxEoB,IAAA,CAAA,KAAA,EAAA;AACEC,QAAAA,EAAE,EAAET,SAAU;AACdU,QAAAA,IAAI,EAAC,QAAQ;QACb,YAAU,EAAA,IAAA;AACV,QAAA,iBAAA,EAAiBnB,WAAW,GAAGO,OAAO,GAAGa,SAAU;AACnDtB,QAAAA,SAAS,EAAEuB,IAAI,CAAC,WAAW,EAAEvB,SAAS,CAAE;AAAAD,QAAAA,QAAA,gBAExCoB,IAAA,CAAA,KAAA,EAAA;AACEnB,UAAAA,SAAS,EAAEuB,IAAI,CAAC,kBAAkB,EAAE;AAClC,YAAA,8BAA8B,EAAErB,WAAAA;AACjC,WAAA,CAAE;AAAAH,UAAAA,QAAA,EAEFG,CAAAA,WAAW,iBACVY,GAAA,CAACU,KAAK,EAAA;AAACJ,YAAAA,EAAE,EAAEX,OAAQ;YAACgB,IAAI,EAAEC,UAAU,CAACC,UAAW;AAAA5B,YAAAA,QAAA,EAC7CG,WAAAA;AAAW,WACP,CACR,eACDY,GAAA,CAACc,WAAW,EAAA;AAACC,YAAAA,OAAO,EAAE1B,OAAAA;AAAQ,WAChC,CAAA,CAAA;AAAA,SAAK,CACL,EAACJ,QAAQ,iBAAIe,GAAA,CAAA,KAAA,EAAA;AAAKd,UAAAA,SAAS,EAAEuB,IAAI,CAAC,mBAAmB,CAAE;AAAAxB,UAAAA,QAAA,EAAEA,QAAAA;AAAQ,SAAM,CAAC,EACvEE,aAAa,iBAAIa,GAAA,CAAA,KAAA,EAAA;AAAKd,UAAAA,SAAS,EAAEuB,IAAI,CAAC,kBAAkB,CAAE;AAAAxB,UAAAA,QAAA,EAAEE,aAAAA;AAAa,SAAM,CAAC,CAAA;OAC9E,CAAA;KACO,CAAA;AAChB,GAAQ,CAAC,CAAA;AAEb;;;;"}

package/build/field/Field.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var classNames = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var InlineAlert = require('../inlineAlert/InlineAlert.js');
 var contexts = require('../inputs/contexts.js');
@@ -8,10 +8,6 @@ var Label = require('../label/Label.js');
 var jsxRuntime = require('react/jsx-runtime');
 var sentiment = require('../common/propsValues/sentiment.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 const Field = ({
   id,
   label,
@@ -37,7 +33,7 @@ const Field = ({
         children: /*#__PURE__*/jsxRuntime.jsx(contexts.InputInvalidProvider, {
           value: hasError,
           children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: classNames__default.default('form-group d-block', {
+            className: clsx.clsx('form-group d-block', {
               'has-success': sentiment$1 === sentiment.Sentiment.POSITIVE,
               'has-warning': sentiment$1 === sentiment.Sentiment.WARNING,
               'has-error': hasError,

package/build/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useId } from 'react';\n\nimport { Sentiment } from '../common';\nimport InlineAlert from '../inlineAlert/InlineAlert';\nimport {\n  FieldLabelIdContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label/Label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\n  sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  message: propMessage,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = props.error || props.hint || propMessage;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? id ?? fallbackInputId : undefined;\n\n  const descriptionId = useId();\n\n  return (\n    <FieldLabelIdContextProvider value={labelId}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={message ? descriptionId : undefined}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={classNames(\n                'form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <Label id={labelId} htmlFor={inputId}>\n                  {label}\n                  {children}\n                </Label>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlineAlert type={sentiment} id={descriptionId}>\n                  {message}\n                </InlineAlert>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\n  );\n};\n"],"names":["Field","id","label","message","propMessage","sentiment","propType","Sentiment","NEUTRAL","className","children","props","error","NEGATIVE","hint","hasError","labelId","useId","fallbackInputId","inputId","undefined","descriptionId","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","classNames","POSITIVE","WARNING","Label","htmlFor","InlineAlert","type"],"mappings":";;;;;;;;;;;;;;AA4BO,MAAMA,KAAK,GAAGA,CAAC;EACpBC,EAAE;EACFC,KAAK;AACLC,EAAAA,OAAO,EAAEC,WAAW;AACpBC,EAAAA,SAAS,EAAEC,QAAQ,GAAGC,mBAAS,CAACC,OAAO;EACvCC,SAAS;EACTC,QAAQ;EACR,GAAGC,KAAAA;AAAK,CACG,KAAI;EACf,MAAMN,WAAS,GAAGM,KAAK,CAACC,KAAK,GAAGL,mBAAS,CAACM,QAAQ,GAAGP,QAAQ,CAAA;EAC7D,MAAMH,OAAO,GAAGQ,KAAK,CAACC,KAAK,IAAID,KAAK,CAACG,IAAI,IAAIV,WAAW,CAAA;AACxD,EAAA,MAAMW,QAAQ,GAAGV,WAAS,KAAKE,mBAAS,CAACM,QAAQ,CAAA;AAEjD,EAAA,MAAMG,OAAO,GAAGC,WAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,eAAe,GAAGD,WAAK,EAAE,CAAA;EAC/B,MAAME,OAAO,GAAGlB,EAAE,KAAK,IAAI,GAAGA,EAAE,IAAIiB,eAAe,GAAGE,SAAS,CAAA;AAE/D,EAAA,MAAMC,aAAa,GAAGJ,WAAK,EAAE,CAAA;EAE7B,oBACEK,cAAA,CAACC,oCAA2B,EAAA;AAACC,IAAAA,KAAK,EAAER,OAAQ;IAAAN,QAAA,eAC1CY,cAAA,CAACG,+BAAsB,EAAA;AAACD,MAAAA,KAAK,EAAEL,OAAQ;MAAAT,QAAA,eACrCY,cAAA,CAACI,iCAAwB,EAAA;AAACF,QAAAA,KAAK,EAAErB,OAAO,GAAGkB,aAAa,GAAGD,SAAU;QAAAV,QAAA,eACnEY,cAAA,CAACK,6BAAoB,EAAA;AAACH,UAAAA,KAAK,EAAET,QAAS;AAAAL,UAAAA,QAAA,eACpCkB,eAAA,CAAA,KAAA,EAAA;AACEnB,YAAAA,SAAS,EAAEoB,2BAAU,CACnB,oBAAoB,EACpB;AACE,cAAA,aAAa,EAAExB,WAAS,KAAKE,mBAAS,CAACuB,QAAQ;AAC/C,cAAA,aAAa,EAAEzB,WAAS,KAAKE,mBAAS,CAACwB,OAAO;AAC9C,cAAA,WAAW,EAAEhB,QAAQ;AACrB,cAAA,UAAU,EAAEV,WAAS,KAAKE,mBAAS,CAACC,OAAAA;aACrC,EACDC,SAAS,CACT;AAAAC,YAAAA,QAAA,GAEDR,KAAK,IAAI,IAAI,gBACZ0B,eAAA,CAACI,WAAK,EAAA;AAAC/B,cAAAA,EAAE,EAAEe,OAAQ;AAACiB,cAAAA,OAAO,EAAEd,OAAQ;cAAAT,QAAA,EAAA,CAClCR,KAAK,EACLQ,QAAQ,CAAA;aACJ,CAAC,GAERA,QACD,EAEAP,OAAO,iBACNmB,cAAA,CAACY,WAAW,EAAA;AAACC,cAAAA,IAAI,EAAE9B,WAAU;AAACJ,cAAAA,EAAE,EAAEoB,aAAc;AAAAX,cAAAA,QAAA,EAC7CP,OAAAA;AAAO,aACG,CACd,CAAA;WACE,CAAA;SACe,CAAA;OACE,CAAA;KACJ,CAAA;AAC1B,GAA6B,CAAC,CAAA;AAElC;;;;"}
+{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId } from 'react';\n\nimport { Sentiment } from '../common';\nimport InlineAlert from '../inlineAlert/InlineAlert';\nimport {\n  FieldLabelIdContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label/Label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\n  sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  message: propMessage,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = props.error || props.hint || propMessage;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const descriptionId = useId();\n\n  return (\n    <FieldLabelIdContextProvider value={labelId}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={message ? descriptionId : undefined}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <Label id={labelId} htmlFor={inputId}>\n                  {label}\n                  {children}\n                </Label>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlineAlert type={sentiment} id={descriptionId}>\n                  {message}\n                </InlineAlert>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\n  );\n};\n"],"names":["Field","id","label","message","propMessage","sentiment","propType","Sentiment","NEUTRAL","className","children","props","error","NEGATIVE","hint","hasError","labelId","useId","fallbackInputId","inputId","undefined","descriptionId","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","Label","htmlFor","InlineAlert","type"],"mappings":";;;;;;;;;;AA4BO,MAAMA,KAAK,GAAGA,CAAC;EACpBC,EAAE;EACFC,KAAK;AACLC,EAAAA,OAAO,EAAEC,WAAW;AACpBC,EAAAA,SAAS,EAAEC,QAAQ,GAAGC,mBAAS,CAACC,OAAO;EACvCC,SAAS;EACTC,QAAQ;EACR,GAAGC,KAAAA;AAAK,CACG,KAAI;EACf,MAAMN,WAAS,GAAGM,KAAK,CAACC,KAAK,GAAGL,mBAAS,CAACM,QAAQ,GAAGP,QAAQ,CAAA;EAC7D,MAAMH,OAAO,GAAGQ,KAAK,CAACC,KAAK,IAAID,KAAK,CAACG,IAAI,IAAIV,WAAW,CAAA;AACxD,EAAA,MAAMW,QAAQ,GAAGV,WAAS,KAAKE,mBAAS,CAACM,QAAQ,CAAA;AAEjD,EAAA,MAAMG,OAAO,GAAGC,WAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,eAAe,GAAGD,WAAK,EAAE,CAAA;EAC/B,MAAME,OAAO,GAAGlB,EAAE,KAAK,IAAI,GAAIA,EAAE,IAAIiB,eAAe,GAAIE,SAAS,CAAA;AAEjE,EAAA,MAAMC,aAAa,GAAGJ,WAAK,EAAE,CAAA;EAE7B,oBACEK,cAAA,CAACC,oCAA2B,EAAA;AAACC,IAAAA,KAAK,EAAER,OAAQ;IAAAN,QAAA,eAC1CY,cAAA,CAACG,+BAAsB,EAAA;AAACD,MAAAA,KAAK,EAAEL,OAAQ;MAAAT,QAAA,eACrCY,cAAA,CAACI,iCAAwB,EAAA;AAACF,QAAAA,KAAK,EAAErB,OAAO,GAAGkB,aAAa,GAAGD,SAAU;QAAAV,QAAA,eACnEY,cAAA,CAACK,6BAAoB,EAAA;AAACH,UAAAA,KAAK,EAAET,QAAS;AAAAL,UAAAA,QAAA,eACpCkB,eAAA,CAAA,KAAA,EAAA;AACEnB,YAAAA,SAAS,EAAEoB,SAAI,CACb,oBAAoB,EACpB;AACE,cAAA,aAAa,EAAExB,WAAS,KAAKE,mBAAS,CAACuB,QAAQ;AAC/C,cAAA,aAAa,EAAEzB,WAAS,KAAKE,mBAAS,CAACwB,OAAO;AAC9C,cAAA,WAAW,EAAEhB,QAAQ;AACrB,cAAA,UAAU,EAAEV,WAAS,KAAKE,mBAAS,CAACC,OAAAA;aACrC,EACDC,SAAS,CACT;AAAAC,YAAAA,QAAA,GAEDR,KAAK,IAAI,IAAI,gBACZ0B,eAAA,CAACI,WAAK,EAAA;AAAC/B,cAAAA,EAAE,EAAEe,OAAQ;AAACiB,cAAAA,OAAO,EAAEd,OAAQ;cAAAT,QAAA,EAAA,CAClCR,KAAK,EACLQ,QAAQ,CAAA;aACJ,CAAC,GAERA,QACD,EAEAP,OAAO,iBACNmB,cAAA,CAACY,WAAW,EAAA;AAACC,cAAAA,IAAI,EAAE9B,WAAU;AAACJ,cAAAA,EAAE,EAAEoB,aAAc;AAAAX,cAAAA,QAAA,EAC7CP,OAAAA;AAAO,aACG,CACd,CAAA;WACE,CAAA;SACe,CAAA;OACE,CAAA;KACJ,CAAA;AAC1B,GAA6B,CAAC,CAAA;AAElC;;;;"}

package/build/field/Field.mjs

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useId } from 'react';
 import InlineAlert from '../inlineAlert/InlineAlert.mjs';
 import { FieldLabelIdContextProvider, InputIdContextProvider, InputDescribedByProvider, InputInvalidProvider } from '../inputs/contexts.mjs';
@@ -31,7 +31,7 @@ const Field = ({
         children: /*#__PURE__*/jsx(InputInvalidProvider, {
           value: hasError,
           children: /*#__PURE__*/jsxs("div", {
-            className: classNames('form-group d-block', {
+            className: clsx('form-group d-block', {
               'has-success': sentiment === Sentiment.POSITIVE,
               'has-warning': sentiment === Sentiment.WARNING,
               'has-error': hasError,

package/build/field/Field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useId } from 'react';\n\nimport { Sentiment } from '../common';\nimport InlineAlert from '../inlineAlert/InlineAlert';\nimport {\n  FieldLabelIdContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label/Label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\n  sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  message: propMessage,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = props.error || props.hint || propMessage;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? id ?? fallbackInputId : undefined;\n\n  const descriptionId = useId();\n\n  return (\n    <FieldLabelIdContextProvider value={labelId}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={message ? descriptionId : undefined}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={classNames(\n                'form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <Label id={labelId} htmlFor={inputId}>\n                  {label}\n                  {children}\n                </Label>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlineAlert type={sentiment} id={descriptionId}>\n                  {message}\n                </InlineAlert>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\n  );\n};\n"],"names":["Field","id","label","message","propMessage","sentiment","propType","Sentiment","NEUTRAL","className","children","props","error","NEGATIVE","hint","hasError","labelId","useId","fallbackInputId","inputId","undefined","descriptionId","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","classNames","POSITIVE","WARNING","Label","htmlFor","InlineAlert","type"],"mappings":";;;;;;;;AA4BO,MAAMA,KAAK,GAAGA,CAAC;EACpBC,EAAE;EACFC,KAAK;AACLC,EAAAA,OAAO,EAAEC,WAAW;AACpBC,EAAAA,SAAS,EAAEC,QAAQ,GAAGC,SAAS,CAACC,OAAO;EACvCC,SAAS;EACTC,QAAQ;EACR,GAAGC,KAAAA;AAAK,CACG,KAAI;EACf,MAAMN,SAAS,GAAGM,KAAK,CAACC,KAAK,GAAGL,SAAS,CAACM,QAAQ,GAAGP,QAAQ,CAAA;EAC7D,MAAMH,OAAO,GAAGQ,KAAK,CAACC,KAAK,IAAID,KAAK,CAACG,IAAI,IAAIV,WAAW,CAAA;AACxD,EAAA,MAAMW,QAAQ,GAAGV,SAAS,KAAKE,SAAS,CAACM,QAAQ,CAAA;AAEjD,EAAA,MAAMG,OAAO,GAAGC,KAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,eAAe,GAAGD,KAAK,EAAE,CAAA;EAC/B,MAAME,OAAO,GAAGlB,EAAE,KAAK,IAAI,GAAGA,EAAE,IAAIiB,eAAe,GAAGE,SAAS,CAAA;AAE/D,EAAA,MAAMC,aAAa,GAAGJ,KAAK,EAAE,CAAA;EAE7B,oBACEK,GAAA,CAACC,2BAA2B,EAAA;AAACC,IAAAA,KAAK,EAAER,OAAQ;IAAAN,QAAA,eAC1CY,GAAA,CAACG,sBAAsB,EAAA;AAACD,MAAAA,KAAK,EAAEL,OAAQ;MAAAT,QAAA,eACrCY,GAAA,CAACI,wBAAwB,EAAA;AAACF,QAAAA,KAAK,EAAErB,OAAO,GAAGkB,aAAa,GAAGD,SAAU;QAAAV,QAAA,eACnEY,GAAA,CAACK,oBAAoB,EAAA;AAACH,UAAAA,KAAK,EAAET,QAAS;AAAAL,UAAAA,QAAA,eACpCkB,IAAA,CAAA,KAAA,EAAA;AACEnB,YAAAA,SAAS,EAAEoB,UAAU,CACnB,oBAAoB,EACpB;AACE,cAAA,aAAa,EAAExB,SAAS,KAAKE,SAAS,CAACuB,QAAQ;AAC/C,cAAA,aAAa,EAAEzB,SAAS,KAAKE,SAAS,CAACwB,OAAO;AAC9C,cAAA,WAAW,EAAEhB,QAAQ;AACrB,cAAA,UAAU,EAAEV,SAAS,KAAKE,SAAS,CAACC,OAAAA;aACrC,EACDC,SAAS,CACT;AAAAC,YAAAA,QAAA,GAEDR,KAAK,IAAI,IAAI,gBACZ0B,IAAA,CAACI,KAAK,EAAA;AAAC/B,cAAAA,EAAE,EAAEe,OAAQ;AAACiB,cAAAA,OAAO,EAAEd,OAAQ;cAAAT,QAAA,EAAA,CAClCR,KAAK,EACLQ,QAAQ,CAAA;aACJ,CAAC,GAERA,QACD,EAEAP,OAAO,iBACNmB,GAAA,CAACY,WAAW,EAAA;AAACC,cAAAA,IAAI,EAAE9B,SAAU;AAACJ,cAAAA,EAAE,EAAEoB,aAAc;AAAAX,cAAAA,QAAA,EAC7CP,OAAAA;AAAO,aACG,CACd,CAAA;WACE,CAAA;SACe,CAAA;OACE,CAAA;KACJ,CAAA;AAC1B,GAA6B,CAAC,CAAA;AAElC;;;;"}
+{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId } from 'react';\n\nimport { Sentiment } from '../common';\nimport InlineAlert from '../inlineAlert/InlineAlert';\nimport {\n  FieldLabelIdContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label/Label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\n  sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  message: propMessage,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = props.error || props.hint || propMessage;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const descriptionId = useId();\n\n  return (\n    <FieldLabelIdContextProvider value={labelId}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={message ? descriptionId : undefined}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <Label id={labelId} htmlFor={inputId}>\n                  {label}\n                  {children}\n                </Label>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlineAlert type={sentiment} id={descriptionId}>\n                  {message}\n                </InlineAlert>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelIdContextProvider>\n  );\n};\n"],"names":["Field","id","label","message","propMessage","sentiment","propType","Sentiment","NEUTRAL","className","children","props","error","NEGATIVE","hint","hasError","labelId","useId","fallbackInputId","inputId","undefined","descriptionId","_jsx","FieldLabelIdContextProvider","value","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","Label","htmlFor","InlineAlert","type"],"mappings":";;;;;;;;AA4BO,MAAMA,KAAK,GAAGA,CAAC;EACpBC,EAAE;EACFC,KAAK;AACLC,EAAAA,OAAO,EAAEC,WAAW;AACpBC,EAAAA,SAAS,EAAEC,QAAQ,GAAGC,SAAS,CAACC,OAAO;EACvCC,SAAS;EACTC,QAAQ;EACR,GAAGC,KAAAA;AAAK,CACG,KAAI;EACf,MAAMN,SAAS,GAAGM,KAAK,CAACC,KAAK,GAAGL,SAAS,CAACM,QAAQ,GAAGP,QAAQ,CAAA;EAC7D,MAAMH,OAAO,GAAGQ,KAAK,CAACC,KAAK,IAAID,KAAK,CAACG,IAAI,IAAIV,WAAW,CAAA;AACxD,EAAA,MAAMW,QAAQ,GAAGV,SAAS,KAAKE,SAAS,CAACM,QAAQ,CAAA;AAEjD,EAAA,MAAMG,OAAO,GAAGC,KAAK,EAAE,CAAA;AAEvB,EAAA,MAAMC,eAAe,GAAGD,KAAK,EAAE,CAAA;EAC/B,MAAME,OAAO,GAAGlB,EAAE,KAAK,IAAI,GAAIA,EAAE,IAAIiB,eAAe,GAAIE,SAAS,CAAA;AAEjE,EAAA,MAAMC,aAAa,GAAGJ,KAAK,EAAE,CAAA;EAE7B,oBACEK,GAAA,CAACC,2BAA2B,EAAA;AAACC,IAAAA,KAAK,EAAER,OAAQ;IAAAN,QAAA,eAC1CY,GAAA,CAACG,sBAAsB,EAAA;AAACD,MAAAA,KAAK,EAAEL,OAAQ;MAAAT,QAAA,eACrCY,GAAA,CAACI,wBAAwB,EAAA;AAACF,QAAAA,KAAK,EAAErB,OAAO,GAAGkB,aAAa,GAAGD,SAAU;QAAAV,QAAA,eACnEY,GAAA,CAACK,oBAAoB,EAAA;AAACH,UAAAA,KAAK,EAAET,QAAS;AAAAL,UAAAA,QAAA,eACpCkB,IAAA,CAAA,KAAA,EAAA;AACEnB,YAAAA,SAAS,EAAEoB,IAAI,CACb,oBAAoB,EACpB;AACE,cAAA,aAAa,EAAExB,SAAS,KAAKE,SAAS,CAACuB,QAAQ;AAC/C,cAAA,aAAa,EAAEzB,SAAS,KAAKE,SAAS,CAACwB,OAAO;AAC9C,cAAA,WAAW,EAAEhB,QAAQ;AACrB,cAAA,UAAU,EAAEV,SAAS,KAAKE,SAAS,CAACC,OAAAA;aACrC,EACDC,SAAS,CACT;AAAAC,YAAAA,QAAA,GAEDR,KAAK,IAAI,IAAI,gBACZ0B,IAAA,CAACI,KAAK,EAAA;AAAC/B,cAAAA,EAAE,EAAEe,OAAQ;AAACiB,cAAAA,OAAO,EAAEd,OAAQ;cAAAT,QAAA,EAAA,CAClCR,KAAK,EACLQ,QAAQ,CAAA;aACJ,CAAC,GAERA,QACD,EAEAP,OAAO,iBACNmB,GAAA,CAACY,WAAW,EAAA;AAACC,cAAAA,IAAI,EAAE9B,SAAU;AAACJ,cAAAA,EAAE,EAAEoB,aAAc;AAAAX,cAAAA,QAAA,EAC7CP,OAAAA;AAAO,aACG,CACd,CAAA;WACE,CAAA;SACe,CAAA;OACE,CAAA;KACJ,CAAA;AAC1B,GAA6B,CAAC,CAAA;AAElC;;;;"}

package/build/flowNavigation/FlowNavigation.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var classNames = require('classnames');
+var clsx = require('clsx');
 var reactIntl = require('react-intl');
 var CloseButton = require('../common/closeButton/CloseButton.js');
 var FlowHeader = require('../common/flowHeader/FlowHeader.js');
@@ -14,10 +14,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var breakpoint = require('../common/propsValues/breakpoint.js');
 var layouts = require('../common/propsValues/layouts.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-
 const FlowNavigation = ({
   activeStep = 0,
   avatar,
@@ -37,11 +33,11 @@ const FlowNavigation = ({
   const newAvatar = done ? null : avatar;
   const displayGoBack = onGoBack != null && activeStep > 0;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classNames__default.default('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {
+    className: clsx.clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {
       'np-flow-navigation--border-bottom': !done
     }),
     children: /*#__PURE__*/jsxRuntime.jsx(FlowHeader, {
-      className: classNames__default.default('np-flow-navigation__content p-x-3', screenSm == null ? 'np-flow-navigation--hidden' : {
+      className: clsx.clsx('np-flow-navigation__content p-x-3', screenSm == null ? 'np-flow-navigation--hidden' : {
         'np-flow-navigation--xs-max': !screenSm,
         // Size switches on parent container which may or may not have the same size as the window.
         'np-flow-navigation--sm': screenSm,
@@ -69,7 +65,7 @@ const FlowNavigation = ({
       bottomContent: !done && /*#__PURE__*/jsxRuntime.jsx(Stepper, {
         activeStep: activeStep,
         steps: steps,
-        className: classNames__default.default('np-flow-navigation__stepper')
+        className: clsx.clsx('np-flow-navigation__stepper')
       }),
       layout: !screenLg ? layouts.Layout.VERTICAL : layouts.Layout.HORIZONTAL
     })

package/build/flowNavigation/FlowNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlowNavigation.js","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useIntl } from 'react-intl';\n\nimport { Breakpoint, Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport BackButton from './backButton';\n\nexport interface FlowNavigationProps {\n  activeStep?: number;\n  avatar?: React.ReactNode;\n  logo?: React.ReactNode;\n  done?: boolean;\n  /** Called when the close button is clicked. If not provided the close button won't show */\n  onClose?: () => void;\n  /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n  onGoBack?: () => void;\n  /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n  steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n  activeStep = 0,\n  avatar,\n  logo = <Logo />,\n  done = false,\n  onClose,\n  onGoBack,\n  steps,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const newAvatar = done ? null : avatar;\n\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  return (\n    <div\n      className={classNames(\n        'np-flow-navigation d-flex align-items-center justify-content-center p-y-3',\n        { 'np-flow-navigation--border-bottom': !done },\n      )}\n    >\n      <FlowHeader\n        className={classNames(\n          'np-flow-navigation__content p-x-3',\n          screenSm == null\n            ? 'np-flow-navigation--hidden'\n            : {\n                'np-flow-navigation--xs-max': !screenSm,\n                // Size switches on parent container which may or may not have the same size as the window.\n                'np-flow-navigation--sm': screenSm,\n                'np-flow-navigation--lg': screenLg,\n              },\n        )}\n        leftContent={\n          <>\n            {!screenSm && displayGoBack ? (\n              <BackButton aria-label={intl.formatMessage(messages.back)} onClick={onGoBack} />\n            ) : (\n              <div className=\"np-flow-header__left\">{logo}</div>\n            )}\n            {!screenSm && !done && (\n              <AnimatedLabel\n                className=\"m-x-1\"\n                labels={steps.map((step) => step.label)}\n                activeLabel={activeStep}\n              />\n            )}\n          </>\n        }\n        rightContent={\n          <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n            {newAvatar}\n            {newAvatar && closeButton && <span className=\"m-x-1\" />}\n            {closeButton}\n          </div>\n        }\n        bottomContent={\n          !done && (\n            <Stepper\n              activeStep={activeStep}\n              steps={steps}\n              className={classNames('np-flow-navigation__stepper')}\n            />\n          )\n        }\n        layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n      />\n    </div>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","classNames","children","FlowHeader","leftContent","_jsxs","_Fragment","BackButton","formatMessage","messages","back","AnimatedLabel","labels","map","step","label","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":"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"}
+{"version":3,"file":"FlowNavigation.js","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Breakpoint, Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport BackButton from './backButton';\n\nexport interface FlowNavigationProps {\n  activeStep?: number;\n  avatar?: React.ReactNode;\n  logo?: React.ReactNode;\n  done?: boolean;\n  /** Called when the close button is clicked. If not provided the close button won't show */\n  onClose?: () => void;\n  /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n  onGoBack?: () => void;\n  /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n  steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n  activeStep = 0,\n  avatar,\n  logo = <Logo />,\n  done = false,\n  onClose,\n  onGoBack,\n  steps,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const newAvatar = done ? null : avatar;\n\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  return (\n    <div\n      className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n        'np-flow-navigation--border-bottom': !done,\n      })}\n    >\n      <FlowHeader\n        className={clsx(\n          'np-flow-navigation__content p-x-3',\n          screenSm == null\n            ? 'np-flow-navigation--hidden'\n            : {\n                'np-flow-navigation--xs-max': !screenSm,\n                // Size switches on parent container which may or may not have the same size as the window.\n                'np-flow-navigation--sm': screenSm,\n                'np-flow-navigation--lg': screenLg,\n              },\n        )}\n        leftContent={\n          <>\n            {!screenSm && displayGoBack ? (\n              <BackButton aria-label={intl.formatMessage(messages.back)} onClick={onGoBack} />\n            ) : (\n              <div className=\"np-flow-header__left\">{logo}</div>\n            )}\n            {!screenSm && !done && (\n              <AnimatedLabel\n                className=\"m-x-1\"\n                labels={steps.map((step) => step.label)}\n                activeLabel={activeStep}\n              />\n            )}\n          </>\n        }\n        rightContent={\n          <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n            {newAvatar}\n            {newAvatar && closeButton && <span className=\"m-x-1\" />}\n            {closeButton}\n          </div>\n        }\n        bottomContent={\n          !done && (\n            <Stepper\n              activeStep={activeStep}\n              steps={steps}\n              className={clsx('np-flow-navigation__stepper')}\n            />\n          )\n        }\n        layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n      />\n    </div>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","BackButton","formatMessage","messages","back","AnimatedLabel","labels","map","step","label","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":"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"}

package/build/flowNavigation/FlowNavigation.mjs

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useIntl } from 'react-intl';
 import { CloseButton } from '../common/closeButton/CloseButton.mjs';
 import FlowHeader from '../common/flowHeader/FlowHeader.mjs';
@@ -31,11 +31,11 @@ const FlowNavigation = ({
   const newAvatar = done ? null : avatar;
   const displayGoBack = onGoBack != null && activeStep > 0;
   return /*#__PURE__*/jsx("div", {
-    className: classNames('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {
+    className: clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {
       'np-flow-navigation--border-bottom': !done
     }),
     children: /*#__PURE__*/jsx(FlowHeader, {
-      className: classNames('np-flow-navigation__content p-x-3', screenSm == null ? 'np-flow-navigation--hidden' : {
+      className: clsx('np-flow-navigation__content p-x-3', screenSm == null ? 'np-flow-navigation--hidden' : {
         'np-flow-navigation--xs-max': !screenSm,
         // Size switches on parent container which may or may not have the same size as the window.
         'np-flow-navigation--sm': screenSm,
@@ -63,7 +63,7 @@ const FlowNavigation = ({
       bottomContent: !done && /*#__PURE__*/jsx(Stepper, {
         activeStep: activeStep,
         steps: steps,
-        className: classNames('np-flow-navigation__stepper')
+        className: clsx('np-flow-navigation__stepper')
       }),
       layout: !screenLg ? Layout.VERTICAL : Layout.HORIZONTAL
     })