@transferwise/components 46.120.0 → 46.120.1

package/build/common/RadioButton/RadioButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.mjs","sources":["../../../src/common/RadioButton/RadioButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport interface RadioButtonProps<T extends string | number = string> {\n  id?: string;\n  name: string;\n  checked?: boolean;\n  onChange?: (value: T) => void;\n  disabled?: boolean;\n  value?: T;\n  readOnly?: boolean;\n  className?: string;\n  'aria-describedby'?: string;\n}\n\nexport default function RadioButton<T extends string | number = ''>({\n  id,\n  value = '' as T,\n  name,\n  checked,\n  onChange,\n  disabled,\n  readOnly,\n  className,\n  'aria-describedby': ariaDescribedBy,\n}: RadioButtonProps<T>) {\n  return (\n    <>\n      <input\n        type=\"radio\"\n        className={clsx('sr-only', className)}\n        id={id}\n        value={value}\n        name={name}\n        checked={checked}\n        disabled={disabled || readOnly}\n        aria-describedby={ariaDescribedBy}\n        onChange={() => {\n          if (!checked) {\n            onChange?.(value);\n          }\n        }}\n      />\n      <span className={clsx('tw-radio-button', { checked, disabled: disabled || readOnly })}>\n        <span className=\"tw-radio-check\" />\n      </span>\n    </>\n  );\n}\n"],"names":["RadioButton","id","value","name","checked","onChange","disabled","readOnly","className","ariaDescribedBy","_jsxs","_Fragment","children","_jsx","type","clsx"],"mappings":";;;AAce,SAASA,WAAWA,CAAiC;EAClEC,EAAE;AACFC,EAAAA,KAAK,GAAG,EAAO;EACfC,IAAI;EACJC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,SAAS;AACT,EAAA,kBAAkB,EAAEC;AACD,CAAC,EAAE;EACtB,oBACEC,IAAA,CAAAC,QAAA,EAAA;AAAAC,IAAAA,QAAA,gBACEC,GAAA,CAAA,OAAA,EAAA;AACEC,MAAAA,IAAI,EAAC,OAAO;AACZN,MAAAA,SAAS,EAAEO,IAAI,CAAC,SAAS,EAAEP,SAAS,CAAE;AACtCP,MAAAA,EAAE,EAAEA,EAAG;AACPC,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,OAAO,EAAEA,OAAQ;MACjBE,QAAQ,EAAEA,QAAQ,IAAIC,QAAS;AAC/B,MAAA,kBAAA,EAAkBE,eAAgB;MAClCJ,QAAQ,EAAEA,MAAM;QACd,IAAI,CAACD,OAAO,EAAE;UACZC,QAAQ,GAAGH,KAAK,CAAC;AACnB,QAAA;AACF,MAAA;KACD,CAAC,eACFW,GAAA,CAAA,MAAA,EAAA;AAAML,MAAAA,SAAS,EAAEO,IAAI,CAAC,iBAAiB,EAAE;QAAEX,OAAO;QAAEE,QAAQ,EAAEA,QAAQ,IAAIC;AAAS,OAAC,CAAE;AAAAK,MAAAA,QAAA,eACpFC,GAAA,CAAA,MAAA,EAAA;AAAML,QAAAA,SAAS,EAAC;OAAkB;AAAC,KAC/B,CAAC;AAAA,GACP,CAAC;AAEP;;;;"}
+{"version":3,"file":"RadioButton.mjs","sources":["../../../src/common/RadioButton/RadioButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport interface RadioButtonProps<T extends string | number = string> {\n  id?: string;\n  name: string;\n  checked?: boolean;\n  onChange?: (value: T) => void;\n  disabled?: boolean;\n  value?: T;\n  readOnly?: boolean;\n  className?: string;\n  'aria-describedby'?: string;\n}\n\nexport default function RadioButton<T extends string | number = ''>({\n  id,\n  value = '' as T,\n  name,\n  checked,\n  onChange,\n  disabled,\n  readOnly,\n  className,\n  'aria-describedby': ariaDescribedBy,\n}: RadioButtonProps<T>) {\n  return (\n    <>\n      <input\n        type=\"radio\"\n        className={clsx('sr-only', className)}\n        id={id}\n        value={value}\n        name={name}\n        checked={checked}\n        disabled={disabled || readOnly}\n        aria-describedby={ariaDescribedBy}\n        onChange={() => {\n          if (!checked) {\n            onChange?.(value);\n          }\n        }}\n      />\n      <span className={clsx('tw-radio-button', { checked, disabled: disabled || readOnly })}>\n        <span className=\"tw-radio-check\" />\n      </span>\n    </>\n  );\n}\n"],"names":["RadioButton","id","value","name","checked","onChange","disabled","readOnly","className","ariaDescribedBy","_jsxs","_Fragment","children","_jsx","type","clsx"],"mappings":";;;AAcc,SAAUA,WAAWA,CAAiC;EAClEC,EAAE;AACFC,EAAAA,KAAK,GAAG,EAAO;EACfC,IAAI;EACJC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,SAAS;AACT,EAAA,kBAAkB,EAAEC;AAAe,CACf,EAAA;EACpB,oBACEC,IAAA,CAAAC,QAAA,EAAA;AAAAC,IAAAA,QAAA,gBACEC,GAAA,CAAA,OAAA,EAAA;AACEC,MAAAA,IAAI,EAAC,OAAO;AACZN,MAAAA,SAAS,EAAEO,IAAI,CAAC,SAAS,EAAEP,SAAS,CAAE;AACtCP,MAAAA,EAAE,EAAEA,EAAG;AACPC,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,OAAO,EAAEA,OAAQ;MACjBE,QAAQ,EAAEA,QAAQ,IAAIC,QAAS;AAC/B,MAAA,kBAAA,EAAkBE,eAAgB;MAClCJ,QAAQ,EAAEA,MAAK;QACb,IAAI,CAACD,OAAO,EAAE;UACZC,QAAQ,GAAGH,KAAK,CAAC;AACnB,QAAA;AACF,MAAA;KAAE,CAEJ,eAAAW,GAAA,CAAA,MAAA,EAAA;AAAML,MAAAA,SAAS,EAAEO,IAAI,CAAC,iBAAiB,EAAE;QAAEX,OAAO;QAAEE,QAAQ,EAAEA,QAAQ,IAAIC;AAAQ,OAAE,CAAE;AAAAK,MAAAA,QAAA,eACpFC,GAAA,CAAA,MAAA,EAAA;AAAML,QAAAA,SAAS,EAAC;OAAgB;AAClC,KAAM,CACR;AAAA,GAAA,CAAG;AAEP;;;;"}

package/build/common/bottomSheet/BottomSheet.js

