@fremtind/jokul 0.24.0 → 0.25.0

package/build/es/components/button/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../src/components/button/types.ts"],"sourcesContent":["import { Density } from \"../../core\";\nimport { PolymorphicPropsWithRef } from \"../../utilities\";\n\nexport const buttonVariants = [\"primary\", \"secondary\", \"tertiary\", \"ghost\"] as const;\nexport type ButtonVariant = (typeof buttonVariants)[number];\nexport type IconPosition = \"left\" | \"right\";\n\ntype IconOptions<T extends React.ElementType> =\n    // Hvis ikke knappen har ikon, MÅ den ha children:\n    | {\n          iconPosition?: never;\n          icon?: never;\n          children: React.ComponentPropsWithoutRef<T>[\"children\"];\n      }\n    | {\n          /**\n           * Plasseringen av ikonet\n           * @default \"left\"\n           */\n          iconPosition?: IconPosition;\n          /**\n           * Hvilket ikon som skal vises i knappen\n           */\n          icon: React.ReactElement;\n      };\n\nexport type ButtonProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<\n    ElementType,\n    {\n        density?: Density;\n        /**\n         * Hvilken variant av knappen skal vises\n         * @default \"secondary\"\n         */\n        variant?: ButtonVariant;\n        className?: string;\n        loader?: {\n            showLoader: boolean;\n            textDescription: string;\n        };\n        /**\n         * @deprecated Bruk `icon` i kombinasjon med `iconPosition=\"left\"`\n         */\n        iconLeft?: React.ReactNode;\n        /**\n         * @deprecated Bruk `icon` i kombinasjon med `iconPosition=\"right\"`\n         */\n        iconRight?: React.ReactNode;\n    } & IconOptions<ElementType>\n>;\n\nexport type ButtonComponent = <ElementType extends React.ElementType = \"button\">(\n    props: ButtonProps<ElementType>,\n) => React.ReactElement | null;\n"],"names":["buttonVariants"],"mappings":"AAGO,MAAMA,EAAiB,CAAC,UAAW,YAAa,WAAY"}
+{"version":3,"file":"types.js","sources":["../../../../src/components/button/types.ts"],"sourcesContent":["import { Density } from \"../../core/types.js\";\nimport { PolymorphicPropsWithRef } from \"../../utilities/polymorphism/polymorphism.js\";\n\nexport const buttonVariants = [\"primary\", \"secondary\", \"tertiary\", \"ghost\"] as const;\nexport type ButtonVariant = (typeof buttonVariants)[number];\nexport type IconPosition = \"left\" | \"right\";\n\ntype IconOptions<T extends React.ElementType> =\n    // Hvis ikke knappen har ikon, MÅ den ha children:\n    | {\n          iconPosition?: never;\n          icon?: never;\n          children: React.ComponentPropsWithoutRef<T>[\"children\"];\n      }\n    | {\n          /**\n           * Plasseringen av ikonet\n           * @default \"left\"\n           */\n          iconPosition?: IconPosition;\n          /**\n           * Hvilket ikon som skal vises i knappen\n           */\n          icon: React.ReactElement;\n      };\n\nexport type ButtonProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<\n    ElementType,\n    {\n        density?: Density;\n        /**\n         * Hvilken variant av knappen skal vises\n         * @default \"secondary\"\n         */\n        variant?: ButtonVariant;\n        className?: string;\n        loader?: {\n            showLoader: boolean;\n            textDescription: string;\n        };\n        /**\n         * @deprecated Bruk `icon` i kombinasjon med `iconPosition=\"left\"`\n         */\n        iconLeft?: React.ReactNode;\n        /**\n         * @deprecated Bruk `icon` i kombinasjon med `iconPosition=\"right\"`\n         */\n        iconRight?: React.ReactNode;\n    } & IconOptions<ElementType>\n>;\n\nexport type ButtonComponent = <ElementType extends React.ElementType = \"button\">(\n    props: ButtonProps<ElementType>,\n) => React.ReactElement | null;\n"],"names":["buttonVariants"],"mappings":"AAGO,MAAMA,EAAiB,CAAC,UAAW,YAAa,WAAY"}

package/build/es/components/card/Card.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+import { AsChildProps } from '../../utilities/polymorphism/as-child.js';
+import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphism.js';
+export declare const CARD_PADDINGS: readonly ["s", "m", "l", "xl"];
+export type CardPadding = (typeof CARD_PADDINGS)[number];
+export declare const CARD_VARIANTS: readonly ["outlined", "high", "low"];
+export type CardVariant = (typeof CARD_VARIANTS)[number];
+export type CardProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<ElementType, {
+    className?: string;
+    /**
+     * Setter padding på kortet. Tilsvarer samme property i Figma.
+     * @default "s"
+     */
+    padding?: CardPadding;
+    /**
+     * Angir hvilken kortvariant du vil bruke. Velg en variant som gir god kontrast
+     * til bakgrunnen på siden, slik at det er enkelt å skille innholdet fra hverandre.
+     * @default "high"
+     */
+    variant?: CardVariant;
+    /**
+     * Angir om kortet visuelt skal fremstå som klikkbart. Du må selv rendre
+     * kortet som et klikkbart element (f.eks. `<a>` eller en `<Link>` fra
+     * et ruting-bibliotek) og gi det en `href` eller `onClick`-handler.
+     * HUSK: Sett aria-label for at støtteverktøy, som skjermlesere, ikke
+     * skal lese alt innholdet i kortet.
+     */
+    clickable?: boolean;
+}>;
+type CardComponent = <ElementType extends React.ElementType = "div">(props: CardProps<ElementType> & AsChildProps) => React.ReactElement | null;
+/**
+ * En allsidig kortkomponent som brukes for å gruppere innhold på en side.
+ * Komponenten rendres til vanlig som en `<div>`, men du kan velge å rendre
+ * den som andre elementer eller komponenter der du trenger annen semantikk
+ * eller funksjonalitet.
+ */
+export declare const Card: CardComponent;
+export {};

package/build/es/components/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { SlotComponent, type AsChildProps, type PolymorphicPropsWithRef, type PolymorphicRef } from \"../../utilities\";\n\nexport const CARD_PADDINGS = [\"s\", \"m\", \"l\", \"xl\"] as const;\nexport type CardPadding = (typeof CARD_PADDINGS)[number];\nexport const CARD_VARIANTS = [\"outlined\", \"high\", \"low\"] as const;\nexport type CardVariant = (typeof CARD_VARIANTS)[number];\n\nexport type CardProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<\n    ElementType,\n    {\n        className?: string;\n        /**\n         * Setter padding på kortet. Tilsvarer samme property i Figma.\n         * @default \"s\"\n         */\n        padding?: CardPadding;\n        /**\n         * Angir hvilken kortvariant du vil bruke. Velg en variant som gir god kontrast\n         * til bakgrunnen på siden, slik at det er enkelt å skille innholdet fra hverandre.\n         * @default \"high\"\n         */\n        variant?: CardVariant;\n        /**\n         * Angir om kortet visuelt skal fremstå som klikkbart. Du må selv rendre\n         * kortet som et klikkbart element (f.eks. `<a>` eller en `<Link>` fra\n         * et ruting-bibliotek) og gi det en `href` eller `onClick`-handler.\n         * HUSK: Sett aria-label for at støtteverktøy, som skjermlesere, ikke\n         * skal lese alt innholdet i kortet.\n         */\n        clickable?: boolean;\n    }\n>;\n\ntype CardComponent = <ElementType extends React.ElementType = \"div\">(\n    props: CardProps<ElementType> & AsChildProps,\n) => React.ReactElement | null;\n\n/**\n * En allsidig kortkomponent som brukes for å gruppere innhold på en side.\n * Komponenten rendres til vanlig som en `<div>`, men du kan velge å rendre\n * den som andre elementer eller komponenter der du trenger annen semantikk\n * eller funksjonalitet.\n */\nexport const Card = React.forwardRef(function Card<ElementType extends React.ElementType = \"div\">(\n    props: CardProps<ElementType>,\n    ref?: PolymorphicRef<ElementType>,\n) {\n    const {\n        className,\n        clickable = false,\n        padding = \"s\",\n        variant = \"high\",\n        asChild,\n        as = \"div\",\n        ...componentProps\n    } = props;\n\n    const Component = asChild ? SlotComponent : as;\n\n    return (\n        <Component\n            data-testid=\"jkl-card\"\n            data-clickable={clickable}\n            data-padding={padding}\n            className={clsx(\"jkl-card\", `jkl-card--${variant}`, className)}\n            {...componentProps}\n            ref={ref}\n        />\n    );\n}) as CardComponent;\n"],"names":["CARD_PADDINGS","CARD_VARIANTS","Card","React","forwardRef","props","ref","className","clickable","padding","variant","asChild","as","componentProps","jsx","SlotComponent","clsx"],"mappings":"yLAIO,MAAMA,EAAgB,CAAC,IAAK,IAAK,IAAK,MAEhCC,EAAgB,CAAC,WAAY,OAAQ,OAuCrCC,EAAOC,EAAMC,YAAW,SACjCC,EACAC,GAEM,MACFC,UAAAA,EACAC,UAAAA,GAAY,EACZC,QAAAA,EAAU,IACVC,QAAAA,EAAU,OACVC,QAAAA,EACAC,GAAAA,EAAK,SACFC,GACHR,EAKA,OAAAS,EAHcH,EAAUI,EAAgBH,EAGvC,CACG,cAAY,WACZ,iBAAgBJ,EAChB,eAAcC,EACdF,UAAWS,EAAK,WAAY,aAAaN,IAAWH,MAChDM,EACJP,IAAAA,GAGZ"}
+{"version":3,"file":"Card.js","sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { AsChildProps } from \"../../utilities/polymorphism/as-child.js\";\nimport { SlotComponent } from \"../../utilities/polymorphism/index.js\";\nimport { PolymorphicPropsWithRef, PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\n\nexport const CARD_PADDINGS = [\"s\", \"m\", \"l\", \"xl\"] as const;\nexport type CardPadding = (typeof CARD_PADDINGS)[number];\nexport const CARD_VARIANTS = [\"outlined\", \"high\", \"low\"] as const;\nexport type CardVariant = (typeof CARD_VARIANTS)[number];\n\nexport type CardProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<\n    ElementType,\n    {\n        className?: string;\n        /**\n         * Setter padding på kortet. Tilsvarer samme property i Figma.\n         * @default \"s\"\n         */\n        padding?: CardPadding;\n        /**\n         * Angir hvilken kortvariant du vil bruke. Velg en variant som gir god kontrast\n         * til bakgrunnen på siden, slik at det er enkelt å skille innholdet fra hverandre.\n         * @default \"high\"\n         */\n        variant?: CardVariant;\n        /**\n         * Angir om kortet visuelt skal fremstå som klikkbart. Du må selv rendre\n         * kortet som et klikkbart element (f.eks. `<a>` eller en `<Link>` fra\n         * et ruting-bibliotek) og gi det en `href` eller `onClick`-handler.\n         * HUSK: Sett aria-label for at støtteverktøy, som skjermlesere, ikke\n         * skal lese alt innholdet i kortet.\n         */\n        clickable?: boolean;\n    }\n>;\n\ntype CardComponent = <ElementType extends React.ElementType = \"div\">(\n    props: CardProps<ElementType> & AsChildProps,\n) => React.ReactElement | null;\n\n/**\n * En allsidig kortkomponent som brukes for å gruppere innhold på en side.\n * Komponenten rendres til vanlig som en `<div>`, men du kan velge å rendre\n * den som andre elementer eller komponenter der du trenger annen semantikk\n * eller funksjonalitet.\n */\nexport const Card = React.forwardRef(function Card<ElementType extends React.ElementType = \"div\">(\n    props: CardProps<ElementType>,\n    ref?: PolymorphicRef<ElementType>,\n) {\n    const {\n        className,\n        clickable = false,\n        padding = \"s\",\n        variant = \"high\",\n        asChild,\n        as = \"div\",\n        ...componentProps\n    } = props;\n\n    const Component = asChild ? SlotComponent : as;\n\n    return (\n        <Component\n            data-testid=\"jkl-card\"\n            data-clickable={clickable}\n            data-padding={padding}\n            className={clsx(\"jkl-card\", `jkl-card--${variant}`, className)}\n            {...componentProps}\n            ref={ref}\n        />\n    );\n}) as CardComponent;\n"],"names":["CARD_PADDINGS","CARD_VARIANTS","Card","React","forwardRef","props","ref","className","clickable","padding","variant","asChild","as","componentProps","jsx","SlotComponent","clsx"],"mappings":"yLAMO,MAAMA,EAAgB,CAAC,IAAK,IAAK,IAAK,MAEhCC,EAAgB,CAAC,WAAY,OAAQ,OAuCrCC,EAAOC,EAAMC,YAAW,SACjCC,EACAC,GAEM,MACFC,UAAAA,EACAC,UAAAA,GAAY,EACZC,QAAAA,EAAU,IACVC,QAAAA,EAAU,OACVC,QAAAA,EACAC,GAAAA,EAAK,SACFC,GACHR,EAKA,OAAAS,EAHcH,EAAUI,EAAgBH,EAGvC,CACG,cAAY,WACZ,iBAAgBJ,EAChB,eAAcC,EACdF,UAAWS,EAAK,WAAY,aAAaN,IAAWH,MAChDM,EACJP,IAAAA,GAGZ"}

