@simplybusiness/mobius 4.11.3 → 4.11.4

package/dist/esm/components/Segment/Segment.stories.js

@@ -1,519 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Segment } from "./Segment";
-import { SegmentGroup } from "./SegmentGroup";
-import { Text, Flex, TextField, TextArea, RadioGroup, Radio, Select, Option, Divider } from "..";
-const meta = {
-    title: "Layout/Segment",
-    component: Segment,
-    excludeStories: [
-        "ColouredBackground",
-        "HorizontalStack2",
-        "HorizontalStack3",
-        "Nested2",
-        "Nested3",
-        "BottomMarginRemoved",
-        "CompoundLayout",
-        "MarginAround",
-        "PaymentDetails"
-    ],
-    argTypes: {
-        colour: {
-            control: {
-                type: "select"
-            },
-            options: [
-                "",
-                "primary",
-                "secondary",
-                "grey",
-                "subtle"
-            ]
-        },
-        inverted: {
-            control: {
-                type: "boolean"
-            },
-            if: {
-                arg: "colour"
-            }
-        }
-    }
-};
-const sizeOptions = [
-    "",
-    "size-xs",
-    "size-s",
-    "size-m",
-    "size-l",
-    "size-xl",
-    "size-xxl"
-];
-export const Single = {
-    render: (args)=>/*#__PURE__*/ _jsxs(Segment, {
-            ...args,
-            children: [
-                /*#__PURE__*/ _jsxs(Flex, {
-                    style: {
-                        width: "100%"
-                    },
-                    justifyContent: "space-between",
-                    children: [
-                        /*#__PURE__*/ _jsx(Text, {
-                            children: "General liability*"
-                        }),
-                        /*#__PURE__*/ _jsx(Text, {
-                            children: "$300.00"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ _jsxs(Flex, {
-                    style: {
-                        width: "100%"
-                    },
-                    justifyContent: "space-between",
-                    children: [
-                        /*#__PURE__*/ _jsx(Text, {
-                            children: "Contractor‘s equipment and small tools"
-                        }),
-                        /*#__PURE__*/ _jsx(Text, {
-                            children: "$80.00"
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ _jsxs(Flex, {
-                    style: {
-                        width: "100%"
-                    },
-                    justifyContent: "space-between",
-                    children: [
-                        /*#__PURE__*/ _jsx(Text, {
-                            children: "Cyber insurance"
-                        }),
-                        /*#__PURE__*/ _jsx(Text, {
-                            children: "$250.00"
-                        })
-                    ]
-                })
-            ]
-        }),
-    args: {
-        heading: "Today's Payment",
-        inverted: false
-    }
-};
-export const VerticalStack = {
-    render: (args)=>/*#__PURE__*/ _jsxs(SegmentGroup, {
-            children: [
-                /*#__PURE__*/ _jsx(Segment, {
-                    ...args,
-                    children: "Item"
-                }),
-                /*#__PURE__*/ _jsx(Segment, {
-                    children: "Item"
-                }),
-                /*#__PURE__*/ _jsx(Segment, {
-                    children: "Item"
-                })
-            ]
-        }),
-    args: {
-        heading: "",
-        inverted: true
-    }
-};
-export const HorizontalStack = {
-    render: (args)=>/*#__PURE__*/ _jsxs(SegmentGroup, {
-            ...args,
-            children: [
-                /*#__PURE__*/ _jsx(Segment, {
-                    children: "Item"
-                }),
-                /*#__PURE__*/ _jsx(Segment, {
-                    children: "Item"
-                }),
-                /*#__PURE__*/ _jsx(Segment, {
-                    children: "Item"
-                })
-            ]
-        }),
-    args: {
-        horizontal: true,
-        margin: "size-xs"
-    },
-    argTypes: {
-        margin: {
-            control: {
-                type: "select"
-            },
-            options: [
-                ...sizeOptions
-            ]
-        }
-    },
-    parameters: {
-        controls: {
-            exclude: [
-                "heading",
-                "colour"
-            ]
-        }
-    }
-};
-export const Nested = {
-    render: (args)=>/*#__PURE__*/ _jsx(Segment, {
-            ...args,
-            children: /*#__PURE__*/ _jsxs(SegmentGroup, {
-                children: [
-                    /*#__PURE__*/ _jsx(Segment, {
-                        children: "Item"
-                    }),
-                    /*#__PURE__*/ _jsx(Segment, {
-                        children: "Item"
-                    }),
-                    /*#__PURE__*/ _jsx(Segment, {
-                        children: "Item"
-                    })
-                ]
-            })
-        }),
-    args: {
-        heading: "Today's Payment",
-        inverted: false
-    }
-};
-export const Nested2 = ()=>/*#__PURE__*/ _jsx(Segment, {
-        children: /*#__PURE__*/ _jsxs(SegmentGroup, {
-            children: [
-                /*#__PURE__*/ _jsx(Segment, {
-                    children: "Item"
-                }),
-                /*#__PURE__*/ _jsx(Segment, {
-                    children: "Item"
-                })
-            ]
-        })
-    });
-export const Nested3 = ()=>/*#__PURE__*/ _jsx(Segment, {
-        heading: "Today's Payment",
-        children: /*#__PURE__*/ _jsx(Segment, {
-            children: "Item"
-        })
-    });
-export const ColouredBackground = ()=>/*#__PURE__*/ _jsxs("div", {
-        style: {
-            display: "flex",
-            flexDirection: "column",
-            gap: "16px"
-        },
-        children: [
-            /*#__PURE__*/ _jsx(Segment, {
-                colour: "subtle",
-                children: "Subtle"
-            }),
-            /*#__PURE__*/ _jsx(Segment, {
-                colour: "secondary",
-                children: "Secondary"
-            }),
-            /*#__PURE__*/ _jsx(Segment, {
-                inverted: true,
-                colour: "primary",
-                children: "Primary"
-            }),
-            /*#__PURE__*/ _jsx(Segment, {
-                inverted: true,
-                colour: "secondary",
-                children: "Secondary"
-            })
-        ]
-    });
-export const HorizontalStack2 = ()=>/*#__PURE__*/ _jsxs(SegmentGroup, {
-        horizontal: true,
-        children: [
-            /*#__PURE__*/ _jsx(Segment, {
-                children: "Item"
-            }),
-            /*#__PURE__*/ _jsx(Segment, {
-                children: "Item"
-            })
-        ]
-    });
-export const HorizontalStack3 = ()=>/*#__PURE__*/ _jsx(SegmentGroup, {
-        horizontal: true,
-        children: /*#__PURE__*/ _jsx(Segment, {
-            children: "Item"
-        })
-    });
-export const BottomMarginRemoved = ()=>/*#__PURE__*/ _jsxs(SegmentGroup, {
-        horizontal: true,
-        children: [
-            /*#__PURE__*/ _jsxs(Segment, {
-                children: [
-                    /*#__PURE__*/ _jsx(TextField, {
-                        label: "First name"
-                    }),
-                    /*#__PURE__*/ _jsx(TextArea, {
-                        label: "Address"
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsxs(Segment, {
-                colour: "subtle",
-                children: [
-                    /*#__PURE__*/ _jsxs(RadioGroup, {
-                        label: "Colour",
-                        children: [
-                            /*#__PURE__*/ _jsx(Radio, {
-                                value: "red",
-                                label: "Red"
-                            }),
-                            /*#__PURE__*/ _jsx(Radio, {
-                                value: "blue",
-                                label: "Blue"
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsxs(Select, {
-                        label: "Selection",
-                        children: [
-                            /*#__PURE__*/ _jsx(Option, {
-                                children: "Please select a color"
-                            }),
-                            /*#__PURE__*/ _jsx(Option, {
-                                value: "red",
-                                children: "Red"
-                            }, "red"),
-                            /*#__PURE__*/ _jsx(Option, {
-                                value: "blue",
-                                children: "Blue"
-                            }, "blue"),
-                            /*#__PURE__*/ _jsx(Option, {
-                                value: "green",
-                                children: "Green"
-                            }, "green")
-                        ]
-                    })
-                ]
-            })
-        ]
-    });
-export const CompoundLayout = ()=>/*#__PURE__*/ _jsxs(SegmentGroup, {
-        horizontal: true,
-        children: [
-            /*#__PURE__*/ _jsxs(SegmentGroup, {
-                children: [
-                    /*#__PURE__*/ _jsx(Segment, {
-                        children: "General liability"
-                    }),
-                    /*#__PURE__*/ _jsx(Segment, {
-                        children: "Business property and equipment"
-                    }),
-                    /*#__PURE__*/ _jsx(Segment, {
-                        children: "Total"
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsx(SegmentGroup, {
-                children: /*#__PURE__*/ _jsx(Segment, {
-                    children: "Payment Options"
-                })
-            })
-        ]
-    });
-export const MarginAround = ()=>/*#__PURE__*/ _jsxs(SegmentGroup, {
-        children: [
-            /*#__PURE__*/ _jsx(Segment, {
-                children: "Top"
-            }),
-            /*#__PURE__*/ _jsxs(SegmentGroup, {
-                margin: "size-s",
-                children: [
-                    /*#__PURE__*/ _jsx(Segment, {
-                        children: "Nested Top"
-                    }),
-                    /*#__PURE__*/ _jsx(Segment, {
-                        children: "Nested Middle"
-                    }),
-                    /*#__PURE__*/ _jsx(Segment, {
-                        children: "Nested Bottom"
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsxs(SegmentGroup, {
-                horizontal: true,
-                children: [
-                    /*#__PURE__*/ _jsx(Segment, {
-                        children: "Top"
-                    }),
-                    /*#__PURE__*/ _jsx(Segment, {
-                        children: "Middle"
-                    }),
-                    /*#__PURE__*/ _jsx(Segment, {
-                        children: "Bottom"
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsx(Segment, {
-                children: "Bottom"
-            })
-        ]
-    });
-export const PaymentDetails = ()=>/*#__PURE__*/ _jsx("div", {
-        style: {
-            width: "340px"
-        },
-        children: /*#__PURE__*/ _jsxs(SegmentGroup, {
-            children: [
-                /*#__PURE__*/ _jsxs(Segment, {
-                    heading: "Today's Payment",
-                    children: [
-                        /*#__PURE__*/ _jsxs("div", {
-                            style: {
-                                display: "grid",
-                                gridTemplateColumns: "2fr 1fr",
-                                alignItems: "flex-end",
-                                rowGap: "8px"
-                            },
-                            children: [
-                                /*#__PURE__*/ _jsx(Text, {
-                                    variant: "small",
-                                    children: "General liability\\*"
-                                }),
-                                /*#__PURE__*/ _jsx(Text, {
-                                    variant: "small",
-                                    style: {
-                                        justifySelf: "flex-end"
-                                    },
-                                    children: "$300.00"
-                                }),
-                                /*#__PURE__*/ _jsx(Text, {
-                                    variant: "small",
-                                    children: "Contractor's equipment and small tools"
-                                }),
-                                /*#__PURE__*/ _jsx(Text, {
-                                    variant: "small",
-                                    style: {
-                                        justifySelf: "flex-end"
-                                    },
-                                    children: "$80.00"
-                                }),
-                                /*#__PURE__*/ _jsx(Text, {
-                                    variant: "small",
-                                    children: "Cyber insurance"
-                                }),
-                                /*#__PURE__*/ _jsx(Text, {
-                                    variant: "small",
-                                    style: {
-                                        justifySelf: "flex-end"
-                                    },
-                                    children: "$250.00"
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ _jsx(Divider, {}),
-                        /*#__PURE__*/ _jsxs("div", {
-                            style: {
-                                display: "grid",
-                                gridTemplateColumns: "2fr 1fr",
-                                alignItems: "flex-end",
-                                rowGap: "8px",
-                                width: "100%"
-                            },
-                            children: [
-                                /*#__PURE__*/ _jsx(Text, {
-                                    variant: "small",
-                                    children: /*#__PURE__*/ _jsx("strong", {
-                                        children: "To pay today"
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsx(Text, {
-                                    variant: "small",
-                                    style: {
-                                        justifySelf: "flex-end"
-                                    },
-                                    children: /*#__PURE__*/ _jsx("strong", {
-                                        children: "$630.00"
-                                    })
-                                })
-                            ]
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ _jsx(Segment, {
-                    heading: "Monthly Payments",
-                    children: /*#__PURE__*/ _jsxs("div", {
-                        style: {
-                            display: "grid",
-                            gridTemplateColumns: "2fr 1fr",
-                            alignItems: "flex-end",
-                            rowGap: "8px",
-                            width: "100%"
-                        },
-                        children: [
-                            /*#__PURE__*/ _jsx(Text, {
-                                variant: "small",
-                                children: /*#__PURE__*/ _jsx("strong", {
-                                    children: "First monthly payment taken"
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(Text, {
-                                variant: "small",
-                                style: {
-                                    justifySelf: "flex-end"
-                                },
-                                children: "01/01/2022"
-                            }),
-                            /*#__PURE__*/ _jsx(Text, {
-                                variant: "small",
-                                children: "8 monthly payments of"
-                            }),
-                            /*#__PURE__*/ _jsx(Text, {
-                                variant: "small",
-                                style: {
-                                    justifySelf: "flex-end"
-                                },
-                                children: "$120.00"
-                            }),
-                            /*#__PURE__*/ _jsx(Text, {
-                                variant: "small",
-                                children: "Then 2 monthly payments of"
-                            }),
-                            /*#__PURE__*/ _jsx(Text, {
-                                variant: "small",
-                                style: {
-                                    justifySelf: "flex-end"
-                                },
-                                children: "$90.00"
-                            })
-                        ]
-                    })
-                }),
-                /*#__PURE__*/ _jsx(Segment, {
-                    colour: "subtle",
-                    children: /*#__PURE__*/ _jsxs(Flex, {
-                        style: {
-                            width: "100%"
-                        },
-                        justifyContent: "space-between",
-                        children: [
-                            /*#__PURE__*/ _jsxs(Text, {
-                                children: [
-                                    /*#__PURE__*/ _jsx("strong", {
-                                        children: "Total"
-                                    }),
-                                    " (inc. tax + fees)"
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsx(Text, {
-                                children: /*#__PURE__*/ _jsx("strong", {
-                                    children: "$1,770.00"
-                                })
-                            })
-                        ]
-                    })
-                })
-            ]
-        })
-    });
-export default meta;
-
-//# sourceMappingURL=Segment.stories.js.map

package/dist/esm/components/Segment/Segment.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/Segment/Segment.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { Segment, SegmentProps } from \"./Segment\";\nimport { SegmentGroup, SegmentGroupProps } from \"./SegmentGroup\";\nimport {\n  Text,\n  Flex,\n  TextField,\n  TextArea,\n  RadioGroup,\n  Radio,\n  Select,\n  Option,\n  Divider,\n} from \"..\";\n\ntype StoryType = StoryObj<typeof Segment>;\n\nconst meta: Meta<typeof Segment> = {\n  title: \"Layout/Segment\",\n  component: Segment,\n  excludeStories: [\n    \"ColouredBackground\",\n    \"HorizontalStack2\",\n    \"HorizontalStack3\",\n    \"Nested2\",\n    \"Nested3\",\n    \"BottomMarginRemoved\",\n    \"CompoundLayout\",\n    \"MarginAround\",\n    \"PaymentDetails\",\n  ],\n  argTypes: {\n    colour: {\n      control: { type: \"select\" },\n      options: [\"\", \"primary\", \"secondary\", \"grey\", \"subtle\"],\n    },\n    inverted: {\n      control: { type: \"boolean\" },\n      if: {\n        arg: \"colour\",\n      },\n    },\n  },\n};\n\nconst sizeOptions = [\n  \"\",\n  \"size-xs\",\n  \"size-s\",\n  \"size-m\",\n  \"size-l\",\n  \"size-xl\",\n  \"size-xxl\",\n];\n\nexport const Single: StoryType = {\n  render: (args: SegmentProps) => (\n    <Segment {...args}>\n      <Flex\n        style={{\n          width: \"100%\",\n        }}\n        justifyContent=\"space-between\"\n      >\n        <Text>General liability*</Text>\n        <Text>$300.00</Text>\n      </Flex>\n      <Flex\n        style={{\n          width: \"100%\",\n        }}\n        justifyContent=\"space-between\"\n      >\n        <Text>Contractor&lsquo;s equipment and small tools</Text>\n        <Text>$80.00</Text>\n      </Flex>\n      <Flex\n        style={{\n          width: \"100%\",\n        }}\n        justifyContent=\"space-between\"\n      >\n        <Text>Cyber insurance</Text>\n        <Text>$250.00</Text>\n      </Flex>\n    </Segment>\n  ),\n  args: {\n    heading: \"Today's Payment\",\n    inverted: false,\n  },\n};\n\nexport const VerticalStack: StoryType = {\n  render: (args: SegmentProps) => (\n    <SegmentGroup>\n      <Segment {...args}>Item</Segment>\n      <Segment>Item</Segment>\n      <Segment>Item</Segment>\n    </SegmentGroup>\n  ),\n  args: {\n    heading: \"\",\n    inverted: true,\n  },\n};\n\nexport const HorizontalStack: Meta<typeof SegmentGroup> = {\n  render: (args: SegmentGroupProps) => (\n    <SegmentGroup {...args}>\n      <Segment>Item</Segment>\n      <Segment>Item</Segment>\n      <Segment>Item</Segment>\n    </SegmentGroup>\n  ),\n  args: {\n    horizontal: true,\n    margin: \"size-xs\",\n  },\n  argTypes: {\n    margin: {\n      control: { type: \"select\" },\n      options: [...sizeOptions],\n    },\n  },\n  parameters: {\n    controls: {\n      exclude: [\"heading\", \"colour\"],\n    },\n  },\n};\n\nexport const Nested: StoryType = {\n  render: (args: SegmentProps) => (\n    <Segment {...args}>\n      <SegmentGroup>\n        <Segment>Item</Segment>\n        <Segment>Item</Segment>\n        <Segment>Item</Segment>\n      </SegmentGroup>\n    </Segment>\n  ),\n  args: {\n    heading: \"Today's Payment\",\n    inverted: false,\n  },\n};\n\nexport const Nested2 = () => (\n  <Segment>\n    <SegmentGroup>\n      <Segment>Item</Segment>\n      <Segment>Item</Segment>\n    </SegmentGroup>\n  </Segment>\n);\n\nexport const Nested3 = () => (\n  <Segment heading=\"Today's Payment\">\n    <Segment>Item</Segment>\n  </Segment>\n);\n\nexport const ColouredBackground = () => (\n  <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\" }}>\n    <Segment colour=\"subtle\">Subtle</Segment>\n    <Segment colour=\"secondary\">Secondary</Segment>\n    <Segment inverted colour=\"primary\">\n      Primary\n    </Segment>\n    <Segment inverted colour=\"secondary\">\n      Secondary\n    </Segment>\n  </div>\n);\n\nexport const HorizontalStack2 = () => (\n  <SegmentGroup horizontal>\n    <Segment>Item</Segment>\n    <Segment>Item</Segment>\n  </SegmentGroup>\n);\n\nexport const HorizontalStack3 = () => (\n  <SegmentGroup horizontal>\n    <Segment>Item</Segment>\n  </SegmentGroup>\n);\n\nexport const BottomMarginRemoved = () => (\n  <SegmentGroup horizontal>\n    <Segment>\n      <TextField label=\"First name\" />\n      <TextArea label=\"Address\" />\n    </Segment>\n    <Segment colour=\"subtle\">\n      <RadioGroup label=\"Colour\">\n        <Radio value=\"red\" label=\"Red\" />\n        <Radio value=\"blue\" label=\"Blue\" />\n      </RadioGroup>\n      <Select label=\"Selection\">\n        <Option>Please select a color</Option>\n        <Option key=\"red\" value=\"red\">\n          Red\n        </Option>\n        <Option key=\"blue\" value=\"blue\">\n          Blue\n        </Option>\n        <Option key=\"green\" value=\"green\">\n          Green\n        </Option>\n      </Select>\n    </Segment>\n  </SegmentGroup>\n);\n\nexport const CompoundLayout = () => (\n  <SegmentGroup horizontal>\n    <SegmentGroup>\n      <Segment>General liability</Segment>\n      <Segment>Business property and equipment</Segment>\n      <Segment>Total</Segment>\n    </SegmentGroup>\n    <SegmentGroup>\n      <Segment>Payment Options</Segment>\n    </SegmentGroup>\n  </SegmentGroup>\n);\n\nexport const MarginAround = () => (\n  <SegmentGroup>\n    <Segment>Top</Segment>\n    <SegmentGroup margin=\"size-s\">\n      <Segment>Nested Top</Segment>\n      <Segment>Nested Middle</Segment>\n      <Segment>Nested Bottom</Segment>\n    </SegmentGroup>\n    <SegmentGroup horizontal>\n      <Segment>Top</Segment>\n      <Segment>Middle</Segment>\n      <Segment>Bottom</Segment>\n    </SegmentGroup>\n    <Segment>Bottom</Segment>\n  </SegmentGroup>\n);\n\nexport const PaymentDetails = () => (\n  <div style={{ width: \"340px\" }}>\n    <SegmentGroup>\n      <Segment heading=\"Today's Payment\">\n        <div\n          style={{\n            display: \"grid\",\n            gridTemplateColumns: \"2fr 1fr\",\n            alignItems: \"flex-end\",\n            rowGap: \"8px\",\n          }}\n        >\n          <Text variant=\"small\">General liability\\*</Text>\n          <Text variant=\"small\" style={{ justifySelf: \"flex-end\" }}>\n            $300.00\n          </Text>\n          <Text variant=\"small\">\n            Contractor&apos;s equipment and small tools\n          </Text>\n          <Text variant=\"small\" style={{ justifySelf: \"flex-end\" }}>\n            $80.00\n          </Text>\n          <Text variant=\"small\">Cyber insurance</Text>\n          <Text variant=\"small\" style={{ justifySelf: \"flex-end\" }}>\n            $250.00\n          </Text>\n        </div>\n        <Divider />\n        <div\n          style={{\n            display: \"grid\",\n            gridTemplateColumns: \"2fr 1fr\",\n            alignItems: \"flex-end\",\n            rowGap: \"8px\",\n            width: \"100%\",\n          }}\n        >\n          <Text variant=\"small\">\n            <strong>To pay today</strong>\n          </Text>\n          <Text variant=\"small\" style={{ justifySelf: \"flex-end\" }}>\n            <strong>$630.00</strong>\n          </Text>\n        </div>\n      </Segment>\n      <Segment heading=\"Monthly Payments\">\n        <div\n          style={{\n            display: \"grid\",\n            gridTemplateColumns: \"2fr 1fr\",\n            alignItems: \"flex-end\",\n            rowGap: \"8px\",\n            width: \"100%\",\n          }}\n        >\n          <Text variant=\"small\">\n            <strong>First monthly payment taken</strong>\n          </Text>\n          <Text variant=\"small\" style={{ justifySelf: \"flex-end\" }}>\n            01/01/2022\n          </Text>\n          <Text variant=\"small\">8 monthly payments of</Text>\n          <Text variant=\"small\" style={{ justifySelf: \"flex-end\" }}>\n            $120.00\n          </Text>\n          <Text variant=\"small\">Then 2 monthly payments of</Text>\n          <Text variant=\"small\" style={{ justifySelf: \"flex-end\" }}>\n            $90.00\n          </Text>\n        </div>\n      </Segment>\n      <Segment colour=\"subtle\">\n        <Flex style={{ width: \"100%\" }} justifyContent=\"space-between\">\n          <Text>\n            <strong>Total</strong> (inc. tax + fees)\n          </Text>\n          <Text>\n            <strong>$1,770.00</strong>\n          </Text>\n        </Flex>\n      </Segment>\n    </SegmentGroup>\n  </div>\n);\n\nexport default meta;\n"],"names":["Segment","SegmentGroup","Text","Flex","TextField","TextArea","RadioGroup","Radio","Select","Option","Divider","meta","title","component","excludeStories","argTypes","colour","control","type","options","inverted","if","arg","sizeOptions","Single","render","args","style","width","justifyContent","heading","VerticalStack","HorizontalStack","horizontal","margin","parameters","controls","exclude","Nested","Nested2","Nested3","ColouredBackground","div","display","flexDirection","gap","HorizontalStack2","HorizontalStack3","BottomMarginRemoved","label","value","CompoundLayout","MarginAround","PaymentDetails","gridTemplateColumns","alignItems","rowGap","variant","justifySelf","strong"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}