@navikt/ds-react 6.11.0 → 6.13.0

package/src/layout/grid/HGrid.tsx

@@ -1,34 +1,42 @@
 import cl from "clsx";
-import React, { HTMLAttributes, forwardRef } from "react";
+import React, { forwardRef } from "react";
+import { Slot } from "../../slot/Slot";
+import { OverridableComponent, omit } from "../../util";
+import BasePrimitive, {
+  PRIMITIVE_PROPS,
+  PrimitiveProps,
+} from "../base/BasePrimitive";
+import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
-export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  /**
-   * Number of columns to display. Can be a number, a string, or an object with values for specific breakpoints.
-   * Sets `grid-template-columns`, so `fr`, `minmax` etc. works.
-   * @example
-   * columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}
-   * columns={3}
-   * columns="repeat(3, minmax(0, 1fr))"
-   */
-  columns?: ResponsiveProp<number | string>;
-  /**
-   * Spacing between columns.
-   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
-   * or an object of spacing tokens for different breakpoints.
-   * @example
-   * gap="6"
-   * gap="8 4"
-   * gap={{ sm: "2", md: "2", lg: "6", xl: "6"}}
-   */
-  gap?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
-  /**
-   * Vertical alignment of children. Elements will by default stretch to the height of parent-element.
-   */
-  align?: "start" | "center" | "end";
-}
+export type HGridProps = PrimitiveProps &
+  PrimitiveAsChildProps &
+  React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Number of columns to display. Can be a number, a string, or an object with values for specific breakpoints.
+     * Sets `grid-template-columns`, so `fr`, `minmax` etc. works.
+     * @example
+     * columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}
+     * columns={3}
+     * columns="repeat(3, minmax(0, 1fr))"
+     */
+    columns?: ResponsiveProp<number | string>;
+    /**
+     * Spacing between columns.
+     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+     * or an object of spacing tokens for different breakpoints.
+     * @example
+     * gap="6"
+     * gap="8 4"
+     * gap={{ sm: "2", md: "2", lg: "6", xl: "6"}}
+     */
+    gap?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
+    /**
+     * Vertical alignment of children. Elements will by default stretch to the height of parent-element.
+     */
+    align?: "start" | "center" | "end";
+  };
 /**
  * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
  *
@@ -54,25 +62,45 @@ export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
  *   <div />
  * </HGrid>
  */