package/build/es/components/card/CardImage.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphism.js';
+export type CardImageProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<ElementType, {
+    /**
+     * Legger til riktig negativ margin avhengig av hvor i kortet bildet
+     * skal plasseres. Margin justeres automatisk etter padding i kortet.
+     * @default "top"
+     */
+    placement?: "top" | "middle" | "bottom";
+}>;
+type CardImageComponent = <ElementType extends React.ElementType = "img">(props: CardImageProps<ElementType>) => React.ReactElement | null;
+/**
+ * Bildekomponent som kan brukes i `Card` for å sørge for at bildet
+ * blør helt ut i kantene av kortet. Rendres normalt som et `<img>`-
+ * element, men du kan overstyre dette med `as` dersom du f.eks. har
+ * en egen komponent for å håndtere responsive bilder.
+ */
+export declare const CardImage: CardImageComponent;
+export {};

package/build/es/components/card/CardImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardImage.js","sources":["../../../../src/components/card/CardImage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { SlotComponent, type AsChildProps, type PolymorphicPropsWithRef, type PolymorphicRef } from \"../../utilities\";\n\nexport type CardImageProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<\n    ElementType,\n    {\n        /**\n         * Legger til riktig negativ margin avhengig av hvor i kortet bildet\n         * skal plasseres. Margin justeres automatisk etter padding i kortet.\n         * @default \"top\"\n         */\n        placement?: \"top\" | \"middle\" | \"bottom\";\n    }\n>;\n\ntype CardImageComponent = <ElementType extends React.ElementType = \"img\">(\n    props: CardImageProps<ElementType>,\n) => React.ReactElement | null;\n\n/**\n * Bildekomponent som kan brukes i `Card` for å sørge for at bildet\n * blør helt ut i kantene av kortet. Rendres normalt som et `<img>`-\n * element, men du kan overstyre dette med `as` dersom du f.eks. har\n * en egen komponent for å håndtere responsive bilder.\n */\nexport const CardImage = React.forwardRef(function CardImage<ElementType extends React.ElementType = \"img\">(\n    { as, asChild, className, placement = \"top\", ...imageProps }: CardImageProps<ElementType> & AsChildProps,\n    ref?: PolymorphicRef<ElementType>,\n) {\n    const Component = asChild ? SlotComponent : as || \"img\";\n\n    return (\n        <Component\n            ref={ref}\n            className={clsx(\"jkl-card-image\", `jkl-card-image--${placement}`, className)}\n            {...imageProps}\n        />\n    );\n}) as CardImageComponent;\n"],"names":["CardImage","React","forwardRef","as","asChild","className","placement","imageProps","ref","jsx","SlotComponent","clsx"],"mappings":"yLA0BO,MAAMA,EAAYC,EAAMC,YAAW,UACpCC,GAAAA,EAAIC,QAAAA,EAASC,UAAAA,EAAWC,UAAAA,EAAY,SAAUC,GAChDC,GAKI,OAAAC,EAHcL,EAAUM,EAAgBP,GAAM,MAG7C,CACGK,IAAAA,EACAH,UAAWM,EAAK,iBAAkB,mBAAmBL,IAAaD,MAC9DE,GAGhB"}
+{"version":3,"file":"CardImage.js","sources":["../../../../src/components/card/CardImage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { AsChildProps } from \"../../utilities/polymorphism/as-child.js\";\nimport { SlotComponent } from \"../../utilities/polymorphism/index.js\";\nimport { PolymorphicPropsWithRef, PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\n\nexport type CardImageProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<\n    ElementType,\n    {\n        /**\n         * Legger til riktig negativ margin avhengig av hvor i kortet bildet\n         * skal plasseres. Margin justeres automatisk etter padding i kortet.\n         * @default \"top\"\n         */\n        placement?: \"top\" | \"middle\" | \"bottom\";\n    }\n>;\n\ntype CardImageComponent = <ElementType extends React.ElementType = \"img\">(\n    props: CardImageProps<ElementType>,\n) => React.ReactElement | null;\n\n/**\n * Bildekomponent som kan brukes i `Card` for å sørge for at bildet\n * blør helt ut i kantene av kortet. Rendres normalt som et `<img>`-\n * element, men du kan overstyre dette med `as` dersom du f.eks. har\n * en egen komponent for å håndtere responsive bilder.\n */\nexport const CardImage = React.forwardRef(function CardImage<ElementType extends React.ElementType = \"img\">(\n    { as, asChild, className, placement = \"top\", ...imageProps }: CardImageProps<ElementType> & AsChildProps,\n    ref?: PolymorphicRef<ElementType>,\n) {\n    const Component = asChild ? SlotComponent : as || \"img\";\n\n    return (\n        <Component\n            ref={ref}\n            className={clsx(\"jkl-card-image\", `jkl-card-image--${placement}`, className)}\n            {...imageProps}\n        />\n    );\n}) as CardImageComponent;\n"],"names":["CardImage","React","forwardRef","as","asChild","className","placement","imageProps","ref","jsx","SlotComponent","clsx"],"mappings":"yLA4BO,MAAMA,EAAYC,EAAMC,YAAW,UACpCC,GAAAA,EAAIC,QAAAA,EAASC,UAAAA,EAAWC,UAAAA,EAAY,SAAUC,GAChDC,GAKI,OAAAC,EAHcL,EAAUM,EAAgBP,GAAM,MAG7C,CACGK,IAAAA,EACAH,UAAWM,EAAK,iBAAkB,mBAAmBL,IAAaD,MAC9DE,GAGhB"}

package/build/es/components/card/InfoCard.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { Density, WithChildren } from '../../core/types.js';
+import { PaddingOptions, SpacingStep } from './types.js';
+export interface InfoCardProps extends PaddingOptions, WithChildren {
+    className?: string;
+    title?: string;
+    /**
+     * Legger til ekstra rom i bunnen av kortet, fra spacing-skalaen til Jøkul.
+     */
+    bottomPadding?: SpacingStep;
+    density?: Density;
+}
+export declare const InfoCard: FC<InfoCardProps>;

package/build/es/components/card/InfoCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoCard.js","sources":["../../../../src/components/card/InfoCard.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { FC } from \"react\";\nimport { Density, WithChildren } from \"../../core\";\nimport { PaddingOptions, SpacingStep } from \"./types\";\nimport { getPaddingStyles } from \"./utils\";\n\nexport interface InfoCardProps extends PaddingOptions, WithChildren {\n    className?: string;\n    title?: string;\n    /**\n     * Legger til ekstra rom i bunnen av kortet, fra spacing-skalaen til Jøkul.\n     */\n    bottomPadding?: SpacingStep;\n    density?: Density;\n}\n\nexport const InfoCard: FC<InfoCardProps> = ({ title, children, density, className, padding = \"l\", ...rest }) => (\n    <div {...rest} className={clsx(\"jkl-info-card\", className)} data-density={density}>\n        <div className={clsx(\"jkl-info-card__content-wrapper\")} style={getPaddingStyles(padding)}>\n            {title && <p className=\"jkl-info-card__title\">{title}</p>}\n            {children}\n        </div>\n    </div>\n);\n"],"names":["InfoCard","title","children","density","className","padding","rest","jsx","clsx","jsxs","style","getPaddingStyles"],"mappings":"8IAgBO,MAAMA,EAA8B,EAAGC,MAAAA,EAAOC,SAAAA,EAAUC,QAAAA,EAASC,UAAAA,EAAWC,QAAAA,EAAU,OAAQC,KACjGC,EAAC,UAAQD,EAAMF,UAAWI,EAAK,gBAAiBJ,GAAY,eAAcD,EACtED,SAACO,EAAA,MAAA,CAAIL,UAAWI,EAAK,kCAAmCE,MAAOC,EAAiBN,GAC3EH,SAAA,CAAAD,GAAUM,EAAA,IAAA,CAAEH,UAAU,uBAAwBF,SAAMD,IACpDC"}
+{"version":3,"file":"InfoCard.js","sources":["../../../../src/components/card/InfoCard.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { FC } from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { PaddingOptions, SpacingStep } from \"./types.js\";\nimport { getPaddingStyles } from \"./utils.js\";\n\nexport interface InfoCardProps extends PaddingOptions, WithChildren {\n    className?: string;\n    title?: string;\n    /**\n     * Legger til ekstra rom i bunnen av kortet, fra spacing-skalaen til Jøkul.\n     */\n    bottomPadding?: SpacingStep;\n    density?: Density;\n}\n\nexport const InfoCard: FC<InfoCardProps> = ({ title, children, density, className, padding = \"l\", ...rest }) => (\n    <div {...rest} className={clsx(\"jkl-info-card\", className)} data-density={density}>\n        <div className={clsx(\"jkl-info-card__content-wrapper\")} style={getPaddingStyles(padding)}>\n            {title && <p className=\"jkl-info-card__title\">{title}</p>}\n            {children}\n        </div>\n    </div>\n);\n"],"names":["InfoCard","title","children","density","className","padding","rest","jsx","clsx","jsxs","style","getPaddingStyles"],"mappings":"8IAgBO,MAAMA,EAA8B,EAAGC,MAAAA,EAAOC,SAAAA,EAAUC,QAAAA,EAASC,UAAAA,EAAWC,QAAAA,EAAU,OAAQC,KACjGC,EAAC,UAAQD,EAAMF,UAAWI,EAAK,gBAAiBJ,GAAY,eAAcD,EACtED,SAACO,EAAA,MAAA,CAAIL,UAAWI,EAAK,kCAAmCE,MAAOC,EAAiBN,GAC3EH,SAAA,CAAAD,GAAUM,EAAA,IAAA,CAAEH,UAAU,uBAAwBF,SAAMD,IACpDC"}

