@helsenorge/designsystem-react 1.0.0-beta104 → 1.0.0-beta108

package/components/Validation/styles.module.scss.d.ts

@@ -1,10 +1,10 @@
-export type Styles = {
-  'form-group-wrapper--error-sibling': string;
-  validation__errors: string;
-};
-
-export type ClassNames = keyof Styles;
-
-declare const styles: Styles;
-
-export default styles;
+export type Styles = {
+  'form-group-wrapper--error-sibling': string;
+  validation__errors: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/constants-eb74321e.js

@@ -0,0 +1,2 @@
+var a,o,n,e,i;!function(a){a[a.XSmall=38]="XSmall",a[a.Small=48]="Small",a[a.Medium=64]="Medium",a[a.Large=80]="Large",a[a.XLarge=130]="XLarge"}(a||(a={})),function(a){a[a.Modal=13e5]="Modal",a[a.ExpanderTrigger=1e4]="ExpanderTrigger"}(o||(o={})),function(a){a.onwhite="onwhite",a.ongrey="ongrey",a.onblueberry="onblueberry",a.ondark="ondark",a.oninvalid="oninvalid"}(n||(n={})),function(a){a.normal="normal",a.bigform="bigform"}(e||(e={})),function(a){a.AnchorLink="anchor-link",a.Avatar="avatar",a.Badge="badge",a.Button="button",a.Checkbox="checkbox",a.Close="close",a.Expander="expander",a.ExpanderList="expander-list",a.ExpanderListExpander="expander-list-expander",a.FormGroup="form-group",a.HighlightBox="highlight-box",a.Icon="icon",a.Input="input",a.Link="link",a.LinkList="link-list",a.List="list",a.Loader="loader",a.Logo="logo",a.Modal="modal",a.NotificationPanel="notification-panel",a.Portal="portal",a.RadioButton="radio-button",a.Slider="slider",a.Spacer="spacer",a.Textarea="textarea",a.Tile="tile",a.Title="title",a.Validation="validation"}(i||(i={}));export{i as A,n as F,a as I,o as Z,e as a};
+//# sourceMappingURL=constants-eb74321e.js.map

package/constants-eb74321e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants-eb74321e.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/constants.d.ts

@@ -1,91 +1,92 @@
-export declare enum IconSize {
-    XSmall = 38,
-    Small = 48,
-    Medium = 64,
-    Large = 80,
-    XLarge = 130
-}
-export declare enum ZIndex {
-    Modal = 1300000,
-    ExpanderTrigger = 10000
-}
-export interface HTMLButtonProps {
-    autoFocus?: boolean;
-    disabled?: boolean;
-    form?: string;
-    formAction?: string;
-    formEncType?: string;
-    formMethod?: string;
-    formNoValidate?: boolean;
-    formTarget?: string;
-    name?: string;
-    type?: 'submit' | 'reset' | 'button' | string;
-    value?: string | string[] | number;
-}
-export interface HTMLTextareaProps {
-    autoFocus?: boolean;
-    disabled?: boolean;
-    form?: string;
-    formNoValidate?: boolean;
-    formTarget?: string;
-    name?: string;
-    id?: string;
-    autocomplete?: 'off' | 'on';
-    placeholder?: string;
-    readonly?: boolean;
-    required?: boolean;
-    spellcheck?: 'true' | 'default' | 'false';
-    'aria-invalid'?: boolean;
-}
-export interface HTMLAnchorProps {
-    download?: string;
-    href?: string;
-    hrefLang?: string;
-    media?: string;
-    ping?: string;
-    rel?: string;
-    target?: string;
-    referrerPolicy?: '' | 'same-origin' | 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
-}
-export declare type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;
-export declare enum FormMode {
-    onwhite = "onwhite",
-    ongrey = "ongrey",
-    onblueberry = "onblueberry",
-    ondark = "ondark",
-    oninvalid = "oninvalid"
-}
-export declare enum FormVariant {
-    normal = "normal",
-    bigform = "bigform"
-}
-export declare enum AnalyticsId {
-    AnchorLink = "anchor-link",
-    Avatar = "avatar",
-    Badge = "badge",
-    Button = "button",
-    Checkbox = "checkbox",
-    Close = "close",
-    Expander = "expander",
-    ExpanderList = "expander-list",
-    FormGroup = "form-group",
-    HighlightBox = "highlight-box",
-    Icon = "icon",
-    Input = "input",
-    Link = "link",
-    LinkList = "link-list",
-    List = "list",
-    Loader = "loader",
-    Logo = "logo",
-    Modal = "modal",
-    NotificationPanel = "notification-panel",
-    Portal = "portal",
-    RadioButton = "radio-button",
-    Slider = "slider",
-    Spacer = "spacer",
-    Textarea = "textarea",
-    Tile = "tile",
-    Title = "title",
-    Validation = "validation"
-}
+export declare enum IconSize {
+    XSmall = 38,
+    Small = 48,
+    Medium = 64,
+    Large = 80,
+    XLarge = 130
+}
+export declare enum ZIndex {
+    Modal = 1300000,
+    ExpanderTrigger = 10000
+}
+export interface HTMLButtonProps {
+    autoFocus?: boolean;
+    disabled?: boolean;
+    form?: string;
+    formAction?: string;
+    formEncType?: string;
+    formMethod?: string;
+    formNoValidate?: boolean;
+    formTarget?: string;
+    name?: string;
+    type?: 'submit' | 'reset' | 'button' | string;
+    value?: string | string[] | number;
+}
+export interface HTMLTextareaProps {
+    autoFocus?: boolean;
+    disabled?: boolean;
+    form?: string;
+    formNoValidate?: boolean;
+    formTarget?: string;
+    name?: string;
+    id?: string;
+    autocomplete?: 'off' | 'on';
+    placeholder?: string;
+    readonly?: boolean;
+    required?: boolean;
+    spellcheck?: 'true' | 'default' | 'false';
+    'aria-invalid'?: boolean;
+}
+export interface HTMLAnchorProps {
+    download?: string;
+    href?: string;
+    hrefLang?: string;
+    media?: string;
+    ping?: string;
+    rel?: string;
+    target?: string;
+    referrerPolicy?: '' | 'same-origin' | 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
+}
+export declare type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;
+export declare enum FormMode {
+    onwhite = "onwhite",
+    ongrey = "ongrey",
+    onblueberry = "onblueberry",
+    ondark = "ondark",
+    oninvalid = "oninvalid"
+}
+export declare enum FormVariant {
+    normal = "normal",
+    bigform = "bigform"
+}
+export declare enum AnalyticsId {
+    AnchorLink = "anchor-link",
+    Avatar = "avatar",
+    Badge = "badge",
+    Button = "button",
+    Checkbox = "checkbox",
+    Close = "close",
+    Expander = "expander",
+    ExpanderList = "expander-list",
+    ExpanderListExpander = "expander-list-expander",
+    FormGroup = "form-group",
+    HighlightBox = "highlight-box",
+    Icon = "icon",
+    Input = "input",
+    Link = "link",
+    LinkList = "link-list",
+    List = "list",
+    Loader = "loader",
+    Logo = "logo",
+    Modal = "modal",
+    NotificationPanel = "notification-panel",
+    Portal = "portal",
+    RadioButton = "radio-button",
+    Slider = "slider",
+    Spacer = "spacer",
+    Textarea = "textarea",
+    Tile = "tile",
+    Title = "title",
+    Validation = "validation"
+}
 //# sourceMappingURL=constants.d.ts.map

package/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"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"}

