npm - @transferwise/components - Versions diffs - 46.148.0 → 46.149.0 - Mend

@transferwise/components 46.148.0 → 46.149.0

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.

Files changed (104) hide show

package/build/container/Container.js.map +1 -1
package/build/container/Container.mjs.map +1 -1
package/build/flowNavigation/FlowNavigation.js +56 -42
package/build/flowNavigation/FlowNavigation.js.map +1 -1
package/build/flowNavigation/FlowNavigation.mjs +56 -42
package/build/flowNavigation/FlowNavigation.mjs.map +1 -1
package/build/main.css +41 -20
package/build/overlayHeader/OverlayHeader.js +3 -0
package/build/overlayHeader/OverlayHeader.js.map +1 -1
package/build/overlayHeader/OverlayHeader.mjs +3 -0
package/build/overlayHeader/OverlayHeader.mjs.map +1 -1
package/build/prompt/CriticalBanner/CriticalBanner.js +4 -1
package/build/prompt/CriticalBanner/CriticalBanner.js.map +1 -1
package/build/prompt/CriticalBanner/CriticalBanner.mjs +4 -1
package/build/prompt/CriticalBanner/CriticalBanner.mjs.map +1 -1
package/build/prompt/PrimitivePrompt/PrimitivePrompt.js.map +1 -1
package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs.map +1 -1
package/build/styles/css/neptune.css +11 -11
package/build/styles/flowNavigation/FlowNavigation.css +16 -2
package/build/styles/less/legacy-variables.less +1 -1
package/build/styles/less/neptune-tokens.less +2 -2
package/build/styles/main.css +41 -20
package/build/styles/prompt/ActionPrompt/ActionPrompt.css +2 -1
package/build/styles/prompt/CriticalBanner/CriticalBanner.css +2 -1
package/build/styles/prompt/InfoPrompt/InfoPrompt.css +2 -1
package/build/styles/prompt/InlinePrompt/InlinePrompt.css +2 -1
package/build/styles/prompt/PrimitivePrompt/PrimitivePrompt.css +2 -2
package/build/styles/props/custom-media.css +1 -1
package/build/styles/props/neptune-tokens.css +1 -1
package/build/styles/sentimentSurface/SentimentSurface.css +1 -1
package/build/styles/styles/less/neptune.css +11 -11
package/build/types/container/Container.d.ts +2 -2
package/build/types/container/Container.d.ts.map +1 -1
package/build/types/flowNavigation/FlowNavigation.d.ts +15 -3
package/build/types/flowNavigation/FlowNavigation.d.ts.map +1 -1
package/build/types/iconButton/IconButton.d.ts +1 -1
package/build/types/overlayHeader/OverlayHeader.d.ts +6 -0
package/build/types/overlayHeader/OverlayHeader.d.ts.map +1 -1
package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts.map +1 -1
package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts +1 -1
package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts.map +1 -1
package/package.json +15 -15
package/src/body/Body.story.tsx +1 -5
package/src/calendar/Calendar.story.tsx +1 -4
package/src/checkbox/Checkbox.story.tsx +1 -4
package/src/chevron/Chevron.story.tsx +1 -1
package/src/container/Container.story.tsx +1 -4
package/src/container/Container.tsx +2 -2
package/src/dateInput/DateInput.story.tsx +1 -4
package/src/dateLookup/DateLookup.story.tsx +1 -4
package/src/decision/Decision.story.tsx +1 -4
package/src/definitionList/DefinitionList.story.tsx +1 -4
package/src/dimmer/Dimmer.story.tsx +1 -5
package/src/display/Display.story.tsx +1 -4
package/src/emphasis/Emphasis.story.tsx +1 -5
package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx +1 -4
package/src/field/Field.story.tsx +1 -4
package/src/flowNavigation/FlowNavigation.css +16 -2
package/src/flowNavigation/FlowNavigation.less +20 -4
package/src/flowNavigation/FlowNavigation.story.tsx +249 -0
package/src/flowNavigation/FlowNavigation.tsx +91 -58
package/src/header/Header.story.tsx +1 -4
package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx +1 -4
package/src/inputs/InputGroup.story.tsx +1 -4
package/src/inputs/SearchInput.story.tsx +1 -4
package/src/inputs/TextArea.story.tsx +1 -4
package/src/instructionsList/InstructionsList.story.tsx +1 -4
package/src/label/Label.story.tsx +1 -4
package/src/link/Link.story.tsx +1 -4
package/src/loader/Loader.story.tsx +1 -1
package/src/main.css +41 -20
package/src/markdown/Markdown.story.tsx +1 -5
package/src/money/Money.story.tsx +0 -1
package/src/moneyInput/MoneyInput.story.tsx +1 -4
package/src/overlayHeader/OverlayHeader.story.tsx +4 -0
package/src/overlayHeader/OverlayHeader.tsx +6 -0
package/src/phoneNumberInput/PhoneNumberInput.story.tsx +1 -4
package/src/promoCard/PromoCard.story.tsx +1 -4
package/src/promoCard/PromoCardGroup.story.tsx +1 -4
package/src/prompt/ActionPrompt/ActionPrompt.css +2 -1
package/src/prompt/ActionPrompt/ActionPrompt.less +2 -1
package/src/prompt/CriticalBanner/CriticalBanner.css +2 -1
package/src/prompt/CriticalBanner/CriticalBanner.less +2 -1
package/src/prompt/CriticalBanner/CriticalBanner.story.tsx +1 -1
package/src/prompt/CriticalBanner/CriticalBanner.tsx +6 -3
package/src/prompt/InfoPrompt/InfoPrompt.css +2 -1
package/src/prompt/InfoPrompt/InfoPrompt.less +2 -1
package/src/prompt/InlinePrompt/InlinePrompt.css +2 -1
package/src/prompt/InlinePrompt/InlinePrompt.less +2 -1
package/src/prompt/PrimitivePrompt/PrimitivePrompt.css +2 -2
package/src/prompt/PrimitivePrompt/PrimitivePrompt.less +1 -1
package/src/prompt/PrimitivePrompt/PrimitivePrompt.tsx +1 -1
package/src/radio/Radio.story.tsx +1 -4
package/src/radioGroup/RadioGroup.story.tsx +1 -4
package/src/segmentedControl/SegmentedControl.story.tsx +1 -4
package/src/sentimentSurface/SentimentSurface.css +1 -1
package/src/statusIcon/StatusIcon.story.tsx +1 -1
package/src/styles/less/neptune.css +11 -11
package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx +1 -4
package/src/title/Title.story.tsx +1 -5
package/src/typeahead/Typeahead.story.tsx +1 -4
package/src/upload/Upload.story.tsx +1 -4
package/src/uploadInput/UploadInput.story.tsx +1 -4
package/src/flowNavigation/FlowNavigation.test.js +0 -190