-export const HGrid = forwardRef<HTMLDivElement, HGridProps>(
-  ({ className, columns, gap, style, align, ...rest }, ref) => {
-    const styles: React.CSSProperties = {
-      ...style,
-      "--__ac-hgrid-align": align,
-      ...getResponsiveProps(`hgrid`, "gap", "spacing", gap),
-      ...getResponsiveValue(`hgrid`, "columns", formatGrid(columns)),
-    };
+export const HGrid: OverridableComponent<HGridProps, HTMLDivElement> =
+  forwardRef(
+    (
+      {
+        children,
+        className,
+        as: Component = "div",
+        columns,
+        gap,
+        style,
+        align,
+        asChild,
+        ...rest
+      },
+      ref,
+    ) => {
+      const styles: React.CSSProperties = {
+        ...style,
+        "--__ac-hgrid-align": align,
+        ...getResponsiveProps(`hgrid`, "gap", "spacing", gap),
+        ...getResponsiveValue(`hgrid`, "columns", formatGrid(columns)),
+      };
+
+      const Comp = asChild ? Slot : Component;
 
-    return (
-      <div
-        {...rest}
-        ref={ref}
-        className={cl("navds-hgrid", className)}
-        style={styles}
-      />
-    );
-  },
-);
+      return (
+        <BasePrimitive {...rest}>
+          <Comp
+            {...omit(rest, PRIMITIVE_PROPS)}
+            ref={ref}
+            className={cl("navds-hgrid", className)}
+            style={styles}
+          >
+            {children}
+          </Comp>
+        </BasePrimitive>
+      );
+    },
+  );
 
 function formatGrid(
   props?: ResponsiveProp<number | string>,

package/src/layout/stack/HStack.tsx

@@ -1,8 +1,9 @@
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../../util/types";
+import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { Stack, StackProps } from "./Stack";
 
-export type HStackProps = Omit<StackProps, "direction">;
+export type HStackProps = PrimitiveAsChildProps & Omit<StackProps, "direction">;
 
 /**
  * Layout-primitive for horizontal flexbox

package/src/layout/stack/Stack.tsx

@@ -1,73 +1,85 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
+import { Slot } from "../../slot/Slot";
+import { omit } from "../../util";
 import { OverridableComponent } from "../../util/types";
+import BasePrimitive, {
+  PRIMITIVE_PROPS,
+  PrimitiveProps,
+} from "../base/BasePrimitive";
+import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
-export interface StackProps extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  /**
-   * CSS `justify-content` property.
-   *
-   * @example
-   * justify='center'
-   * justify={{xs: 'start', sm: 'center', md: 'end', lg: 'space-around', xl: 'space-between'}}
-   */
-  justify?: ResponsiveProp<
-    | "start"
-    | "center"
-    | "end"
-    | "space-around"
-    | "space-between"
-    | "space-evenly"
-  >;
-  /**
-   * CSS `align-items` property.
-   *
-   * @example
-   * align='center'
-   * align={{xs: 'start', sm: 'center', md: 'end', lg: 'baseline', xl: 'stretch'}}
-   */
-  align?: ResponsiveProp<"start" | "center" | "end" | "baseline" | "stretch">;
-  /**
-   * Sets the CSS `flex-wrap` property.
-   */
-  wrap?: boolean;
-  /**
-   * CSS `gap` property.
-   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
-   * or an object of spacing tokens for different breakpoints.
-   *
-   * @example
-   * gap='4'
-   * gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
-   */
-  gap?: ResponsiveProp<SpacingScale>;
-  /**
-   * CSS `flex-direction` property.
-   * @default "row"
-   *
-   * @example
-   * direction='row'
-   * direction={{xs: 'row', sm: 'column'}}
-   */
-  direction?: ResponsiveProp<
-    "row" | "column" | "row-reverse" | "column-reverse"
-  >;
-}
+export type StackProps = PrimitiveProps &
+  PrimitiveAsChildProps &
+  HTMLAttributes<HTMLDivElement> & {
+    /**
+     * CSS `justify-content` property.
+     *
+     * @example
+     * justify='center'
+     * justify={{xs: 'start', sm: 'center', md: 'end', lg: 'space-around', xl: 'space-between'}}
+     */
+    justify?: ResponsiveProp<
+      | "start"
+      | "center"
+      | "end"
+      | "space-around"
+      | "space-between"
+      | "space-evenly"
+    >;
+    /**
+     * CSS `align-items` property.
+     * @default "stretch"
+     *
+     * @example
+     * align='center'
+     * align={{xs: 'start', sm: 'center', md: 'end', lg: 'baseline', xl: 'stretch'}}
+     */
+    align?: ResponsiveProp<"start" | "center" | "end" | "baseline" | "stretch">;
+    /**
+     * Sets the CSS `flex-wrap` property.
+     */
+    wrap?: boolean;
+    /**
+     * CSS `gap` property.
+     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+     * or an object of spacing tokens for different breakpoints.
+     *
+     * @example
+     * gap='4'
+     * gap='8 4'
+     * gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+     */
+    gap?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
+    /**
+     * CSS `flex-direction` property.
+     * @default "row"
+     *
+     * @example
+     * direction='row'
+     * direction={{xs: 'row', sm: 'column'}}
+     */
+    direction?: ResponsiveProp<
+      "row" | "column" | "row-reverse" | "column-reverse"
+    >;
+  };
 
 export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
   forwardRef(
     (
       {
-        as: Component = "div",
+        children,
         className,
-        align,
+        as: Component = "div",
+        align = "stretch",
         justify,
         wrap = true,
         gap,
         style: _style,
         direction = "row",
+        asChild,
         ...rest
       },
       ref,
@@ -81,16 +93,22 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
         ...getResponsiveValue(`stack`, "justify", justify),
       };
 
+      const Comp = asChild ? Slot : Component;
+
       return (
-        <Component
-          {...rest}
-          ref={ref}
-          style={style}
-          className={cl("navds-stack", className, {
-            "navds-vstack": direction === "column",
-            "navds-hstack": direction === "row",
-          })}
-        />
+        <BasePrimitive {...rest}>
+          <Comp
+            {...omit(rest, PRIMITIVE_PROPS)}
+            ref={ref}
+            style={style}
+            className={cl("navds-stack", className, {
+              "navds-vstack": direction === "column",
+              "navds-hstack": direction === "row",
+            })}
+          >
+            {children}
+          </Comp>
+        </BasePrimitive>
       );
     },
   );