package/hooks/focus-utils.d.ts

@@ -1,7 +1,7 @@
-/**
- * Kopi fra core-frontend (focus-utils.tsx)
- * Returnerer document.activeElement (element in focus), uavhengig av om den er i document-dom eller shadow-dom
- * @param element HtmlElement som den skal søke i
- */
-export declare const getDocumentActiveElement: (element: string | HTMLElement) => Element | null;
+/**
+ * Kopi fra core-frontend (focus-utils.tsx)
+ * Returnerer document.activeElement (element in focus), uavhengig av om den er i document-dom eller shadow-dom
+ * @param element HtmlElement som den skal søke i
+ */
+export declare const getDocumentActiveElement: (element: string | HTMLElement) => Element | null;
 //# sourceMappingURL=focus-utils.d.ts.map

package/hooks/useBreakpoint.d.ts

@@ -1,13 +1,13 @@
-export declare enum Breakpoint {
-    xs,
-    sm,
-    md,
-    lg,
-    xl
-}
-/**
- * Lytt på endringer i breakpoint basert på media queries. Trigger re-render bare når breakpoint er endret.
- * @returns Gjeldende breakpoint
- */
-export declare const useBreakpoint: () => Breakpoint | undefined;
+export declare enum Breakpoint {
+    xs,
+    sm,
+    md,
+    lg,
+    xl
+}
+/**
+ * Lytt på endringer i breakpoint basert på media queries. Trigger re-render bare når breakpoint er endret.
+ * @returns Gjeldende breakpoint
+ */
+export declare const useBreakpoint: () => Breakpoint | undefined;
 //# sourceMappingURL=useBreakpoint.d.ts.map