package/build/es/components/card/NavCard.d.ts

@@ -0,0 +1,35 @@
+import { AnchorHTMLAttributes, ElementType, FC } from 'react';
+import { Density, WithChildren } from '../../core/types.js';
+import { ImageProps } from '../image/Image.js';
+import { PaddingOptions } from './types.js';
+export type TagType = "success" | "warning" | "info" | "error";
+/**
+ * Bruk denne komponenten for å legge til ekstra informasjon i NavCard.
+ * Innholdet blir rendret med skillelinje, og tekststil "small"
+ */
+export declare const InfoBlock: FC<WithChildren>;
+interface CardTag {
+    /**
+     * @default <none> Rendres som nøytral tag
+     */
+    type?: TagType;
+    text: string;
+}
+export interface NavCardProps extends PaddingOptions, AnchorHTMLAttributes<HTMLAnchorElement> {
+    tag?: CardTag | Array<CardTag>;
+    title: string;
+    href?: string;
+    to?: string;
+    external?: boolean;
+    description?: string;
+    image?: Omit<ImageProps, "className">;
+    className?: string;
+    /**
+     * Overstyr hvilken komponent som skal brukes, for eksempel hvis du har en Link-komponent fra en router.
+     * @default "a"
+     */
+    component?: ElementType;
+    density?: Density;
+}
+export declare const NavCard: FC<NavCardProps>;
+export {};

package/build/es/components/card/NavCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavCard.js","sources":["../../../../src/components/card/NavCard.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { ElementType, FC, AnchorHTMLAttributes } from \"react\";\nimport { WithChildren, Density } from \"../../core\";\nimport { Image, ImageProps } from \"../image\";\nimport { ErrorTag, InfoTag, SuccessTag, Tag, TagProps, WarningTag } from \"../tag\";\nimport { PaddingOptions } from \"./types\";\nimport { getPaddingStyles } from \"./utils\";\n\nexport type TagType = \"success\" | \"warning\" | \"info\" | \"error\";\n\n/**\n * Bruk denne komponenten for å legge til ekstra informasjon i NavCard.\n * Innholdet blir rendret med skillelinje, og tekststil \"small\"\n */\nexport const InfoBlock: FC<WithChildren> = ({ children }) => <div className=\"jkl-nav-card__info\">{children}</div>;\n\ninterface CardTag {\n    /**\n     * @default <none> Rendres som nøytral tag\n     */\n    type?: TagType;\n    text: string;\n}\n\nexport interface NavCardProps extends PaddingOptions, AnchorHTMLAttributes<HTMLAnchorElement> {\n    tag?: CardTag | Array<CardTag>;\n    title: string;\n    href?: string;\n    to?: string;\n    external?: boolean;\n    description?: string;\n    image?: Omit<ImageProps, \"className\">;\n    className?: string;\n    /**\n     * Overstyr hvilken komponent som skal brukes, for eksempel hvis du har en Link-komponent fra en router.\n     * @default \"a\"\n     */\n    component?: ElementType;\n    density?: Density;\n}\n\nconst getTag = (type?: TagType) => {\n    switch (type) {\n        case \"info\":\n            return InfoTag;\n        case \"success\":\n            return SuccessTag;\n        case \"warning\":\n            return WarningTag;\n        case \"error\":\n            return ErrorTag;\n        default:\n            return Tag;\n    }\n};\nconst NavCardTag = ({ text, type, density }: CardTag & Pick<TagProps, \"density\">) => {\n    const CardTag = getTag(type);\n    return <CardTag density={density}>{text}</CardTag>;\n};\n\nexport const NavCard: FC<NavCardProps> = React.forwardRef<HTMLAnchorElement, NavCardProps>((props, ref) => {\n    const {\n        component = \"a\",\n        padding = \"l\",\n        image,\n        tag,\n        title,\n        external,\n        description,\n        children,\n        className,\n        density,\n        ...rest\n    } = props;\n\n    const Component = component;\n\n    const tagArr = !tag ? undefined : Array.isArray(tag) ? tag : [tag];\n\n    return (\n        <Component\n            ref={ref}\n            aria-label={title}\n            className={clsx(\"jkl-nav-card\", className)}\n            data-density={density}\n            {...rest}\n        >\n            {image && <Image className=\"jkl-nav-card__image\" {...image} />}\n            <div className=\"jkl-nav-card__content\" style={getPaddingStyles(padding)}>\n                {tagArr && (\n                    <div className=\"jkl-nav-card__tag-wrapper\">\n                        {tagArr.map((t, index) => (\n                            <NavCardTag type={t.type} text={t.text} key={index} />\n                        ))}\n                    </div>\n                )}\n                <div>\n                    <p className={clsx(\"jkl-nav-card__link\", external ? \"jkl-nav-card__link--external\" : \"\")}>\n                        {title}\n                    </p>\n                    {description && <p className=\"jkl-nav-card__description jkl-spacing-xs--top\">{description}</p>}\n                </div>\n                {children}\n            </div>\n        </Component>\n    );\n});\n\nNavCard.displayName = \"NavCard\";\n"],"names":["InfoBlock","children","jsx","className","NavCardTag","text","type","density","CardTag","InfoTag","SuccessTag","WarningTag","ErrorTag","Tag","getTag","NavCard","React","forwardRef","props","ref","component","padding","image","tag","title","external","description","rest","Component","tagArr","Array","isArray","jsxs","clsx","Image","style","getPaddingStyles","map","t","index","displayName"],"mappings":"4SAca,MAAAA,EAA8B,EAAGC,SAAAA,KAAgBC,EAAA,MAAA,CAAIC,UAAU,qBAAsBF,SAAAA,IAyC5FG,EAAa,EAAGC,KAAAA,EAAMC,KAAAA,EAAMC,QAAAA,MACxBC,MAAAA,EAfK,CAACF,IACZ,OAAQA,GACJ,IAAK,OACMG,OAAAA,EACX,IAAK,UACMC,OAAAA,EACX,IAAK,UACMC,OAAAA,EACX,IAAK,QACMC,OAAAA,EACX,QACWC,OAAAA,EACf,EAGgBC,CAAOR,GAChB,OAAAJ,EAACM,EAAQ,CAAAD,QAAAA,EAAmBN,SAAKI,GAAA,EAG/BU,EAA4BC,EAAMC,YAA4C,CAACC,EAAOC,KACzF,MACFC,UAAAA,EAAY,IACZC,QAAAA,EAAU,IACVC,MAAAA,EACAC,IAAAA,EACAC,MAAAA,EACAC,SAAAA,EACAC,YAAAA,EACAzB,SAAAA,EACAE,UAAAA,EACAI,QAAAA,KACGoB,GACHT,EAEEU,EAAYR,EAEZS,EAAUN,EAAkBO,MAAMC,QAAQR,GAAOA,EAAM,CAACA,QAAxC,EAGlB,OAAAS,EAACJ,EAAA,CACGT,IAAAA,EACA,aAAYK,EACZrB,UAAW8B,EAAK,eAAgB9B,GAChC,eAAcI,KACVoB,EAEH1B,SAAA,CAAAqB,GAAUpB,EAAAgC,EAAA,CAAM/B,UAAU,yBAA0BmB,MACpD,MAAI,CAAAnB,UAAU,wBAAwBgC,MAAOC,EAAiBf,GAC1DpB,SAAA,CAAA4B,KACI,MAAI,CAAA1B,UAAU,4BACVF,SAAO4B,EAAAQ,KAAI,CAACC,EAAGC,MACXnC,EAAW,CAAAE,KAAMgC,EAAEhC,KAAMD,KAAMiC,EAAEjC,MAAWkC,SAIxD,MACG,CAAAtC,SAAA,CAACC,EAAA,IAAA,CAAEC,UAAW8B,EAAK,qBAAsBR,EAAW,+BAAiC,IAChFxB,SACLuB,IACCE,GAAexB,EAAC,IAAE,CAAAC,UAAU,gDAAiDF,SAAYyB,OAE7FzB,OACL,IAKZc,EAAQyB,YAAc"}
+{"version":3,"file":"NavCard.js","sources":["../../../../src/components/card/NavCard.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { AnchorHTMLAttributes, ElementType, FC } from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { Image, ImageProps } from \"../image/Image.js\";\nimport { ErrorTag, InfoTag, SuccessTag, Tag, TagProps, WarningTag } from \"../tag/Tag.js\";\nimport { PaddingOptions } from \"./types.js\";\nimport { getPaddingStyles } from \"./utils.js\";\n\nexport type TagType = \"success\" | \"warning\" | \"info\" | \"error\";\n\n/**\n * Bruk denne komponenten for å legge til ekstra informasjon i NavCard.\n * Innholdet blir rendret med skillelinje, og tekststil \"small\"\n */\nexport const InfoBlock: FC<WithChildren> = ({ children }) => <div className=\"jkl-nav-card__info\">{children}</div>;\n\ninterface CardTag {\n    /**\n     * @default <none> Rendres som nøytral tag\n     */\n    type?: TagType;\n    text: string;\n}\n\nexport interface NavCardProps extends PaddingOptions, AnchorHTMLAttributes<HTMLAnchorElement> {\n    tag?: CardTag | Array<CardTag>;\n    title: string;\n    href?: string;\n    to?: string;\n    external?: boolean;\n    description?: string;\n    image?: Omit<ImageProps, \"className\">;\n    className?: string;\n    /**\n     * Overstyr hvilken komponent som skal brukes, for eksempel hvis du har en Link-komponent fra en router.\n     * @default \"a\"\n     */\n    component?: ElementType;\n    density?: Density;\n}\n\nconst getTag = (type?: TagType) => {\n    switch (type) {\n        case \"info\":\n            return InfoTag;\n        case \"success\":\n            return SuccessTag;\n        case \"warning\":\n            return WarningTag;\n        case \"error\":\n            return ErrorTag;\n        default:\n            return Tag;\n    }\n};\nconst NavCardTag = ({ text, type, density }: CardTag & Pick<TagProps, \"density\">) => {\n    const CardTag = getTag(type);\n    return <CardTag density={density}>{text}</CardTag>;\n};\n\nexport const NavCard: FC<NavCardProps> = React.forwardRef<HTMLAnchorElement, NavCardProps>((props, ref) => {\n    const {\n        component = \"a\",\n        padding = \"l\",\n        image,\n        tag,\n        title,\n        external,\n        description,\n        children,\n        className,\n        density,\n        ...rest\n    } = props;\n\n    const Component = component;\n\n    const tagArr = !tag ? undefined : Array.isArray(tag) ? tag : [tag];\n\n    return (\n        <Component\n            ref={ref}\n            aria-label={title}\n            className={clsx(\"jkl-nav-card\", className)}\n            data-density={density}\n            {...rest}\n        >\n            {image && <Image className=\"jkl-nav-card__image\" {...image} />}\n            <div className=\"jkl-nav-card__content\" style={getPaddingStyles(padding)}>\n                {tagArr && (\n                    <div className=\"jkl-nav-card__tag-wrapper\">\n                        {tagArr.map((t, index) => (\n                            <NavCardTag type={t.type} text={t.text} key={index} />\n                        ))}\n                    </div>\n                )}\n                <div>\n                    <p className={clsx(\"jkl-nav-card__link\", external ? \"jkl-nav-card__link--external\" : \"\")}>\n                        {title}\n                    </p>\n                    {description && <p className=\"jkl-nav-card__description jkl-spacing-xs--top\">{description}</p>}\n                </div>\n                {children}\n            </div>\n        </Component>\n    );\n});\n\nNavCard.displayName = \"NavCard\";\n"],"names":["InfoBlock","children","jsx","className","NavCardTag","text","type","density","CardTag","InfoTag","SuccessTag","WarningTag","ErrorTag","Tag","getTag","NavCard","React","forwardRef","props","ref","component","padding","image","tag","title","external","description","rest","Component","tagArr","Array","isArray","jsxs","clsx","Image","style","getPaddingStyles","map","t","index","displayName"],"mappings":"4SAca,MAAAA,EAA8B,EAAGC,SAAAA,KAAgBC,EAAA,MAAA,CAAIC,UAAU,qBAAsBF,SAAAA,IAyC5FG,EAAa,EAAGC,KAAAA,EAAMC,KAAAA,EAAMC,QAAAA,MACxBC,MAAAA,EAfK,CAACF,IACZ,OAAQA,GACJ,IAAK,OACMG,OAAAA,EACX,IAAK,UACMC,OAAAA,EACX,IAAK,UACMC,OAAAA,EACX,IAAK,QACMC,OAAAA,EACX,QACWC,OAAAA,EACf,EAGgBC,CAAOR,GAChB,OAAAJ,EAACM,EAAQ,CAAAD,QAAAA,EAAmBN,SAAKI,GAAA,EAG/BU,EAA4BC,EAAMC,YAA4C,CAACC,EAAOC,KACzF,MACFC,UAAAA,EAAY,IACZC,QAAAA,EAAU,IACVC,MAAAA,EACAC,IAAAA,EACAC,MAAAA,EACAC,SAAAA,EACAC,YAAAA,EACAzB,SAAAA,EACAE,UAAAA,EACAI,QAAAA,KACGoB,GACHT,EAEEU,EAAYR,EAEZS,EAAUN,EAAkBO,MAAMC,QAAQR,GAAOA,EAAM,CAACA,QAAxC,EAGlB,OAAAS,EAACJ,EAAA,CACGT,IAAAA,EACA,aAAYK,EACZrB,UAAW8B,EAAK,eAAgB9B,GAChC,eAAcI,KACVoB,EAEH1B,SAAA,CAAAqB,GAAUpB,EAAAgC,EAAA,CAAM/B,UAAU,yBAA0BmB,MACpD,MAAI,CAAAnB,UAAU,wBAAwBgC,MAAOC,EAAiBf,GAC1DpB,SAAA,CAAA4B,KACI,MAAI,CAAA1B,UAAU,4BACVF,SAAO4B,EAAAQ,KAAI,CAACC,EAAGC,MACXnC,EAAW,CAAAE,KAAMgC,EAAEhC,KAAMD,KAAMiC,EAAEjC,MAAWkC,SAIxD,MACG,CAAAtC,SAAA,CAACC,EAAA,IAAA,CAAEC,UAAW8B,EAAK,qBAAsBR,EAAW,+BAAiC,IAChFxB,SACLuB,IACCE,GAAexB,EAAC,IAAE,CAAAC,UAAU,gDAAiDF,SAAYyB,OAE7FzB,OACL,IAKZc,EAAQyB,YAAc"}