package/src/layout/stack/VStack.tsx

@@ -1,8 +1,10 @@
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../../util/types";
+import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { Stack, StackProps } from "./Stack";
 
-export type VStackProps = Omit<StackProps, "direction" | "wrap">;
+export type VStackProps = PrimitiveAsChildProps &
+  Omit<StackProps, "direction" | "wrap">;
 
 /**
  * Layout-primitive for vetical flexbox

package/src/layout/utilities/css.ts

@@ -50,6 +50,9 @@ const translateTokenStringToCSS = (
         const width = 100 / arr.length;
         return `calc((100vw - ${width}%)/2)`;
       }
+      if (["mi", "mb"].includes(componentProp) && x === "auto") {
+        return "auto";
+      }
 
       let output = `var(--a-${tokenSubgroup}-${x})`;
       if (tokenExceptions.includes(x)) {

package/src/modal/Modal.tsx

@@ -88,6 +88,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       onCancel,
       closeOnBackdropClick,
       width,
+      placement,
       portal,
       className,
       "aria-labelledby": ariaLabelledby,
@@ -147,9 +148,10 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       typeof width === "string" && ["small", "medium"].includes(width);
 
     const mergedClassName = cl("navds-modal", className, {
-      polyfillClassName: needPolyfill,
+      [polyfillClassName]: needPolyfill,
       "navds-modal--autowidth": !width,
       [`navds-modal--${width}`]: isWidthPreset,
+      "navds-modal--top": placement === "top" && !needPolyfill,
     });
 
     const mergedStyle = {

package/src/modal/types.ts

@@ -59,6 +59,11 @@ interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
    * @default fit-content (up to 700px)
    * */
   width?: "medium" | "small" | number | `${number}${string}`;
+  /**
+   * Where to place the modal in the viewport. (Will always be centered on mobile and old browsers.)
+   * @default "center"
+   */
+  placement?: "top" | "center";
   /**
    * Lets you render the modal into a different part of the DOM.
    * Will use `rootElement` from `Provider` if defined, otherwise `document.body`.

package/src/toggle-group/parts/useToggleItem.ts

@@ -97,7 +97,10 @@ export function useToggleItem<P extends UseToggleItemProps>(
     ref: mergeRefs([register, ref]),
     isSelected,
     isFocused: focusedValue === value,
-    onClick: composeEventHandlers(onClick, () => setSelectedValue(value)),
+    onClick: composeEventHandlers(
+      onClick,
+      () => selectedValue !== value && setSelectedValue(value),
+    ),
     onFocus: disabled ? undefined : composeEventHandlers(_onFocus, onFocus),
     onKeyDown: composeEventHandlers(_onKeyDown, onKeyDown),
   };

package/src/util/types/AsChildProps.ts

@@ -16,6 +16,7 @@ export type AsChildProps =
        * ```
        */
       asChild: true;
