npm - @obosbbl/grunnmuren-react - Versions diffs - 3.3.5 → 3.4.0 - Mend

@obosbbl/grunnmuren-react 3.3.5 → 3.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/__stories__/form-validation.stories.cjs +70 -56
package/dist/__stories__/form-validation.stories.js +71 -57
package/dist/__stories__/layout.stories.cjs +7 -0
package/dist/__stories__/layout.stories.js +7 -0
package/dist/index.d.mts +62 -13
package/dist/index.mjs +317 -243
package/package.json +1 -1

package/dist/__stories__/form-validation.stories.cjs CHANGED Viewed

@@ -7,6 +7,61 @@ var grunnmurenIconsReact = require('@obosbbl/grunnmuren-icons-react');
 var cva = require('cva');
 var reactAria = require('react-aria');
+const formField = cva.cx('group flex flex-col gap-2');
+const formFieldError = cva.cx('w-fit bg-red-light px-2 py-1 text-red text-sm leading-6', 'group-data-[slot=file-upload]:rounded-lg');
+const input = cva.cva({
+    base: [
+        // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
+        'bg-white',
+        // Use box-content to enable auto width based on number of characters (size)
+        // Setting min-height to prevent the input from collapsing in Safari
+        // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
+        'box-content min-h-6 py-2.5',
+        'rounded-md font-normal text-base leading-6 placeholder-[#727070] outline-hidden ring-1 ring-black',
+        // invalid styles
+        'group-data-invalid:ring-focus group-data-invalid:ring-red',
+        // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
+        'appearance-none'
+    ],
+    variants: {
+        // Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
+        focusModifier: {
+            focus: 'focus:ring-focus group-data-invalid:focus:ring-3 group-data-invalid:focus:ring-red',
+            visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-3 group-data-invalid:data-focus-visible:ring-red'
+        },
+        isGrouped: {
+            false: 'px-3',
+            true: '!ring-0 flex-1'
+        }
+    },
+    defaultVariants: {
+        focusModifier: 'focus',
+        isGrouped: false
+    }
+});
+const inputGroup = cva.cx([
+    'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-focus',
+    'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-3 group-data-invalid:focus-within:ring-red'
+]);
+({
+    popover: cva.cx('data-entering:fade-in data-exiting:fade-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm data-entering:animate-in data-exiting:animate-out'),
+    // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
+    listbox: cva.cx('max-h-100 overflow-x-hidden text-sm outline-hidden'),
+    chevronIcon: cva.cx('text-base transition-transform duration-150 group-data-open:rotate-180 motion-reduce:transition-none')
+});
+const animateIconVariants = cva.cva({
+    base: '*:[svg]:shrink-0 *:[svg]:transition-transform',
+    variants: {
+        animateIcon: {
+            right: 'hover:*:[svg]:motion-safe:translate-x-1',
+            left: 'hover:*:[svg]:motion-safe:-translate-x-1',
+            down: 'hover:*:[svg]:motion-safe:translate-y-1',
+            up: 'hover:*:[svg]:motion-safe:-translate-y-1',
+            'up-right': 'hover:*:[svg]:motion-safe:-translate-y-0.5 hover:*:[svg]:motion-safe:translate-x-0.5'
+        }
+    }
+});
 const translations = {
     pending: {
         nb: 'venter',
@@ -24,38 +79,38 @@ const translations = {
 /**
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
- */ const buttonVariants = cva.cva({
+ */ const buttonVariants = cva.compose(animateIconVariants, cva.cva({
     base: [
         'inline-flex min-h-[44px] cursor-pointer items-center justify-center whitespace-nowrap rounded-lg font-medium transition-colors duration-200 focus-visible:outline-focus-offset'
     ],
     variants: {
         /**
-     * The variant of the button
-     * @default primary
-     */ variant: {
+       * The variant of the button
+       * @default primary
+       */ variant: {
             primary: 'no-underline',
             // by using an inset box-shadow to emulate a border instead of an actual border, the button size will be equal regardless of the variant
             secondary: 'border-2 border-current no-underline hover:border-transparent',
             tertiary: 'underline hover:no-underline'
         },
         /**
-     * Adjusts the color of the button for usage on different backgrounds.
-     * @default blue
-     */ color: {
+       * Adjusts the color of the button for usage on different backgrounds.
+       * @default blue
+       */ color: {
             blue: 'focus-visible:outline-focus',
             mint: 'focus-visible:outline-focus focus-visible:outline-mint',
             white: 'focus-visible:outline-focus focus-visible:outline-white'
         },
         /**
-     * When the button is without text, but with a single icon.
-     * @default false
-     */ isIconOnly: {
+       * When the button is without text, but with a single icon.
+       * @default false
+       */ isIconOnly: {
             true: 'p-2 [&>svg]:h-7 [&>svg]:w-7',
             false: 'gap-2.5 px-4 py-2'
         },
         // Make the content of the button transparent to hide it's content, but keep the button width
         isPending: {
-            true: '!text-transparent relative',
+            true: 'relative text-transparent!',
             false: null
         }
     },
@@ -114,15 +169,17 @@ const translations = {
         isIconOnly: false,
         isPending: false
     }
-});
+}));
 const ButtonContext = /*#__PURE__*/ react.createContext({});
 function isLinkProps(props) {
     return !!props.href;
 }
 function Button({ ref = null, ...props }) {
     [props, ref] = reactAriaComponents.useContextProps(props, ref, ButtonContext);
-    const { children: _children, color, isIconOnly, variant, isPending, ...restProps } = props;
+    const { animateIcon, children: _children, color, isIconOnly, variant, isPending, ...restProps } = props;
     const className = buttonVariants({
+        // Don't animate the icon when we're pending, as it affects the loading spinner
+        animateIcon: isPending ? undefined : animateIcon,
         className: props.className,
         color,
         isIconOnly,
@@ -157,49 +214,6 @@ function Button({ ref = null, ...props }) {
     });
 }
-const formField = cva.cx('group flex flex-col gap-2');
-const formFieldError = cva.cx('w-fit bg-red-light px-2 py-1 text-red text-sm leading-6', 'group-data-[slot=file-upload]:rounded-lg');
-const input = cva.cva({
-    base: [
-        // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
-        'bg-white',
-        // Use box-content to enable auto width based on number of characters (size)
-        // Setting min-height to prevent the input from collapsing in Safari
-        // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
-        'box-content min-h-6 py-2.5',
-        'rounded-md font-normal text-base leading-6 placeholder-[#727070] outline-hidden ring-1 ring-black',
-        // invalid styles
-        'group-data-invalid:ring-focus group-data-invalid:ring-red',
-        // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
-        'appearance-none'
-    ],
-    variants: {
-        // Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
-        focusModifier: {
-            focus: 'focus:ring-focus group-data-invalid:focus:ring-3 group-data-invalid:focus:ring-red',
-            visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-3 group-data-invalid:data-focus-visible:ring-red'
-        },
-        isGrouped: {
-            false: 'px-3',
-            true: '!ring-0 flex-1'
-        }
-    },
-    defaultVariants: {
-        focusModifier: 'focus',
-        isGrouped: false
-    }
-});
-const inputGroup = cva.cx([
-    'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-focus',
-    'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-3 group-data-invalid:focus-within:ring-red'
-]);
-({
-    popover: cva.cx('data-entering:fade-in data-exiting:fade-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm data-entering:animate-in data-exiting:animate-out'),
-    // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
-    listbox: cva.cx('max-h-100 overflow-x-hidden text-sm outline-hidden'),
-    chevronIcon: cva.cx('text-base transition-transform duration-150 group-data-open:rotate-180 motion-reduce:transition-none')
-});
 function InputAddonDivider() {
     return /*#__PURE__*/ jsxRuntime.jsx("span", {
         className: "block h-6 w-px flex-none bg-black"

package/dist/__stories__/form-validation.stories.js CHANGED Viewed

@@ -2,9 +2,64 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createContext, useState } from 'react';
 import { useLocale, useContextProps, Link, Button as Button$1, Text, FieldError, Label as Label$1, TextField as TextField$1, Group, Input, Form as Form$1 } from 'react-aria-components';
 import { LoadingSpinner } from '@obosbbl/grunnmuren-icons-react';
-import { cva, cx, compose } from 'cva';
+import { cx, cva, compose } from 'cva';
 import { useProgressBar } from 'react-aria';
+const formField = cx('group flex flex-col gap-2');
+const formFieldError = cx('w-fit bg-red-light px-2 py-1 text-red text-sm leading-6', 'group-data-[slot=file-upload]:rounded-lg');
+const input = cva({
+    base: [
+        // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
+        'bg-white',
+        // Use box-content to enable auto width based on number of characters (size)
+        // Setting min-height to prevent the input from collapsing in Safari
+        // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
+        'box-content min-h-6 py-2.5',
+        'rounded-md font-normal text-base leading-6 placeholder-[#727070] outline-hidden ring-1 ring-black',
+        // invalid styles
+        'group-data-invalid:ring-focus group-data-invalid:ring-red',
+        // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
+        'appearance-none'
+    ],
+    variants: {
+        // Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
+        focusModifier: {
+            focus: 'focus:ring-focus group-data-invalid:focus:ring-3 group-data-invalid:focus:ring-red',
+            visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-3 group-data-invalid:data-focus-visible:ring-red'
+        },
+        isGrouped: {
+            false: 'px-3',
+            true: '!ring-0 flex-1'
+        }
+    },
+    defaultVariants: {
+        focusModifier: 'focus',
+        isGrouped: false
+    }
+});
+const inputGroup = cx([
+    'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-focus',
+    'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-3 group-data-invalid:focus-within:ring-red'
+]);
+({
+    popover: cx('data-entering:fade-in data-exiting:fade-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm data-entering:animate-in data-exiting:animate-out'),
+    // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
+    listbox: cx('max-h-100 overflow-x-hidden text-sm outline-hidden'),
+    chevronIcon: cx('text-base transition-transform duration-150 group-data-open:rotate-180 motion-reduce:transition-none')
+});
+const animateIconVariants = cva({
+    base: '*:[svg]:shrink-0 *:[svg]:transition-transform',
+    variants: {
+        animateIcon: {
+            right: 'hover:*:[svg]:motion-safe:translate-x-1',
+            left: 'hover:*:[svg]:motion-safe:-translate-x-1',
+            down: 'hover:*:[svg]:motion-safe:translate-y-1',
+            up: 'hover:*:[svg]:motion-safe:-translate-y-1',
+            'up-right': 'hover:*:[svg]:motion-safe:-translate-y-0.5 hover:*:[svg]:motion-safe:translate-x-0.5'
+        }
+    }
+});
 const translations = {
     pending: {
         nb: 'venter',
@@ -22,38 +77,38 @@ const translations = {
 /**
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
- */ const buttonVariants = cva({
+ */ const buttonVariants = compose(animateIconVariants, cva({
     base: [
         'inline-flex min-h-[44px] cursor-pointer items-center justify-center whitespace-nowrap rounded-lg font-medium transition-colors duration-200 focus-visible:outline-focus-offset'
     ],
     variants: {
         /**
-     * The variant of the button
-     * @default primary
-     */ variant: {
+       * The variant of the button
+       * @default primary
+       */ variant: {
             primary: 'no-underline',
             // by using an inset box-shadow to emulate a border instead of an actual border, the button size will be equal regardless of the variant
             secondary: 'border-2 border-current no-underline hover:border-transparent',
             tertiary: 'underline hover:no-underline'
         },
         /**
-     * Adjusts the color of the button for usage on different backgrounds.
-     * @default blue
-     */ color: {
+       * Adjusts the color of the button for usage on different backgrounds.
+       * @default blue
+       */ color: {
             blue: 'focus-visible:outline-focus',
             mint: 'focus-visible:outline-focus focus-visible:outline-mint',
             white: 'focus-visible:outline-focus focus-visible:outline-white'
         },
         /**
-     * When the button is without text, but with a single icon.
-     * @default false
-     */ isIconOnly: {
+       * When the button is without text, but with a single icon.
+       * @default false
+       */ isIconOnly: {
             true: 'p-2 [&>svg]:h-7 [&>svg]:w-7',
             false: 'gap-2.5 px-4 py-2'
         },
         // Make the content of the button transparent to hide it's content, but keep the button width
         isPending: {
-            true: '!text-transparent relative',
+            true: 'relative text-transparent!',
             false: null
         }
     },
@@ -112,15 +167,17 @@ const translations = {
         isIconOnly: false,
         isPending: false
     }
-});
+}));
 const ButtonContext = /*#__PURE__*/ createContext({});
 function isLinkProps(props) {
     return !!props.href;
 }
 function Button({ ref = null, ...props }) {
     [props, ref] = useContextProps(props, ref, ButtonContext);
-    const { children: _children, color, isIconOnly, variant, isPending, ...restProps } = props;
+    const { animateIcon, children: _children, color, isIconOnly, variant, isPending, ...restProps } = props;
     const className = buttonVariants({
+        // Don't animate the icon when we're pending, as it affects the loading spinner
+        animateIcon: isPending ? undefined : animateIcon,
         className: props.className,
         color,
         isIconOnly,
@@ -155,49 +212,6 @@ function Button({ ref = null, ...props }) {
     });
 }
-const formField = cx('group flex flex-col gap-2');
-const formFieldError = cx('w-fit bg-red-light px-2 py-1 text-red text-sm leading-6', 'group-data-[slot=file-upload]:rounded-lg');
-const input = cva({
-    base: [
-        // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
-        'bg-white',
-        // Use box-content to enable auto width based on number of characters (size)
-        // Setting min-height to prevent the input from collapsing in Safari
-        // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
-        'box-content min-h-6 py-2.5',
-        'rounded-md font-normal text-base leading-6 placeholder-[#727070] outline-hidden ring-1 ring-black',
-        // invalid styles
-        'group-data-invalid:ring-focus group-data-invalid:ring-red',
-        // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
-        'appearance-none'
-    ],
-    variants: {
-        // Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
-        focusModifier: {
-            focus: 'focus:ring-focus group-data-invalid:focus:ring-3 group-data-invalid:focus:ring-red',
-            visible: 'data-focus-visible:ring-focus group-data-invalid:data-focus-visible:ring-3 group-data-invalid:data-focus-visible:ring-red'
-        },
-        isGrouped: {
-            false: 'px-3',
-            true: '!ring-0 flex-1'
-        }
-    },
-    defaultVariants: {
-        focusModifier: 'focus',
-        isGrouped: false
-    }
-});
-const inputGroup = cx([
-    'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-focus',
-    'group-data-invalid:ring-focus group-data-invalid:ring-red group-data-invalid:focus-within:ring-3 group-data-invalid:focus-within:ring-red'
-]);
-({
-    popover: cx('data-entering:fade-in data-exiting:fade-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm data-entering:animate-in data-exiting:animate-out'),
-    // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
-    listbox: cx('max-h-100 overflow-x-hidden text-sm outline-hidden'),
-    chevronIcon: cx('text-base transition-transform duration-150 group-data-open:rotate-180 motion-reduce:transition-none')
-});
 function InputAddonDivider() {
     return /*#__PURE__*/ jsx("span", {
         className: "block h-6 w-px flex-none bg-black"

package/dist/__stories__/layout.stories.cjs CHANGED Viewed

@@ -298,6 +298,7 @@ const cardLinkVariants = cva.cva({
     });
 };
+const HeroContext = /*#__PURE__*/ react.createContext(null);
 // Common variant for "standard" and "full-bleed" Hero variants
 const oneColumnLayout = [
     // Vertical spacing in the <Content>
@@ -395,6 +396,12 @@ const Hero = ({ variant, className, children, ...rest })=>{
     });
     return /*#__PURE__*/ jsxRuntime.jsx(reactAriaComponents.Provider, {
         values: [
+            [
+                HeroContext,
+                {
+                    variant
+                }
+            ],
             [
                 HeadingContext,
                 {

package/dist/__stories__/layout.stories.js CHANGED Viewed

@@ -296,6 +296,7 @@ const cardLinkVariants = cva({
     });
 };
+const HeroContext = /*#__PURE__*/ createContext(null);
 // Common variant for "standard" and "full-bleed" Hero variants
 const oneColumnLayout = [
     // Vertical spacing in the <Content>
@@ -393,6 +394,12 @@ const Hero = ({ variant, className, children, ...rest })=>{
     });
     return /*#__PURE__*/ jsx(Provider, {
         values: [
+            [
+                HeroContext,
+                {
+                    variant
+                }
+            ],
             [
                 HeadingContext,
                 {

package/dist/index.d.mts CHANGED Viewed

@@ -6,6 +6,7 @@ import { RefAttributes, HTMLAttributes, HTMLProps, ComponentProps, Ref, ReactNod
 import * as cva from 'cva';
 import { VariantProps } from 'cva';
 import { DisclosureState } from 'react-stately';
+import { EmblaViewportRefType } from 'embla-carousel-react';
 import { DateFormatterOptions } from 'react-aria';
 import { FormValidationProps } from '@react-stately/form';
@@ -95,19 +96,12 @@ declare const Alertbox: ({ children, role, className, icon, variant, isDismissab
 type AvatarProps = ComponentProps<'img'>;
 declare const Avatar: ({ src, alt, className, onError, loading, ...rest }: AvatarProps) => react_jsx_runtime.JSX.Element;
-type LinkProps = LinkProps$1 & React.RefAttributes<HTMLAnchorElement> & {
-    /** @private Used internally for slotted components */
-    _innerWrapper?: (props: LinkProps$1) => LinkProps['children'];
-};
-declare const _LinkContext: react.Context<ContextValue<Partial<LinkProps>, HTMLAnchorElement>>;
-declare const Link: ({ ref: _ref, ..._props }: LinkProps) => react_jsx_runtime.JSX.Element;
 type ButtonOrLinkProps$1 = {
     children?: React.ReactNode;
     /** Additional CSS className for the element. */
     className?: string;
     /** Determines whether to use an anchor or a button for the Backlink */
-    href?: LinkProps['href'];
+    href?: LinkProps$1['href'];
     /** To add a permanent underline on the link (not only on hover)
      * @default false
      */
@@ -115,7 +109,7 @@ type ButtonOrLinkProps$1 = {
     /** Ref to the element. */
     ref?: Ref<HTMLAnchorElement | HTMLButtonElement>;
 };
-type BacklinkProps = (ButtonProps$1 | LinkProps) & ButtonOrLinkProps$1;
+type BacklinkProps = (ButtonProps$1 | LinkProps$1) & ButtonOrLinkProps$1;
 declare function Backlink(props: BacklinkProps): react_jsx_runtime.JSX.Element;
 type BadgeProps = VariantProps<typeof badgeVariants> & {
@@ -137,6 +131,34 @@ declare const badgeVariants: (props?: ({
 })) | undefined) => string;
 declare function Badge(props: BadgeProps): react_jsx_runtime.JSX.Element;
+declare const _LinkContext: react.Context<ContextValue<Partial<LinkProps>, HTMLAnchorElement>>;
+declare const linkVariants: (props?: (((VariantProps<(props?: ({
+    animateIcon?: "right" | "left" | "down" | "up" | "up-right" | undefined;
+} & ({
+    class?: cva.ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: cva.ClassValue;
+})) | undefined) => string> & VariantProps<(props?: ({
+    class?: cva.ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: cva.ClassValue;
+}) | undefined) => string>) | undefined) & ({
+    class?: cva.ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: cva.ClassValue;
+})) | undefined) => string;
+type LinkProps = VariantProps<typeof linkVariants> & LinkProps$1 & React.RefAttributes<HTMLAnchorElement> & {
+    /** @private Used internally for slotted components */
+    _innerWrapper?: (props: LinkProps$1) => LinkProps['children'];
+};
+declare const Link: ({ ref: _ref, animateIcon, ..._props }: LinkProps) => react_jsx_runtime.JSX.Element;
 type BreadcrumbProps = {
     /** Additional CSS className for the element. */
     className?: string;
@@ -163,7 +185,15 @@ declare function Breadcrumbs(props: BreadcrumbsProps): react_jsx_runtime.JSX.Ele
 /**
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
  */
-declare const buttonVariants: (props?: ({
+declare const buttonVariants: (props?: (((VariantProps<(props?: ({
+    animateIcon?: "right" | "left" | "down" | "up" | "up-right" | undefined;
+} & ({
+    class?: cva.ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: cva.ClassValue;
+})) | undefined) => string> & VariantProps<(props?: ({
     variant?: "primary" | "secondary" | "tertiary" | undefined;
     color?: "blue" | "mint" | "white" | undefined;
     isIconOnly?: boolean | undefined;
@@ -174,6 +204,12 @@ declare const buttonVariants: (props?: ({
 } | {
     class?: never;
     className?: cva.ClassValue;
+})) | undefined) => string>) | undefined) & ({
+    class?: cva.ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: cva.ClassValue;
 })) | undefined) => string;
 type ButtonOrLinkProps = VariantProps<typeof buttonVariants> & {
     children?: React.ReactNode;
@@ -253,6 +289,15 @@ type CarouselProps = Omit<HTMLProps<HTMLDivElement>, 'onChange' | 'onSelect'> &
     scrollGestures?: boolean;
 };
 declare const Carousel: ({ autoPlayDelay, align, children, initialIndex, orientation, onSelect, onSettled, loop, scrollGestures, ref, ...rest }: CarouselProps) => react_jsx_runtime.JSX.Element;
+type CarouselContextValue = {
+    slidesInView: number[];
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * @private
+     */
+    '~emblaRef': EmblaViewportRefType | null;
+};
+declare const CarouselContext: react.Context<CarouselContextValue>;
 type CarouselItemsContainer = HTMLProps<HTMLDivElement> & {
     children: React.ReactNode;
 };
@@ -274,7 +319,7 @@ declare const CarouselControls: ({ children, className, ...rest }: CarouselContr
 type CarouselButtonProps = ButtonProps & {
     slot: 'next' | 'prev';
 };
-declare const CarouselButton: ({ className, isIconOnly, color, variant, slot, ...rest }: CarouselButtonProps) => react_jsx_runtime.JSX.Element;
+declare const CarouselButton: ({ className, isIconOnly, slot, ...rest }: CarouselButtonProps) => react_jsx_runtime.JSX.Element;
 type CarouselItemProps = HTMLProps<HTMLDivElement> & {
     /** The component/components to display as the <CarouselItem/>. */
     children: React.ReactNode;
@@ -457,6 +502,10 @@ declare function GrunnmurenProvider({ children, locale, navigate, useHref, }: Gr
 type HeroProps = HTMLProps<HTMLDivElement> & VariantProps<typeof variants> & {
     children: React.ReactNode;
 };
+type HeroContextValue = {
+    variant: HeroProps['variant'];
+};
+declare const HeroContext: react.Context<HeroContextValue | null>;
 declare const variants: (props?: ({
     variant?: "standard" | "full-bleed" | "two-column" | undefined;
 } & ({
@@ -793,5 +842,5 @@ type VideoLoopProps = {
 };
 declare const VideoLoop: ({ src, format, alt, className }: VideoLoopProps) => react_jsx_runtime.JSX.Element;
-export { Accordion, AccordionItem, Alertbox, Avatar, Backlink, Badge, Breadcrumb, Breadcrumbs, Button, ButtonContext, Caption, Card, CardLink, Checkbox, CheckboxGroup, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, Content, ContentContext, DateFormatter, Description, Disclosure, DisclosureButton, DisclosurePanel, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Label, LinkList, LinkListContainer, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, Tag, TagGroup, TagList, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselButton as UNSAFE_CarouselButton, CarouselControls as UNSAFE_CarouselControls, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, CarouselItemsContainer as UNSAFE_CarouselItemsContainer, CarouselItemsContainer as UNSAFE_CarouselItemsContainerProps, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, Link as UNSAFE_Link, Modal as UNSAFE_Modal, ProgressBar as UNSAFE_ProgressBar, ProgressBarValueText as UNSAFE_ProgressBarValueText, Tab as UNSAFE_Tab, TabList as UNSAFE_TabList, TabPanel as UNSAFE_TabPanel, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, TableContainer as UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, Tabs as UNSAFE_Tabs, VideoLoop, _LinkContext, _useLocale as useLocale };
-export type { AccordionItemProps, AccordionProps, Props as AlertboxProps, AvatarProps, BacklinkProps, BadgeProps, BreadcrumbProps, BreadcrumbsProps, ButtonProps, CaptionProps, CardLinkProps, CardProps, CheckboxGroupProps, CheckboxProps, ComboboxProps, ContentProps, DateFormatterProps, DescriptionProps, DisclosureButtonProps, DisclosurePanelProps, DisclosureProps, ErrorMessageProps, FooterProps, GrunnmurenProviderProps, HeadingProps, LinkListContainerProps, LinkListItemProps, LinkListProps, Locale, MediaProps, NumberFieldProps, RadioGroupProps, RadioProps, SelectProps, TagGroupProps, TagListProps, TagProps, TextAreaProps, TextFieldProps, CarouselButtonProps as UNSAFE_CarouselButtonProps, CarouselControlsProps as UNSAFE_CarouselControlsProps, CarouselItemProps as UNSAFE_CarouselItemProps, CarouselItemsProps as UNSAFE_CarouselItemsProps, CarouselProps as UNSAFE_CarouselProps, DialogProps as UNSAFE_DialogProps, DialogTriggerProps as UNSAFE_DialogTriggerProps, FileUploadProps as UNSAFE_FileUploadProps, HeroProps as UNSAFE_HeroProps, LinkProps as UNSAFE_LinkProps, ModalProps as UNSAFE_ModalProps, ProgressBarProps as UNSAFE_ProgressBarProps, ProgressBarValueTextProps as UNSAFE_ProgressBarValueTextProps, TabListProps as UNSAFE_TabListProps, TabPanelProps as UNSAFE_TabPanelProps, TabProps as UNSAFE_TabProps, TableBodyProps as UNSAFE_TableBodyProps, TableCellProps as UNSAFE_TableCellProps, TableColumnProps as UNSAFE_TableColumnProps, TableColumnResizerProps as UNSAFE_TableColumnResizerProps, TableContainerProps as UNSAFE_TableContainerProps, TableHeaderProps as UNSAFE_TableHeaderProps, TableProps as UNSAFE_TableProps, TableRowProps as UNSAFE_TableRowProps, TabsProps as UNSAFE_TabsProps };
+export { Accordion, AccordionItem, Alertbox, Avatar, Backlink, Badge, Breadcrumb, Breadcrumbs, Button, ButtonContext, Caption, Card, CardLink, Checkbox, CheckboxGroup, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, Content, ContentContext, DateFormatter, Description, Disclosure, DisclosureButton, DisclosurePanel, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Label, LinkList, LinkListContainer, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, Tag, TagGroup, TagList, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselButton as UNSAFE_CarouselButton, CarouselContext as UNSAFE_CarouselContext, CarouselControls as UNSAFE_CarouselControls, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, CarouselItemsContainer as UNSAFE_CarouselItemsContainer, CarouselItemsContainer as UNSAFE_CarouselItemsContainerProps, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, HeroContext as UNSAFE_HeroContext, Link as UNSAFE_Link, Modal as UNSAFE_Modal, ProgressBar as UNSAFE_ProgressBar, ProgressBarValueText as UNSAFE_ProgressBarValueText, Tab as UNSAFE_Tab, TabList as UNSAFE_TabList, TabPanel as UNSAFE_TabPanel, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, TableContainer as UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, Tabs as UNSAFE_Tabs, VideoLoop, _LinkContext, _useLocale as useLocale };
+export type { AccordionItemProps, AccordionProps, Props as AlertboxProps, AvatarProps, BacklinkProps, BadgeProps, BreadcrumbProps, BreadcrumbsProps, ButtonProps, CaptionProps, CardLinkProps, CardProps, CheckboxGroupProps, CheckboxProps, ComboboxProps, ContentProps, DateFormatterProps, DescriptionProps, DisclosureButtonProps, DisclosurePanelProps, DisclosureProps, ErrorMessageProps, FooterProps, GrunnmurenProviderProps, HeadingProps, LinkListContainerProps, LinkListItemProps, LinkListProps, Locale, MediaProps, NumberFieldProps, RadioGroupProps, RadioProps, SelectProps, TagGroupProps, TagListProps, TagProps, TextAreaProps, TextFieldProps, CarouselButtonProps as UNSAFE_CarouselButtonProps, CarouselContextValue as UNSAFE_CarouselContextValue, CarouselControlsProps as UNSAFE_CarouselControlsProps, CarouselItemProps as UNSAFE_CarouselItemProps, CarouselItemsProps as UNSAFE_CarouselItemsProps, CarouselProps as UNSAFE_CarouselProps, DialogProps as UNSAFE_DialogProps, DialogTriggerProps as UNSAFE_DialogTriggerProps, FileUploadProps as UNSAFE_FileUploadProps, HeroContextValue as UNSAFE_HeroContextValue, HeroProps as UNSAFE_HeroProps, LinkProps as UNSAFE_LinkProps, ModalProps as UNSAFE_ModalProps, ProgressBarProps as UNSAFE_ProgressBarProps, ProgressBarValueTextProps as UNSAFE_ProgressBarValueTextProps, TabListProps as UNSAFE_TabListProps, TabPanelProps as UNSAFE_TabPanelProps, TabProps as UNSAFE_TabProps, TableBodyProps as UNSAFE_TableBodyProps, TableCellProps as UNSAFE_TableCellProps, TableColumnProps as UNSAFE_TableColumnProps, TableColumnResizerProps as UNSAFE_TableColumnResizerProps, TableContainerProps as UNSAFE_TableContainerProps, TableHeaderProps as UNSAFE_TableHeaderProps, TableProps as UNSAFE_TableProps, TableRowProps as UNSAFE_TableRowProps, TabsProps as UNSAFE_TabsProps };