@transferwise/components 0.0.0-experimental-4c97d70 → 0.0.0-experimental-a322f91

package/build/statusIcon/StatusIcon.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var icons = require('@transferwise/icons');
+var neptuneTokens = require('@transferwise/neptune-tokens');
 var clsx = require('clsx');
 var reactIntl = require('react-intl');
 require('../common/theme.js');
 require('../common/direction.js');
 require('../common/propsValues/control.js');
-var breakpoint = require('../common/propsValues/breakpoint.js');
 var size = require('../common/propsValues/size.js');
 require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');
@@ -24,6 +24,7 @@ require('../common/propsValues/variant.js');
 require('../common/propsValues/scroll.js');
 require('../common/propsValues/markdownNodeType.js');
 require('../common/fileType.js');
+require('@transferwise/formatting');
 require('react');
 require('../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -82,7 +83,7 @@ const StatusIcon = ({
     Icon,
     defaultIconLabel
   } = iconMetaBySentiment[sentiment$1];
-  const isTinyViewport = useMedia.useMedia(`(max-width: ${breakpoint.Breakpoint.ZOOM_400}px)`);
+  const isTinyViewport = useMedia.useMedia(`(max-width: ${neptuneTokens.Breakpoint.EXTRA_SMALL}px)`);
   const size = mapLegacySize[sizeProp] ?? sizeProp;
   return /*#__PURE__*/jsxRuntime.jsx(Circle.default, {
     size: isTinyViewport && size < 40 ? 32 : size,

package/build/statusIcon/StatusIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated Use `16 | 24 | 32 | 40 | 48 | 56 | 72` instead.\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n  id?: string;\n  /** @default 'neutral' */\n  sentiment?: `${StatusIconSentiment}`;\n  /** @default 40 */\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({\n  id,\n  sentiment = 'neutral',\n  size: sizeProp = 40,\n  iconLabel,\n}: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}` | Status.PENDING,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Status.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\n\n  return (\n    <Circle\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment)}\n      id={id}\n    >\n      <Icon\n        className=\"status-icon\"\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","id","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","className","clsx","children","title","undefined"],"mappings":"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"}
+{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated Use `16 | 24 | 32 | 40 | 48 | 56 | 72` instead.\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n  id?: string;\n  /** @default 'neutral' */\n  sentiment?: `${StatusIconSentiment}`;\n  /** @default 40 */\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({\n  id,\n  sentiment = 'neutral',\n  size: sizeProp = 40,\n  iconLabel,\n}: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}` | Status.PENDING,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Status.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\n\n  return (\n    <Circle\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment)}\n      id={id}\n    >\n      <Icon\n        className=\"status-icon\"\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","id","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","isTinyViewport","useMedia","Breakpoint","EXTRA_SMALL","_jsx","Circle","className","clsx","children","title","undefined"],"mappings":"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"}

package/build/statusIcon/StatusIcon.mjs

@@ -1,10 +1,10 @@
 import { Check, Info, Cross, ClockBorderless, Alert } from '@transferwise/icons';
+import { Breakpoint } from '@transferwise/neptune-tokens';
 import { clsx } from 'clsx';
 import { useIntl } from 'react-intl';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
 import '../common/propsValues/control.mjs';
-import { Breakpoint } from '../common/propsValues/breakpoint.mjs';
 import { Size } from '../common/propsValues/size.mjs';
 import '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';
@@ -20,6 +20,7 @@ import '../common/propsValues/variant.mjs';
 import '../common/propsValues/scroll.mjs';
 import '../common/propsValues/markdownNodeType.mjs';
 import '../common/fileType.mjs';
+import '@transferwise/formatting';
 import 'react';
 import '../common/closeButton/CloseButton.messages.mjs';
 import { jsx } from 'react/jsx-runtime';
