@simplybusiness/mobius 3.8.0 → 3.9.0

package/dist/mobius.d.ts

@@ -6,6 +6,7 @@ import type { AriaCheckboxGroupProps } from '@react-types/checkbox';
 import { AriaCheckboxProps } from '@react-types/checkbox';
 import { AriaDatePickerProps } from '@react-aria/datepicker';
 import { AriaFocusRingProps } from '@react-aria/focus';
+import { AriaLabelingProps } from '@react-types/shared';
 import { AriaLinkProps } from '@react-types/link';
 import { AriaNumberFieldProps } from '@react-aria/numberfield';
 import type { AriaProgressBarProps } from '@react-types/progress';
@@ -114,6 +115,8 @@ export declare interface BaseIconProps extends RefAttributes<SVGSVGElement> {
     className?: string;
     /** Spin the icon */
     spin?: boolean;
+    fontSize?: string;
+    color?: string;
 }
 
 export declare const Box: ForwardedRefComponent<BoxProps, BoxElementType>;
@@ -209,7 +212,7 @@ export declare interface CheckboxGroupProps extends DOMProps, CheckboxGroupProps
 export declare type CheckboxGroupRef = Ref<CheckboxGroupElementType>;
 
 export declare interface CheckboxProps extends DOMProps, AriaCheckboxProps, RefAttributes<CheckboxElementType> {
-    label?: string;
+    label?: string | JSX.Element;
     className?: string;
     errorMessage?: string;
 }
@@ -473,6 +476,8 @@ export declare interface GridItemProps extends RefAttributes<GridItemElementType
     alignSelf?: "center" | "start" | "end" | "stretch";
     /** Aligns the grid item along the inline (row) axis */
     justifySelf?: "center" | "start" | "end" | "stretch";
+    /** Custom class name for setting specific CSS */
+    className?: string;
 }
 
 export declare interface GridProps extends RefAttributes<GridElementType>, DOMProps {
@@ -493,6 +498,8 @@ export declare interface GridProps extends RefAttributes<GridElementType>, DOMPr
     alignItems?: "center" | "start" | "end" | "stretch" | "baseline";
     /** Aligns grid items along the inline (row) axis  */
     justifyItems?: "start" | "end" | "center" | "stretch";
+    /** Custom class name for setting specific CSS */
+    className?: string;
 }
 
 declare const Header: FC<HeaderProps>;
@@ -675,6 +682,8 @@ export declare const LoadingIndicator: ForwardedRefComponent<LoadingIndicatorPro
 export declare interface LoadingIndicatorProps extends RefAttributes<SVGSVGElement> {
     className?: string;
     icon?: IconName;
+    fontSize?: string;
+    color?: string;
 }
 
 export declare type LoadingIndicatorRef = Ref<SVGSVGElement>;
@@ -947,7 +956,7 @@ export declare type SizeType = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 
 export declare function Slider(props: SliderProps): JSX.Element;
 