package/src/flowNavigation/FlowNavigation.story.tsx CHANGED Viewed

@@ -25,6 +25,13 @@ export type StoryArgs = FlowNavigationProps & CustomControls;
 type Story = StoryObj<StoryArgs>;
+/**
+ * FlowNavigation component for multi-step flows with progress tracking.
+ *
+ * **Border Behavior:**
+ * - Non-composable (default): Border respects `done` prop when `showBottomBorder=true`.
+ * - Composable: Border controlled only by `showBottomBorder`, ignoring the `done` property.
+ **/
 const meta: Meta<StoryArgs> = {
   component: FlowNavigation,
   title: 'Navigation/FlowNavigation',
@@ -32,6 +39,7 @@ const meta: Meta<StoryArgs> = {
     showCloseButton: { control: 'boolean', defaultValue: true },
     showMobileBackButton: { control: 'boolean', defaultValue: true },
     done: { control: 'boolean', defaultValue: false },
+    showBottomBorder: { control: 'boolean', defaultValue: true },
     avatarURL: { control: 'text', defaultValue: '../tapestry-01.png' },
     profileType: {
       control: 'radio',
@@ -372,3 +380,244 @@ export const WithOverlayHeaderComparison: Story = {
     );
   },
 };
+export const ComposableVariant: Story = {
+  args: {
+    profileType: ProfileType.PERSONAL,
+    showCloseButton: true,
+    showMobileBackButton: true,
+    done: false,
+    avatarURL: '../tapestry-01.png',
+  },
+  parameters: {
+    padding: '0',
+    chromatic: {
+      viewports,
+    },
+  },
+  render: (args) => {
+    const [activeStep, setActiveStep] = useState(2);
+    const steps = [
+      {
+        label: 'Recipient',
+        onClick: () => setActiveStep(0),
+      },
+      {
+        label: 'Amount',
+        hoverLabel: (
+          <>
+            You send 100 GBP <br />
+            You get 99.39 GBP{' '}
+          </>
+        ),
+        ...(activeStep > 1 && { onClick: () => setActiveStep(1) }),
+      },
+      {
+        label: 'Review',
+        ...(activeStep > 2 && { onClick: () => setActiveStep(2) }),
+      },
+      {
+        label: 'Pay',
+        ...(activeStep > 3 && { onClick: () => setActiveStep(3) }),
+      },
+    ];
+    return (
+      <>
+        <FlowNavigation
+          composable
+          avatar={<AvatarView profileType={args.profileType} />}
+          logo={<Logo />}
+          activeStep={activeStep}
+          steps={steps}
+          onClose={args.showCloseButton ? () => alert('close') : undefined}
+          onGoBack={
+            args.showMobileBackButton
+              ? () => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)
+              : undefined
+          }
+        />
+        <Container size="narrow">
+          <Body className="m-a-3">
+            <Display type={Typography.DISPLAY_SMALL}>{steps[activeStep].label} Step</Display>
+            <br />
+            {lorem10}
+          </Body>
+        </Container>
+        <Sticky>
+          <Container
+            size="narrow"
+            className="d-flex justify-content-center align-items-center p-y-3"
+          >
+            <Button
+              v2
+              disabled={activeStep === 3}
+              block
+              onClick={() => setActiveStep(activeStep + 1)}
+            >
+              Continue
+            </Button>
+          </Container>
+        </Sticky>
+      </>
+    );
+  },
+};
+export const WithoutStepper: Story = {
+  args: {
+    profileType: ProfileType.PERSONAL,
+    showCloseButton: true,
+    avatarURL: '../tapestry-01.png',
+  },
+  parameters: {
+    chromatic: {
+      viewports,
+    },
+  },
+  render: (args) => {
+    const [closed, setClosed] = useState(false);
+    if (closed) return <Body className="text-xs-center m-a-3">FlowNavigation closed</Body>;
+    return (
+      <FlowNavigation
+        avatar={<AvatarView profileType={args.profileType} />}
+        logo={<Logo />}
+        onClose={args.showCloseButton ? () => setClosed(true) : undefined}
+      />
+    );
+  },
+};
+export const BorderControl: Story = {
+  args: {
+    profileType: ProfileType.PERSONAL,
+    avatarURL: '../tapestry-01.png',
+  },
+  parameters: {
+    chromatic: {
+      viewports,
+    },
+  },
+  render: (args) => {
+    const [activeStep, setActiveStep] = useState(2);
+    const steps = [
+      {
+        label: 'Recipient',
+        onClick: () => setActiveStep(0),
+      },
+      {
+        label: 'Amount',
+        hoverLabel: (
+          <>
+            You send 100 GBP <br />
+            You get 99.39 GBP{' '}
+          </>
+        ),
+        ...(activeStep > 1 && { onClick: () => setActiveStep(1) }),
+      },
+      {
+        label: 'Review',
+        ...(activeStep > 2 && { onClick: () => setActiveStep(2) }),
+      },
+      {
+        label: 'Pay',
+        ...(activeStep > 3 && { onClick: () => setActiveStep(3) }),
+      },
+    ];
+    return (
+      <>
+        <Body className="text-xs-center m-b-3">
+          <Display type={Typography.DISPLAY_SMALL}>Non-composable Variant</Display>
+          <br />
+          Border controlled by <code>done</code> property only
+        </Body>
+        {/* Non-composable: done=false - SHOWS BORDER */}
+        <FlowNavigation
+          avatar={<AvatarView profileType={args.profileType} />}
+          logo={<Logo />}
+          activeStep={activeStep}
+          done={false}
+          steps={steps}
+          onClose={() => {}}
+          onGoBack={() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)}
+        />
+        <Body className="text-xs-center m-b-3">
+          <code>done=false</code> → ✅ Border shown
+        </Body>
+        {/* Non-composable: done=true - HIDES BORDER */}
+        <FlowNavigation
+          avatar={<AvatarView profileType={args.profileType} />}
+          logo={<Logo />}
+          activeStep={activeStep}
+          done
+          steps={steps}
+          onClose={() => {}}
+          onGoBack={() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)}
+        />
+        <Body className="text-xs-center m-b-5">
+          <code>done=true</code> → ❌ Border hidden
+        </Body>
+        <Body className="text-xs-center m-b-3 m-t-5">
+          <Display type={Typography.DISPLAY_SMALL}>Composable Variant</Display>
+          <br />
+          Border ignores <code>done</code>, follows <code>showBottomBorder</code> only
+        </Body>
+        {/* Composable: showBottomBorder=true, done=false - SHOWS BORDER */}
+        <FlowNavigation
+          composable
+          avatar={<AvatarView profileType={args.profileType} />}
+          logo={<Logo />}
+          activeStep={activeStep}
+          done={false}
+          steps={steps}
+          showBottomBorder
+          onClose={() => {}}
+          onGoBack={() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)}
+        />
+        <Body className="text-xs-center m-b-3">
+          <code>showBottomBorder=true, done=false</code> → ✅ Border shown
+        </Body>
+        {/* Composable: showBottomBorder=true, done=true - SHOWS BORDER */}
+        <FlowNavigation
+          composable
+          avatar={<AvatarView profileType={args.profileType} />}
+          logo={<Logo />}
+          activeStep={activeStep}
+          done
+          steps={steps}
+          showBottomBorder
+          onClose={() => {}}
+          onGoBack={() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)}
+        />
+        <Body className="text-xs-center m-b-3">
+          <code>showBottomBorder=true, done=true</code> → ✅ Border shown (ignores done)
+        </Body>
+        {/* Composable: showBottomBorder=false, done=false - HIDES BORDER */}
+        <FlowNavigation
+          composable
+          avatar={<AvatarView profileType={args.profileType} />}
+          logo={<Logo />}
+          activeStep={activeStep}
+          done={false}
+          steps={steps}
+          showBottomBorder={false}
+          onClose={() => {}}
+          onGoBack={() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)}
+        />
+        <Body className="text-xs-center m-b-3">
+          <code>showBottomBorder=false, done=false</code> → ❌ Border hidden
+        </Body>
+      </>
+    );
+  },
+};

