@transferwise/components 0.0.0-experimental-941345f → 0.0.0-experimental-f126d60

package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.js

@@ -35,6 +35,7 @@ const AnimatedLabel = ({
             "aria-haspopup": "menu",
             "aria-controls": overlayId,
             "aria-expanded": showSteps,
+            title: typeof steps[activeLabel]?.label === 'string' ? steps[activeLabel].label : undefined,
             className: clsx.clsx('np-animated-label', 'btn-unstyled', 'np-text-body-large-bold', className),
             onClick: () => setShowSteps(true),
             children: steps.map(({
@@ -45,9 +46,12 @@ const AnimatedLabel = ({
               return /*#__PURE__*/jsxRuntime.jsxs("div", {
                 "aria-hidden": !isCurrentStep,
                 className: clsx.clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {
-                  'np-animated-label--active text-ellipsis': isCurrentStep
+                  'np-animated-label--active': isCurrentStep
                 }),
-                children: [label, " ", /*#__PURE__*/jsxRuntime.jsx(icons.ChevronDown, {})]
+                children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+                  className: "np-animated-label__text",
+                  children: label
+                }), " ", /*#__PURE__*/jsxRuntime.jsx(icons.ChevronDown, {})]
               }, previousIndex);
             })
           }), /*#__PURE__*/jsxRuntime.jsx(BottomSheet.default, {

package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedLabel.js","sources":["../../../src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../Stepper/Stepper';\nimport BottomSheet from '../../common/BottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../Provider/overlay/OverlayIdProvider';\nimport List from '../../List';\n\nexport interface AnimatedLabelProps {\n  activeLabel: number;\n  className?: string;\n  steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n  const labelId = useId();\n  const [showSteps, setShowSteps] = useState(false);\n\n  function handleStepAction(onClick: Step['onClick']) {\n    return () => {\n      setShowSteps(false);\n      onClick?.();\n    };\n  }\n\n  return (\n    <OverlayIdProvider open={showSteps}>\n      <OverlayIdContext.Consumer>\n        {(overlayId) => {\n          return (\n            <>\n              <button\n                type=\"button\"\n                id={labelId}\n                aria-haspopup=\"menu\"\n                aria-controls={overlayId}\n                aria-expanded={showSteps}\n                className={clsx(\n                  'np-animated-label',\n                  'btn-unstyled',\n                  'np-text-body-large-bold',\n                  className,\n                )}\n                onClick={() => setShowSteps(true)}\n              >\n                {steps.map(({ label }, index) => {\n                  const isCurrentStep = activeLabel === index;\n                  const previousIndex = index - 1;\n                  return (\n                    <div\n                      key={previousIndex}\n                      aria-hidden={!isCurrentStep}\n                      className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {\n                        'np-animated-label--active text-ellipsis': isCurrentStep,\n                      })}\n                    >\n                      {label} <ChevronDown />\n                    </div>\n                  );\n                })}\n              </button>\n              <BottomSheet\n                role=\"menu\"\n                aria-labelledby={labelId}\n                open={showSteps}\n                onClose={() => setShowSteps(false)}\n              >\n                <List className=\"m-b-0 p-a-1\">\n                  {steps.map((step, index) => {\n                    const isCurrentStep = activeLabel === index;\n                    const isDisabled = activeLabel < index;\n                    const itemId = `step-${index}`;\n                    return (\n                      <Option\n                        key={itemId}\n                        id={itemId}\n                        as=\"li\"\n                        role=\"menuitem\"\n                        decision={false}\n                        className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n                          clickable: !isDisabled,\n                        })}\n                        title={step.label}\n                        content={step.hoverLabel}\n                        button={isCurrentStep ? <Check size={24} /> : null}\n                        aria-current={isCurrentStep ? 'step' : false}\n                        aria-disabled={isDisabled}\n                        disabled={isDisabled}\n                        isContainerAligned\n                        {...(!isDisabled && {\n                          tabIndex: 0,\n                          onClick: handleStepAction(step.onClick),\n                          onKeyDown: (event) => {\n                            event.preventDefault();\n                            if (event.code === 'Enter' || event.code === 'Space') {\n                              handleStepAction(step.onClick)();\n                            }\n                          },\n                        })}\n                      />\n                    );\n                  })}\n                </List>\n              </BottomSheet>\n            </>\n          );\n        }}\n      </OverlayIdContext.Consumer>\n    </OverlayIdProvider>\n  );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","clsx","map","label","index","isCurrentStep","previousIndex","ChevronDown","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","title","content","hoverLabel","button","Check","size","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"mappings":"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"}
+{"version":3,"file":"AnimatedLabel.js","sources":["../../../src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../Stepper/Stepper';\nimport BottomSheet from '../../common/BottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../Provider/overlay/OverlayIdProvider';\nimport List from '../../List';\n\nexport interface AnimatedLabelProps {\n  activeLabel: number;\n  className?: string;\n  steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n  const labelId = useId();\n  const [showSteps, setShowSteps] = useState(false);\n\n  function handleStepAction(onClick: Step['onClick']) {\n    return () => {\n      setShowSteps(false);\n      onClick?.();\n    };\n  }\n\n  return (\n    <OverlayIdProvider open={showSteps}>\n      <OverlayIdContext.Consumer>\n        {(overlayId) => {\n          return (\n            <>\n              <button\n                type=\"button\"\n                id={labelId}\n                aria-haspopup=\"menu\"\n                aria-controls={overlayId}\n                aria-expanded={showSteps}\n                title={\n                  typeof steps[activeLabel]?.label === 'string'\n                    ? steps[activeLabel].label\n                    : undefined\n                }\n                className={clsx(\n                  'np-animated-label',\n                  'btn-unstyled',\n                  'np-text-body-large-bold',\n                  className,\n                )}\n                onClick={() => setShowSteps(true)}\n              >\n                {steps.map(({ label }, index) => {\n                  const isCurrentStep = activeLabel === index;\n                  const previousIndex = index - 1;\n                  return (\n                    <div\n                      key={previousIndex}\n                      aria-hidden={!isCurrentStep}\n                      className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {\n                        'np-animated-label--active': isCurrentStep,\n                      })}\n                    >\n                      <span className=\"np-animated-label__text\">{label}</span> <ChevronDown />\n                    </div>\n                  );\n                })}\n              </button>\n              <BottomSheet\n                role=\"menu\"\n                aria-labelledby={labelId}\n                open={showSteps}\n                onClose={() => setShowSteps(false)}\n              >\n                <List className=\"m-b-0 p-a-1\">\n                  {steps.map((step, index) => {\n                    const isCurrentStep = activeLabel === index;\n                    const isDisabled = activeLabel < index;\n                    const itemId = `step-${index}`;\n                    return (\n                      <Option\n                        key={itemId}\n                        id={itemId}\n                        as=\"li\"\n                        role=\"menuitem\"\n                        decision={false}\n                        className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n                          clickable: !isDisabled,\n                        })}\n                        title={step.label}\n                        content={step.hoverLabel}\n                        button={isCurrentStep ? <Check size={24} /> : null}\n                        aria-current={isCurrentStep ? 'step' : false}\n                        aria-disabled={isDisabled}\n                        disabled={isDisabled}\n                        isContainerAligned\n                        {...(!isDisabled && {\n                          tabIndex: 0,\n                          onClick: handleStepAction(step.onClick),\n                          onKeyDown: (event) => {\n                            event.preventDefault();\n                            if (event.code === 'Enter' || event.code === 'Space') {\n                              handleStepAction(step.onClick)();\n                            }\n                          },\n                        })}\n                      />\n                    );\n                  })}\n                </List>\n              </BottomSheet>\n            </>\n          );\n        }}\n      </OverlayIdContext.Consumer>\n    </OverlayIdProvider>\n  );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","title","label","undefined","clsx","map","index","isCurrentStep","previousIndex","ChevronDown","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","content","hoverLabel","button","Check","size","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"mappings":"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"}

package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.mjs

@@ -31,6 +31,7 @@ const AnimatedLabel = ({
             "aria-haspopup": "menu",
             "aria-controls": overlayId,
             "aria-expanded": showSteps,
+            title: typeof steps[activeLabel]?.label === 'string' ? steps[activeLabel].label : undefined,
             className: clsx('np-animated-label', 'btn-unstyled', 'np-text-body-large-bold', className),
             onClick: () => setShowSteps(true),
             children: steps.map(({
@@ -41,9 +42,12 @@ const AnimatedLabel = ({
               return /*#__PURE__*/jsxs("div", {
                 "aria-hidden": !isCurrentStep,
                 className: clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {
-                  'np-animated-label--active text-ellipsis': isCurrentStep
+                  'np-animated-label--active': isCurrentStep
                 }),
-                children: [label, " ", /*#__PURE__*/jsx(ChevronDown, {})]
+                children: [/*#__PURE__*/jsx("span", {
+                  className: "np-animated-label__text",
+                  children: label
+                }), " ", /*#__PURE__*/jsx(ChevronDown, {})]
               }, previousIndex);
             })
           }), /*#__PURE__*/jsx(BottomSheet, {

package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedLabel.mjs","sources":["../../../src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../Stepper/Stepper';\nimport BottomSheet from '../../common/BottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../Provider/overlay/OverlayIdProvider';\nimport List from '../../List';\n\nexport interface AnimatedLabelProps {\n  activeLabel: number;\n  className?: string;\n  steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n  const labelId = useId();\n  const [showSteps, setShowSteps] = useState(false);\n\n  function handleStepAction(onClick: Step['onClick']) {\n    return () => {\n      setShowSteps(false);\n      onClick?.();\n    };\n  }\n\n  return (\n    <OverlayIdProvider open={showSteps}>\n      <OverlayIdContext.Consumer>\n        {(overlayId) => {\n          return (\n            <>\n              <button\n                type=\"button\"\n                id={labelId}\n                aria-haspopup=\"menu\"\n                aria-controls={overlayId}\n                aria-expanded={showSteps}\n                className={clsx(\n                  'np-animated-label',\n                  'btn-unstyled',\n                  'np-text-body-large-bold',\n                  className,\n                )}\n                onClick={() => setShowSteps(true)}\n              >\n                {steps.map(({ label }, index) => {\n                  const isCurrentStep = activeLabel === index;\n                  const previousIndex = index - 1;\n                  return (\n                    <div\n                      key={previousIndex}\n                      aria-hidden={!isCurrentStep}\n                      className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {\n                        'np-animated-label--active text-ellipsis': isCurrentStep,\n                      })}\n                    >\n                      {label} <ChevronDown />\n                    </div>\n                  );\n                })}\n              </button>\n              <BottomSheet\n                role=\"menu\"\n                aria-labelledby={labelId}\n                open={showSteps}\n                onClose={() => setShowSteps(false)}\n              >\n                <List className=\"m-b-0 p-a-1\">\n                  {steps.map((step, index) => {\n                    const isCurrentStep = activeLabel === index;\n                    const isDisabled = activeLabel < index;\n                    const itemId = `step-${index}`;\n                    return (\n                      <Option\n                        key={itemId}\n                        id={itemId}\n                        as=\"li\"\n                        role=\"menuitem\"\n                        decision={false}\n                        className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n                          clickable: !isDisabled,\n                        })}\n                        title={step.label}\n                        content={step.hoverLabel}\n                        button={isCurrentStep ? <Check size={24} /> : null}\n                        aria-current={isCurrentStep ? 'step' : false}\n                        aria-disabled={isDisabled}\n                        disabled={isDisabled}\n                        isContainerAligned\n                        {...(!isDisabled && {\n                          tabIndex: 0,\n                          onClick: handleStepAction(step.onClick),\n                          onKeyDown: (event) => {\n                            event.preventDefault();\n                            if (event.code === 'Enter' || event.code === 'Space') {\n                              handleStepAction(step.onClick)();\n                            }\n                          },\n                        })}\n                      />\n                    );\n                  })}\n                </List>\n              </BottomSheet>\n            </>\n          );\n        }}\n      </OverlayIdContext.Consumer>\n    </OverlayIdProvider>\n  );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","clsx","map","label","index","isCurrentStep","previousIndex","ChevronDown","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","title","content","hoverLabel","button","Check","size","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"mappings":"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"}
+{"version":3,"file":"AnimatedLabel.mjs","sources":["../../../src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../Stepper/Stepper';\nimport BottomSheet from '../../common/BottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../Provider/overlay/OverlayIdProvider';\nimport List from '../../List';\n\nexport interface AnimatedLabelProps {\n  activeLabel: number;\n  className?: string;\n  steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n  const labelId = useId();\n  const [showSteps, setShowSteps] = useState(false);\n\n  function handleStepAction(onClick: Step['onClick']) {\n    return () => {\n      setShowSteps(false);\n      onClick?.();\n    };\n  }\n\n  return (\n    <OverlayIdProvider open={showSteps}>\n      <OverlayIdContext.Consumer>\n        {(overlayId) => {\n          return (\n            <>\n              <button\n                type=\"button\"\n                id={labelId}\n                aria-haspopup=\"menu\"\n                aria-controls={overlayId}\n                aria-expanded={showSteps}\n                title={\n                  typeof steps[activeLabel]?.label === 'string'\n                    ? steps[activeLabel].label\n                    : undefined\n                }\n                className={clsx(\n                  'np-animated-label',\n                  'btn-unstyled',\n                  'np-text-body-large-bold',\n                  className,\n                )}\n                onClick={() => setShowSteps(true)}\n              >\n                {steps.map(({ label }, index) => {\n                  const isCurrentStep = activeLabel === index;\n                  const previousIndex = index - 1;\n                  return (\n                    <div\n                      key={previousIndex}\n                      aria-hidden={!isCurrentStep}\n                      className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {\n                        'np-animated-label--active': isCurrentStep,\n                      })}\n                    >\n                      <span className=\"np-animated-label__text\">{label}</span> <ChevronDown />\n                    </div>\n                  );\n                })}\n              </button>\n              <BottomSheet\n                role=\"menu\"\n                aria-labelledby={labelId}\n                open={showSteps}\n                onClose={() => setShowSteps(false)}\n              >\n                <List className=\"m-b-0 p-a-1\">\n                  {steps.map((step, index) => {\n                    const isCurrentStep = activeLabel === index;\n                    const isDisabled = activeLabel < index;\n                    const itemId = `step-${index}`;\n                    return (\n                      <Option\n                        key={itemId}\n                        id={itemId}\n                        as=\"li\"\n                        role=\"menuitem\"\n                        decision={false}\n                        className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n                          clickable: !isDisabled,\n                        })}\n                        title={step.label}\n                        content={step.hoverLabel}\n                        button={isCurrentStep ? <Check size={24} /> : null}\n                        aria-current={isCurrentStep ? 'step' : false}\n                        aria-disabled={isDisabled}\n                        disabled={isDisabled}\n                        isContainerAligned\n                        {...(!isDisabled && {\n                          tabIndex: 0,\n                          onClick: handleStepAction(step.onClick),\n                          onKeyDown: (event) => {\n                            event.preventDefault();\n                            if (event.code === 'Enter' || event.code === 'Space') {\n                              handleStepAction(step.onClick)();\n                            }\n                          },\n                        })}\n                      />\n                    );\n                  })}\n                </List>\n              </BottomSheet>\n            </>\n          );\n        }}\n      </OverlayIdContext.Consumer>\n    </OverlayIdProvider>\n  );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","title","label","undefined","clsx","map","index","isCurrentStep","previousIndex","ChevronDown","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","content","hoverLabel","button","Check","size","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"mappings":";;;;;;;;;AAgBA,MAAMA,aAAa,GAAGA,CAAC;EAAEC,WAAW;EAAEC,SAAS;AAAEC,EAAAA;AAAK,CAAsB,KAAI;AAC9E,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE;EACvB,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;EAEjD,SAASC,gBAAgBA,CAACC,OAAwB,EAAA;AAChD,IAAA,OAAO,MAAK;MACVH,YAAY,CAAC,KAAK,CAAC;AACnBG,MAAAA,OAAO,IAAI;IACb,CAAC;AACH,EAAA;EAEA,oBACEC,GAAA,CAACC,iBAAiB,EAAA;AAACC,IAAAA,IAAI,EAAEP,SAAU;AAAAQ,IAAAA,QAAA,eACjCH,GAAA,CAACI,gBAAgB,CAACC,QAAQ,EAAA;MAAAF,QAAA,EACtBG,SAAS,IAAI;QACb,oBACEC,IAAA,CAAAC,QAAA,EAAA;AAAAL,UAAAA,QAAA,gBACEH,GAAA,CAAA,QAAA,EAAA;AACES,YAAAA,IAAI,EAAC,QAAQ;AACbC,YAAAA,EAAE,EAAEjB,OAAQ;AACZ,YAAA,eAAA,EAAc,MAAM;AACpB,YAAA,eAAA,EAAea,SAAU;AACzB,YAAA,eAAA,EAAeX,SAAU;AACzBgB,YAAAA,KAAK,EACH,OAAOnB,KAAK,CAACF,WAAW,CAAC,EAAEsB,KAAK,KAAK,QAAQ,GACzCpB,KAAK,CAACF,WAAW,CAAC,CAACsB,KAAK,GACxBC,SACL;YACDtB,SAAS,EAAEuB,IAAI,CACb,mBAAmB,EACnB,cAAc,EACd,yBAAyB,EACzBvB,SAAS,CACT;AACFQ,YAAAA,OAAO,EAAEA,MAAMH,YAAY,CAAC,IAAI,CAAE;AAAAO,YAAAA,QAAA,EAEjCX,KAAK,CAACuB,GAAG,CAAC,CAAC;AAAEH,cAAAA;aAAO,EAAEI,KAAK,KAAI;AAC9B,cAAA,MAAMC,aAAa,GAAG3B,WAAW,KAAK0B,KAAK;AAC3C,cAAA,MAAME,aAAa,GAAGF,KAAK,GAAG,CAAC;AAC/B,cAAA,oBACET,IAAA,CAAA,KAAA,EAAA;AAEE,gBAAA,aAAA,EAAa,CAACU,aAAc;gBAC5B1B,SAAS,EAAEuB,IAAI,CAAC,gBAAgB,EAAE,eAAe,EAAE,oBAAoB,EAAE;AACvE,kBAAA,2BAA2B,EAAEG;AAC9B,iBAAA,CAAE;AAAAd,gBAAAA,QAAA,gBAEHH,GAAA,CAAA,MAAA,EAAA;AAAMT,kBAAAA,SAAS,EAAC,yBAAyB;AAAAY,kBAAAA,QAAA,EAAES;AAAK,iBAAO,CAAE,EAAA,GAAA,eAAAZ,GAAA,CAACmB,WAAW,IAAA,CACvE;AAAA,eAAA,EAPOD,aAOF,CAAC;YAEV,CAAC;AAAC,WACI,CACR,eAAAlB,GAAA,CAACoB,WAAW,EAAA;AACVC,YAAAA,IAAI,EAAC,MAAM;AACX,YAAA,iBAAA,EAAiB5B,OAAQ;AACzBS,YAAAA,IAAI,EAAEP,SAAU;AAChB2B,YAAAA,OAAO,EAAEA,MAAM1B,YAAY,CAAC,KAAK,CAAE;YAAAO,QAAA,eAEnCH,GAAA,CAACuB,IAAI,EAAA;AAAChC,cAAAA,SAAS,EAAC,aAAa;cAAAY,QAAA,EAC1BX,KAAK,CAACuB,GAAG,CAAC,CAACS,IAAI,EAAER,KAAK,KAAI;AACzB,gBAAA,MAAMC,aAAa,GAAG3B,WAAW,KAAK0B,KAAK;AAC3C,gBAAA,MAAMS,UAAU,GAAGnC,WAAW,GAAG0B,KAAK;AACtC,gBAAA,MAAMU,MAAM,GAAG,CAAA,KAAA,EAAQV,KAAK,CAAA,CAAE;gBAC9B,oBACEhB,GAAA,CAAC2B,MAAM,EAAA;AAELjB,kBAAAA,EAAE,EAAEgB,MAAO;AACXE,kBAAAA,EAAE,EAAC,IAAI;AACPP,kBAAAA,IAAI,EAAC,UAAU;AACfQ,kBAAAA,QAAQ,EAAE,KAAM;kBAChBtC,SAAS,EAAEuB,IAAI,CAAC,0BAA0B,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE;AACrEgB,oBAAAA,SAAS,EAAE,CAACL;AACb,mBAAA,CAAE;kBACHd,KAAK,EAAEa,IAAI,CAACZ,KAAM;kBAClBmB,OAAO,EAAEP,IAAI,CAACQ,UAAW;AACzBC,kBAAAA,MAAM,EAAEhB,aAAa,gBAAGjB,GAAA,CAACkC,KAAK,EAAA;AAACC,oBAAAA,IAAI,EAAE;oBAAM,GAAG,IAAK;AACnD,kBAAA,cAAA,EAAclB,aAAa,GAAG,MAAM,GAAG,KAAM;AAC7C,kBAAA,eAAA,EAAeQ,UAAW;AAC1BW,kBAAAA,QAAQ,EAAEX,UAAW;kBACrBY,kBAAkB,EAAA,IAAA;kBAAA,IACb,CAACZ,UAAU,IAAI;AAClBa,oBAAAA,QAAQ,EAAE,CAAC;AACXvC,oBAAAA,OAAO,EAAED,gBAAgB,CAAC0B,IAAI,CAACzB,OAAO,CAAC;oBACvCwC,SAAS,EAAGC,KAAK,IAAI;sBACnBA,KAAK,CAACC,cAAc,EAAE;sBACtB,IAAID,KAAK,CAACE,IAAI,KAAK,OAAO,IAAIF,KAAK,CAACE,IAAI,KAAK,OAAO,EAAE;AACpD5C,wBAAAA,gBAAgB,CAAC0B,IAAI,CAACzB,OAAO,CAAC,EAAE;AAClC,sBAAA;AACF,oBAAA;mBACD;AAAA,iBAAA,EAxBI2B,MAwBF,CACH;cAEN,CAAC;aACG;AACR,WAAa,CACf;AAAA,SAAA,CAAG;AAEP,MAAA;KACyB;AAC7B,GAAmB,CAAC;AAExB;;"}

package/build/i18n/cs.json

@@ -35,7 +35,6 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Vybrat možnost...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Kód země",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Telefonní číslo",
-  "neptune.PhoneNumberInput.phoneNumberPrefix": "Předpona",
   "neptune.Select.searchPlaceholder": "Hledat...",
   "neptune.SelectInput.noResultsFound": "Nebyly nalezeny žádné výsledky",
   "neptune.StatusIcon.iconLabel.error": "Chyba:",

package/build/i18n/cs.json.js

@@ -39,7 +39,6 @@ var cs = {
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Vybrat možnost...",
 	"neptune.PhoneNumberInput.countryCodeLabel": "Kód země",
 	"neptune.PhoneNumberInput.phoneNumberLabel": "Telefonní číslo",
-	"neptune.PhoneNumberInput.phoneNumberPrefix": "Předpona",
 	"neptune.Select.searchPlaceholder": "Hledat...",
 	"neptune.SelectInput.noResultsFound": "Nebyly nalezeny žádné výsledky",
 	"neptune.StatusIcon.iconLabel.error": "Chyba:",

package/build/i18n/cs.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"cs.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"cs.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/i18n/cs.json.mjs

@@ -35,7 +35,6 @@ var cs = {
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Vybrat možnost...",
 	"neptune.PhoneNumberInput.countryCodeLabel": "Kód země",
 	"neptune.PhoneNumberInput.phoneNumberLabel": "Telefonní číslo",
-	"neptune.PhoneNumberInput.phoneNumberPrefix": "Předpona",
 	"neptune.Select.searchPlaceholder": "Hledat...",
 	"neptune.SelectInput.noResultsFound": "Nebyly nalezeny žádné výsledky",
 	"neptune.StatusIcon.iconLabel.error": "Chyba:",

package/build/i18n/cs.json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cs.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"cs.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/i18n/pt.json

@@ -35,7 +35,6 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Escolha uma opção...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Código do país",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Número de telefone",
-  "neptune.PhoneNumberInput.phoneNumberPrefix": "Prefixo",
   "neptune.Select.searchPlaceholder": "Buscar...",
   "neptune.SelectInput.noResultsFound": "Nenhum resultado encontrado",
   "neptune.StatusIcon.iconLabel.error": "Erro:",

package/build/i18n/pt.json.js

@@ -39,7 +39,6 @@ var pt = {
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Escolha uma opção...",
 	"neptune.PhoneNumberInput.countryCodeLabel": "Código do país",
 	"neptune.PhoneNumberInput.phoneNumberLabel": "Número de telefone",
-	"neptune.PhoneNumberInput.phoneNumberPrefix": "Prefixo",
 	"neptune.Select.searchPlaceholder": "Buscar...",
 	"neptune.SelectInput.noResultsFound": "Nenhum resultado encontrado",
 	"neptune.StatusIcon.iconLabel.error": "Erro:",

package/build/i18n/pt.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"pt.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"pt.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/i18n/pt.json.mjs

@@ -35,7 +35,6 @@ var pt = {
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Escolha uma opção...",
 	"neptune.PhoneNumberInput.countryCodeLabel": "Código do país",
 	"neptune.PhoneNumberInput.phoneNumberLabel": "Número de telefone",
-	"neptune.PhoneNumberInput.phoneNumberPrefix": "Prefixo",
 	"neptune.Select.searchPlaceholder": "Buscar...",
 	"neptune.SelectInput.noResultsFound": "Nenhum resultado encontrado",
 	"neptune.StatusIcon.iconLabel.error": "Erro:",

package/build/i18n/pt.json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"pt.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"pt.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/i18n/ru.json

@@ -35,7 +35,6 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Выберите вариант...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Код страны",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Номер телефона",
-  "neptune.PhoneNumberInput.phoneNumberPrefix": "Код страны",
   "neptune.Select.searchPlaceholder": "Поиск...",
   "neptune.SelectInput.noResultsFound": "Ничего не найдено",
   "neptune.StatusIcon.iconLabel.error": "Ошибка:",

package/build/i18n/ru.json.js

@@ -39,7 +39,6 @@ var ru = {
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Выберите вариант...",
 	"neptune.PhoneNumberInput.countryCodeLabel": "Код страны",
 	"neptune.PhoneNumberInput.phoneNumberLabel": "Номер телефона",
-	"neptune.PhoneNumberInput.phoneNumberPrefix": "Код страны",
 	"neptune.Select.searchPlaceholder": "Поиск...",
 	"neptune.SelectInput.noResultsFound": "Ничего не найдено",
 	"neptune.StatusIcon.iconLabel.error": "Ошибка:",

package/build/i18n/ru.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"ru.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ru.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/i18n/ru.json.mjs

@@ -35,7 +35,6 @@ var ru = {
 	"neptune.PhoneNumberInput.SelectInput.placeholder": "Выберите вариант...",
 	"neptune.PhoneNumberInput.countryCodeLabel": "Код страны",
 	"neptune.PhoneNumberInput.phoneNumberLabel": "Номер телефона",
-	"neptune.PhoneNumberInput.phoneNumberPrefix": "Код страны",
 	"neptune.Select.searchPlaceholder": "Поиск...",
 	"neptune.SelectInput.noResultsFound": "Ничего не найдено",
 	"neptune.StatusIcon.iconLabel.error": "Ошибка:",

package/build/i18n/ru.json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ru.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ru.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/main.css

@@ -22987,6 +22987,12 @@ button.np-option {
   overflow: hidden;
   position: relative;
   padding-block-start: 1px;
+  max-inline-size: 60%;
+}
+.np-animated-label__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .np-animated-label > * {
   block-size: 0;

package/build/styles/FlowNavigation/AnimatedLabel/AnimatedLabel.css

@@ -3,6 +3,12 @@
   overflow: hidden;
   position: relative;
   padding-block-start: 1px;
+  max-inline-size: 60%;
+}
+.np-animated-label__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .np-animated-label > * {
   block-size: 0;

package/build/styles/main.css

@@ -22987,6 +22987,12 @@ button.np-option {
   overflow: hidden;
   position: relative;
   padding-block-start: 1px;
+  max-inline-size: 60%;
+}
+.np-animated-label__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .np-animated-label > * {
   block-size: 0;

package/build/types/FlowNavigation/AnimatedLabel/AnimatedLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedLabel.d.ts","sourceRoot":"","sources":["../../../../src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAOlD,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;CACxB;AAED,QAAA,MAAM,aAAa,GAAI,mCAAmC,kBAAkB,gCAgG3E,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"AnimatedLabel.d.ts","sourceRoot":"","sources":["../../../../src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAOlD,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;CACxB;AAED,QAAA,MAAM,aAAa,GAAI,mCAAmC,kBAAkB,gCAqG3E,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-941345f",
+  "version": "0.0.0-experimental-f126d60",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/FlowNavigation/AnimatedLabel/AnimatedLabel.css

@@ -3,6 +3,12 @@
   overflow: hidden;
   position: relative;
   padding-block-start: 1px;
+  max-inline-size: 60%;
+}
+.np-animated-label__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .np-animated-label > * {
   block-size: 0;

package/src/FlowNavigation/AnimatedLabel/AnimatedLabel.less

@@ -11,6 +11,13 @@
   overflow: hidden;
   position: relative;
   padding-top: 1px;
+  max-width: 60%;
+
+  &__text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
   > * {
     height: 0;

package/src/FlowNavigation/AnimatedLabel/AnimatedLabel.test.js

@@ -12,34 +12,60 @@ jest.useFakeTimers();
 describe('AnimatedLabel', () => {
   it('renders only one label with class in', () => {
     const { container } = render(<AnimatedLabel {...props} />);
-    expect(screen.getByText(props.steps[0].label)).toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[0].label).closest('div')).toHaveClass(
+      'np-animated-label--active',
+    );
     expect(container.querySelectorAll('.np-animated-label--active')).toHaveLength(1);
   });
 
   it('when activeLabel increase it switches class accordingly', () => {
     const { rerender } = render(<AnimatedLabel {...props} />);
-    expect(screen.getByText(props.steps[0].label)).toHaveClass('np-animated-label--active');
-    expect(screen.getByText(props.steps[1].label)).not.toHaveClass('np-animated-label--active');
-    expect(screen.getByText(props.steps[2].label)).not.toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[0].label).closest('div')).toHaveClass(
+      'np-animated-label--active',
+    );
+    expect(screen.getByText(props.steps[1].label).closest('div')).not.toHaveClass(
+      'np-animated-label--active',
+    );
+    expect(screen.getByText(props.steps[2].label).closest('div')).not.toHaveClass(
+      'np-animated-label--active',
+    );
 
     rerender(<AnimatedLabel {...props} activeLabel={1} />);
 
-    expect(screen.getByText(props.steps[0].label)).not.toHaveClass('np-animated-label--active');
-    expect(screen.getByText(props.steps[1].label)).toHaveClass('np-animated-label--active');
-    expect(screen.getByText(props.steps[2].label)).not.toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[0].label).closest('div')).not.toHaveClass(
+      'np-animated-label--active',
+    );
+    expect(screen.getByText(props.steps[1].label).closest('div')).toHaveClass(
+      'np-animated-label--active',
+    );
+    expect(screen.getByText(props.steps[2].label).closest('div')).not.toHaveClass(
+      'np-animated-label--active',
+    );
   });
 
   it('when activeLabel decrease it switches class accordingly', () => {
     const { rerender } = render(<AnimatedLabel {...props} activeLabel={1} />);
-    expect(screen.getByText(props.steps[0].label)).not.toHaveClass('np-animated-label--active');
-    expect(screen.getByText(props.steps[1].label)).toHaveClass('np-animated-label--active');
-    expect(screen.getByText(props.steps[2].label)).not.toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[0].label).closest('div')).not.toHaveClass(
+      'np-animated-label--active',
+    );
+    expect(screen.getByText(props.steps[1].label).closest('div')).toHaveClass(
+      'np-animated-label--active',
+    );
+    expect(screen.getByText(props.steps[2].label).closest('div')).not.toHaveClass(
+      'np-animated-label--active',
+    );
 
     rerender(<AnimatedLabel {...props} activeLabel={0} />);
 
-    expect(screen.getByText(props.steps[0].label)).toHaveClass('np-animated-label--active');
-    expect(screen.getByText(props.steps[1].label)).not.toHaveClass('np-animated-label--active');
-    expect(screen.getByText(props.steps[2].label)).not.toHaveClass('np-animated-label--active');
+    expect(screen.getByText(props.steps[0].label).closest('div')).toHaveClass(
+      'np-animated-label--active',
+    );
+    expect(screen.getByText(props.steps[1].label).closest('div')).not.toHaveClass(
+      'np-animated-label--active',
+    );
+    expect(screen.getByText(props.steps[2].label).closest('div')).not.toHaveClass(
+      'np-animated-label--active',
+    );
   });
 
   it('shows all steps in menu when click on the label', async () => {

package/src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx

@@ -37,6 +37,11 @@ const AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) =>
                 aria-haspopup="menu"
                 aria-controls={overlayId}
                 aria-expanded={showSteps}
+                title={
+                  typeof steps[activeLabel]?.label === 'string'
+                    ? steps[activeLabel].label
+                    : undefined
+                }
                 className={clsx(
                   'np-animated-label',
                   'btn-unstyled',
@@ -53,10 +58,10 @@ const AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) =>
                       key={previousIndex}
                       aria-hidden={!isCurrentStep}
                       className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {
-                        'np-animated-label--active text-ellipsis': isCurrentStep,
+                        'np-animated-label--active': isCurrentStep,
                       })}
                     >
-                      {label} <ChevronDown />
+                      <span className="np-animated-label__text">{label}</span> <ChevronDown />
                     </div>
                   );
                 })}

package/src/FlowNavigation/_stories/FlowNavigation.test.story.tsx

@@ -127,3 +127,28 @@ export const CriticalBannerMobile: Story = {
   ),
   ...withVariantConfig(['mobile']),
 };
+
+const LongLabelGerman: Story = {
+  render: () => (
+    <FlowNavigation
+      {...baseProps}
+      steps={[
+        { label: 'Überweisungsbetrag', hoverLabel: '100 EUR', onClick: noop },
+        { label: 'Zahlungsempfänger', hoverLabel: 'Max Mustermann', onClick: noop },
+        {
+          label: 'Zahlungsempfängerbestätigung',
+          hoverLabel: 'IBAN DE89370400440532013000',
+          onClick: noop,
+        },
+        { label: 'Zusammenfassung', hoverLabel: 'Alles korrekt', onClick: noop },
+        { label: 'Bezahlen', hoverLabel: 'Jetzt bezahlen', onClick: noop },
+      ]}
+      activeStep={2}
+    />
+  ),
+};
+
+export const LongLabelGermanMobile: Story = {
+  ...LongLabelGerman,
+  ...withVariantConfig(['mobile'], LongLabelGerman),
+};

package/src/i18n/cs.json

@@ -35,7 +35,6 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Vybrat možnost...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Kód země",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Telefonní číslo",
-  "neptune.PhoneNumberInput.phoneNumberPrefix": "Předpona",
   "neptune.Select.searchPlaceholder": "Hledat...",
   "neptune.SelectInput.noResultsFound": "Nebyly nalezeny žádné výsledky",
   "neptune.StatusIcon.iconLabel.error": "Chyba:",

package/src/i18n/pt.json

@@ -35,7 +35,6 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Escolha uma opção...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Código do país",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Número de telefone",
-  "neptune.PhoneNumberInput.phoneNumberPrefix": "Prefixo",
   "neptune.Select.searchPlaceholder": "Buscar...",
   "neptune.SelectInput.noResultsFound": "Nenhum resultado encontrado",
   "neptune.StatusIcon.iconLabel.error": "Erro:",

package/src/i18n/ru.json

@@ -35,7 +35,6 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Выберите вариант...",
   "neptune.PhoneNumberInput.countryCodeLabel": "Код страны",
   "neptune.PhoneNumberInput.phoneNumberLabel": "Номер телефона",
-  "neptune.PhoneNumberInput.phoneNumberPrefix": "Код страны",
   "neptune.Select.searchPlaceholder": "Поиск...",
   "neptune.SelectInput.noResultsFound": "Ничего не найдено",
   "neptune.StatusIcon.iconLabel.error": "Ошибка:",

package/src/main.css

@@ -22987,6 +22987,12 @@ button.np-option {
   overflow: hidden;
   position: relative;
   padding-block-start: 1px;
+  max-inline-size: 60%;
+}
+.np-animated-label__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .np-animated-label > * {
   block-size: 0;