@@ -78,7 +79,7 @@ const StatusIcon = ({
     Icon,
     defaultIconLabel
   } = iconMetaBySentiment[sentiment];
-  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
+  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);
   const size = mapLegacySize[sizeProp] ?? sizeProp;
   return /*#__PURE__*/jsx(Circle, {
     size: isTinyViewport && size < 40 ? 32 : size,

package/build/statusIcon/StatusIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIcon.mjs","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated Use `16 | 24 | 32 | 40 | 48 | 56 | 72` instead.\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n  id?: string;\n  /** @default 'neutral' */\n  sentiment?: `${StatusIconSentiment}`;\n  /** @default 40 */\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({\n  id,\n  sentiment = 'neutral',\n  size: sizeProp = 40,\n  iconLabel,\n}: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}` | Status.PENDING,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Status.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\n\n  return (\n    <Circle\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment)}\n      id={id}\n    >\n      <Icon\n        className=\"status-icon\"\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","id","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsx","Circle","className","clsx","children","title","undefined"],"mappings":"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"}
+{"version":3,"file":"StatusIcon.mjs","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated Use `16 | 24 | 32 | 40 | 48 | 56 | 72` instead.\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n  id?: string;\n  /** @default 'neutral' */\n  sentiment?: `${StatusIconSentiment}`;\n  /** @default 40 */\n  size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /**\n   * Override for the sentiment's-derived, default, accessible\n   * name announced by the screen readers. <br />\n   * Using `null` will render the icon purely presentational.\n   * */\n  iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n  [String(Size.SMALL)]: 16,\n  [String(Size.MEDIUM)]: 40,\n  [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({\n  id,\n  sentiment = 'neutral',\n  size: sizeProp = 40,\n  iconLabel,\n}: StatusIconProps) => {\n  const intl = useIntl();\n\n  const iconMetaBySentiment: Record<\n    `${Sentiment}` | Status.PENDING,\n    {\n      Icon: React.ElementType;\n      defaultIconLabel: string;\n    }\n  > = {\n    [Sentiment.NEGATIVE]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.POSITIVE]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n    [Sentiment.WARNING]: {\n      Icon: Alert,\n      defaultIconLabel: intl.formatMessage(messages.warningLabel),\n    },\n    [Status.PENDING]: {\n      Icon: ClockBorderless,\n      defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n    },\n    [Sentiment.NEUTRAL]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    // deprecated\n    [Sentiment.ERROR]: {\n      Icon: Cross,\n      defaultIconLabel: intl.formatMessage(messages.errorLabel),\n    },\n    [Sentiment.INFO]: {\n      Icon: Info,\n      defaultIconLabel: intl.formatMessage(messages.informationLabel),\n    },\n    [Sentiment.SUCCESS]: {\n      Icon: Check,\n      defaultIconLabel: intl.formatMessage(messages.successLabel),\n    },\n  };\n  const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.EXTRA_SMALL}px)`);\n  const size = mapLegacySize[sizeProp] ?? sizeProp;\n\n  return (\n    <Circle\n      size={isTinyViewport && size < 40 ? 32 : size}\n      data-testid=\"status-icon\"\n      className={clsx('status-circle', sentiment)}\n      id={id}\n    >\n      <Icon\n        className=\"status-icon\"\n        title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n      />\n    </Circle>\n  );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","id","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","isTinyViewport","useMedia","Breakpoint","EXTRA_SMALL","_jsx","Circle","className","clsx","children","title","undefined"],"mappings":"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"}

package/build/stepper/Stepper.js