package/src/flowNavigation/FlowNavigation.tsx CHANGED Viewed

@@ -7,6 +7,7 @@ import { CloseButton } from '../common/closeButton';
 import FlowHeader from '../common/flowHeader/FlowHeader';
 import Logo from '../logo';
 import Stepper, { type Step } from '../stepper/Stepper';
+import Container from '../container';
 import { useScreenSize } from '../common/hooks/useScreenSize';
 import messages from './FlowNavigation.messages';
@@ -14,6 +15,8 @@ import AnimatedLabel from './animatedLabel';
 import IconButton from '../iconButton';
 import { ArrowLeft } from '@transferwise/icons';
+const defaultLogo = <Logo />;
 export interface FlowNavigationProps {
   /** @default 0 */
   activeStep?: number;
@@ -26,86 +29,116 @@ export interface FlowNavigationProps {
   onClose?: () => void;
   /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */
   onGoBack?: () => void;
-  /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */
-  steps: readonly Step[];
+  /** Steps to be displayed in stepper. If not provided, the stepper won't show. */
+  steps?: readonly Step[];
+  /**
+   * When true, renders in composable mode using a fluid Container.
+   * This allows the FlowNavigation to be used within custom layout containers.
+   * @default false
+   */
+  composable?: boolean;
+  /**
+   * Controls whether the bottom border is displayed.
+   * Only applies to the composable variant. Non-composable variant always uses the done state.
+   * @default true
+   */
+  showBottomBorder?: boolean;
 }
 const FlowNavigation = ({
   activeStep = 0,
   avatar,
-  logo = <Logo />,
+  logo = defaultLogo,
   done = false,
   onClose,
   onGoBack,
   steps,
+  composable = false,
+  showBottomBorder = true,
 }: FlowNavigationProps) => {
   const intl = useIntl();
-  const closeButton = onClose != null && <CloseButton size="lg" onClick={onClose} />;
   const screenSm = useScreenSize(Breakpoint.SMALL);
   const screenLg = useScreenSize(Breakpoint.LARGE);
-  const newAvatar = done ? null : avatar;
+  const closeButton = onClose != null && <CloseButton size="lg" onClick={onClose} />;
+  const newAvatar = done ? null : avatar;
   const displayGoBack = onGoBack != null && activeStep > 0;
+  const flowHeaderContent = (
+    <FlowHeader
+      className={clsx(
+        'np-flow-navigation__content',
+        !composable && 'p-x-3',
+        screenSm == null
+          ? 'np-flow-navigation--hidden'
+          : {
+              'np-flow-navigation--xs-max': !screenSm,
+              // Size switches on parent container which may or may not have the same size as the window.
+              'np-flow-navigation--sm': screenSm,
+              'np-flow-navigation--lg': screenLg,
+            },
+      )}
+      leftContent={
+        <>
+          {!screenSm && displayGoBack ? (
+            <IconButton
+              size={40}
+              priority="tertiary"
+              type="default"
+              aria-label={intl.formatMessage(messages.back)}
+              onClick={onGoBack}
+            >
+              <ArrowLeft />
+            </IconButton>
+          ) : (
+            <div className="np-flow-header__left">{logo}</div>
+          )}
+          {!screenSm && !done && steps && steps.length > 0 && (
+            <AnimatedLabel className="m-x-1" steps={steps} activeLabel={activeStep} />
+          )}
+        </>
+      }
+      rightContent={
+        <div className="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg">
+          {newAvatar}
+          {newAvatar && closeButton && <span className="m-x-1" />}
+          {closeButton}
+        </div>
+      }
+      bottomContent={
+        !done && steps && steps.length > 0 ? (
+          <Stepper
+            activeStep={activeStep}
+            steps={steps}
+            className={clsx('np-flow-navigation__stepper')}
+          />
+        ) : null
+      }
+      layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}
+    />
+  );
+  if (composable) {
+    return (
+      <Container
+        size="fluid"
+        className={clsx('np-flow-navigation np-flow-navigation--composable', {
+          'np-flow-navigation--border-bottom': showBottomBorder,
+        })}
+      >
+        {flowHeaderContent}
+      </Container>
+    );
+  }
   return (
     <div
-      className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {
+      className={clsx('np-flow-navigation p-y-3', {
         'np-flow-navigation--border-bottom': !done,
       })}
     >
-      <FlowHeader
-        className={clsx(
-          'np-flow-navigation__content p-x-3',
-          screenSm == null
-            ? 'np-flow-navigation--hidden'
-            : {
-                'np-flow-navigation--xs-max': !screenSm,
-                // Size switches on parent container which may or may not have the same size as the window.
-                'np-flow-navigation--sm': screenSm,
-                'np-flow-navigation--lg': screenLg,
-              },
-        )}
-        leftContent={
-          <>
-            {!screenSm && displayGoBack ? (
-              <IconButton
-                size={40}
-                priority="tertiary"
-                type="default"
-                aria-label={intl.formatMessage(messages.back)}
-                onClick={onGoBack}
-              >
-                <ArrowLeft />
-              </IconButton>
-            ) : (
-              <div className="np-flow-header__left">{logo}</div>
-            )}
-            {!screenSm && !done && (
-              <AnimatedLabel className="m-x-1" steps={steps} activeLabel={activeStep} />
-            )}
-          </>
-        }
-        rightContent={
-          <div className="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg">
-            {newAvatar}
-            {newAvatar && closeButton && <span className="m-x-1" />}
-            {closeButton}
-          </div>
-        }
-        bottomContent={
-          !done && steps.length > 0 ? (
-            <Stepper
-              activeStep={activeStep}
-              steps={steps}
-              className={clsx('np-flow-navigation__stepper')}
-            />
-          ) : null
-        }
-        layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}
-      />
+      {flowHeaderContent}
     </div>
   );
 };