package/build/es/components/card/TaskCard.d.ts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { Density, WithChildren } from '../../core/types.js';
+import { PaddingOptions } from './types.js';
+export interface TaskCardProps extends PaddingOptions, WithChildren {
+    /**
+     * Bakgrunnsfargen til kortet
+     * @deprecated Bruk `background` i stedet
+     */
+    bgColor?: "hvit" | "snohvit" | "sand" | "dis";
+    /**
+     * Bestemmer bakgrunnsfargen til kortet, på tvers av mørkt eller lyst tema
+     * @default "highlighted"
+     */
+    background?: "highlighted" | "normal" | "subdued";
+    /**
+     * Skal kortet ha skygge?
+     * @default false
+     */
+    withShadow?: boolean;
+    className?: string;
+    density?: Density;
+}
+export declare const TaskCard: FC<TaskCardProps>;

package/build/es/components/card/TaskCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"TaskCard.js","sources":["../../../../src/components/card/TaskCard.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { FC } from \"react\";\nimport { Density, WithChildren } from \"../../core\";\nimport { PaddingOptions } from \"./types\";\nimport { getPaddingStyles } from \"./utils\";\n\nexport interface TaskCardProps extends PaddingOptions, WithChildren {\n    /**\n     * Bakgrunnsfargen til kortet\n     * @deprecated Bruk `background` i stedet\n     */\n    bgColor?: \"hvit\" | \"snohvit\" | \"sand\" | \"dis\";\n    /**\n     * Bestemmer bakgrunnsfargen til kortet, på tvers av mørkt eller lyst tema\n     * @default \"highlighted\"\n     */\n    background?: \"highlighted\" | \"normal\" | \"subdued\";\n    /**\n     * Skal kortet ha skygge?\n     * @default false\n     */\n    withShadow?: boolean;\n    className?: string;\n    density?: Density;\n}\n\nexport const TaskCard: FC<TaskCardProps> = ({\n    bgColor,\n    background = \"highlighted\",\n    withShadow = false,\n    padding = \"l\",\n    className,\n    children,\n    density,\n    ...rest\n}) => (\n    <div\n        className={clsx(\"jkl-task-card\", className, {\n            // Vi bruker kun background hvis bgColor ikke er satt, for å ikke bryte eksisterende kode\n            [`jkl-task-card--${background}`]: !bgColor,\n            [`jkl-task-card--${bgColor}`]: !!bgColor,\n            \"jkl-task-card--with-shadow\": withShadow,\n        })}\n        data-density={density}\n        {...rest}\n    >\n        <div className=\"jkl-task-card__content-wrapper\" style={getPaddingStyles(padding)}>\n            {children}\n        </div>\n    </div>\n);\n"],"names":["TaskCard","bgColor","background","withShadow","padding","className","children","density","rest","jsx","clsx","style","getPaddingStyles"],"mappings":"oIA0BO,MAAMA,EAA8B,EACvCC,QAAAA,EACAC,WAAAA,EAAa,cACbC,WAAAA,GAAa,EACbC,QAAAA,EAAU,IACVC,UAAAA,EACAC,SAAAA,EACAC,QAAAA,KACGC,KAEHC,EAAC,MAAA,CACGJ,UAAWK,EAAK,gBAAiBL,EAAW,CAExC,CAAC,kBAAkBH,MAAgBD,EACnC,CAAC,kBAAkBA,OAAcA,EACjC,6BAA8BE,IAElC,eAAcI,KACVC,EAEJF,SAAAG,EAAC,OAAIJ,UAAU,iCAAiCM,MAAOC,EAAiBR,GACnEE,SAAAA"}
+{"version":3,"file":"TaskCard.js","sources":["../../../../src/components/card/TaskCard.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { FC } from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { PaddingOptions } from \"./types.js\";\nimport { getPaddingStyles } from \"./utils.js\";\n\nexport interface TaskCardProps extends PaddingOptions, WithChildren {\n    /**\n     * Bakgrunnsfargen til kortet\n     * @deprecated Bruk `background` i stedet\n     */\n    bgColor?: \"hvit\" | \"snohvit\" | \"sand\" | \"dis\";\n    /**\n     * Bestemmer bakgrunnsfargen til kortet, på tvers av mørkt eller lyst tema\n     * @default \"highlighted\"\n     */\n    background?: \"highlighted\" | \"normal\" | \"subdued\";\n    /**\n     * Skal kortet ha skygge?\n     * @default false\n     */\n    withShadow?: boolean;\n    className?: string;\n    density?: Density;\n}\n\nexport const TaskCard: FC<TaskCardProps> = ({\n    bgColor,\n    background = \"highlighted\",\n    withShadow = false,\n    padding = \"l\",\n    className,\n    children,\n    density,\n    ...rest\n}) => (\n    <div\n        className={clsx(\"jkl-task-card\", className, {\n            // Vi bruker kun background hvis bgColor ikke er satt, for å ikke bryte eksisterende kode\n            [`jkl-task-card--${background}`]: !bgColor,\n            [`jkl-task-card--${bgColor}`]: !!bgColor,\n            \"jkl-task-card--with-shadow\": withShadow,\n        })}\n        data-density={density}\n        {...rest}\n    >\n        <div className=\"jkl-task-card__content-wrapper\" style={getPaddingStyles(padding)}>\n            {children}\n        </div>\n    </div>\n);\n"],"names":["TaskCard","bgColor","background","withShadow","padding","className","children","density","rest","jsx","clsx","style","getPaddingStyles"],"mappings":"oIA0BO,MAAMA,EAA8B,EACvCC,QAAAA,EACAC,WAAAA,EAAa,cACbC,WAAAA,GAAa,EACbC,QAAAA,EAAU,IACVC,UAAAA,EACAC,SAAAA,EACAC,QAAAA,KACGC,KAEHC,EAAC,MAAA,CACGJ,UAAWK,EAAK,gBAAiBL,EAAW,CAExC,CAAC,kBAAkBH,MAAgBD,EACnC,CAAC,kBAAkBA,OAAcA,EACjC,6BAA8BE,IAElC,eAAcI,KACVC,EAEJF,SAAAG,EAAC,OAAIJ,UAAU,iCAAiCM,MAAOC,EAAiBR,GACnEE,SAAAA"}