package/hooks/useFocusToggle.d.ts

@@ -1,14 +1,14 @@
-import React from 'react';
-export declare const FOCUSABLE_SELECTORS: string;
-/**
- * Skru av og på fokus på fokuserbare elementer slik at de kan være en del av DOMen, men samtidig
- * ikke kunne fokuseres/tabbes til med tastaturet.
- *
- * Bruker MutationObserver slik at eventuelle nye elementer som legges til også vil miste/få fokus.
- *
- * @param ref Alle barn av dette elementet vil sjekkes for om de er fokuserbare
- * @param allowFocus Om elementene skal være fokuserbare eller ikke
- * @returns Liste med potensielt fokuserbare elementer
- */
-export declare const useFocusToggle: (ref: React.RefObject<HTMLElement>, allowFocus?: boolean | undefined) => NodeListOf<HTMLElement> | undefined;
+import React from 'react';
+export declare const FOCUSABLE_SELECTORS: string;
+/**
+ * Skru av og på fokus på fokuserbare elementer slik at de kan være en del av DOMen, men samtidig
+ * ikke kunne fokuseres/tabbes til med tastaturet.
+ *
+ * Bruker MutationObserver slik at eventuelle nye elementer som legges til også vil miste/få fokus.
+ *
+ * @param ref Alle barn av dette elementet vil sjekkes for om de er fokuserbare
+ * @param allowFocus Om elementene skal være fokuserbare eller ikke
+ * @returns Liste med potensielt fokuserbare elementer
+ */
+export declare const useFocusToggle: (ref: React.RefObject<HTMLElement>, allowFocus?: boolean | undefined) => NodeListOf<HTMLElement> | undefined;
 //# sourceMappingURL=useFocusToggle.d.ts.map

package/hooks/useFocusTrap.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-export declare function useFocusTrap(): React.MutableRefObject<HTMLDivElement | null>;
-export default useFocusTrap;
+import React from 'react';
+export declare function useFocusTrap(): React.MutableRefObject<HTMLDivElement | null>;
+export default useFocusTrap;
 //# sourceMappingURL=useFocusTrap.d.ts.map

package/hooks/useHover.d.ts