+      as?: never;
     }
   | {
       children: React.ReactNode;

package/cjs/layout/sidemal-test/AvatarPanel.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-export declare function AvatarPanel({ children }: {
-    children: React.ReactNode;
-}): React.JSX.Element;

package/cjs/layout/sidemal-test/AvatarPanel.js

@@ -1,19 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AvatarPanel = void 0;
-const react_1 = __importDefault(require("react"));
-const aksel_icons_1 = require("@navikt/aksel-icons");
-const box_1 = require("../box");
-const stack_1 = require("../stack");
-function AvatarPanel({ children }) {
-    return (react_1.default.createElement(box_1.Box, { background: "bg-default", paddingInline: { xs: "4", md: "10" }, paddingBlock: { xs: "10 8", md: "12 10" }, className: "avatar-card", borderRadius: "medium" },
-        react_1.default.createElement(stack_1.HStack, { justify: "center" },
-            react_1.default.createElement(box_1.Box, { borderRadius: "full", background: "surface-success-moderate", className: "avatar" },
-                react_1.default.createElement(aksel_icons_1.PersonIcon, { fontSize: "2rem" }))),
-        children));
-}
-exports.AvatarPanel = AvatarPanel;
-//# sourceMappingURL=AvatarPanel.js.map

package/cjs/layout/sidemal-test/AvatarPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AvatarPanel.js","sourceRoot":"","sources":["../../../src/layout/sidemal-test/AvatarPanel.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,qDAAiD;AACjD,gCAA6B;AAC7B,oCAAkC;AAElC,SAAgB,WAAW,CAAC,EAAE,QAAQ,EAAiC;IACrE,OAAO,CACL,8BAAC,SAAG,IACF,UAAU,EAAC,YAAY,EACvB,aAAa,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EACpC,YAAY,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,EACzC,SAAS,EAAC,aAAa,EACvB,YAAY,EAAC,QAAQ;QAErB,8BAAC,cAAM,IAAC,OAAO,EAAC,QAAQ;YACtB,8BAAC,SAAG,IACF,YAAY,EAAC,MAAM,EACnB,UAAU,EAAC,0BAA0B,EACrC,SAAS,EAAC,QAAQ;gBAElB,8BAAC,wBAAU,IAAC,QAAQ,EAAC,MAAM,GAAG,CAC1B,CACC;QACR,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AArBD,kCAqBC"}

package/cjs/layout/sidemal-test/Content.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export declare function Content(): React.JSX.Element;

package/cjs/layout/sidemal-test/Content.js

@@ -1,67 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Content = void 0;
-const react_1 = __importDefault(require("react"));
-const aksel_icons_1 = require("@navikt/aksel-icons");
-const accordion_1 = require("../../accordion");
-const copybutton_1 = require("../../copybutton");
-const link_1 = require("../../link");
-const list_1 = require("../../list");
-const read_more_1 = require("../../read-more");
-const typography_1 = require("../../typography");
-const box_1 = require("../box");
-const stack_1 = require("../stack");
-const AvatarPanel_1 = require("./AvatarPanel");
-function Content() {
-    return (react_1.default.createElement(AvatarPanel_1.AvatarPanel, null,
-        react_1.default.createElement(box_1.Box, { paddingBlock: "0 6" },
-            react_1.default.createElement(stack_1.VStack, { gap: "3", align: "start" },
-                react_1.default.createElement(typography_1.Heading, { size: "large" }, "Hvem kan f\u00E5?"),
-                react_1.default.createElement(copybutton_1.CopyButton, { copyText: "#", text: "Kopier lenke", size: "small", icon: react_1.default.createElement(aksel_icons_1.LinkIcon, { "aria-hidden": true }) }))),
-        react_1.default.createElement(typography_1.BodyLong, { weight: "semibold" }, "Har du blitt arbeidsledig eller permittert, kan du f\u00E5 dagpenger fra NAV hvis alt dette gjelder for deg:"),
-        react_1.default.createElement(list_1.List, null,
-            react_1.default.createElement(list_1.List.Item, null, "Du har mistet minst 50 prosent av den totale arbeidstiden din."),
-            react_1.default.createElement(list_1.List.Item, null, "Du har f\u00E5tt inntekten din helt eller delvis redusert."),
-            react_1.default.createElement(list_1.List.Item, null, "Du har hatt en inntekt p\u00E5 minst 177 930 kroner (1,5 G - Grunnbel\u00F8p) de siste 12 m\u00E5nedene, eller minst 355 860 kroner (3 G) de siste 36 m\u00E5nedene."),
-            react_1.default.createElement(list_1.List.Item, null, "Du er under 67 \u00E5r.")),
-        react_1.default.createElement(box_1.Box, { paddingBlock: "0 7" },
-            react_1.default.createElement(read_more_1.ReadMore, { header: "Hvilke inntekter gir rett til dagpenger?" },
-                "Vi bruker disse inntektene for \u00E5 finne ut om du har rett til dagpenger:",
-                react_1.default.createElement(list_1.List, null,
-                    react_1.default.createElement(list_1.List.Item, null, "Arbeidsinntekt"),
-                    react_1.default.createElement(list_1.List.Item, null, "Foreldrepenger som arbeidstaker"),
-                    react_1.default.createElement(list_1.List.Item, null, "Svangerskapspenger som arbeidstaker"),
-                    react_1.default.createElement(list_1.List.Item, null, "Svangerskapsrelaterte sykepenger som arbeidstaker")),
-                react_1.default.createElement(typography_1.BodyLong, null, "Inntekt som selvstendig n\u00E6ringsdrivende regnes ikke som arbeidsinntekt."))),
-        react_1.default.createElement(typography_1.BodyLong, { weight: "semibold" }, "For \u00E5 f\u00E5 dagpenger m\u00E5 du:"),
-        react_1.default.createElement(list_1.List, null,
-            react_1.default.createElement(list_1.List.Item, null, "s\u00F8ke dagpenger"),
-            react_1.default.createElement(list_1.List.Item, null, "registrere deg som arbeidss\u00F8ker"),
-            react_1.default.createElement(list_1.List.Item, null, "oppholde deg i Norge og v\u00E6re medlem av folketrygden"),
-            react_1.default.createElement(list_1.List.Item, null, "sende meldekort hver 14. dag"),
-            react_1.default.createElement(list_1.List.Item, null, "v\u00E6re reell arbeidss\u00F8ker")),
-        react_1.default.createElement(typography_1.BodyLong, { spacing: true },
-            "Les mer om ",
-            react_1.default.createElement(link_1.Link, { href: "#" }, "hva du m\u00E5 gj\u00F8re for \u00E5 f\u00E5 dagpenger.")),
-        react_1.default.createElement(box_1.Box, { paddingBlock: "0 7" },
-            react_1.default.createElement(accordion_1.Accordion, null,
-                react_1.default.createElement(accordion_1.Accordion.Item, null,
-                    react_1.default.createElement(accordion_1.Accordion.Header, null, "Har du flere jobber?"),
-                    react_1.default.createElement(accordion_1.Accordion.Content, null, "Det er den totale arbeidstiden din som m\u00E5 v\u00E6re redusert med minst 50 prosent. Har du flere jobber m\u00E5 du samlet sett ha mistet minst 50 prosent av arbeidstiden din for \u00E5 kunne f\u00E5 dagpenger.")),
-                react_1.default.createElement(accordion_1.Accordion.Item, null,
-                    react_1.default.createElement(accordion_1.Accordion.Header, null, "Oppholder du deg i utlandet?"),
-                    react_1.default.createElement(accordion_1.Accordion.Content, null, "Det er den totale arbeidstiden din som m\u00E5 v\u00E6re redusert med minst 50 prosent. Har du flere jobber m\u00E5 du samlet sett ha mistet minst 50 prosent av arbeidstiden din for \u00E5 kunne f\u00E5 dagpenger.")),
-                react_1.default.createElement(accordion_1.Accordion.Item, null,
-                    react_1.default.createElement(accordion_1.Accordion.Header, null, "Mottar du annen pengest\u00F8tte?"),
-                    react_1.default.createElement(accordion_1.Accordion.Content, null, "Det er den totale arbeidstiden din som m\u00E5 v\u00E6re redusert med minst 50 prosent. Har du flere jobber m\u00E5 du samlet sett ha mistet minst 50 prosent av arbeidstiden din for \u00E5 kunne f\u00E5 dagpenger.")))),
-        react_1.default.createElement(typography_1.Heading, { spacing: true, level: "3", size: "medium" }, "Hvis du er arbeidsledig"),
-        react_1.default.createElement(typography_1.BodyLong, { spacing: true }, "Grunnen til at du mistet jobben din kan f\u00E5 betydning for dagpengene dine. Sjekk hvilke regler som gjelder for disse situasjonene."),
-        react_1.default.createElement(typography_1.Heading, { spacing: true, level: "3", size: "medium" }, "Hvis du er permittert"),
-        react_1.default.createElement(typography_1.BodyLong, { spacing: true }, "Som permittert har du rett til l\u00F8nn fra arbeidsgiveren din de 15 f\u00F8rste arbeidsdagene du er permittert. Hvis du er delvis permittert, kan de 15 arbeidsdagene med l\u00F8nn strekke seg over en lengre periode. Etter denne perioden med l\u00F8nn, kan du f\u00E5 dagpenger."),
-        react_1.default.createElement(typography_1.BodyLong, { spacing: true }, "For at du skal ha rett til dagpenger som permittert, m\u00E5 permitterings\u00E5rsaken v\u00E6re mangel p\u00E5 arbeid i bedriften eller andre forhold som arbeidsgiveren din ikke kan p\u00E5virke. Grunnen til at du permitteres kan derfor ha betydning for din rett til dagpenger. NAV vurderer om permitterings\u00E5rsaken gir deg rett til dagpenger.")));
-}
-exports.Content = Content;
-//# sourceMappingURL=Content.js.map

package/cjs/layout/sidemal-test/Content.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Content.js","sourceRoot":"","sources":["../../../src/layout/sidemal-test/Content.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,qDAA+C;AAC/C,+CAA4C;AAC5C,iDAA8C;AAC9C,qCAAkC;AAClC,qCAAkC;AAClC,+CAA2C;AAC3C,iDAAqD;AACrD,gCAA6B;AAC7B,oCAAkC;AAClC,+CAA4C;AAE5C,SAAgB,OAAO;IACrB,OAAO,CACL,8BAAC,yBAAW;QACV,8BAAC,SAAG,IAAC,YAAY,EAAC,KAAK;YACrB,8BAAC,cAAM,IAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,OAAO;gBAC3B,8BAAC,oBAAO,IAAC,IAAI,EAAC,OAAO,wBAAuB;gBAC5C,8BAAC,uBAAU,IACT,QAAQ,EAAC,GAAG,EACZ,IAAI,EAAC,cAAc,EACnB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,8BAAC,sBAAQ,0BAAe,GAC9B,CACK,CACL;QACN,8BAAC,qBAAQ,IAAC,MAAM,EAAC,UAAU,mHAGhB;QACX,8BAAC,WAAI;YACH,8BAAC,WAAI,CAAC,IAAI,yEAEE;YACZ,8BAAC,WAAI,CAAC,IAAI,qEAEE;YACZ,8BAAC,WAAI,CAAC,IAAI,+KAIE;YACZ,8BAAC,WAAI,CAAC,IAAI,kCAA+B,CACpC;QACP,8BAAC,SAAG,IAAC,YAAY,EAAC,KAAK;YACrB,8BAAC,oBAAQ,IAAC,MAAM,EAAC,0CAA0C;;gBAGzD,8BAAC,WAAI;oBACH,8BAAC,WAAI,CAAC,IAAI,yBAA2B;oBACrC,8BAAC,WAAI,CAAC,IAAI,0CAA4C;oBACtD,8BAAC,WAAI,CAAC,IAAI,8CAAgD;oBAC1D,8BAAC,WAAI,CAAC,IAAI,4DAEE,CACP;gBACP,8BAAC,qBAAQ,uFAGE,CACF,CACP;QACN,8BAAC,qBAAQ,IAAC,MAAM,EAAC,UAAU,+CAAqC;QAChE,8BAAC,WAAI;YACH,8BAAC,WAAI,CAAC,IAAI,8BAA2B;YACrC,8BAAC,WAAI,CAAC,IAAI,+CAA4C;YACtD,8BAAC,WAAI,CAAC,IAAI,mEAEE;YACZ,8BAAC,WAAI,CAAC,IAAI,uCAAyC;YACnD,8BAAC,WAAI,CAAC,IAAI,4CAAoC,CACzC;QACP,8BAAC,qBAAQ,IAAC,OAAO;;YACJ,8BAAC,WAAI,IAAC,IAAI,EAAC,GAAG,8DAA2C,CAC3D;QACX,8BAAC,SAAG,IAAC,YAAY,EAAC,KAAK;YACrB,8BAAC,qBAAS;gBACR,8BAAC,qBAAS,CAAC,IAAI;oBACb,8BAAC,qBAAS,CAAC,MAAM,+BAAwC;oBACzD,8BAAC,qBAAS,CAAC,OAAO,gOAIE,CACL;gBACjB,8BAAC,qBAAS,CAAC,IAAI;oBACb,8BAAC,qBAAS,CAAC,MAAM,uCAAgD;oBACjE,8BAAC,qBAAS,CAAC,OAAO,gOAIE,CACL;gBACjB,8BAAC,qBAAS,CAAC,IAAI;oBACb,8BAAC,qBAAS,CAAC,MAAM,4CAAgD;oBACjE,8BAAC,qBAAS,CAAC,OAAO,gOAIE,CACL,CACP,CACR;QACN,8BAAC,oBAAO,IAAC,OAAO,QAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,8BAE9B;QACV,8BAAC,qBAAQ,IAAC,OAAO,mJAGN;QACX,8BAAC,oBAAO,IAAC,OAAO,QAAC,KAAK,EAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,4BAE9B;QACV,8BAAC,qBAAQ,IAAC,OAAO,oSAKN;QACX,8BAAC,qBAAQ,IAAC,OAAO,yWAMN,CACC,CACf,CAAC;AACJ,CAAC;AApHD,0BAoHC"}

package/cjs/layout/sidemal-test/Filter.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export declare function FilterCard(): React.JSX.Element;

package/cjs/layout/sidemal-test/Filter.js

@@ -1,49 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterCard = void 0;
-const react_1 = __importStar(require("react"));
-const aksel_icons_1 = require("@navikt/aksel-icons");
-const checkbox_1 = require("../../form/checkbox");
-const typography_1 = require("../../typography");
-const box_1 = require("../box");
-const stack_1 = require("../stack");
-function FilterCard() {
-    const [filter, setFilter] = (0, react_1.useState)([]);
-    return (react_1.default.createElement(box_1.Box, { background: "bg-default", padding: { xs: "4", md: "5" }, borderWidth: "5", borderColor: "border-alt-3", borderRadius: "medium" },
-        react_1.default.createElement(stack_1.VStack, { gap: "6" },
-            react_1.default.createElement(typography_1.Heading, { size: "large" }, "Fortell oss om situasjonen din"),
-            react_1.default.createElement(typography_1.BodyLong, null, "Fortell oss litt om situasjonen din, s\u00E5 viser vi bare den informasjonen som er relevant for deg."),
-            react_1.default.createElement("div", null,
-                react_1.default.createElement(checkbox_1.CheckboxGroup, { legend: "Hva er situasjonen din?", size: "small", onChange: setFilter },
-                    react_1.default.createElement(checkbox_1.Checkbox, { value: "box1" }, "Jeg er arbeidsledig"),
-                    react_1.default.createElement(checkbox_1.Checkbox, { value: "box2" }, "Jeg er permittert")),
-                !filter.length && (react_1.default.createElement(box_1.Box, { paddingBlock: "2 0" },
-                    react_1.default.createElement(stack_1.HStack, { gap: "2", align: "center" },
-                        react_1.default.createElement(aksel_icons_1.InformationSquareIcon, { "aria-hidden": true }),
-                        react_1.default.createElement(typography_1.Detail, null, "Ingen filtre er valgt, s\u00E5 alt innhold vises."))))))));
-}
-exports.FilterCard = FilterCard;
-//# sourceMappingURL=Filter.js.map

package/cjs/layout/sidemal-test/Filter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../../src/layout/sidemal-test/Filter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AACxC,qDAA4D;AAC5D,kDAA8D;AAC9D,iDAA6D;AAC7D,gCAA6B;AAC7B,oCAA0C;AAE1C,SAAgB,UAAU;IACxB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAQ,EAAE,CAAC,CAAC;IAEhD,OAAO,CACL,8BAAC,SAAG,IACF,UAAU,EAAC,YAAY,EACvB,OAAO,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAC7B,WAAW,EAAC,GAAG,EACf,WAAW,EAAC,cAAc,EAC1B,YAAY,EAAC,QAAQ;QAErB,8BAAC,cAAM,IAAC,GAAG,EAAC,GAAG;YACb,8BAAC,oBAAO,IAAC,IAAI,EAAC,OAAO,qCAAyC;YAC9D,8BAAC,qBAAQ,gHAGE;YACX;gBACE,8BAAC,wBAAa,IACZ,MAAM,EAAC,yBAAyB,EAChC,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,SAAS;oBAEnB,8BAAC,mBAAQ,IAAC,KAAK,EAAC,MAAM,0BAA+B;oBACrD,8BAAC,mBAAQ,IAAC,KAAK,EAAC,MAAM,wBAA6B,CACrC;gBACf,CAAC,MAAM,CAAC,MAAM,IAAI,CACjB,8BAAC,SAAG,IAAC,YAAY,EAAC,KAAK;oBACrB,8BAAC,cAAM,IAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,QAAQ;wBAC5B,8BAAC,mCAAqB,0BAAe;wBACrC,8BAAC,mBAAM,4DAAsD,CACtD,CACL,CACP,CACG,CACC,CACL,CACP,CAAC;AACJ,CAAC;AAtCD,gCAsCC"}

package/cjs/layout/sidemal-test/Header.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export declare function Header(): React.JSX.Element;

package/cjs/layout/sidemal-test/Header.js

@@ -1,49 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Header = void 0;
-const react_1 = __importDefault(require("react"));
-const typography_1 = require("../../typography");
-const box_1 = require("../box");
-const responsive_1 = require("../responsive");
-const stack_1 = require("../stack");
-const content_box_1 = require("./content-box");
-function Header() {
-    return (react_1.default.createElement(box_1.Box, { as: "header", borderWidth: "0 0 4 0", borderColor: "border-success", paddingBlock: "12 0" },
-        react_1.default.createElement(content_box_1.ContentBox, { maxWidth: "lg" },
-            react_1.default.createElement(box_1.Box, { background: "surface-default", paddingInline: "4", paddingBlock: "0 6" },
-                react_1.default.createElement(stack_1.HStack, { align: "start", gap: "8" },
-                    react_1.default.createElement(responsive_1.Hide, { below: "md" },
-                        react_1.default.createElement(Pictogram, null)),
-                    react_1.default.createElement(stack_1.VStack, { gap: { xs: "4", md: "5" } },
-                        react_1.default.createElement(typography_1.Heading, { level: "1", size: "xlarge" }, "Dagpenger"),
-                        react_1.default.createElement(responsive_1.Hide, { below: "md" },
-                            react_1.default.createElement(stack_1.HStack, { gap: "4", align: "center" },
-                                react_1.default.createElement(typography_1.BodyShort, { size: "small" }, "PENGEST\u00D8TTE"),
-                                react_1.default.createElement("span", { "aria-hidden": "true" }, "|"),
-                                react_1.default.createElement(typography_1.Detail, null, "Oppdatert 5. juli 2023"))),
-                        react_1.default.createElement(responsive_1.Show, { below: "md" },
-                            react_1.default.createElement(stack_1.VStack, { gap: "2" },
-                                react_1.default.createElement(typography_1.BodyShort, { size: "small" }, "PENGEST\u00D8TTE"),
-                                react_1.default.createElement(typography_1.Detail, null, "Oppdatert 24. august 2023")))))))));
-}
-exports.Header = Header;
-function Pictogram() {
-    return (react_1.default.createElement("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", fill: "none", width: "80", height: "80", viewBox: "0 0 96.45 96.44" },
-        react_1.default.createElement("g", { clipPath: "url(#clip0_4486_7567)" },
-            react_1.default.createElement("path", { d: "M37.6276 55.6806L12.707 30.76L31.2599 12.2071L56.1805 37.1277L66.7031 26.6052L75.0165 74.5166L27.1051 66.2031L37.6276 55.6806Z", fill: "#CCF1D6" }),
-            react_1.default.createElement("path", { d: "M41 11V33H2L2 9H27.5072", stroke: "#262626", strokeWidth: "3" }),
-            react_1.default.createElement("circle", { cx: "22", cy: "16", r: "6.5", stroke: "#262626", strokeWidth: "3" }),
-            react_1.default.createElement("circle", { cx: "35", cy: "9", r: "6.5", stroke: "#262626", strokeWidth: "3" }),
-            react_1.default.createElement("circle", { cx: "62", cy: "63", r: "22.5", stroke: "#262626", strokeWidth: "3" }),
-            react_1.default.createElement("path", { d: "M77.8105 77.7964L94.9534 94.9392", stroke: "#262626", strokeWidth: "3" }),
-            react_1.default.createElement("path", { d: "M47.6311 59.1036L72.7452 52.3743C73.0119 52.3028 73.2861 52.4611 73.3576 52.7279L75.1693 59.4894C75.3837 60.2896 74.9088 61.1121 74.1086 61.3265L50.9264 67.5381C50.1262 67.7525 49.3037 67.2777 49.0893 66.4775L47.2776 59.716C47.2061 59.4493 47.3644 59.1751 47.6311 59.1036Z", stroke: "#262626", strokeWidth: "3" }),
-            react_1.default.createElement("path", { d: "M52.3847 74.912L50.4436 67.6676L74.5917 61.1971L76.5329 68.4416C76.7473 69.2418 76.2724 70.0643 75.4722 70.2787L54.2218 75.9727C53.4216 76.1871 52.5991 75.7122 52.3847 74.912Z", stroke: "#262626", strokeWidth: "3" }),
-            react_1.default.createElement("path", { d: "M64.1814 55.1864L63.6638 53.2546C63.092 51.1207 60.8987 49.8544 58.7648 50.4261V50.4261C56.631 50.9979 55.3646 53.1913 55.9364 55.3251L56.454 57.257", stroke: "#262626", strokeWidth: "3" })),
-        react_1.default.createElement("defs", null,
-            react_1.default.createElement("clipPath", { id: "clip0_4486_7567" },
-                react_1.default.createElement("rect", { width: "96", height: "96", fill: "white" })))));
-}
-//# sourceMappingURL=Header.js.map