package/build/es/components/card/documentation/examples/FakturainfoExample.d.ts

@@ -0,0 +1,4 @@
+import { ExampleComponentProps, ExampleKnobsProps } from 'doc-utils/index.js';
+import { default as React } from 'react';
+export declare const FakturainfoExample: ({ boolValues, choiceValues }: ExampleComponentProps) => React.JSX.Element;
+export declare const fakturainfoExampleProps: ExampleKnobsProps;

package/build/es/components/card/documentation/examples/InfoCardExample.d.ts

@@ -0,0 +1,3 @@
+import { ExampleComponentProps } from 'doc-utils/index.js';
+import { default as React } from 'react';
+export declare const InfoCardExample: React.FC<ExampleComponentProps>;

package/build/es/components/card/documentation/examples/NavCardExample.d.ts

@@ -0,0 +1,3 @@
+import { ExampleComponentProps } from 'doc-utils/index.js';
+import { default as React } from 'react';
+export declare const NavCardExample: React.FC<ExampleComponentProps>;

package/build/es/components/card/documentation/examples/StatuskortExample.d.ts

@@ -0,0 +1,4 @@
+import { ExampleComponentProps, ExampleKnobsProps } from 'doc-utils/index.js';
+import { default as React } from 'react';
+export declare const StatuskortExample: ({ boolValues, choiceValues }: ExampleComponentProps) => React.JSX.Element;
+export declare const statuskortExampleProps: ExampleKnobsProps;

package/build/es/components/card/documentation/examples/TaskCardExample.d.ts

@@ -0,0 +1,3 @@
+import { ExampleComponentProps } from 'doc-utils/index.js';
+import { default as React } from 'react';
+export declare const TaskCardExample: React.FC<ExampleComponentProps>;

package/build/es/components/card/documentation/examples/TopExample.d.ts

@@ -0,0 +1,3 @@
+import { ExampleComponentProps } from 'doc-utils/index.js';
+import { FC } from 'react';
+export declare const TopExample: FC<ExampleComponentProps>;

package/build/es/components/card/documentation/examples/cardExampleProps.d.ts

@@ -0,0 +1,13 @@
+import { ExampleKnobsProps } from 'doc-utils/index.js';
+import { PaddingShorthand } from '../../types.js';
+export declare const baseCardExampleProps: {
+    choiceProps: {
+        name: string;
+        values: string[];
+        defaultValue: number;
+    }[];
+};
+export declare const navCardExampleProps: ExampleKnobsProps;
+export declare const taskCardExampleProps: ExampleKnobsProps;
+export declare const infoCardExampleProps: ExampleKnobsProps;
+export declare const mixedPadding: PaddingShorthand;

package/build/es/components/card/index.d.ts

@@ -0,0 +1,6 @@
+export { Card } from './Card.js';
+export { CardImage } from './CardImage.js';
+export { NavCard, InfoBlock, type NavCardProps } from './NavCard.js';
+export { TaskCard, type TaskCardProps } from './TaskCard.js';
+export { InfoCard, type InfoCardProps } from './InfoCard.js';
+export type { SpacingStep, PaddingOptions } from './types.js';

package/build/es/components/card/utils.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from 'react';
+import { BasePadding, PaddingShorthand } from './types.js';
+export declare function getPaddingStyles(padding: BasePadding | PaddingShorthand): CSSProperties;

package/build/es/components/card/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/card/utils.ts"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport { NEW_SPACING_STEPS, SPACING_STEPS, isOldSpacingStep } from \"./types\";\nimport type { BasePadding, PaddingShorthand, SpacingStep } from \"./types\";\n\nfunction getSpacingIndex(spacingStep?: SpacingStep, fallback: SpacingStep = \"24\"): number {\n    const value = spacingStep || fallback;\n    if (isOldSpacingStep(value)) {\n        return SPACING_STEPS.indexOf(value);\n    } else {\n        return NEW_SPACING_STEPS.indexOf(value);\n    }\n}\n\nexport function getPaddingStyles(padding: BasePadding | PaddingShorthand): CSSProperties {\n    if (typeof padding === \"string\") {\n        return { padding: `var(--jkl-spacing-${NEW_SPACING_STEPS[getSpacingIndex(padding)]})` };\n    }\n\n    // Sett sidepadding til den største av de to innsendte verdiene (eller \"24\")\n    const sideSpacingIndex = Math.max(getSpacingIndex(padding.left), getSpacingIndex(padding.right));\n    const sidePadding = NEW_SPACING_STEPS[sideSpacingIndex];\n\n    // Sett topp-/bunnpadding til det største av innsendt verdi og sidepadding\n    const topPadding = NEW_SPACING_STEPS[Math.max(sideSpacingIndex, getSpacingIndex(padding.top, sidePadding))];\n    const bottomPadding = NEW_SPACING_STEPS[Math.max(sideSpacingIndex, getSpacingIndex(padding.bottom, sidePadding))];\n\n    const top = `var(--jkl-spacing-${topPadding})`;\n    const right = `var(--jkl-spacing-${sidePadding})`;\n    const bottom = `var(--jkl-spacing-${bottomPadding})`;\n    const left = `var(--jkl-spacing-${sidePadding})`;\n\n    return { padding: `${top} ${right} ${bottom} ${left}` };\n}\n"],"names":["getSpacingIndex","spacingStep","fallback","value","isOldSpacingStep","SPACING_STEPS","indexOf","NEW_SPACING_STEPS","getPaddingStyles","padding","sideSpacingIndex","Math","max","left","right","sidePadding","top","bottom"],"mappings":"wFAIA,SAASA,EAAgBC,EAA2BC,EAAwB,MACxE,MAAMC,EAAQF,GAAeC,EACzBE,OAAAA,EAAiBD,GACVE,EAAcC,QAAQH,GAEtBI,EAAkBD,QAAQH,EAEzC,CAEO,SAASK,EAAiBC,GACzB,GAAmB,iBAAZA,EACA,MAAA,CAAEA,QAAS,qBAAqBF,EAAkBP,EAAgBS,QAIvEC,MAAAA,EAAmBC,KAAKC,IAAIZ,EAAgBS,EAAQI,MAAOb,EAAgBS,EAAQK,QACnFC,EAAcR,EAAkBG,GAW/B,MAAA,CAAED,QAAS,GALN,qBAHOF,EAAkBI,KAAKC,IAAIF,EAAkBV,EAAgBS,EAAQO,IAAKD,WAI/E,qBAAqBA,QACpB,qBAJOR,EAAkBI,KAAKC,IAAIF,EAAkBV,EAAgBS,EAAQQ,OAAQF,WAKtF,qBAAqBA,OAGtC"}
+{"version":3,"file":"utils.js","sources":["../../../../src/components/card/utils.ts"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport { NEW_SPACING_STEPS, SPACING_STEPS, isOldSpacingStep } from \"./types.js\";\nimport type { BasePadding, PaddingShorthand, SpacingStep } from \"./types.js\";\n\nfunction getSpacingIndex(spacingStep?: SpacingStep, fallback: SpacingStep = \"24\"): number {\n    const value = spacingStep || fallback;\n    if (isOldSpacingStep(value)) {\n        return SPACING_STEPS.indexOf(value);\n    } else {\n        return NEW_SPACING_STEPS.indexOf(value);\n    }\n}\n\nexport function getPaddingStyles(padding: BasePadding | PaddingShorthand): CSSProperties {\n    if (typeof padding === \"string\") {\n        return { padding: `var(--jkl-spacing-${NEW_SPACING_STEPS[getSpacingIndex(padding)]})` };\n    }\n\n    // Sett sidepadding til den største av de to innsendte verdiene (eller \"24\")\n    const sideSpacingIndex = Math.max(getSpacingIndex(padding.left), getSpacingIndex(padding.right));\n    const sidePadding = NEW_SPACING_STEPS[sideSpacingIndex];\n\n    // Sett topp-/bunnpadding til det største av innsendt verdi og sidepadding\n    const topPadding = NEW_SPACING_STEPS[Math.max(sideSpacingIndex, getSpacingIndex(padding.top, sidePadding))];\n    const bottomPadding = NEW_SPACING_STEPS[Math.max(sideSpacingIndex, getSpacingIndex(padding.bottom, sidePadding))];\n\n    const top = `var(--jkl-spacing-${topPadding})`;\n    const right = `var(--jkl-spacing-${sidePadding})`;\n    const bottom = `var(--jkl-spacing-${bottomPadding})`;\n    const left = `var(--jkl-spacing-${sidePadding})`;\n\n    return { padding: `${top} ${right} ${bottom} ${left}` };\n}\n"],"names":["getSpacingIndex","spacingStep","fallback","value","isOldSpacingStep","SPACING_STEPS","indexOf","NEW_SPACING_STEPS","getPaddingStyles","padding","sideSpacingIndex","Math","max","left","right","sidePadding","top","bottom"],"mappings":"wFAIA,SAASA,EAAgBC,EAA2BC,EAAwB,MACxE,MAAMC,EAAQF,GAAeC,EACzBE,OAAAA,EAAiBD,GACVE,EAAcC,QAAQH,GAEtBI,EAAkBD,QAAQH,EAEzC,CAEO,SAASK,EAAiBC,GACzB,GAAmB,iBAAZA,EACA,MAAA,CAAEA,QAAS,qBAAqBF,EAAkBP,EAAgBS,QAIvEC,MAAAA,EAAmBC,KAAKC,IAAIZ,EAAgBS,EAAQI,MAAOb,EAAgBS,EAAQK,QACnFC,EAAcR,EAAkBG,GAW/B,MAAA,CAAED,QAAS,GALN,qBAHOF,EAAkBI,KAAKC,IAAIF,EAAkBV,EAAgBS,EAAQO,IAAKD,WAI/E,qBAAqBA,QACpB,qBAJOR,EAAkBI,KAAKC,IAAIF,EAAkBV,EAAgBS,EAAQQ,OAAQF,WAKtF,qBAAqBA,OAGtC"}