-export declare interface SliderProps extends SliderProps_2<number>, DOMProps {
+export declare interface SliderProps extends SliderProps_2<number>, DOMProps, AriaLabelingProps {
     variant?: "primary" | "secondary";
     className?: string;
     onChange?: (value: number | undefined) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -123,7 +123,7 @@
     "@react-stately/select": "^3.3.2",
     "@react-stately/slider": "^3.2.2",
     "@react-stately/toggle": "^3.4.2",
-    "@simplybusiness/icons": "^2.9.0",
+    "@simplybusiness/icons": "^3.8.0",
     "clsx": "^1.2.1",
     "deepmerge": "^4.2.2",
     "lodash.debounce": "^4.0.8",

package/src/components/Accordion/{Accordion.story.mdx → Accordion.mdx}

@@ -1,12 +1,9 @@
-import { Meta, ArgsTable, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Story } from "@storybook/blocks";
 import { Accordion, Divider, Segment, SegmentGroup } from "..";
 import { excludeControls } from "../../utils/excludeControls";
+import * as AccordionStories from "./Accordion.stories";
 
-<Meta
-  title="Components/Accordion"
-  component={Accordion}
-  argTypes={excludeControls("onClick", "className")}
-/>
+<Meta of={AccordionStories} />
 
 # Accordion
 
@@ -28,30 +25,9 @@ import { Accordion } from "@simplybusiness/mobius";
 
 ### Normal
 
-<Story
-  name="Normal"
-  args={{
-    showText: "See more",
-    hideText: "See less",
-    headerPosition: "bottom",
-    startOpen: false,
-  }}
->
-  {args => (
-    <Accordion {...args}>
-      <p>
-        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
-        repellendus deleniti architecto
-      </p>
-      <p>
-        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
-        repellendus deleniti architecto
-      </p>
-    </Accordion>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={AccordionStories.Normal} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Accordion } from "@simplybusiness/mobius";
 
@@ -69,26 +45,9 @@ import { Accordion } from "@simplybusiness/mobius";
 
 ### Start expanded
 
-<Story
-  name="Start expanded"
-  args={{
-    showText: "See more",
-    hideText: "See less",
-    headerPosition: "bottom",
-    startOpen: true,
-  }}
->
-  {args => (
-    <Accordion {...args}>
-      <p>
-        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
-        repellendus deleniti architecto
-      </p>
-    </Accordion>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={AccordionStories.StartExpanded} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Accordion } from "@simplybusiness/mobius";
 
@@ -107,26 +66,9 @@ import { Accordion } from "@simplybusiness/mobius";
 
 ### Top Header
 
-<Story
-  name="Top Header"
-  args={{
-    showText: "See more",
-    hideText: "See less",
-    headerPosition: "top",
-    startOpen: false,
-  }}
->
-  {args => (
-    <Accordion {...args}>
-      <p>
-        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
-        repellendus deleniti architecto
-      </p>
-    </Accordion>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={AccordionStories.TopHeader} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Accordion } from "@simplybusiness/mobius";
 
@@ -140,32 +82,9 @@ import { Accordion } from "@simplybusiness/mobius";
 
 ### Complex Content
 
-<Story
-  name="Complex Content"
-  args={{
-    showText: "See more",
-    hideText: "See less",
-    headerPosition: "bottom",
-    startOpen: false,
-  }}
->
-  {args => (
-    <Accordion {...args}>
-      <SegmentGroup>
-        <Segment>
-          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
-          repellendus deleniti architecto
-        </Segment>
-        <Segment>
-          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
-          repellendus deleniti architecto
-        </Segment>
-      </SegmentGroup>
-    </Accordion>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={AccordionStories.ComplexContent} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Accordion, SegmentGroup, Segment } from "@simplybusiness/mobius";
 

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta } from "@storybook/react";
+import { Accordion, AccordionProps, Segment, SegmentGroup } from "..";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Components/Accordion",
+  component: Accordion,
+  argTypes: excludeControls("onClick", "className"),
+};
+
+export const Normal: Meta<typeof Accordion> = {
+  render: (args: AccordionProps) => (
+    <Accordion {...args}>
+      <p>
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
+        repellendus deleniti architecto
+      </p>
+      <p>
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
+        repellendus deleniti architecto
+      </p>
+    </Accordion>
+  ),
+  args: {
+    showText: "See more",
+    hideText: "See less",
+    headerPosition: "bottom",
+    startOpen: false,
+  },
+};
+
+export const StartExpanded: Meta<typeof Accordion> = {
+  render: (args: AccordionProps) => (
+    <Accordion {...args}>
+      <p>
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
+        repellendus deleniti architecto
+      </p>
+    </Accordion>
+  ),
+  args: {
+    showText: "See more",
+    hideText: "See less",
+    headerPosition: "bottom",
+    startOpen: true,
+  },
+};
+
+export const TopHeader: Meta<typeof Accordion> = {
+  render: (args: AccordionProps) => (
+    <Accordion {...args}>
+      <p>
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
+        repellendus deleniti architecto
+      </p>
+    </Accordion>
+  ),
+  args: {
+    showText: "See more",
+    hideText: "See less",
+    headerPosition: "top",
+    startOpen: false,
+  },
+};
+
+export const ComplexContent: Meta<typeof Accordion> = {
+  render: (args: AccordionProps) => (
+    <Accordion {...args}>
+      <SegmentGroup>
+        <Segment>
+          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
+          repellendus deleniti architecto
+        </Segment>
+        <Segment>
+          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi
+          repellendus deleniti architecto
+        </Segment>
+      </SegmentGroup>
+    </Accordion>
+  ),
+  args: {
+    showText: "See more",
+    hideText: "See less",
+    headerPosition: "bottom",
+    startOpen: false,
+  },
+};

package/src/components/Alert/{Alert.story.mdx → Alert.mdx}

@@ -1,18 +1,9 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import { Alert, AlertProps } from "./Alert";
 import { excludeControls } from "../../utils/excludeControls";
+import * as AlertStories from "./Alert.stories";
 
-<Meta
-  title="Components/Alert"
-  component={Alert}
-  argTypes={{
-    variant: {
-      control: "radio",
-      options: ["info", "success", "warning", "error"],
-    },
-    ...excludeControls("elementType", "className"),
-  }}
-/>
+<Meta of={AlertStories} />
 
 # Alert
 
@@ -35,34 +26,13 @@ import { Alert } from "@simplybusiness/mobius";
 ## Normal
 
 <Canvas>
-  <Story name="Normal" args={{ variant: "info", show: true, header: "" }}>
-    {args => (
-      <Alert {...args}>
-        Today is{" "}
-        {new Intl.DateTimeFormat("en-GB", { dateStyle: "long" }).format(
-          new Date(),
-        )}
-      </Alert>
-    )}
-  </Story>
+  <Story of={AlertStories.Normal} />
 </Canvas>
 
 ## With Header
 
 <Canvas>
-  <Story
-    name="With Header"
-    args={{ variant: "info", show: true, header: "Information" }}
-  >
-    {args => (
-      <Alert {...args}>
-        Today is{" "}
-        {new Intl.DateTimeFormat("en-GB", { dateStyle: "long" }).format(
-          new Date(),
-        )}
-      </Alert>
-    )}
-  </Story>
+  <Story of={AlertStories.WithHeader} />
 </Canvas>
 
 ## Props

package/src/components/Alert/Alert.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta } from "@storybook/react";
+import { Alert, AlertProps } from "./Alert";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Components/Alert",
+  component: Alert,
+  argTypes: {
+    variant: {
+      control: { type: "radio" },
+      options: ["info", "success", "warning", "error"],
+    },
+    ...excludeControls("elementType", "className"),
+  },
+};
+
+export const Normal: Meta<typeof Alert> = {
+  render: (args: AlertProps) => (
+    <Alert {...args}>
+      Today is{" "}
+      {new Intl.DateTimeFormat("en-GB", {
+        dateStyle: "long",
+      }).format(new Date())}
+    </Alert>
+  ),
+  args: {
+    variant: "info",
+    show: true,
+    header: "",
+  },
+};
+
+export const WithHeader: Meta<typeof Alert> = {
+  render: (args: AlertProps) => (
+    <Alert {...args}>
+      Today is{" "}
+      {new Intl.DateTimeFormat("en-GB", {
+        dateStyle: "long",
+      }).format(new Date())}
+    </Alert>
+  ),
+  args: {
+    variant: "info",
+    show: true,
+    header: "Information",
+  },
+};

package/src/components/Box/{Box.story.mdx → Box.mdx}

@@ -1,13 +1,10 @@
-import { Meta, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Canvas, Story } from "@storybook/blocks";
 import { Box, BoxProps } from "./Box";
 import { Button } from "../Button";
 import { excludeControls } from "../../utils/excludeControls";
+import * as BoxStories from "./Box.stories";
 
-<Meta
-  title="Layout/Box"
-  component={Box}
-  argTypes={excludeControls("className", "elementType", "style")}
-/>
+<Meta of={BoxStories} />
 
 # Box
 
@@ -30,26 +27,13 @@ import { Box } from "@simplybusiness/mobius";
 ## Normal
 
 <Canvas>
-  <Story name="Normal" args={{}}>
-    {args => (
-      <Box {...args}>
-        <Button>Click me</Button>
-      </Box>
-    )}
-  </Story>
+  <Story of={BoxStories.Normal} />
 </Canvas>
 
 ## Custom element
 
 <Canvas>
-  <Story
-    name="Custom Element"
-    args={{
-      elementType: "span",
-    }}
-  >
-    {args => <Box {...args}>This text is inside a span</Box>}
-  </Story>
+  <Story of={BoxStories.CustomElement} />
 </Canvas>
 
 ## Props

package/src/components/Box/Box.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta } from "@storybook/react";
+import { Box, BoxProps } from "./Box";
+import { Button } from "../Button";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Layout/Box",
+  component: Box,
+  argTypes: excludeControls("className", "elementType", "style"),
+};
+
+export const Normal: Meta<typeof Box> = {
+  render: (args: BoxProps) => (
+    <Box {...args}>
+      <Button>Click me</Button>
+    </Box>
+  ),
+};
+
+export const CustomElement = {
+  render: (args: BoxProps) => <Box {...args}>This text is inside a span</Box>,
+  name: "Custom Element",
+  args: {
+    elementType: "span",
+  },
+};