@@ -1,12 +1,12 @@
-import { RefObject } from 'react';
-/** ref: Reference object for the trigger of the hover state
- *
- *  condition: Additional boolean condition to trigger the useEffect checking for hover.
- *
- *  includeFocus: If focusing the ref should count as a hover or not. True by default.
- */
-export declare const useHover: <T extends HTMLElement>(ref?: RefObject<T> | undefined, condition?: boolean | undefined, includeFocus?: boolean) => {
-    hoverRef: RefObject<T>;
-    isHovered: boolean;
-};
+import { RefObject } from 'react';
+/** ref: Reference object for the trigger of the hover state
+ *
+ *  condition: Additional boolean condition to trigger the useEffect checking for hover.
+ *
+ *  includeFocus: If focusing the ref should count as a hover or not. True by default.
+ */
+export declare const useHover: <T extends HTMLElement>(ref?: RefObject<T> | undefined, condition?: boolean | undefined, includeFocus?: boolean) => {
+    hoverRef: RefObject<T>;
+    isHovered: boolean;
+};
 //# sourceMappingURL=useHover.d.ts.map

package/hooks/useIcons.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { IconProps } from '../components/Icons';
-export declare const useIcons: (children: import("react").ReactNode[]) => (string | number | boolean | {} | import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)> | import("react").ReactNodeArray | import("react").ReactPortal | import("react").ReactElement<IconProps, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)> | null | undefined)[];
+/// <reference types="react" />
+import { IconProps } from '../components/Icons';
+export declare const useIcons: (children: import("react").ReactNode[]) => (string | number | boolean | {} | import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)> | import("react").ReactNodeArray | import("react").ReactPortal | import("react").ReactElement<IconProps, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)> | null | undefined)[];
 //# sourceMappingURL=useIcons.d.ts.map

package/hooks/useIntersectionObserver.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
-/**
- * Lytt på endringer i synligheten (intersection) til et HTML-element. F.eks. kan du bruke denne til å kalle en callback
- * når elementet er i ferd med å forsvinne ut av vinduet.
- *
- * @param ref Element som skal observeres
- * @param callback Kalles når en endring i intersection er observert
- * @param options Objekt med options for IntersectionObserver, f.eks. threshold for å bestemme når callbacken skal fyres
- */
-export declare const useIntersectionObserver: (ref: import("react").RefObject<HTMLElement>, callback: IntersectionObserverCallback, options?: IntersectionObserverInit | undefined) => void;
+/// <reference types="react" />
+/**
+ * Lytt på endringer i synligheten (intersection) til et HTML-element. F.eks. kan du bruke denne til å kalle en callback
+ * når elementet er i ferd med å forsvinne ut av vinduet.
+ *
+ * @param ref Element som skal observeres
+ * @param callback Kalles når en endring i intersection er observert
+ * @param options Objekt med options for IntersectionObserver, f.eks. threshold for å bestemme når callbacken skal fyres
+ */
+export declare const useIntersectionObserver: (ref: import("react").RefObject<HTMLElement>, callback: IntersectionObserverCallback, options?: IntersectionObserverInit | undefined) => void;
 //# sourceMappingURL=useIntersectionObserver.d.ts.map

package/hooks/useIsVisible.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-/**
- * Sjekk om et HTML-element er synlig i vinduet, eller ikke.
- *
- * @param ref Element som skal observeres
- * @param threshold Hvor synlig må elementet være? Default = 1 (helt synlig)
- * @returns true hvis objektet er synlig lik threshold eller mer, false hvis ikke
- */
-export declare const useIsVisible: (ref: import("react").RefObject<HTMLElement>, threshold?: number) => boolean;
+/// <reference types="react" />
+/**
+ * Sjekk om et HTML-element er synlig i vinduet, eller ikke.
+ *
+ * @param ref Element som skal observeres
+ * @param threshold Hvor synlig må elementet være? Default = 1 (helt synlig)
+ * @returns true hvis objektet er synlig lik threshold eller mer, false hvis ikke
+ */
+export declare const useIsVisible: (ref: import("react").RefObject<HTMLElement>, threshold?: number) => boolean;
 //# sourceMappingURL=useIsVisible.d.ts.map

package/hooks/useLayoutEvent.d.ts