package/build/es/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,17 @@
+import { default as React, ReactNode, ChangeEventHandler, FocusEventHandler, InputHTMLAttributes } from 'react';
+import { DataTestAutoId, Density } from '../../core/types.js';
+export interface CheckboxProps extends DataTestAutoId, InputHTMLAttributes<HTMLInputElement> {
+    children: ReactNode;
+    name: string;
+    value: string;
+    checked?: boolean;
+    inline?: boolean;
+    className?: string;
+    density?: Density;
+    invalid?: boolean;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    indeterminate?: boolean;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/build/es/components/checkbox/Checkbox.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as c}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{forwardRef as s,useRef as t,useImperativeHandle as n,useEffect as r}from"react";import"../../hooks/useScreen/useScreen.js";import{useId as i}from"../../hooks/useId/useId.js";const o=s(((s,o)=>{const{id:l,children:d,invalid:k,className:h,inline:m=!1,density:x,"data-testautoid":u,checked:b,indeterminate:p,...j}=s,_=t(null);n(o,(()=>_.current),[]);const f=i(l||"jkl-checkbox",{generateSuffix:!l});return r((()=>{!0===b&&!0===p&&"production"!==process.env.NODE_ENV&&console.warn("A Checkbox can not be both checked and indeterminate, and will be treated as checked"),_.current&&(_.current.indeterminate=!b&&!!p)}),[b,p]),e("div",{className:a("jkl-checkbox",h,{"jkl-checkbox--inline":m,"jkl-checkbox--error":k}),"data-density":x,children:[c("input",{id:f,ref:_,className:"jkl-checkbox__input","data-testid":"jkl-checkbox-input","aria-invalid":k,type:"checkbox","data-testautoid":u,checked:b,...j}),e("label",{htmlFor:f,className:"jkl-checkbox__label",children:[e("span",{className:"jkl-checkbox__mark",children:[c("span",{className:"jkl-checkbox__indeterminate-mark"}),c("span",{className:"jkl-checkbox__check-mark"})]}),c("span",{className:"jkl-checkbox__text",children:d})]})]})}));o.displayName="Checkbox";export{o as Checkbox};
+import{jsxs as e,jsx as a}from"react/jsx-runtime";import{c}from"../../../clsx-BeLtu-UY.js";import{forwardRef as s,useRef as t,useImperativeHandle as n,useEffect as r}from"react";import{useId as i}from"../../hooks/useId/useId.js";const l=s(((s,l)=>{const{id:o,children:d,invalid:k,className:h,inline:m=!1,density:x,"data-testautoid":b,checked:u,indeterminate:p,...j}=s,_=t(null);n(l,(()=>_.current),[]);const f=i(o||"jkl-checkbox",{generateSuffix:!o});return r((()=>{!0===u&&!0===p&&"production"!==process.env.NODE_ENV&&console.warn("A Checkbox can not be both checked and indeterminate, and will be treated as checked"),_.current&&(_.current.indeterminate=!u&&!!p)}),[u,p]),e("div",{className:c("jkl-checkbox",h,{"jkl-checkbox--inline":m,"jkl-checkbox--error":k}),"data-density":x,children:[a("input",{id:f,ref:_,className:"jkl-checkbox__input","data-testid":"jkl-checkbox-input","aria-invalid":k,type:"checkbox","data-testautoid":b,checked:u,...j}),e("label",{htmlFor:f,className:"jkl-checkbox__label",children:[e("span",{className:"jkl-checkbox__mark",children:[a("span",{className:"jkl-checkbox__indeterminate-mark"}),a("span",{className:"jkl-checkbox__check-mark"})]}),a("span",{className:"jkl-checkbox__text",children:d})]})]})}));l.displayName="Checkbox";export{l as Checkbox};
 //# sourceMappingURL=Checkbox.js.map

package/build/es/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    ReactNode,\n    forwardRef,\n    ChangeEventHandler,\n    FocusEventHandler,\n    InputHTMLAttributes,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n} from \"react\";\nimport { DataTestAutoId, Density } from \"../..\";\nimport { useId } from \"../../hooks\";\n\nexport interface CheckboxProps extends DataTestAutoId, InputHTMLAttributes<HTMLInputElement> {\n    children: ReactNode;\n    name: string;\n    value: string;\n    checked?: boolean;\n    inline?: boolean;\n    className?: string;\n    density?: Density;\n    invalid?: boolean;\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    indeterminate?: boolean;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {\n    const {\n        id,\n        children,\n        invalid,\n        className,\n        inline = false,\n        density,\n        \"data-testautoid\": testAutoId,\n        checked,\n        indeterminate,\n        ...rest\n    } = props;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(ref, () => inputRef.current!, []);\n\n    const inputId = useId(id || \"jkl-checkbox\", { generateSuffix: !id });\n\n    useEffect(() => {\n        if (checked === true && indeterminate === true && process.env.NODE_ENV !== \"production\") {\n            console.warn(\"A Checkbox can not be both checked and indeterminate, and will be treated as checked\");\n        }\n        if (inputRef.current) {\n            inputRef.current.indeterminate = !checked && !!indeterminate;\n        }\n    }, [checked, indeterminate]);\n\n    return (\n        <div\n            className={clsx(\"jkl-checkbox\", className, {\n                \"jkl-checkbox--inline\": inline,\n                \"jkl-checkbox--error\": invalid,\n            })}\n            data-density={density}\n        >\n            <input\n                id={inputId}\n                ref={inputRef}\n                className=\"jkl-checkbox__input\"\n                data-testid=\"jkl-checkbox-input\"\n                aria-invalid={invalid}\n                type=\"checkbox\"\n                data-testautoid={testAutoId}\n                checked={checked}\n                {...rest}\n            />\n            <label htmlFor={inputId} className=\"jkl-checkbox__label\">\n                <span className=\"jkl-checkbox__mark\">\n                    <span className=\"jkl-checkbox__indeterminate-mark\" />\n                    <span className=\"jkl-checkbox__check-mark\" />\n                </span>\n                <span className=\"jkl-checkbox__text\">{children}</span>\n            </label>\n        </div>\n    );\n});\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["Checkbox","forwardRef","props","ref","id","children","invalid","className","inline","density","testAutoId","checked","indeterminate","rest","inputRef","useRef","useImperativeHandle","current","inputId","useId","generateSuffix","useEffect","process","env","NODE_ENV","console","warn","jsxs","clsx","jsx","type","htmlFor","displayName"],"mappings":"qRA6BO,MAAMA,EAAWC,GAA4C,CAACC,EAAOC,KAClE,MACFC,GAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,OAAAA,GAAS,EACTC,QAAAA,EACA,kBAAmBC,EACnBC,QAAAA,EACAC,cAAAA,KACGC,GACHX,EAEEY,EAAWC,EAAyB,MAC1CC,EAAoBb,GAAK,IAAMW,EAASG,SAAU,IAE5CC,MAAAA,EAAUC,EAAMf,GAAM,eAAgB,CAAEgB,gBAAiBhB,IAE/D,OAAAiB,GAAU,MACU,IAAZV,IAAsC,IAAlBC,GAAmD,eAAzBU,QAAQC,IAAIC,UAC1DC,QAAQC,KAAK,wFAEbZ,EAASG,UACTH,EAASG,QAAQL,eAAiBD,KAAaC,EAAAA,GAEpD,CAACD,EAASC,IAGTe,EAAC,MAAA,CACGpB,UAAWqB,EAAK,eAAgBrB,EAAW,CACvC,uBAAwBC,EACxB,sBAAuBF,IAE3B,eAAcG,EAEdJ,SAAA,CAAAwB,EAAC,QAAA,CACGzB,GAAIc,EACJf,IAAKW,EACLP,UAAU,sBACV,cAAY,qBACZ,eAAcD,EACdwB,KAAK,WACL,kBAAiBpB,EACjBC,QAAAA,KACIE,IAEPc,EAAA,QAAA,CAAMI,QAASb,EAASX,UAAU,sBAC/BF,SAAA,CAACsB,EAAA,OAAA,CAAKpB,UAAU,qBACZF,SAAA,CAACwB,EAAA,OAAA,CAAKtB,UAAU,qCAChBsB,EAAC,OAAK,CAAAtB,UAAU,gCAEnBsB,EAAA,OAAA,CAAKtB,UAAU,qBAAsBF,SAAAA,SAC1C,IAKZL,EAASgC,YAAc"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    ReactNode,\n    forwardRef,\n    ChangeEventHandler,\n    FocusEventHandler,\n    InputHTMLAttributes,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n} from \"react\";\nimport { DataTestAutoId, Density } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\n\nexport interface CheckboxProps extends DataTestAutoId, InputHTMLAttributes<HTMLInputElement> {\n    children: ReactNode;\n    name: string;\n    value: string;\n    checked?: boolean;\n    inline?: boolean;\n    className?: string;\n    density?: Density;\n    invalid?: boolean;\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    indeterminate?: boolean;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {\n    const {\n        id,\n        children,\n        invalid,\n        className,\n        inline = false,\n        density,\n        \"data-testautoid\": testAutoId,\n        checked,\n        indeterminate,\n        ...rest\n    } = props;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(ref, () => inputRef.current!, []);\n\n    const inputId = useId(id || \"jkl-checkbox\", { generateSuffix: !id });\n\n    useEffect(() => {\n        if (checked === true && indeterminate === true && process.env.NODE_ENV !== \"production\") {\n            console.warn(\"A Checkbox can not be both checked and indeterminate, and will be treated as checked\");\n        }\n        if (inputRef.current) {\n            inputRef.current.indeterminate = !checked && !!indeterminate;\n        }\n    }, [checked, indeterminate]);\n\n    return (\n        <div\n            className={clsx(\"jkl-checkbox\", className, {\n                \"jkl-checkbox--inline\": inline,\n                \"jkl-checkbox--error\": invalid,\n            })}\n            data-density={density}\n        >\n            <input\n                id={inputId}\n                ref={inputRef}\n                className=\"jkl-checkbox__input\"\n                data-testid=\"jkl-checkbox-input\"\n                aria-invalid={invalid}\n                type=\"checkbox\"\n                data-testautoid={testAutoId}\n                checked={checked}\n                {...rest}\n            />\n            <label htmlFor={inputId} className=\"jkl-checkbox__label\">\n                <span className=\"jkl-checkbox__mark\">\n                    <span className=\"jkl-checkbox__indeterminate-mark\" />\n                    <span className=\"jkl-checkbox__check-mark\" />\n                </span>\n                <span className=\"jkl-checkbox__text\">{children}</span>\n            </label>\n        </div>\n    );\n});\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["Checkbox","forwardRef","props","ref","id","children","invalid","className","inline","density","testAutoId","checked","indeterminate","rest","inputRef","useRef","useImperativeHandle","current","inputId","useId","generateSuffix","useEffect","process","env","NODE_ENV","console","warn","jsxs","clsx","jsx","type","htmlFor","displayName"],"mappings":"qOA6BO,MAAMA,EAAWC,GAA4C,CAACC,EAAOC,KAClE,MACFC,GAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,OAAAA,GAAS,EACTC,QAAAA,EACA,kBAAmBC,EACnBC,QAAAA,EACAC,cAAAA,KACGC,GACHX,EAEEY,EAAWC,EAAyB,MAC1CC,EAAoBb,GAAK,IAAMW,EAASG,SAAU,IAE5CC,MAAAA,EAAUC,EAAMf,GAAM,eAAgB,CAAEgB,gBAAiBhB,IAE/D,OAAAiB,GAAU,MACU,IAAZV,IAAsC,IAAlBC,GAAmD,eAAzBU,QAAQC,IAAIC,UAC1DC,QAAQC,KAAK,wFAEbZ,EAASG,UACTH,EAASG,QAAQL,eAAiBD,KAAaC,EAAAA,GAEpD,CAACD,EAASC,IAGTe,EAAC,MAAA,CACGpB,UAAWqB,EAAK,eAAgBrB,EAAW,CACvC,uBAAwBC,EACxB,sBAAuBF,IAE3B,eAAcG,EAEdJ,SAAA,CAAAwB,EAAC,QAAA,CACGzB,GAAIc,EACJf,IAAKW,EACLP,UAAU,sBACV,cAAY,qBACZ,eAAcD,EACdwB,KAAK,WACL,kBAAiBpB,EACjBC,QAAAA,KACIE,IAEPc,EAAA,QAAA,CAAMI,QAASb,EAASX,UAAU,sBAC/BF,SAAA,CAACsB,EAAA,OAAA,CAAKpB,UAAU,qBACZF,SAAA,CAACwB,EAAA,OAAA,CAAKtB,UAAU,qCAChBsB,EAAC,OAAK,CAAAtB,UAAU,gCAEnBsB,EAAA,OAAA,CAAKtB,UAAU,qBAAsBF,SAAAA,SAC1C,IAKZL,EAASgC,YAAc"}