package/src/components/Breadcrumbs/{Breadcrumbs.story.mdx → Breadcrumbs.mdx}

@@ -1,16 +1,12 @@
-import { Meta, ArgsTable, Story } from "@storybook/addon-docs";
+import { Meta, ArgsTable, Story } from "@storybook/blocks";
 import { Breadcrumbs } from "./Breadcrumbs";
 import { BreadcrumbItem } from "./BreadcrumbItem";
 import { Link } from "../Link";
 import { Flex } from "../Flex";
-import { SVG } from "../SVG";
 import { excludeControls } from "../../utils/excludeControls";
+import * as BreadcrumbsStories from "./Breadcrumbs.stories";
 
-<Meta
-  title="Components/Breadcrumbs"
-  component={Breadcrumbs}
-  argTypes={excludeControls("className")}
-/>
+<Meta of={BreadcrumbsStories} />
 
 # Breadcrumbs
 
@@ -32,23 +28,9 @@ import { Breadcrumbs, BreadcrumbItem } from "@simplybusiness/mobius";
 
 Each `BreadcrumbItem` can contain a `Link` or a simple text. The last child is disabled by default.
 
-<Story name="Normal" args={{}}>
-  {args => (
-    <Breadcrumbs {...args}>
-      <BreadcrumbItem key="business-insurance">
-        <Link href="/business-insurance">Business insurance</Link>
-      </BreadcrumbItem>
-      <BreadcrumbItem key="tradesmen">
-        <Link href="/tradesmen">Tradesmen</Link>
-      </BreadcrumbItem>
-      <BreadcrumbItem key="beauty-salon-insurance">
-        Beauty salon insurance
-      </BreadcrumbItem>
-    </Breadcrumbs>
-  )}
-</Story>
-
-<!-- prettier-ignore -->
+<Story of={BreadcrumbsStories.Normal} />
+
+{/* prettier-ignore */}
 ```jsx
 import { Breadcrumbs, BreadcrumbItem, Link } from "@simplybusiness/mobius";
 
@@ -67,36 +49,21 @@ import { Breadcrumbs, BreadcrumbItem, Link } from "@simplybusiness/mobius";
 
 `BreadcrumbItem` can also contain any other element like, for example, an SVG.
 
-export const Logo = () => (
-  <SVG fill="primary" height="64px">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 299.8 85">
-      <path d="M109.9 38.7c3.3-3.7 4.9-8.2 4.9-13.7 0-6.5-2.3-12.4-6.6-16.7-4.6-4.7-11.1-7.1-18.8-7.1H68.5c-5.3 0-9.1 3.8-9.1 9.1v64.8c0 5.2 3.9 9.1 9.1 9.1h24.8c8.8 0 16.1-2.6 21.2-7.6 4.7-4.6 7.3-11.1 7.3-18.3 0-4.7-1.2-8.9-3.5-12.4-2.1-3-4.9-5.4-8.4-7.2zM68.4 75.9c-.7 0-.9-.3-.9-.9V10.2c0-.8.2-.9.9-.9h20.9c3.8 0 9.2.8 13.1 4.7 2.7 2.8 4.2 6.6 4.2 10.9 0 9.1-11.8 16.2-11.8 16.2s13.2 3.4 16.5 9.2c1.4 2.1 2.1 4.8 2.1 7.9 0 5-1.7 9.4-4.8 12.5-3.5 3.4-8.9 5.3-15.5 5.3l-24.7-.1zM52.2 51.3c1.4 2.8 2.1 5.9 2.1 9.5 0 3.3-.6 6.5-1.8 9.4s-3 5.5-5.3 7.7-5.1 4-8.6 5.2c-3.5 1.3-7.3 1.9-11.5 1.9-5.2 0-10-.9-14.4-2.6-4.4-1.8-8-3.7-10.7-5.7-.7-.6-1.2-1.1-1.6-1.8-.3-.5-.4-1-.4-1.6v-.6c.1-.9.5-1.8 1.2-2.8l2.6-3.7c.9-1.2 1.9-1.9 2.9-2.1.2 0 .3-.1.5-.1.9 0 2 .4 3.2 1.1 5.7 4.1 11.3 6.1 16.7 6.1 3.8 0 6.8-.9 9-2.6s3.3-4 3.3-6.8c0-1.7-.4-3.2-1.3-4.6-.9-1.4-2.1-2.6-3.5-3.6-1.5-1-3.2-2-5.1-2.9-1.9-.9-4-1.9-6.1-2.8-2.1-.9-4.2-1.9-6.3-2.9-2.1-1-4.1-2.2-6-3.5S7.5 38.7 6 37.1c-1.5-1.6-2.7-3.6-3.5-5.8-.9-2.3-1.3-4.8-1.3-7.5 0-4.7 1.2-8.9 3.7-12.5s5.8-6.4 10-8.4C19.1 1 23.8 0 29 0c4.4 0 8.5.7 12.3 1.9 3.8 1.3 6.8 2.7 9 4.3 1.5 1.1 2.3 2.4 2.3 3.8 0 .9-.3 1.8-.9 2.8l-2.1 3.8c-.9 1.7-2.1 2.5-3.6 2.5-.9 0-1.9-.3-3-.9-1.5-.9-2.8-1.6-3.9-2.2-1.1-.6-2.6-1.1-4.6-1.6s-3.9-.8-5.9-.8c-3.8 0-6.9.9-9.2 2.6-2.3 1.7-3.4 4-3.4 6.8 0 2.1.7 3.9 2.1 5.5s3.3 3 5.5 4.1c2.3 1.1 4.7 2.3 7.5 3.4 2.7 1.1 5.4 2.4 8.2 3.7 2.7 1.4 5.2 2.9 7.4 4.7 2.2 1.9 4 4.1 5.5 6.9zm80.1-25.1l1-1.4c.7-1 1.4-1 2.5-.4 1 .7 3.2 2.2 6.2 2.2 2.9 0 4.6-1.4 4.6-3.5 0-5.8-14.3-4.6-14.3-14.2 0-5.4 4.5-8.9 10.3-8.9 3.6 0 6.6 1.4 7.9 2.3 1 .7 1.1 1.5.6 2.5l-.8 1.4c-.6 1.3-1.6 1.1-2.5.6-1.3-.7-2.9-1.7-5.3-1.7-2.9 0-4.7 1.4-4.7 3.5 0 5.7 14.3 4.3 14.3 14 0 5-3.7 9.1-10.2 9.1-4.4 0-7.9-1.9-9.4-3.1-.6-.5-1-1.3-.2-2.4zm24.1-22.5V2.4c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8v1.3c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8zm0 7.4c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8v18.4c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8V11.1zm10.9 0c0-1.2.6-1.8 1.8-1.8h1.7c1.2 0 1.8.6 1.8 1.8v1.3c0 .5-.1 1-.1 1h.1c1.1-2.2 3.8-4.7 7.2-4.7 3.3 0 5.5 1.6 6.4 4.5h.1c1.2-2.3 4.1-4.5 7.5-4.5 4.6 0 7.2 2.6 7.2 8.4v12.3c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8V18.1c0-2.5-.5-4.4-3-4.4-3.7 0-5.6 3.8-5.6 7.6v8.1c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8V18.1c0-2.4-.3-4.4-2.9-4.4-3.9 0-5.7 4-5.7 7.6v8.1c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8V11.1zm38.9 0c0-1.2.6-1.8 1.8-1.8h1.4c1.2 0 1.8.6 1.8 1.5v1.9h.1s1.9-3.9 7.1-3.9c6 0 9.8 4.7 9.8 11.5 0 7-4.3 11.5-10.1 11.5-4.6 0-6.4-3.4-6.4-3.4h-.1s.1.8.1 1.9v7.8c0 1.2-.6 1.8-1.8 1.8H208c-1.2 0-1.8-.6-1.8-1.8v-27zM217 27.2c3 0 5.5-2.5 5.5-6.8 0-4.2-2.2-6.9-5.5-6.9-2.9 0-5.6 2.1-5.6 6.9.1 3.4 2 6.8 5.6 6.8zm15.2-24.8c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8v21.5c0 2.2.9 2.5 1.7 2.6.8.1 1.3.6 1.3 1.6v1.5c0 1.1-.5 1.9-1.8 1.9-2.9 0-6.7-.8-6.7-7.1v-22zm12.3 33c.4.2.9.4 1.6.4 1.6 0 2.9-1.4 3.5-2.9l.8-1.9-8.4-19.6c-.6-1.3 0-2.1 1.4-2.1h2.3c1.1 0 1.7.5 2 1.5l4.2 11.2c.4 1.2.8 3 .8 3h.1s.4-1.7.7-2.9l3.9-11.3c.3-1 1-1.5 2-1.5h2.2c1.3 0 1.9.8 1.5 2.1L254 34.6c-1.5 4-4.7 5.8-8 5.8-1.2 0-2.3-.3-3.1-.6-1-.4-1.3-1.3-.8-2.3l.4-1c.5-1.1 1.2-1.3 2-1.1zM133.7 52.2c0-1.2.6-1.8 1.8-1.8h9.2c5.5 0 9.5 2.8 9.5 7.9 0 2.8-1.4 5.3-3.7 6.6v.1c3.3 1 4.9 4.1 4.9 7.2 0 6.1-4.9 8.9-10.6 8.9h-9.3c-1.2 0-1.8-.6-1.8-1.8V52.2zm11 10.7c2.4 0 3.8-1.7 3.8-3.9s-1.3-3.8-3.9-3.8h-5.3v7.7h5.4zm.5 13.3c2.9 0 4.5-1.9 4.5-4.4s-1.6-4.4-4.5-4.4h-6v8.8h6zm14.3-15.4c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8V72c0 2.7.7 4.5 3.4 4.5 4 0 6.2-3.5 6.2-7.4v-8.3c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8v18.4c0 1.2-.6 1.8-1.8 1.8h-1.7c-1.2 0-1.8-.6-1.8-1.8v-1.3c0-.5.1-1 .1-1-1 2.2-3.9 4.6-7.7 4.6-4.7 0-7.7-2.4-7.7-8.4V60.8zm25.1 16l.5-.8c.6-.9 1.4-1 2.5-.4 1 .6 2.7 1.5 4.9 1.5 1.9 0 3.1-.9 3.1-2.2 0-3.6-10.9-2.2-10.9-9.8 0-4.3 3.8-6.6 8.4-6.6 2.9 0 5 .9 6.1 1.6 1 .5 1.1 1.4.6 2.4l-.4.8c-.5 1-1.3 1.2-2.4.7-1-.4-2.4-1.1-4.2-1.1-1.9 0-3 .8-3 2.2 0 3.6 10.9 2.2 10.9 9.7 0 3.9-3.3 6.8-8.4 6.8-3.5 0-6-1.3-7.4-2.2-.9-.7-1-1.6-.3-2.6zm20.3-23.3v-1.3c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8v1.3c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8zm0 7.3c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8v18.4c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8V60.8zm10.9 0c0-1.2.6-1.8 1.8-1.8h1.7c1.2 0 1.8.6 1.8 1.8v1.3c0 .5-.1 1-.1 1h.1c1-1.9 3.4-4.7 7.8-4.7 4.9 0 7.7 2.5 7.7 8.4v12.3c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8V67.9c0-2.7-.7-4.5-3.5-4.5-3.9 0-6.4 3.2-6.4 7.2v8.5c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8l.1-18.3zm35.8-2.3c6.3 0 9.8 4.4 9.8 10.5 0 .9-.8 1.9-1.9 1.9H246c.3 4 3.3 6 6.6 6 2 0 3.7-.8 4.8-1.4 1.1-.5 1.9-.4 2.4.6l.5.9c.5 1 .3 1.9-.6 2.4-1.4.9-4 2.2-7.5 2.2-7.3 0-11.9-5.3-11.9-11.5.1-6.8 4.7-11.6 11.3-11.6zm4.3 9c-.1-3.1-1.9-4.9-4.5-4.9-2.8 0-4.8 1.9-5.3 4.9h9.8zm8.5 9.3l.5-.8c.6-.9 1.4-1 2.5-.4 1 .6 2.7 1.5 4.9 1.5 1.9 0 3.1-.9 3.1-2.2 0-3.6-10.9-2.2-10.9-9.8 0-4.3 3.8-6.6 8.4-6.6 2.9 0 5 .9 6.1 1.6 1 .5 1.1 1.4.6 2.4l-.4.8c-.5 1-1.3 1.2-2.4.7-1-.4-2.4-1.1-4.2-1.1-1.9 0-3 .8-3 2.2 0 3.6 10.9 2.2 10.9 9.7 0 3.9-3.3 6.8-8.4 6.8-3.5 0-6-1.3-7.4-2.2-.9-.7-1-1.6-.3-2.6zm19.3 0l.5-.8c.6-.9 1.4-1 2.5-.4 1 .6 2.7 1.5 4.9 1.5 1.9 0 3.1-.9 3.1-2.2 0-3.6-10.9-2.2-10.9-9.8 0-4.3 3.8-6.6 8.4-6.6 2.9 0 5 .9 6.1 1.6 1 .5 1.1 1.4.6 2.4l-.4.8c-.5 1-1.3 1.2-2.4.7-1-.4-2.4-1.1-4.2-1.1-1.9 0-3 .8-3 2.2 0 3.6 10.9 2.2 10.9 9.7 0 3.9-3.3 6.8-8.4 6.8-3.5 0-6-1.3-7.4-2.2-.8-.7-.9-1.6-.3-2.6z" />
-    </svg>
-  </SVG>
-);
+<Story of={BreadcrumbsStories.WithLogo} />
 
-<Breadcrumbs>
-  <BreadcrumbItem key="root">
-    <Logo />
-  </BreadcrumbItem>
-  <BreadcrumbItem key="business-insurance">
-    <Link href="/business-insurance">Business insurance</Link>
-  </BreadcrumbItem>
-  <BreadcrumbItem key="tradesmen">
-    <Link href="/tradesmen">Tradesmen</Link>
-  </BreadcrumbItem>
-  <BreadcrumbItem key="beauty-salon-insurance">
-    <Link href="/beauty">Beauty Salon</Link>
-  </BreadcrumbItem>
-</Breadcrumbs>
-
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```jsx
 import { Breadcrumbs, BreadcrumbItem, Link } from "@simplybusiness/mobius";
 
 <Breadcrumbs>
   <BreadcrumbItem key="root">