@@ -1,9 +1,9 @@
-/**
- * Lytt på ulike layout-events som har betydning for rendring og størrelse på elementer.
- *
- * @param callback Kalles for hver event
- * @param events Liste med events som skal lyttes på
- * @param debounceMs Begrens kall til callback til x antall ms
- */
-export declare const useLayoutEvent: (callback: () => void, events?: string[], debounceMs?: number) => void;
+/**
+ * Lytt på ulike layout-events som har betydning for rendring og størrelse på elementer.
+ *
+ * @param callback Kalles for hver event
+ * @param events Liste med events som skal lyttes på
+ * @param debounceMs Begrens kall til callback til x antall ms
+ */
+export declare const useLayoutEvent: (callback: () => void, events?: string[], debounceMs?: number) => void;
 //# sourceMappingURL=useLayoutEvent.d.ts.map

package/hooks/usePrevious.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Brukes f.eks. i forbindelse med useState for å kunne sammenlikne ny verdi med gammel.
+ * @param value Verdi du ønsker å ta vare på
+ * @returns Forrige verdi
+ */
+export declare const usePrevious: <T>(value: T) => T | undefined;
+//# sourceMappingURL=usePrevious.d.ts.map

package/hooks/usePrevious.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrevious.d.ts","sourceRoot":"","sources":["../../src/hooks/usePrevious.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,WAAW,gCAQvB,CAAC"}

package/hooks/useSize.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+/**
+ * Lytt på endringer i størrelse på et element
+ *
+ * @param ref Element som skal observeres.
+ * @returns Object med høyde, bredde, x og y til elementet
+ */
+export declare const useSize: (ref?: import("react").RefObject<HTMLElement> | undefined) => DOMRect | undefined;
+//# sourceMappingURL=useSize.d.ts.map

package/hooks/useSize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSize.d.ts","sourceRoot":"","sources":["../../src/hooks/useSize.ts"],"names":[],"mappings":";AAEA;;;;;GAKG;AACH,eAAO,MAAM,OAAO,mFAanB,CAAC"}

package/hooks/useSticky.d.ts

@@ -1,21 +1,21 @@
-import React from 'react';
-interface UseStickReturnValues {
-    /** Toppen av elementet er utenfor vinduet */
-    isOutsideWindow: boolean;
-    /** Innholdet er på vei helt ut av vinduet   */
-    isLeavingWindow: boolean;
-    /** Høyde på det sticky elementet i pixler */
-    offsetHeight: number | undefined;
-    /** Bredden til innholdet i pixler */
-    contentWidth: number | undefined;
-}
-/**
- * Sett et element til sticky hvis et annet element er delvis utenfor vinduet
- *
- * @param contentRef Element som sjekkes om det er utenfor eller innenfor vinduet
- * @param stickyRef Element som skal bli sticky
- * @returns Properties som kan brukes til å sette elementet sticky eller absolute
- */
-export declare const useSticky: (contentRef: React.RefObject<HTMLElement>, stickyRef: React.RefObject<HTMLElement>) => UseStickReturnValues;
-export {};
+import React from 'react';
+interface UseStickReturnValues {
+    /** Toppen av elementet er utenfor vinduet */
+    isOutsideWindow: boolean;
+    /** Innholdet er på vei helt ut av vinduet   */
+    isLeavingWindow: boolean;
+    /** Høyde på det sticky elementet i pixler */
+    offsetHeight: number | undefined;
+    /** Bredden til innholdet i pixler */
+    contentWidth: number | undefined;
+}
+/**
+ * Sett et element til sticky hvis et annet element er delvis utenfor vinduet
+ *
+ * @param contentRef Element som sjekkes om det er utenfor eller innenfor vinduet
+ * @param stickyRef Element som skal bli sticky
+ * @returns Properties som kan brukes til å sette elementet sticky eller absolute
+ */
+export declare const useSticky: (contentRef: React.RefObject<HTMLElement>, stickyRef: React.RefObject<HTMLElement>) => UseStickReturnValues;
+export {};
 //# sourceMappingURL=useSticky.d.ts.map

package/hooks/useWindowSize.d.ts

