@westpac/ui 0.3.0 → 0.5.0

package/dist/components/flexi-cell/flexi-cell.stories.js

@@ -0,0 +1,764 @@
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+import { ArrowRightIcon, InfoIcon, TickCircleIcon } from '../icon/index.js';
+import { Badge, Button, Circle } from '../index.js';
+import { GiftPictogram } from '../pictogram/index.js';
+import { FlexiCell } from './flexi-cell.component.js';
+const meta = {
+    title: 'Example/FlexiCell',
+    component: FlexiCell,
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement("div", {
+                className: "p-3"
+            }, React.createElement(Story, null))
+    ],
+    argTypes: {
+        after: {
+            description: 'Renders an element on the right',
+            type: {
+                name: 'string'
+            }
+        },
+        badge: {
+            description: 'Renders an element on the top right corner',
+            type: {
+                name: 'string'
+            }
+        },
+        badgeZIndex: {
+            description: 'zIndex for badge',
+            type: {
+                name: 'number'
+            }
+        },
+        before: {
+            description: 'Renders an element on the left',
+            type: {
+                name: 'string'
+            }
+        },
+        body: {
+            description: 'Injects the FlexiCell.Body inside of the children',
+            type: {
+                name: 'boolean'
+            }
+        },
+        children: {
+            description: 'The middle content of FlexiCell',
+            type: {
+                name: 'string'
+            }
+        },
+        href: {
+            description: 'href in case it is an "a" tag',
+            type: {
+                name: 'string'
+            }
+        },
+        withArrow: {
+            description: 'Adds an arrow on top right',
+            type: {
+                name: 'boolean'
+            }
+        },
+        withBorder: {
+            description: 'Adds a border radius and a border',
+            type: {
+                name: 'boolean'
+            }
+        }
+    },
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export default meta;
+export const DefaultStory = {
+    args: {
+        tag: 'a',
+        href: '#',
+        withBorder: true,
+        body: true,
+        after: 'after',
+        before: 'before',
+        children: React.createElement(React.Fragment, null, React.createElement(FlexiCell.Label, {
+            tag: "h3"
+        }, "Label"), React.createElement(FlexiCell.Hint, null, "Hint"))
+    }
+};
+export const CreditCardStory = {
+    args: {
+        tag: 'a',
+        href: '#',
+        withBorder: true,
+        body: true,
+        after: React.createElement(FlexiCell.Adornment, {
+            align: "top"
+        }, React.createElement(FlexiCell.Label, {
+            tag: "h3"
+        }, "$9,999.99"), React.createElement(FlexiCell.Hint, null, "avail $9,999.99")),
+        children: React.createElement(React.Fragment, null, React.createElement(FlexiCell.Label, {
+            tag: "h3"
+        }, "Credit card"), React.createElement(FlexiCell.Hint, null, "Card ending in 1234"))
+    }
+};
+export const AccountStory = {
+    args: {
+        tag: 'a',
+        href: '#',
+        withBorder: true,
+        body: true,
+        after: React.createElement(FlexiCell.Adornment, {
+            align: "top"
+        }, React.createElement(FlexiCell.Label, {
+            tag: "h3"
+        }, "$9,999.99")),
+        children: React.createElement(React.Fragment, null, React.createElement(FlexiCell.Label, {
+            tag: "h3"
+        }, "Account"), React.createElement(FlexiCell.Hint, null, "032-123 12345678"))
+    }
+};
+export const PayeeStory = {
+    args: {
+        tag: 'a',
+        href: '#',
+        withBorder: true,
+        body: true,
+        before: React.createElement(Circle, {
+            className: "bg-primary text-white",
+            "aria-label": "Bruce"
+        }, "B"),
+        after: React.createElement(FlexiCell.Adornment, {
+            align: "center"
+        }, React.createElement(FlexiCell.Hint, {
+            className: "text-muted"
+        }, "Fri 5 Aug")),
+        children: React.createElement(React.Fragment, null, React.createElement("h3", {
+            className: "typography-body-8 font-normal"
+        }, "Payee"), React.createElement("small", {
+            className: "text-muted"
+        }, "Payee details"))
+    }
+};
+export const PayeeWithInfoStory = {
+    args: {
+        withBorder: true,
+        body: true,
+        before: React.createElement(Circle, {
+            className: "bg-muted text-white",
+            "aria-label": "Walter White"
+        }, "WW"),
+        after: React.createElement(FlexiCell.Adornment, {
+            align: "center"
+        }, React.createElement(Button, {
+            look: "link",
+            href: "/somewhere",
+            iconBefore: InfoIcon,
+            "aria-label": "more info"
+        })),
+        children: React.createElement("a", {
+            href: "#",
+            className: "group text-[inherit] decoration-[inherit] focus:focus-outline"
+        }, React.createElement("h3", {
+            className: "typography-body-8 font-normal"
+        }, "Payee"), React.createElement("small", {
+            className: "text-muted"
+        }, "Payee details"))
+    }
+};
+export const FlagPayeeStory = {
+    args: {
+        withBorder: true,
+        body: true,
+        before: React.createElement("div", null, "Flag"),
+        after: React.createElement(FlexiCell.Adornment, {
+            align: "center"
+        }, React.createElement(Button, {
+            look: "link",
+            href: "/somewhere",
+            iconBefore: InfoIcon,
+            "aria-label": "more info"
+        })),
+        children: React.createElement("a", {
+            href: "#",
+            className: "group text-[inherit] decoration-[inherit] focus:focus-outline"
+        }, React.createElement("h3", {
+            className: "typography-body-8 font-normal"
+        }, "Payee"), React.createElement("small", {
+            className: "text-muted"
+        }, "Payee details"))
+    }
+};
+export const ListItemWithFlagStory = {
+    args: {
+        tag: 'a',
+        href: '#',
+        withBorder: true,
+        body: true,
+        before: React.createElement("div", null, "Flag"),
+        children: React.createElement("h3", {
+            className: "typography-body-8 font-normal"
+        }, "List item")
+    }
+};
+export const ListItemStory = {
+    args: {
+        tag: 'a',
+        href: '#',
+        withBorder: true,
+        body: true,
+        children: React.createElement("h3", {
+            className: "typography-body-8 font-normal"
+        }, "List item")
+    }
+};
+export const WestpacSpecialProductStory = {
+    args: {
+        tag: 'a',
+        href: '#',
+        withBorder: true,
+        body: true,
+        after: React.createElement(FlexiCell.Adornment, {
+            align: "top"
+        }, React.createElement(ArrowRightIcon, {
+            color: "link",
+            "aria-hidden": "true"
+        })),
+        children: React.createElement(React.Fragment, null, React.createElement(GiftPictogram, {
+            mode: "duo",
+            className: "h-[50px] w-[50px]",
+            "aria-hidden": "true"
+        }), React.createElement("h3", {
+            className: "typography-body-8 font-normal"
+        }, "Westpac specials and product offers"), React.createElement(FlexiCell.Hint, null, "Discounts and cashback from select merchants & product offers from Westpac"))
+    }
+};
+export const FlexiCellWithImageStory = {
+    args: {
+        tag: 'a',
+        href: '#',
+        withBorder: true,
+        body: true,
+        children: React.createElement(React.Fragment, null, React.createElement("img", {
+            src: "https://images.unsplash.com/photo-1657299170950-87e5b0eaf77c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80",
+            alt: "",
+            className: "mb-2 block w-full"
+        }), React.createElement(FlexiCell.Label, {
+            className: "mb-[0.5rem]"
+        }, "MYER"), React.createElement("h3", {
+            className: "typography-body-8 font-normal"
+        }, "Westpac specials and product offers"))
+    }
+};
+export const StickyFooterExampleStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement("div", {
+            className: "flex flex-col gap-2 lg:flex-row"
+        }, [
+            'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quae possimus, nam nobis cumque ullam et harum, magni quam distinctio, corporis sunt saepe maxime quod. Sapiente voluptatibus sint dicta tenetur.',
+            'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quae possimus, nam nobis cumque ullam et harum, magni quam distinctio, corporis sunt saepe.',
+            'Lorem ipsum dolor sit amet'
+        ].map((title)=>React.createElement(FlexiCell, {
+                withBorder: true,
+                key: title,
+                badge: React.createElement(Badge, {
+                    className: "block",
+                    color: "primary"
+                }, "Badge")
+            }, React.createElement(FlexiCell.Body, null, React.createElement("img", {
+                src: "https://images.unsplash.com/photo-1657299170950-87e5b0eaf77c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80",
+                alt: "",
+                className: "mb-2 block w-full"
+            }), React.createElement(FlexiCell.Label, {
+                className: "mb-[0.5rem]"
+            }, "MYER"), React.createElement("h3", {
+                className: "typography-body-8 font-normal"
+            }, title)), React.createElement(FlexiCell.Footer, null, React.createElement(Button, {
+                size: "small",
+                soft: true
+            }, "Share")))));
+    }
+};
+const MOCK_ACCOUNTS = [
+    {
+        title: 'Cash',
+        id: 'cash',
+        accounts: [
+            {
+                name: 'Westpac Choice',
+                amount: '$1,234.99',
+                number: '732-123 746587'
+            },
+            {
+                name: 'Offset account for loan',
+                amount: '$20,000.00',
+                number: '732-123 123456'
+            }
+        ]
+    },
+    {
+        title: 'Foreign currency',
+        id: 'foreign-currency',
+        accounts: [
+            {
+                name: 'US Dollar Currency Account',
+                amount: '$3,957.57',
+                number: '123-456 1234567'
+            },
+            {
+                name: 'British pound Currency Account',
+                amount: '$9,999,999,999.99',
+                number: '123-456 1234567'
+            }
+        ]
+    },
+    {
+        title: 'Credit cards',
+        id: 'credit-cards',
+        accounts: [
+            {
+                name: 'Altitude Black World Mastercard',
+                amount: '-$3,957.57',
+                number: 'Card ending in 1234'
+            }
+        ]
+    }
+];
+export const AccountListStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement("div", {
+            className: "flex flex-col gap-2"
+        }, MOCK_ACCOUNTS.map(({ title , id , accounts  })=>React.createElement("div", {
+                key: id,
+                className: "flex flex-col gap-3"
+            }, React.createElement("h3", {
+                className: "m-0 font-normal"
+            }, title), React.createElement("div", {
+                className: "flex flex-col gap-2"
+            }, accounts.map(({ name , amount , number  })=>React.createElement(FlexiCell, {
+                    tag: "a",
+                    href: "#",
+                    body: true,
+                    withBorder: true,
+                    key: name,
+                    after: React.createElement(FlexiCell.Adornment, {
+                        align: "top"
+                    }, React.createElement(FlexiCell.Label, {
+                        className: "font-semibold",
+                        tag: "h4"
+                    }, amount), React.createElement(FlexiCell.Hint, null, "available"))
+                }, React.createElement(FlexiCell.Label, {
+                    className: "font-normal",
+                    tag: "h4"
+                }, name), React.createElement(FlexiCell.Hint, null, number)))))));
+    }
+};
+const MOCK_PAYEES = [
+    {
+        title: 'Recently Paid',
+        id: 'recently-paid',
+        payees: [
+            {
+                initials: 'AJ',
+                name: 'Andrew Jones',
+                paidAt: 'Fri 5 Aug',
+                number: '123-986 463846'
+            },
+            {
+                initials: 'JW',
+                name: 'Joss Wight',
+                paidAt: 'Mon 1 Aug',
+                number: '098-567 465352'
+            }
+        ]
+    },
+    {
+        title: 'A',
+        id: 'a',
+        payees: [
+            {
+                initials: 'AO',
+                name: 'Active OOSH',
+                number: '857-434 856383',
+                paidAt: undefined
+            },
+            {
+                initials: 'AC',
+                name: 'Alice Cartwright',
+                number: '950-456 345363',
+                paidAt: undefined
+            }
+        ]
+    },
+    {
+        title: 'B',
+        id: 'b',
+        payees: [
+            {
+                initials: 'BN',
+                name: 'Benjamin North',
+                number: '098-123 745362',
+                paidAt: undefined
+            }
+        ]
+    }
+];
+export const PayeeListStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement("div", {
+            className: "flex flex-col gap-2"
+        }, MOCK_PAYEES.map(({ title , id , payees  })=>React.createElement("div", {
+                key: id,
+                className: "flex flex-col gap-3"
+            }, React.createElement("h3", {
+                className: "m-0 border-b border-border pb-1 font-normal"
+            }, title), React.createElement("div", {
+                className: "flex flex-col gap-3"
+            }, payees.map(({ name , initials , paidAt , number  })=>{
+                return React.createElement(FlexiCell, _extends({}, paidAt ? {
+                    href: '#',
+                    tag: 'a'
+                } : {
+                    tag: 'div'
+                }, {
+                    key: name,
+                    className: "group",
+                    body: true,
+                    before: React.createElement(FlexiCell.Adornment, {
+                        align: "top"
+                    }, React.createElement(FlexiCell.Circle, {
+                        className: "bg-muted text-white",
+                        "aria-hidden": "true"
+                    }, initials)),
+                    after: React.createElement(FlexiCell.Adornment, {
+                        align: "center"
+                    }, paidAt ? React.createElement(FlexiCell.Hint, {
+                        tag: "h4"
+                    }, paidAt) : React.createElement(FlexiCell.Button, {
+                        tag: "a",
+                        href: "/somewhere",
+                        iconBefore: InfoIcon,
+                        "aria-label": "more info"
+                    }))
+                }), paidAt ? React.createElement(React.Fragment, null, React.createElement(FlexiCell.Label, {
+                    className: "font-medium",
+                    tag: "h4"
+                }, name), React.createElement(FlexiCell.Hint, null, number)) : React.createElement("a", {
+                    href: "#",
+                    className: "text-[inherit] decoration-[inherit] focus:focus-outline"
+                }, React.createElement(FlexiCell.Label, {
+                    className: "font-medium",
+                    tag: "h4"
+                }, name), React.createElement(FlexiCell.Hint, null, number)));
+            })))));
+    }
+};
+const MOCK_COUNTRIES = [
+    {
+        title: 'Popular',
+        id: 'popular',
+        payees: [
+            {
+                code: 'IN',
+                name: 'India'
+            },
+            {
+                code: 'UK',
+                name: 'United Kingdom'
+            },
+            {
+                code: 'USA',
+                name: 'United States'
+            }
+        ]
+    },
+    {
+        title: 'A',
+        id: 'a',
+        payees: [
+            {
+                code: 'AI',
+                name: 'Ascension Islands'
+            },
+            {
+                code: 'AN',
+                name: 'Andorra'
+            },
+            {
+                code: 'UA',
+                name: 'United Arab Emirates'
+            },
+            {
+                code: 'AF',
+                name: 'Afghanistan'
+            }
+        ]
+    }
+];
+export const CountryListStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement("div", {
+            className: "flex flex-col gap-2"
+        }, MOCK_COUNTRIES.map(({ title , id , payees  })=>React.createElement("div", {
+                key: id,
+                className: "flex flex-col gap-3"
+            }, React.createElement("h3", {
+                className: "m-0 border-b border-b-border pb-1 font-normal"
+            }, title), React.createElement("div", {
+                className: "flex flex-col gap-3"
+            }, payees.map(({ name  })=>{
+                return React.createElement(FlexiCell, {
+                    tag: "a",
+                    href: "#",
+                    withBorder: true,
+                    body: true,
+                    key: name,
+                    before: React.createElement(FlexiCell.Adornment, {
+                        align: "top"
+                    }, React.createElement("svg", {
+                        width: "30",
+                        height: "24",
+                        viewBox: "0 0 640 480",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        "aria-hidden": "true"
+                    }, React.createElement("path", {
+                        d: "M0 0H640V480H0V0Z",
+                        fill: "white"
+                    }), React.createElement("path", {
+                        d: "M0 0H213.3V480H0V0Z",
+                        fill: "#002654"
+                    }), React.createElement("path", {
+                        d: "M426.7 0H640V480H426.7V0Z",
+                        fill: "#CE1126"
+                    })))
+                }, React.createElement(FlexiCell.Label, {
+                    className: "font-medium",
+                    tag: "span"
+                }, name));
+            })))));
+    }
+};
+export const ForeignCurrencyListStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement("div", {
+            className: "flex flex-col gap-2"
+        }, MOCK_PAYEES.map(({ title , id , payees  })=>React.createElement("div", {
+                key: id,
+                className: "flex flex-col gap-3"
+            }, React.createElement("h3", {
+                className: "m-0 border-b border-b-border pb-1 font-normal"
+            }, title), React.createElement("div", {
+                className: "flex flex-col gap-3"
+            }, payees.map(({ name , paidAt , number  })=>{
+                return React.createElement(FlexiCell, _extends({}, paidAt ? {
+                    href: '#',
+                    tag: 'a'
+                } : {
+                    tag: 'div'
+                }, {
+                    body: true,
+                    className: "group",
+                    key: name,
+                    before: React.createElement(FlexiCell.Adornment, {
+                        align: "top"
+                    }, React.createElement("svg", {
+                        width: "30",
+                        height: "24",
+                        viewBox: "0 0 640 480",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        "aria-label": "French flag"
+                    }, React.createElement("path", {
+                        d: "M0 0H640V480H0V0Z",
+                        fill: "white"
+                    }), React.createElement("path", {
+                        d: "M0 0H213.3V480H0V0Z",
+                        fill: "#002654"
+                    }), React.createElement("path", {
+                        d: "M426.7 0H640V480H426.7V0Z",
+                        fill: "#CE1126"
+                    }))),
+                    after: React.createElement(FlexiCell.Adornment, {
+                        align: "center"
+                    }, paidAt ? React.createElement(FlexiCell.Hint, {
+                        tag: "h4"
+                    }, paidAt) : React.createElement(FlexiCell.Button, {
+                        href: "/somewhere",
+                        iconBefore: InfoIcon,
+                        "aria-label": "more info"
+                    }))
+                }), paidAt ? React.createElement(React.Fragment, null, React.createElement(FlexiCell.Label, {
+                    className: "font-medium",
+                    tag: "h4"
+                }, name), React.createElement(FlexiCell.Hint, null, number)) : React.createElement("a", {
+                    href: "#",
+                    className: "text-[inherit] decoration-[inherit] focus:focus-outline"
+                }, React.createElement(FlexiCell.Label, {
+                    className: "font-medium",
+                    tag: "h4"
+                }, name), React.createElement(FlexiCell.Hint, null, number)));
+            })))));
+    }
+};
+const MOCK_PROMOS = [
+    {
+        title: 'Get 50% Off on All Products',
+        subtitle: 'Limited time offer! Save big on our entire range of products.',
+        stars: true
+    },
+    {
+        title: 'Exclusive Membership Benefits',
+        subtitle: 'Unlock premium features and discounts with our membership program.',
+        stars: false
+    },
+    {
+        title: 'New Arrival Alert!',
+        subtitle: 'Discover the latest arrivals and stay ahead of the trend.',
+        stars: false
+    },
+    {
+        title: 'Weekend Special Sale',
+        subtitle: "Don't miss out on our weekend sale with massive discounts!",
+        stars: false
+    }
+];
+export const PromotilesHorizontalListStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement("div", {
+            className: "flex flex-col gap-2"
+        }, MOCK_PROMOS.map(({ title , subtitle , stars  })=>{
+            return React.createElement(FlexiCell, {
+                tag: "a",
+                href: "#",
+                key: title,
+                withBorder: true,
+                body: true,
+                before: React.createElement(FlexiCell.Adornment, {
+                    align: "center"
+                }, React.createElement(Circle, {
+                    className: "h-[70px] w-[70px]"
+                }, "Target")),
+                badge: React.createElement(Badge, {
+                    className: "block",
+                    color: "hero",
+                    "aria-hidden": stars !== null && stars !== void 0 ? stars : 'true'
+                }, stars ? '✭' : 'Corner flag')
+            }, React.createElement("small", null, "MYER"), React.createElement(FlexiCell.Label, {
+                className: "font-medium",
+                tag: "h4"
+            }, title), React.createElement(FlexiCell.Hint, null, subtitle), React.createElement("div", {
+                className: "mt-2 flex gap-2"
+            }, React.createElement(Badge, {
+                color: "primary"
+            }, "Badge1"), React.createElement(Badge, {
+                color: "primary"
+            }, "Badge2")));
+        }));
+    }
+};
+export const PromotilesVerticalListStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement("div", {
+            className: "flex flex-col gap-2"
+        }, React.createElement("div", {
+            className: "flex gap-3"
+        }, MOCK_PROMOS.map(({ title , subtitle  })=>React.createElement(FlexiCell, {
+                withBorder: true,
+                key: title,
+                className: "group",
+                badge: React.createElement(Badge, {
+                    className: "block",
+                    color: "hero"
+                }, "Badge")
+            }, React.createElement(FlexiCell.Body, {
+                tag: "a",
+                href: "#",
+                className: "text-[inherit] decoration-[inherit] focus:focus-outline"
+            }, React.createElement("img", {
+                src: "https://images.unsplash.com/photo-1657299170950-87e5b0eaf77c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80",
+                alt: "",
+                className: "block h-[63px] w-full object-cover"
+            }), React.createElement("small", null, "MYER"), React.createElement(FlexiCell.Label, {
+                className: "font-medium",
+                tag: "h4"
+            }, title), React.createElement(FlexiCell.Hint, null, subtitle)), React.createElement(FlexiCell.Footer, null, React.createElement("div", {
+                className: "mt-2 flex gap-2"
+            }, React.createElement("a", {
+                href: "#",
+                className: "focus:focus-outline"
+            }, React.createElement(Badge, {
+                color: "primary"
+            }, "Badge1")), React.createElement("a", {
+                href: "#",
+                className: "focus:focus-outline"
+            }, React.createElement(Badge, {
+                color: "primary"
+            }, "Badge2"))))))));
+    }
+};
+const MOCK_PRODUCTS = [
+    {
+        title: 'This is talking about the bonus.',
+        subtitle: 'This is more about the bonus and all the other exciting things about this.'
+    },
+    {
+        title: 'This is a longer heading talking all about the bonus this one wraps.',
+        subtitle: 'This is more about the bonus'
+    },
+    {
+        title: 'This is talking about the bonus.',
+        subtitle: 'This is more about the bonus and all the other exciting things about this.'
+    }
+];
+export const ProductTilesStory = {
+    args: {},
+    render: ()=>{
+        return React.createElement("div", {
+            className: "flex flex-col gap-2"
+        }, MOCK_PRODUCTS.map(({ title , subtitle  })=>React.createElement(FlexiCell, {
+                tag: "a",
+                href: "#",
+                withBorder: true,
+                withArrow: true,
+                body: true,
+                key: title,
+                after: React.createElement(TickCircleIcon, {
+                    color: "success"
+                })
+            }, React.createElement("div", {
+                className: "flex flex-col gap-2 md:flex-row"
+            }, React.createElement(GiftPictogram, {
+                mode: "duo",
+                className: "h-[24px] w-[24px]",
+                "aria-hidden": "true"
+            }), React.createElement("div", {
+                className: "flex flex-col gap-1"
+            }, React.createElement(FlexiCell.Label, {
+                className: "font-medium",
+                tag: "h4"
+            }, title), React.createElement(FlexiCell.Hint, null, subtitle))))));
+    }
+};