@transferwise/components 0.0.0-experimental-8b87c94 → 0.0.0-experimental-db49ba8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/FlowNavigation/FlowNavigation.js +2 -1
- package/build/FlowNavigation/FlowNavigation.js.map +1 -1
- package/build/FlowNavigation/FlowNavigation.mjs +2 -1
- package/build/FlowNavigation/FlowNavigation.mjs.map +1 -1
- package/build/main.css +6 -0
- package/build/styles/FlowNavigation/FlowNavigation.css +6 -0
- package/build/styles/main.css +6 -0
- package/package.json +4 -4
- package/src/FlowNavigation/FlowNavigation.css +6 -0
- package/src/FlowNavigation/FlowNavigation.less +7 -0
- package/src/FlowNavigation/FlowNavigation.tsx +2 -2
- package/src/main.css +6 -0
|
@@ -78,7 +78,8 @@ const FlowNavigation = ({
|
|
|
78
78
|
'np-flow-navigation--sm': screenSm,
|
|
79
79
|
'np-flow-navigation--lg': screenLg
|
|
80
80
|
}),
|
|
81
|
-
leftContent: /*#__PURE__*/jsxRuntime.jsxs(
|
|
81
|
+
leftContent: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
82
|
+
className: "np-flow-navigation__left",
|
|
82
83
|
children: [!screenSm && displayGoBack ? /*#__PURE__*/jsxRuntime.jsx(IconButton.default, {
|
|
83
84
|
size: 40,
|
|
84
85
|
priority: "tertiary",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlowNavigation.js","sources":["../../src/FlowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Layout } from '../common';\nimport { CloseButton } from '../common/CloseButton';\nimport FlowHeader from '../common/FlowHeader/FlowHeader';\nimport Logo from '../Logo';\nimport Stepper, { type Step } from '../Stepper/Stepper';\nimport Container from '../Container';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './AnimatedLabel';\nimport IconButton from '../IconButton';\nimport { ArrowLeft } from '@transferwise/icons';\nimport { CriticalBanner, CriticalBannerProps } from '../Prompt';\n\nconst defaultLogo = <Logo />;\n\nexport interface FlowNavigationProps {\n /** @default 0 */\n activeStep?: number;\n avatar?: React.ReactNode;\n /** @default <Logo /> */\n logo?: React.ReactNode;\n /** @default false */\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show */\n onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;\n /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n onGoBack?: () => void;\n /** Steps to be displayed in stepper. If not provided, the stepper won't show. */\n steps?: readonly Step[];\n /** Optional critical banner data, to be displayed above the flow navigation. */\n banner?: CriticalBannerProps | null;\n /**\n * Controls whether the bottom border is displayed.\n * @default true\n */\n showBottomBorder?: boolean;\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = defaultLogo,\n done = false,\n onClose,\n onGoBack,\n steps,\n banner = null,\n showBottomBorder = true,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const hasSteps = steps && steps.length > 0;\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n const newAvatar = done ? null : avatar;\n\n const flowHeaderContent = (\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n
|
|
1
|
+
{"version":3,"file":"FlowNavigation.js","sources":["../../src/FlowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Layout } from '../common';\nimport { CloseButton } from '../common/CloseButton';\nimport FlowHeader from '../common/FlowHeader/FlowHeader';\nimport Logo from '../Logo';\nimport Stepper, { type Step } from '../Stepper/Stepper';\nimport Container from '../Container';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './AnimatedLabel';\nimport IconButton from '../IconButton';\nimport { ArrowLeft } from '@transferwise/icons';\nimport { CriticalBanner, CriticalBannerProps } from '../Prompt';\n\nconst defaultLogo = <Logo />;\n\nexport interface FlowNavigationProps {\n /** @default 0 */\n activeStep?: number;\n avatar?: React.ReactNode;\n /** @default <Logo /> */\n logo?: React.ReactNode;\n /** @default false */\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show */\n onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;\n /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n onGoBack?: () => void;\n /** Steps to be displayed in stepper. If not provided, the stepper won't show. */\n steps?: readonly Step[];\n /** Optional critical banner data, to be displayed above the flow navigation. */\n banner?: CriticalBannerProps | null;\n /**\n * Controls whether the bottom border is displayed.\n * @default true\n */\n showBottomBorder?: boolean;\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = defaultLogo,\n done = false,\n onClose,\n onGoBack,\n steps,\n banner = null,\n showBottomBorder = true,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const hasSteps = steps && steps.length > 0;\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n const newAvatar = done ? null : avatar;\n\n const flowHeaderContent = (\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n <div className=\"np-flow-navigation__left\">\n {!screenSm && displayGoBack ? (\n <IconButton\n size={40}\n priority=\"tertiary\"\n type=\"default\"\n aria-label={intl.formatMessage(messages.back)}\n onClick={onGoBack}\n >\n <ArrowLeft />\n </IconButton>\n ) : (\n <div className=\"np-flow-header__left\">{logo}</div>\n )}\n {!screenSm && !done && hasSteps && (\n <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n )}\n </div>\n }\n rightContent={\n <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n {newAvatar}\n {newAvatar && closeButton && <span className=\"m-x-1\" />}\n {closeButton}\n </div>\n }\n bottomContent={\n !done && hasSteps ? (\n <Stepper\n activeStep={activeStep}\n steps={steps}\n className={clsx('np-flow-navigation__stepper')}\n />\n ) : null\n }\n layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n />\n );\n\n return (\n <>\n {banner && <CriticalBanner {...banner} />}\n <Container\n size=\"fluid\"\n className={clsx('np-flow-navigation', {\n 'np-flow-navigation--border-bottom': showBottomBorder,\n 'np-flow-navigation--no-steps': !hasSteps || done,\n })}\n >\n {flowHeaderContent}\n </Container>\n </>\n );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","banner","showBottomBorder","intl","useIntl","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","hasSteps","length","displayGoBack","closeButton","CloseButton","size","onClick","newAvatar","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","_Fragment","CriticalBanner","Container"],"mappings":"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"}
|
|
@@ -74,7 +74,8 @@ const FlowNavigation = ({
|
|
|
74
74
|
'np-flow-navigation--sm': screenSm,
|
|
75
75
|
'np-flow-navigation--lg': screenLg
|
|
76
76
|
}),
|
|
77
|
-
leftContent: /*#__PURE__*/jsxs(
|
|
77
|
+
leftContent: /*#__PURE__*/jsxs("div", {
|
|
78
|
+
className: "np-flow-navigation__left",
|
|
78
79
|
children: [!screenSm && displayGoBack ? /*#__PURE__*/jsx(IconButton, {
|
|
79
80
|
size: 40,
|
|
80
81
|
priority: "tertiary",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlowNavigation.mjs","sources":["../../src/FlowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Layout } from '../common';\nimport { CloseButton } from '../common/CloseButton';\nimport FlowHeader from '../common/FlowHeader/FlowHeader';\nimport Logo from '../Logo';\nimport Stepper, { type Step } from '../Stepper/Stepper';\nimport Container from '../Container';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './AnimatedLabel';\nimport IconButton from '../IconButton';\nimport { ArrowLeft } from '@transferwise/icons';\nimport { CriticalBanner, CriticalBannerProps } from '../Prompt';\n\nconst defaultLogo = <Logo />;\n\nexport interface FlowNavigationProps {\n /** @default 0 */\n activeStep?: number;\n avatar?: React.ReactNode;\n /** @default <Logo /> */\n logo?: React.ReactNode;\n /** @default false */\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show */\n onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;\n /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n onGoBack?: () => void;\n /** Steps to be displayed in stepper. If not provided, the stepper won't show. */\n steps?: readonly Step[];\n /** Optional critical banner data, to be displayed above the flow navigation. */\n banner?: CriticalBannerProps | null;\n /**\n * Controls whether the bottom border is displayed.\n * @default true\n */\n showBottomBorder?: boolean;\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = defaultLogo,\n done = false,\n onClose,\n onGoBack,\n steps,\n banner = null,\n showBottomBorder = true,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const hasSteps = steps && steps.length > 0;\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n const newAvatar = done ? null : avatar;\n\n const flowHeaderContent = (\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n
|
|
1
|
+
{"version":3,"file":"FlowNavigation.mjs","sources":["../../src/FlowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { Layout } from '../common';\nimport { CloseButton } from '../common/CloseButton';\nimport FlowHeader from '../common/FlowHeader/FlowHeader';\nimport Logo from '../Logo';\nimport Stepper, { type Step } from '../Stepper/Stepper';\nimport Container from '../Container';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './AnimatedLabel';\nimport IconButton from '../IconButton';\nimport { ArrowLeft } from '@transferwise/icons';\nimport { CriticalBanner, CriticalBannerProps } from '../Prompt';\n\nconst defaultLogo = <Logo />;\n\nexport interface FlowNavigationProps {\n /** @default 0 */\n activeStep?: number;\n avatar?: React.ReactNode;\n /** @default <Logo /> */\n logo?: React.ReactNode;\n /** @default false */\n done?: boolean;\n /** Called when the close button is clicked. If not provided the close button won't show */\n onClose?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;\n /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n onGoBack?: () => void;\n /** Steps to be displayed in stepper. If not provided, the stepper won't show. */\n steps?: readonly Step[];\n /** Optional critical banner data, to be displayed above the flow navigation. */\n banner?: CriticalBannerProps | null;\n /**\n * Controls whether the bottom border is displayed.\n * @default true\n */\n showBottomBorder?: boolean;\n}\n\nconst FlowNavigation = ({\n activeStep = 0,\n avatar,\n logo = defaultLogo,\n done = false,\n onClose,\n onGoBack,\n steps,\n banner = null,\n showBottomBorder = true,\n}: FlowNavigationProps) => {\n const intl = useIntl();\n const screenSm = useScreenSize(Breakpoint.SMALL);\n const screenLg = useScreenSize(Breakpoint.LARGE);\n\n const hasSteps = steps && steps.length > 0;\n const displayGoBack = onGoBack != null && activeStep > 0;\n\n const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n const newAvatar = done ? null : avatar;\n\n const flowHeaderContent = (\n <FlowHeader\n className={clsx(\n 'np-flow-navigation__content',\n screenSm == null\n ? 'np-flow-navigation--hidden'\n : {\n 'np-flow-navigation--xs-max': !screenSm,\n // Size switches on parent container which may or may not have the same size as the window.\n 'np-flow-navigation--sm': screenSm,\n 'np-flow-navigation--lg': screenLg,\n },\n )}\n leftContent={\n <div className=\"np-flow-navigation__left\">\n {!screenSm && displayGoBack ? (\n <IconButton\n size={40}\n priority=\"tertiary\"\n type=\"default\"\n aria-label={intl.formatMessage(messages.back)}\n onClick={onGoBack}\n >\n <ArrowLeft />\n </IconButton>\n ) : (\n <div className=\"np-flow-header__left\">{logo}</div>\n )}\n {!screenSm && !done && hasSteps && (\n <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n )}\n </div>\n }\n rightContent={\n <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n {newAvatar}\n {newAvatar && closeButton && <span className=\"m-x-1\" />}\n {closeButton}\n </div>\n }\n bottomContent={\n !done && hasSteps ? (\n <Stepper\n activeStep={activeStep}\n steps={steps}\n className={clsx('np-flow-navigation__stepper')}\n />\n ) : null\n }\n layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n />\n );\n\n return (\n <>\n {banner && <CriticalBanner {...banner} />}\n <Container\n size=\"fluid\"\n className={clsx('np-flow-navigation', {\n 'np-flow-navigation--border-bottom': showBottomBorder,\n 'np-flow-navigation--no-steps': !hasSteps || done,\n })}\n >\n {flowHeaderContent}\n </Container>\n </>\n );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","banner","showBottomBorder","intl","useIntl","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","hasSteps","length","displayGoBack","closeButton","CloseButton","size","onClick","newAvatar","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","_Fragment","CriticalBanner","Container"],"mappings":"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"}
|
package/build/main.css
CHANGED
|
@@ -23042,6 +23042,12 @@ button.np-option {
|
|
|
23042
23042
|
border-block-end: 1px solid #0000001a;
|
|
23043
23043
|
border-block-end: 1px solid var(--color-border-neutral);
|
|
23044
23044
|
}
|
|
23045
|
+
.np-flow-navigation__left {
|
|
23046
|
+
display: flex;
|
|
23047
|
+
align-items: center;
|
|
23048
|
+
flex: 1;
|
|
23049
|
+
min-inline-size: 0;
|
|
23050
|
+
}
|
|
23045
23051
|
.np-flow-navigation__content {
|
|
23046
23052
|
inline-size: 100%;
|
|
23047
23053
|
min-inline-size: 320px;
|
|
@@ -25,6 +25,12 @@
|
|
|
25
25
|
border-block-end: 1px solid #0000001a;
|
|
26
26
|
border-block-end: 1px solid var(--color-border-neutral);
|
|
27
27
|
}
|
|
28
|
+
.np-flow-navigation__left {
|
|
29
|
+
display: flex;
|
|
30
|
+
align-items: center;
|
|
31
|
+
flex: 1;
|
|
32
|
+
min-inline-size: 0;
|
|
33
|
+
}
|
|
28
34
|
.np-flow-navigation__content {
|
|
29
35
|
inline-size: 100%;
|
|
30
36
|
min-inline-size: 320px;
|
package/build/styles/main.css
CHANGED
|
@@ -23042,6 +23042,12 @@ button.np-option {
|
|
|
23042
23042
|
border-block-end: 1px solid #0000001a;
|
|
23043
23043
|
border-block-end: 1px solid var(--color-border-neutral);
|
|
23044
23044
|
}
|
|
23045
|
+
.np-flow-navigation__left {
|
|
23046
|
+
display: flex;
|
|
23047
|
+
align-items: center;
|
|
23048
|
+
flex: 1;
|
|
23049
|
+
min-inline-size: 0;
|
|
23050
|
+
}
|
|
23045
23051
|
.np-flow-navigation__content {
|
|
23046
23052
|
inline-size: 100%;
|
|
23047
23053
|
min-inline-size: 320px;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-db49ba8",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"@babel/preset-env": "^7.29.7",
|
|
45
45
|
"@babel/preset-react": "^7.29.7",
|
|
46
46
|
"@babel/preset-typescript": "^7.29.7",
|
|
47
|
-
"@formatjs/cli": "^6.16.
|
|
47
|
+
"@formatjs/cli": "^6.16.31",
|
|
48
48
|
"@rollup/plugin-babel": "^7.1.0",
|
|
49
49
|
"@rollup/plugin-json": "^6.1.0",
|
|
50
50
|
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"@storybook/addon-mcp": "^0.7.0",
|
|
56
56
|
"@storybook/addon-webpack5-compiler-babel": "^4.0.1",
|
|
57
57
|
"@storybook/react-webpack5": "^10.6.0",
|
|
58
|
-
"@testing-library/dom": "^10.4.
|
|
58
|
+
"@testing-library/dom": "^10.4.2",
|
|
59
59
|
"@testing-library/jest-dom": "^6.9.1",
|
|
60
60
|
"@testing-library/react": "^16.3.3",
|
|
61
61
|
"@testing-library/user-event": "^14.6.7",
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
"lodash.times": "^4.3.2",
|
|
90
90
|
"react-intl": "^7.1.14",
|
|
91
91
|
"react-live": "^4.1.8",
|
|
92
|
-
"rollup": "^4.63.
|
|
92
|
+
"rollup": "^4.63.4",
|
|
93
93
|
"rollup-preserve-directives": "^1.1.3",
|
|
94
94
|
"storybook": "^10.6.0",
|
|
95
95
|
"storybook-addon-tag-badges": "^3.1.0",
|
|
@@ -25,6 +25,12 @@
|
|
|
25
25
|
border-block-end: 1px solid #0000001a;
|
|
26
26
|
border-block-end: 1px solid var(--color-border-neutral);
|
|
27
27
|
}
|
|
28
|
+
.np-flow-navigation__left {
|
|
29
|
+
display: flex;
|
|
30
|
+
align-items: center;
|
|
31
|
+
flex: 1;
|
|
32
|
+
min-inline-size: 0;
|
|
33
|
+
}
|
|
28
34
|
.np-flow-navigation__content {
|
|
29
35
|
inline-size: 100%;
|
|
30
36
|
min-inline-size: 320px;
|
|
@@ -76,7 +76,7 @@ const FlowNavigation = ({
|
|
|
76
76
|
},
|
|
77
77
|
)}
|
|
78
78
|
leftContent={
|
|
79
|
-
|
|
79
|
+
<div className="np-flow-navigation__left">
|
|
80
80
|
{!screenSm && displayGoBack ? (
|
|
81
81
|
<IconButton
|
|
82
82
|
size={40}
|
|
@@ -93,7 +93,7 @@ const FlowNavigation = ({
|
|
|
93
93
|
{!screenSm && !done && hasSteps && (
|
|
94
94
|
<AnimatedLabel className="m-x-1" steps={steps} activeLabel={activeStep} />
|
|
95
95
|
)}
|
|
96
|
-
|
|
96
|
+
</div>
|
|
97
97
|
}
|
|
98
98
|
rightContent={
|
|
99
99
|
<div className="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg">
|
package/src/main.css
CHANGED
|
@@ -23042,6 +23042,12 @@ button.np-option {
|
|
|
23042
23042
|
border-block-end: 1px solid #0000001a;
|
|
23043
23043
|
border-block-end: 1px solid var(--color-border-neutral);
|
|
23044
23044
|
}
|
|
23045
|
+
.np-flow-navigation__left {
|
|
23046
|
+
display: flex;
|
|
23047
|
+
align-items: center;
|
|
23048
|
+
flex: 1;
|
|
23049
|
+
min-inline-size: 0;
|
|
23050
|
+
}
|
|
23045
23051
|
.np-flow-navigation__content {
|
|
23046
23052
|
inline-size: 100%;
|
|
23047
23053
|
min-inline-size: 320px;
|