@@ -1,5 +1,5 @@
-export declare function useWindowSize(): {
-    width: number | undefined;
-    height: number | undefined;
-};
+export declare function useWindowSize(): {
+    width: number | undefined;
+    height: number | undefined;
+};
 //# sourceMappingURL=useWindowSize.d.ts.map

package/index.d.ts

@@ -1,12 +1,14 @@
-export { theme } from './theme';
-export { useBreakpoint, Breakpoint } from './hooks/useBreakpoint';
-export { useFocusToggle } from './hooks/useFocusToggle';
-export { useFocusTrap } from './hooks/useFocusTrap';
-export { useHover } from './hooks/useHover';
-export { useIntersectionObserver } from './hooks/useIntersectionObserver';
-export { useIsVisible } from './hooks/useIsVisible';
-export { useLayoutEvent } from './hooks/useLayoutEvent';
-export { useSticky } from './hooks/useSticky';
-export { useWindowSize } from './hooks/useWindowSize';
-export * from './constants';
+export { theme } from './theme';
+export { useBreakpoint, Breakpoint } from './hooks/useBreakpoint';
+export { useFocusToggle } from './hooks/useFocusToggle';
+export { useFocusTrap } from './hooks/useFocusTrap';
+export { useHover } from './hooks/useHover';
+export { useIntersectionObserver } from './hooks/useIntersectionObserver';
+export { useIsVisible } from './hooks/useIsVisible';
+export { useLayoutEvent } from './hooks/useLayoutEvent';
+export { usePrevious } from './hooks/usePrevious';
+export { useSticky } from './hooks/useSticky';
+export { useWindowSize } from './hooks/useWindowSize';
+export { useSize } from './hooks/useSize';
+export * from './constants';
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,cAAc,aAAa,CAAC"}

package/index.js

@@ -1,2 +1,2 @@
-export{t as theme}from"./index-0e78dfa0.js";export{B as Breakpoint,u as useBreakpoint}from"./useBreakpoint-552af2b9.js";export{u as useFocusToggle,a as useLayoutEvent,b as useSticky}from"./useSticky-194f2b78.js";export{u as useFocusTrap,a as useIntersectionObserver,b as useIsVisible}from"./useIsVisible-a1f67a11.js";export{u as useHover}from"./useHover-9710204a.js";export{u as useWindowSize}from"./useWindowSize-750f9b68.js";export{A as AnalyticsId,F as FormMode,a as FormVariant,I as IconSize,Z as ZIndex}from"./constants-ad6c82db.js";import"./palette-f206f488.js";import"./grid-11a70eb7.js";import"./_rollupPluginBabelHelpers-b8ef6dd9.js";import"react";
+export{t as theme}from"./index-0e78dfa0.js";export{B as Breakpoint,u as useBreakpoint}from"./useBreakpoint-552af2b9.js";import{_ as e}from"./_rollupPluginBabelHelpers-b8ef6dd9.js";import{useState as n,useEffect as o}from"react";export{u as useFocusTrap,a as useIntersectionObserver,b as useIsVisible}from"./useIsVisible-a1f67a11.js";export{u as useHover}from"./useHover-9710204a.js";export{u as useLayoutEvent,a as useSticky}from"./useSticky-d61d1f0b.js";export{u as usePrevious}from"./usePrevious-ae293b10.js";export{u as useWindowSize}from"./useWindowSize-750f9b68.js";export{A as AnalyticsId,F as FormMode,a as FormVariant,I as IconSize,Z as ZIndex}from"./constants-eb74321e.js";import"./palette-f206f488.js";import"./grid-11a70eb7.js";var r=['a[href]:not([tabindex^="-"])','area[href]:not([tabindex^="-"])','input:not([type="hidden"]):not([type="radio"]):not([disabled]):not([tabindex^="-"])','input[type="radio"]:not([disabled]):not([tabindex^="-"])','select:not([disabled]):not([tabindex^="-"])','textarea:not([disabled]):not([tabindex^="-"])','button:not([disabled]):not([tabindex^="-"])','iframe:not([tabindex^="-"])','audio[controls]:not([tabindex^="-"])','video[controls]:not([tabindex^="-"])','[contenteditable]:not([tabindex^="-"])','[tabindex]:not([tabindex^="-"])'].join(","),i=function(t,a){var i=n(),s=e(i,2),u=s[0],d=s[1];return o((function(){var e=function(){var e,n=null===(e=t.current)||void 0===e?void 0:e.querySelectorAll(r);d(n)},n=new MutationObserver(e);return(null==t?void 0:t.current)&&n.observe(t.current,{subtree:!0,childList:!0}),e(),function(){n.disconnect()}}),[t]),o((function(){a?null==u||u.forEach((function(e){var t=e.getAttribute("data-tabindex");t?e.setAttribute("tabindex",t):e.removeAttribute("tabindex")})):null==u||u.forEach((function(e){e.hasAttribute("tabindex")&&e.setAttribute("data-tabindex","".concat(e.tabIndex)),e.tabIndex=-1}))}),[a,u]),u},s=function(t){var r=n(),a=e(r,2),i=a[0],s=a[1];return o((function(){var e=new ResizeObserver((function(e){s(e[0].target.getBoundingClientRect())}));return(null==t?void 0:t.current)&&e.observe(null==t?void 0:t.current),e.disconnect}),[t]),i};export{i as useFocusToggle,s as useSize};
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@helsenorge/designsystem-react",
   "sideEffects": false,