package/build/es/components/checkbox/index.d.ts

@@ -0,0 +1 @@
+export { Checkbox, type CheckboxProps } from './Checkbox.js';

package/build/es/components/combobox/Combobox.d.ts

@@ -0,0 +1,41 @@
+import { ChangeEvent, FC } from 'react';
+import { Density } from '../../core/types.js';
+import { ValuePair } from '../../utilities/valuePair.js';
+import { InputGroupProps } from '../input-group/InputGroup.js';
+import { LabelProps } from '../input-group/Label.js';
+export type ComboboxValuePair = ValuePair & {
+    tagLabel?: string;
+    isMarked?: boolean;
+};
+export declare function getComboboxValuePair(item: string | ComboboxValuePair): ComboboxValuePair;
+interface PartialChangeEvent extends Partial<Omit<ChangeEvent<HTMLElement>, "target">> {
+    type: "change" | "blur";
+    target: {
+        name: string;
+        value: string;
+        selectedOptions: Array<ValuePair>;
+    };
+}
+type ChangeEventHandler = (event: PartialChangeEvent) => void;
+interface ComboboxProps extends InputGroupProps {
+    id?: string;
+    placeholder?: string;
+    labelProps?: Omit<LabelProps, "children" | "density" | "htmlFor" | "standAlone">;
+    items: Array<ValuePair>;
+    noMatchingOption?: string;
+    label: string;
+    name: string;
+    value?: Array<ValuePair>;
+    density?: Density;
+    width?: string;
+    helpLabel?: string;
+    errorLabel?: string;
+    className?: string;
+    invalid?: boolean;
+    hasTagHover?: boolean;
+    onChange: ChangeEventHandler;
+    onBlur?: ChangeEventHandler;
+    onFocus?: ChangeEventHandler;
+}
+export declare const Combobox: FC<ComboboxProps>;
+export {};

