@obosbbl/grunnmuren-react 3.4.2 → 3.4.3

package/dist/__stories__/layout.stories.js

@@ -0,0 +1,562 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ArrowRight } from '@obosbbl/grunnmuren-icons-react';
+import { cva, cx } from 'cva';
+import { useContextProps, Provider, Link, GroupContext } from 'react-aria-components';
+import { createContext } from 'react';
+
+const HeadingContext = /*#__PURE__*/ createContext({});
+const headingVariants = cva({
+    variants: {
+        /** The visual text size of the heading */ size: {
+            xl: 'heading-xl',
+            l: 'heading-l',
+            m: 'heading-m',
+            s: 'heading-s',
+            xs: 'heading-xs'
+        }
+    }
+});
+const Heading = ({ ref = null, ...props })=>{
+    [props, ref] = useContextProps(props, ref, HeadingContext);
+    const { children, level, size, className, _innerWrapper: innerWrapper, _outerWrapper: outerWrapper, ...restProps } = props;
+    const _className = headingVariants({
+        size
+    });
+    const Element = `h${level}`;
+    const content = /*#__PURE__*/ jsx(Element, {
+        ...restProps,
+        className: cx(className, _className),
+        "data-slot": "heading",
+        children: innerWrapper ? innerWrapper(children) : children
+    });
+    return outerWrapper ? outerWrapper(content) : content;
+};
+const ContentContext = /*#__PURE__*/ createContext({});
+const Content = ({ ref = null, ...props })=>{
+    [props, ref] = useContextProps(props, ref, ContentContext);
+    const { _outerWrapper: outerWrapper, ...restProps } = props;
+    const content = /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        "data-slot": "content"
+    });
+    return outerWrapper ? outerWrapper(content) : content;
+};
+const mediaVariant = cva({
+    variants: {
+        /**
+     * Control how the content should be placed with the object-fit property
+     * You might for example want to use `fit="contain"` portrait images that should not be cropped
+     * @default cover
+     * */ fit: {
+            cover: '*:object-cover',
+            contain: '*:object-contain'
+        }
+    }
+});
+const MediaContext = /*#__PURE__*/ createContext({});
+const Media = ({ ref = null, ...props })=>{
+    [props, ref] = useContextProps(props, ref, MediaContext);
+    const { className, fit, ...restProps } = props;
+    const _className = mediaVariant({
+        fit
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: cx(className, _className),
+        // This can be used (internally) in other components
+        // to apply custom styles to the media element depending on the fit
+        "data-fit": fit,
+        ...restProps,
+        "data-slot": "media"
+    });
+};
+
+const cardVariants = cva({
+    base: [
+        'group/card',
+        'rounded-[inherit]',
+        'border p-3',
+        'flex flex-col gap-y-4',
+        'relative',
+        // **** Content ****
+        '[&_[data-slot="content"]]:flex [&_[data-slot="content"]]:flex-col [&_[data-slot="content"]]:gap-y-4',
+        // **** Media ****
+        '[&_[data-slot="media"]_*]:pointer-events-none',
+        '[&_[data-slot="media"]]:overflow-hidden',
+        '[&_[data-slot="media"]]:relative',
+        // Position media at the edges of the card (because of these negative margins the media-element must be a wrapper around the actual image or other media content)
+        '[&_[data-slot="media"]]:mx-[calc(theme(space.3)*-1-theme(borderWidth.DEFAULT))] [&_[data-slot="media"]]:mt-[calc(theme(space.3)*-1-theme(borderWidth.DEFAULT))]',
+        // Sets the aspect ratio of the media content (width: 100% is necessary to make aspect ratio work on images in FF)
+        '[&_[data-slot="media"]>*:not([data-slot="badge"])]:aspect-3/2 [&_[data-slot="media"]>img]:w-full [&_[data-slot="media"]>img]:object-cover',
+        // Prepare zoom animation for hover effects. The hover effect can also be enabled by classes on the parent component, so it is always prepared here.
+        '[&_[data-slot="media"]>*]:duration-300 [&_[data-slot="media"]>*]:ease-in-out [&_[data-slot="media"]>*]:motion-safe:transition-transform',
+        // **** Card link ****
+        // **** Hover ****
+        // Enables the zoom hover effect on media (note that we can't use group-hover/card here, because there might be other clickable elements in the card aside from the heading)
+        '[&:has([data-slot="card-link"]_a:hover)_[data-slot="media"]>img]:scale-110',
+        '[&:has([data-slot="heading"]_[data-slot="card-link"]:hover)_[data-slot="media"]>img]:scale-110',
+        // **** Fail-safe for interactive elements ****
+        // Make interactive elements clickable by themselves, while the rest of the card is clickable as a whole
+        // The card is made clickable by a pseudo-element on the heading that covers the entire card
+        '[&:not(:has([data-slot="card-link"]_a))_a:not([data-slot="card-link"])]:relative [&_button]:relative [&_input]:relative',
+        // Our Button component has position: relative by default, so we need to override that if it is used in a CardLink (to make the entire card clickable)
+        '[&_[data-slot="card-link"]_a]:static',
+        // Place other interactive on top of the pseudo-element that makes the entire card clickable
+        // by setting a higher z-index than the pseudo-element (which implicitly z-index 0)
+        '[&_a:not([data-slot="card-link"])]:z-[1] [&_button]:z-[1] [&_input]:z-[1]',
+        // **** Badge ****
+        '[&_[data-slot="media"]_[data-slot="badge"]]:absolute [&_[data-slot="media"]_[data-slot="badge"]]:top-0',
+        // Increasing z-index Preserves badge position when media content is hovered (the transform scale effect might otherwise move the badge behind the other media content)
+        '[&_[data-slot="media"]_[data-slot="badge"]]:z-[1]',
+        // Left aligned - override default corner radius of the badge
+        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-tl-2xl',
+        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-br-2xl',
+        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-tr-none',
+        '[&_[data-slot="media"]_[data-slot="badge"]:first-child]:rounded-bl-none',
+        // Right aligned - override default corner radius of the badge
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-tl-none',
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-br-none',
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-tr-2xl',
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:rounded-bl-2xl',
+        // ... and position the badge at the right edge of the media content
+        '[&_[data-slot="media"]_[data-slot="badge"]:last-child]:right-0'
+    ],
+    variants: {
+        /**
+     * The variant of the card
+     * @default subtle
+     */ variant: {
+            subtle: [
+                'border-transparent',
+                // **** Media styles ****
+                '[&_[data-slot="media"]]:rounded-2xl'
+            ],
+            outlined: 'border border-black'
+        },
+        /**
+     * The layout of the card
+     * @default vertical
+     */ layout: {
+            vertical: [
+                'flex-col',
+                // **** Media ****
+                '[&_[data-slot="media"]]:rounded-t-2xl'
+            ],
+            horizontal: [
+                // Use more gap for horizontal cards that have media
+                // Since this does not affect the layout before the flex direction is set (at breakpoint @2xl for Card with Media), we can set it here
+                'has-data-[slot=media]:layout-gap-x not-has-data-[slot=media]:gap-x-4',
+                // **** With Media ****
+                '[&:has(>[data-slot="media"]:last-child)]:flex-col-reverse',
+                'has-data-[slot=media]:@2xl:!flex-row',
+                '*:data-[slot=media]:@2xl:h-fit',
+                'has-data-[slot=media]:*:@2xl:basis-1/2',
+                // Position media at the edges of the card
+                '*:data-[slot=media]:@2xl:mb-[calc(theme(space.3)*-1-theme(borderWidth.DEFAULT))]',
+                '*:data-[slot=media]:first:@2xl:mr-0',
+                '*:data-[slot=media]:last:@2xl:ml-0',
+                // Make sure the card link is clickable when the media is on the right side
+                // This is necessary because the media content is positioned after the card link in the DOM
+                '[&:has(>[data-slot="media"]:last-child)_[data-slot="card-link"]]:z-[1]',
+                // **** Without Media ****
+                'not-has-data-[slot=media]:@md:flex-row',
+                // Make the layout responsive: when the Content reaches a minimum width of 12rem, the layout switches to vertical. Also makes sure Content takes up the remaining space available.
+                'not-has-data-[slot=media]:**:data-[slot=content]:grow',
+                // Make sure svg's etc. are not shrinkable
+                '[&>:not([data-slot="content"],[data-slot="media"])]:shrink-0'
+            ]
+        }
+    },
+    defaultVariants: {
+        variant: 'subtle',
+        layout: 'vertical'
+    },
+    compoundVariants: [
+        {
+            variant: 'outlined',
+            layout: 'horizontal',
+            className: [
+                // **** Media ****
+                // Some rounded corners are removed when the card is outlined
+                '[&_[data-slot="media"]]:rounded-t-2xl',
+                '*:data-[slot=media]:first:@2xl:rounded-tr-none *:data-[slot=media]:first:@2xl:rounded-bl-2xl',
+                '*:data-[slot=media]:last:@2xl:rounded-tl-none *:data-[slot=media]:last:@2xl:rounded-br-2xl',
+                // **** Badge ****
+                // Override default corner radius of the badge to match the media border radius
+                '[&_[data-slot="media"]:first-child_[data-slot="badge"]:last-child]:@2xl:rounded-tr-none',
+                '[&_[data-slot="media"]:last-child_[data-slot="badge"]:first-child]:@2xl:rounded-tl-none'
+            ]
+        }
+    ]
+});
+const Card = ({ children, className, variant, layout, ...restProps })=>{
+    const cardClassName = cardVariants({
+        variant,
+        layout
+    });
+    return(// The border-radius is set on the outer container to make it act as an invisible wrapper, only used for container queries
+    // Since passing the className prop to this container is necessary to make custom styles behave as expected, we need to apply the border-radius here incase the consumer passes a custom background color
+    /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        className: cx(className, '@container rounded-2xl'),
+        children: /*#__PURE__*/ jsx("div", {
+            className: cardClassName,
+            children: /*#__PURE__*/ jsx(Provider, {
+                values: [
+                    [
+                        HeadingContext,
+                        {
+                            size: 's',
+                            className: cx([
+                                'inline',
+                                'w-fit',
+                                'text-pretty',
+                                'hyphens-auto',
+                                '[word-break:break-word]',
+                                // **** Card link in Heading ****
+                                // Border (bottom/top) is set to transparent to make sure the bottom underline is not visible when the card is hovered
+                                // Border top is set to even out the border bottom used for the underline
+                                '*:data-[slot="card-link"]:no-underline',
+                                '*:data-[slot="card-link"]:border-y-2',
+                                '*:data-[slot="card-link"]:border-y-transparent',
+                                '*:data-[slot="card-link"]:transition-colors',
+                                '*:data-[slot="card-link"]:hover:border-b-current',
+                                // Mimic heading styles for the card link if placed in the heading slot. This is necessary to make the custom underline align with the link text
+                                '*:data-[slot="card-link"]:font-inherit',
+                                '*:data-[slot="card-link"]:text-pretty',
+                                '*:data-[slot="card-link"]:hyphens-auto',
+                                '*:data-[slot="card-link"]:[word-break:break-word]'
+                            ])
+                        }
+                    ]
+                ],
+                children: children
+            })
+        })
+    }));
+};
+const cardLinkVariants = cva({
+    base: 'w-fit max-w-full',
+    variants: {
+        withHref: {
+            true: [
+                // **** Clickarea ****
+                'cursor-pointer',
+                'after:absolute',
+                'after:inset-[calc(theme(borderWidth.DEFAULT)*-1)]',
+                'after:rounded-[calc(theme(borderRadius.2xl)-theme(borderWidth.DEFAULT))]',
+                // **** Focus ****
+                'focus-visible:outline-none',
+                'data-focus-visible:after:outline-focus',
+                'data-focus-visible:after:outline-offset-2',
+                // **** Hover ****
+                // Links are underlined by default, and the underline is removed on hover.
+                // So we make sure that also happens when the user hovers the clickable area.
+                'hover:no-underline'
+            ],
+            false: [
+                // **** Clickarea ****
+                '[&_a]:after:cursor-pointer',
+                '[&_a]:after:absolute',
+                '[&_a]:after:inset-[calc(theme(borderWidth.DEFAULT)*-1)]',
+                '[&_a]:after:rounded-[calc(theme(borderRadius.2xl)-theme(borderWidth.DEFAULT))]',
+                // **** Focus ****
+                '[&_a[data-focus-visible]]:outline-none',
+                '[&_a[data-focus-visible]]:after:outline-focus',
+                '[&_a[data-focus-visible]]:after:outline-offset-2',
+                // **** Hover ****
+                // Links are underlined by default, and the underline is removed on hover.
+                // So we make sure that also happens when the user hovers the card.
+                // The group-hover ensures that the hover effect also applies when this component is used as a wrapper around a link.
+                '[&_a]:group-hover/card:no-underline'
+            ]
+        }
+    }
+});
+/**
+ * A component that creates a clickable area on a card.
+ * It can be used either as a wrapper around a link or as a standalone link.
+ */ const CardLink = ({ className: _className, href, ...restProps })=>{
+    const className = cardLinkVariants({
+        className: _className,
+        withHref: !!href
+    });
+    return href ? /*#__PURE__*/ jsx(Link, {
+        "data-slot": "card-link",
+        ...restProps,
+        href: href,
+        className: className
+    }) : // We can't utilize that the `Link` component from react-aria-components renders as a span if it doesn't have an href,
+    // because it still renders with role="link" and tabindex="0" which makes it focusable.
+    // So we need to render a div instead.
+    /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        "data-slot": "card-link",
+        className: className
+    });
+};
+
+const HeroContext = /*#__PURE__*/ createContext(null);
+// Common variant for "standard" and "full-bleed" Hero variants
+const oneColumnLayout = [
+    // Vertical spacing in the <Content>
+    'lg:*:data-[slot="content"]:gap-y-4',
+    // Main text content takes up 9 columns on medium screens and above
+    'lg:*:data-[slot="content"]:col-span-9',
+    // Make sure other elements than <Content> and <Media> (i.e CTA) does not span the full width on small screens
+    '*:not-data-[slot="content"]:not-data-[slot="media"]:w-fit',
+    // Other elements than <Content> and <Media> (e.g. CTA, SVG logo or Badge) take up 3 columns on medium screens and above, and are right aligned
+    'lg:*:not-data-[slot="content"]:not-data-[slot="media"]:not-data-[slot="carousel"]:col-span-3 lg:*:not-data-[slot="content"]:not-data-[slot="media"]:justify-self-end',
+    // <Media> and <Carousel> content takes up the full width on medium screens and above
+    'lg:*:data-[slot="media"]:col-span-full *:data-[slot="media"]:*:w-full',
+    'lg:*:data-[slot="carousel"]:col-span-full',
+    // Aligns <Content> and any element beside it (e.g. <Media>, <Badge>, <CTA> etc.) to the bottom of the <Content> container
+    'lg:items-end'
+];
+const nonFullBleedAspectRatiosForSmallScreens = '*:data-[slot="media"]:*:aspect-[1/1] sm:*:data-[slot="media"]:*:aspect-4/3 md:*:data-[slot="media"]:*:aspect-3/2';
+const variants = cva({
+    base: [
+        'container px-0',
+        // Grid variant to position the Hero's content
+        'grid lg:grid-cols-12 lg:gap-x-12 xl:gap-x-16',
+        'gap-y-10 lg:gap-y-12',
+        // Enable vertical gap within <Content>
+        '*:data-[slot="content"]:grid',
+        // Vertical spacing in the <Content>
+        '*:data-[slot="content"]:gap-y-3',
+        // Make sure <Media> content fills any available vertical and horizontal space
+        '*:data-[slot="media"]:*:object-cover',
+        '*:data-[slot="carousel"]:overflow-hidden *:data-[slot="carousel"]:rounded-3xl',
+        // Make the carousel items full width, so we scroll one at a time
+        '**:data-[slot="carousel-item"]:basis-full'
+    ],
+    variants: {
+        /**
+     * Defines the variant of the Hero
+     * @default standard
+     * */ variant: {
+            standard: [
+                oneColumnLayout,
+                nonFullBleedAspectRatiosForSmallScreens,
+                'lg:*:data-[slot="media"]:*:aspect-2/1'
+            ],
+            'full-bleed': [
+                oneColumnLayout,
+                // Position the media and carousel content to fill the entire viewport width
+                '*:data-[slot="media"]:*:absolute *:data-[slot="media"]:*:left-0',
+                // Special case for Carousel, where the Media is nested inside a CarouselItem
+                '*:data-[slot="carousel"]:**:data-[slot="media"]:w-full',
+                // Match the heights of the <Media> or <Carousel> wrapper for the Media content (e.g. image, VideoLoop, video etc.)
+                // This is necessary due to the absolute positioning of the media and carousel containers in this variant
+                // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
+                '**:data-[slot="media"]:h-80 sm:**:data-[slot="media"]:h-[25rem] md:**:data-[slot="media"]:h-[30rem] lg:**:data-[slot="media"]:h-[35rem] xl:**:data-[slot="media"]:h-[40rem] 2xl:**:data-[slot="media"]:h-[42rem] 3xl:**:data-[slot="media"]:h-[48rem] 4xl:**:data-[slot="media"]:h-[53rem]',
+                '**:data-[slot="media"]:*:h-[inherit]',
+                // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
+                '*:data-[slot="carousel"]:h-80 sm:*:data-[slot="carousel"]:h-[25rem] md:*:data-[slot="carousel"]:h-[30rem] lg:*:data-[slot="carousel"]:h-[35rem] xl:*:data-[slot="carousel"]:h-[40rem] 2xl:*:data-[slot="carousel"]:h-[42rem] 3xl:*:data-[slot="carousel"]:h-[48rem] 4xl:*:data-[slot="carousel"]:h-[53rem]',
+                '*:data-[slot="carousel"]:w-full!',
+                // Override aspect ratio of the media and carousel-item slots (since we can not use aspect for full-bleed layout)
+                '**:data-[slot="carousel-item"]:data-[slot="media"]:*:aspect-none',
+                // break out the carousel out of the container
+                '**:data-[slot="carousel-items-container"]:absolute **:data-[slot="carousel-items-container"]:right-0 **:data-[slot="carousel-items-container"]:left-0 **:data-[slot="carousel-items-container"]:h-[inherit]',
+                // Positions the carousel controls inside the carousel
+                '**:data-[slot="carousel-controls"]:z-10 **:data-[slot="carousel-controls"]:mb-4 *:data-[slot="carousel"]:flex *:data-[slot="carousel"]:items-end *:data-[slot="carousel"]:justify-end'
+            ],
+            'two-column': [
+                'lg:items-center lg:*:col-span-6',
+                // Vertical spacing in the <Content>
+                'lg:*:data-[slot="content"]:gap-y-7',
+                nonFullBleedAspectRatiosForSmallScreens,
+                // Set media aspect ratio to 1:1 (square)
+                'lg:*:data-[slot="media"]:*:aspect-square'
+            ]
+        }
+    },
+    compoundVariants: [
+        {
+            variant: [
+                'standard',
+                'two-column'
+            ],
+            className: [
+                '*:data-[slot="media"]:*:rounded-3xl',
+                '**:data-[slot="carousel-controls"]:absolute *:data-[slot="carousel"]:relative **:data-[slot="carousel-controls"]:right-4 **:data-[slot="carousel-controls"]:bottom-4 **:data-[slot="carousel-container"]:rounded-3xl'
+            ]
+        }
+    ],
+    defaultVariants: {
+        variant: 'standard'
+    }
+});
+const Hero = ({ variant, className, children, ...rest })=>{
+    const variantsClassName = variants({
+        variant,
+        className
+    });
+    return /*#__PURE__*/ jsx(Provider, {
+        values: [
+            [
+                HeroContext,
+                {
+                    variant
+                }
+            ],
+            [
+                HeadingContext,
+                {
+                    // Sets the default heading size for the Hero based on the variant
+                    size: variant === 'two-column' ? 'xl' : 'l',
+                    className: // word-break:break-word to allow long words to break (this is necessary to make hyphens work in grid containers in Safari)
+                    'hyphens-auto text-pretty [word-break:break-word]'
+                }
+            ],
+            [
+                GroupContext,
+                {
+                    // Prevents the group from being announced as a group by screen readers
+                    // The Group component is used to group the Hero's CTA buttons together visually, and has no semantic meaning
+                    role: 'presentation',
+                    className: 'flex flex-wrap gap-3 *:w-fit'
+                }
+            ]
+        ],
+        children: /*#__PURE__*/ jsx("div", {
+            className: cx(variantsClassName, className),
+            ...rest,
+            children: children
+        })
+    });
+};
+
+const meta = {
+    title: 'Layout'
+};
+const GridContainer = ()=>/*#__PURE__*/ jsx("main", {
+        className: "layout-grid-container",
+        children: /*#__PURE__*/ jsxs(Hero, {
+            children: [
+                /*#__PURE__*/ jsxs(Content, {
+                    children: [
+                        /*#__PURE__*/ jsx(Heading, {
+                            level: 1,
+                            size: "xl",
+                            children: "Jobb i OBOS"
+                        }),
+                        /*#__PURE__*/ jsx("p", {
+                            className: "lead",
+                            children: "Bli med å oppfylle boligdrømmer! Vi søker engasjerte og dyktige personer som vil ta OBOS videre. Søk på våre ledige stillinger!"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Media, {
+                    children: /*#__PURE__*/ jsx("img", {
+                        src: "https://cdn.sanity.io/media-libraries/mln4u7f3Hc8r/images/410001cfde5211194e0072bf39abd3214befb1c2-1920x1080.jpg?auto=format",
+                        alt: ""
+                    })
+                })
+            ]
+        })
+    });
+const GridContainerWithSubGrids = ()=>/*#__PURE__*/ jsxs("main", {
+        className: "layout-grid-container layout-gap-y",
+        children: [
+            /*#__PURE__*/ jsx("h1", {
+                className: "heading-xl sm:col-end-9",
+                children: "Dette er OBOS"
+            }),
+            /*#__PURE__*/ jsxs("ul", {
+                className: "md:layout-subgrid-12 *:md:col-span-2 *:lg:col-span-3",
+                children: [
+                    /*#__PURE__*/ jsxs(Card, {
+                        role: "listitem",
+                        children: [
+                            /*#__PURE__*/ jsxs(Content, {
+                                children: [
+                                    /*#__PURE__*/ jsx(Heading, {
+                                        level: 2,
+                                        children: /*#__PURE__*/ jsx(CardLink, {
+                                            href: "/bolig",
+                                            children: "Bolig"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("p", {
+                                        children: "Oppfyll boligdrømmen med OBOS!"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(ArrowRight, {
+                                className: "transition-transform group-hover/card:motion-safe:translate-x-1"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Card, {
+                        role: "listitem",
+                        children: [
+                            /*#__PURE__*/ jsxs(Content, {
+                                children: [
+                                    /*#__PURE__*/ jsx(Heading, {
+                                        level: 2,
+                                        children: /*#__PURE__*/ jsx(CardLink, {
+                                            href: "/medlem",
+                                            children: "Medlem"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("p", {
+                                        children: "Bli medlem i OBOS og få tilgang til eksklusive fordeler!"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(ArrowRight, {
+                                className: "transition-transform group-hover/card:motion-safe:translate-x-1"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Card, {
+                        role: "listitem",
+                        children: [
+                            /*#__PURE__*/ jsxs(Content, {
+                                children: [
+                                    /*#__PURE__*/ jsx(Heading, {
+                                        level: 2,
+                                        children: /*#__PURE__*/ jsx(CardLink, {
+                                            href: "/bli-bankkunde",
+                                            children: "Bank"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("p", {
+                                        children: "OBOS Bank tilbyr konkurransedyktige rente på boliglån og sparekonto!"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(ArrowRight, {
+                                className: "transition-transform group-hover/card:motion-safe:translate-x-1"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Card, {
+                        role: "listitem",
+                        children: [
+                            /*#__PURE__*/ jsxs(Content, {
+                                children: [
+                                    /*#__PURE__*/ jsx(Heading, {
+                                        level: 2,
+                                        children: /*#__PURE__*/ jsx(CardLink, {
+                                            href: "/medlem-i-obos",
+                                            children: "Forkjøp"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("p", {
+                                        children: "Som medlem i OBOS har du forkjøpsrett på tusenvis av boliger hvert år!"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(ArrowRight, {
+                                className: "transition-transform group-hover/card:motion-safe:translate-x-1"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+
+export { GridContainer, GridContainerWithSubGrids, meta as default };