@@ -6,8 +6,8 @@ var clsx = require('clsx');
 require('react');
 require('../common/theme.js');
 require('../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
 require('../common/propsValues/size.js');
 require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');
@@ -23,6 +23,7 @@ require('../common/propsValues/variant.js');
 require('../common/propsValues/scroll.js');
 require('../common/propsValues/markdownNodeType.js');
 require('../common/fileType.js');
+require('@transferwise/formatting');
 require('@transferwise/icons');
 require('react-intl');
 require('../common/closeButton/CloseButton.messages.js');

package/build/stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../src/stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n  return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n  label: React.ReactNode;\n  onClick?: () => void;\n  hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n  steps: readonly Step[];\n  activeStep?: number;\n  className?: string;\n  testId?: string;\n}\n\n/**\n * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n */\nconst Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {\n  const { isRTL } = useDirection();\n\n  if (steps.length === 0) {\n    return null;\n  }\n\n  const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n  const stepPercentage = 1 / (steps.length - 1);\n  const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n  const getProgressWidth = (): string => {\n    if (percentageCompleted === 0) {\n      return '0%';\n    }\n    /**\n     * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n     * which are used for progress vertical delimiter.\n     * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n     */\n    return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n  };\n\n  const renderStep = (step: Step, index: number) => {\n    const active = index === activeStepIndex;\n    const clickable = step.onClick && !active;\n\n    const labelButton = clickable ? (\n      <button\n        type=\"button\"\n        className=\"btn-unstyled tw-stepper__step-label\"\n        onClick={() => clickable && step.onClick?.()}\n      >\n        <small>{step.label}</small>\n      </button>\n    ) : (\n      <span className=\"tw-stepper__step-label\">{step.label}</span>\n    );\n\n    return (\n      <li\n        key={index}\n        className={clsx(\n          'hidden-xs',\n          'tw-stepper__step',\n          active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',\n          clickable && 'tw-stepper__step--clickable',\n          step.hoverLabel && 'tw-stepper__step--has-tooltip',\n        )}\n        aria-current={active ? 'step' : false}\n        style={\n          isRTL\n            ? { right: `${index * stepPercentage * 100}%` }\n            : { left: `${index * stepPercentage * 100}%` }\n        }\n      >\n        {step.hoverLabel && !isTouchDevice() ? (\n          <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n            {labelButton}\n          </Tooltip>\n        ) : (\n          labelButton\n        )}\n      </li>\n    );\n  };\n\n  return (\n    <div className={clsx('tw-stepper', className)} data-testid={testId}>\n      <div className=\"progress\">\n        <div\n          className=\"progress-bar\"\n          style={{ width: getProgressWidth() }}\n          data-testid=\"progress-bar\"\n        />\n      </div>\n      <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","testId","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}
+{"version":3,"file":"Stepper.js","sources":["../../src/stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n  return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n  label: React.ReactNode;\n  onClick?: () => void;\n  hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n  steps: readonly Step[];\n  activeStep?: number;\n  className?: string;\n  testId?: string;\n}\n\n/**\n * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n */\nconst Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {\n  const { isRTL } = useDirection();\n\n  if (steps.length === 0) {\n    return null;\n  }\n\n  const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n  const stepPercentage = 1 / (steps.length - 1);\n  const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n  const getProgressWidth = (): string => {\n    if (percentageCompleted === 0) {\n      return '0%';\n    }\n    /**\n     * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n     * which are used for progress vertical delimiter.\n     * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n     */\n    return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n  };\n\n  const renderStep = (step: Step, index: number) => {\n    const active = index === activeStepIndex;\n    const clickable = step.onClick && !active;\n\n    const labelButton = clickable ? (\n      <button\n        type=\"button\"\n        className=\"btn-unstyled tw-stepper__step-label\"\n        onClick={() => clickable && step.onClick?.()}\n      >\n        <small>{step.label}</small>\n      </button>\n    ) : (\n      <span className=\"tw-stepper__step-label\">{step.label}</span>\n    );\n\n    return (\n      <li\n        key={index}\n        className={clsx(\n          'hidden-xs',\n          'tw-stepper__step',\n          active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',\n          clickable && 'tw-stepper__step--clickable',\n          step.hoverLabel && 'tw-stepper__step--has-tooltip',\n        )}\n        aria-current={active ? 'step' : false}\n        style={\n          isRTL\n            ? { right: `${index * stepPercentage * 100}%` }\n            : { left: `${index * stepPercentage * 100}%` }\n        }\n      >\n        {step.hoverLabel && !isTouchDevice() ? (\n          <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n            {labelButton}\n          </Tooltip>\n        ) : (\n          labelButton\n        )}\n      </li>\n    );\n  };\n\n  return (\n    <div className={clsx('tw-stepper', className)} data-testid={testId}>\n      <div className=\"progress\">\n        <div\n          className=\"progress-bar\"\n          style={{ width: getProgressWidth() }}\n          data-testid=\"progress-bar\"\n        />\n      </div>\n      <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","testId","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}

package/build/stepper/Stepper.mjs

@@ -2,8 +2,8 @@ import { clsx } from 'clsx';
 import 'react';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';
@@ -19,6 +19,7 @@ import '../common/propsValues/variant.mjs';
 import '../common/propsValues/scroll.mjs';
 import '../common/propsValues/markdownNodeType.mjs';
 import '../common/fileType.mjs';
+import '@transferwise/formatting';
 import '@transferwise/icons';
 import 'react-intl';
 import '../common/closeButton/CloseButton.messages.mjs';

package/build/stepper/Stepper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.mjs","sources":["../../src/stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n  return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n  label: React.ReactNode;\n  onClick?: () => void;\n  hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n  steps: readonly Step[];\n  activeStep?: number;\n  className?: string;\n  testId?: string;\n}\n\n/**\n * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n */\nconst Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {\n  const { isRTL } = useDirection();\n\n  if (steps.length === 0) {\n    return null;\n  }\n\n  const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n  const stepPercentage = 1 / (steps.length - 1);\n  const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n  const getProgressWidth = (): string => {\n    if (percentageCompleted === 0) {\n      return '0%';\n    }\n    /**\n     * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n     * which are used for progress vertical delimiter.\n     * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n     */\n    return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n  };\n\n  const renderStep = (step: Step, index: number) => {\n    const active = index === activeStepIndex;\n    const clickable = step.onClick && !active;\n\n    const labelButton = clickable ? (\n      <button\n        type=\"button\"\n        className=\"btn-unstyled tw-stepper__step-label\"\n        onClick={() => clickable && step.onClick?.()}\n      >\n        <small>{step.label}</small>\n      </button>\n    ) : (\n      <span className=\"tw-stepper__step-label\">{step.label}</span>\n    );\n\n    return (\n      <li\n        key={index}\n        className={clsx(\n          'hidden-xs',\n          'tw-stepper__step',\n          active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',\n          clickable && 'tw-stepper__step--clickable',\n          step.hoverLabel && 'tw-stepper__step--has-tooltip',\n        )}\n        aria-current={active ? 'step' : false}\n        style={\n          isRTL\n            ? { right: `${index * stepPercentage * 100}%` }\n            : { left: `${index * stepPercentage * 100}%` }\n        }\n      >\n        {step.hoverLabel && !isTouchDevice() ? (\n          <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n            {labelButton}\n          </Tooltip>\n        ) : (\n          labelButton\n        )}\n      </li>\n    );\n  };\n\n  return (\n    <div className={clsx('tw-stepper', className)} data-testid={testId}>\n      <div className=\"progress\">\n        <div\n          className=\"progress-bar\"\n          style={{ width: getProgressWidth() }}\n          data-testid=\"progress-bar\"\n        />\n      </div>\n      <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","testId","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}
+{"version":3,"file":"Stepper.mjs","sources":["../../src/stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n  return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n  label: React.ReactNode;\n  onClick?: () => void;\n  hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n  steps: readonly Step[];\n  activeStep?: number;\n  className?: string;\n  testId?: string;\n}\n\n/**\n * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n */\nconst Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {\n  const { isRTL } = useDirection();\n\n  if (steps.length === 0) {\n    return null;\n  }\n\n  const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n  const stepPercentage = 1 / (steps.length - 1);\n  const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n  const getProgressWidth = (): string => {\n    if (percentageCompleted === 0) {\n      return '0%';\n    }\n    /**\n     * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n     * which are used for progress vertical delimiter.\n     * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n     */\n    return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n  };\n\n  const renderStep = (step: Step, index: number) => {\n    const active = index === activeStepIndex;\n    const clickable = step.onClick && !active;\n\n    const labelButton = clickable ? (\n      <button\n        type=\"button\"\n        className=\"btn-unstyled tw-stepper__step-label\"\n        onClick={() => clickable && step.onClick?.()}\n      >\n        <small>{step.label}</small>\n      </button>\n    ) : (\n      <span className=\"tw-stepper__step-label\">{step.label}</span>\n    );\n\n    return (\n      <li\n        key={index}\n        className={clsx(\n          'hidden-xs',\n          'tw-stepper__step',\n          active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',\n          clickable && 'tw-stepper__step--clickable',\n          step.hoverLabel && 'tw-stepper__step--has-tooltip',\n        )}\n        aria-current={active ? 'step' : false}\n        style={\n          isRTL\n            ? { right: `${index * stepPercentage * 100}%` }\n            : { left: `${index * stepPercentage * 100}%` }\n        }\n      >\n        {step.hoverLabel && !isTouchDevice() ? (\n          <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n            {labelButton}\n          </Tooltip>\n        ) : (\n          labelButton\n        )}\n      </li>\n    );\n  };\n\n  return (\n    <div className={clsx('tw-stepper', className)} data-testid={testId}>\n      <div className=\"progress\">\n        <div\n          className=\"progress-bar\"\n          style={{ width: getProgressWidth() }}\n          data-testid=\"progress-bar\"\n        />\n      </div>\n      <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","testId","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}

package/build/sticky/Sticky.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('../common/theme.js');
 require('../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
 require('../common/propsValues/size.js');
 require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');
@@ -21,6 +21,7 @@ require('../common/propsValues/variant.js');
 require('../common/propsValues/scroll.js');
 require('../common/propsValues/markdownNodeType.js');
 require('../common/fileType.js');
+require('@transferwise/formatting');
 require('@transferwise/icons');
 require('clsx');
 require('react');

package/build/sticky/Sticky.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sticky.js","sources":["../../src/sticky/Sticky.tsx"],"sourcesContent":["import { Position } from '../common';\nimport SlidingPanel from '../slidingPanel';\nimport { FunctionComponent } from 'react';\n\nexport interface StickyProps {\n  /** Optional prop for children components to be rendered inside the Sticky component. */\n  children?: React.ReactNode;\n\n  /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */\n  open?: boolean;\n\n  /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */\n  position?: `${Position.TOP}` | `${Position.BOTTOM}`;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n}\n\n/**\n * ### Sticky Component\n *\n * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.\n * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,\n * based on the `open` prop. It can be positioned at the top or bottom of the container,\n * as specified by the `position` prop.\n *\n * @component\n * @param {ReactNode} children - Children content.\n * @param {boolean} open - Determines if the Sticky component is open or closed.\n * @param {('top'|'bottom')} position - Specifies the position.\n * @param {string} testId - ID used for testing.\n * @returns {React.JSX.Element} The `SlidingPanel` component with applied props.\n * @example\n * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>\n * <Sticky open={open} position={'bottom'}>\n *   <div>\n *     <Button onClick={() => setOpen(!open)}>Close Sticky</Button>\n *   </div>\n * </Sticky>\n */\nconst Sticky: FunctionComponent<StickyProps> = ({\n  children,\n  open = true,\n  position = Position.BOTTOM,\n  testId,\n}: StickyProps) => {\n  return (\n    <SlidingPanel\n      testId={testId}\n      open={open}\n      position={position}\n      slidingPanelPositionFixed\n      showSlidingPanelBorder\n    >\n      {children}\n    </SlidingPanel>\n  );\n};\n\nexport default Sticky;\n"],"names":["Sticky","children","open","position","Position","BOTTOM","testId","_jsx","SlidingPanel","slidingPanelPositionFixed","showSlidingPanelBorder"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAMA,MAAM,GAAmCA,CAAC;EAC9CC,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;YACXC,UAAQ,GAAGC,iBAAQ,CAACC,MAAM;AAC1BC,EAAAA;AAAM,CACM,KAAI;EAChB,oBACEC,cAAA,CAACC,oBAAY,EAAA;AACXF,IAAAA,MAAM,EAAEA,MAAO;AACfJ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,UAAS;IACnBM,yBAAyB,EAAA,IAAA;IACzBC,sBAAsB,EAAA,IAAA;AAAAT,IAAAA,QAAA,EAErBA;AAAQ,GACG,CAAC;AAEnB;;;;"}
+{"version":3,"file":"Sticky.js","sources":["../../src/sticky/Sticky.tsx"],"sourcesContent":["import { Position } from '../common';\nimport SlidingPanel from '../slidingPanel';\nimport { FunctionComponent } from 'react';\n\nexport interface StickyProps {\n  /** Optional prop for children components to be rendered inside the Sticky component. */\n  children?: React.ReactNode;\n\n  /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */\n  open?: boolean;\n\n  /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */\n  position?: `${Position.TOP}` | `${Position.BOTTOM}`;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n}\n\n/**\n * ### Sticky Component\n *\n * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.\n * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,\n * based on the `open` prop. It can be positioned at the top or bottom of the container,\n * as specified by the `position` prop.\n *\n * @component\n * @param {ReactNode} children - Children content.\n * @param {boolean} open - Determines if the Sticky component is open or closed.\n * @param {('top'|'bottom')} position - Specifies the position.\n * @param {string} testId - ID used for testing.\n * @returns {React.JSX.Element} The `SlidingPanel` component with applied props.\n * @example\n * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>\n * <Sticky open={open} position={'bottom'}>\n *   <div>\n *     <Button onClick={() => setOpen(!open)}>Close Sticky</Button>\n *   </div>\n * </Sticky>\n */\nconst Sticky: FunctionComponent<StickyProps> = ({\n  children,\n  open = true,\n  position = Position.BOTTOM,\n  testId,\n}: StickyProps) => {\n  return (\n    <SlidingPanel\n      testId={testId}\n      open={open}\n      position={position}\n      slidingPanelPositionFixed\n      showSlidingPanelBorder\n    >\n      {children}\n    </SlidingPanel>\n  );\n};\n\nexport default Sticky;\n"],"names":["Sticky","children","open","position","Position","BOTTOM","testId","_jsx","SlidingPanel","slidingPanelPositionFixed","showSlidingPanelBorder"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAMA,MAAM,GAAmCA,CAAC;EAC9CC,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;YACXC,UAAQ,GAAGC,iBAAQ,CAACC,MAAM;AAC1BC,EAAAA;AAAM,CACM,KAAI;EAChB,oBACEC,cAAA,CAACC,oBAAY,EAAA;AACXF,IAAAA,MAAM,EAAEA,MAAO;AACfJ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,UAAS;IACnBM,yBAAyB,EAAA,IAAA;IACzBC,sBAAsB,EAAA,IAAA;AAAAT,IAAAA,QAAA,EAErBA;AAAQ,GACG,CAAC;AAEnB;;;;"}

package/build/sticky/Sticky.mjs

@@ -1,7 +1,7 @@
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';
@@ -17,6 +17,7 @@ import '../common/propsValues/variant.mjs';
 import '../common/propsValues/scroll.mjs';
 import '../common/propsValues/markdownNodeType.mjs';
 import '../common/fileType.mjs';
+import '@transferwise/formatting';
 import '@transferwise/icons';
 import 'clsx';
 import 'react';

package/build/sticky/Sticky.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Sticky.mjs","sources":["../../src/sticky/Sticky.tsx"],"sourcesContent":["import { Position } from '../common';\nimport SlidingPanel from '../slidingPanel';\nimport { FunctionComponent } from 'react';\n\nexport interface StickyProps {\n  /** Optional prop for children components to be rendered inside the Sticky component. */\n  children?: React.ReactNode;\n\n  /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */\n  open?: boolean;\n\n  /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */\n  position?: `${Position.TOP}` | `${Position.BOTTOM}`;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n}\n\n/**\n * ### Sticky Component\n *\n * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.\n * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,\n * based on the `open` prop. It can be positioned at the top or bottom of the container,\n * as specified by the `position` prop.\n *\n * @component\n * @param {ReactNode} children - Children content.\n * @param {boolean} open - Determines if the Sticky component is open or closed.\n * @param {('top'|'bottom')} position - Specifies the position.\n * @param {string} testId - ID used for testing.\n * @returns {React.JSX.Element} The `SlidingPanel` component with applied props.\n * @example\n * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>\n * <Sticky open={open} position={'bottom'}>\n *   <div>\n *     <Button onClick={() => setOpen(!open)}>Close Sticky</Button>\n *   </div>\n * </Sticky>\n */\nconst Sticky: FunctionComponent<StickyProps> = ({\n  children,\n  open = true,\n  position = Position.BOTTOM,\n  testId,\n}: StickyProps) => {\n  return (\n    <SlidingPanel\n      testId={testId}\n      open={open}\n      position={position}\n      slidingPanelPositionFixed\n      showSlidingPanelBorder\n    >\n      {children}\n    </SlidingPanel>\n  );\n};\n\nexport default Sticky;\n"],"names":["Sticky","children","open","position","Position","BOTTOM","testId","_jsx","SlidingPanel","slidingPanelPositionFixed","showSlidingPanelBorder"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAMA,MAAM,GAAmCA,CAAC;EAC9CC,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ,GAAGC,QAAQ,CAACC,MAAM;AAC1BC,EAAAA;AAAM,CACM,KAAI;EAChB,oBACEC,GAAA,CAACC,YAAY,EAAA;AACXF,IAAAA,MAAM,EAAEA,MAAO;AACfJ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,QAAS;IACnBM,yBAAyB,EAAA,IAAA;IACzBC,sBAAsB,EAAA,IAAA;AAAAT,IAAAA,QAAA,EAErBA;AAAQ,GACG,CAAC;AAEnB;;;;"}
+{"version":3,"file":"Sticky.mjs","sources":["../../src/sticky/Sticky.tsx"],"sourcesContent":["import { Position } from '../common';\nimport SlidingPanel from '../slidingPanel';\nimport { FunctionComponent } from 'react';\n\nexport interface StickyProps {\n  /** Optional prop for children components to be rendered inside the Sticky component. */\n  children?: React.ReactNode;\n\n  /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */\n  open?: boolean;\n\n  /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */\n  position?: `${Position.TOP}` | `${Position.BOTTOM}`;\n\n  /** Optional prop to specify the ID used for testing */\n  testId?: string;\n}\n\n/**\n * ### Sticky Component\n *\n * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.\n * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,\n * based on the `open` prop. It can be positioned at the top or bottom of the container,\n * as specified by the `position` prop.\n *\n * @component\n * @param {ReactNode} children - Children content.\n * @param {boolean} open - Determines if the Sticky component is open or closed.\n * @param {('top'|'bottom')} position - Specifies the position.\n * @param {string} testId - ID used for testing.\n * @returns {React.JSX.Element} The `SlidingPanel` component with applied props.\n * @example\n * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>\n * <Sticky open={open} position={'bottom'}>\n *   <div>\n *     <Button onClick={() => setOpen(!open)}>Close Sticky</Button>\n *   </div>\n * </Sticky>\n */\nconst Sticky: FunctionComponent<StickyProps> = ({\n  children,\n  open = true,\n  position = Position.BOTTOM,\n  testId,\n}: StickyProps) => {\n  return (\n    <SlidingPanel\n      testId={testId}\n      open={open}\n      position={position}\n      slidingPanelPositionFixed\n      showSlidingPanelBorder\n    >\n      {children}\n    </SlidingPanel>\n  );\n};\n\nexport default Sticky;\n"],"names":["Sticky","children","open","position","Position","BOTTOM","testId","_jsx","SlidingPanel","slidingPanelPositionFixed","showSlidingPanelBorder"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAMA,MAAM,GAAmCA,CAAC;EAC9CC,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ,GAAGC,QAAQ,CAACC,MAAM;AAC1BC,EAAAA;AAAM,CACM,KAAI;EAChB,oBACEC,GAAA,CAACC,YAAY,EAAA;AACXF,IAAAA,MAAM,EAAEA,MAAO;AACfJ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,QAAS;IACnBM,yBAAyB,EAAA,IAAA;IACzBC,sBAAsB,EAAA,IAAA;AAAAT,IAAAA,QAAA,EAErBA;AAAQ,GACG,CAAC;AAEnB;;;;"}

package/build/styles/accordion/Accordion.css

@@ -18,7 +18,7 @@
   border-bottom: 1px solid rgba(0,0,0,0.10196);
   border-bottom: 1px solid var(--color-border-neutral);
 }
-@media (min-width: 480px) {
+@media (min-width: 320px) {
   .np-accordion-item__content.has-icon {
     padding-left: 68px;
   }

package/build/styles/card/Card.css

@@ -24,13 +24,13 @@
 .np-card--inactive .decision {
   cursor: default;
 }
-@media (min-width: 480px) {
+@media (min-width: 320px) {
   .np-card--has-icon .np-card__content {
     padding: 24px 72px;
     padding: var(--size-24) var(--size-72);
   }
 }
-@media (min-width: 480px) {
+@media (min-width: 320px) {
   .np-card--has-icon .np-card__divider--expanded {
     margin: 0 72px;
     margin: 0 var(--size-72);

package/build/styles/carousel/Carousel.css

@@ -13,7 +13,7 @@
   padding: 8px;
   padding: var(--size-8);
 }
-@media (max-width: 767px) {
+@media (max-width: 839.98px) {
   .carousel {
     gap: 8px;
     gap: var(--size-8);
@@ -51,14 +51,14 @@
   -webkit-scroll-snap-align: center;
   transition: all 0.4s !important;
 }
-@media (min-width: 1200px) {
+@media (min-width: 1160px) {
   .carousel__card {
     min-width: 280px;
     width: 280px;
     height: 280px;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .carousel-wrapper {
     overflow: visible;
   }
@@ -67,14 +67,14 @@
     margin: 0 calc(-1 * var(--size-8));
   }
 }
-@media (max-width: 1199px) {
+@media (max-width: 1159.98px) {
   .carousel__card {
     min-width: 242px;
     width: 242px;
     height: 242px;
   }
 }
-@media (max-width: 767px) {
+@media (max-width: 839.98px) {
   .carousel__card {
     min-width: 336px;
     width: 336px;

package/build/styles/common/Option/Option.css

@@ -92,7 +92,7 @@ button.np-option {
   max-width: none;
   width: auto;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .np-theme-personal .np-option {
     border-radius: 10px;
     border-radius: var(--radius-small);

package/build/styles/common/baseCard/BaseCard.css

@@ -21,7 +21,7 @@
   box-sizing: border-box;
   overflow: hidden;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .np-Card {
     max-width: var(--Card-max-width);
   }

package/build/styles/criticalBanner/CriticalCommsBanner.css

@@ -44,7 +44,7 @@
   --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
   --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .critical-comms .alert-warning .alert__message,
   .critical-comms .alert-negative .alert__message,
   .critical-comms .alert-neutral .alert__message {

package/build/styles/css/accordion.css

@@ -68,12 +68,12 @@
     hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
-  @media (min-width: 768px) {
+  @media (min-width: 840px) {
     .decision__title {
       hyphenate-limit-chars: 8 3;
     }
   }
-  @media (min-width: 992px) {
+  @media (min-width: 1160px) {
     .decision__title {
       hyphenate-limit-chars: 10 4 3;
     }
@@ -85,7 +85,7 @@
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
-  @media (min-width: 992px) {
+  @media (min-width: 1160px) {
     .decision__title {
       -webkit-hyphenate-limit-before: 4;
     }
@@ -137,7 +137,7 @@
   color: #5d7079;
   color: var(--color-content-secondary);
 }
-@media (min-width: 480px) {
+@media (min-width: 320px) {
   .decision .media .media-left,
   .decision.media .media-left {
     display: block;

package/build/styles/css/button-groups.css

@@ -53,7 +53,7 @@
   margin-left: 0;
   margin-left: initial;
 }
-@media (min-width: 992px) {
+@media (min-width: 1160px) {
   .btn-toolbar:not(.btn-toolbar-xl) {
     margin-left: -4px;
     margin-right: -4px;
@@ -91,7 +91,7 @@
 [dir="rtl"] .btn-toolbar.btn-toolbar-xs .input-group {
   float: right;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .btn-toolbar.btn-toolbar-sm {
     margin-left: -4px;
     margin-right: -4px;
@@ -111,7 +111,7 @@
     float: right;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 840px) {
   .btn-toolbar.btn-toolbar-md {
     margin-left: -4px;
     margin-right: -4px;
@@ -131,7 +131,7 @@
     float: right;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 1160px) {
   .btn-toolbar.btn-toolbar-lg {
     margin-left: -4px;
     margin-right: -4px;
@@ -151,7 +151,7 @@
     float: right;
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 1160px) {
   .btn-toolbar.btn-toolbar-xl {
     margin-left: -4px;
     margin-right: -4px;
@@ -426,7 +426,7 @@ html:not([dir="rtl"]) .btn-group .btn + .btn-primary {
   padding-left: 40px;
   padding-right: 16px;
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .btn-group.btn-block .btn-input.btn.dropdown-toggle {
     padding-right: 48px;
   }

package/build/styles/css/buttons.css

@@ -1127,7 +1127,7 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
   height: 18px;
   background-size: 12px 12px !important;
 }
-@media (max-width: 767px) {
+@media (max-width: 839px) {
   .navbar-collapse .btn {
     padding: var(--btn-padding);
     font-size: 1rem;

package/build/styles/css/circles.css

@@ -145,7 +145,7 @@ a.circle.active:hover {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-@media (min-width: 576px) {
+@media (min-width: 600px) {
   .circle-responsive {
     border-radius: 50%;
     background-color: #fff;

package/build/styles/css/column-layout.css

@@ -49,7 +49,7 @@
   padding: 24px;
   padding: var(--size-24);
 }
-@media (min-width: 992px) {
+@media (min-width: 1160px) {
   .column-layout {
     display: table;
   }
@@ -89,12 +89,12 @@
   opacity: 1;
   top: 20px;
 }
-@media (min-width: 992px) {
+@media (min-width: 1160px) {
   .column-layout-cover {
     display: none;
   }
 }
-@media (max-width: 991px) {
+@media (max-width: 1159.98px) {
   .column-layout-open {
     overflow: hidden;
   }
@@ -134,7 +134,7 @@
   padding: 4px 24px;
   padding: var(--size-4) 24px;
 }
-@media (min-width: 992px) {
+@media (min-width: 1160px) {
   .column-layout-brand {
     padding-left: 32px;
     padding-right: 32px;

package/build/styles/css/decision.css

@@ -33,12 +33,12 @@
     hyphens: auto;
     hyphenate-limit-chars: 7 3;
   }
-  @media (min-width: 768px) {
+  @media (min-width: 840px) {
     .decision__title {
       hyphenate-limit-chars: 8 3;
     }
   }
-  @media (min-width: 992px) {
+  @media (min-width: 1160px) {
     .decision__title {
       hyphenate-limit-chars: 10 4 3;
     }
@@ -50,7 +50,7 @@
     -webkit-hyphenate-limit-before: 3;
     -webkit-hyphenate-limit-after: 3;
   }
-  @media (min-width: 992px) {
+  @media (min-width: 1160px) {
     .decision__title {
       -webkit-hyphenate-limit-before: 4;
     }
@@ -102,7 +102,7 @@
   color: #5d7079;
   color: var(--color-content-secondary);
 }
-@media (min-width: 480px) {
+@media (min-width: 320px) {
   .decision .media .media-left,
   .decision.media .media-left {
     display: block;