-  "version": "1.0.0-beta104",
+  "version": "1.0.0-beta108",
   "description": "The official design system for Helsenorge built with React.",
   "repository": {
     "type": "tfs",

package/scss/_body.scss

@@ -1,11 +1,11 @@
-body {
-  font-family: 'Source Sans Pro', Arial, Verdana, sans-serif;
-  background-color: $neutral50;
-  color: $black;
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
-  @include media-breakpoint-up(md) {
-    font-size: $font-size-md;
-    line-height: $lineheight-size-md;
-  }
-}
+body {
+  font-family: 'Source Sans Pro', Arial, Verdana, sans-serif;
+  background-color: $neutral50;
+  color: $black;
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
+  @include media-breakpoint-up(md) {
+    font-size: $font-size-md;
+    line-height: $lineheight-size-md;
+  }
+}

package/scss/_breakpoints.scss

@@ -1,16 +1,16 @@
-$grid-gutter-width: map-get($spacers, 5);
-
-$grid-breakpoints: (
-  null: 0,
-  xs: 360px,
-  sm: 564px,
-  md: 768px,
-  lg: 1088px,
-  xl: 1450px,
-);
-
-$container-max-widths: (
-  sm: 528px,
-  md: 612px,
-  lg: 1056px,
-);
+$grid-gutter-width: map-get($spacers, 5);
+
+$grid-breakpoints: (
+  null: 0,
+  xs: 360px,
+  sm: 564px,
+  md: 768px,
+  lg: 1088px,
+  xl: 1450px,
+);
+
+$container-max-widths: (
+  sm: 528px,
+  md: 612px,
+  lg: 1056px,
+);

package/scss/_font-settings.scss

@@ -1,8 +1,8 @@
-$font-size-xs: 1rem; // 16px
-$font-size-sm: 1.125rem; // 18px
-$font-size-md: 1.25rem; // 20px
-$font-size-lg: 1.5rem; // 24px
-$lineheight-size-xs: 1.5rem; // 28px
-$lineheight-size-sm: 1.75rem; // 28px
-$lineheight-size-md: 1.875rem; // 30px
-$lineheight-size-lg: 2rem; // 32px
+$font-size-xs: 1rem; // 16px
+$font-size-sm: 1.125rem; // 18px
+$font-size-md: 1.25rem; // 20px
+$font-size-lg: 1.5rem; // 24px
+$lineheight-size-xs: 1.5rem; // 28px
+$lineheight-size-sm: 1.75rem; // 28px
+$lineheight-size-md: 1.875rem; // 30px
+$lineheight-size-lg: 2rem; // 32px