@transferwise/components 46.157.1 → 46.159.0

package/build/_deprecated/OverlayHeader/OverlayHeader.js

@@ -2,32 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var clsx = require('clsx');
-require('../../common/theme.js');
-require('../../common/direction.js');
-require('@transferwise/neptune-tokens');
-require('../../common/PropsValues/control.js');
-var size = require('../../common/PropsValues/size.js');
-require('../../common/PropsValues/typography.js');
-require('../../common/PropsValues/width.js');
-require('../../common/PropsValues/type.js');
-require('../../common/PropsValues/dateMode.js');
-require('../../common/PropsValues/monthFormat.js');
-require('../../common/PropsValues/position.js');
-require('../../common/PropsValues/layouts.js');
-require('../../common/PropsValues/status.js');
-require('../../common/PropsValues/sentiment.js');
-require('../../common/PropsValues/profileType.js');
-require('../../common/PropsValues/variant.js');
-require('../../common/PropsValues/scroll.js');
-require('../../common/PropsValues/markdownNodeType.js');
-require('../../common/fileType.js');
-require('@transferwise/formatting');
-var CloseButton = require('../../common/CloseButton/CloseButton.js');
-require('react');
-var jsxRuntime = require('react/jsx-runtime');
-var FlowHeader = require('../../common/FlowHeader/FlowHeader.js');
 var Logo = require('../../Logo/Logo.js');
+var FlowNavigation = require('../../FlowNavigation/FlowNavigation.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 const defaultLogo = /*#__PURE__*/jsxRuntime.jsx(Logo.default, {});
 /**
@@ -38,22 +15,10 @@ function OverlayHeader({
   onClose,
   logo = defaultLogo
 }) {
-  const closeButton = onClose && /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
-    size: size.Size.LARGE,
-    onClick: onClose
-  });
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "np-overlay-header d-flex justify-content-center",
-    children: /*#__PURE__*/jsxRuntime.jsx(FlowHeader.default, {
-      className: "np-overlay-header__content p-a-3",
-      leftContent: logo,
-      rightContent: /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: clsx.clsx('d-flex', 'align-items-center', 'order-2'),
-        children: [avatar, avatar && closeButton && /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: clsx.clsx('m-x-1')
-        }), closeButton]
-      })
-    })
+  return /*#__PURE__*/jsxRuntime.jsx(FlowNavigation.default, {
+    avatar,
+    onClose,
+    logo
   });
 }
 