@@ -34,14 +34,12 @@ const BottomSheet = ({
   const topBarReference = React.useRef(null);
   const contentReference = React.useRef(null);
   const [pressed, setPressed] = React.useState(false);
-
   /**
    * Used to track `requestAnimationFrame` requests
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value
    */
   const animationId = React.useRef(0);
-
   /**
    * Difference between initial coordinate ({@link initialYCoordinate})
    * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events
@@ -50,7 +48,6 @@ const BottomSheet = ({
    */
   const moveOffset = React.useRef(0);
   const initialYCoordinate = React.useRef(0);
-
   // apply shadow to the bottom of top-bar when scroll over content
   useConditionalListener.useConditionalListener({
     attachListener: props.open && !documentIosClick.isServerSide(),
@@ -123,7 +120,6 @@ const BottomSheet = ({
   function isContentScrollPositionAtTop() {
     return contentReference?.current?.scrollTop !== undefined && contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD;
   }
-
   /**
    * Calculates how hard user moves component,
    * result value used to determine whether to hide component or re-position to default state
@@ -133,7 +129,6 @@ const BottomSheet = ({
   function calculateOffsetAfterMove(afterMoveYCoordinate) {
     return afterMoveYCoordinate - initialYCoordinate.current;
   }
-
   /**
    * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component
    * and ensures space for safe zone (32px) at the top.

package/build/common/bottomSheet/BottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.js","sources":["../../../src/common/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  PropsWithChildren,\n  SyntheticEvent,\n  useContext,\n  useRef,\n  useState,\n} from 'react';\n\nimport Dimmer from '../../dimmer';\nimport Drawer from '../../drawer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../../slidingPanel';\nimport { CloseButton } from '../closeButton';\nimport { CommonProps } from '../commonProps';\nimport { isServerSide } from '../domHelpers';\nimport { useConditionalListener } from '../hooks';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\nimport { Position } from '../propsValues/position';\n\nconst INITIAL_Y_POSITION = 0;\n\nconst CONTENT_SCROLL_THRESHOLD = 1;\n\nconst MOVE_OFFSET_THRESHOLD = 50;\n\nexport type BottomSheetProps = PropsWithChildren<\n  {\n    onClose?: (event: Event | SyntheticEvent) => void;\n    open: boolean;\n  } & CommonProps &\n    Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby' | 'aria-label'>\n>;\n\n/**\n * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet\n *\n */\nconst BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {\n  const bottomSheetReference = useRef<HTMLDivElement>(null);\n  const topBarReference = useRef<HTMLDivElement>(null);\n  const contentReference = useRef<HTMLDivElement>(null);\n\n  const [pressed, setPressed] = useState<boolean>(false);\n\n  /**\n   * Used to track `requestAnimationFrame` requests\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value\n   */\n  const animationId = useRef<number>(0);\n\n  /**\n   * Difference between initial coordinate ({@link initialYCoordinate})\n   * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events\n   *\n   * @see {@link calculateOffsetAfterMove}\n   */\n  const moveOffset = useRef<number>(0);\n  const initialYCoordinate = useRef<number>(0);\n\n  // apply shadow to the bottom of top-bar when scroll over content\n  useConditionalListener({\n    attachListener: props.open && !isServerSide(),\n    callback: () => {\n      if (topBarReference.current !== null) {\n        const { classList } = topBarReference.current;\n        if (!isContentScrollPositionAtTop()) {\n          classList.add('np-bottom-sheet--top-bar--shadow');\n        } else {\n          classList.remove('np-bottom-sheet--top-bar--shadow');\n        }\n      }\n    },\n    eventType: 'scroll',\n    parent: isServerSide() ? undefined : document,\n  });\n\n  function move(newHeight: number): void {\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.transform = `translateY(${newHeight}px)`;\n    }\n  }\n\n  function close(event: Event | SyntheticEvent): void {\n    setPressed(false);\n    moveOffset.current = INITIAL_Y_POSITION;\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.removeProperty('transform');\n    }\n    if (props.onClose) {\n      props.onClose(event);\n    }\n  }\n\n  const onSwipeStart = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;\n    setPressed(true);\n  };\n\n  const onSwipeMove = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    if (pressed) {\n      const { clientY } = 'touches' in event ? event.touches[0] : event;\n\n      const offset = calculateOffsetAfterMove(clientY);\n      // check whether move is to the bottom only and content scroll position is at the top\n      if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {\n        moveOffset.current = offset;\n        animationId.current = requestAnimationFrame(() => {\n          if (animationId.current !== undefined && bottomSheetReference.current !== null) {\n            move(offset);\n          }\n        });\n      }\n    }\n  };\n\n  function onSwipeEnd(\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void {\n    // stop moving component\n    cancelAnimationFrame(animationId.current);\n    setPressed(false);\n    // check whether move down is strong enough\n    // and content scroll position is at the top to close the component\n    if (moveOffset.current > MOVE_OFFSET_THRESHOLD && isContentScrollPositionAtTop()) {\n      close(event);\n    }\n    // otherwise move component back to default (initial) position\n    else {\n      move(INITIAL_Y_POSITION);\n    }\n    moveOffset.current = INITIAL_Y_POSITION;\n  }\n\n  function isContentScrollPositionAtTop(): boolean {\n    return (\n      contentReference?.current?.scrollTop !== undefined &&\n      contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD\n    );\n  }\n\n  /**\n   * Calculates how hard user moves component,\n   * result value used to determine whether to hide component or re-position to default state\n   *\n   * @param afterMoveYCoordinate\n   */\n  function calculateOffsetAfterMove(afterMoveYCoordinate: number): number {\n    return afterMoveYCoordinate - initialYCoordinate.current;\n  }\n\n  /**\n   * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component\n   * and ensures space for safe zone (32px) at the top.\n   */\n  function setContentMaxHeight(): CSSProperties {\n    const safeZoneHeight = '64px';\n    const topbarHeight = '32px';\n    const windowHight: number = isServerSide() ? 0 : window.innerHeight;\n    /**\n     * Calculate _real_ height of the screen (taking into account parts of browser interface).\n     *\n     * See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.\n     */\n    const screenHeight = `${windowHight * 0.01 * 100}px`;\n    return {\n      maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`,\n    };\n  }\n\n  const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return is400Zoom ? (\n    <Drawer\n      aria-labelledby={props['aria-labelledby']}\n      aria-label={props['aria-label']}\n      role={role}\n      open={props.open}\n      className={props.className}\n      onClose={close}\n    >\n      {props.children}\n    </Drawer>\n  ) : (\n    <Dimmer open={props.open} fadeContentOnEnter fadeContentOnExit onClose={close}>\n      <SlidingPanel\n        ref={bottomSheetReference}\n        open={props.open}\n        position={Position.BOTTOM}\n        className={clsx('np-bottom-sheet', props.className)}\n      >\n        <div\n          id={overlayId}\n          aria-labelledby={props['aria-labelledby'] || undefined}\n          aria-label={props['aria-label'] || undefined}\n          role={role}\n          aria-modal\n          onTouchStart={onSwipeStart}\n          onTouchMove={onSwipeMove}\n          onTouchEnd={onSwipeEnd}\n          onMouseDown={onSwipeStart}\n          onMouseMove={onSwipeMove}\n          onMouseUp={onSwipeEnd}\n        >\n          <div ref={topBarReference} className=\"np-bottom-sheet--top-bar\">\n            <div className=\"np-bottom-sheet--handler\" />\n            <CloseButton size=\"sm\" className=\"sr-only np-bottom-sheet--close-btn\" onClick={close} />\n          </div>\n          <div\n            ref={contentReference}\n            style={setContentMaxHeight()}\n            className=\"np-bottom-sheet--content\"\n          >\n            {props.children}\n          </div>\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n};\n\nexport default BottomSheet;\n"],"names":["INITIAL_Y_POSITION","CONTENT_SCROLL_THRESHOLD","MOVE_OFFSET_THRESHOLD","BottomSheet","role","props","bottomSheetReference","useRef","topBarReference","contentReference","pressed","setPressed","useState","animationId","moveOffset","initialYCoordinate","useConditionalListener","attachListener","open","isServerSide","callback","current","classList","isContentScrollPositionAtTop","add","remove","eventType","parent","undefined","document","move","newHeight","style","transform","close","event","removeProperty","onClose","onSwipeStart","touches","clientY","onSwipeMove","offset","calculateOffsetAfterMove","requestAnimationFrame","onSwipeEnd","cancelAnimationFrame","scrollTop","afterMoveYCoordinate","setContentMaxHeight","safeZoneHeight","topbarHeight","windowHight","window","innerHeight","screenHeight","maxHeight","is400Zoom","useMedia","Breakpoint","ZOOM_400","overlayId","useContext","OverlayIdContext","_jsx","Drawer","className","children","Dimmer","fadeContentOnEnter","fadeContentOnExit","SlidingPanel","ref","position","Position","BOTTOM","clsx","_jsxs","id","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","CloseButton","size","onClick"],"mappings":"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"}
+{"version":3,"file":"BottomSheet.js","sources":["../../../src/common/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  PropsWithChildren,\n  SyntheticEvent,\n  useContext,\n  useRef,\n  useState,\n} from 'react';\n\nimport Dimmer from '../../dimmer';\nimport Drawer from '../../drawer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../../slidingPanel';\nimport { CloseButton } from '../closeButton';\nimport { CommonProps } from '../commonProps';\nimport { isServerSide } from '../domHelpers';\nimport { useConditionalListener } from '../hooks';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\nimport { Position } from '../propsValues/position';\n\nconst INITIAL_Y_POSITION = 0;\n\nconst CONTENT_SCROLL_THRESHOLD = 1;\n\nconst MOVE_OFFSET_THRESHOLD = 50;\n\nexport type BottomSheetProps = PropsWithChildren<\n  {\n    onClose?: (event: Event | SyntheticEvent) => void;\n    open: boolean;\n  } & CommonProps &\n    Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby' | 'aria-label'>\n>;\n\n/**\n * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet\n *\n */\nconst BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {\n  const bottomSheetReference = useRef<HTMLDivElement>(null);\n  const topBarReference = useRef<HTMLDivElement>(null);\n  const contentReference = useRef<HTMLDivElement>(null);\n\n  const [pressed, setPressed] = useState<boolean>(false);\n\n  /**\n   * Used to track `requestAnimationFrame` requests\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value\n   */\n  const animationId = useRef<number>(0);\n\n  /**\n   * Difference between initial coordinate ({@link initialYCoordinate})\n   * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events\n   *\n   * @see {@link calculateOffsetAfterMove}\n   */\n  const moveOffset = useRef<number>(0);\n  const initialYCoordinate = useRef<number>(0);\n\n  // apply shadow to the bottom of top-bar when scroll over content\n  useConditionalListener({\n    attachListener: props.open && !isServerSide(),\n    callback: () => {\n      if (topBarReference.current !== null) {\n        const { classList } = topBarReference.current;\n        if (!isContentScrollPositionAtTop()) {\n          classList.add('np-bottom-sheet--top-bar--shadow');\n        } else {\n          classList.remove('np-bottom-sheet--top-bar--shadow');\n        }\n      }\n    },\n    eventType: 'scroll',\n    parent: isServerSide() ? undefined : document,\n  });\n\n  function move(newHeight: number): void {\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.transform = `translateY(${newHeight}px)`;\n    }\n  }\n\n  function close(event: Event | SyntheticEvent): void {\n    setPressed(false);\n    moveOffset.current = INITIAL_Y_POSITION;\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.removeProperty('transform');\n    }\n    if (props.onClose) {\n      props.onClose(event);\n    }\n  }\n\n  const onSwipeStart = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;\n    setPressed(true);\n  };\n\n  const onSwipeMove = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    if (pressed) {\n      const { clientY } = 'touches' in event ? event.touches[0] : event;\n\n      const offset = calculateOffsetAfterMove(clientY);\n      // check whether move is to the bottom only and content scroll position is at the top\n      if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {\n        moveOffset.current = offset;\n        animationId.current = requestAnimationFrame(() => {\n          if (animationId.current !== undefined && bottomSheetReference.current !== null) {\n            move(offset);\n          }\n        });\n      }\n    }\n  };\n\n  function onSwipeEnd(\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void {\n    // stop moving component\n    cancelAnimationFrame(animationId.current);\n    setPressed(false);\n    // check whether move down is strong enough\n    // and content scroll position is at the top to close the component\n    if (moveOffset.current > MOVE_OFFSET_THRESHOLD && isContentScrollPositionAtTop()) {\n      close(event);\n    }\n    // otherwise move component back to default (initial) position\n    else {\n      move(INITIAL_Y_POSITION);\n    }\n    moveOffset.current = INITIAL_Y_POSITION;\n  }\n\n  function isContentScrollPositionAtTop(): boolean {\n    return (\n      contentReference?.current?.scrollTop !== undefined &&\n      contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD\n    );\n  }\n\n  /**\n   * Calculates how hard user moves component,\n   * result value used to determine whether to hide component or re-position to default state\n   *\n   * @param afterMoveYCoordinate\n   */\n  function calculateOffsetAfterMove(afterMoveYCoordinate: number): number {\n    return afterMoveYCoordinate - initialYCoordinate.current;\n  }\n\n  /**\n   * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component\n   * and ensures space for safe zone (32px) at the top.\n   */\n  function setContentMaxHeight(): CSSProperties {\n    const safeZoneHeight = '64px';\n    const topbarHeight = '32px';\n    const windowHight: number = isServerSide() ? 0 : window.innerHeight;\n    /**\n     * Calculate _real_ height of the screen (taking into account parts of browser interface).\n     *\n     * See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.\n     */\n    const screenHeight = `${windowHight * 0.01 * 100}px`;\n    return {\n      maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`,\n    };\n  }\n\n  const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return is400Zoom ? (\n    <Drawer\n      aria-labelledby={props['aria-labelledby']}\n      aria-label={props['aria-label']}\n      role={role}\n      open={props.open}\n      className={props.className}\n      onClose={close}\n    >\n      {props.children}\n    </Drawer>\n  ) : (\n    <Dimmer open={props.open} fadeContentOnEnter fadeContentOnExit onClose={close}>\n      <SlidingPanel\n        ref={bottomSheetReference}\n        open={props.open}\n        position={Position.BOTTOM}\n        className={clsx('np-bottom-sheet', props.className)}\n      >\n        <div\n          id={overlayId}\n          aria-labelledby={props['aria-labelledby'] || undefined}\n          aria-label={props['aria-label'] || undefined}\n          role={role}\n          aria-modal\n          onTouchStart={onSwipeStart}\n          onTouchMove={onSwipeMove}\n          onTouchEnd={onSwipeEnd}\n          onMouseDown={onSwipeStart}\n          onMouseMove={onSwipeMove}\n          onMouseUp={onSwipeEnd}\n        >\n          <div ref={topBarReference} className=\"np-bottom-sheet--top-bar\">\n            <div className=\"np-bottom-sheet--handler\" />\n            <CloseButton size=\"sm\" className=\"sr-only np-bottom-sheet--close-btn\" onClick={close} />\n          </div>\n          <div\n            ref={contentReference}\n            style={setContentMaxHeight()}\n            className=\"np-bottom-sheet--content\"\n          >\n            {props.children}\n          </div>\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n};\n\nexport default BottomSheet;\n"],"names":["INITIAL_Y_POSITION","CONTENT_SCROLL_THRESHOLD","MOVE_OFFSET_THRESHOLD","BottomSheet","role","props","bottomSheetReference","useRef","topBarReference","contentReference","pressed","setPressed","useState","animationId","moveOffset","initialYCoordinate","useConditionalListener","attachListener","open","isServerSide","callback","current","classList","isContentScrollPositionAtTop","add","remove","eventType","parent","undefined","document","move","newHeight","style","transform","close","event","removeProperty","onClose","onSwipeStart","touches","clientY","onSwipeMove","offset","calculateOffsetAfterMove","requestAnimationFrame","onSwipeEnd","cancelAnimationFrame","scrollTop","afterMoveYCoordinate","setContentMaxHeight","safeZoneHeight","topbarHeight","windowHight","window","innerHeight","screenHeight","maxHeight","is400Zoom","useMedia","Breakpoint","ZOOM_400","overlayId","useContext","OverlayIdContext","_jsx","Drawer","className","children","Dimmer","fadeContentOnEnter","fadeContentOnExit","SlidingPanel","ref","position","Position","BOTTOM","clsx","_jsxs","id","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","CloseButton","size","onClick"],"mappings":"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"}

package/build/common/bottomSheet/BottomSheet.mjs

@@ -30,14 +30,12 @@ const BottomSheet = ({
   const topBarReference = useRef(null);
   const contentReference = useRef(null);
   const [pressed, setPressed] = useState(false);
-
   /**
    * Used to track `requestAnimationFrame` requests
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value
    */
   const animationId = useRef(0);
-
   /**
    * Difference between initial coordinate ({@link initialYCoordinate})
    * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events
@@ -46,7 +44,6 @@ const BottomSheet = ({
    */
   const moveOffset = useRef(0);
   const initialYCoordinate = useRef(0);
-
   // apply shadow to the bottom of top-bar when scroll over content
   useConditionalListener({
     attachListener: props.open && !isServerSide(),
@@ -119,7 +116,6 @@ const BottomSheet = ({
   function isContentScrollPositionAtTop() {
     return contentReference?.current?.scrollTop !== undefined && contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD;
   }
-
   /**
    * Calculates how hard user moves component,
    * result value used to determine whether to hide component or re-position to default state
@@ -129,7 +125,6 @@ const BottomSheet = ({
   function calculateOffsetAfterMove(afterMoveYCoordinate) {
     return afterMoveYCoordinate - initialYCoordinate.current;
   }
-
   /**
    * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component
    * and ensures space for safe zone (32px) at the top.

package/build/common/bottomSheet/BottomSheet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.mjs","sources":["../../../src/common/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  PropsWithChildren,\n  SyntheticEvent,\n  useContext,\n  useRef,\n  useState,\n} from 'react';\n\nimport Dimmer from '../../dimmer';\nimport Drawer from '../../drawer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../../slidingPanel';\nimport { CloseButton } from '../closeButton';\nimport { CommonProps } from '../commonProps';\nimport { isServerSide } from '../domHelpers';\nimport { useConditionalListener } from '../hooks';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\nimport { Position } from '../propsValues/position';\n\nconst INITIAL_Y_POSITION = 0;\n\nconst CONTENT_SCROLL_THRESHOLD = 1;\n\nconst MOVE_OFFSET_THRESHOLD = 50;\n\nexport type BottomSheetProps = PropsWithChildren<\n  {\n    onClose?: (event: Event | SyntheticEvent) => void;\n    open: boolean;\n  } & CommonProps &\n    Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby' | 'aria-label'>\n>;\n\n/**\n * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet\n *\n */\nconst BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {\n  const bottomSheetReference = useRef<HTMLDivElement>(null);\n  const topBarReference = useRef<HTMLDivElement>(null);\n  const contentReference = useRef<HTMLDivElement>(null);\n\n  const [pressed, setPressed] = useState<boolean>(false);\n\n  /**\n   * Used to track `requestAnimationFrame` requests\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value\n   */\n  const animationId = useRef<number>(0);\n\n  /**\n   * Difference between initial coordinate ({@link initialYCoordinate})\n   * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events\n   *\n   * @see {@link calculateOffsetAfterMove}\n   */\n  const moveOffset = useRef<number>(0);\n  const initialYCoordinate = useRef<number>(0);\n\n  // apply shadow to the bottom of top-bar when scroll over content\n  useConditionalListener({\n    attachListener: props.open && !isServerSide(),\n    callback: () => {\n      if (topBarReference.current !== null) {\n        const { classList } = topBarReference.current;\n        if (!isContentScrollPositionAtTop()) {\n          classList.add('np-bottom-sheet--top-bar--shadow');\n        } else {\n          classList.remove('np-bottom-sheet--top-bar--shadow');\n        }\n      }\n    },\n    eventType: 'scroll',\n    parent: isServerSide() ? undefined : document,\n  });\n\n  function move(newHeight: number): void {\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.transform = `translateY(${newHeight}px)`;\n    }\n  }\n\n  function close(event: Event | SyntheticEvent): void {\n    setPressed(false);\n    moveOffset.current = INITIAL_Y_POSITION;\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.removeProperty('transform');\n    }\n    if (props.onClose) {\n      props.onClose(event);\n    }\n  }\n\n  const onSwipeStart = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;\n    setPressed(true);\n  };\n\n  const onSwipeMove = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    if (pressed) {\n      const { clientY } = 'touches' in event ? event.touches[0] : event;\n\n      const offset = calculateOffsetAfterMove(clientY);\n      // check whether move is to the bottom only and content scroll position is at the top\n      if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {\n        moveOffset.current = offset;\n        animationId.current = requestAnimationFrame(() => {\n          if (animationId.current !== undefined && bottomSheetReference.current !== null) {\n            move(offset);\n          }\n        });\n      }\n    }\n  };\n\n  function onSwipeEnd(\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void {\n    // stop moving component\n    cancelAnimationFrame(animationId.current);\n    setPressed(false);\n    // check whether move down is strong enough\n    // and content scroll position is at the top to close the component\n    if (moveOffset.current > MOVE_OFFSET_THRESHOLD && isContentScrollPositionAtTop()) {\n      close(event);\n    }\n    // otherwise move component back to default (initial) position\n    else {\n      move(INITIAL_Y_POSITION);\n    }\n    moveOffset.current = INITIAL_Y_POSITION;\n  }\n\n  function isContentScrollPositionAtTop(): boolean {\n    return (\n      contentReference?.current?.scrollTop !== undefined &&\n      contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD\n    );\n  }\n\n  /**\n   * Calculates how hard user moves component,\n   * result value used to determine whether to hide component or re-position to default state\n   *\n   * @param afterMoveYCoordinate\n   */\n  function calculateOffsetAfterMove(afterMoveYCoordinate: number): number {\n    return afterMoveYCoordinate - initialYCoordinate.current;\n  }\n\n  /**\n   * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component\n   * and ensures space for safe zone (32px) at the top.\n   */\n  function setContentMaxHeight(): CSSProperties {\n    const safeZoneHeight = '64px';\n    const topbarHeight = '32px';\n    const windowHight: number = isServerSide() ? 0 : window.innerHeight;\n    /**\n     * Calculate _real_ height of the screen (taking into account parts of browser interface).\n     *\n     * See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.\n     */\n    const screenHeight = `${windowHight * 0.01 * 100}px`;\n    return {\n      maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`,\n    };\n  }\n\n  const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return is400Zoom ? (\n    <Drawer\n      aria-labelledby={props['aria-labelledby']}\n      aria-label={props['aria-label']}\n      role={role}\n      open={props.open}\n      className={props.className}\n      onClose={close}\n    >\n      {props.children}\n    </Drawer>\n  ) : (\n    <Dimmer open={props.open} fadeContentOnEnter fadeContentOnExit onClose={close}>\n      <SlidingPanel\n        ref={bottomSheetReference}\n        open={props.open}\n        position={Position.BOTTOM}\n        className={clsx('np-bottom-sheet', props.className)}\n      >\n        <div\n          id={overlayId}\n          aria-labelledby={props['aria-labelledby'] || undefined}\n          aria-label={props['aria-label'] || undefined}\n          role={role}\n          aria-modal\n          onTouchStart={onSwipeStart}\n          onTouchMove={onSwipeMove}\n          onTouchEnd={onSwipeEnd}\n          onMouseDown={onSwipeStart}\n          onMouseMove={onSwipeMove}\n          onMouseUp={onSwipeEnd}\n        >\n          <div ref={topBarReference} className=\"np-bottom-sheet--top-bar\">\n            <div className=\"np-bottom-sheet--handler\" />\n            <CloseButton size=\"sm\" className=\"sr-only np-bottom-sheet--close-btn\" onClick={close} />\n          </div>\n          <div\n            ref={contentReference}\n            style={setContentMaxHeight()}\n            className=\"np-bottom-sheet--content\"\n          >\n            {props.children}\n          </div>\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n};\n\nexport default BottomSheet;\n"],"names":["INITIAL_Y_POSITION","CONTENT_SCROLL_THRESHOLD","MOVE_OFFSET_THRESHOLD","BottomSheet","role","props","bottomSheetReference","useRef","topBarReference","contentReference","pressed","setPressed","useState","animationId","moveOffset","initialYCoordinate","useConditionalListener","attachListener","open","isServerSide","callback","current","classList","isContentScrollPositionAtTop","add","remove","eventType","parent","undefined","document","move","newHeight","style","transform","close","event","removeProperty","onClose","onSwipeStart","touches","clientY","onSwipeMove","offset","calculateOffsetAfterMove","requestAnimationFrame","onSwipeEnd","cancelAnimationFrame","scrollTop","afterMoveYCoordinate","setContentMaxHeight","safeZoneHeight","topbarHeight","windowHight","window","innerHeight","screenHeight","maxHeight","is400Zoom","useMedia","Breakpoint","ZOOM_400","overlayId","useContext","OverlayIdContext","_jsx","Drawer","className","children","Dimmer","fadeContentOnEnter","fadeContentOnExit","SlidingPanel","ref","position","Position","BOTTOM","clsx","_jsxs","id","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","CloseButton","size","onClick"],"mappings":"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"}
+{"version":3,"file":"BottomSheet.mjs","sources":["../../../src/common/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {\n  CSSProperties,\n  HTMLAttributes,\n  PropsWithChildren,\n  SyntheticEvent,\n  useContext,\n  useRef,\n  useState,\n} from 'react';\n\nimport Dimmer from '../../dimmer';\nimport Drawer from '../../drawer';\nimport { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';\nimport SlidingPanel from '../../slidingPanel';\nimport { CloseButton } from '../closeButton';\nimport { CommonProps } from '../commonProps';\nimport { isServerSide } from '../domHelpers';\nimport { useConditionalListener } from '../hooks';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\nimport { Position } from '../propsValues/position';\n\nconst INITIAL_Y_POSITION = 0;\n\nconst CONTENT_SCROLL_THRESHOLD = 1;\n\nconst MOVE_OFFSET_THRESHOLD = 50;\n\nexport type BottomSheetProps = PropsWithChildren<\n  {\n    onClose?: (event: Event | SyntheticEvent) => void;\n    open: boolean;\n  } & CommonProps &\n    Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'aria-labelledby' | 'aria-label'>\n>;\n\n/**\n * Neptune: https://transferwise.github.io/neptune/components/bottom-sheet/\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/overlays/BottomSheet\n *\n */\nconst BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {\n  const bottomSheetReference = useRef<HTMLDivElement>(null);\n  const topBarReference = useRef<HTMLDivElement>(null);\n  const contentReference = useRef<HTMLDivElement>(null);\n\n  const [pressed, setPressed] = useState<boolean>(false);\n\n  /**\n   * Used to track `requestAnimationFrame` requests\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#return_value\n   */\n  const animationId = useRef<number>(0);\n\n  /**\n   * Difference between initial coordinate ({@link initialYCoordinate})\n   * and new position (when user moves component), it's get calculated on `onTouchMove` and `onMouseMove` events\n   *\n   * @see {@link calculateOffsetAfterMove}\n   */\n  const moveOffset = useRef<number>(0);\n  const initialYCoordinate = useRef<number>(0);\n\n  // apply shadow to the bottom of top-bar when scroll over content\n  useConditionalListener({\n    attachListener: props.open && !isServerSide(),\n    callback: () => {\n      if (topBarReference.current !== null) {\n        const { classList } = topBarReference.current;\n        if (!isContentScrollPositionAtTop()) {\n          classList.add('np-bottom-sheet--top-bar--shadow');\n        } else {\n          classList.remove('np-bottom-sheet--top-bar--shadow');\n        }\n      }\n    },\n    eventType: 'scroll',\n    parent: isServerSide() ? undefined : document,\n  });\n\n  function move(newHeight: number): void {\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.transform = `translateY(${newHeight}px)`;\n    }\n  }\n\n  function close(event: Event | SyntheticEvent): void {\n    setPressed(false);\n    moveOffset.current = INITIAL_Y_POSITION;\n    if (bottomSheetReference.current !== null) {\n      bottomSheetReference.current.style.removeProperty('transform');\n    }\n    if (props.onClose) {\n      props.onClose(event);\n    }\n  }\n\n  const onSwipeStart = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    initialYCoordinate.current = ('touches' in event ? event.touches[0] : event).clientY;\n    setPressed(true);\n  };\n\n  const onSwipeMove = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void => {\n    if (pressed) {\n      const { clientY } = 'touches' in event ? event.touches[0] : event;\n\n      const offset = calculateOffsetAfterMove(clientY);\n      // check whether move is to the bottom only and content scroll position is at the top\n      if (offset > INITIAL_Y_POSITION && isContentScrollPositionAtTop()) {\n        moveOffset.current = offset;\n        animationId.current = requestAnimationFrame(() => {\n          if (animationId.current !== undefined && bottomSheetReference.current !== null) {\n            move(offset);\n          }\n        });\n      }\n    }\n  };\n\n  function onSwipeEnd(\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ): void {\n    // stop moving component\n    cancelAnimationFrame(animationId.current);\n    setPressed(false);\n    // check whether move down is strong enough\n    // and content scroll position is at the top to close the component\n    if (moveOffset.current > MOVE_OFFSET_THRESHOLD && isContentScrollPositionAtTop()) {\n      close(event);\n    }\n    // otherwise move component back to default (initial) position\n    else {\n      move(INITIAL_Y_POSITION);\n    }\n    moveOffset.current = INITIAL_Y_POSITION;\n  }\n\n  function isContentScrollPositionAtTop(): boolean {\n    return (\n      contentReference?.current?.scrollTop !== undefined &&\n      contentReference.current.scrollTop <= CONTENT_SCROLL_THRESHOLD\n    );\n  }\n\n  /**\n   * Calculates how hard user moves component,\n   * result value used to determine whether to hide component or re-position to default state\n   *\n   * @param afterMoveYCoordinate\n   */\n  function calculateOffsetAfterMove(afterMoveYCoordinate: number): number {\n    return afterMoveYCoordinate - initialYCoordinate.current;\n  }\n\n  /**\n   * Set `max-height` for content part (in order to keep it scrollable for content overflow cases) of the component\n   * and ensures space for safe zone (32px) at the top.\n   */\n  function setContentMaxHeight(): CSSProperties {\n    const safeZoneHeight = '64px';\n    const topbarHeight = '32px';\n    const windowHight: number = isServerSide() ? 0 : window.innerHeight;\n    /**\n     * Calculate _real_ height of the screen (taking into account parts of browser interface).\n     *\n     * See https://css-tricks.com/the-trick-to-viewport-units-on-mobile for more details.\n     */\n    const screenHeight = `${windowHight * 0.01 * 100}px`;\n    return {\n      maxHeight: `calc(${screenHeight} - ${safeZoneHeight} - ${topbarHeight})`,\n    };\n  }\n\n  const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n\n  const overlayId = useContext(OverlayIdContext);\n\n  return is400Zoom ? (\n    <Drawer\n      aria-labelledby={props['aria-labelledby']}\n      aria-label={props['aria-label']}\n      role={role}\n      open={props.open}\n      className={props.className}\n      onClose={close}\n    >\n      {props.children}\n    </Drawer>\n  ) : (\n    <Dimmer open={props.open} fadeContentOnEnter fadeContentOnExit onClose={close}>\n      <SlidingPanel\n        ref={bottomSheetReference}\n        open={props.open}\n        position={Position.BOTTOM}\n        className={clsx('np-bottom-sheet', props.className)}\n      >\n        <div\n          id={overlayId}\n          aria-labelledby={props['aria-labelledby'] || undefined}\n          aria-label={props['aria-label'] || undefined}\n          role={role}\n          aria-modal\n          onTouchStart={onSwipeStart}\n          onTouchMove={onSwipeMove}\n          onTouchEnd={onSwipeEnd}\n          onMouseDown={onSwipeStart}\n          onMouseMove={onSwipeMove}\n          onMouseUp={onSwipeEnd}\n        >\n          <div ref={topBarReference} className=\"np-bottom-sheet--top-bar\">\n            <div className=\"np-bottom-sheet--handler\" />\n            <CloseButton size=\"sm\" className=\"sr-only np-bottom-sheet--close-btn\" onClick={close} />\n          </div>\n          <div\n            ref={contentReference}\n            style={setContentMaxHeight()}\n            className=\"np-bottom-sheet--content\"\n          >\n            {props.children}\n          </div>\n        </div>\n      </SlidingPanel>\n    </Dimmer>\n  );\n};\n\nexport default BottomSheet;\n"],"names":["INITIAL_Y_POSITION","CONTENT_SCROLL_THRESHOLD","MOVE_OFFSET_THRESHOLD","BottomSheet","role","props","bottomSheetReference","useRef","topBarReference","contentReference","pressed","setPressed","useState","animationId","moveOffset","initialYCoordinate","useConditionalListener","attachListener","open","isServerSide","callback","current","classList","isContentScrollPositionAtTop","add","remove","eventType","parent","undefined","document","move","newHeight","style","transform","close","event","removeProperty","onClose","onSwipeStart","touches","clientY","onSwipeMove","offset","calculateOffsetAfterMove","requestAnimationFrame","onSwipeEnd","cancelAnimationFrame","scrollTop","afterMoveYCoordinate","setContentMaxHeight","safeZoneHeight","topbarHeight","windowHight","window","innerHeight","screenHeight","maxHeight","is400Zoom","useMedia","Breakpoint","ZOOM_400","overlayId","useContext","OverlayIdContext","_jsx","Drawer","className","children","Dimmer","fadeContentOnEnter","fadeContentOnExit","SlidingPanel","ref","position","Position","BOTTOM","clsx","_jsxs","id","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","CloseButton","size","onClick"],"mappings":"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"}

package/build/common/card/Card.js

@@ -8,27 +8,6 @@ var CloseButton = require('../closeButton/CloseButton.js');
 var documentIosClick = require('../domHelpers/documentIosClick.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-/**
- * Card component.
- *
- * A card is a container for content that is used to group related information.
- * It can be used to display information in a structured way, and can be
- * customized with various props to suit different use cases.
- *
- * @param {Object} props - The component props.
- * @param {ReactNode} children - The content to display inside the card.
- * @param {string} className - Optional class name(s) to add to the card container.
- * @param {string} id - Optional ID to add to the card container.
- * @param {boolean} isDisabled - Whether the card is disabled or not.
- * @param {boolean} isSmall - Whether the card is small or not.
- * @param {(event_: MouseEvent<HTMLButtonElement>) => void} onDismiss - Optional function to call when the card is dismissed.
- * @param {string} testId - Optional ID to add to the card container for testing purposes.
- * @returns {React.JSX.Element} - The card component.
- * @example
- * <Card>
- *   <p>Hello World!</p>
- * </Card>
- */
 const Card = /*#__PURE__*/React.forwardRef(({
   className,
   children = null,

package/build/common/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../src/common/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { MouseEvent, type ReactNode, forwardRef, useRef } from 'react';\n\nimport { CloseButton } from '../closeButton';\nimport { stopPropagation } from '../domHelpers';\n\nexport interface CardProps {\n  /** Content to display inside Card. */\n  children: ReactNode;\n\n  /** Optional prop to specify classNames onto the Card */\n  className?: string;\n\n  /** Optional prop to specify the ID on to Card  */\n  id?: string;\n\n  /** Specify whether the Card is disabled, or not */\n  isDisabled?: boolean;\n\n  /** Specify whether the Card is sized small or not */\n  isSmall?: boolean;\n\n  /** Optionally specify Card onDismiss function */\n  onDismiss?: () => void;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n}\n\n/**\n * Card component.\n *\n * A card is a container for content that is used to group related information.\n * It can be used to display information in a structured way, and can be\n * customized with various props to suit different use cases.\n *\n * @param {Object} props - The component props.\n * @param {ReactNode} children - The content to display inside the card.\n * @param {string} className - Optional class name(s) to add to the card container.\n * @param {string} id - Optional ID to add to the card container.\n * @param {boolean} isDisabled - Whether the card is disabled or not.\n * @param {boolean} isSmall - Whether the card is small or not.\n * @param {(event_: MouseEvent<HTMLButtonElement>) => void} onDismiss - Optional function to call when the card is dismissed.\n * @param {string} testId - Optional ID to add to the card container for testing purposes.\n * @returns {React.JSX.Element} - The card component.\n * @example\n * <Card>\n *   <p>Hello World!</p>\n * </Card>\n */\nconst Card = forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      className,\n      children = null,\n      id,\n      isDisabled = false,\n      isSmall = false,\n      onDismiss,\n      testId,\n      ...props\n    },\n    ref,\n  ) => {\n    const closeButtonReference = useRef(null);\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          'np-Card',\n          {\n            'np-Card--small': !!isSmall,\n            'is-disabled': !!isDisabled,\n          },\n          className,\n        )}\n        id={id}\n        data-testid={testId}\n        {...props}\n      >\n        {onDismiss && (\n          <CloseButton\n            ref={closeButtonReference}\n            className=\"np-Card-closeButton\"\n            size={isSmall ? 'sm' : 'md'}\n            isDisabled={isDisabled}\n            testId=\"close-button\"\n            onClick={(e) => {\n              stopPropagation(e);\n              onDismiss();\n            }}\n          />\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nCard.displayName = 'Card';\n\nexport default Card;\n"],"names":["Card","forwardRef","className","children","id","isDisabled","isSmall","onDismiss","testId","props","ref","closeButtonReference","useRef","_jsxs","clsx","_jsx","CloseButton","size","onClick","e","stopPropagation","displayName"],"mappings":";;;;;;;;;;AA6BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,IAAI,gBAAGC,gBAAU,CACrB,CACE;EACEC,SAAS;AACTC,EAAAA,QAAQ,GAAG,IAAI;EACfC,EAAE;AACFC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,MAAM;EACN,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;AACH,EAAA,MAAMC,oBAAoB,GAAGC,YAAM,CAAC,IAAI,CAAC;AAEzC,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,SAAS,EAAEY,SAAI,CACb,SAAS,EACT;MACE,gBAAgB,EAAE,CAAC,CAACR,OAAO;MAC3B,aAAa,EAAE,CAAC,CAACD;KAClB,EACDH,SACF,CAAE;AACFE,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaI,MAAO;AAAA,IAAA,GAChBC,KAAK;AAAAN,IAAAA,QAAA,EAAA,CAERI,SAAS,iBACRQ,cAAA,CAACC,uBAAW,EAAA;AACVN,MAAAA,GAAG,EAAEC,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,qBAAqB;AAC/Be,MAAAA,IAAI,EAAEX,OAAO,GAAG,IAAI,GAAG,IAAK;AAC5BD,MAAAA,UAAU,EAAEA,UAAW;AACvBG,MAAAA,MAAM,EAAC,cAAc;MACrBU,OAAO,EAAGC,CAAC,IAAK;QACdC,gCAAe,CAACD,CAAC,CAAC;AAClBZ,QAAAA,SAAS,EAAE;AACb,MAAA;KACD,CACF,EACAJ,QAAQ;AAAA,GACN,CAAC;AAEV,CACF;AAEAH,IAAI,CAACqB,WAAW,GAAG,MAAM;;;;"}
+{"version":3,"file":"Card.js","sources":["../../../src/common/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { MouseEvent, type ReactNode, forwardRef, useRef } from 'react';\n\nimport { CloseButton } from '../closeButton';\nimport { stopPropagation } from '../domHelpers';\n\nexport interface CardProps {\n  /** Content to display inside Card. */\n  children: ReactNode;\n\n  /** Optional prop to specify classNames onto the Card */\n  className?: string;\n\n  /** Optional prop to specify the ID on to Card  */\n  id?: string;\n\n  /** Specify whether the Card is disabled, or not */\n  isDisabled?: boolean;\n\n  /** Specify whether the Card is sized small or not */\n  isSmall?: boolean;\n\n  /** Optionally specify Card onDismiss function */\n  onDismiss?: () => void;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n}\n\n/**\n * Card component.\n *\n * A card is a container for content that is used to group related information.\n * It can be used to display information in a structured way, and can be\n * customized with various props to suit different use cases.\n *\n * @param {Object} props - The component props.\n * @param {ReactNode} children - The content to display inside the card.\n * @param {string} className - Optional class name(s) to add to the card container.\n * @param {string} id - Optional ID to add to the card container.\n * @param {boolean} isDisabled - Whether the card is disabled or not.\n * @param {boolean} isSmall - Whether the card is small or not.\n * @param {(event_: MouseEvent<HTMLButtonElement>) => void} onDismiss - Optional function to call when the card is dismissed.\n * @param {string} testId - Optional ID to add to the card container for testing purposes.\n * @returns {React.JSX.Element} - The card component.\n * @example\n * <Card>\n *   <p>Hello World!</p>\n * </Card>\n */\nconst Card = forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      className,\n      children = null,\n      id,\n      isDisabled = false,\n      isSmall = false,\n      onDismiss,\n      testId,\n      ...props\n    },\n    ref,\n  ) => {\n    const closeButtonReference = useRef(null);\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          'np-Card',\n          {\n            'np-Card--small': !!isSmall,\n            'is-disabled': !!isDisabled,\n          },\n          className,\n        )}\n        id={id}\n        data-testid={testId}\n        {...props}\n      >\n        {onDismiss && (\n          <CloseButton\n            ref={closeButtonReference}\n            className=\"np-Card-closeButton\"\n            size={isSmall ? 'sm' : 'md'}\n            isDisabled={isDisabled}\n            testId=\"close-button\"\n            onClick={(e) => {\n              stopPropagation(e);\n              onDismiss();\n            }}\n          />\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nCard.displayName = 'Card';\n\nexport default Card;\n"],"names":["Card","forwardRef","className","children","id","isDisabled","isSmall","onDismiss","testId","props","ref","closeButtonReference","useRef","_jsxs","clsx","_jsx","CloseButton","size","onClick","e","stopPropagation","displayName"],"mappings":";;;;;;;;;;AAkDA,MAAMA,IAAI,gBAAGC,gBAAU,CACrB,CACE;EACEC,SAAS;AACTC,EAAAA,QAAQ,GAAG,IAAI;EACfC,EAAE;AACFC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,MAAM;EACN,GAAGC;AAAK,CACT,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,oBAAoB,GAAGC,YAAM,CAAC,IAAI,CAAC;AAEzC,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,SAAS,EAAEY,SAAI,CACb,SAAS,EACT;MACE,gBAAgB,EAAE,CAAC,CAACR,OAAO;MAC3B,aAAa,EAAE,CAAC,CAACD;KAClB,EACDH,SAAS,CACT;AACFE,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaI,MAAO;AAAA,IAAA,GAChBC,KAAK;AAAAN,IAAAA,QAAA,EAAA,CAERI,SAAS,iBACRQ,cAAA,CAACC,uBAAW,EAAA;AACVN,MAAAA,GAAG,EAAEC,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,qBAAqB;AAC/Be,MAAAA,IAAI,EAAEX,OAAO,GAAG,IAAI,GAAG,IAAK;AAC5BD,MAAAA,UAAU,EAAEA,UAAW;AACvBG,MAAAA,MAAM,EAAC,cAAc;MACrBU,OAAO,EAAGC,CAAC,IAAI;QACbC,gCAAe,CAACD,CAAC,CAAC;AAClBZ,QAAAA,SAAS,EAAE;AACb,MAAA;KAAE,CAEL,EACAJ,QAAQ;AAAA,GACN,CAAC;AAEV,CAAC;AAGHH,IAAI,CAACqB,WAAW,GAAG,MAAM;;;;"}

package/build/common/card/Card.mjs

@@ -4,27 +4,6 @@ import { CloseButton } from '../closeButton/CloseButton.mjs';
 import { stopPropagation } from '../domHelpers/documentIosClick.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-/**
- * Card component.
- *
- * A card is a container for content that is used to group related information.
- * It can be used to display information in a structured way, and can be
- * customized with various props to suit different use cases.
- *
- * @param {Object} props - The component props.
- * @param {ReactNode} children - The content to display inside the card.
- * @param {string} className - Optional class name(s) to add to the card container.
- * @param {string} id - Optional ID to add to the card container.
- * @param {boolean} isDisabled - Whether the card is disabled or not.
- * @param {boolean} isSmall - Whether the card is small or not.
- * @param {(event_: MouseEvent<HTMLButtonElement>) => void} onDismiss - Optional function to call when the card is dismissed.
- * @param {string} testId - Optional ID to add to the card container for testing purposes.
- * @returns {React.JSX.Element} - The card component.
- * @example
- * <Card>
- *   <p>Hello World!</p>
- * </Card>
- */
 const Card = /*#__PURE__*/forwardRef(({
   className,
   children = null,

package/build/common/card/Card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.mjs","sources":["../../../src/common/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { MouseEvent, type ReactNode, forwardRef, useRef } from 'react';\n\nimport { CloseButton } from '../closeButton';\nimport { stopPropagation } from '../domHelpers';\n\nexport interface CardProps {\n  /** Content to display inside Card. */\n  children: ReactNode;\n\n  /** Optional prop to specify classNames onto the Card */\n  className?: string;\n\n  /** Optional prop to specify the ID on to Card  */\n  id?: string;\n\n  /** Specify whether the Card is disabled, or not */\n  isDisabled?: boolean;\n\n  /** Specify whether the Card is sized small or not */\n  isSmall?: boolean;\n\n  /** Optionally specify Card onDismiss function */\n  onDismiss?: () => void;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n}\n\n/**\n * Card component.\n *\n * A card is a container for content that is used to group related information.\n * It can be used to display information in a structured way, and can be\n * customized with various props to suit different use cases.\n *\n * @param {Object} props - The component props.\n * @param {ReactNode} children - The content to display inside the card.\n * @param {string} className - Optional class name(s) to add to the card container.\n * @param {string} id - Optional ID to add to the card container.\n * @param {boolean} isDisabled - Whether the card is disabled or not.\n * @param {boolean} isSmall - Whether the card is small or not.\n * @param {(event_: MouseEvent<HTMLButtonElement>) => void} onDismiss - Optional function to call when the card is dismissed.\n * @param {string} testId - Optional ID to add to the card container for testing purposes.\n * @returns {React.JSX.Element} - The card component.\n * @example\n * <Card>\n *   <p>Hello World!</p>\n * </Card>\n */\nconst Card = forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      className,\n      children = null,\n      id,\n      isDisabled = false,\n      isSmall = false,\n      onDismiss,\n      testId,\n      ...props\n    },\n    ref,\n  ) => {\n    const closeButtonReference = useRef(null);\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          'np-Card',\n          {\n            'np-Card--small': !!isSmall,\n            'is-disabled': !!isDisabled,\n          },\n          className,\n        )}\n        id={id}\n        data-testid={testId}\n        {...props}\n      >\n        {onDismiss && (\n          <CloseButton\n            ref={closeButtonReference}\n            className=\"np-Card-closeButton\"\n            size={isSmall ? 'sm' : 'md'}\n            isDisabled={isDisabled}\n            testId=\"close-button\"\n            onClick={(e) => {\n              stopPropagation(e);\n              onDismiss();\n            }}\n          />\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nCard.displayName = 'Card';\n\nexport default Card;\n"],"names":["Card","forwardRef","className","children","id","isDisabled","isSmall","onDismiss","testId","props","ref","closeButtonReference","useRef","_jsxs","clsx","_jsx","CloseButton","size","onClick","e","stopPropagation","displayName"],"mappings":";;;;;;AA6BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,IAAI,gBAAGC,UAAU,CACrB,CACE;EACEC,SAAS;AACTC,EAAAA,QAAQ,GAAG,IAAI;EACfC,EAAE;AACFC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,MAAM;EACN,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;AACH,EAAA,MAAMC,oBAAoB,GAAGC,MAAM,CAAC,IAAI,CAAC;AAEzC,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,SAAS,EAAEY,IAAI,CACb,SAAS,EACT;MACE,gBAAgB,EAAE,CAAC,CAACR,OAAO;MAC3B,aAAa,EAAE,CAAC,CAACD;KAClB,EACDH,SACF,CAAE;AACFE,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaI,MAAO;AAAA,IAAA,GAChBC,KAAK;AAAAN,IAAAA,QAAA,EAAA,CAERI,SAAS,iBACRQ,GAAA,CAACC,WAAW,EAAA;AACVN,MAAAA,GAAG,EAAEC,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,qBAAqB;AAC/Be,MAAAA,IAAI,EAAEX,OAAO,GAAG,IAAI,GAAG,IAAK;AAC5BD,MAAAA,UAAU,EAAEA,UAAW;AACvBG,MAAAA,MAAM,EAAC,cAAc;MACrBU,OAAO,EAAGC,CAAC,IAAK;QACdC,eAAe,CAACD,CAAC,CAAC;AAClBZ,QAAAA,SAAS,EAAE;AACb,MAAA;KACD,CACF,EACAJ,QAAQ;AAAA,GACN,CAAC;AAEV,CACF;AAEAH,IAAI,CAACqB,WAAW,GAAG,MAAM;;;;"}
+{"version":3,"file":"Card.mjs","sources":["../../../src/common/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { MouseEvent, type ReactNode, forwardRef, useRef } from 'react';\n\nimport { CloseButton } from '../closeButton';\nimport { stopPropagation } from '../domHelpers';\n\nexport interface CardProps {\n  /** Content to display inside Card. */\n  children: ReactNode;\n\n  /** Optional prop to specify classNames onto the Card */\n  className?: string;\n\n  /** Optional prop to specify the ID on to Card  */\n  id?: string;\n\n  /** Specify whether the Card is disabled, or not */\n  isDisabled?: boolean;\n\n  /** Specify whether the Card is sized small or not */\n  isSmall?: boolean;\n\n  /** Optionally specify Card onDismiss function */\n  onDismiss?: () => void;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n}\n\n/**\n * Card component.\n *\n * A card is a container for content that is used to group related information.\n * It can be used to display information in a structured way, and can be\n * customized with various props to suit different use cases.\n *\n * @param {Object} props - The component props.\n * @param {ReactNode} children - The content to display inside the card.\n * @param {string} className - Optional class name(s) to add to the card container.\n * @param {string} id - Optional ID to add to the card container.\n * @param {boolean} isDisabled - Whether the card is disabled or not.\n * @param {boolean} isSmall - Whether the card is small or not.\n * @param {(event_: MouseEvent<HTMLButtonElement>) => void} onDismiss - Optional function to call when the card is dismissed.\n * @param {string} testId - Optional ID to add to the card container for testing purposes.\n * @returns {React.JSX.Element} - The card component.\n * @example\n * <Card>\n *   <p>Hello World!</p>\n * </Card>\n */\nconst Card = forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      className,\n      children = null,\n      id,\n      isDisabled = false,\n      isSmall = false,\n      onDismiss,\n      testId,\n      ...props\n    },\n    ref,\n  ) => {\n    const closeButtonReference = useRef(null);\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          'np-Card',\n          {\n            'np-Card--small': !!isSmall,\n            'is-disabled': !!isDisabled,\n          },\n          className,\n        )}\n        id={id}\n        data-testid={testId}\n        {...props}\n      >\n        {onDismiss && (\n          <CloseButton\n            ref={closeButtonReference}\n            className=\"np-Card-closeButton\"\n            size={isSmall ? 'sm' : 'md'}\n            isDisabled={isDisabled}\n            testId=\"close-button\"\n            onClick={(e) => {\n              stopPropagation(e);\n              onDismiss();\n            }}\n          />\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n\nCard.displayName = 'Card';\n\nexport default Card;\n"],"names":["Card","forwardRef","className","children","id","isDisabled","isSmall","onDismiss","testId","props","ref","closeButtonReference","useRef","_jsxs","clsx","_jsx","CloseButton","size","onClick","e","stopPropagation","displayName"],"mappings":";;;;;;AAkDA,MAAMA,IAAI,gBAAGC,UAAU,CACrB,CACE;EACEC,SAAS;AACTC,EAAAA,QAAQ,GAAG,IAAI;EACfC,EAAE;AACFC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,MAAM;EACN,GAAGC;AAAK,CACT,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,oBAAoB,GAAGC,MAAM,CAAC,IAAI,CAAC;AAEzC,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,GAAG,EAAEA,GAAI;AACTR,IAAAA,SAAS,EAAEY,IAAI,CACb,SAAS,EACT;MACE,gBAAgB,EAAE,CAAC,CAACR,OAAO;MAC3B,aAAa,EAAE,CAAC,CAACD;KAClB,EACDH,SAAS,CACT;AACFE,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaI,MAAO;AAAA,IAAA,GAChBC,KAAK;AAAAN,IAAAA,QAAA,EAAA,CAERI,SAAS,iBACRQ,GAAA,CAACC,WAAW,EAAA;AACVN,MAAAA,GAAG,EAAEC,oBAAqB;AAC1BT,MAAAA,SAAS,EAAC,qBAAqB;AAC/Be,MAAAA,IAAI,EAAEX,OAAO,GAAG,IAAI,GAAG,IAAK;AAC5BD,MAAAA,UAAU,EAAEA,UAAW;AACvBG,MAAAA,MAAM,EAAC,cAAc;MACrBU,OAAO,EAAGC,CAAC,IAAI;QACbC,eAAe,CAACD,CAAC,CAAC;AAClBZ,QAAAA,SAAS,EAAE;AACb,MAAA;KAAE,CAEL,EACAJ,QAAQ;AAAA,GACN,CAAC;AAEV,CAAC;AAGHH,IAAI,CAACqB,WAAW,GAAG,MAAM;;;;"}

package/build/common/circle/Circle.js

@@ -8,9 +8,6 @@ var useMedia = require('../hooks/useMedia.js');
 var breakpoint = require('../propsValues/breakpoint.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-/**
- * circle like components has custom sizes for icons
- */
 const MAP_ICON_SIZE = {
   16: 12,
   24: 16,
@@ -20,7 +17,6 @@ const MAP_ICON_SIZE = {
   56: 28,
   72: 36
 };
-
 /**
  * circle like components have custom typography styles for for default (Inter) font
  *

package/build/common/circle/Circle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Circle.js","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;\n\nexport type Props = {\n  /**\n   * Modify underlying element, `div` by default\n   */\n  as?: React.ElementType;\n  /**\n   * Set size of the circle in px, `48` by default\n   */\n  size?: ShapeSize;\n  /**\n   * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n   * as those can be dynamic a at certain viewport sizes\n   */\n  fixedSize?: boolean;\n  enableBorder?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/**\n * circle like components has custom sizes for icons\n */\nconst MAP_ICON_SIZE = {\n  16: 12,\n  24: 16,\n  32: 18,\n  40: 20,\n  48: 24,\n  56: 28,\n  72: 36,\n};\n\n/**\n * circle like components have custom typography styles for for default (Inter) font\n *\n * circle size : font size (px)\n */\nconst MAP_FONT_SIZE = {\n  16: 8,\n  24: 12,\n  32: 14,\n  40: 18,\n  48: 22,\n  56: 26,\n  72: 30,\n};\n\nconst Circle = forwardRef(function Circle(\n  {\n    as: Element = 'div',\n    children,\n    size = 48,\n    fixedSize = false,\n    enableBorder = false,\n    className,\n    style,\n    ...props\n  }: Props,\n  ref,\n) {\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{\n        '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n        '--circle-icon-size':\n          isTinyViewport && !fixedSize\n            ? `${MAP_ICON_SIZE[size] / 2}px`\n            : `${MAP_ICON_SIZE[size]}px`,\n        '--circle-font-size': `${MAP_FONT_SIZE[size]}px`,\n        ...style,\n      }}\n      className={clsx(\n        'np-circle',\n        { 'np-circle-border': enableBorder },\n        'd-flex align-items-center justify-content-center',\n        className,\n      )}\n    >\n      {children}\n    </Element>\n  );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","MAP_FONT_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","enableBorder","className","style","props","ref","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","clsx"],"mappings":";;;;;;;;;;AAwBA;AACA;AACA;AACA,MAAMA,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;AACN,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;AACN,CAAC;AAED,MAAMC,MAAM,gBAAGC,gBAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,YAAY,GAAG,KAAK;EACpBC,SAAS;EACTC,KAAK;EACL,GAAGC;AACE,CAAC,EACRC,GAAG,EACH;EACA,MAAMC,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC;EACxE,oBACEC,cAAA,CAACb,OAAO,EAAA;AAAA,IAAA,GACFO,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEH,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAA,EAAA,CAAI,GAAG,CAAA,WAAA,EAAcA,IAAI,CAAA,CAAA,CAAG;MAChE,oBAAoB,EAClBO,cAAc,IAAI,CAACN,SAAS,GACxB,CAAA,EAAGR,aAAa,CAACO,IAAI,CAAC,GAAG,CAAC,IAAI,GAC9B,CAAA,EAAGP,aAAa,CAACO,IAAI,CAAC,CAAA,EAAA,CAAI;AAChC,MAAA,oBAAoB,EAAE,CAAA,EAAGN,aAAa,CAACM,IAAI,CAAC,CAAA,EAAA,CAAI;MAChD,GAAGI;KACH;AACFD,IAAAA,SAAS,EAAES,SAAI,CACb,WAAW,EACX;AAAE,MAAA,kBAAkB,EAAEV;AAAa,KAAC,EACpC,kDAAkD,EAClDC,SACF,CAAE;AAAAJ,IAAAA,QAAA,EAEDA;AAAQ,GACF,CAAC;AAEd,CAAC;;;;"}
+{"version":3,"file":"Circle.js","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;\n\nexport type Props = {\n  /**\n   * Modify underlying element, `div` by default\n   */\n  as?: React.ElementType;\n  /**\n   * Set size of the circle in px, `48` by default\n   */\n  size?: ShapeSize;\n  /**\n   * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n   * as those can be dynamic a at certain viewport sizes\n   */\n  fixedSize?: boolean;\n  enableBorder?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/**\n * circle like components has custom sizes for icons\n */\nconst MAP_ICON_SIZE = {\n  16: 12,\n  24: 16,\n  32: 18,\n  40: 20,\n  48: 24,\n  56: 28,\n  72: 36,\n};\n\n/**\n * circle like components have custom typography styles for for default (Inter) font\n *\n * circle size : font size (px)\n */\nconst MAP_FONT_SIZE = {\n  16: 8,\n  24: 12,\n  32: 14,\n  40: 18,\n  48: 22,\n  56: 26,\n  72: 30,\n};\n\nconst Circle = forwardRef(function Circle(\n  {\n    as: Element = 'div',\n    children,\n    size = 48,\n    fixedSize = false,\n    enableBorder = false,\n    className,\n    style,\n    ...props\n  }: Props,\n  ref,\n) {\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{\n        '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n        '--circle-icon-size':\n          isTinyViewport && !fixedSize\n            ? `${MAP_ICON_SIZE[size] / 2}px`\n            : `${MAP_ICON_SIZE[size]}px`,\n        '--circle-font-size': `${MAP_FONT_SIZE[size]}px`,\n        ...style,\n      }}\n      className={clsx(\n        'np-circle',\n        { 'np-circle-border': enableBorder },\n        'd-flex align-items-center justify-content-center',\n        className,\n      )}\n    >\n      {children}\n    </Element>\n  );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","MAP_FONT_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","enableBorder","className","style","props","ref","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","clsx"],"mappings":";;;;;;;;;;AA2BA,MAAMA,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;CACL;AAED;;;;AAIG;AACH,MAAMC,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;CACL;AAED,MAAMC,MAAM,gBAAGC,gBAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,YAAY,GAAG,KAAK;EACpBC,SAAS;EACTC,KAAK;EACL,GAAGC;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,MAAMC,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC;EACxE,oBACEC,cAAA,CAACb,OAAO,EAAA;AAAA,IAAA,GACFO,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEH,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAA,EAAA,CAAI,GAAG,CAAA,WAAA,EAAcA,IAAI,CAAA,CAAA,CAAG;MAChE,oBAAoB,EAClBO,cAAc,IAAI,CAACN,SAAS,GACxB,CAAA,EAAGR,aAAa,CAACO,IAAI,CAAC,GAAG,CAAC,IAAI,GAC9B,CAAA,EAAGP,aAAa,CAACO,IAAI,CAAC,CAAA,EAAA,CAAI;AAChC,MAAA,oBAAoB,EAAE,CAAA,EAAGN,aAAa,CAACM,IAAI,CAAC,CAAA,EAAA,CAAI;MAChD,GAAGI;KACH;AACFD,IAAAA,SAAS,EAAES,SAAI,CACb,WAAW,EACX;AAAE,MAAA,kBAAkB,EAAEV;KAAc,EACpC,kDAAkD,EAClDC,SAAS,CACT;AAAAJ,IAAAA,QAAA,EAEDA;AAAQ,GACF,CAAC;AAEd,CAAC;;;;"}

package/build/common/circle/Circle.mjs

@@ -4,9 +4,6 @@ import { useMedia } from '../hooks/useMedia.mjs';
 import { Breakpoint } from '../propsValues/breakpoint.mjs';
 import { jsx } from 'react/jsx-runtime';
 
-/**
- * circle like components has custom sizes for icons
- */
 const MAP_ICON_SIZE = {
   16: 12,
   24: 16,
@@ -16,7 +13,6 @@ const MAP_ICON_SIZE = {
   56: 28,
   72: 36
 };
-
 /**
  * circle like components have custom typography styles for for default (Inter) font
  *

package/build/common/circle/Circle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Circle.mjs","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;\n\nexport type Props = {\n  /**\n   * Modify underlying element, `div` by default\n   */\n  as?: React.ElementType;\n  /**\n   * Set size of the circle in px, `48` by default\n   */\n  size?: ShapeSize;\n  /**\n   * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n   * as those can be dynamic a at certain viewport sizes\n   */\n  fixedSize?: boolean;\n  enableBorder?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/**\n * circle like components has custom sizes for icons\n */\nconst MAP_ICON_SIZE = {\n  16: 12,\n  24: 16,\n  32: 18,\n  40: 20,\n  48: 24,\n  56: 28,\n  72: 36,\n};\n\n/**\n * circle like components have custom typography styles for for default (Inter) font\n *\n * circle size : font size (px)\n */\nconst MAP_FONT_SIZE = {\n  16: 8,\n  24: 12,\n  32: 14,\n  40: 18,\n  48: 22,\n  56: 26,\n  72: 30,\n};\n\nconst Circle = forwardRef(function Circle(\n  {\n    as: Element = 'div',\n    children,\n    size = 48,\n    fixedSize = false,\n    enableBorder = false,\n    className,\n    style,\n    ...props\n  }: Props,\n  ref,\n) {\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{\n        '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n        '--circle-icon-size':\n          isTinyViewport && !fixedSize\n            ? `${MAP_ICON_SIZE[size] / 2}px`\n            : `${MAP_ICON_SIZE[size]}px`,\n        '--circle-font-size': `${MAP_FONT_SIZE[size]}px`,\n        ...style,\n      }}\n      className={clsx(\n        'np-circle',\n        { 'np-circle-border': enableBorder },\n        'd-flex align-items-center justify-content-center',\n        className,\n      )}\n    >\n      {children}\n    </Element>\n  );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","MAP_FONT_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","enableBorder","className","style","props","ref","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","clsx"],"mappings":";;;;;;AAwBA;AACA;AACA;AACA,MAAMA,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;AACN,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;AACN,CAAC;AAED,MAAMC,MAAM,gBAAGC,UAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,YAAY,GAAG,KAAK;EACpBC,SAAS;EACTC,KAAK;EACL,GAAGC;AACE,CAAC,EACRC,GAAG,EACH;EACA,MAAMC,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC;EACxE,oBACEC,GAAA,CAACb,OAAO,EAAA;AAAA,IAAA,GACFO,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEH,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAA,EAAA,CAAI,GAAG,CAAA,WAAA,EAAcA,IAAI,CAAA,CAAA,CAAG;MAChE,oBAAoB,EAClBO,cAAc,IAAI,CAACN,SAAS,GACxB,CAAA,EAAGR,aAAa,CAACO,IAAI,CAAC,GAAG,CAAC,IAAI,GAC9B,CAAA,EAAGP,aAAa,CAACO,IAAI,CAAC,CAAA,EAAA,CAAI;AAChC,MAAA,oBAAoB,EAAE,CAAA,EAAGN,aAAa,CAACM,IAAI,CAAC,CAAA,EAAA,CAAI;MAChD,GAAGI;KACH;AACFD,IAAAA,SAAS,EAAES,IAAI,CACb,WAAW,EACX;AAAE,MAAA,kBAAkB,EAAEV;AAAa,KAAC,EACpC,kDAAkD,EAClDC,SACF,CAAE;AAAAJ,IAAAA,QAAA,EAEDA;AAAQ,GACF,CAAC;AAEd,CAAC;;;;"}
+{"version":3,"file":"Circle.mjs","sources":["../../../src/common/circle/Circle.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { useMedia } from '../hooks/useMedia';\nimport { Breakpoint } from '../propsValues/breakpoint';\n\nexport type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;\n\nexport type Props = {\n  /**\n   * Modify underlying element, `div` by default\n   */\n  as?: React.ElementType;\n  /**\n   * Set size of the circle in px, `48` by default\n   */\n  size?: ShapeSize;\n  /**\n   * When `true` will use the fixed size (`48px`) instead of the CSS spacing variable (`--size-*`)\n   * as those can be dynamic a at certain viewport sizes\n   */\n  fixedSize?: boolean;\n  enableBorder?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\n/**\n * circle like components has custom sizes for icons\n */\nconst MAP_ICON_SIZE = {\n  16: 12,\n  24: 16,\n  32: 18,\n  40: 20,\n  48: 24,\n  56: 28,\n  72: 36,\n};\n\n/**\n * circle like components have custom typography styles for for default (Inter) font\n *\n * circle size : font size (px)\n */\nconst MAP_FONT_SIZE = {\n  16: 8,\n  24: 12,\n  32: 14,\n  40: 18,\n  48: 22,\n  56: 26,\n  72: 30,\n};\n\nconst Circle = forwardRef(function Circle(\n  {\n    as: Element = 'div',\n    children,\n    size = 48,\n    fixedSize = false,\n    enableBorder = false,\n    className,\n    style,\n    ...props\n  }: Props,\n  ref,\n) {\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  return (\n    <Element\n      {...props}\n      ref={ref}\n      style={{\n        '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,\n        '--circle-icon-size':\n          isTinyViewport && !fixedSize\n            ? `${MAP_ICON_SIZE[size] / 2}px`\n            : `${MAP_ICON_SIZE[size]}px`,\n        '--circle-font-size': `${MAP_FONT_SIZE[size]}px`,\n        ...style,\n      }}\n      className={clsx(\n        'np-circle',\n        { 'np-circle-border': enableBorder },\n        'd-flex align-items-center justify-content-center',\n        className,\n      )}\n    >\n      {children}\n    </Element>\n  );\n});\n\nexport default Circle;\n"],"names":["MAP_ICON_SIZE","MAP_FONT_SIZE","Circle","forwardRef","as","Element","children","size","fixedSize","enableBorder","className","style","props","ref","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","clsx"],"mappings":";;;;;;AA2BA,MAAMA,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;CACL;AAED;;;;AAIG;AACH,MAAMC,aAAa,GAAG;AACpB,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;CACL;AAED,MAAMC,MAAM,gBAAGC,UAAU,CAAC,SAASD,MAAMA,CACvC;EACEE,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,SAAS,GAAG,KAAK;AACjBC,EAAAA,YAAY,GAAG,KAAK;EACpBC,SAAS;EACTC,KAAK;EACL,GAAGC;AAAK,CACF,EACRC,GAAG,EAAA;EAEH,MAAMC,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC;EACxE,oBACEC,GAAA,CAACb,OAAO,EAAA;AAAA,IAAA,GACFO,KAAK;AACTC,IAAAA,GAAG,EAAEA,GAAI;AACTF,IAAAA,KAAK,EAAE;MACL,eAAe,EAAEH,SAAS,GAAG,CAAA,EAAGD,IAAI,CAAA,EAAA,CAAI,GAAG,CAAA,WAAA,EAAcA,IAAI,CAAA,CAAA,CAAG;MAChE,oBAAoB,EAClBO,cAAc,IAAI,CAACN,SAAS,GACxB,CAAA,EAAGR,aAAa,CAACO,IAAI,CAAC,GAAG,CAAC,IAAI,GAC9B,CAAA,EAAGP,aAAa,CAACO,IAAI,CAAC,CAAA,EAAA,CAAI;AAChC,MAAA,oBAAoB,EAAE,CAAA,EAAGN,aAAa,CAACM,IAAI,CAAC,CAAA,EAAA,CAAI;MAChD,GAAGI;KACH;AACFD,IAAAA,SAAS,EAAES,IAAI,CACb,WAAW,EACX;AAAE,MAAA,kBAAkB,EAAEV;KAAc,EACpC,kDAAkD,EAClDC,SAAS,CACT;AAAAJ,IAAAA,QAAA,EAEDA;AAAQ,GACF,CAAC;AAEd,CAAC;;;;"}

package/build/common/closeButton/CloseButton.js

@@ -8,9 +8,6 @@ var size = require('../propsValues/size.js');
 var CloseButton_messages = require('./CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-/**
- * @deprecated Use `<IconButton />` component instead
- */
 const CloseButton = /*#__PURE__*/React.forwardRef(function CloseButton({
   'aria-label': ariaLabel,
   size: size$1 = size.Size.MEDIUM,

package/build/common/closeButton/CloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CloseButton.js","sources":["../../../src/common/closeButton/CloseButton.tsx"],"sourcesContent":["import { Cross, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall, SizeExtraSmall } from '../propsValues/size';\n\nimport messages from './CloseButton.messages';\n\nexport type CloseButtonProps = Pick<\n  React.ComponentPropsWithoutRef<'button'>,\n  'aria-label' | 'className' | 'onClick'\n> & {\n  size?: SizeExtraSmall | SizeSmall | SizeMedium | SizeLarge;\n  filled?: boolean;\n  isDisabled?: boolean;\n  testId?: string;\n  tabIndex?: number;\n};\n\n/**\n * @deprecated Use `<IconButton />` component instead\n */\nexport const CloseButton = forwardRef(function CloseButton(\n  {\n    'aria-label': ariaLabel,\n    size = Size.MEDIUM,\n    filled = false,\n    className,\n    onClick,\n    isDisabled,\n    testId,\n    tabIndex,\n  }: CloseButtonProps,\n  reference: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n  const intl = useIntl();\n  ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n  const Icon = filled ? CrossCircleFill : Cross;\n\n  return (\n    <button\n      ref={reference}\n      type=\"button\"\n      className={clsx(\n        'np-close-button',\n        'close btn-link',\n        'text-no-decoration',\n        {\n          'np-close-button--x-small': size === Size.EXTRA_SMALL,\n          'np-close-button--large': size === Size.MEDIUM,\n          'np-close-button--x-large': size === Size.LARGE,\n        },\n        className,\n      )}\n      aria-label={ariaLabel}\n      aria-disabled={isDisabled}\n      disabled={isDisabled}\n      data-testid={testId}\n      tabIndex={tabIndex}\n      onClick={onClick}\n    >\n      <Icon size={size === Size.SMALL || size === Size.EXTRA_SMALL ? 16 : 24} />\n    </button>\n  );\n});\n"],"names":["CloseButton","forwardRef","ariaLabel","size","Size","MEDIUM","filled","className","onClick","isDisabled","testId","tabIndex","reference","intl","useIntl","formatMessage","messages","Icon","CrossCircleFill","Cross","_jsx","ref","type","clsx","EXTRA_SMALL","LARGE","disabled","children","SMALL"],"mappings":";;;;;;;;;;AAoBA;AACA;AACA;MACaA,WAAW,gBAAGC,gBAAU,CAAC,SAASD,WAAWA,CACxD;AACE,EAAA,YAAY,EAAEE,SAAS;QACvBC,MAAI,GAAGC,SAAI,CAACC,MAAM;AAClBC,EAAAA,MAAM,GAAG,KAAK;EACdC,SAAS;EACTC,OAAO;EACPC,UAAU;EACVC,MAAM;AACNC,EAAAA;AACgB,CAAC,EACnBC,SAAuD,EACvD;AACA,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EACtBZ,SAAS,KAAKW,IAAI,CAACE,aAAa,CAACC,4BAAQ,CAACd,SAAS,CAAC;AACpD,EAAA,MAAMe,IAAI,GAAGX,MAAM,GAAGY,qBAAe,GAAGC,WAAK;AAE7C,EAAA,oBACEC,cAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;AACfU,IAAAA,IAAI,EAAC,QAAQ;IACbf,SAAS,EAAEgB,SAAI,CACb,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB;AACE,MAAA,0BAA0B,EAAEpB,MAAI,KAAKC,SAAI,CAACoB,WAAW;AACrD,MAAA,wBAAwB,EAAErB,MAAI,KAAKC,SAAI,CAACC,MAAM;AAC9C,MAAA,0BAA0B,EAAEF,MAAI,KAAKC,SAAI,CAACqB;KAC3C,EACDlB,SACF,CAAE;AACF,IAAA,YAAA,EAAYL,SAAU;AACtB,IAAA,eAAA,EAAeO,UAAW;AAC1BiB,IAAAA,QAAQ,EAAEjB,UAAW;AACrB,IAAA,aAAA,EAAaC,MAAO;AACpBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBH,IAAAA,OAAO,EAAEA,OAAQ;IAAAmB,QAAA,eAEjBP,cAAA,CAACH,IAAI,EAAA;AAACd,MAAAA,IAAI,EAAEA,MAAI,KAAKC,SAAI,CAACwB,KAAK,IAAIzB,MAAI,KAAKC,SAAI,CAACoB,WAAW,GAAG,EAAE,GAAG;KAAK;AAAC,GACpE,CAAC;AAEb,CAAC;;;;"}
+{"version":3,"file":"CloseButton.js","sources":["../../../src/common/closeButton/CloseButton.tsx"],"sourcesContent":["import { Cross, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall, SizeExtraSmall } from '../propsValues/size';\n\nimport messages from './CloseButton.messages';\n\nexport type CloseButtonProps = Pick<\n  React.ComponentPropsWithoutRef<'button'>,\n  'aria-label' | 'className' | 'onClick'\n> & {\n  size?: SizeExtraSmall | SizeSmall | SizeMedium | SizeLarge;\n  filled?: boolean;\n  isDisabled?: boolean;\n  testId?: string;\n  tabIndex?: number;\n};\n\n/**\n * @deprecated Use `<IconButton />` component instead\n */\nexport const CloseButton = forwardRef(function CloseButton(\n  {\n    'aria-label': ariaLabel,\n    size = Size.MEDIUM,\n    filled = false,\n    className,\n    onClick,\n    isDisabled,\n    testId,\n    tabIndex,\n  }: CloseButtonProps,\n  reference: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n  const intl = useIntl();\n  ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n  const Icon = filled ? CrossCircleFill : Cross;\n\n  return (\n    <button\n      ref={reference}\n      type=\"button\"\n      className={clsx(\n        'np-close-button',\n        'close btn-link',\n        'text-no-decoration',\n        {\n          'np-close-button--x-small': size === Size.EXTRA_SMALL,\n          'np-close-button--large': size === Size.MEDIUM,\n          'np-close-button--x-large': size === Size.LARGE,\n        },\n        className,\n      )}\n      aria-label={ariaLabel}\n      aria-disabled={isDisabled}\n      disabled={isDisabled}\n      data-testid={testId}\n      tabIndex={tabIndex}\n      onClick={onClick}\n    >\n      <Icon size={size === Size.SMALL || size === Size.EXTRA_SMALL ? 16 : 24} />\n    </button>\n  );\n});\n"],"names":["CloseButton","forwardRef","ariaLabel","size","Size","MEDIUM","filled","className","onClick","isDisabled","testId","tabIndex","reference","intl","useIntl","formatMessage","messages","Icon","CrossCircleFill","Cross","_jsx","ref","type","clsx","EXTRA_SMALL","LARGE","disabled","children","SMALL"],"mappings":";;;;;;;;;;MAuBaA,WAAW,gBAAGC,gBAAU,CAAC,SAASD,WAAWA,CACxD;AACE,EAAA,YAAY,EAAEE,SAAS;QACvBC,MAAI,GAAGC,SAAI,CAACC,MAAM;AAClBC,EAAAA,MAAM,GAAG,KAAK;EACdC,SAAS;EACTC,OAAO;EACPC,UAAU;EACVC,MAAM;AACNC,EAAAA;AAAQ,CACS,EACnBC,SAAuD,EAAA;AAEvD,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EACtBZ,SAAS,KAAKW,IAAI,CAACE,aAAa,CAACC,4BAAQ,CAACd,SAAS,CAAC;AACpD,EAAA,MAAMe,IAAI,GAAGX,MAAM,GAAGY,qBAAe,GAAGC,WAAK;AAE7C,EAAA,oBACEC,cAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;AACfU,IAAAA,IAAI,EAAC,QAAQ;IACbf,SAAS,EAAEgB,SAAI,CACb,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB;AACE,MAAA,0BAA0B,EAAEpB,MAAI,KAAKC,SAAI,CAACoB,WAAW;AACrD,MAAA,wBAAwB,EAAErB,MAAI,KAAKC,SAAI,CAACC,MAAM;AAC9C,MAAA,0BAA0B,EAAEF,MAAI,KAAKC,SAAI,CAACqB;KAC3C,EACDlB,SAAS,CACT;AACF,IAAA,YAAA,EAAYL,SAAU;AACtB,IAAA,eAAA,EAAeO,UAAW;AAC1BiB,IAAAA,QAAQ,EAAEjB,UAAW;AACrB,IAAA,aAAA,EAAaC,MAAO;AACpBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBH,IAAAA,OAAO,EAAEA,OAAQ;IAAAmB,QAAA,eAEjBP,cAAA,CAACH,IAAI,EAAA;AAACd,MAAAA,IAAI,EAAEA,MAAI,KAAKC,SAAI,CAACwB,KAAK,IAAIzB,MAAI,KAAKC,SAAI,CAACoB,WAAW,GAAG,EAAE,GAAG;KAAG;AACzE,GAAQ,CAAC;AAEb,CAAC;;;;"}

package/build/common/closeButton/CloseButton.messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"CloseButton.messages.js","sources":["../../../src/common/closeButton/CloseButton.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  ariaLabel: {\n    id: 'neptune.CloseButton.ariaLabel',\n    defaultMessage: 'Close',\n    description: 'Description of close button',\n  },\n});\n"],"names":["defineMessages","ariaLabel","id"],"mappings":";;;;;;AAEA,uBAAeA,wBAAc,CAAC;AAC5BC,EAAAA,SAAS,EAAE;IACTC,EAAE,EAAA;AAGJ;AACF,CAAC,CAAC;;;;"}
+{"version":3,"file":"CloseButton.messages.js","sources":["../../../src/common/closeButton/CloseButton.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  ariaLabel: {\n    id: 'neptune.CloseButton.ariaLabel',\n    defaultMessage: 'Close',\n    description: 'Description of close button',\n  },\n});\n"],"names":["defineMessages","ariaLabel","id"],"mappings":";;;;;;AAEA,uBAAeA,wBAAc,CAAC;AAC5BC,EAAAA,SAAS,EAAE;IACTC,EAAE,EAAA;AAGH;AACF,CAAA,CAAC;;;;"}

package/build/common/closeButton/CloseButton.messages.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CloseButton.messages.mjs","sources":["../../../src/common/closeButton/CloseButton.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  ariaLabel: {\n    id: 'neptune.CloseButton.ariaLabel',\n    defaultMessage: 'Close',\n    description: 'Description of close button',\n  },\n});\n"],"names":["defineMessages","ariaLabel","id"],"mappings":";;AAEA,uBAAeA,cAAc,CAAC;AAC5BC,EAAAA,SAAS,EAAE;IACTC,EAAE,EAAA;AAGJ;AACF,CAAC,CAAC;;;;"}
+{"version":3,"file":"CloseButton.messages.mjs","sources":["../../../src/common/closeButton/CloseButton.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  ariaLabel: {\n    id: 'neptune.CloseButton.ariaLabel',\n    defaultMessage: 'Close',\n    description: 'Description of close button',\n  },\n});\n"],"names":["defineMessages","ariaLabel","id"],"mappings":";;AAEA,uBAAeA,cAAc,CAAC;AAC5BC,EAAAA,SAAS,EAAE;IACTC,EAAE,EAAA;AAGH;AACF,CAAA,CAAC;;;;"}

package/build/common/closeButton/CloseButton.mjs

@@ -6,9 +6,6 @@ import { Size } from '../propsValues/size.mjs';
 import closeBtnMessages from './CloseButton.messages.mjs';
 import { jsx } from 'react/jsx-runtime';
 
-/**
- * @deprecated Use `<IconButton />` component instead
- */
 const CloseButton = /*#__PURE__*/forwardRef(function CloseButton({
   'aria-label': ariaLabel,
   size = Size.MEDIUM,

package/build/common/closeButton/CloseButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CloseButton.mjs","sources":["../../../src/common/closeButton/CloseButton.tsx"],"sourcesContent":["import { Cross, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall, SizeExtraSmall } from '../propsValues/size';\n\nimport messages from './CloseButton.messages';\n\nexport type CloseButtonProps = Pick<\n  React.ComponentPropsWithoutRef<'button'>,\n  'aria-label' | 'className' | 'onClick'\n> & {\n  size?: SizeExtraSmall | SizeSmall | SizeMedium | SizeLarge;\n  filled?: boolean;\n  isDisabled?: boolean;\n  testId?: string;\n  tabIndex?: number;\n};\n\n/**\n * @deprecated Use `<IconButton />` component instead\n */\nexport const CloseButton = forwardRef(function CloseButton(\n  {\n    'aria-label': ariaLabel,\n    size = Size.MEDIUM,\n    filled = false,\n    className,\n    onClick,\n    isDisabled,\n    testId,\n    tabIndex,\n  }: CloseButtonProps,\n  reference: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n  const intl = useIntl();\n  ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n  const Icon = filled ? CrossCircleFill : Cross;\n\n  return (\n    <button\n      ref={reference}\n      type=\"button\"\n      className={clsx(\n        'np-close-button',\n        'close btn-link',\n        'text-no-decoration',\n        {\n          'np-close-button--x-small': size === Size.EXTRA_SMALL,\n          'np-close-button--large': size === Size.MEDIUM,\n          'np-close-button--x-large': size === Size.LARGE,\n        },\n        className,\n      )}\n      aria-label={ariaLabel}\n      aria-disabled={isDisabled}\n      disabled={isDisabled}\n      data-testid={testId}\n      tabIndex={tabIndex}\n      onClick={onClick}\n    >\n      <Icon size={size === Size.SMALL || size === Size.EXTRA_SMALL ? 16 : 24} />\n    </button>\n  );\n});\n"],"names":["CloseButton","forwardRef","ariaLabel","size","Size","MEDIUM","filled","className","onClick","isDisabled","testId","tabIndex","reference","intl","useIntl","formatMessage","messages","Icon","CrossCircleFill","Cross","_jsx","ref","type","clsx","EXTRA_SMALL","LARGE","disabled","children","SMALL"],"mappings":";;;;;;;;AAoBA;AACA;AACA;MACaA,WAAW,gBAAGC,UAAU,CAAC,SAASD,WAAWA,CACxD;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,IAAI,GAAGC,IAAI,CAACC,MAAM;AAClBC,EAAAA,MAAM,GAAG,KAAK;EACdC,SAAS;EACTC,OAAO;EACPC,UAAU;EACVC,MAAM;AACNC,EAAAA;AACgB,CAAC,EACnBC,SAAuD,EACvD;AACA,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EACtBZ,SAAS,KAAKW,IAAI,CAACE,aAAa,CAACC,gBAAQ,CAACd,SAAS,CAAC;AACpD,EAAA,MAAMe,IAAI,GAAGX,MAAM,GAAGY,eAAe,GAAGC,KAAK;AAE7C,EAAA,oBACEC,GAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;AACfU,IAAAA,IAAI,EAAC,QAAQ;IACbf,SAAS,EAAEgB,IAAI,CACb,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB;AACE,MAAA,0BAA0B,EAAEpB,IAAI,KAAKC,IAAI,CAACoB,WAAW;AACrD,MAAA,wBAAwB,EAAErB,IAAI,KAAKC,IAAI,CAACC,MAAM;AAC9C,MAAA,0BAA0B,EAAEF,IAAI,KAAKC,IAAI,CAACqB;KAC3C,EACDlB,SACF,CAAE;AACF,IAAA,YAAA,EAAYL,SAAU;AACtB,IAAA,eAAA,EAAeO,UAAW;AAC1BiB,IAAAA,QAAQ,EAAEjB,UAAW;AACrB,IAAA,aAAA,EAAaC,MAAO;AACpBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBH,IAAAA,OAAO,EAAEA,OAAQ;IAAAmB,QAAA,eAEjBP,GAAA,CAACH,IAAI,EAAA;AAACd,MAAAA,IAAI,EAAEA,IAAI,KAAKC,IAAI,CAACwB,KAAK,IAAIzB,IAAI,KAAKC,IAAI,CAACoB,WAAW,GAAG,EAAE,GAAG;KAAK;AAAC,GACpE,CAAC;AAEb,CAAC;;;;"}
+{"version":3,"file":"CloseButton.mjs","sources":["../../../src/common/closeButton/CloseButton.tsx"],"sourcesContent":["import { Cross, CrossCircleFill } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall, SizeExtraSmall } from '../propsValues/size';\n\nimport messages from './CloseButton.messages';\n\nexport type CloseButtonProps = Pick<\n  React.ComponentPropsWithoutRef<'button'>,\n  'aria-label' | 'className' | 'onClick'\n> & {\n  size?: SizeExtraSmall | SizeSmall | SizeMedium | SizeLarge;\n  filled?: boolean;\n  isDisabled?: boolean;\n  testId?: string;\n  tabIndex?: number;\n};\n\n/**\n * @deprecated Use `<IconButton />` component instead\n */\nexport const CloseButton = forwardRef(function CloseButton(\n  {\n    'aria-label': ariaLabel,\n    size = Size.MEDIUM,\n    filled = false,\n    className,\n    onClick,\n    isDisabled,\n    testId,\n    tabIndex,\n  }: CloseButtonProps,\n  reference: React.ForwardedRef<HTMLButtonElement | null>,\n) {\n  const intl = useIntl();\n  ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n  const Icon = filled ? CrossCircleFill : Cross;\n\n  return (\n    <button\n      ref={reference}\n      type=\"button\"\n      className={clsx(\n        'np-close-button',\n        'close btn-link',\n        'text-no-decoration',\n        {\n          'np-close-button--x-small': size === Size.EXTRA_SMALL,\n          'np-close-button--large': size === Size.MEDIUM,\n          'np-close-button--x-large': size === Size.LARGE,\n        },\n        className,\n      )}\n      aria-label={ariaLabel}\n      aria-disabled={isDisabled}\n      disabled={isDisabled}\n      data-testid={testId}\n      tabIndex={tabIndex}\n      onClick={onClick}\n    >\n      <Icon size={size === Size.SMALL || size === Size.EXTRA_SMALL ? 16 : 24} />\n    </button>\n  );\n});\n"],"names":["CloseButton","forwardRef","ariaLabel","size","Size","MEDIUM","filled","className","onClick","isDisabled","testId","tabIndex","reference","intl","useIntl","formatMessage","messages","Icon","CrossCircleFill","Cross","_jsx","ref","type","clsx","EXTRA_SMALL","LARGE","disabled","children","SMALL"],"mappings":";;;;;;;;MAuBaA,WAAW,gBAAGC,UAAU,CAAC,SAASD,WAAWA,CACxD;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,IAAI,GAAGC,IAAI,CAACC,MAAM;AAClBC,EAAAA,MAAM,GAAG,KAAK;EACdC,SAAS;EACTC,OAAO;EACPC,UAAU;EACVC,MAAM;AACNC,EAAAA;AAAQ,CACS,EACnBC,SAAuD,EAAA;AAEvD,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EACtBZ,SAAS,KAAKW,IAAI,CAACE,aAAa,CAACC,gBAAQ,CAACd,SAAS,CAAC;AACpD,EAAA,MAAMe,IAAI,GAAGX,MAAM,GAAGY,eAAe,GAAGC,KAAK;AAE7C,EAAA,oBACEC,GAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAET,SAAU;AACfU,IAAAA,IAAI,EAAC,QAAQ;IACbf,SAAS,EAAEgB,IAAI,CACb,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB;AACE,MAAA,0BAA0B,EAAEpB,IAAI,KAAKC,IAAI,CAACoB,WAAW;AACrD,MAAA,wBAAwB,EAAErB,IAAI,KAAKC,IAAI,CAACC,MAAM;AAC9C,MAAA,0BAA0B,EAAEF,IAAI,KAAKC,IAAI,CAACqB;KAC3C,EACDlB,SAAS,CACT;AACF,IAAA,YAAA,EAAYL,SAAU;AACtB,IAAA,eAAA,EAAeO,UAAW;AAC1BiB,IAAAA,QAAQ,EAAEjB,UAAW;AACrB,IAAA,aAAA,EAAaC,MAAO;AACpBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBH,IAAAA,OAAO,EAAEA,OAAQ;IAAAmB,QAAA,eAEjBP,GAAA,CAACH,IAAI,EAAA;AAACd,MAAAA,IAAI,EAAEA,IAAI,KAAKC,IAAI,CAACwB,KAAK,IAAIzB,IAAI,KAAKC,IAAI,CAACoB,WAAW,GAAG,EAAE,GAAG;KAAG;AACzE,GAAQ,CAAC;AAEb,CAAC;;;;"}

package/build/common/colors.js

@@ -6,7 +6,6 @@
  * Do not change this array.
  */
 const avatarColors = ['var(--color-bright-blue)', 'var(--color-bright-yellow)', 'var(--color-bright-pink)', 'var(--color-bright-orange)'];
-
 /*
  * Takes in a "seed" string and spits out an index for the color we should use.
  * This implementation has been synced across all three clients so that we consistently

package/build/common/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","sources":["../../src/common/colors.ts"],"sourcesContent":["/*\n * The colors we support generating an Avatar background color from a \"seed\" for.\n * Changing this array will change the assignment between seeds.\n * Do not change this array.\n */\nconst avatarColors = [\n  'var(--color-bright-blue)',\n  'var(--color-bright-yellow)',\n  'var(--color-bright-pink)',\n  'var(--color-bright-orange)',\n] as const;\n\n/*\n * Takes in a \"seed\" string and spits out an index for the color we should use.\n * This implementation has been synced across all three clients so that we consistently\n * generate branded avatar colors when rendering a list of Avatars.\n * Do not change this implementation.\n */\nconst hashSeed = (seed: string): number => {\n  const base = 31;\n  const modulo = avatarColors.length;\n\n  let hashValue = 0;\n  let basePow = 1;\n\n  for (let i = 0; i < seed.length; i += 1) {\n    hashValue = (hashValue + seed.charCodeAt(i) * basePow) % modulo;\n    basePow = (basePow * base) % modulo;\n  }\n\n  return hashValue;\n};\n\nexport const getBrandColorFromSeed = (seed: string): (typeof avatarColors)[number] => {\n  return avatarColors[hashSeed(seed)];\n};\n"],"names":["avatarColors","hashSeed","seed","base","modulo","length","hashValue","basePow","i","charCodeAt","getBrandColorFromSeed"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA,MAAMA,YAAY,GAAG,CACnB,0BAA0B,EAC1B,4BAA4B,EAC5B,0BAA0B,EAC1B,4BAA4B,CACpB;;AAEV;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,QAAQ,GAAIC,IAAY,IAAa;EACzC,MAAMC,IAAI,GAAG,EAAE;AACf,EAAA,MAAMC,MAAM,GAAGJ,YAAY,CAACK,MAAM;EAElC,IAAIC,SAAS,GAAG,CAAC;EACjB,IAAIC,OAAO,GAAG,CAAC;AAEf,EAAA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGN,IAAI,CAACG,MAAM,EAAEG,CAAC,IAAI,CAAC,EAAE;AACvCF,IAAAA,SAAS,GAAG,CAACA,SAAS,GAAGJ,IAAI,CAACO,UAAU,CAACD,CAAC,CAAC,GAAGD,OAAO,IAAIH,MAAM;AAC/DG,IAAAA,OAAO,GAAIA,OAAO,GAAGJ,IAAI,GAAIC,MAAM;AACrC,EAAA;AAEA,EAAA,OAAOE,SAAS;AAClB,CAAC;AAEM,MAAMI,qBAAqB,GAAIR,IAAY,IAAoC;AACpF,EAAA,OAAOF,YAAY,CAACC,QAAQ,CAACC,IAAI,CAAC,CAAC;AACrC;;;;"}
+{"version":3,"file":"colors.js","sources":["../../src/common/colors.ts"],"sourcesContent":["/*\n * The colors we support generating an Avatar background color from a \"seed\" for.\n * Changing this array will change the assignment between seeds.\n * Do not change this array.\n */\nconst avatarColors = [\n  'var(--color-bright-blue)',\n  'var(--color-bright-yellow)',\n  'var(--color-bright-pink)',\n  'var(--color-bright-orange)',\n] as const;\n\n/*\n * Takes in a \"seed\" string and spits out an index for the color we should use.\n * This implementation has been synced across all three clients so that we consistently\n * generate branded avatar colors when rendering a list of Avatars.\n * Do not change this implementation.\n */\nconst hashSeed = (seed: string): number => {\n  const base = 31;\n  const modulo = avatarColors.length;\n\n  let hashValue = 0;\n  let basePow = 1;\n\n  for (let i = 0; i < seed.length; i += 1) {\n    hashValue = (hashValue + seed.charCodeAt(i) * basePow) % modulo;\n    basePow = (basePow * base) % modulo;\n  }\n\n  return hashValue;\n};\n\nexport const getBrandColorFromSeed = (seed: string): (typeof avatarColors)[number] => {\n  return avatarColors[hashSeed(seed)];\n};\n"],"names":["avatarColors","hashSeed","seed","base","modulo","length","hashValue","basePow","i","charCodeAt","getBrandColorFromSeed"],"mappings":";;AAAA;;;;AAIG;AACH,MAAMA,YAAY,GAAG,CACnB,0BAA0B,EAC1B,4BAA4B,EAC5B,0BAA0B,EAC1B,4BAA4B,CACpB;AAEV;;;;;AAKG;AACH,MAAMC,QAAQ,GAAIC,IAAY,IAAY;EACxC,MAAMC,IAAI,GAAG,EAAE;AACf,EAAA,MAAMC,MAAM,GAAGJ,YAAY,CAACK,MAAM;EAElC,IAAIC,SAAS,GAAG,CAAC;EACjB,IAAIC,OAAO,GAAG,CAAC;AAEf,EAAA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGN,IAAI,CAACG,MAAM,EAAEG,CAAC,IAAI,CAAC,EAAE;AACvCF,IAAAA,SAAS,GAAG,CAACA,SAAS,GAAGJ,IAAI,CAACO,UAAU,CAACD,CAAC,CAAC,GAAGD,OAAO,IAAIH,MAAM;AAC/DG,IAAAA,OAAO,GAAIA,OAAO,GAAGJ,IAAI,GAAIC,MAAM;AACrC,EAAA;AAEA,EAAA,OAAOE,SAAS;AAClB,CAAC;AAEM,MAAMI,qBAAqB,GAAIR,IAAY,IAAmC;AACnF,EAAA,OAAOF,YAAY,CAACC,QAAQ,CAACC,IAAI,CAAC,CAAC;AACrC;;;;"}

package/build/common/colors.mjs

@@ -4,7 +4,6 @@
  * Do not change this array.
  */
 const avatarColors = ['var(--color-bright-blue)', 'var(--color-bright-yellow)', 'var(--color-bright-pink)', 'var(--color-bright-orange)'];
-
 /*
  * Takes in a "seed" string and spits out an index for the color we should use.
  * This implementation has been synced across all three clients so that we consistently

package/build/common/colors.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"colors.mjs","sources":["../../src/common/colors.ts"],"sourcesContent":["/*\n * The colors we support generating an Avatar background color from a \"seed\" for.\n * Changing this array will change the assignment between seeds.\n * Do not change this array.\n */\nconst avatarColors = [\n  'var(--color-bright-blue)',\n  'var(--color-bright-yellow)',\n  'var(--color-bright-pink)',\n  'var(--color-bright-orange)',\n] as const;\n\n/*\n * Takes in a \"seed\" string and spits out an index for the color we should use.\n * This implementation has been synced across all three clients so that we consistently\n * generate branded avatar colors when rendering a list of Avatars.\n * Do not change this implementation.\n */\nconst hashSeed = (seed: string): number => {\n  const base = 31;\n  const modulo = avatarColors.length;\n\n  let hashValue = 0;\n  let basePow = 1;\n\n  for (let i = 0; i < seed.length; i += 1) {\n    hashValue = (hashValue + seed.charCodeAt(i) * basePow) % modulo;\n    basePow = (basePow * base) % modulo;\n  }\n\n  return hashValue;\n};\n\nexport const getBrandColorFromSeed = (seed: string): (typeof avatarColors)[number] => {\n  return avatarColors[hashSeed(seed)];\n};\n"],"names":["avatarColors","hashSeed","seed","base","modulo","length","hashValue","basePow","i","charCodeAt","getBrandColorFromSeed"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,MAAMA,YAAY,GAAG,CACnB,0BAA0B,EAC1B,4BAA4B,EAC5B,0BAA0B,EAC1B,4BAA4B,CACpB;;AAEV;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,QAAQ,GAAIC,IAAY,IAAa;EACzC,MAAMC,IAAI,GAAG,EAAE;AACf,EAAA,MAAMC,MAAM,GAAGJ,YAAY,CAACK,MAAM;EAElC,IAAIC,SAAS,GAAG,CAAC;EACjB,IAAIC,OAAO,GAAG,CAAC;AAEf,EAAA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGN,IAAI,CAACG,MAAM,EAAEG,CAAC,IAAI,CAAC,EAAE;AACvCF,IAAAA,SAAS,GAAG,CAACA,SAAS,GAAGJ,IAAI,CAACO,UAAU,CAACD,CAAC,CAAC,GAAGD,OAAO,IAAIH,MAAM;AAC/DG,IAAAA,OAAO,GAAIA,OAAO,GAAGJ,IAAI,GAAIC,MAAM;AACrC,EAAA;AAEA,EAAA,OAAOE,SAAS;AAClB,CAAC;AAEM,MAAMI,qBAAqB,GAAIR,IAAY,IAAoC;AACpF,EAAA,OAAOF,YAAY,CAACC,QAAQ,CAACC,IAAI,CAAC,CAAC;AACrC;;;;"}
+{"version":3,"file":"colors.mjs","sources":["../../src/common/colors.ts"],"sourcesContent":["/*\n * The colors we support generating an Avatar background color from a \"seed\" for.\n * Changing this array will change the assignment between seeds.\n * Do not change this array.\n */\nconst avatarColors = [\n  'var(--color-bright-blue)',\n  'var(--color-bright-yellow)',\n  'var(--color-bright-pink)',\n  'var(--color-bright-orange)',\n] as const;\n\n/*\n * Takes in a \"seed\" string and spits out an index for the color we should use.\n * This implementation has been synced across all three clients so that we consistently\n * generate branded avatar colors when rendering a list of Avatars.\n * Do not change this implementation.\n */\nconst hashSeed = (seed: string): number => {\n  const base = 31;\n  const modulo = avatarColors.length;\n\n  let hashValue = 0;\n  let basePow = 1;\n\n  for (let i = 0; i < seed.length; i += 1) {\n    hashValue = (hashValue + seed.charCodeAt(i) * basePow) % modulo;\n    basePow = (basePow * base) % modulo;\n  }\n\n  return hashValue;\n};\n\nexport const getBrandColorFromSeed = (seed: string): (typeof avatarColors)[number] => {\n  return avatarColors[hashSeed(seed)];\n};\n"],"names":["avatarColors","hashSeed","seed","base","modulo","length","hashValue","basePow","i","charCodeAt","getBrandColorFromSeed"],"mappings":"AAAA;;;;AAIG;AACH,MAAMA,YAAY,GAAG,CACnB,0BAA0B,EAC1B,4BAA4B,EAC5B,0BAA0B,EAC1B,4BAA4B,CACpB;AAEV;;;;;AAKG;AACH,MAAMC,QAAQ,GAAIC,IAAY,IAAY;EACxC,MAAMC,IAAI,GAAG,EAAE;AACf,EAAA,MAAMC,MAAM,GAAGJ,YAAY,CAACK,MAAM;EAElC,IAAIC,SAAS,GAAG,CAAC;EACjB,IAAIC,OAAO,GAAG,CAAC;AAEf,EAAA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGN,IAAI,CAACG,MAAM,EAAEG,CAAC,IAAI,CAAC,EAAE;AACvCF,IAAAA,SAAS,GAAG,CAACA,SAAS,GAAGJ,IAAI,CAACO,UAAU,CAACD,CAAC,CAAC,GAAGD,OAAO,IAAIH,MAAM;AAC/DG,IAAAA,OAAO,GAAIA,OAAO,GAAGJ,IAAI,GAAIC,MAAM;AACrC,EAAA;AAEA,EAAA,OAAOE,SAAS;AAClB,CAAC;AAEM,MAAMI,qBAAqB,GAAIR,IAAY,IAAmC;AACnF,EAAA,OAAOF,YAAY,CAACC,QAAQ,CAACC,IAAI,CAAC,CAAC;AACrC;;;;"}

package/build/common/constants.js

@@ -3,7 +3,6 @@
 /**
  * This file holds repository-wide constants that are reusable by more than 1 component.
  */
-
 /**
  * A delay [ms] after which it's OK to update a live region content,
  * taking under consideration delayed programmatic refocusing

package/build/common/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../src/common/constants.ts"],"sourcesContent":["/**\n * This file holds repository-wide constants that are reusable by more than 1 component.\n */\n\n/**\n * A delay [ms] after which it's OK to update a live region content,\n * taking under consideration delayed programmatic refocusing\n * of triggering components (e.g., SelectInput) and Accessibility\n * Tree updates that prevent the screen reader announcements.\n */\nexport const WDS_LIVE_REGION_DELAY_MS = 175;\n"],"names":["WDS_LIVE_REGION_DELAY_MS"],"mappings":";;AAAA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,wBAAwB,GAAG;;;;"}
+{"version":3,"file":"constants.js","sources":["../../src/common/constants.ts"],"sourcesContent":["/**\n * This file holds repository-wide constants that are reusable by more than 1 component.\n */\n\n/**\n * A delay [ms] after which it's OK to update a live region content,\n * taking under consideration delayed programmatic refocusing\n * of triggering components (e.g., SelectInput) and Accessibility\n * Tree updates that prevent the screen reader announcements.\n */\nexport const WDS_LIVE_REGION_DELAY_MS = 175;\n"],"names":["WDS_LIVE_REGION_DELAY_MS"],"mappings":";;AAAA;;AAEG;AAEH;;;;;AAKG;AACI,MAAMA,wBAAwB,GAAG;;;;"}

package/build/common/constants.mjs

@@ -1,7 +1,6 @@
 /**
  * This file holds repository-wide constants that are reusable by more than 1 component.
  */
-
 /**
  * A delay [ms] after which it's OK to update a live region content,
  * taking under consideration delayed programmatic refocusing

package/build/common/constants.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"constants.mjs","sources":["../../src/common/constants.ts"],"sourcesContent":["/**\n * This file holds repository-wide constants that are reusable by more than 1 component.\n */\n\n/**\n * A delay [ms] after which it's OK to update a live region content,\n * taking under consideration delayed programmatic refocusing\n * of triggering components (e.g., SelectInput) and Accessibility\n * Tree updates that prevent the screen reader announcements.\n */\nexport const WDS_LIVE_REGION_DELAY_MS = 175;\n"],"names":["WDS_LIVE_REGION_DELAY_MS"],"mappings":"AAAA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,wBAAwB,GAAG;;;;"}
+{"version":3,"file":"constants.mjs","sources":["../../src/common/constants.ts"],"sourcesContent":["/**\n * This file holds repository-wide constants that are reusable by more than 1 component.\n */\n\n/**\n * A delay [ms] after which it's OK to update a live region content,\n * taking under consideration delayed programmatic refocusing\n * of triggering components (e.g., SelectInput) and Accessibility\n * Tree updates that prevent the screen reader announcements.\n */\nexport const WDS_LIVE_REGION_DELAY_MS = 175;\n"],"names":["WDS_LIVE_REGION_DELAY_MS"],"mappings":"AAAA;;AAEG;AAEH;;;;;AAKG;AACI,MAAMA,wBAAwB,GAAG;;;;"}