package/build/es/components/combobox/Combobox.js

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as e}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import{useState as t,useRef as i,useEffect as r,useCallback as a,useMemo as s}from"react";import{useAnimatedHeight as c}from"../../hooks/useAnimatedHeight/useAnimatedHeight.js";import"../../hooks/useScreen/useScreen.js";import{useId as l}from"../../hooks/useId/useId.js";import{useListNavigation as u}from"../../hooks/useListNavigation/useListNavigation.js";import"../icon/Icon.js";import{ArrowVerticalAnimated as p}from"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import{CheckIcon as m}from"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/PenIcon.js";import{IconButton as d}from"../icon-button/IconButton.js";import{Tooltip as b}from"../tooltip/Tooltip.js";import{TooltipContent as j}from"../tooltip/TooltipContent.js";import{TooltipTrigger as v}from"../tooltip/TooltipTrigger.js";import{InputGroup as h}from"../input-group/InputGroup.js";import{Tag as f}from"../tag/Tag.js";function g(o){return"string"==typeof o?{value:o,label:o}:o}const k=({id:k,placeholder:_,items:I,onChange:x,onFocus:w,onBlur:y,value:C,label:A,noMatchingOption:L,labelProps:T,helpLabel:N,errorLabel:$,width:D,density:P,name:B,className:E,invalid:S,hasTagHover:F})=>{var M,O;const H=l(k||"jkl-combobox",{generateSuffix:!k}),K=`${H}_label`,R=`${H}_button`,V=`${H}_search-input`,[U,G]=t(C||[]),[q,z]=t(!0),[Q,W]=t(!1),[J,X]=t(""),[Y,Z]=t(!1),[oo,eo]=t(!1),no=i(null),to=i(null),io=i(!1);r((()=>{X(""),Q&&no.current&&no.current.focus()}),[Q]),r((()=>{G((o=>C||o))}),[C]);const ro=o=>!!U&&U.some((e=>e.value===o.value)),ao=a((o=>U.filter((e=>e.value!==o))),[U]),so=a(((o,e)=>{let n=ao(e);G(n),x({type:"change",target:{name:B,value:e,selectedOptions:n}}),o.stopPropagation(),0===n.length&&eo(!1)}),[ao,G,x,B,eo]),co=a((o=>{var e;let n;if(U.some((e=>e.value===o)))n=ao(o);else{const e=I.find((e=>e.value===o));n=[...U,e]}null==(e=no.current)||e.focus(),G(n),x({type:"change",target:{name:B,value:o,selectedOptions:n}})}),[U,G,x,B,ao,I]),lo=o=>{var e;null==(e=no.current)||e.focus(),W(!0),X(o.target.value)},uo=s((()=>{if(!J)return I;const o=I.filter((o=>o.label.toLowerCase().indexOf(J.toLowerCase())>=0));return Z(0===o.length),o}),[J,I]),[po,mo]=t(null!=(M=uo[0])&&M.value?`${H}-${null==(O=uo[0])?void 0:O.value}`:void 0);r((()=>{z(!Q)}),[Q]),r((()=>{const o=o=>{"Escape"===o.key&&Q&&W(!1)};return typeof window<"u"&&window.addEventListener("keydown",o),()=>{typeof window<"u"&&Q&&window.removeEventListener("keydown",o)}}),[W,Q]);const bo=a((o=>{o?no.current&&no.current.focus():io.current&&to.current&&to.current.focus()}),[]),jo=a((()=>{io.current||(w&&w({type:"change",target:{name:B,value:(null==U?void 0:U[0].value)||"",selectedOptions:U}}),io.current=!0,W(!0))}),[w,U,B]),[vo]=c(Q,{onFirstVisible:bo,onTransitionEnd:bo});u({ref:vo});const ho=i(null),fo=a((o=>{var e,n;const t=ho.current;t&&t.contains(o.relatedTarget)||(X(""),y&&(y({type:"blur",target:{name:B,value:(null==(e=null==U?void 0:U[0])?void 0:e.value)||"",selectedOptions:U}}),null==(n=to.current)||n.dispatchEvent(new Event("focusout",{bubbles:!0}))),io.current=!1,W(!1))}),[y,B,U]),go=a((o=>{o.target.focus({preventScroll:!0})}),[]),ko=a((o=>{var e;if("ArrowDown"===o.key){o.preventDefault(),o.stopPropagation();const n=vo.current;n&&(null==(e=n.querySelector('[role="option"]'))||e.focus())}else"Escape"===o.key&&(o.preventDefault(),o.stopPropagation(),W(!1));if(o.metaKey&&"a"===o.key||o.ctrlKey&&"a"===o.key){o.preventDefault(),o.stopPropagation();const e=U.map((o=>({...o,isMarked:!0})));eo(!0),G(e)}else if("Backspace"===o.key)if(o.stopPropagation(),eo(!1),U.some((o=>o.isMarked))){const o=U.filter((o=>!o.isMarked));G(o),X("")}else U.length>0&&""===J&&so(o,U[U.length-1].value)}),[U,J,vo,so]),_o=a((o=>{if("Tab"===o.key)no.current&&(o.preventDefault(),o.stopPropagation(),o.shiftKey||W(!1),no.current.focus());else if("ArrowUp"===o.key&&vo.current&&no.current){const e=vo.current.querySelector('[role="option"]:not([hidden])');o.currentTarget.id===(null==e?void 0:e.id)&&no.current&&no.current.focus()}}),[W,vo]),Io=U.length>=1;return o(h,{label:A,id:V,ref:ho,"data-testid":"jkl-combobox",className:n("jkl-combobox",E,{"jkl-combobox--invalid":!!$||S,"jkl-combobox--menu-open":Q,"jkl-combobox--menu-closed":!Q&&Io}),labelProps:{id:K,...T},helpLabel:N,errorLabel:$,density:P,render:t=>e("div",{className:n("jkl-combobox__wrapper",{"jkl-combobox__wrapper--active-value":Io}),style:{width:D},tabIndex:-1,onFocus:jo,onBlur:fo,children:[e("div",{className:"jkl-combobox__tags","data-testid":"jkl-combobox__tags",children:[U.map(g).map((n=>o(f,{className:`jkl-tag ${oo&&"jkl-tag__marked"}`,"data-testid":"jkl-tag",dismissAction:{onClick:o=>{no.current&&no.current.focus(),so(o,n.value)},onBlur:fo,label:`Fjern ${n.value}`},children:F?e(b,{children:[e(v,{children:[" ",o("span",{"aria-hidden":"true","data-testid":"jkl-tag__content",children:n.tagLabel?n.tagLabel:n.label})]}),o(j,{children:n.label})]},n.value):o("span",{"aria-hidden":"true","data-testid":"jkl-tag__content",children:n.tagLabel?n.tagLabel:n.label})},n.value))),o("input",{...t,className:"jkl-combobox__search-input",onChange:lo,"data-testid":"jkl-combobox__search-input",onFocus:jo,onBlur:fo,onKeyDown:ko,value:J,ref:no,"aria-controls":H,role:"combobox","aria-autocomplete":"list","aria-expanded":Q,placeholder:U.length>0?"":_,autoComplete:"off"})]}),e("div",{className:"jkl-combobox__menu",role:"listbox",ref:vo,id:H,"aria-labelledby":K,"aria-multiselectable":"true","aria-activedescendant":po,onFocus:jo,onBlur:fo,tabIndex:-1,children:[uo.map(((n,t)=>e("button",{type:"button",id:`${H}__${n.value}`,"aria-selected":ro(n),role:"option",value:n.value,onBlur:fo,className:`jkl-combobox__option ${ro(n)&&"jkl-combobox__option--selected"}`,"data-testid":"jkl-combobox__option","data-testautoid":`jkl-combobox__option-${t}`,onFocus:jo,onKeyDown:_o,onClick:o=>{mo(`${H}__${n.value}`),o.stopPropagation(),co(n.value),X("")},onMouseOver:go,children:[n.description?e("span",{children:[n.label,o("span",{className:"jkl-combobox__option-description",children:n.description})]}):n.label,ro(n)?e("span",{children:[o(m,{})," "]}):null]},`${H}-${n.value}`))),Y&&o("div",{className:"jkl-combobox__no-option",children:L})]}),o("div",{className:"jkl-combobox__actions",children:o(d,{id:R,onFocus:jo,onBlur:fo,className:"jkl-combobox__button","data-testid":"jkl-combobox__button","aria-label":`${U.map((o=>o.label))||"Velg"},${A}`,"aria-expanded":Q,"aria-controls":H,role:"button",onClick:()=>W(!0),onMouseDown:o=>{var e;o.preventDefault(),null==(e=to.current)||e.focus()},children:o(p,{pointingDown:q})})})]})})};k.displayName="Combobox";export{k as Combobox,g as getComboboxValuePair};
+import{jsx as o,jsxs as e}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import{useState as t,useRef as i,useEffect as r,useCallback as a,useMemo as s}from"react";import{useAnimatedHeight as c}from"../../hooks/useAnimatedHeight/useAnimatedHeight.js";import{useId as l}from"../../hooks/useId/useId.js";import{useListNavigation as u}from"../../hooks/useListNavigation/useListNavigation.js";import{ArrowVerticalAnimated as p}from"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/Icon.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import{CheckIcon as m}from"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/PenIcon.js";import{IconButton as d}from"../icon-button/IconButton.js";import{InputGroup as b}from"../input-group/InputGroup.js";import{Tag as j}from"../tag/Tag.js";import{Tooltip as v}from"../tooltip/Tooltip.js";import{TooltipContent as f}from"../tooltip/TooltipContent.js";import{TooltipTrigger as g}from"../tooltip/TooltipTrigger.js";function h(o){return"string"==typeof o?{value:o,label:o}:o}const k=({id:k,placeholder:_,items:I,onChange:x,onFocus:w,onBlur:y,value:C,label:A,noMatchingOption:L,labelProps:T,helpLabel:N,errorLabel:$,width:D,density:P,name:B,className:E,invalid:F,hasTagHover:M})=>{var O,S;const H=l(k||"jkl-combobox",{generateSuffix:!k}),K=`${H}_label`,R=`${H}_button`,V=`${H}_search-input`,[U,G]=t(C||[]),[q,z]=t(!0),[Q,W]=t(!1),[J,X]=t(""),[Y,Z]=t(!1),[oo,eo]=t(!1),no=i(null),to=i(null),io=i(!1);r((()=>{X(""),Q&&no.current&&no.current.focus()}),[Q]),r((()=>{G((o=>C||o))}),[C]);const ro=o=>!!U&&U.some((e=>e.value===o.value)),ao=a((o=>U.filter((e=>e.value!==o))),[U]),so=a(((o,e)=>{let n=ao(e);G(n),x({type:"change",target:{name:B,value:e,selectedOptions:n}}),o.stopPropagation(),0===n.length&&eo(!1)}),[ao,G,x,B,eo]),co=a((o=>{var e;let n;if(U.some((e=>e.value===o)))n=ao(o);else{const e=I.find((e=>e.value===o));n=[...U,e]}null==(e=no.current)||e.focus(),G(n),x({type:"change",target:{name:B,value:o,selectedOptions:n}})}),[U,G,x,B,ao,I]),lo=o=>{var e;null==(e=no.current)||e.focus(),W(!0),X(o.target.value)},uo=s((()=>{if(!J)return I;const o=I.filter((o=>o.label.toLowerCase().indexOf(J.toLowerCase())>=0));return Z(0===o.length),o}),[J,I]),[po,mo]=t(null!=(O=uo[0])&&O.value?`${H}-${null==(S=uo[0])?void 0:S.value}`:void 0);r((()=>{z(!Q)}),[Q]),r((()=>{const o=o=>{"Escape"===o.key&&Q&&W(!1)};return typeof window<"u"&&window.addEventListener("keydown",o),()=>{typeof window<"u"&&Q&&window.removeEventListener("keydown",o)}}),[W,Q]);const bo=a((o=>{o?no.current&&no.current.focus():io.current&&to.current&&to.current.focus()}),[]),jo=a((()=>{io.current||(w&&w({type:"change",target:{name:B,value:(null==U?void 0:U[0].value)||"",selectedOptions:U}}),io.current=!0,W(!0))}),[w,U,B]),[vo]=c(Q,{onFirstVisible:bo,onTransitionEnd:bo});u({ref:vo});const fo=i(null),go=a((o=>{var e,n;const t=fo.current;t&&t.contains(o.relatedTarget)||(X(""),y&&(y({type:"blur",target:{name:B,value:(null==(e=null==U?void 0:U[0])?void 0:e.value)||"",selectedOptions:U}}),null==(n=to.current)||n.dispatchEvent(new Event("focusout",{bubbles:!0}))),io.current=!1,W(!1))}),[y,B,U]),ho=a((o=>{o.target.focus({preventScroll:!0})}),[]),ko=a((o=>{var e;if("ArrowDown"===o.key){o.preventDefault(),o.stopPropagation();const n=vo.current;n&&(null==(e=n.querySelector('[role="option"]'))||e.focus())}else"Escape"===o.key&&(o.preventDefault(),o.stopPropagation(),W(!1));if(o.metaKey&&"a"===o.key||o.ctrlKey&&"a"===o.key){o.preventDefault(),o.stopPropagation();const e=U.map((o=>({...o,isMarked:!0})));eo(!0),G(e)}else if("Backspace"===o.key)if(o.stopPropagation(),eo(!1),U.some((o=>o.isMarked))){const o=U.filter((o=>!o.isMarked));G(o),X("")}else U.length>0&&""===J&&so(o,U[U.length-1].value)}),[U,J,vo,so]),_o=a((o=>{if("Tab"===o.key)no.current&&(o.preventDefault(),o.stopPropagation(),o.shiftKey||W(!1),no.current.focus());else if("ArrowUp"===o.key&&vo.current&&no.current){const e=vo.current.querySelector('[role="option"]:not([hidden])');o.currentTarget.id===(null==e?void 0:e.id)&&no.current&&no.current.focus()}}),[W,vo]),Io=U.length>=1;return o(b,{label:A,id:V,ref:fo,"data-testid":"jkl-combobox",className:n("jkl-combobox",E,{"jkl-combobox--invalid":!!$||F,"jkl-combobox--menu-open":Q,"jkl-combobox--menu-closed":!Q&&Io}),labelProps:{id:K,...T},helpLabel:N,errorLabel:$,density:P,render:t=>e("div",{className:n("jkl-combobox__wrapper",{"jkl-combobox__wrapper--active-value":Io}),style:{width:D},tabIndex:-1,onFocus:jo,onBlur:go,children:[e("div",{className:"jkl-combobox__tags","data-testid":"jkl-combobox__tags",children:[U.map(h).map((n=>o(j,{className:`jkl-tag ${oo&&"jkl-tag__marked"}`,"data-testid":"jkl-tag",dismissAction:{onClick:o=>{no.current&&no.current.focus(),so(o,n.value)},onBlur:go,label:`Fjern ${n.value}`},children:M?e(v,{children:[e(g,{children:[" ",o("span",{"aria-hidden":"true","data-testid":"jkl-tag__content",children:n.tagLabel?n.tagLabel:n.label})]}),o(f,{children:n.label})]},n.value):o("span",{"aria-hidden":"true","data-testid":"jkl-tag__content",children:n.tagLabel?n.tagLabel:n.label})},n.value))),o("input",{...t,className:"jkl-combobox__search-input",onChange:lo,"data-testid":"jkl-combobox__search-input",onFocus:jo,onBlur:go,onKeyDown:ko,value:J,ref:no,"aria-controls":H,role:"combobox","aria-autocomplete":"list","aria-expanded":Q,placeholder:U.length>0?"":_,autoComplete:"off"})]}),e("div",{className:"jkl-combobox__menu",role:"listbox",ref:vo,id:H,"aria-labelledby":K,"aria-multiselectable":"true","aria-activedescendant":po,onFocus:jo,onBlur:go,tabIndex:-1,children:[uo.map(((n,t)=>e("button",{type:"button",id:`${H}__${n.value}`,"aria-selected":ro(n),role:"option",value:n.value,onBlur:go,className:`jkl-combobox__option ${ro(n)&&"jkl-combobox__option--selected"}`,"data-testid":"jkl-combobox__option","data-testautoid":`jkl-combobox__option-${t}`,onFocus:jo,onKeyDown:_o,onClick:o=>{mo(`${H}__${n.value}`),o.stopPropagation(),co(n.value),X("")},onMouseOver:ho,children:[n.description?e("span",{children:[n.label,o("span",{className:"jkl-combobox__option-description",children:n.description})]}):n.label,ro(n)?e("span",{children:[o(m,{})," "]}):null]},`${H}-${n.value}`))),Y&&o("div",{className:"jkl-combobox__no-option",children:L})]}),o("div",{className:"jkl-combobox__actions",children:o(d,{id:R,onFocus:jo,onBlur:go,className:"jkl-combobox__button","data-testid":"jkl-combobox__button","aria-label":`${U.map((o=>o.label))||"Velg"},${A}`,"aria-expanded":Q,"aria-controls":H,role:"button",onClick:()=>W(!0),onMouseDown:o=>{var e;o.preventDefault(),null==(e=to.current)||e.focus()},children:o(p,{pointingDown:q})})})]})})};k.displayName="Combobox";export{k as Combobox,h as getComboboxValuePair};
 //# sourceMappingURL=Combobox.js.map