-    <Logo />
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 299.8 85"
+      height="32px"
+    >
+      <path d="M109.9 38.7c3.3-3.7 4.9-8.2 4.9-13.7 0-6.5-2.3-12.4-6.6-16.7-4.6-4.7-11.1-7.1-18.8-7.1H68.5c-5.3 0-9.1 3.8-9.1 9.1v64.8c0 5.2 3.9 9.1 9.1 9.1h24.8c8.8 0 16.1-2.6 21.2-7.6 4.7-4.6 7.3-11.1 7.3-18.3 0-4.7-1.2-8.9-3.5-12.4-2.1-3-4.9-5.4-8.4-7.2zM68.4 75.9c-.7 0-.9-.3-.9-.9V10.2c0-.8.2-.9.9-.9h20.9c3.8 0 9.2.8 13.1 4.7 2.7 2.8 4.2 6.6 4.2 10.9 0 9.1-11.8 16.2-11.8 16.2s13.2 3.4 16.5 9.2c1.4 2.1 2.1 4.8 2.1 7.9 0 5-1.7 9.4-4.8 12.5-3.5 3.4-8.9 5.3-15.5 5.3l-24.7-.1zM52.2 51.3c1.4 2.8 2.1 5.9 2.1 9.5 0 3.3-.6 6.5-1.8 9.4s-3 5.5-5.3 7.7-5.1 4-8.6 5.2c-3.5 1.3-7.3 1.9-11.5 1.9-5.2 0-10-.9-14.4-2.6-4.4-1.8-8-3.7-10.7-5.7-.7-.6-1.2-1.1-1.6-1.8-.3-.5-.4-1-.4-1.6v-.6c.1-.9.5-1.8 1.2-2.8l2.6-3.7c.9-1.2 1.9-1.9 2.9-2.1.2 0 .3-.1.5-.1.9 0 2 .4 3.2 1.1 5.7 4.1 11.3 6.1 16.7 6.1 3.8 0 6.8-.9 9-2.6s3.3-4 3.3-6.8c0-1.7-.4-3.2-1.3-4.6-.9-1.4-2.1-2.6-3.5-3.6-1.5-1-3.2-2-5.1-2.9-1.9-.9-4-1.9-6.1-2.8-2.1-.9-4.2-1.9-6.3-2.9-2.1-1-4.1-2.2-6-3.5S7.5 38.7 6 37.1c-1.5-1.6-2.7-3.6-3.5-5.8-.9-2.3-1.3-4.8-1.3-7.5 0-4.7 1.2-8.9 3.7-12.5s5.8-6.4 10-8.4C19.1 1 23.8 0 29 0c4.4 0 8.5.7 12.3 1.9 3.8 1.3 6.8 2.7 9 4.3 1.5 1.1 2.3 2.4 2.3 3.8 0 .9-.3 1.8-.9 2.8l-2.1 3.8c-.9 1.7-2.1 2.5-3.6 2.5-.9 0-1.9-.3-3-.9-1.5-.9-2.8-1.6-3.9-2.2-1.1-.6-2.6-1.1-4.6-1.6s-3.9-.8-5.9-.8c-3.8 0-6.9.9-9.2 2.6-2.3 1.7-3.4 4-3.4 6.8 0 2.1.7 3.9 2.1 5.5s3.3 3 5.5 4.1c2.3 1.1 4.7 2.3 7.5 3.4 2.7 1.1 5.4 2.4 8.2 3.7 2.7 1.4 5.2 2.9 7.4 4.7 2.2 1.9 4 4.1 5.5 6.9zm80.1-25.1l1-1.4c.7-1 1.4-1 2.5-.4 1 .7 3.2 2.2 6.2 2.2 2.9 0 4.6-1.4 4.6-3.5 0-5.8-14.3-4.6-14.3-14.2 0-5.4 4.5-8.9 10.3-8.9 3.6 0 6.6 1.4 7.9 2.3 1 .7 1.1 1.5.6 2.5l-.8 1.4c-.6 1.3-1.6 1.1-2.5.6-1.3-.7-2.9-1.7-5.3-1.7-2.9 0-4.7 1.4-4.7 3.5 0 5.7 14.3 4.3 14.3 14 0 5-3.7 9.1-10.2 9.1-4.4 0-7.9-1.9-9.4-3.1-.6-.5-1-1.3-.2-2.4zm24.1-22.5V2.4c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8v1.3c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8zm0 7.4c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8v18.4c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8V11.1zm10.9 0c0-1.2.6-1.8 1.8-1.8h1.7c1.2 0 1.8.6 1.8 1.8v1.3c0 .5-.1 1-.1 1h.1c1.1-2.2 3.8-4.7 7.2-4.7 3.3 0 5.5 1.6 6.4 4.5h.1c1.2-2.3 4.1-4.5 7.5-4.5 4.6 0 7.2 2.6 7.2 8.4v12.3c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8V18.1c0-2.5-.5-4.4-3-4.4-3.7 0-5.6 3.8-5.6 7.6v8.1c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8V18.1c0-2.4-.3-4.4-2.9-4.4-3.9 0-5.7 4-5.7 7.6v8.1c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8V11.1zm38.9 0c0-1.2.6-1.8 1.8-1.8h1.4c1.2 0 1.8.6 1.8 1.5v1.9h.1s1.9-3.9 7.1-3.9c6 0 9.8 4.7 9.8 11.5 0 7-4.3 11.5-10.1 11.5-4.6 0-6.4-3.4-6.4-3.4h-.1s.1.8.1 1.9v7.8c0 1.2-.6 1.8-1.8 1.8H208c-1.2 0-1.8-.6-1.8-1.8v-27zM217 27.2c3 0 5.5-2.5 5.5-6.8 0-4.2-2.2-6.9-5.5-6.9-2.9 0-5.6 2.1-5.6 6.9.1 3.4 2 6.8 5.6 6.8zm15.2-24.8c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8v21.5c0 2.2.9 2.5 1.7 2.6.8.1 1.3.6 1.3 1.6v1.5c0 1.1-.5 1.9-1.8 1.9-2.9 0-6.7-.8-6.7-7.1v-22zm12.3 33c.4.2.9.4 1.6.4 1.6 0 2.9-1.4 3.5-2.9l.8-1.9-8.4-19.6c-.6-1.3 0-2.1 1.4-2.1h2.3c1.1 0 1.7.5 2 1.5l4.2 11.2c.4 1.2.8 3 .8 3h.1s.4-1.7.7-2.9l3.9-11.3c.3-1 1-1.5 2-1.5h2.2c1.3 0 1.9.8 1.5 2.1L254 34.6c-1.5 4-4.7 5.8-8 5.8-1.2 0-2.3-.3-3.1-.6-1-.4-1.3-1.3-.8-2.3l.4-1c.5-1.1 1.2-1.3 2-1.1zM133.7 52.2c0-1.2.6-1.8 1.8-1.8h9.2c5.5 0 9.5 2.8 9.5 7.9 0 2.8-1.4 5.3-3.7 6.6v.1c3.3 1 4.9 4.1 4.9 7.2 0 6.1-4.9 8.9-10.6 8.9h-9.3c-1.2 0-1.8-.6-1.8-1.8V52.2zm11 10.7c2.4 0 3.8-1.7 3.8-3.9s-1.3-3.8-3.9-3.8h-5.3v7.7h5.4zm.5 13.3c2.9 0 4.5-1.9 4.5-4.4s-1.6-4.4-4.5-4.4h-6v8.8h6zm14.3-15.4c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8V72c0 2.7.7 4.5 3.4 4.5 4 0 6.2-3.5 6.2-7.4v-8.3c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8v18.4c0 1.2-.6 1.8-1.8 1.8h-1.7c-1.2 0-1.8-.6-1.8-1.8v-1.3c0-.5.1-1 .1-1-1 2.2-3.9 4.6-7.7 4.6-4.7 0-7.7-2.4-7.7-8.4V60.8zm25.1 16l.5-.8c.6-.9 1.4-1 2.5-.4 1 .6 2.7 1.5 4.9 1.5 1.9 0 3.1-.9 3.1-2.2 0-3.6-10.9-2.2-10.9-9.8 0-4.3 3.8-6.6 8.4-6.6 2.9 0 5 .9 6.1 1.6 1 .5 1.1 1.4.6 2.4l-.4.8c-.5 1-1.3 1.2-2.4.7-1-.4-2.4-1.1-4.2-1.1-1.9 0-3 .8-3 2.2 0 3.6 10.9 2.2 10.9 9.7 0 3.9-3.3 6.8-8.4 6.8-3.5 0-6-1.3-7.4-2.2-.9-.7-1-1.6-.3-2.6zm20.3-23.3v-1.3c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8v1.3c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8zm0 7.3c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8v18.4c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8V60.8zm10.9 0c0-1.2.6-1.8 1.8-1.8h1.7c1.2 0 1.8.6 1.8 1.8v1.3c0 .5-.1 1-.1 1h.1c1-1.9 3.4-4.7 7.8-4.7 4.9 0 7.7 2.5 7.7 8.4v12.3c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8V67.9c0-2.7-.7-4.5-3.5-4.5-3.9 0-6.4 3.2-6.4 7.2v8.5c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8l.1-18.3zm35.8-2.3c6.3 0 9.8 4.4 9.8 10.5 0 .9-.8 1.9-1.9 1.9H246c.3 4 3.3 6 6.6 6 2 0 3.7-.8 4.8-1.4 1.1-.5 1.9-.4 2.4.6l.5.9c.5 1 .3 1.9-.6 2.4-1.4.9-4 2.2-7.5 2.2-7.3 0-11.9-5.3-11.9-11.5.1-6.8 4.7-11.6 11.3-11.6zm4.3 9c-.1-3.1-1.9-4.9-4.5-4.9-2.8 0-4.8 1.9-5.3 4.9h9.8zm8.5 9.3l.5-.8c.6-.9 1.4-1 2.5-.4 1 .6 2.7 1.5 4.9 1.5 1.9 0 3.1-.9 3.1-2.2 0-3.6-10.9-2.2-10.9-9.8 0-4.3 3.8-6.6 8.4-6.6 2.9 0 5 .9 6.1 1.6 1 .5 1.1 1.4.6 2.4l-.4.8c-.5 1-1.3 1.2-2.4.7-1-.4-2.4-1.1-4.2-1.1-1.9 0-3 .8-3 2.2 0 3.6 10.9 2.2 10.9 9.7 0 3.9-3.3 6.8-8.4 6.8-3.5 0-6-1.3-7.4-2.2-.9-.7-1-1.6-.3-2.6zm19.3 0l.5-.8c.6-.9 1.4-1 2.5-.4 1 .6 2.7 1.5 4.9 1.5 1.9 0 3.1-.9 3.1-2.2 0-3.6-10.9-2.2-10.9-9.8 0-4.3 3.8-6.6 8.4-6.6 2.9 0 5 .9 6.1 1.6 1 .5 1.1 1.4.6 2.4l-.4.8c-.5 1-1.3 1.2-2.4.7-1-.4-2.4-1.1-4.2-1.1-1.9 0-3 .8-3 2.2 0 3.6 10.9 2.2 10.9 9.7 0 3.9-3.3 6.8-8.4 6.8-3.5 0-6-1.3-7.4-2.2-.8-.7-.9-1.6-.3-2.6z" />
+    </svg>
   </BreadcrumbItem>
   <BreadcrumbItem key="business-insurance">
     <Link href="/business-insurance">Business insurance</Link>