package/src/header/Header.story.tsx CHANGED Viewed

@@ -1,9 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import Header, { HeaderProps } from './Header';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 const withContainer = (Story: any) => (
   <div style={{ display: 'flex', justifyContent: 'center' }}>

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx CHANGED Viewed

@@ -1,9 +1,6 @@
 import { userEvent, within, fn } from 'storybook/test';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import InputWithDisplayFormat, { InputWithDisplayFormatProps } from '.';
 import { Field, FieldProps } from '../field/Field';
 import { Meta, type StoryObj } from '@storybook/react-webpack5';

package/src/inputs/InputGroup.story.tsx CHANGED Viewed

@@ -2,10 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Search } from '@transferwise/icons';
 import { useRef, useState } from 'react';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import { Button } from '..';
 import { Field } from '../field/Field';

package/src/inputs/SearchInput.story.tsx CHANGED Viewed

@@ -1,10 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { useState } from 'react';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import { Size } from '../common';
 import { Field } from '../field/Field';

package/src/inputs/TextArea.story.tsx CHANGED Viewed

@@ -1,10 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import { Field } from '../field/Field';
 import { Sentiment } from '../common';
 import { TextArea } from './TextArea';

package/src/instructionsList/InstructionsList.story.tsx CHANGED Viewed

@@ -4,10 +4,7 @@ import { fn } from 'storybook/test';
 import Link from '../link';
 import InstructionsList, { InstructionsListProps } from './InstructionsList';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 export default {
   component: InstructionsList,

package/src/label/Label.story.tsx CHANGED Viewed

@@ -1,7 +1,4 @@
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 import Info from '../info';
 import { Label } from './Label';

package/src/link/Link.story.tsx CHANGED Viewed

@@ -4,10 +4,7 @@ import Title from '../title/Title';
 import SentimentSurface from '../sentimentSurface';
 import Link from '.';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
 export default {
   component: Link,

package/src/loader/Loader.story.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { createSandboxStory }  from '../../.storybook/components/sandbox/SandboxEditor';
+import { createSandboxStory } from '../../.storybook/components/sandbox/SandboxEditor';
 import Loader from './Loader';