@obosbbl/grunnmuren-react 3.4.2 → 3.4.4

package/dist/__stories__/layout.stories.cjs

@@ -0,0 +1,599 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var grunnmurenIconsReact = require('@obosbbl/grunnmuren-icons-react');
+var cva = require('cva');
+var reactAriaComponents = require('react-aria-components');
+var react = require('react');
+
+const HeadingContext = /*#__PURE__*/ react.createContext({});
+const headingVariants = cva.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] = reactAriaComponents.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__*/ jsxRuntime.jsx(Element, {
+        ...restProps,
+        className: cva.cx(className, _className),
+        "data-slot": "heading",
+        children: innerWrapper ? innerWrapper(children) : children
+    });
+    return outerWrapper ? outerWrapper(content) : content;
+};
+const ContentContext = /*#__PURE__*/ react.createContext({});
+const Content = ({ ref = null, ...props })=>{
+    [props, ref] = reactAriaComponents.useContextProps(props, ref, ContentContext);
+    const { _outerWrapper: outerWrapper, ...restProps } = props;
+    const content = /*#__PURE__*/ jsxRuntime.jsx("div", {
+        ...restProps,
+        "data-slot": "content"
+    });
+    return outerWrapper ? outerWrapper(content) : content;
+};
+const mediaVariant = cva.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__*/ react.createContext({});
+const Media = ({ ref = null, ...props })=>{
+    [props, ref] = reactAriaComponents.useContextProps(props, ref, MediaContext);
+    const { className, fit, ...restProps } = props;
+    const _className = mediaVariant({
+        fit
+    });
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        ref: ref,
+        className: cva.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.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
+        '[&_button]:relative [&_input]:relative [&:not(:has([data-slot="card-link"]_a))_a:not([data-slot="card-link"])]: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__*/ jsxRuntime.jsx("div", {
+        ...restProps,
+        className: cva.cx(className, '@container rounded-2xl'),
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: cardClassName,
+            children: /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Provider, {
+                values: [
+                    [
+                        HeadingContext,
+                        {
+                            size: 's',
+                            className: cva.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.cva({
+    base: 'w-fit max-w-full',
+    variants: {
+        withHref: {
+            true: [
+                // **** Clickarea ****
+                'cursor-pointer',
+                'after:absolute',
+                'after:-inset-px',
+                'after:rounded-[calc(var(--radius-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-px',
+                '[&_a]:after:rounded-[calc(var(--radius-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__*/ jsxRuntime.jsx(reactAriaComponents.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__*/ jsxRuntime.jsx("div", {
+        ...restProps,
+        "data-slot": "card-link",
+        className: className
+    });
+};
+
+const HeroContext = /*#__PURE__*/ react.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]:not-has-data-[slot=video]:*:aspect-[1/1] sm:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-4/3 md:*:data-[slot=media]:not-has-data-[slot=video]:*:aspect-3/2';
+const variants = cva.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]:not-has-data-[slot=video]:*: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
+                '3xl:**:data-[slot=media]:h-192 4xl:**:data-[slot=media]:h-212 **:data-[slot=media]:h-80 sm:**:data-[slot=media]:h-100 md:**:data-[slot=media]:h-120 lg:**:data-[slot=media]:h-140 xl:**:data-[slot=media]:h-160 2xl:**:data-[slot=media]:h-168',
+                '**:data-[slot=media]:*:h-[inherit]',
+                // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
+                '3xl:*:data-[slot=carousel]:h-192 4xl:*:data-[slot=carousel]:h-212 *:data-[slot=carousel]:h-80 sm:*:data-[slot=carousel]:h-100 md:*:data-[slot=carousel]:h-120 lg:*:data-[slot=carousel]:h-140 xl:*:data-[slot=carousel]:h-160 2xl:*:data-[slot=carousel]:h-168',
+                '*: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]:inset-x-0 **:data-[slot=carousel-items-container]:h-[inherit]',
+                // Positions the carousel controls inside the carousel
+                '*:data-[slot=carousel]:flex *:data-[slot=carousel]:items-end *:data-[slot=carousel]:justify-end **:data-[slot=carousel-controls]:z-10 **:data-[slot=carousel-controls]:mb-4'
+            ],
+            '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]:not-has-data-[slot=video]:*:aspect-square'
+            ]
+        }
+    },
+    compoundVariants: [
+        {
+            variant: [
+                'standard',
+                'two-column'
+            ],
+            className: [
+                '*:data-[slot=media]:*:rounded-3xl',
+                '*:data-[slot=carousel]:relative **:data-[slot=carousel-container]:rounded-3xl **:data-[slot=carousel-controls]:absolute **:data-[slot=carousel-controls]:right-4 **:data-[slot=carousel-controls]:bottom-4'
+            ]
+        }
+    ],
+    defaultVariants: {
+        variant: 'standard'
+    }
+});
+const Hero = ({ variant, className, children, ...rest })=>{
+    const variantsClassName = variants({
+        variant,
+        className
+    });
+    return /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.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]'
+                }
+            ],
+            [
+                reactAriaComponents.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__*/ jsxRuntime.jsx("div", {
+            className: cva.cx(variantsClassName, className),
+            ...rest,
+            children: children
+        })
+    });
+};
+
+const meta = {
+    title: 'Layout'
+};
+const GridContainer = ()=>/*#__PURE__*/ jsxRuntime.jsx("main", {
+        className: "layout-grid-container",
+        children: /*#__PURE__*/ jsxRuntime.jsxs(Hero, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsxs(Content, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(Heading, {
+                            level: 1,
+                            size: "xl",
+                            children: "Jobb i OBOS"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsx(Media, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx("img", {
+                        src: "https://cdn.sanity.io/media-libraries/mln4u7f3Hc8r/images/410001cfde5211194e0072bf39abd3214befb1c2-1920x1080.jpg?auto=format",
+                        alt: ""
+                    })
+                })
+            ]
+        })
+    });
+const GridContainerWithSubGrids = ()=>/*#__PURE__*/ jsxRuntime.jsxs("main", {
+        className: "layout-grid-container layout-gap-y",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("h1", {
+                className: "heading-xl sm:col-end-9",
+                children: "Dette er OBOS"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs("ul", {
+                className: "md:layout-subgrid-12 *:md:col-span-6 *:lg:col-span-3",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs(Card, {
+                        role: "listitem",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs(Content, {
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(Heading, {
+                                        level: 2,
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(CardLink, {
+                                            href: "/bolig",
+                                            children: "Bolig"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx("p", {
+                                        children: "Oppfyll boligdrømmen med OBOS!"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(grunnmurenIconsReact.ArrowRight, {
+                                className: "transition-transform group-hover/card:motion-safe:translate-x-1"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(Card, {
+                        role: "listitem",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs(Content, {
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(Heading, {
+                                        level: 2,
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(CardLink, {
+                                            href: "/medlem",
+                                            children: "Medlem"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx("p", {
+                                        children: "Bli medlem i OBOS og få tilgang til eksklusive fordeler!"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(grunnmurenIconsReact.ArrowRight, {
+                                className: "transition-transform group-hover/card:motion-safe:translate-x-1"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(Card, {
+                        role: "listitem",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs(Content, {
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(Heading, {
+                                        level: 2,
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(CardLink, {
+                                            href: "/bli-bankkunde",
+                                            children: "Bank"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx("p", {
+                                        children: "OBOS Bank tilbyr konkurransedyktige rente på boliglån og sparekonto!"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(grunnmurenIconsReact.ArrowRight, {
+                                className: "transition-transform group-hover/card:motion-safe:translate-x-1"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(Card, {
+                        role: "listitem",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs(Content, {
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(Heading, {
+                                        level: 2,
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(CardLink, {
+                                            href: "/medlem-i-obos",
+                                            children: "Forkjøp"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx("p", {
+                                        children: "Som medlem i OBOS har du forkjøpsrett på tusenvis av boliger hvert år!"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(grunnmurenIconsReact.ArrowRight, {
+                                className: "transition-transform group-hover/card:motion-safe:translate-x-1"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+const OverridedColSpans = ()=>/*#__PURE__*/ jsxRuntime.jsxs("main", {
+        className: "layout-grid-container",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("h1", {
+                className: "heading-xl sm:col-end-9",
+                children: "Dette er OBOS"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("img", {
+                className: "sm:col-end-8",
+                src: "https://cdn.sanity.io/media-libraries/mln4u7f3Hc8r/images/410001cfde5211194e0072bf39abd3214befb1c2-1920x1080.jpg?auto=format",
+                alt: ""
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("p", {
+                className: "sm:col-start-6 sm:col-end-12",
+                children: "Som er ett nettsted for alt om OBOS."
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("img", {
+                className: "sm:col-span-6 sm:col-start-6",
+                src: "https://cdn.sanity.io/media-libraries/mln4u7f3Hc8r/images/410001cfde5211194e0072bf39abd3214befb1c2-1920x1080.jpg?auto=format",
+                alt: ""
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("p", {
+                className: "sm:col-end-15",
+                children: "Masse tekst for å teste grid container med sub grids. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("img", {
+                className: "sm:col-span-full",
+                src: "https://cdn.sanity.io/media-libraries/mln4u7f3Hc8r/images/410001cfde5211194e0072bf39abd3214befb1c2-1920x1080.jpg?auto=format",
+                alt: ""
+            })
+        ]
+    });
+
+exports.GridContainer = GridContainer;
+exports.GridContainerWithSubGrids = GridContainerWithSubGrids;
+exports.OverridedColSpans = OverridedColSpans;
+exports.default = meta;

package/dist/__stories__/layout.stories.d.cts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Meta } from '@storybook/react-vite';
+
+declare const meta: Meta;
+
+declare const GridContainer: () => react_jsx_runtime.JSX.Element;
+declare const GridContainerWithSubGrids: () => react_jsx_runtime.JSX.Element;
+declare const OverridedColSpans: () => react_jsx_runtime.JSX.Element;
+
+export { GridContainer, GridContainerWithSubGrids, OverridedColSpans, meta as default };

package/dist/__stories__/layout.stories.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Meta } from '@storybook/react-vite';
+
+declare const meta: Meta;
+
+declare const GridContainer: () => react_jsx_runtime.JSX.Element;
+declare const GridContainerWithSubGrids: () => react_jsx_runtime.JSX.Element;
+declare const OverridedColSpans: () => react_jsx_runtime.JSX.Element;
+
+export { GridContainer, GridContainerWithSubGrids, OverridedColSpans, meta as default };