package/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta } from "@storybook/react";
+import { Breadcrumbs, BreadcrumbsProps } from "./Breadcrumbs";
+import { BreadcrumbItem } from "./BreadcrumbItem";
+import { Link } from "../Link";
+import { excludeControls } from "../../utils/excludeControls";
+
+export default {
+  title: "Components/Breadcrumbs",
+  component: Breadcrumbs,
+  argTypes: excludeControls("className"),
+};
+
+export const Normal: Meta<typeof Breadcrumbs> = {
+  render: (args: BreadcrumbsProps) => (
+    <Breadcrumbs {...args}>
+      <BreadcrumbItem key="business-insurance">
+        <Link href="/business-insurance">Business insurance</Link>
+      </BreadcrumbItem>
+      <BreadcrumbItem key="tradesmen">
+        <Link href="/tradesmen">Tradesmen</Link>
+      </BreadcrumbItem>
+      <BreadcrumbItem key="beauty-salon-insurance">
+        Beauty salon insurance
+      </BreadcrumbItem>
+    </Breadcrumbs>
+  ),
+};
+
+export const WithLogo: Meta<typeof Breadcrumbs> = {
+  render: (args: BreadcrumbsProps) => (
+    <Breadcrumbs {...args}>
+      <BreadcrumbItem key="root">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 299.8 85"
+          height="32px"
+        >
+          <path d="M109.9 38.7c3.3-3.7 4.9-8.2 4.9-13.7 0-6.5-2.3-12.4-6.6-16.7-4.6-4.7-11.1-7.1-18.8-7.1H68.5c-5.3 0-9.1 3.8-9.1 9.1v64.8c0 5.2 3.9 9.1 9.1 9.1h24.8c8.8 0 16.1-2.6 21.2-7.6 4.7-4.6 7.3-11.1 7.3-18.3 0-4.7-1.2-8.9-3.5-12.4-2.1-3-4.9-5.4-8.4-7.2zM68.4 75.9c-.7 0-.9-.3-.9-.9V10.2c0-.8.2-.9.9-.9h20.9c3.8 0 9.2.8 13.1 4.7 2.7 2.8 4.2 6.6 4.2 10.9 0 9.1-11.8 16.2-11.8 16.2s13.2 3.4 16.5 9.2c1.4 2.1 2.1 4.8 2.1 7.9 0 5-1.7 9.4-4.8 12.5-3.5 3.4-8.9 5.3-15.5 5.3l-24.7-.1zM52.2 51.3c1.4 2.8 2.1 5.9 2.1 9.5 0 3.3-.6 6.5-1.8 9.4s-3 5.5-5.3 7.7-5.1 4-8.6 5.2c-3.5 1.3-7.3 1.9-11.5 1.9-5.2 0-10-.9-14.4-2.6-4.4-1.8-8-3.7-10.7-5.7-.7-.6-1.2-1.1-1.6-1.8-.3-.5-.4-1-.4-1.6v-.6c.1-.9.5-1.8 1.2-2.8l2.6-3.7c.9-1.2 1.9-1.9 2.9-2.1.2 0 .3-.1.5-.1.9 0 2 .4 3.2 1.1 5.7 4.1 11.3 6.1 16.7 6.1 3.8 0 6.8-.9 9-2.6s3.3-4 3.3-6.8c0-1.7-.4-3.2-1.3-4.6-.9-1.4-2.1-2.6-3.5-3.6-1.5-1-3.2-2-5.1-2.9-1.9-.9-4-1.9-6.1-2.8-2.1-.9-4.2-1.9-6.3-2.9-2.1-1-4.1-2.2-6-3.5S7.5 38.7 6 37.1c-1.5-1.6-2.7-3.6-3.5-5.8-.9-2.3-1.3-4.8-1.3-7.5 0-4.7 1.2-8.9 3.7-12.5s5.8-6.4 10-8.4C19.1 1 23.8 0 29 0c4.4 0 8.5.7 12.3 1.9 3.8 1.3 6.8 2.7 9 4.3 1.5 1.1 2.3 2.4 2.3 3.8 0 .9-.3 1.8-.9 2.8l-2.1 3.8c-.9 1.7-2.1 2.5-3.6 2.5-.9 0-1.9-.3-3-.9-1.5-.9-2.8-1.6-3.9-2.2-1.1-.6-2.6-1.1-4.6-1.6s-3.9-.8-5.9-.8c-3.8 0-6.9.9-9.2 2.6-2.3 1.7-3.4 4-3.4 6.8 0 2.1.7 3.9 2.1 5.5s3.3 3 5.5 4.1c2.3 1.1 4.7 2.3 7.5 3.4 2.7 1.1 5.4 2.4 8.2 3.7 2.7 1.4 5.2 2.9 7.4 4.7 2.2 1.9 4 4.1 5.5 6.9zm80.1-25.1l1-1.4c.7-1 1.4-1 2.5-.4 1 .7 3.2 2.2 6.2 2.2 2.9 0 4.6-1.4 4.6-3.5 0-5.8-14.3-4.6-14.3-14.2 0-5.4 4.5-8.9 10.3-8.9 3.6 0 6.6 1.4 7.9 2.3 1 .7 1.1 1.5.6 2.5l-.8 1.4c-.6 1.3-1.6 1.1-2.5.6-1.3-.7-2.9-1.7-5.3-1.7-2.9 0-4.7 1.4-4.7 3.5 0 5.7 14.3 4.3 14.3 14 0 5-3.7 9.1-10.2 9.1-4.4 0-7.9-1.9-9.4-3.1-.6-.5-1-1.3-.2-2.4zm24.1-22.5V2.4c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8v1.3c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8zm0 7.4c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8v18.4c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8V11.1zm10.9 0c0-1.2.6-1.8 1.8-1.8h1.7c1.2 0 1.8.6 1.8 1.8v1.3c0 .5-.1 1-.1 1h.1c1.1-2.2 3.8-4.7 7.2-4.7 3.3 0 5.5 1.6 6.4 4.5h.1c1.2-2.3 4.1-4.5 7.5-4.5 4.6 0 7.2 2.6 7.2 8.4v12.3c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8V18.1c0-2.5-.5-4.4-3-4.4-3.7 0-5.6 3.8-5.6 7.6v8.1c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8V18.1c0-2.4-.3-4.4-2.9-4.4-3.9 0-5.7 4-5.7 7.6v8.1c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8V11.1zm38.9 0c0-1.2.6-1.8 1.8-1.8h1.4c1.2 0 1.8.6 1.8 1.5v1.9h.1s1.9-3.9 7.1-3.9c6 0 9.8 4.7 9.8 11.5 0 7-4.3 11.5-10.1 11.5-4.6 0-6.4-3.4-6.4-3.4h-.1s.1.8.1 1.9v7.8c0 1.2-.6 1.8-1.8 1.8H208c-1.2 0-1.8-.6-1.8-1.8v-27zM217 27.2c3 0 5.5-2.5 5.5-6.8 0-4.2-2.2-6.9-5.5-6.9-2.9 0-5.6 2.1-5.6 6.9.1 3.4 2 6.8 5.6 6.8zm15.2-24.8c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8v21.5c0 2.2.9 2.5 1.7 2.6.8.1 1.3.6 1.3 1.6v1.5c0 1.1-.5 1.9-1.8 1.9-2.9 0-6.7-.8-6.7-7.1v-22zm12.3 33c.4.2.9.4 1.6.4 1.6 0 2.9-1.4 3.5-2.9l.8-1.9-8.4-19.6c-.6-1.3 0-2.1 1.4-2.1h2.3c1.1 0 1.7.5 2 1.5l4.2 11.2c.4 1.2.8 3 .8 3h.1s.4-1.7.7-2.9l3.9-11.3c.3-1 1-1.5 2-1.5h2.2c1.3 0 1.9.8 1.5 2.1L254 34.6c-1.5 4-4.7 5.8-8 5.8-1.2 0-2.3-.3-3.1-.6-1-.4-1.3-1.3-.8-2.3l.4-1c.5-1.1 1.2-1.3 2-1.1zM133.7 52.2c0-1.2.6-1.8 1.8-1.8h9.2c5.5 0 9.5 2.8 9.5 7.9 0 2.8-1.4 5.3-3.7 6.6v.1c3.3 1 4.9 4.1 4.9 7.2 0 6.1-4.9 8.9-10.6 8.9h-9.3c-1.2 0-1.8-.6-1.8-1.8V52.2zm11 10.7c2.4 0 3.8-1.7 3.8-3.9s-1.3-3.8-3.9-3.8h-5.3v7.7h5.4zm.5 13.3c2.9 0 4.5-1.9 4.5-4.4s-1.6-4.4-4.5-4.4h-6v8.8h6zm14.3-15.4c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8V72c0 2.7.7 4.5 3.4 4.5 4 0 6.2-3.5 6.2-7.4v-8.3c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8v18.4c0 1.2-.6 1.8-1.8 1.8h-1.7c-1.2 0-1.8-.6-1.8-1.8v-1.3c0-.5.1-1 .1-1-1 2.2-3.9 4.6-7.7 4.6-4.7 0-7.7-2.4-7.7-8.4V60.8zm25.1 16l.5-.8c.6-.9 1.4-1 2.5-.4 1 .6 2.7 1.5 4.9 1.5 1.9 0 3.1-.9 3.1-2.2 0-3.6-10.9-2.2-10.9-9.8 0-4.3 3.8-6.6 8.4-6.6 2.9 0 5 .9 6.1 1.6 1 .5 1.1 1.4.6 2.4l-.4.8c-.5 1-1.3 1.2-2.4.7-1-.4-2.4-1.1-4.2-1.1-1.9 0-3 .8-3 2.2 0 3.6 10.9 2.2 10.9 9.7 0 3.9-3.3 6.8-8.4 6.8-3.5 0-6-1.3-7.4-2.2-.9-.7-1-1.6-.3-2.6zm20.3-23.3v-1.3c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8v1.3c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8zm0 7.3c0-1.2.6-1.8 1.8-1.8h1.9c1.2 0 1.8.6 1.8 1.8v18.4c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8V60.8zm10.9 0c0-1.2.6-1.8 1.8-1.8h1.7c1.2 0 1.8.6 1.8 1.8v1.3c0 .5-.1 1-.1 1h.1c1-1.9 3.4-4.7 7.8-4.7 4.9 0 7.7 2.5 7.7 8.4v12.3c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8V67.9c0-2.7-.7-4.5-3.5-4.5-3.9 0-6.4 3.2-6.4 7.2v8.5c0 1.2-.6 1.8-1.8 1.8h-1.9c-1.2 0-1.8-.6-1.8-1.8l.1-18.3zm35.8-2.3c6.3 0 9.8 4.4 9.8 10.5 0 .9-.8 1.9-1.9 1.9H246c.3 4 3.3 6 6.6 6 2 0 3.7-.8 4.8-1.4 1.1-.5 1.9-.4 2.4.6l.5.9c.5 1 .3 1.9-.6 2.4-1.4.9-4 2.2-7.5 2.2-7.3 0-11.9-5.3-11.9-11.5.1-6.8 4.7-11.6 11.3-11.6zm4.3 9c-.1-3.1-1.9-4.9-4.5-4.9-2.8 0-4.8 1.9-5.3 4.9h9.8zm8.5 9.3l.5-.8c.6-.9 1.4-1 2.5-.4 1 .6 2.7 1.5 4.9 1.5 1.9 0 3.1-.9 3.1-2.2 0-3.6-10.9-2.2-10.9-9.8 0-4.3 3.8-6.6 8.4-6.6 2.9 0 5 .9 6.1 1.6 1 .5 1.1 1.4.6 2.4l-.4.8c-.5 1-1.3 1.2-2.4.7-1-.4-2.4-1.1-4.2-1.1-1.9 0-3 .8-3 2.2 0 3.6 10.9 2.2 10.9 9.7 0 3.9-3.3 6.8-8.4 6.8-3.5 0-6-1.3-7.4-2.2-.9-.7-1-1.6-.3-2.6zm19.3 0l.5-.8c.6-.9 1.4-1 2.5-.4 1 .6 2.7 1.5 4.9 1.5 1.9 0 3.1-.9 3.1-2.2 0-3.6-10.9-2.2-10.9-9.8 0-4.3 3.8-6.6 8.4-6.6 2.9 0 5 .9 6.1 1.6 1 .5 1.1 1.4.6 2.4l-.4.8c-.5 1-1.3 1.2-2.4.7-1-.4-2.4-1.1-4.2-1.1-1.9 0-3 .8-3 2.2 0 3.6 10.9 2.2 10.9 9.7 0 3.9-3.3 6.8-8.4 6.8-3.5 0-6-1.3-7.4-2.2-.8-.7-.9-1.6-.3-2.6z" />
+        </svg>
+      </BreadcrumbItem>
+      <BreadcrumbItem key="business-insurance">
+        <Link href="/business-insurance">Business insurance</Link>
+      </BreadcrumbItem>
+      <BreadcrumbItem key="tradesmen">
+        <Link href="/tradesmen">Tradesmen</Link>
+      </BreadcrumbItem>
+      <BreadcrumbItem key="beauty-salon-insurance">
+        <Link href="/beauty">Beauty Salon</Link>
+      </BreadcrumbItem>
+    </Breadcrumbs>
+  ),
+};