package/build/_deprecated/OverlayHeader/OverlayHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayHeader.js","sources":["../../../src/_deprecated/OverlayHeader/OverlayHeader.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Size } from '../../common';\nimport { CloseButton } from '../../common/CloseButton';\nimport FlowHeader from '../../common/FlowHeader';\nimport Logo from '../../Logo';\n\n/**\n * @deprecated Use `FlowNavigation` component instead, with `steps={[]}`\n */\nexport interface OverlayHeaderProps {\n  /** An Avatar */\n  avatar?: React.ReactNode;\n  logo?: React.ReactNode;\n  /** Function called when the close is clicked */\n  onClose?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nconst defaultLogo = <Logo />;\n\n/**\n * @deprecated Use `FlowNavigation` component instead\n */\nexport default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: OverlayHeaderProps) {\n  const closeButton = onClose && <CloseButton size={Size.LARGE} onClick={onClose} />;\n  return (\n    <div className=\"np-overlay-header d-flex justify-content-center\">\n      <FlowHeader\n        className=\"np-overlay-header__content p-a-3\"\n        leftContent={logo}\n        rightContent={\n          <div className={clsx('d-flex', 'align-items-center', 'order-2')}>\n            {avatar}\n            {avatar && closeButton && <span className={clsx('m-x-1')} />}\n            {closeButton}\n          </div>\n        }\n      />\n    </div>\n  );\n}\n"],"names":["defaultLogo","_jsx","Logo","OverlayHeader","avatar","onClose","logo","closeButton","CloseButton","size","Size","LARGE","onClick","className","children","FlowHeader","leftContent","rightContent","_jsxs","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,WAAW,gBAAGC,cAAA,CAACC,YAAI,KAAG;AAE5B;;AAEG;AACW,SAAUC,aAAaA,CAAC;EAAEC,MAAM;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAGN;AAAW,CAAsB,EAAA;AAC/F,EAAA,MAAMO,WAAW,GAAGF,OAAO,iBAAIJ,cAAA,CAACO,uBAAW,EAAA;IAACC,IAAI,EAAEC,SAAI,CAACC,KAAM;AAACC,IAAAA,OAAO,EAAEP;AAAQ,GAAA,CAAG;AAClF,EAAA,oBACEJ,cAAA,CAAA,KAAA,EAAA;AAAKY,IAAAA,SAAS,EAAC,iDAAiD;IAAAC,QAAA,eAC9Db,cAAA,CAACc,kBAAU,EAAA;AACTF,MAAAA,SAAS,EAAC,kCAAkC;AAC5CG,MAAAA,WAAW,EAAEV,IAAK;AAClBW,MAAAA,YAAY,eACVC,eAAA,CAAA,KAAA,EAAA;QAAKL,SAAS,EAAEM,SAAI,CAAC,QAAQ,EAAE,oBAAoB,EAAE,SAAS,CAAE;AAAAL,QAAAA,QAAA,GAC7DV,MAAM,EACNA,MAAM,IAAIG,WAAW,iBAAIN,cAAA,CAAA,MAAA,EAAA;UAAMY,SAAS,EAAEM,SAAI,CAAC,OAAO;UAAK,EAC3DZ,WAAW;OACT;KACN;AAEL,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"OverlayHeader.js","sources":["../../../src/_deprecated/OverlayHeader/OverlayHeader.tsx"],"sourcesContent":["import Logo from '../../Logo';\nimport FlowNavigation from '../../FlowNavigation';\n\n/**\n * @deprecated Use `FlowNavigation` component instead, with `steps={[]}`\n */\nexport interface OverlayHeaderProps {\n  /** An Avatar */\n  avatar?: React.ReactNode;\n  logo?: React.ReactNode;\n  /** Function called when the close is clicked */\n  onClose?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nconst defaultLogo = <Logo />;\n\n/**\n * @deprecated Use `FlowNavigation` component instead\n */\nexport default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: OverlayHeaderProps) {\n  return <FlowNavigation {...{ avatar, onClose, logo }} />;\n}\n"],"names":["defaultLogo","_jsx","Logo","OverlayHeader","avatar","onClose","logo","FlowNavigation"],"mappings":";;;;;;;;AAcA,MAAMA,WAAW,gBAAGC,cAAA,CAACC,YAAI,KAAG;AAE5B;;AAEG;AACW,SAAUC,aAAaA,CAAC;EAAEC,MAAM;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAGN;AAAW,CAAsB,EAAA;EAC/F,oBAAOC,cAAA,CAACM,sBAAc,EAAA;IAAOH,MAAM;IAAEC,OAAO;AAAEC,IAAAA;AAAI,IAAM;AAC1D;;;;"}

package/build/_deprecated/OverlayHeader/OverlayHeader.mjs

@@ -1,29 +1,6 @@
-import { clsx } from 'clsx';
-import '../../common/theme.mjs';
-import '../../common/direction.mjs';
-import '@transferwise/neptune-tokens';
-import '../../common/PropsValues/control.mjs';
-import { Size } from '../../common/PropsValues/size.mjs';
-import '../../common/PropsValues/typography.mjs';
-import '../../common/PropsValues/width.mjs';
-import '../../common/PropsValues/type.mjs';
-import '../../common/PropsValues/dateMode.mjs';
-import '../../common/PropsValues/monthFormat.mjs';
-import '../../common/PropsValues/position.mjs';
-import '../../common/PropsValues/layouts.mjs';
-import '../../common/PropsValues/status.mjs';
-import '../../common/PropsValues/sentiment.mjs';
-import '../../common/PropsValues/profileType.mjs';
-import '../../common/PropsValues/variant.mjs';
-import '../../common/PropsValues/scroll.mjs';
-import '../../common/PropsValues/markdownNodeType.mjs';
-import '../../common/fileType.mjs';
-import '@transferwise/formatting';
-import { CloseButton } from '../../common/CloseButton/CloseButton.mjs';
-import 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import FlowHeader from '../../common/FlowHeader/FlowHeader.mjs';
 import Logo from '../../Logo/Logo.mjs';
+import FlowNavigation from '../../FlowNavigation/FlowNavigation.mjs';
+import { jsx } from 'react/jsx-runtime';
 
 const defaultLogo = /*#__PURE__*/jsx(Logo, {});
 /**
@@ -34,22 +11,10 @@ function OverlayHeader({
   onClose,
   logo = defaultLogo
 }) {
-  const closeButton = onClose && /*#__PURE__*/jsx(CloseButton, {
-    size: Size.LARGE,
-    onClick: onClose
-  });
-  return /*#__PURE__*/jsx("div", {
-    className: "np-overlay-header d-flex justify-content-center",
-    children: /*#__PURE__*/jsx(FlowHeader, {
-      className: "np-overlay-header__content p-a-3",
-      leftContent: logo,
-      rightContent: /*#__PURE__*/jsxs("div", {
-        className: clsx('d-flex', 'align-items-center', 'order-2'),
-        children: [avatar, avatar && closeButton && /*#__PURE__*/jsx("span", {
-          className: clsx('m-x-1')
-        }), closeButton]
-      })
-    })
+  return /*#__PURE__*/jsx(FlowNavigation, {
+    avatar,
+    onClose,
+    logo
   });
 }
 

package/build/_deprecated/OverlayHeader/OverlayHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayHeader.mjs","sources":["../../../src/_deprecated/OverlayHeader/OverlayHeader.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Size } from '../../common';\nimport { CloseButton } from '../../common/CloseButton';\nimport FlowHeader from '../../common/FlowHeader';\nimport Logo from '../../Logo';\n\n/**\n * @deprecated Use `FlowNavigation` component instead, with `steps={[]}`\n */\nexport interface OverlayHeaderProps {\n  /** An Avatar */\n  avatar?: React.ReactNode;\n  logo?: React.ReactNode;\n  /** Function called when the close is clicked */\n  onClose?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nconst defaultLogo = <Logo />;\n\n/**\n * @deprecated Use `FlowNavigation` component instead\n */\nexport default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: OverlayHeaderProps) {\n  const closeButton = onClose && <CloseButton size={Size.LARGE} onClick={onClose} />;\n  return (\n    <div className=\"np-overlay-header d-flex justify-content-center\">\n      <FlowHeader\n        className=\"np-overlay-header__content p-a-3\"\n        leftContent={logo}\n        rightContent={\n          <div className={clsx('d-flex', 'align-items-center', 'order-2')}>\n            {avatar}\n            {avatar && closeButton && <span className={clsx('m-x-1')} />}\n            {closeButton}\n          </div>\n        }\n      />\n    </div>\n  );\n}\n"],"names":["defaultLogo","_jsx","Logo","OverlayHeader","avatar","onClose","logo","closeButton","CloseButton","size","Size","LARGE","onClick","className","children","FlowHeader","leftContent","rightContent","_jsxs","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,WAAW,gBAAGC,GAAA,CAACC,IAAI,KAAG;AAE5B;;AAEG;AACW,SAAUC,aAAaA,CAAC;EAAEC,MAAM;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAGN;AAAW,CAAsB,EAAA;AAC/F,EAAA,MAAMO,WAAW,GAAGF,OAAO,iBAAIJ,GAAA,CAACO,WAAW,EAAA;IAACC,IAAI,EAAEC,IAAI,CAACC,KAAM;AAACC,IAAAA,OAAO,EAAEP;AAAQ,GAAA,CAAG;AAClF,EAAA,oBACEJ,GAAA,CAAA,KAAA,EAAA;AAAKY,IAAAA,SAAS,EAAC,iDAAiD;IAAAC,QAAA,eAC9Db,GAAA,CAACc,UAAU,EAAA;AACTF,MAAAA,SAAS,EAAC,kCAAkC;AAC5CG,MAAAA,WAAW,EAAEV,IAAK;AAClBW,MAAAA,YAAY,eACVC,IAAA,CAAA,KAAA,EAAA;QAAKL,SAAS,EAAEM,IAAI,CAAC,QAAQ,EAAE,oBAAoB,EAAE,SAAS,CAAE;AAAAL,QAAAA,QAAA,GAC7DV,MAAM,EACNA,MAAM,IAAIG,WAAW,iBAAIN,GAAA,CAAA,MAAA,EAAA;UAAMY,SAAS,EAAEM,IAAI,CAAC,OAAO;UAAK,EAC3DZ,WAAW;OACT;KACN;AAEL,GAAK,CAAC;AAEV;;;;"}
+{"version":3,"file":"OverlayHeader.mjs","sources":["../../../src/_deprecated/OverlayHeader/OverlayHeader.tsx"],"sourcesContent":["import Logo from '../../Logo';\nimport FlowNavigation from '../../FlowNavigation';\n\n/**\n * @deprecated Use `FlowNavigation` component instead, with `steps={[]}`\n */\nexport interface OverlayHeaderProps {\n  /** An Avatar */\n  avatar?: React.ReactNode;\n  logo?: React.ReactNode;\n  /** Function called when the close is clicked */\n  onClose?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nconst defaultLogo = <Logo />;\n\n/**\n * @deprecated Use `FlowNavigation` component instead\n */\nexport default function OverlayHeader({ avatar, onClose, logo = defaultLogo }: OverlayHeaderProps) {\n  return <FlowNavigation {...{ avatar, onClose, logo }} />;\n}\n"],"names":["defaultLogo","_jsx","Logo","OverlayHeader","avatar","onClose","logo","FlowNavigation"],"mappings":";;;;AAcA,MAAMA,WAAW,gBAAGC,GAAA,CAACC,IAAI,KAAG;AAE5B;;AAEG;AACW,SAAUC,aAAaA,CAAC;EAAEC,MAAM;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAGN;AAAW,CAAsB,EAAA;EAC/F,oBAAOC,GAAA,CAACM,cAAc,EAAA;IAAOH,MAAM;IAAEC,OAAO;AAAEC,IAAAA;AAAI,IAAM;AAC1D;;;;"}

package/build/common/Panel/Panel.js

@@ -40,7 +40,15 @@ const fallbackPlacements = {
   [position.Position.TOP]: [position.Position.BOTTOM, position.Position.RIGHT, position.Position.LEFT],
   [position.Position.BOTTOM]: [position.Position.TOP, position.Position.RIGHT, position.Position.LEFT],
   [position.Position.LEFT]: [position.Position.RIGHT, position.Position.TOP, position.Position.BOTTOM],
-  [position.Position.RIGHT]: [position.Position.LEFT, position.Position.TOP, position.Position.BOTTOM]
+  [position.Position.RIGHT]: [position.Position.LEFT, position.Position.TOP, position.Position.BOTTOM],
+  'top-start': ['bottom-start', 'top-end', 'bottom-end'],
+  'top-end': ['bottom-end', 'top-start', 'bottom-start'],
+  'bottom-start': ['top-start', 'bottom-end', 'top-end'],
+  'bottom-end': ['top-end', 'bottom-start', 'top-start'],
+  'left-start': ['right-start', 'left-end', 'right-end'],
+  'left-end': ['right-end', 'left-start', 'right-start'],
+  'right-start': ['left-start', 'right-end', 'left-end'],
+  'right-end': ['left-end', 'right-start', 'left-start']
 };
 const Panel = /*#__PURE__*/React.forwardRef(function Panel({
   arrow = false,
@@ -56,13 +64,14 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
   ...rest
 }, reference) {
   const arrowRef = React.useRef(null);
+  const floatingPlacement = position.positionToPlacement(position$1);
   const middleware = [];
   if (arrow) {
     middleware.push(react.offset(POPOVER_OFFSET));
   }
-  if (flip && fallbackPlacements[position$1]) {
+  if (flip && fallbackPlacements[floatingPlacement]) {
     middleware.push(react.flip({
-      fallbackPlacements: fallbackPlacements[position$1]
+      fallbackPlacements: fallbackPlacements[floatingPlacement]
     }));
   }
   if (altAxis) {
@@ -91,7 +100,7 @@ const Panel = /*#__PURE__*/React.forwardRef(function Panel({
     placement,
     middlewareData
   } = react.useFloating({
-    placement: position$1,
+    placement: floatingPlacement,
     middleware,
     elements: {
       reference: anchorRef.current

package/build/common/Panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../../../src/common/Panel/Panel.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip as flipMiddleware,\n  offset,\n  type Placement,\n  shift,\n  size as sizeMiddleware,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  MutableRefObject,\n  PropsWithChildren,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../Dimmer';\nimport { OverlayIdContext } from '../../Provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = 16;\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements: Record<string, Placement[]> = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n  anchorRef: MutableRefObject<Element | null>;\n  anchorWidth?: boolean;\n  considerHeight?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    considerHeight = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const middleware = [];\n\n  if (arrow) {\n    middleware.push(offset(POPOVER_OFFSET));\n  }\n\n  if (flip && fallbackPlacements[position]) {\n    middleware.push(\n      flipMiddleware({\n        fallbackPlacements: fallbackPlacements[position],\n      }),\n    );\n  }\n\n  if (altAxis) {\n    middleware.push(shift());\n  }\n\n  if (arrow) {\n    middleware.push(arrowMiddleware({ element: arrowRef, padding: 8 }));\n  }\n\n  if (considerHeight) {\n    middleware.push(\n      sizeMiddleware({\n        padding: POPOVER_OFFSET,\n        apply: ({ elements, availableHeight }) => {\n          elements.floating.style.setProperty(\n            '--np-panel-available-height',\n            `${availableHeight}px`,\n          );\n        },\n      }),\n    );\n  }\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: position,\n    middleware,\n    elements: {\n      reference: anchorRef.current,\n    },\n    whileElementsMounted: open ? autoUpdate : undefined,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={refs.setFloating}\n        role=\"dialog\"\n        style={floatingStyles}\n        data-popper-placement={placement}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","considerHeight","rest","reference","arrowRef","useRef","middleware","push","offset","flipMiddleware","shift","arrowMiddleware","element","padding","sizeMiddleware","apply","elements","availableHeight","floating","style","setProperty","refs","floatingStyles","placement","middlewareData","useFloating","current","whileElementsMounted","autoUpdate","undefined","arrowStyle","x","left","y","top","contentStyle","width","clientWidth","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","setFloating","role","className","clsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Panel.js","sources":["../../../src/common/Panel/Panel.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip as flipMiddleware,\n  offset,\n  type Placement,\n  shift,\n  size as sizeMiddleware,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  PropsWithChildren,\n  RefObject,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Position, type FloatingPlacement, positionToPlacement } from '..';\nimport Dimmer from '../../Dimmer';\nimport { OverlayIdContext } from '../../Provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = 16;\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements: Record<Placement, Placement[]> = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n  'top-start': ['bottom-start', 'top-end', 'bottom-end'],\n  'top-end': ['bottom-end', 'top-start', 'bottom-start'],\n  'bottom-start': ['top-start', 'bottom-end', 'top-end'],\n  'bottom-end': ['top-end', 'bottom-start', 'top-start'],\n  'left-start': ['right-start', 'left-end', 'right-end'],\n  'left-end': ['right-end', 'left-start', 'right-start'],\n  'right-start': ['left-start', 'right-end', 'left-end'],\n  'right-end': ['left-end', 'right-start', 'left-start'],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: FloatingPlacement;\n  anchorRef: RefObject<Element | null>;\n  anchorWidth?: boolean;\n  considerHeight?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    considerHeight = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n  const floatingPlacement = positionToPlacement(position);\n\n  const middleware = [];\n\n  if (arrow) {\n    middleware.push(offset(POPOVER_OFFSET));\n  }\n\n  if (flip && fallbackPlacements[floatingPlacement]) {\n    middleware.push(\n      flipMiddleware({\n        fallbackPlacements: fallbackPlacements[floatingPlacement],\n      }),\n    );\n  }\n\n  if (altAxis) {\n    middleware.push(shift());\n  }\n\n  if (arrow) {\n    middleware.push(arrowMiddleware({ element: arrowRef, padding: 8 }));\n  }\n\n  if (considerHeight) {\n    middleware.push(\n      sizeMiddleware({\n        padding: POPOVER_OFFSET,\n        apply: ({ elements, availableHeight }) => {\n          elements.floating.style.setProperty(\n            '--np-panel-available-height',\n            `${availableHeight}px`,\n          );\n        },\n      }),\n    );\n  }\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: floatingPlacement,\n    middleware,\n    elements: {\n      reference: anchorRef.current,\n    },\n    whileElementsMounted: open ? autoUpdate : undefined,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={refs.setFloating}\n        role=\"dialog\"\n        style={floatingStyles}\n        data-popper-placement={placement}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","considerHeight","rest","reference","arrowRef","useRef","floatingPlacement","positionToPlacement","middleware","push","offset","flipMiddleware","shift","arrowMiddleware","element","padding","sizeMiddleware","apply","elements","availableHeight","floating","style","setProperty","refs","floatingStyles","placement","middlewareData","useFloating","current","whileElementsMounted","autoUpdate","undefined","arrowStyle","x","left","y","top","contentStyle","width","clientWidth","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","setFloating","role","className","clsx","_jsxs"],"mappings":"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"}

package/build/common/Panel/Panel.mjs

@@ -11,7 +11,7 @@ import '../PropsValues/width.mjs';
 import '../PropsValues/type.mjs';
 import '../PropsValues/dateMode.mjs';
 import '../PropsValues/monthFormat.mjs';
-import { Position } from '../PropsValues/position.mjs';
+import { Position, positionToPlacement } from '../PropsValues/position.mjs';
 import '../PropsValues/layouts.mjs';
 import '../PropsValues/status.mjs';
 import '../PropsValues/sentiment.mjs';
@@ -36,7 +36,15 @@ const fallbackPlacements = {
   [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],
   [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],
   [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],
-  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM]
+  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],
+  'top-start': ['bottom-start', 'top-end', 'bottom-end'],
+  'top-end': ['bottom-end', 'top-start', 'bottom-start'],
+  'bottom-start': ['top-start', 'bottom-end', 'top-end'],
+  'bottom-end': ['top-end', 'bottom-start', 'top-start'],
+  'left-start': ['right-start', 'left-end', 'right-end'],
+  'left-end': ['right-end', 'left-start', 'right-start'],
+  'right-start': ['left-start', 'right-end', 'left-end'],
+  'right-end': ['left-end', 'right-start', 'left-start']
 };
 const Panel = /*#__PURE__*/forwardRef(function Panel({
   arrow: arrow$1 = false,
@@ -52,13 +60,14 @@ const Panel = /*#__PURE__*/forwardRef(function Panel({
   ...rest
 }, reference) {
   const arrowRef = useRef(null);
+  const floatingPlacement = positionToPlacement(position);
   const middleware = [];
   if (arrow$1) {
     middleware.push(offset(POPOVER_OFFSET));
   }
-  if (flip$1 && fallbackPlacements[position]) {
+  if (flip$1 && fallbackPlacements[floatingPlacement]) {
     middleware.push(flip({
-      fallbackPlacements: fallbackPlacements[position]
+      fallbackPlacements: fallbackPlacements[floatingPlacement]
     }));
   }
   if (altAxis) {
@@ -87,7 +96,7 @@ const Panel = /*#__PURE__*/forwardRef(function Panel({
     placement,
     middlewareData
   } = useFloating({
-    placement: position,
+    placement: floatingPlacement,
     middleware,
     elements: {
       reference: anchorRef.current

package/build/common/Panel/Panel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.mjs","sources":["../../../src/common/Panel/Panel.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip as flipMiddleware,\n  offset,\n  type Placement,\n  shift,\n  size as sizeMiddleware,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  MutableRefObject,\n  PropsWithChildren,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';\nimport Dimmer from '../../Dimmer';\nimport { OverlayIdContext } from '../../Provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = 16;\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements: Record<string, Placement[]> = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: PositionBottom | PositionLeft | PositionRight | PositionTop;\n  anchorRef: MutableRefObject<Element | null>;\n  anchorWidth?: boolean;\n  considerHeight?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    considerHeight = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const middleware = [];\n\n  if (arrow) {\n    middleware.push(offset(POPOVER_OFFSET));\n  }\n\n  if (flip && fallbackPlacements[position]) {\n    middleware.push(\n      flipMiddleware({\n        fallbackPlacements: fallbackPlacements[position],\n      }),\n    );\n  }\n\n  if (altAxis) {\n    middleware.push(shift());\n  }\n\n  if (arrow) {\n    middleware.push(arrowMiddleware({ element: arrowRef, padding: 8 }));\n  }\n\n  if (considerHeight) {\n    middleware.push(\n      sizeMiddleware({\n        padding: POPOVER_OFFSET,\n        apply: ({ elements, availableHeight }) => {\n          elements.floating.style.setProperty(\n            '--np-panel-available-height',\n            `${availableHeight}px`,\n          );\n        },\n      }),\n    );\n  }\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: position,\n    middleware,\n    elements: {\n      reference: anchorRef.current,\n    },\n    whileElementsMounted: open ? autoUpdate : undefined,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={refs.setFloating}\n        role=\"dialog\"\n        style={floatingStyles}\n        data-popper-placement={placement}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","considerHeight","rest","reference","arrowRef","useRef","middleware","push","offset","flipMiddleware","shift","arrowMiddleware","element","padding","sizeMiddleware","apply","elements","availableHeight","floating","style","setProperty","refs","floatingStyles","placement","middlewareData","useFloating","current","whileElementsMounted","autoUpdate","undefined","arrowStyle","x","left","y","top","contentStyle","width","clientWidth","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","setFloating","role","className","clsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Panel.mjs","sources":["../../../src/common/Panel/Panel.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip as flipMiddleware,\n  offset,\n  type Placement,\n  shift,\n  size as sizeMiddleware,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  PropsWithChildren,\n  RefObject,\n  SyntheticEvent,\n  forwardRef,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Position, type FloatingPlacement, positionToPlacement } from '..';\nimport Dimmer from '../../Dimmer';\nimport { OverlayIdContext } from '../../Provider/overlay/OverlayIdProvider';\n\nconst POPOVER_OFFSET = 16;\n\n// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space\n// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.\n// This mapping forces popover to try the four available positions before going back to the initial chosen one.\nconst fallbackPlacements: Record<Placement, Placement[]> = {\n  [Position.TOP]: [Position.BOTTOM, Position.RIGHT, Position.LEFT],\n  [Position.BOTTOM]: [Position.TOP, Position.RIGHT, Position.LEFT],\n  [Position.LEFT]: [Position.RIGHT, Position.TOP, Position.BOTTOM],\n  [Position.RIGHT]: [Position.LEFT, Position.TOP, Position.BOTTOM],\n  'top-start': ['bottom-start', 'top-end', 'bottom-end'],\n  'top-end': ['bottom-end', 'top-start', 'bottom-start'],\n  'bottom-start': ['top-start', 'bottom-end', 'top-end'],\n  'bottom-end': ['top-end', 'bottom-start', 'top-start'],\n  'left-start': ['right-start', 'left-end', 'right-end'],\n  'left-end': ['right-end', 'left-start', 'right-start'],\n  'right-start': ['left-start', 'right-end', 'left-end'],\n  'right-end': ['left-end', 'right-start', 'left-start'],\n};\n\nexport type PanelProps = PropsWithChildren<{\n  arrow?: boolean;\n  flip?: boolean;\n  altAxis?: boolean;\n  open?: boolean;\n  onClose?: (event: Event | SyntheticEvent) => void;\n  position?: FloatingPlacement;\n  anchorRef: RefObject<Element | null>;\n  anchorWidth?: boolean;\n  considerHeight?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nconst Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(\n  {\n    arrow = false,\n    flip = true,\n    altAxis = false,\n    children,\n    open = false,\n    onClose,\n    position = Position.BOTTOM,\n    anchorRef,\n    anchorWidth = false,\n    considerHeight = false,\n    ...rest\n  }: PanelProps,\n  reference,\n) {\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n  const floatingPlacement = positionToPlacement(position);\n\n  const middleware = [];\n\n  if (arrow) {\n    middleware.push(offset(POPOVER_OFFSET));\n  }\n\n  if (flip && fallbackPlacements[floatingPlacement]) {\n    middleware.push(\n      flipMiddleware({\n        fallbackPlacements: fallbackPlacements[floatingPlacement],\n      }),\n    );\n  }\n\n  if (altAxis) {\n    middleware.push(shift());\n  }\n\n  if (arrow) {\n    middleware.push(arrowMiddleware({ element: arrowRef, padding: 8 }));\n  }\n\n  if (considerHeight) {\n    middleware.push(\n      sizeMiddleware({\n        padding: POPOVER_OFFSET,\n        apply: ({ elements, availableHeight }) => {\n          elements.floating.style.setProperty(\n            '--np-panel-available-height',\n            `${availableHeight}px`,\n          );\n        },\n      }),\n    );\n  }\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: floatingPlacement,\n    middleware,\n    elements: {\n      reference: anchorRef.current,\n    },\n    whileElementsMounted: open ? autoUpdate : undefined,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  const contentStyle: CSSProperties = {\n    ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),\n  };\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return (\n    <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>\n      <div\n        id={overlayId}\n        {...rest}\n        ref={refs.setFloating}\n        role=\"dialog\"\n        style={floatingStyles}\n        data-popper-placement={placement}\n        className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}\n      >\n        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>\n          {children}\n          {/* Arrow has to stay inside content to get the same animations as the \"dialog\" and to get hidden when panel is closed. */}\n          {arrow && <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />}\n        </div>\n      </div>\n    </Dimmer>\n  );\n});\n\nexport default Panel;\n"],"names":["POPOVER_OFFSET","fallbackPlacements","Position","TOP","BOTTOM","RIGHT","LEFT","Panel","forwardRef","arrow","flip","altAxis","children","open","onClose","position","anchorRef","anchorWidth","considerHeight","rest","reference","arrowRef","useRef","floatingPlacement","positionToPlacement","middleware","push","offset","flipMiddleware","shift","arrowMiddleware","element","padding","sizeMiddleware","apply","elements","availableHeight","floating","style","setProperty","refs","floatingStyles","placement","middlewareData","useFloating","current","whileElementsMounted","autoUpdate","undefined","arrowStyle","x","left","y","top","contentStyle","width","clientWidth","overlayId","useContext","OverlayIdContext","_jsx","Dimmer","transparent","fadeContentOnEnter","fadeContentOnExit","id","ref","setFloating","role","className","clsx","_jsxs"],"mappings":"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"}

package/build/common/PropsValues/position.js

@@ -7,9 +7,38 @@ exports.Position = void 0;
   Position["BOTTOM_RIGHT"] = "bottom-right";
   Position["CENTER"] = "center";
   Position["LEFT"] = "left";
+  Position["LEFT_BOTTOM"] = "left-bottom";
   Position["LEFT_TOP"] = "left-top";
   Position["RIGHT"] = "right";
+  Position["RIGHT_BOTTOM"] = "right-bottom";
   Position["RIGHT_TOP"] = "right-top";
   Position["TOP"] = "top";
+  Position["TOP_LEFT"] = "top-left";
+  Position["TOP_RIGHT"] = "top-right";
 })(exports.Position || (exports.Position = {}));
+/** Maps Neptune position values to floating-ui Placement */
+const positionToPlacement = position => {
+  switch (position) {
+    case 'top-left':
+      return 'top-start';
+    case 'top-right':
+      return 'top-end';
+    case 'bottom-left':
+      return 'bottom-start';
+    case 'bottom-right':
+      return 'bottom-end';
+    case 'left-top':
+      return 'left-start';
+    case 'left-bottom':
+      return 'left-end';
+    case 'right-top':
+      return 'right-start';
+    case 'right-bottom':
+      return 'right-end';
+    default:
+      return position;
+  }
+};
+
+exports.positionToPlacement = positionToPlacement;
 //# sourceMappingURL=position.js.map

package/build/common/PropsValues/position.js.map

@@ -1 +1 @@
-{"version":3,"file":"position.js","sources":["../../../src/common/PropsValues/position.ts"],"sourcesContent":["export enum Position {\n  BOTTOM = 'bottom',\n  BOTTOM_LEFT = 'bottom-left',\n  BOTTOM_RIGHT = 'bottom-right',\n  CENTER = 'center',\n  LEFT = 'left',\n  LEFT_TOP = 'left-top',\n  RIGHT = 'right',\n  RIGHT_TOP = 'right-top',\n  TOP = 'top',\n}\n\nexport type PositionCenter = 'center';\nexport type PositionTop = 'top';\nexport type PositionRight = 'right';\nexport type PositionBottom = 'bottom';\nexport type PositionLeft = 'left';\n"],"names":["Position"],"mappings":";;AAAYA;AAAZ,CAAA,UAAYA,QAAQ,EAAA;AAClBA,EAAAA,QAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjBA,EAAAA,QAAA,CAAA,aAAA,CAAA,GAAA,aAA2B;AAC3BA,EAAAA,QAAA,CAAA,cAAA,CAAA,GAAA,cAA6B;AAC7BA,EAAAA,QAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjBA,EAAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACbA,EAAAA,QAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACrBA,EAAAA,QAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACfA,EAAAA,QAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACvBA,EAAAA,QAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACb,CAAC,EAVWA,gBAAQ,KAARA,gBAAQ,GAAA,EAAA,CAAA,CAAA;;"}
+{"version":3,"file":"position.js","sources":["../../../src/common/PropsValues/position.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/react';\n\nexport enum Position {\n  BOTTOM = 'bottom',\n  BOTTOM_LEFT = 'bottom-left',\n  BOTTOM_RIGHT = 'bottom-right',\n  CENTER = 'center',\n  LEFT = 'left',\n  LEFT_BOTTOM = 'left-bottom',\n  LEFT_TOP = 'left-top',\n  RIGHT = 'right',\n  RIGHT_BOTTOM = 'right-bottom',\n  RIGHT_TOP = 'right-top',\n  TOP = 'top',\n  TOP_LEFT = 'top-left',\n  TOP_RIGHT = 'top-right',\n}\n\nexport type PositionCenter = 'center';\nexport type PositionTop = 'top';\nexport type PositionRight = 'right';\nexport type PositionBottom = 'bottom';\nexport type PositionLeft = 'left';\n\nexport type PositionTopLeft = 'top-left';\nexport type PositionTopRight = 'top-right';\nexport type PositionBottomLeft = 'bottom-left';\nexport type PositionBottomRight = 'bottom-right';\nexport type PositionLeftTop = 'left-top';\nexport type PositionLeftBottom = 'left-bottom';\nexport type PositionRightTop = 'right-top';\nexport type PositionRightBottom = 'right-bottom';\n\n/** Neptune position values that can be converted to floating-ui Placement */\nexport type FloatingPlacement =\n  | PositionTop\n  | PositionRight\n  | PositionBottom\n  | PositionLeft\n  | PositionTopLeft\n  | PositionTopRight\n  | PositionRightTop\n  | PositionRightBottom\n  | PositionBottomLeft\n  | PositionBottomRight\n  | PositionLeftTop\n  | PositionLeftBottom;\n\n/** Maps Neptune position values to floating-ui Placement */\nexport const positionToPlacement = (position: FloatingPlacement): Placement => {\n  switch (position) {\n    case 'top-left':\n      return 'top-start';\n    case 'top-right':\n      return 'top-end';\n    case 'bottom-left':\n      return 'bottom-start';\n    case 'bottom-right':\n      return 'bottom-end';\n    case 'left-top':\n      return 'left-start';\n    case 'left-bottom':\n      return 'left-end';\n    case 'right-top':\n      return 'right-start';\n    case 'right-bottom':\n      return 'right-end';\n    default:\n      return position;\n  }\n};\n"],"names":["Position","positionToPlacement","position"],"mappings":";;AAEYA;AAAZ,CAAA,UAAYA,QAAQ,EAAA;AAClBA,EAAAA,QAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjBA,EAAAA,QAAA,CAAA,aAAA,CAAA,GAAA,aAA2B;AAC3BA,EAAAA,QAAA,CAAA,cAAA,CAAA,GAAA,cAA6B;AAC7BA,EAAAA,QAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjBA,EAAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACbA,EAAAA,QAAA,CAAA,aAAA,CAAA,GAAA,aAA2B;AAC3BA,EAAAA,QAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACrBA,EAAAA,QAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACfA,EAAAA,QAAA,CAAA,cAAA,CAAA,GAAA,cAA6B;AAC7BA,EAAAA,QAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACvBA,EAAAA,QAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACXA,EAAAA,QAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACrBA,EAAAA,QAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACzB,CAAC,EAdWA,gBAAQ,KAARA,gBAAQ,GAAA,EAAA,CAAA,CAAA;AA8CpB;AACO,MAAMC,mBAAmB,GAAIC,QAA2B,IAAe;AAC5E,EAAA,QAAQA,QAAQ;AACd,IAAA,KAAK,UAAU;AACb,MAAA,OAAO,WAAW;AACpB,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,SAAS;AAClB,IAAA,KAAK,aAAa;AAChB,MAAA,OAAO,cAAc;AACvB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,YAAY;AACrB,IAAA,KAAK,UAAU;AACb,MAAA,OAAO,YAAY;AACrB,IAAA,KAAK,aAAa;AAChB,MAAA,OAAO,UAAU;AACnB,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,aAAa;AACtB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,WAAW;AACpB,IAAA;AACE,MAAA,OAAOA,QAAQ;AACnB;AACF;;;;"}

package/build/common/PropsValues/position.mjs

@@ -5,11 +5,38 @@ var Position;
   Position["BOTTOM_RIGHT"] = "bottom-right";
   Position["CENTER"] = "center";
   Position["LEFT"] = "left";
+  Position["LEFT_BOTTOM"] = "left-bottom";
   Position["LEFT_TOP"] = "left-top";
   Position["RIGHT"] = "right";
+  Position["RIGHT_BOTTOM"] = "right-bottom";
   Position["RIGHT_TOP"] = "right-top";
   Position["TOP"] = "top";
+  Position["TOP_LEFT"] = "top-left";
+  Position["TOP_RIGHT"] = "top-right";
 })(Position || (Position = {}));
+/** Maps Neptune position values to floating-ui Placement */
+const positionToPlacement = position => {
+  switch (position) {
+    case 'top-left':
+      return 'top-start';
+    case 'top-right':
+      return 'top-end';
+    case 'bottom-left':
+      return 'bottom-start';
+    case 'bottom-right':
+      return 'bottom-end';
+    case 'left-top':
+      return 'left-start';
+    case 'left-bottom':
+      return 'left-end';
+    case 'right-top':
+      return 'right-start';
+    case 'right-bottom':
+      return 'right-end';
+    default:
+      return position;
+  }
+};
 
-export { Position };
+export { Position, positionToPlacement };
 //# sourceMappingURL=position.mjs.map

package/build/common/PropsValues/position.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"position.mjs","sources":["../../../src/common/PropsValues/position.ts"],"sourcesContent":["export enum Position {\n  BOTTOM = 'bottom',\n  BOTTOM_LEFT = 'bottom-left',\n  BOTTOM_RIGHT = 'bottom-right',\n  CENTER = 'center',\n  LEFT = 'left',\n  LEFT_TOP = 'left-top',\n  RIGHT = 'right',\n  RIGHT_TOP = 'right-top',\n  TOP = 'top',\n}\n\nexport type PositionCenter = 'center';\nexport type PositionTop = 'top';\nexport type PositionRight = 'right';\nexport type PositionBottom = 'bottom';\nexport type PositionLeft = 'left';\n"],"names":["Position"],"mappings":"IAAYA;AAAZ,CAAA,UAAYA,QAAQ,EAAA;AAClBA,EAAAA,QAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjBA,EAAAA,QAAA,CAAA,aAAA,CAAA,GAAA,aAA2B;AAC3BA,EAAAA,QAAA,CAAA,cAAA,CAAA,GAAA,cAA6B;AAC7BA,EAAAA,QAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjBA,EAAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACbA,EAAAA,QAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACrBA,EAAAA,QAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACfA,EAAAA,QAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACvBA,EAAAA,QAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACb,CAAC,EAVWA,QAAQ,KAARA,QAAQ,GAAA,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"position.mjs","sources":["../../../src/common/PropsValues/position.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/react';\n\nexport enum Position {\n  BOTTOM = 'bottom',\n  BOTTOM_LEFT = 'bottom-left',\n  BOTTOM_RIGHT = 'bottom-right',\n  CENTER = 'center',\n  LEFT = 'left',\n  LEFT_BOTTOM = 'left-bottom',\n  LEFT_TOP = 'left-top',\n  RIGHT = 'right',\n  RIGHT_BOTTOM = 'right-bottom',\n  RIGHT_TOP = 'right-top',\n  TOP = 'top',\n  TOP_LEFT = 'top-left',\n  TOP_RIGHT = 'top-right',\n}\n\nexport type PositionCenter = 'center';\nexport type PositionTop = 'top';\nexport type PositionRight = 'right';\nexport type PositionBottom = 'bottom';\nexport type PositionLeft = 'left';\n\nexport type PositionTopLeft = 'top-left';\nexport type PositionTopRight = 'top-right';\nexport type PositionBottomLeft = 'bottom-left';\nexport type PositionBottomRight = 'bottom-right';\nexport type PositionLeftTop = 'left-top';\nexport type PositionLeftBottom = 'left-bottom';\nexport type PositionRightTop = 'right-top';\nexport type PositionRightBottom = 'right-bottom';\n\n/** Neptune position values that can be converted to floating-ui Placement */\nexport type FloatingPlacement =\n  | PositionTop\n  | PositionRight\n  | PositionBottom\n  | PositionLeft\n  | PositionTopLeft\n  | PositionTopRight\n  | PositionRightTop\n  | PositionRightBottom\n  | PositionBottomLeft\n  | PositionBottomRight\n  | PositionLeftTop\n  | PositionLeftBottom;\n\n/** Maps Neptune position values to floating-ui Placement */\nexport const positionToPlacement = (position: FloatingPlacement): Placement => {\n  switch (position) {\n    case 'top-left':\n      return 'top-start';\n    case 'top-right':\n      return 'top-end';\n    case 'bottom-left':\n      return 'bottom-start';\n    case 'bottom-right':\n      return 'bottom-end';\n    case 'left-top':\n      return 'left-start';\n    case 'left-bottom':\n      return 'left-end';\n    case 'right-top':\n      return 'right-start';\n    case 'right-bottom':\n      return 'right-end';\n    default:\n      return position;\n  }\n};\n"],"names":["Position","positionToPlacement","position"],"mappings":"IAEYA;AAAZ,CAAA,UAAYA,QAAQ,EAAA;AAClBA,EAAAA,QAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjBA,EAAAA,QAAA,CAAA,aAAA,CAAA,GAAA,aAA2B;AAC3BA,EAAAA,QAAA,CAAA,cAAA,CAAA,GAAA,cAA6B;AAC7BA,EAAAA,QAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjBA,EAAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACbA,EAAAA,QAAA,CAAA,aAAA,CAAA,GAAA,aAA2B;AAC3BA,EAAAA,QAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACrBA,EAAAA,QAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACfA,EAAAA,QAAA,CAAA,cAAA,CAAA,GAAA,cAA6B;AAC7BA,EAAAA,QAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACvBA,EAAAA,QAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AACXA,EAAAA,QAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACrBA,EAAAA,QAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACzB,CAAC,EAdWA,QAAQ,KAARA,QAAQ,GAAA,EAAA,CAAA,CAAA;AA8CpB;AACO,MAAMC,mBAAmB,GAAIC,QAA2B,IAAe;AAC5E,EAAA,QAAQA,QAAQ;AACd,IAAA,KAAK,UAAU;AACb,MAAA,OAAO,WAAW;AACpB,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,SAAS;AAClB,IAAA,KAAK,aAAa;AAChB,MAAA,OAAO,cAAc;AACvB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,YAAY;AACrB,IAAA,KAAK,UAAU;AACb,MAAA,OAAO,YAAY;AACrB,IAAA,KAAK,aAAa;AAChB,MAAA,OAAO,UAAU;AACnB,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,aAAa;AACtB,IAAA,KAAK,cAAc;AACjB,MAAA,OAAO,WAAW;AACpB,IAAA;AACE,MAAA,OAAOA,QAAQ;AACnB;AACF;;;;"}

package/build/main.css

@@ -29013,7 +29013,13 @@ button.np-option {
   justify-content: center;
   width: 100%;
   box-sizing: border-box;
-  min-height: 96px;
+  min-height: 80px;
+}
+
+@media (min-width: 320.02px) {
+  .np-flow-navigation {
+    min-height: 128px;
+  }
 }
 
 .np-flow-navigation--border-bottom {
@@ -29024,7 +29030,7 @@ button.np-option {
 .np-flow-navigation__content {
   width: 100%;
   min-width: 320px;
-  max-width: calc(1160px - 36px);
+  max-width: none;
 }
 
 .np-flow-navigation__stepper {
@@ -29101,20 +29107,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   visibility: hidden;
 }
 
-.np-flow-navigation--composable {
-  min-height: 80px;
-}
-
-@media (min-width: 320.02px) {
-  .np-flow-navigation--composable {
-    min-height: 128px;
-  }
-}
-
-.np-flow-navigation--composable .np-flow-navigation__content {
-  max-width: none;
-}
-
 .np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {
@@ -31650,24 +31642,6 @@ html:not([dir="rtl"]) .np-navigation-option {
           text-decoration: var(--nudge-link-text-decoration);
 }
 
-.np-overlay-header .np-overlay-header__content {
-  min-height: 97px;
-  width: 100%;
-  min-width: 320px;
-  max-width: calc(1160px - 36px);
-}
-
-.np-theme-personal .np-overlay-header {
-  border-bottom: 1px solid rgba(0,0,0,0.10196);
-  border-bottom: 1px solid var(--color-border-neutral);
-}
-
-.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path,
-.np-theme-personal--bright-green .np-overlay-header .np-flow-header__left path,
-.np-theme-personal--dark .np-overlay-header .np-flow-header__left path {
-  fill: var(--color-interactive-primary);
-}
-
 .tw-telephone {
   display: flex;
 }

package/build/styles/FlowNavigation/FlowNavigation.css

@@ -4,7 +4,12 @@
   justify-content: center;
   width: 100%;
   box-sizing: border-box;
-  min-height: 96px;
+  min-height: 80px;
+}
+@media (min-width: 320.02px) {
+  .np-flow-navigation {
+    min-height: 128px;
+  }
 }
 .np-flow-navigation--border-bottom {
   border-bottom: 1px solid rgba(0,0,0,0.10196);
@@ -13,7 +18,7 @@
 .np-flow-navigation__content {
   width: 100%;
   min-width: 320px;
-  max-width: calc(1160px - 36px);
+  max-width: none;
 }
 .np-flow-navigation__stepper {
   padding-bottom: 0 !important;
@@ -72,17 +77,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .np-flow-navigation--hidden {
   visibility: hidden;
 }
-.np-flow-navigation--composable {
-  min-height: 80px;
-}
-@media (min-width: 320.02px) {
-  .np-flow-navigation--composable {
-    min-height: 128px;
-  }
-}
-.np-flow-navigation--composable .np-flow-navigation__content {
-  max-width: none;
-}
 .np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {

package/build/styles/main.css

@@ -29013,7 +29013,13 @@ button.np-option {
   justify-content: center;
   width: 100%;
   box-sizing: border-box;
-  min-height: 96px;
+  min-height: 80px;
+}
+
+@media (min-width: 320.02px) {
+  .np-flow-navigation {
+    min-height: 128px;
+  }
 }
 
 .np-flow-navigation--border-bottom {
@@ -29024,7 +29030,7 @@ button.np-option {
 .np-flow-navigation__content {
   width: 100%;
   min-width: 320px;
-  max-width: calc(1160px - 36px);
+  max-width: none;
 }
 
 .np-flow-navigation__stepper {
@@ -29101,20 +29107,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   visibility: hidden;
 }
 
-.np-flow-navigation--composable {
-  min-height: 80px;
-}
-
-@media (min-width: 320.02px) {
-  .np-flow-navigation--composable {
-    min-height: 128px;
-  }
-}
-
-.np-flow-navigation--composable .np-flow-navigation__content {
-  max-width: none;
-}
-
 .np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {
@@ -31650,24 +31642,6 @@ html:not([dir="rtl"]) .np-navigation-option {
           text-decoration: var(--nudge-link-text-decoration);
 }
 
-.np-overlay-header .np-overlay-header__content {
-  min-height: 97px;
-  width: 100%;
-  min-width: 320px;
-  max-width: calc(1160px - 36px);
-}
-
-.np-theme-personal .np-overlay-header {
-  border-bottom: 1px solid rgba(0,0,0,0.10196);
-  border-bottom: 1px solid var(--color-border-neutral);
-}
-
-.np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path,
-.np-theme-personal--bright-green .np-overlay-header .np-flow-header__left path,
-.np-theme-personal--dark .np-overlay-header .np-flow-header__left path {
-  fill: var(--color-interactive-primary);
-}
-
 .tw-telephone {
   display: flex;
 }