@fremtind/jokul 2.0.1 → 3.1.0

package/build/es/components/cookie-consent/CookieConsent.js.map

@@ -1 +1 @@
-{"version":3,"file":"CookieConsent.js","sources":["../../../../src/components/cookie-consent/CookieConsent.tsx"],"sourcesContent":["import React, { type FormEventHandler, useEffect, useId } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Button } from \"../button/Button.js\";\nimport { Flex } from \"../flex/index.js\";\nimport { Link } from \"../link/index.js\";\nimport {\n    Modal,\n    ModalActions,\n    ModalBody,\n    ModalContainer,\n    ModalHeader,\n    ModalOverlay,\n    ModalTitle,\n} from \"../modal/Modal.js\";\nimport { useModal } from \"../modal/useModal.js\";\nimport { useInternalState } from \"./CookieConsentContext.js\";\nimport {\n    convertBooleanConsentObjectToConsentObject,\n    setConsentCookie,\n} from \"./cookieConsentUtils.js\";\nimport type { Consent, CookieConsentProps } from \"./types.js\";\n\nexport const CookieConsent = ({\n    blocking,\n    onAccept,\n    aboutPage = \"https://www.fremtind.no/informasjonskapsler\",\n    ...rest\n}: CookieConsentProps): JSX.Element | null => {\n    const {\n        currentConsent,\n        cookieName,\n        cookieDomain,\n        cookiePath,\n        requirement,\n        isOpen,\n        setIsOpen,\n        updateCurrentConsents,\n    } = useInternalState();\n\n    const [instance, modalConfig] = useModal({\n        id: `jkl-cookie-modal-${useId()}`,\n        // The optional `role` attribute of the dialog element, either `dialog`\n        // (default) or `alertdialog` to make it a modal (preventing closing on\n        // click outside of ESC key).\n        role: blocking ? \"alertdialog\" : \"dialog\",\n        // The required dialog title, mandatory in the document\n        // to provide context to assistive technology.\n        title: \"Informasjonskapsler\",\n    });\n    useEffect(() => {\n        if (isOpen) {\n            instance?.show();\n        } else {\n            instance?.hide();\n        }\n    }, [instance, isOpen]);\n\n    useEffect(() => {\n        const onHide = () => setIsOpen(false);\n        instance?.on(\"hide\", onHide);\n        return () => {\n            instance?.off(\"hide\", onHide);\n        };\n    }, [instance, setIsOpen]);\n\n    if (typeof document === \"undefined\") {\n        return null;\n    }\n\n    // Cookies are disabled in the browser\n    if (typeof navigator !== \"undefined\" && !navigator.cookieEnabled) {\n        if (onAccept) {\n            onAccept({\n                functional: \"denied\",\n                statistics: \"denied\",\n            });\n        }\n\n        return null;\n    }\n\n    const accept = (\n        selection = convertBooleanConsentObjectToConsentObject(\n            {\n                functional: true,\n                statistics: true,\n            },\n            requirement,\n        ),\n    ) => {\n        const selectionWithoutEmptyValues = Object.fromEntries(\n            Object.entries(selection).filter(\n                ([, value]) => typeof value !== \"undefined\",\n            ),\n        );\n\n        const updatedConsent: Consent = {\n            ...currentConsent,\n            ...selectionWithoutEmptyValues,\n        };\n\n        setConsentCookie({\n            consent: updatedConsent,\n            name: cookieName,\n            domain: cookieDomain,\n            path: cookiePath,\n        });\n\n        updateCurrentConsents();\n\n        onAccept?.(updatedConsent);\n\n        instance?.hide();\n    };\n\n    const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {\n        e.preventDefault();\n\n        const formData = new FormData(e.currentTarget);\n\n        const newConsents = convertBooleanConsentObjectToConsentObject(\n            {\n                functional: formData.get(\"functional\") === \"true\",\n                statistics: formData.get(\"statistics\") === \"true\",\n            },\n            requirement,\n        );\n\n        accept(newConsents);\n    };\n\n    return ReactDOM.createPortal(\n        <ModalContainer\n            {...modalConfig.container}\n            {...rest}\n            data-cookie-consent-open={isOpen}\n        >\n            <ModalOverlay {...modalConfig.overlay} />\n            <Modal component=\"form\" {...modalConfig.modal} {...{ onSubmit }}>\n                <form>\n                    <ModalHeader>\n                        <ModalTitle {...modalConfig.title}>\n                            Får vi bruke valgfrie informasjonskapsler?\n                        </ModalTitle>\n                    </ModalHeader>\n                    <ModalBody>\n                        <Flex direction=\"column\" gap={24}>\n                            <p>\n                                Vi ønsker å samle anonym statistikk for å forstå\n                                hvordan nettsidene våre brukes. Det hjelper oss\n                                til å gjøre innhold og løsninger bedre og mer\n                                brukervennlige.\n                            </p>\n                            <p>\n                                <Link href={aboutPage} target=\"_blank\">\n                                    Les mer om hvilke informasjonskapsler vi\n                                    lagrer her\n                                </Link>\n                                .\n                            </p>\n                        </Flex>\n                    </ModalBody>\n                    <ModalActions>\n                        <Button\n                            variant=\"secondary\"\n                            data-testid=\"jkl-cookie-consent-godta-alle\"\n                            type=\"button\"\n                            onClick={() => accept()}\n                        >\n                            Ja, det er greit\n                        </Button>\n                        <Button\n                            variant=\"secondary\"\n                            data-testid=\"jkl-cookie-consent-godta\"\n                            type=\"submit\"\n                        >\n                            Nei takk\n                        </Button>\n                    </ModalActions>\n                </form>\n            </Modal>\n        </ModalContainer>,\n        document.body,\n    );\n};\n"],"names":["CookieConsent","blocking","onAccept","aboutPage","rest","currentConsent","cookieName","cookieDomain","cookiePath","requirement","isOpen","setIsOpen","updateCurrentConsents","useInternalState","instance","modalConfig","useModal","id","useId","role","title","useEffect","show","hide","onHide","on","off","document","navigator","cookieEnabled","functional","statistics","accept","selection","convertBooleanConsentObjectToConsentObject","selectionWithoutEmptyValues","Object","fromEntries","entries","filter","value","updatedConsent","setConsentCookie","consent","name","domain","path","ReactDOM","createPortal","jsxs","ModalContainer","container","children","jsx","ModalOverlay","overlay","Modal","component","modal","onSubmit","e","preventDefault","formData","FormData","currentTarget","newConsents","get","ModalHeader","ModalTitle","ModalBody","Flex","direction","gap","Link","href","target","ModalActions","Button","variant","type","onClick","body"],"mappings":"6lBAsBO,MAAMA,EAAgB,EACzBC,SAAAA,EACAC,SAAAA,EACAC,UAAAA,EAAY,iDACTC,MAEG,MACFC,eAAAA,EACAC,WAAAA,EACAC,aAAAA,EACAC,WAAAA,EACAC,YAAAA,EACAC,OAAAA,EACAC,UAAAA,EACAC,sBAAAA,GACAC,KAEGC,EAAUC,GAAeC,EAAS,CACrCC,GAAI,oBAAoBC,MAIxBC,KAAMlB,EAAW,cAAgB,SAGjCmB,MAAO,wBAkBP,GAhBJC,GAAU,KACFX,EACAI,GAAUQ,OAEVR,GAAUS,MAAK,GAEpB,CAACT,EAAUJ,IAEdW,GAAU,KACAG,MAAAA,EAAS,IAAMb,GAAU,GACrB,OAAAG,GAAAW,GAAG,OAAQD,GACd,KACOV,GAAAY,IAAI,OAAQF,EAAM,CAChC,GACD,CAACV,EAAUH,WAEHgB,SAAa,IACb,OAAA,KAIX,UAAWC,UAAc,MAAgBA,UAAUC,cAC/C,OAAI3B,GACSA,EAAA,CACL4B,WAAY,SACZC,WAAY,WAIb,KAGLC,MAAAA,EAAS,CACXC,EAAYC,EACR,CACIJ,YAAY,EACZC,YAAY,GAEhBtB,MAGJ,MAAM0B,EAA8BC,OAAOC,YACvCD,OAAOE,QAAQL,GAAWM,QACtB,EAAI,CAAAC,YAAkBA,EAAU,OAIlCC,EAA0B,IACzBpC,KACA8B,GAGUO,EAAA,CACbC,QAASF,EACTG,KAAMtC,EACNuC,OAAQtC,EACRuC,KAAMtC,IAGYI,IAEtBV,IAAWuC,GAEX3B,GAAUS,MAAK,EAmBnB,OAAOwB,EAASC,aACZC,EAACC,EAAA,IACOnC,EAAYoC,aACZ/C,EACJ,2BAA0BM,EAE1B0C,SAAA,CAACC,EAAAC,EAAA,IAAiBvC,EAAYwC,UAC7BF,EAAAG,EAAA,CAAMC,UAAU,UAAW1C,EAAY2C,MAAaC,SAvBRC,IACjDA,EAAEC,iBAEF,MAAMC,EAAW,IAAIC,SAASH,EAAEI,eAE1BC,EAAc/B,EAChB,CACIJ,WAA2C,SAA/BgC,EAASI,IAAI,cACzBnC,WAA2C,SAA/B+B,EAASI,IAAI,eAE7BzD,GAGJuB,EAAOiC,EAAW,EAWVb,SAAAH,EAAC,OACG,CAAAG,SAAA,CAAAC,EAACc,GACGf,SAACC,EAAAe,EAAA,IAAerD,EAAYK,MAAOgC,4DAItCiB,EACG,CAAAjB,SAAAH,EAACqB,GAAKC,UAAU,SAASC,IAAK,GAC1BpB,SAAA,CAAAC,EAAC,KAAED,SAKH,qKACC,IACG,CAAAA,SAAA,CAAAC,EAACoB,EAAK,CAAAC,KAAMvE,EAAWwE,OAAO,SAASvB,SAGvC,wDAAO,cAKlBwB,EACG,CAAAxB,SAAA,CAAAC,EAACwB,EAAA,CACGC,QAAQ,YACR,cAAY,gCACZC,KAAK,SACLC,QAAS,IAAMhD,IAClBoB,SAAA,qBAGDC,EAACwB,EAAA,CACGC,QAAQ,YACR,cAAY,2BACZC,KAAK,SACR3B,SAAA,wBAOjBzB,SAASsD,KACb"}
+{"version":3,"file":"CookieConsent.js","sources":["../../../../src/components/cookie-consent/CookieConsent.tsx"],"sourcesContent":["import React, { type FormEventHandler, useEffect, useId } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Button } from \"../button/Button.js\";\nimport { Flex } from \"../flex/index.js\";\nimport { Link } from \"../link/index.js\";\nimport {\n    Modal,\n    ModalActions,\n    ModalBody,\n    ModalContainer,\n    ModalHeader,\n    ModalOverlay,\n    ModalTitle,\n} from \"../modal/Modal.js\";\nimport { useModal } from \"../modal/useModal.js\";\nimport { useInternalState } from \"./CookieConsentContext.js\";\nimport {\n    convertBooleanConsentObjectToConsentObject,\n    setConsentCookie,\n} from \"./cookieConsentUtils.js\";\nimport type { Consent, CookieConsentProps } from \"./types.js\";\n\nexport const CookieConsent = ({\n    blocking,\n    onAccept,\n    aboutPage = \"https://www.fremtind.no/informasjonskapsler\",\n    ...rest\n}: CookieConsentProps): JSX.Element | null => {\n    const {\n        currentConsent,\n        cookieName,\n        cookieDomain,\n        cookiePath,\n        requirement,\n        isOpen,\n        setIsOpen,\n        updateCurrentConsents,\n    } = useInternalState();\n\n    const [instance, modalConfig] = useModal({\n        id: `jkl-cookie-modal-${useId()}`,\n        // The optional `role` attribute of the dialog element, either `dialog`\n        // (default) or `alertdialog` to make it a modal (preventing closing on\n        // click outside of ESC key).\n        role: blocking ? \"alertdialog\" : \"dialog\",\n        // The required dialog title, mandatory in the document\n        // to provide context to assistive technology.\n        title: \"Informasjonskapsler\",\n    });\n    useEffect(() => {\n        if (isOpen) {\n            instance?.show();\n        } else {\n            instance?.hide();\n        }\n    }, [instance, isOpen]);\n\n    useEffect(() => {\n        const onHide = () => setIsOpen(false);\n        instance?.on(\"hide\", onHide);\n        return () => {\n            instance?.off(\"hide\", onHide);\n        };\n    }, [instance, setIsOpen]);\n\n    if (typeof document === \"undefined\") {\n        return null;\n    }\n\n    // Cookies are disabled in the browser\n    if (typeof navigator !== \"undefined\" && !navigator.cookieEnabled) {\n        if (onAccept) {\n            onAccept({\n                functional: \"denied\",\n                statistics: \"denied\",\n            });\n        }\n\n        return null;\n    }\n\n    const accept = (\n        selection = convertBooleanConsentObjectToConsentObject(\n            {\n                functional: true,\n                statistics: true,\n            },\n            requirement,\n        ),\n    ) => {\n        const selectionWithoutEmptyValues = Object.fromEntries(\n            Object.entries(selection).filter(\n                ([, value]) => typeof value !== \"undefined\",\n            ),\n        );\n\n        const updatedConsent: Consent = {\n            ...currentConsent,\n            ...selectionWithoutEmptyValues,\n        };\n\n        setConsentCookie({\n            consent: updatedConsent,\n            name: cookieName,\n            domain: cookieDomain,\n            path: cookiePath,\n        });\n\n        updateCurrentConsents();\n\n        onAccept?.(updatedConsent);\n\n        instance?.hide();\n    };\n\n    const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {\n        e.preventDefault();\n\n        const formData = new FormData(e.currentTarget);\n\n        const newConsents = convertBooleanConsentObjectToConsentObject(\n            {\n                functional: formData.get(\"functional\") === \"true\",\n                statistics: formData.get(\"statistics\") === \"true\",\n            },\n            requirement,\n        );\n\n        accept(newConsents);\n    };\n\n    return ReactDOM.createPortal(\n        <ModalContainer\n            {...modalConfig.container}\n            {...rest}\n            data-cookie-consent-open={isOpen}\n        >\n            <ModalOverlay {...modalConfig.overlay} />\n            <Modal component=\"form\" {...modalConfig.modal} {...{ onSubmit }}>\n                <form>\n                    <ModalHeader>\n                        <ModalTitle {...modalConfig.title}>\n                            Får vi bruke valgfrie informasjonskapsler?\n                        </ModalTitle>\n                    </ModalHeader>\n                    <ModalBody>\n                        <Flex direction=\"column\" gap=\"m\">\n                            <p>\n                                Vi ønsker å samle anonym statistikk for å forstå\n                                hvordan nettsidene våre brukes. Det hjelper oss\n                                til å gjøre innhold og løsninger bedre og mer\n                                brukervennlige.\n                            </p>\n                            <p>\n                                <Link href={aboutPage} target=\"_blank\">\n                                    Les mer om hvilke informasjonskapsler vi\n                                    lagrer her\n                                </Link>\n                                .\n                            </p>\n                        </Flex>\n                    </ModalBody>\n                    <ModalActions>\n                        <Button\n                            variant=\"secondary\"\n                            data-testid=\"jkl-cookie-consent-godta-alle\"\n                            type=\"button\"\n                            onClick={() => accept()}\n                        >\n                            Ja, det er greit\n                        </Button>\n                        <Button\n                            variant=\"secondary\"\n                            data-testid=\"jkl-cookie-consent-godta\"\n                            type=\"submit\"\n                        >\n                            Nei takk\n                        </Button>\n                    </ModalActions>\n                </form>\n            </Modal>\n        </ModalContainer>,\n        document.body,\n    );\n};\n"],"names":["CookieConsent","blocking","onAccept","aboutPage","rest","currentConsent","cookieName","cookieDomain","cookiePath","requirement","isOpen","setIsOpen","updateCurrentConsents","useInternalState","instance","modalConfig","useModal","id","useId","role","title","useEffect","show","hide","onHide","on","off","document","navigator","cookieEnabled","functional","statistics","accept","selection","convertBooleanConsentObjectToConsentObject","selectionWithoutEmptyValues","Object","fromEntries","entries","filter","value","updatedConsent","setConsentCookie","consent","name","domain","path","ReactDOM","createPortal","jsxs","ModalContainer","container","children","jsx","ModalOverlay","overlay","Modal","component","modal","onSubmit","e","preventDefault","formData","FormData","currentTarget","newConsents","get","ModalHeader","ModalTitle","ModalBody","Flex","direction","gap","Link","href","target","ModalActions","Button","variant","type","onClick","body"],"mappings":"6lBAsBO,MAAMA,EAAgB,EACzBC,SAAAA,EACAC,SAAAA,EACAC,UAAAA,EAAY,iDACTC,MAEG,MACFC,eAAAA,EACAC,WAAAA,EACAC,aAAAA,EACAC,WAAAA,EACAC,YAAAA,EACAC,OAAAA,EACAC,UAAAA,EACAC,sBAAAA,GACAC,KAEGC,EAAUC,GAAeC,EAAS,CACrCC,GAAI,oBAAoBC,MAIxBC,KAAMlB,EAAW,cAAgB,SAGjCmB,MAAO,wBAkBP,GAhBJC,GAAU,KACFX,EACAI,GAAUQ,OAEVR,GAAUS,MAAK,GAEpB,CAACT,EAAUJ,IAEdW,GAAU,KACAG,MAAAA,EAAS,IAAMb,GAAU,GACrB,OAAAG,GAAAW,GAAG,OAAQD,GACd,KACOV,GAAAY,IAAI,OAAQF,EAAM,CAChC,GACD,CAACV,EAAUH,WAEHgB,SAAa,IACb,OAAA,KAIX,UAAWC,UAAc,MAAgBA,UAAUC,cAC/C,OAAI3B,GACSA,EAAA,CACL4B,WAAY,SACZC,WAAY,WAIb,KAGLC,MAAAA,EAAS,CACXC,EAAYC,EACR,CACIJ,YAAY,EACZC,YAAY,GAEhBtB,MAGJ,MAAM0B,EAA8BC,OAAOC,YACvCD,OAAOE,QAAQL,GAAWM,QACtB,EAAI,CAAAC,YAAkBA,EAAU,OAIlCC,EAA0B,IACzBpC,KACA8B,GAGUO,EAAA,CACbC,QAASF,EACTG,KAAMtC,EACNuC,OAAQtC,EACRuC,KAAMtC,IAGYI,IAEtBV,IAAWuC,GAEX3B,GAAUS,MAAK,EAmBnB,OAAOwB,EAASC,aACZC,EAACC,EAAA,IACOnC,EAAYoC,aACZ/C,EACJ,2BAA0BM,EAE1B0C,SAAA,CAACC,EAAAC,EAAA,IAAiBvC,EAAYwC,UAC7BF,EAAAG,EAAA,CAAMC,UAAU,UAAW1C,EAAY2C,MAAaC,SAvBRC,IACjDA,EAAEC,iBAEF,MAAMC,EAAW,IAAIC,SAASH,EAAEI,eAE1BC,EAAc/B,EAChB,CACIJ,WAA2C,SAA/BgC,EAASI,IAAI,cACzBnC,WAA2C,SAA/B+B,EAASI,IAAI,eAE7BzD,GAGJuB,EAAOiC,EAAW,EAWVb,SAAAH,EAAC,OACG,CAAAG,SAAA,CAAAC,EAACc,GACGf,SAACC,EAAAe,EAAA,IAAerD,EAAYK,MAAOgC,4DAItCiB,EACG,CAAAjB,SAAAH,EAACqB,GAAKC,UAAU,SAASC,IAAI,IACzBpB,SAAA,CAAAC,EAAC,KAAED,SAKH,qKACC,IACG,CAAAA,SAAA,CAAAC,EAACoB,EAAK,CAAAC,KAAMvE,EAAWwE,OAAO,SAASvB,SAGvC,wDAAO,cAKlBwB,EACG,CAAAxB,SAAA,CAAAC,EAACwB,EAAA,CACGC,QAAQ,YACR,cAAY,gCACZC,KAAK,SACLC,QAAS,IAAMhD,IAClBoB,SAAA,qBAGDC,EAACwB,EAAA,CACGC,QAAQ,YACR,cAAY,2BACZC,KAAK,SACR3B,SAAA,wBAOjBzB,SAASsD,KACb"}

package/build/es/components/flex/Flex.js

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import o from"react";import n from"../../core/tokens.js";import{SlotComponent as e}from"../../utilities/polymorphism/SlotComponent.js";const i=o.forwardRef((function(o,i){const{asChild:r,as:s="div",alignContent:a,alignItems:p,children:l,colGap:m,direction:c,gap:f,justifyContent:g,justifyItems:u,rowGap:j,wrap:y=!1,...d}=o,x=r?e:s,C={display:"flex",flexDirection:c,alignContent:a,alignItems:p,justifyContent:g,justifyItems:u,...y?{flexWrap:"wrap"}:{},...f?{gap:n.spacing[f]}:{},...m?{columnGap:n.spacing[m]}:{},...j?{rowGap:n.spacing[j]}:{}};return t(x,{ref:i,...d,style:{...C,...d.style},children:l})}));export{i as Flex};
+import{jsx as t}from"react/jsx-runtime";import{c as e}from"../../../clsx-BeLtu-UY.js";import{forwardRef as n}from"react";import{SlotComponent as i}from"../../utilities/polymorphism/SlotComponent.js";import{isResponsive as r}from"./types.js";const o=n((function(n,r){const{asChild:o,alignItems:l,alignContent:a,as:m="div",center:c=!1,className:p,direction:f="row",fill:$,gap:x="m",inline:u,justifyContent:g,layout:j={},textAlign:w,wrap:d="nowrap",...y}=n,C=o?i:m,h=s(x).flatMap((([t,e])=>{const[n,i=n]=e.trim().split(" ");return[`screen-${t}-row-gap-${n}`,`screen-${t}-col-gap-${i}`]})),v=s(j).map((([t,e])=>`screen-${t}-${e}`));return t(C,{...y,className:e("jkl-flex",!l||`align-items-${l}`,!a||`align-content-${a}`,!c||`center-${!0===c?"2xl":c}`,!$||"fill",!u||"inline-flex",!g||`justify-content-${g}`,!w||`text-align-${w}`,!d||`flex-wrap-${d}`,!f||`flex-direction-${f}`,...h,...v,p),ref:r})}));function s(t){return r(t)?Object.entries(t):[["small",t]]}export{o as Flex};
 //# sourceMappingURL=Flex.js.map

package/build/es/components/flex/Flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","sources":["../../../../src/components/flex/Flex.tsx"],"sourcesContent":["import React, { type CSSProperties } from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport { SlotComponent } from \"../../utilities/polymorphism/SlotComponent.js\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport type { FlexComponent, FlexProps } from \"./types.js\";\n\nexport const Flex = React.forwardRef(function Flex<\n    ElementType extends React.ElementType = \"div\",\n>(props: FlexProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        asChild,\n        as = \"div\",\n        alignContent,\n        alignItems,\n        children,\n        colGap,\n        direction,\n        gap,\n        justifyContent,\n        justifyItems,\n        rowGap,\n        wrap = false,\n        ...rest\n    } = props;\n    const Component = asChild ? SlotComponent : as;\n\n    const flexStyle: CSSProperties = {\n        display: \"flex\",\n        flexDirection: direction,\n        alignContent,\n        alignItems,\n        justifyContent,\n        justifyItems,\n        ...(wrap ? { flexWrap: \"wrap\" } : {}),\n        ...(gap ? { gap: tokens.spacing[gap] } : {}),\n        ...(colGap ? { columnGap: tokens.spacing[colGap] } : {}),\n        ...(rowGap ? { rowGap: tokens.spacing[rowGap] } : {}),\n    };\n\n    return (\n        <Component ref={ref} {...rest} style={{ ...flexStyle, ...rest.style }}>\n            {children}\n        </Component>\n    );\n}) as FlexComponent;\n"],"names":["Flex","React","forwardRef","props","ref","asChild","as","alignContent","alignItems","children","colGap","direction","gap","justifyContent","justifyItems","rowGap","wrap","rest","Component","SlotComponent","flexStyle","display","flexDirection","flexWrap","tokens","spacing","columnGap","jsx","style"],"mappings":"+KAMO,MAAMA,EAAOC,EAAMC,YAAW,SAEnCC,EAA+BC,GACvB,MACFC,QAAAA,EACAC,GAAAA,EAAK,MACLC,aAAAA,EACAC,WAAAA,EACAC,SAAAA,EACAC,OAAAA,EACAC,UAAAA,EACAC,IAAAA,EACAC,eAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,KAAAA,GAAO,KACJC,GACHd,EACEe,EAAYb,EAAUc,EAAgBb,EAEtCc,EAA2B,CAC7BC,QAAS,OACTC,cAAeX,EACfJ,aAAAA,EACAC,WAAAA,EACAK,eAAAA,EACAC,aAAAA,KACIE,EAAO,CAAEO,SAAU,QAAW,CAAC,KAC/BX,EAAM,CAAEA,IAAKY,EAAOC,QAAQb,IAAS,CAAC,KACtCF,EAAS,CAAEgB,UAAWF,EAAOC,QAAQf,IAAY,CAAC,KAClDK,EAAS,CAAEA,OAAQS,EAAOC,QAAQV,IAAY,CAAA,GAGtD,OACKY,EAAAT,EAAA,CAAUd,IAAAA,KAAca,EAAMW,MAAO,IAAKR,KAAcH,EAAKW,OACzDnB,SAAAA,GAGb"}
+{"version":3,"file":"Flex.js","sources":["../../../../src/components/flex/Flex.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { SlotComponent } from \"../../utilities/index.js\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport {\n    type Breakpoint,\n    type FlexComponent,\n    type FlexProps,\n    type Responsive,\n    isResponsive,\n} from \"./types.js\";\n\nexport const Flex = forwardRef(function Flex<\n    ElementType extends React.ElementType = \"div\",\n>(props: FlexProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        asChild,\n        alignItems,\n        alignContent,\n        as = \"div\",\n        center = false,\n        className,\n        direction = \"row\",\n        fill,\n        gap = \"m\",\n        inline,\n        justifyContent,\n        layout = {},\n        textAlign,\n        wrap = \"nowrap\",\n        ...rest\n    } = props;\n\n    const Tag = asChild ? SlotComponent : as;\n    const gaps = toObjectEntries(gap).flatMap(([breakpoint, gap]) => {\n        const [row, col = row] = gap.trim().split(\" \");\n        return [\n            `screen-${breakpoint}-row-gap-${row}`,\n            `screen-${breakpoint}-col-gap-${col}`,\n        ];\n    });\n    const layouts = toObjectEntries(layout).map(\n        ([breakpoint, layout]) => `screen-${breakpoint}-${layout}`, // Convert to number to convert 2.10 to 2.1 and false to 0\n    );\n\n    return (\n        <Tag\n            {...rest}\n            className={clsx(\n                \"jkl-flex\",\n                !alignItems || `align-items-${alignItems}`,\n                !alignContent || `align-content-${alignContent}`,\n                !center || `center-${center === true ? \"2xl\" : center}`,\n                !fill || \"fill\",\n                !inline || \"inline-flex\",\n                !justifyContent || `justify-content-${justifyContent}`,\n                !textAlign || `text-align-${textAlign}`,\n                !wrap || `flex-wrap-${wrap}`,\n                !direction || `flex-direction-${direction}`,\n                ...gaps,\n                ...layouts,\n                className,\n            )}\n            ref={ref}\n        />\n    );\n}) as FlexComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\n/**\n * Gjør en enkeltstående eller responsiv verdi om til et nøstet array,\n * der hvert indre array inneholder et breakpoint med tilhørende verdi.\n * @example `{ small: \"12\", large: \"64\" }` -> `[[\"small\", \"12\"], [\"large\", \"64\"]]`\n * @example `\"24\"` -> `[[\"small\", \"24\"]]`\n * @param value enkeltstående eller responsiv verdi\n * @returns nøstet array med breakpoints og verdier\n */\nfunction toObjectEntries<T>(value: T | Responsive<T>): [Breakpoint, T][] {\n    if (isResponsive(value)) {\n        return Object.entries(value) as [Breakpoint, T][];\n    }\n\n    return [[\"small\", value]];\n}\n"],"names":["Flex","forwardRef","props","ref","asChild","alignItems","alignContent","as","center","className","direction","fill","gap","inline","justifyContent","layout","textAlign","wrap","rest","Tag","SlotComponent","gaps","toObjectEntries","flatMap","breakpoint","row","col","trim","split","layouts","map","jsx","clsx","value","isResponsive","Object","entries"],"mappings":"iPAYO,MAAMA,EAAOC,GAAW,SAE7BC,EAA+BC,GACvB,MACFC,QAAAA,EACAC,WAAAA,EACAC,aAAAA,EACAC,GAAAA,EAAK,MACLC,OAAAA,GAAS,EACTC,UAAAA,EACAC,UAAAA,EAAY,MACZC,KAAAA,EACAC,IAAAA,EAAM,IACNC,OAAAA,EACAC,eAAAA,EACAC,OAAAA,EAAS,CAAC,EACVC,UAAAA,EACAC,KAAAA,EAAO,YACJC,GACHhB,EAEEiB,EAAMf,EAAUgB,EAAgBb,EAChCc,EAAOC,EAAgBV,GAAKW,SAAQ,EAAEC,EAAYZ,MAC9C,MAACa,EAAKC,EAAMD,GAAOb,EAAIe,OAAOC,MAAM,KACnC,MAAA,CACH,UAAUJ,aAAsBC,IAChC,UAAUD,aAAsBE,IACpC,IAEEG,EAAUP,EAAgBP,GAAQe,KACpC,EAAEN,EAAYT,KAAY,UAAUS,KAAcT,MAIlD,OAAAgB,EAACZ,EAAA,IACOD,EACJT,UAAWuB,EACP,YACC3B,GAAc,eAAeA,KAC7BC,GAAgB,iBAAiBA,KACjCE,GAAU,WAAqB,IAAXA,EAAkB,MAAQA,KAC9CG,GAAQ,QACRE,GAAU,eACVC,GAAkB,mBAAmBA,KACrCE,GAAa,cAAcA,KAC3BC,GAAQ,aAAaA,KACrBP,GAAa,kBAAkBA,OAC7BW,KACAQ,EACHpB,GAEJN,IAAAA,GAGZ,IAUA,SAASmB,EAAmBW,GACpBC,OAAAA,EAAaD,GACNE,OAAOC,QAAQH,GAGnB,CAAC,CAAC,QAASA,GACtB"}

package/build/es/components/flex/types.d.ts

@@ -1,14 +1,28 @@
-import { default as React, CSSProperties } from 'react';
+import { default as React } from 'react';
 import { default as tokens } from '../../core/tokens.js';
 import { AsChildProps } from '../../utilities/polymorphism/as-child.js';
 import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphism.js';
-export type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
-export type GapValue = Exclude<keyof (typeof tokens)["spacing"], 0>;
-export type FlexProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<ElementType, {
-    direction?: FlexDirection;
-    wrap?: boolean;
-    gap?: GapValue;
-    colGap?: GapValue;
-    rowGap?: GapValue;
-} & Pick<CSSProperties, "alignContent" | "alignItems" | "justifyContent" | "justifyItems">>;
+export type Spacing = keyof typeof tokens.semanticSpacing;
+export type Breakpoint = keyof typeof tokens.breakpoint;
+export type Responsive<T> = Partial<Record<Breakpoint, T>>;
+export declare function isResponsive<T>(value: unknown): value is Responsive<T>;
+export declare const LAYOUTS: readonly ["auto", "1", "2", "3", "4", "6", "4.8", "8.4", "2.10", "10.2", "3.9", "9.3", "5.7", "7.5"];
+export type Layout = (typeof LAYOUTS)[number];
+export type Center = "m" | "l" | "xl" | "2xl" | boolean;
+export type Gap = `${Spacing}` | `${Spacing} ${Spacing}`;
+type FlexBaseProps = {
+    alignItems?: "normal" | "start" | "center" | "end" | "baseline" | "stretch";
+    alignContent?: "normal" | "start" | "center" | "end" | "stretch" | "baseline" | "space-between" | "space-around" | "space-evenly";
+    center?: Center;
+    direction?: "row" | "column" | "row-reverse" | "column-reverse";
+    fill?: boolean;
+    gap?: Gap | Responsive<Gap>;
+    inline?: boolean;
+    textAlign?: "left" | "right" | "center";
+    justifyContent?: "normal" | "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
+    layout?: Layout | Responsive<Layout>;
+    wrap?: "wrap" | "nowrap" | "reverse";
+};
+export type FlexProps<As extends React.ElementType = "div"> = PolymorphicPropsWithRef<As, FlexBaseProps>;
 export type FlexComponent = <ElementType extends React.ElementType = "div">(props: FlexProps<ElementType> & AsChildProps) => React.ReactElement | null;
+export {};

package/build/es/components/flex/types.js

@@ -1,2 +1,2 @@
-import"react";
+import"react";import e from"../../core/tokens.js";function t(t){return Object.keys(e.breakpoint).includes(Object.keys(t)[0])}const o=["auto","1","2","3","4","6","4.8","8.4","2.10","10.2","3.9","9.3","5.7","7.5"];export{o as LAYOUTS,t as isResponsive};
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"types.js","sources":["../../../../src/components/flex/types.ts"],"sourcesContent":["import React from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport type { AsChildProps } from \"../../utilities/polymorphism/as-child.js\";\nimport type { PolymorphicPropsWithRef } from \"../../utilities/polymorphism/polymorphism.js\";\n\nexport type Spacing = keyof typeof tokens.semanticSpacing;\nexport type Breakpoint = keyof typeof tokens.breakpoint;\n\nexport type Responsive<T> = Partial<Record<Breakpoint, T>>;\nexport function isResponsive<T>(value: unknown): value is Responsive<T> {\n    return Object.keys(tokens.breakpoint).includes(\n        Object.keys(value as Responsive<T>)[0],\n    );\n}\n\nexport const LAYOUTS = [\n    \"auto\",\n    \"1\",\n    \"2\",\n    \"3\",\n    \"4\",\n    \"6\",\n    \"4.8\",\n    \"8.4\",\n    \"2.10\",\n    \"10.2\",\n    \"3.9\",\n    \"9.3\",\n    \"5.7\",\n    \"7.5\",\n] as const;\n\nexport type Layout = (typeof LAYOUTS)[number];\nexport type Center = \"m\" | \"l\" | \"xl\" | \"2xl\" | boolean;\nexport type Gap = `${Spacing}` | `${Spacing} ${Spacing}`;\n\ntype FlexBaseProps = {\n    alignItems?: \"normal\" | \"start\" | \"center\" | \"end\" | \"baseline\" | \"stretch\";\n    alignContent?:\n        | \"normal\"\n        | \"start\"\n        | \"center\"\n        | \"end\"\n        | \"stretch\"\n        | \"baseline\"\n        | \"space-between\"\n        | \"space-around\"\n        | \"space-evenly\";\n    center?: Center;\n    direction?: \"row\" | \"column\" | \"row-reverse\" | \"column-reverse\";\n    fill?: boolean;\n    gap?: Gap | Responsive<Gap>;\n    inline?: boolean;\n    textAlign?: \"left\" | \"right\" | \"center\";\n    justifyContent?:\n        | \"normal\"\n        | \"start\"\n        | \"center\"\n        | \"end\"\n        | \"space-between\"\n        | \"space-around\"\n        | \"space-evenly\";\n    layout?: Layout | Responsive<Layout>;\n    wrap?: \"wrap\" | \"nowrap\" | \"reverse\";\n};\n\nexport type FlexProps<As extends React.ElementType = \"div\"> =\n    PolymorphicPropsWithRef<As, FlexBaseProps>;\n\nexport type FlexComponent = <ElementType extends React.ElementType = \"div\">(\n    props: FlexProps<ElementType> & AsChildProps,\n) => React.ReactElement | null;\n"],"names":["isResponsive","value","Object","keys","tokens","breakpoint","includes","LAYOUTS"],"mappings":"kDASO,SAASA,EAAgBC,GAC5B,OAAOC,OAAOC,KAAKC,EAAOC,YAAYC,SAClCJ,OAAOC,KAAKF,GAAwB,GAE5C,CAEO,MAAMM,EAAU,CACnB,OACA,IACA,IACA,IACA,IACA,IACA,MACA,MACA,OACA,OACA,MACA,MACA,MACA"}

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

@@ -1,3 +1,5 @@
 export { Select } from './Select.js';
 export { NativeSelect } from './NativeSelect.js';
 export type { SelectProps, SelectChangeEventHandler, SelectPartialChangeEvent, NativeSelectProps, } from './types.js';
+export { Select as BETA_Select } from '../../components-beta/select/Select.js';
+export type { SelectProps as BETA_SelectProps } from '../../components-beta/select/types.js';

package/build/es/components/select/index.js

@@ -1,2 +1,2 @@
-import{Select as e}from"./Select.js";import{NativeSelect as t}from"./NativeSelect.js";export{t as NativeSelect,e as Select};
+import{Select as e}from"./Select.js";import{NativeSelect as t}from"./NativeSelect.js";import{Select as c}from"../../components-beta/select/Select.js";export{c as BETA_Select,t as NativeSelect,e as Select};
 //# sourceMappingURL=index.js.map

package/build/es/components-beta/select/Select.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { SelectProps } from './types.js';
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;

package/build/es/components-beta/select/Select.js

@@ -0,0 +1,2 @@
+import{jsx as o,jsxs as n}from"react/jsx-runtime";import{c}from"../../../clsx-BeLtu-UY.js";import{forwardRef as s}from"react";import"../../components/icon/Icon.js";import"../../components/icon/icons/animated/ArrowVerticalAnimated.js";import"../../components/icon/icons/animated/ArrowHorizontalAnimated.js";import"../../components/icon/icons/animated/PlusRemoveAnimated.js";import{ArrowDownIcon as i}from"../../components/icon/icons/ArrowDownIcon.js";import"../../components/icon/icons/ArrowLeftIcon.js";import"../../components/icon/icons/ArrowNorthEastIcon.js";import"../../components/icon/icons/ArrowRightIcon.js";import"../../components/icon/icons/ArrowUpIcon.js";import"../../components/icon/icons/CalendarIcon.js";import"../../components/icon/icons/CheckIcon.js";import"../../components/icon/icons/ChevronDownIcon.js";import"../../components/icon/icons/ChevronLeftIcon.js";import"../../components/icon/icons/ChevronRightIcon.js";import"../../components/icon/icons/ChevronUpIcon.js";import"../../components/icon/icons/CloseIcon.js";import"../../components/icon/icons/CopyIcon.js";import"../../components/icon/icons/DotsIcon.js";import"../../components/icon/icons/DragIcon.js";import"../../components/icon/icons/ErrorIcon.js";import"../../components/icon/icons/GreenCheckIcon.js";import"../../components/icon/icons/HamburgerIcon.js";import"../../components/icon/icons/InfoIcon.js";import"../../components/icon/icons/LinkIcon.js";import"../../components/icon/icons/MinusIcon.js";import"../../components/icon/icons/OpenInNewIcon.js";import"../../components/icon/icons/PenIcon.js";import"../../components/icon/icons/PlusIcon.js";import"../../components/icon/icons/QuestionIcon.js";import"../../components/icon/icons/RedCrossIcon.js";import"../../components/icon/icons/SearchIcon.js";import"../../components/icon/icons/SuccessIcon.js";import"../../components/icon/icons/ThumbDownIcon.js";import"../../components/icon/icons/ThumbUpIcon.js";import"../../components/icon/icons/TrashCanIcon.js";import"../../components/icon/icons/WarningIcon.js";import{InputGroup as t}from"../../components/input-group/InputGroup.js";const e=s((s=>{const{label:e,className:r,density:p,errorLabel:m,helpLabel:a,labelProps:l,placeholder:j="Velg",supportLabelProps:I,tooltip:d,value:u,description:h,...b}=s;return o(t,{label:e,density:p,errorLabel:m,helpLabel:a,labelProps:l,supportLabelProps:I,tooltip:d,description:h,"data-testid":"jkl-select--beta",className:c("jkl-select--beta",r),render:c=>n("div",{className:"jkl-select--beta-wrapper",children:[n("select",{defaultValue:u?void 0:"",value:u,...c,...b,children:[j&&o("option",{disabled:!0,selected:!0,value:"",children:j}),s.children]}),o(i,{variant:"medium"})]})})}));export{e as Select};
+//# sourceMappingURL=Select.js.map

package/build/es/components-beta/select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../../src/components-beta/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { ArrowDownIcon } from \"../../components/icon/index.js\";\nimport { InputGroup } from \"../../components/input-group/InputGroup.js\";\nimport type { SelectProps } from \"./types.js\";\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>((props) => {\n    const {\n        label,\n        className,\n        density,\n        errorLabel,\n        helpLabel,\n        labelProps,\n        placeholder = \"Velg\",\n        supportLabelProps,\n        tooltip,\n        value,\n        description,\n        ...rest\n    } = props;\n\n    const inputGroupProps = {\n        label,\n        density,\n        errorLabel,\n        helpLabel,\n        labelProps,\n        supportLabelProps,\n        tooltip,\n        description,\n    };\n\n    return (\n        <InputGroup\n            {...inputGroupProps}\n            data-testid=\"jkl-select--beta\"\n            className={clsx(\"jkl-select--beta\", className)}\n            render={(inputProps) => (\n                <div className=\"jkl-select--beta-wrapper\">\n                    <select\n                        defaultValue={value ? undefined : \"\"}\n                        value={value}\n                        {...inputProps}\n                        {...rest}\n                    >\n                        {placeholder && (\n                            <option disabled selected value=\"\">\n                                {placeholder}\n                            </option>\n                        )}\n                        {props.children}\n                    </select>\n                    <ArrowDownIcon variant=\"medium\" />\n                </div>\n            )}\n        />\n    );\n});\n"],"names":["Select","forwardRef","props","label","className","density","errorLabel","helpLabel","labelProps","placeholder","supportLabelProps","tooltip","value","description","rest","jsx","InputGroup","clsx","render","inputProps","jsxs","children","defaultValue","disabled","selected","ArrowDownIcon","variant"],"mappings":"gkEAMa,MAAAA,EAASC,GAA4CC,IACxD,MACFC,MAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,YAAAA,EAAc,OACdC,kBAAAA,EACAC,QAAAA,EACAC,MAAAA,EACAC,YAAAA,KACGC,GACHZ,EAcA,OAAAa,EAACC,EAAA,CAXDb,MAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAE,kBAAAA,EACAC,QAAAA,EACAE,YAAAA,EAMI,cAAY,mBACZT,UAAWa,EAAK,mBAAoBb,GACpCc,OAASC,GACJC,EAAA,MAAA,CAAIhB,UAAU,2BACXiB,SAAA,CAAAD,EAAC,SAAA,CACGE,aAAcV,OAAQ,EAAY,GAClCA,MAAAA,KACIO,KACAL,EAEHO,SAAA,CACGZ,GAAAM,EAAC,UAAOQ,UAAQ,EAACC,UAAQ,EAACZ,MAAM,GAC3BS,SACLZ,IAEHP,EAAMmB,YAEXN,EAACU,EAAc,CAAAC,QAAQ,eAGnC"}

package/build/es/components-beta/select/index.d.ts

@@ -0,0 +1,2 @@
+export { Select as BETA_Select } from './Select.js';
+export type { SelectProps } from './types.js';

package/build/es/components-beta/select/index.js

@@ -0,0 +1,2 @@
+import{Select as e}from"./Select.js";export{e as BETA_Select};
+//# sourceMappingURL=index.js.map

package/build/es/components-beta/select/index.js.map

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

package/build/es/components-beta/select/types.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode, SelectHTMLAttributes } from 'react';
+import { InputGroupProps } from '../../components/input-group/types.js';
+export interface SelectProps extends Omit<InputGroupProps, "children" | "inline">, SelectHTMLAttributes<HTMLSelectElement> {
+    /**
+     * Setter inn et placeholderelement som vises når ingenting er valgt i nedtrekkslisten.
+     * @default "Velg"
+     */
+    placeholder?: string;
+    children: ReactNode | ReactNode[];
+}

package/build/es/components-beta/select/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/build/es/components-beta/select/types.js.map

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

package/build/es/core/tokens/style-dictionary/config.js

@@ -1,2 +1,2 @@
-const s="jkl",t={source:["src/core/tokens/legacy/*.json"],platforms:{ts:{transformGroup:"typescript",buildPath:"./src/core/",files:[{destination:"tokens.ts",format:"javascript/esm",filter:s=>!s.filePath.includes("color.legacy")}]},scss:{transformGroup:"scss",buildPath:"./src/core/jkl/",files:[{destination:"_legacy-tokens.scss",format:"scss/theme-variables"}]},css:{transformGroup:"css",buildPath:"./src/core/styles/theme/",files:[{destination:"_legacy-tokens.scss",format:"css/theme-variables",filter:s=>!s.filePath.includes("semantic")},{destination:"_legacy-color-tokens.scss",format:"css/dynamic-color-variables",filter:s=>s.filePath.includes("semantic")}]},tailwind:{transformGroup:"css",buildPath:"src/tailwind/",files:[{destination:"colors.ts",format:"tailwindcss/colors",filter:s=>s.path.includes("light")}]}}},e={source:["src/core/tokens/!(legacy)/*.json"],platforms:{scss:{transformGroup:"scss",buildPath:"./src/core/jkl/",files:[{destination:"_tokens.scss",format:"scss/theme-variables",filter:s=>"spacing"===s.type||["border","text","background"].includes("string"==typeof s.attributes?.type?s.attributes.type:"")}]},css:{transformGroup:"css",buildPath:"./src/core/styles/theme/",files:[{destination:"_tokens.scss",format:"css/theme-variables",filter:s=>"spacing"===s.type},{destination:"_color-tokens.scss",format:"css/dynamic-color-variables",filter:"isColor"},{destination:"_spacing-tokens.scss",format:"css/theme-variables",filter:"isSpacing"}]}}};export{s as PREFIX,e as designTokensConfig,t as legacyDesignTokensConfig};
+const s="jkl",t={source:["src/core/tokens/legacy/*.json"],platforms:{ts:{transformGroup:"typescript",buildPath:"./src/core/",files:[{destination:"tokens.ts",format:"javascript/esm",filter:s=>!s.filePath.includes("color.legacy")}]},scss:{transformGroup:"scss",buildPath:"./src/core/jkl/legacy/",files:[{destination:"_dynamic-colors.scss",format:"scss/theme-variables",filter:s=>s.path.some((s=>["light","dark"].includes(s)))},{destination:"_tokens.scss",format:"scss/map-deep",filter:s=>!s.path.some((s=>["light","dark"].includes(s)))}]},css:{transformGroup:"css",buildPath:"./src/core/styles/theme/",files:[{destination:"_legacy-tokens.scss",format:"css/theme-variables",filter:s=>!s.filePath.includes("semantic")},{destination:"_legacy-color-tokens.scss",format:"css/dynamic-color-variables",filter:s=>s.filePath.includes("semantic")}]},tailwind:{transformGroup:"css",buildPath:"src/tailwind/",files:[{destination:"colors.ts",format:"tailwindcss/colors",filter:s=>s.path.includes("light")}]}}},e={source:["src/core/tokens/!(legacy)/*.json"],platforms:{scss:{transformGroup:"scss",buildPath:"./src/core/jkl/",files:[{destination:"_tokens.scss",format:"scss/theme-variables",filter:s=>"spacing"===s.type||["border","text","background"].includes("string"==typeof s.attributes?.type?s.attributes.type:"")}]},css:{transformGroup:"css",buildPath:"./src/core/styles/theme/",files:[{destination:"_tokens.scss",format:"css/theme-variables",filter:s=>"spacing"===s.type},{destination:"_color-tokens.scss",format:"css/dynamic-color-variables",filter:"isColor"},{destination:"_spacing-tokens.scss",format:"css/theme-variables",filter:"isSpacing"}]}}};export{s as PREFIX,e as designTokensConfig,t as legacyDesignTokensConfig};
 //# sourceMappingURL=config.js.map

package/build/es/core/tokens/style-dictionary/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../../../src/core/tokens/style-dictionary/config.ts"],"sourcesContent":["import type { Config, DesignToken } from \"style-dictionary/types\";\n\nexport const PREFIX = \"jkl\";\n\nexport const legacyDesignTokensConfig: Config = {\n    source: [\"src/core/tokens/legacy/*.json\"],\n    platforms: {\n        ts: {\n            transformGroup: \"typescript\",\n            buildPath: \"./src/core/\",\n            files: [\n                {\n                    destination: \"tokens.ts\",\n                    format: \"javascript/esm\",\n                    filter: (token: DesignToken) =>\n                        !token.filePath.includes(\"color.legacy\"),\n                },\n            ],\n        },\n        scss: {\n            transformGroup: \"scss\",\n            buildPath: \"./src/core/jkl/\",\n            files: [\n                {\n                    destination: \"_legacy-tokens.scss\",\n                    format: \"scss/theme-variables\",\n                },\n            ],\n        },\n        css: {\n            transformGroup: \"css\",\n            buildPath: \"./src/core/styles/theme/\",\n            files: [\n                {\n                    destination: \"_legacy-tokens.scss\",\n                    format: \"css/theme-variables\",\n                    filter: (token: DesignToken) =>\n                        !token.filePath.includes(\"semantic\"),\n                },\n                {\n                    destination: \"_legacy-color-tokens.scss\",\n                    format: \"css/dynamic-color-variables\",\n                    filter: (token: DesignToken) =>\n                        token.filePath.includes(\"semantic\"),\n                },\n            ],\n        },\n        tailwind: {\n            transformGroup: \"css\",\n            buildPath: \"src/tailwind/\",\n            files: [\n                {\n                    destination: \"colors.ts\",\n                    format: \"tailwindcss/colors\",\n                    filter: (token: DesignToken) =>\n                        token.path.includes(\"light\"),\n                },\n            ],\n        },\n    },\n};\n\nexport const designTokensConfig: Config = {\n    source: [\"src/core/tokens/!(legacy)/*.json\"],\n    platforms: {\n        scss: {\n            transformGroup: \"scss\",\n            buildPath: \"./src/core/jkl/\",\n            files: [\n                {\n                    destination: \"_tokens.scss\",\n                    format: \"scss/theme-variables\",\n                    filter: (token: DesignToken) =>\n                        token.type === \"spacing\" ||\n                        [\"border\", \"text\", \"background\"].includes(\n                            typeof token.attributes?.type === \"string\"\n                                ? token.attributes.type\n                                : \"\",\n                        ),\n                },\n            ],\n        },\n        css: {\n            transformGroup: \"css\",\n            buildPath: \"./src/core/styles/theme/\",\n            files: [\n                {\n                    destination: \"_tokens.scss\",\n                    format: \"css/theme-variables\",\n                    filter: (token: DesignToken) => token.type === \"spacing\",\n                },\n                {\n                    destination: \"_color-tokens.scss\",\n                    format: \"css/dynamic-color-variables\",\n                    filter: \"isColor\",\n                },\n                {\n                    destination: \"_spacing-tokens.scss\",\n                    format: \"css/theme-variables\",\n                    filter: \"isSpacing\",\n                },\n            ],\n        },\n    },\n};\n"],"names":["PREFIX","legacyDesignTokensConfig","source","platforms","ts","transformGroup","buildPath","files","destination","format","filter","token","filePath","includes","scss","css","tailwind","path","designTokensConfig","type","attributes"],"mappings":"AAEO,MAAMA,EAAS,MAETC,EAAmC,CAC5CC,OAAQ,CAAC,iCACTC,UAAW,CACPC,GAAI,CACAC,eAAgB,aAChBC,UAAW,cACXC,MAAO,CACH,CACIC,YAAa,YACbC,OAAQ,iBACRC,OAASC,IACJA,EAAMC,SAASC,SAAS,mBAIzCC,KAAM,CACFT,eAAgB,OAChBC,UAAW,kBACXC,MAAO,CACH,CACIC,YAAa,sBACbC,OAAQ,0BAIpBM,IAAK,CACDV,eAAgB,MAChBC,UAAW,2BACXC,MAAO,CACH,CACIC,YAAa,sBACbC,OAAQ,sBACRC,OAASC,IACJA,EAAMC,SAASC,SAAS,aAEjC,CACIL,YAAa,4BACbC,OAAQ,8BACRC,OAASC,GACLA,EAAMC,SAASC,SAAS,eAIxCG,SAAU,CACNX,eAAgB,MAChBC,UAAW,gBACXC,MAAO,CACH,CACIC,YAAa,YACbC,OAAQ,qBACRC,OAASC,GACLA,EAAMM,KAAKJ,SAAS,cAO/BK,EAA6B,CACtChB,OAAQ,CAAC,oCACTC,UAAW,CACPW,KAAM,CACFT,eAAgB,OAChBC,UAAW,kBACXC,MAAO,CACH,CACIC,YAAa,eACbC,OAAQ,uBACRC,OAASC,GACU,YAAfA,EAAMQ,MACN,CAAC,SAAU,OAAQ,cAAcN,SACK,iBAA3BF,EAAMS,YAAYD,KACnBR,EAAMS,WAAWD,KACjB,OAK1BJ,IAAK,CACDV,eAAgB,MAChBC,UAAW,2BACXC,MAAO,CACH,CACIC,YAAa,eACbC,OAAQ,sBACRC,OAASC,GAAsC,YAAfA,EAAMQ,MAE1C,CACIX,YAAa,qBACbC,OAAQ,8BACRC,OAAQ,WAEZ,CACIF,YAAa,uBACbC,OAAQ,sBACRC,OAAQ"}
+{"version":3,"file":"config.js","sources":["../../../../../src/core/tokens/style-dictionary/config.ts"],"sourcesContent":["import type { Config, DesignToken } from \"style-dictionary/types\";\n\nexport const PREFIX = \"jkl\";\n\nexport const legacyDesignTokensConfig: Config = {\n    source: [\"src/core/tokens/legacy/*.json\"],\n    platforms: {\n        ts: {\n            transformGroup: \"typescript\",\n            buildPath: \"./src/core/\",\n            files: [\n                {\n                    destination: \"tokens.ts\",\n                    format: \"javascript/esm\",\n                    filter: (token: DesignToken) =>\n                        !token.filePath.includes(\"color.legacy\"),\n                },\n            ],\n        },\n        scss: {\n            transformGroup: \"scss\",\n            buildPath: \"./src/core/jkl/legacy/\",\n            files: [\n                {\n                    destination: \"_dynamic-colors.scss\",\n                    format: \"scss/theme-variables\",\n                    filter: (token) =>\n                        token.path.some((word) =>\n                            [\"light\", \"dark\"].includes(word),\n                        ),\n                },\n                {\n                    destination: \"_tokens.scss\",\n                    format: \"scss/map-deep\",\n                    filter: (token) =>\n                        !token.path.some((word) =>\n                            [\"light\", \"dark\"].includes(word),\n                        ),\n                },\n            ],\n        },\n        css: {\n            transformGroup: \"css\",\n            buildPath: \"./src/core/styles/theme/\",\n            files: [\n                {\n                    destination: \"_legacy-tokens.scss\",\n                    format: \"css/theme-variables\",\n                    filter: (token: DesignToken) =>\n                        !token.filePath.includes(\"semantic\"),\n                },\n                {\n                    destination: \"_legacy-color-tokens.scss\",\n                    format: \"css/dynamic-color-variables\",\n                    filter: (token: DesignToken) =>\n                        token.filePath.includes(\"semantic\"),\n                },\n            ],\n        },\n        tailwind: {\n            transformGroup: \"css\",\n            buildPath: \"src/tailwind/\",\n            files: [\n                {\n                    destination: \"colors.ts\",\n                    format: \"tailwindcss/colors\",\n                    filter: (token: DesignToken) =>\n                        token.path.includes(\"light\"),\n                },\n            ],\n        },\n    },\n};\n\nexport const designTokensConfig: Config = {\n    source: [\"src/core/tokens/!(legacy)/*.json\"],\n    platforms: {\n        scss: {\n            transformGroup: \"scss\",\n            buildPath: \"./src/core/jkl/\",\n            files: [\n                {\n                    destination: \"_tokens.scss\",\n                    format: \"scss/theme-variables\",\n                    filter: (token: DesignToken) =>\n                        token.type === \"spacing\" ||\n                        [\"border\", \"text\", \"background\"].includes(\n                            typeof token.attributes?.type === \"string\"\n                                ? token.attributes.type\n                                : \"\",\n                        ),\n                },\n            ],\n        },\n        css: {\n            transformGroup: \"css\",\n            buildPath: \"./src/core/styles/theme/\",\n            files: [\n                {\n                    destination: \"_tokens.scss\",\n                    format: \"css/theme-variables\",\n                    filter: (token: DesignToken) => token.type === \"spacing\",\n                },\n                {\n                    destination: \"_color-tokens.scss\",\n                    format: \"css/dynamic-color-variables\",\n                    filter: \"isColor\",\n                },\n                {\n                    destination: \"_spacing-tokens.scss\",\n                    format: \"css/theme-variables\",\n                    filter: \"isSpacing\",\n                },\n            ],\n        },\n    },\n};\n"],"names":["PREFIX","legacyDesignTokensConfig","source","platforms","ts","transformGroup","buildPath","files","destination","format","filter","token","filePath","includes","scss","path","some","word","css","tailwind","designTokensConfig","type","attributes"],"mappings":"AAEO,MAAMA,EAAS,MAETC,EAAmC,CAC5CC,OAAQ,CAAC,iCACTC,UAAW,CACPC,GAAI,CACAC,eAAgB,aAChBC,UAAW,cACXC,MAAO,CACH,CACIC,YAAa,YACbC,OAAQ,iBACRC,OAASC,IACJA,EAAMC,SAASC,SAAS,mBAIzCC,KAAM,CACFT,eAAgB,OAChBC,UAAW,yBACXC,MAAO,CACH,CACIC,YAAa,uBACbC,OAAQ,uBACRC,OAASC,GACLA,EAAMI,KAAKC,MAAMC,GACb,CAAC,QAAS,QAAQJ,SAASI,MAGvC,CACIT,YAAa,eACbC,OAAQ,gBACRC,OAASC,IACJA,EAAMI,KAAKC,MAAMC,GACd,CAAC,QAAS,QAAQJ,SAASI,QAK/CC,IAAK,CACDb,eAAgB,MAChBC,UAAW,2BACXC,MAAO,CACH,CACIC,YAAa,sBACbC,OAAQ,sBACRC,OAASC,IACJA,EAAMC,SAASC,SAAS,aAEjC,CACIL,YAAa,4BACbC,OAAQ,8BACRC,OAASC,GACLA,EAAMC,SAASC,SAAS,eAIxCM,SAAU,CACNd,eAAgB,MAChBC,UAAW,gBACXC,MAAO,CACH,CACIC,YAAa,YACbC,OAAQ,qBACRC,OAASC,GACLA,EAAMI,KAAKF,SAAS,cAO/BO,EAA6B,CACtClB,OAAQ,CAAC,oCACTC,UAAW,CACPW,KAAM,CACFT,eAAgB,OAChBC,UAAW,kBACXC,MAAO,CACH,CACIC,YAAa,eACbC,OAAQ,uBACRC,OAASC,GACU,YAAfA,EAAMU,MACN,CAAC,SAAU,OAAQ,cAAcR,SACK,iBAA3BF,EAAMW,YAAYD,KACnBV,EAAMW,WAAWD,KACjB,OAK1BH,IAAK,CACDb,eAAgB,MAChBC,UAAW,2BACXC,MAAO,CACH,CACIC,YAAa,eACbC,OAAQ,sBACRC,OAASC,GAAsC,YAAfA,EAAMU,MAE1C,CACIb,YAAa,qBACbC,OAAQ,8BACRC,OAAQ,WAEZ,CACIF,YAAa,uBACbC,OAAQ,sBACRC,OAAQ"}

package/build/es/core/tokens/style-dictionary/formats/scss-theme-variables.js

@@ -1,2 +1,2 @@
-import{fileHeader as a,formattedVariables as e}from"style-dictionary/utils";import{PREFIX as r}from"../config.js";const s={name:"scss/theme-variables",format:async({dictionary:s,file:i})=>{const t=await a({file:i}),l=s.allTokens.filter((a=>!a.path.some((a=>["light","dark"].includes(a))))),n=s.allTokens.filter((a=>a.path.includes("light"))).map((a=>({...a,value:`var(--${r}-${a.name})`})));return`${t}\n${e({format:"sass",dictionary:{...s,allTokens:l}})}\n\n// Dynamiske variabler for farge, via referanse til CSS-variabler\n${e({format:"sass",dictionary:{...s,allTokens:n}})}`}};export{s as default};
+import{commentStyles as a}from"style-dictionary/enums";import{fileHeader as e,formattedVariables as s}from"style-dictionary/utils";import{PREFIX as t}from"../config.js";const r={name:"scss/theme-variables",format:async({dictionary:r,file:i})=>{const l=await e({file:i,commentStyle:a.short}),o=r.allTokens.filter((a=>!a.path.some((a=>["light","dark"].includes(a))))),n=r.allTokens.filter((a=>a.path.includes("light"))).map((a=>({...a,value:`var(--${t}-${a.name})`})));return`${l}\n${s({format:"sass",dictionary:{...r,allTokens:o}})}\n\n// Dynamiske variabler for farge, via referanse til CSS-variabler\n${s({format:"sass",dictionary:{...r,allTokens:n}})}`}};export{r as default};
 //# sourceMappingURL=scss-theme-variables.js.map

package/build/es/core/tokens/style-dictionary/formats/scss-theme-variables.js.map

@@ -1 +1 @@
-{"version":3,"file":"scss-theme-variables.js","sources":["../../../../../../src/core/tokens/style-dictionary/formats/scss-theme-variables.ts"],"sourcesContent":["import { fileHeader, formattedVariables } from \"style-dictionary/utils\";\nimport { PREFIX } from \"../config.js\";\nimport type { Dictionary, File, Format } from \"style-dictionary/types\";\n\nconst scssThemeVariablesFormat: Format = {\n    name: \"scss/theme-variables\",\n    format: async ({\n        dictionary,\n        file,\n    }: { dictionary: Dictionary; file: File }) => {\n        const header = await fileHeader({ file });\n        const staticColorTokens = dictionary.allTokens.filter(\n            (token) =>\n                !token.path.some((word) => [\"light\", \"dark\"].includes(word)),\n        );\n\n        // Bruker 'light' som kilde for å unngå duplikater\n        const uniqueColorTokens = dictionary.allTokens.filter((token) =>\n            token.path.includes(\"light\"),\n        );\n\n        const dynamicColorTokens = uniqueColorTokens.map((token) => {\n            return {\n                ...token,\n                value: `var(--${PREFIX}-${token.name})`,\n            };\n        });\n\n        const staticColorVariables = formattedVariables({\n            format: \"sass\",\n            dictionary: { ...dictionary, allTokens: staticColorTokens },\n        });\n\n        const dynamicColorVariables = formattedVariables({\n            format: \"sass\",\n            dictionary: { ...dictionary, allTokens: dynamicColorTokens },\n        });\n\n        return `${header}\n${staticColorVariables}\n\n// Dynamiske variabler for farge, via referanse til CSS-variabler\n${dynamicColorVariables}`;\n    },\n};\n\nexport default scssThemeVariablesFormat;\n"],"names":["scssThemeVariablesFormat","name","format","async","dictionary","file","header","fileHeader","staticColorTokens","allTokens","filter","token","path","some","word","includes","dynamicColorTokens","map","value","PREFIX","formattedVariables"],"mappings":"kHAIA,MAAMA,EAAmC,CACrCC,KAAM,uBACNC,OAAQC,OACJC,WAAAA,EACAC,KAAAA,MAEMC,MAAAA,QAAeC,EAAW,CAAEF,KAAAA,IAC5BG,EAAoBJ,EAAWK,UAAUC,QAC1CC,IACIA,EAAMC,KAAKC,MAAMC,GAAS,CAAC,QAAS,QAAQC,SAASD,OAQxDE,EAJoBZ,EAAWK,UAAUC,QAAQC,GACnDA,EAAMC,KAAKG,SAAS,WAGqBE,KAAKN,IACvC,IACAA,EACHO,MAAO,SAASC,KAAUR,EAAMV,YAcxC,MAAO,GAAGK,MAVmBc,EAAmB,CAC5ClB,OAAQ,OACRE,WAAY,IAAKA,EAAYK,UAAWD,8EAGdY,EAAmB,CAC7ClB,OAAQ,OACRE,WAAY,IAAKA,EAAYK,UAAWO,MAO7B"}
+{"version":3,"file":"scss-theme-variables.js","sources":["../../../../../../src/core/tokens/style-dictionary/formats/scss-theme-variables.ts"],"sourcesContent":["import { commentStyles } from \"style-dictionary/enums\";\nimport type { Dictionary, File, Format } from \"style-dictionary/types\";\nimport { fileHeader, formattedVariables } from \"style-dictionary/utils\";\nimport { PREFIX } from \"../config.js\";\n\nconst scssThemeVariablesFormat: Format = {\n    name: \"scss/theme-variables\",\n    format: async ({\n        dictionary,\n        file,\n    }: { dictionary: Dictionary; file: File }) => {\n        const header = await fileHeader({\n            file,\n            commentStyle: commentStyles.short,\n        });\n        const staticColorTokens = dictionary.allTokens.filter(\n            (token) =>\n                !token.path.some((word) => [\"light\", \"dark\"].includes(word)),\n        );\n\n        // Bruker 'light' som kilde for å unngå duplikater\n        const uniqueColorTokens = dictionary.allTokens.filter((token) =>\n            token.path.includes(\"light\"),\n        );\n\n        const dynamicColorTokens = uniqueColorTokens.map((token) => {\n            return {\n                ...token,\n                value: `var(--${PREFIX}-${token.name})`,\n            };\n        });\n\n        const staticColorVariables = formattedVariables({\n            format: \"sass\",\n            dictionary: { ...dictionary, allTokens: staticColorTokens },\n        });\n\n        const dynamicColorVariables = formattedVariables({\n            format: \"sass\",\n            dictionary: { ...dictionary, allTokens: dynamicColorTokens },\n        });\n\n        return `${header}\n${staticColorVariables}\n\n// Dynamiske variabler for farge, via referanse til CSS-variabler\n${dynamicColorVariables}`;\n    },\n};\n\nexport default scssThemeVariablesFormat;\n"],"names":["scssThemeVariablesFormat","name","format","async","dictionary","file","header","fileHeader","commentStyle","commentStyles","short","staticColorTokens","allTokens","filter","token","path","some","word","includes","dynamicColorTokens","map","value","PREFIX","formattedVariables"],"mappings":"yKAKA,MAAMA,EAAmC,CACrCC,KAAM,uBACNC,OAAQC,OACJC,WAAAA,EACAC,KAAAA,MAEMC,MAAAA,QAAeC,EAAW,CAC5BF,KAAAA,EACAG,aAAcC,EAAcC,QAE1BC,EAAoBP,EAAWQ,UAAUC,QAC1CC,IACIA,EAAMC,KAAKC,MAAMC,GAAS,CAAC,QAAS,QAAQC,SAASD,OAQxDE,EAJoBf,EAAWQ,UAAUC,QAAQC,GACnDA,EAAMC,KAAKG,SAAS,WAGqBE,KAAKN,IACvC,IACAA,EACHO,MAAO,SAASC,KAAUR,EAAMb,YAcxC,MAAO,GAAGK,MAVmBiB,EAAmB,CAC5CrB,OAAQ,OACRE,WAAY,IAAKA,EAAYQ,UAAWD,8EAGdY,EAAmB,CAC7CrB,OAAQ,OACRE,WAAY,IAAKA,EAAYQ,UAAWO,MAO7B"}

package/build/es/core/tokens.d.ts

@@ -3,6 +3,7 @@
  */
 declare const _default: {
     breakpoint: {
+        small: string;
         medium: string;
         large: string;
         xl: string;
@@ -204,6 +205,16 @@ declare const _default: {
         104: string;
         168: string;
     };
+    semanticSpacing: {
+        none: string;
+        "2xs": string;
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+        "2xl": string;
+    };
     icon: {
         weight: {
             normal: string;

package/build/es/core/tokens.js

@@ -1,2 +1,2 @@
-const e={breakpoint:{medium:"680px",large:"1200px",xl:"1600px"},color:{brand:{snohvit:"#F9F9F9",varde:"#E0DBD4",granitt:"#1B1917",hvit:"#FFFFFF",svart:"#000000",skifer:"#313030",fjellgra:"#444141",stein:"#636060",svaberg:"#C8C5C3",dis:"#ECE9E5",sand:"#F4F2EF"},functional:{info:"#D3D3F6",infoDark:"#A9A9CA",success:"#ACD3B5",successDark:"#94B79B",warning:"#EFDD9E",warningDark:"#DECC8D",error:"#F6B3B3",errorDark:"#DE9E9E"},background:{page:{light:"#F4F2EF",dark:"#1B1917"},pageVariant:{light:"#F9F9F9",dark:"#1B1917"},container:{light:"#F9F9F9",dark:"#313030"},containerLow:{light:"#ECE9E5",dark:"#000000"},containerHigh:{light:"#FFFFFF",dark:"#313030"},containerInverted:{light:"#1B1917",dark:"#F9F9F9"},containerSubdued:{light:"#C8C5C3",dark:"#636060"},input:{base:{light:"transparent",dark:"transparent"},focus:{light:"#FFFFFF",dark:"#313030"}},action:{light:"#1B1917",dark:"#F9F9F9"},interactive:{light:"transparent",dark:"transparent"},interactiveHover:{light:"#ECE9E5",dark:"#444141"},interactiveSelected:{light:"#E0DBD4",dark:"#636060"},alert:{neutral:{light:"#E0DBD4",dark:"#E0DBD4"},info:{light:"#D3D3F6",dark:"#A9A9CA"},success:{light:"#ACD3B5",dark:"#94B79B"},warning:{light:"#EFDD9E",dark:"#DECC8D"},error:{light:"#F6B3B3",dark:"#DE9E9E"}}},text:{default:{light:"#1B1917",dark:"#F9F9F9"},subdued:{light:"#636060",dark:"#C8C5C3"},inverted:{light:"#F9F9F9",dark:"#1B1917"},onAction:{light:"#F9F9F9",dark:"#1B1917"},interactive:{light:"#1B1917",dark:"#F9F9F9"},interactiveHover:{light:"#636060",dark:"#C8C5C3"},onAlert:{light:"#1B1917",dark:"#1B1917"},onAlertSubdued:{light:"#444141",dark:"#444141"}},border:{action:{light:"#1B1917",dark:"#F9F9F9"},input:{light:"#636060",dark:"#C8C5C3"},inputFocus:{light:"#1B1917",dark:"#F9F9F9"},separator:{light:"#C8C5C3",dark:"#636060"},separatorStrong:{light:"#636060",dark:"#C8C5C3"},separatorHover:{light:"#1B1917",dark:"#F9F9F9"},subdued:{light:"#C8C5C3",dark:"#636060"}}},motion:{timing:{energetic:"75ms",snappy:"100ms",productive:"150ms",expressive:"250ms",lazy:"400ms"},easing:{standard:"ease",entrance:"ease-out",exit:"ease-in",easeInBounceOut:"cubic-bezier(0, 0, 0.375, 1.17)",focus:"cubic-bezier(0.6, 0.2, 0.35, 1)"}},spacing:{0:"0rem",2:"0.125rem",4:"0.25rem",8:"0.5rem",12:"0.75rem",16:"1rem",24:"1.5rem",32:"2rem",40:"2.5rem",64:"4rem",104:"6.5rem",168:"10.5rem"},icon:{weight:{normal:"300",bold:"400"}},typography:{weight:{normal:"400",bold:"700"},font:{size:{16:"1rem",18:"1.125rem",20:"1.25rem",21:"1.3125rem",23:"1.4375rem",25:"1.5625rem",26:"1.625rem",28:"1.75rem",30:"1.875rem",36:"2.25rem",44:"2.75rem",56:"3.5rem"}},line:{height:{24:"1.5rem",28:"1.75rem",32:"2rem",36:"2.25rem",40:"2.5rem",44:"2.75rem",52:"3.25rem",64:"4rem"}},title:{small:{fontSize:"2.25rem",lineHeight:"2.75rem",fontWeight:"400"},base:{fontSize:"3.5rem",lineHeight:"4rem",fontWeight:"400"}},titleSmall:{small:{fontSize:"1.875rem",lineHeight:"2.25rem",fontWeight:"400"},base:{fontSize:"2.75rem",lineHeight:"3.25rem",fontWeight:"400"}},heading_1:{small:{fontSize:"1.625rem",lineHeight:"2rem",fontWeight:"400"},base:{fontSize:"2.25rem",lineHeight:"2.75rem",fontWeight:"400"}},heading_2:{small:{fontSize:"1.4375rem",lineHeight:"2rem",fontWeight:"400"},base:{fontSize:"1.75rem",lineHeight:"2.5rem",fontWeight:"400"}},heading_3:{small:{fontSize:"1.3125rem",lineHeight:"1.75rem",fontWeight:"700"},base:{fontSize:"1.5625rem",lineHeight:"2rem",fontWeight:"700"}},heading_4:{small:{fontSize:"1.125rem",lineHeight:"1.5rem",fontWeight:"700"},base:{fontSize:"1.3125rem",lineHeight:"1.75rem",fontWeight:"700"}},heading_5:{small:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"700"},base:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"700"}},body:{small:{fontSize:"1.125rem",lineHeight:"1.75rem",fontWeight:"400"},base:{fontSize:"1.25rem",lineHeight:"2rem",fontWeight:"400"}},small:{small:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"400"},base:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"400"}}}};export{e as default};
+const e={breakpoint:{small:"0",medium:"680px",large:"1200px",xl:"1600px"},color:{brand:{snohvit:"#F9F9F9",varde:"#E0DBD4",granitt:"#1B1917",hvit:"#FFFFFF",svart:"#000000",skifer:"#313030",fjellgra:"#444141",stein:"#636060",svaberg:"#C8C5C3",dis:"#ECE9E5",sand:"#F4F2EF"},functional:{info:"#D3D3F6",infoDark:"#A9A9CA",success:"#ACD3B5",successDark:"#94B79B",warning:"#EFDD9E",warningDark:"#DECC8D",error:"#F6B3B3",errorDark:"#DE9E9E"},background:{page:{light:"#F4F2EF",dark:"#1B1917"},pageVariant:{light:"#F9F9F9",dark:"#1B1917"},container:{light:"#F9F9F9",dark:"#313030"},containerLow:{light:"#ECE9E5",dark:"#000000"},containerHigh:{light:"#FFFFFF",dark:"#313030"},containerInverted:{light:"#1B1917",dark:"#F9F9F9"},containerSubdued:{light:"#C8C5C3",dark:"#636060"},input:{base:{light:"transparent",dark:"transparent"},focus:{light:"#FFFFFF",dark:"#313030"}},action:{light:"#1B1917",dark:"#F9F9F9"},interactive:{light:"transparent",dark:"transparent"},interactiveHover:{light:"#ECE9E5",dark:"#444141"},interactiveSelected:{light:"#E0DBD4",dark:"#636060"},alert:{neutral:{light:"#E0DBD4",dark:"#E0DBD4"},info:{light:"#D3D3F6",dark:"#A9A9CA"},success:{light:"#ACD3B5",dark:"#94B79B"},warning:{light:"#EFDD9E",dark:"#DECC8D"},error:{light:"#F6B3B3",dark:"#DE9E9E"}}},text:{default:{light:"#1B1917",dark:"#F9F9F9"},subdued:{light:"#636060",dark:"#C8C5C3"},inverted:{light:"#F9F9F9",dark:"#1B1917"},onAction:{light:"#F9F9F9",dark:"#1B1917"},interactive:{light:"#1B1917",dark:"#F9F9F9"},interactiveHover:{light:"#636060",dark:"#C8C5C3"},onAlert:{light:"#1B1917",dark:"#1B1917"},onAlertSubdued:{light:"#444141",dark:"#444141"}},border:{action:{light:"#1B1917",dark:"#F9F9F9"},input:{light:"#636060",dark:"#C8C5C3"},inputFocus:{light:"#1B1917",dark:"#F9F9F9"},separator:{light:"#C8C5C3",dark:"#636060"},separatorStrong:{light:"#636060",dark:"#C8C5C3"},separatorHover:{light:"#1B1917",dark:"#F9F9F9"},subdued:{light:"#C8C5C3",dark:"#636060"}}},motion:{timing:{energetic:"75ms",snappy:"100ms",productive:"150ms",expressive:"250ms",lazy:"400ms"},easing:{standard:"ease",entrance:"ease-out",exit:"ease-in",easeInBounceOut:"cubic-bezier(0, 0, 0.375, 1.17)",focus:"cubic-bezier(0.6, 0.2, 0.35, 1)"}},spacing:{0:"0rem",2:"0.125rem",4:"0.25rem",8:"0.5rem",12:"0.75rem",16:"1rem",24:"1.5rem",32:"2rem",40:"2.5rem",64:"4rem",104:"6.5rem",168:"10.5rem"},semanticSpacing:{none:"0","2xs":"0.25rem",xs:"0.5rem",s:"1rem",m:"1.5rem",l:"2.5rem",xl:"4rem","2xl":"6.5rem"},icon:{weight:{normal:"300",bold:"400"}},typography:{weight:{normal:"400",bold:"700"},font:{size:{16:"1rem",18:"1.125rem",20:"1.25rem",21:"1.3125rem",23:"1.4375rem",25:"1.5625rem",26:"1.625rem",28:"1.75rem",30:"1.875rem",36:"2.25rem",44:"2.75rem",56:"3.5rem"}},line:{height:{24:"1.5rem",28:"1.75rem",32:"2rem",36:"2.25rem",40:"2.5rem",44:"2.75rem",52:"3.25rem",64:"4rem"}},title:{small:{fontSize:"2.25rem",lineHeight:"2.75rem",fontWeight:"400"},base:{fontSize:"3.5rem",lineHeight:"4rem",fontWeight:"400"}},titleSmall:{small:{fontSize:"1.875rem",lineHeight:"2.25rem",fontWeight:"400"},base:{fontSize:"2.75rem",lineHeight:"3.25rem",fontWeight:"400"}},heading_1:{small:{fontSize:"1.625rem",lineHeight:"2rem",fontWeight:"400"},base:{fontSize:"2.25rem",lineHeight:"2.75rem",fontWeight:"400"}},heading_2:{small:{fontSize:"1.4375rem",lineHeight:"2rem",fontWeight:"400"},base:{fontSize:"1.75rem",lineHeight:"2.5rem",fontWeight:"400"}},heading_3:{small:{fontSize:"1.3125rem",lineHeight:"1.75rem",fontWeight:"700"},base:{fontSize:"1.5625rem",lineHeight:"2rem",fontWeight:"700"}},heading_4:{small:{fontSize:"1.125rem",lineHeight:"1.5rem",fontWeight:"700"},base:{fontSize:"1.3125rem",lineHeight:"1.75rem",fontWeight:"700"}},heading_5:{small:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"700"},base:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"700"}},body:{small:{fontSize:"1.125rem",lineHeight:"1.75rem",fontWeight:"400"},base:{fontSize:"1.25rem",lineHeight:"2rem",fontWeight:"400"}},small:{small:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"400"},base:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"400"}}}};export{e as default};
 //# sourceMappingURL=tokens.js.map

package/build/es/core/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sources":["../../../src/core/tokens.ts"],"sourcesContent":["/**\n * Do not edit directly, this file was auto-generated.\n */\n\nexport default {\n    breakpoint: { medium: \"680px\", large: \"1200px\", xl: \"1600px\" },\n    color: {\n        brand: {\n            snohvit: \"#F9F9F9\",\n            varde: \"#E0DBD4\",\n            granitt: \"#1B1917\",\n            hvit: \"#FFFFFF\",\n            svart: \"#000000\",\n            skifer: \"#313030\",\n            fjellgra: \"#444141\",\n            stein: \"#636060\",\n            svaberg: \"#C8C5C3\",\n            dis: \"#ECE9E5\",\n            sand: \"#F4F2EF\",\n        },\n        functional: {\n            info: \"#D3D3F6\",\n            infoDark: \"#A9A9CA\",\n            success: \"#ACD3B5\",\n            successDark: \"#94B79B\",\n            warning: \"#EFDD9E\",\n            warningDark: \"#DECC8D\",\n            error: \"#F6B3B3\",\n            errorDark: \"#DE9E9E\",\n        },\n        background: {\n            page: { light: \"#F4F2EF\", dark: \"#1B1917\" },\n            pageVariant: { light: \"#F9F9F9\", dark: \"#1B1917\" },\n            container: { light: \"#F9F9F9\", dark: \"#313030\" },\n            containerLow: { light: \"#ECE9E5\", dark: \"#000000\" },\n            containerHigh: { light: \"#FFFFFF\", dark: \"#313030\" },\n            containerInverted: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n            containerSubdued: { light: \"#C8C5C3\", dark: \"#636060\" },\n            input: {\n                base: { light: \"transparent\", dark: \"transparent\" },\n                focus: { light: \"#FFFFFF\", dark: \"#313030\" },\n            },\n            action: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n            interactive: { light: \"transparent\", dark: \"transparent\" },\n            interactiveHover: { light: \"#ECE9E5\", dark: \"#444141\" },\n            interactiveSelected: { light: \"#E0DBD4\", dark: \"#636060\" },\n            alert: {\n                neutral: { light: \"#E0DBD4\", dark: \"#E0DBD4\" },\n                info: { light: \"#D3D3F6\", dark: \"#A9A9CA\" },\n                success: { light: \"#ACD3B5\", dark: \"#94B79B\" },\n                warning: { light: \"#EFDD9E\", dark: \"#DECC8D\" },\n                error: { light: \"#F6B3B3\", dark: \"#DE9E9E\" },\n            },\n        },\n        text: {\n            default: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n            subdued: { light: \"#636060\", dark: \"#C8C5C3\" },\n            inverted: { light: \"#F9F9F9\", dark: \"#1B1917\" },\n            onAction: { light: \"#F9F9F9\", dark: \"#1B1917\" },\n            interactive: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n            interactiveHover: { light: \"#636060\", dark: \"#C8C5C3\" },\n            onAlert: { light: \"#1B1917\", dark: \"#1B1917\" },\n            onAlertSubdued: { light: \"#444141\", dark: \"#444141\" },\n        },\n        border: {\n            action: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n            input: { light: \"#636060\", dark: \"#C8C5C3\" },\n            inputFocus: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n            separator: { light: \"#C8C5C3\", dark: \"#636060\" },\n            separatorStrong: { light: \"#636060\", dark: \"#C8C5C3\" },\n            separatorHover: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n            subdued: { light: \"#C8C5C3\", dark: \"#636060\" },\n        },\n    },\n    motion: {\n        timing: { energetic: \"75ms\", snappy: \"100ms\", productive: \"150ms\", expressive: \"250ms\", lazy: \"400ms\" },\n        easing: {\n            standard: \"ease\",\n            entrance: \"ease-out\",\n            exit: \"ease-in\",\n            easeInBounceOut: \"cubic-bezier(0, 0, 0.375, 1.17)\",\n            focus: \"cubic-bezier(0.6, 0.2, 0.35, 1)\",\n        },\n    },\n    spacing: {\n        0: \"0rem\",\n        2: \"0.125rem\",\n        4: \"0.25rem\",\n        8: \"0.5rem\",\n        12: \"0.75rem\",\n        16: \"1rem\",\n        24: \"1.5rem\",\n        32: \"2rem\",\n        40: \"2.5rem\",\n        64: \"4rem\",\n        104: \"6.5rem\",\n        168: \"10.5rem\",\n    },\n    icon: { weight: { normal: \"300\", bold: \"400\" } },\n    typography: {\n        weight: { normal: \"400\", bold: \"700\" },\n        font: {\n            size: {\n                16: \"1rem\",\n                18: \"1.125rem\",\n                20: \"1.25rem\",\n                21: \"1.3125rem\",\n                23: \"1.4375rem\",\n                25: \"1.5625rem\",\n                26: \"1.625rem\",\n                28: \"1.75rem\",\n                30: \"1.875rem\",\n                36: \"2.25rem\",\n                44: \"2.75rem\",\n                56: \"3.5rem\",\n            },\n        },\n        line: {\n            height: {\n                24: \"1.5rem\",\n                28: \"1.75rem\",\n                32: \"2rem\",\n                36: \"2.25rem\",\n                40: \"2.5rem\",\n                44: \"2.75rem\",\n                52: \"3.25rem\",\n                64: \"4rem\",\n            },\n        },\n        title: {\n            small: { fontSize: \"2.25rem\", lineHeight: \"2.75rem\", fontWeight: \"400\" },\n            base: { fontSize: \"3.5rem\", lineHeight: \"4rem\", fontWeight: \"400\" },\n        },\n        titleSmall: {\n            small: { fontSize: \"1.875rem\", lineHeight: \"2.25rem\", fontWeight: \"400\" },\n            base: { fontSize: \"2.75rem\", lineHeight: \"3.25rem\", fontWeight: \"400\" },\n        },\n        heading_1: {\n            small: { fontSize: \"1.625rem\", lineHeight: \"2rem\", fontWeight: \"400\" },\n            base: { fontSize: \"2.25rem\", lineHeight: \"2.75rem\", fontWeight: \"400\" },\n        },\n        heading_2: {\n            small: { fontSize: \"1.4375rem\", lineHeight: \"2rem\", fontWeight: \"400\" },\n            base: { fontSize: \"1.75rem\", lineHeight: \"2.5rem\", fontWeight: \"400\" },\n        },\n        heading_3: {\n            small: { fontSize: \"1.3125rem\", lineHeight: \"1.75rem\", fontWeight: \"700\" },\n            base: { fontSize: \"1.5625rem\", lineHeight: \"2rem\", fontWeight: \"700\" },\n        },\n        heading_4: {\n            small: { fontSize: \"1.125rem\", lineHeight: \"1.5rem\", fontWeight: \"700\" },\n            base: { fontSize: \"1.3125rem\", lineHeight: \"1.75rem\", fontWeight: \"700\" },\n        },\n        heading_5: {\n            small: { fontSize: \"1rem\", lineHeight: \"1.5rem\", fontWeight: \"700\" },\n            base: { fontSize: \"1rem\", lineHeight: \"1.5rem\", fontWeight: \"700\" },\n        },\n        body: {\n            small: { fontSize: \"1.125rem\", lineHeight: \"1.75rem\", fontWeight: \"400\" },\n            base: { fontSize: \"1.25rem\", lineHeight: \"2rem\", fontWeight: \"400\" },\n        },\n        small: {\n            small: { fontSize: \"1rem\", lineHeight: \"1.5rem\", fontWeight: \"400\" },\n            base: { fontSize: \"1rem\", lineHeight: \"1.5rem\", fontWeight: \"400\" },\n        },\n    },\n};\n"],"names":["tokens","breakpoint","medium","large","xl","color","brand","snohvit","varde","granitt","hvit","svart","skifer","fjellgra","stein","svaberg","dis","sand","functional","info","infoDark","success","successDark","warning","warningDark","error","errorDark","background","page","light","dark","pageVariant","container","containerLow","containerHigh","containerInverted","containerSubdued","input","base","focus","action","interactive","interactiveHover","interactiveSelected","alert","neutral","text","default","subdued","inverted","onAction","onAlert","onAlertSubdued","border","inputFocus","separator","separatorStrong","separatorHover","motion","timing","energetic","snappy","productive","expressive","lazy","easing","standard","entrance","exit","easeInBounceOut","spacing","icon","weight","normal","bold","typography","font","size","line","height","title","small","fontSize","lineHeight","fontWeight","titleSmall","heading_1","heading_2","heading_3","heading_4","heading_5","body"],"mappings":"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"}
+{"version":3,"file":"tokens.js","sources":["../../../src/core/tokens.ts"],"sourcesContent":["/**\n * Do not edit directly, this file was auto-generated.\n */\n\nexport default {\n    breakpoint: { small: \"0\", medium: \"680px\", large: \"1200px\", xl: \"1600px\" },\n    color: {\n        brand: {\n            snohvit: \"#F9F9F9\",\n            varde: \"#E0DBD4\",\n            granitt: \"#1B1917\",\n            hvit: \"#FFFFFF\",\n            svart: \"#000000\",\n            skifer: \"#313030\",\n            fjellgra: \"#444141\",\n            stein: \"#636060\",\n            svaberg: \"#C8C5C3\",\n            dis: \"#ECE9E5\",\n            sand: \"#F4F2EF\",\n        },\n        functional: {\n            info: \"#D3D3F6\",\n            infoDark: \"#A9A9CA\",\n            success: \"#ACD3B5\",\n            successDark: \"#94B79B\",\n            warning: \"#EFDD9E\",\n            warningDark: \"#DECC8D\",\n            error: \"#F6B3B3\",\n            errorDark: \"#DE9E9E\",\n        },\n        background: {\n            page: { light: \"#F4F2EF\", dark: \"#1B1917\" },\n            pageVariant: { light: \"#F9F9F9\", dark: \"#1B1917\" },\n            container: { light: \"#F9F9F9\", dark: \"#313030\" },\n            containerLow: { light: \"#ECE9E5\", dark: \"#000000\" },\n            containerHigh: { light: \"#FFFFFF\", dark: \"#313030\" },\n            containerInverted: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n            containerSubdued: { light: \"#C8C5C3\", dark: \"#636060\" },\n            input: {\n                base: { light: \"transparent\", dark: \"transparent\" },\n                focus: { light: \"#FFFFFF\", dark: \"#313030\" },\n            },\n            action: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n            interactive: { light: \"transparent\", dark: \"transparent\" },\n            interactiveHover: { light: \"#ECE9E5\", dark: \"#444141\" },\n            interactiveSelected: { light: \"#E0DBD4\", dark: \"#636060\" },\n            alert: {\n                neutral: { light: \"#E0DBD4\", dark: \"#E0DBD4\" },\n                info: { light: \"#D3D3F6\", dark: \"#A9A9CA\" },\n                success: { light: \"#ACD3B5\", dark: \"#94B79B\" },\n                warning: { light: \"#EFDD9E\", dark: \"#DECC8D\" },\n                error: { light: \"#F6B3B3\", dark: \"#DE9E9E\" },\n            },\n        },\n        text: {\n            default: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n            subdued: { light: \"#636060\", dark: \"#C8C5C3\" },\n            inverted: { light: \"#F9F9F9\", dark: \"#1B1917\" },\n            onAction: { light: \"#F9F9F9\", dark: \"#1B1917\" },\n            interactive: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n            interactiveHover: { light: \"#636060\", dark: \"#C8C5C3\" },\n            onAlert: { light: \"#1B1917\", dark: \"#1B1917\" },\n            onAlertSubdued: { light: \"#444141\", dark: \"#444141\" },\n        },\n        border: {\n            action: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n            input: { light: \"#636060\", dark: \"#C8C5C3\" },\n            inputFocus: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n            separator: { light: \"#C8C5C3\", dark: \"#636060\" },\n            separatorStrong: { light: \"#636060\", dark: \"#C8C5C3\" },\n            separatorHover: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n            subdued: { light: \"#C8C5C3\", dark: \"#636060\" },\n        },\n    },\n    motion: {\n        timing: {\n            energetic: \"75ms\",\n            snappy: \"100ms\",\n            productive: \"150ms\",\n            expressive: \"250ms\",\n            lazy: \"400ms\",\n        },\n        easing: {\n            standard: \"ease\",\n            entrance: \"ease-out\",\n            exit: \"ease-in\",\n            easeInBounceOut: \"cubic-bezier(0, 0, 0.375, 1.17)\",\n            focus: \"cubic-bezier(0.6, 0.2, 0.35, 1)\",\n        },\n    },\n    spacing: {\n        0: \"0rem\",\n        2: \"0.125rem\",\n        4: \"0.25rem\",\n        8: \"0.5rem\",\n        12: \"0.75rem\",\n        16: \"1rem\",\n        24: \"1.5rem\",\n        32: \"2rem\",\n        40: \"2.5rem\",\n        64: \"4rem\",\n        104: \"6.5rem\",\n        168: \"10.5rem\",\n    },\n    semanticSpacing: {\n        none: \"0\",\n        \"2xs\": \"0.25rem\",\n        xs: \"0.5rem\",\n        s: \"1rem\",\n        m: \"1.5rem\",\n        l: \"2.5rem\",\n        xl: \"4rem\",\n        \"2xl\": \"6.5rem\",\n    },\n    icon: { weight: { normal: \"300\", bold: \"400\" } },\n    typography: {\n        weight: { normal: \"400\", bold: \"700\" },\n        font: {\n            size: {\n                16: \"1rem\",\n                18: \"1.125rem\",\n                20: \"1.25rem\",\n                21: \"1.3125rem\",\n                23: \"1.4375rem\",\n                25: \"1.5625rem\",\n                26: \"1.625rem\",\n                28: \"1.75rem\",\n                30: \"1.875rem\",\n                36: \"2.25rem\",\n                44: \"2.75rem\",\n                56: \"3.5rem\",\n            },\n        },\n        line: {\n            height: {\n                24: \"1.5rem\",\n                28: \"1.75rem\",\n                32: \"2rem\",\n                36: \"2.25rem\",\n                40: \"2.5rem\",\n                44: \"2.75rem\",\n                52: \"3.25rem\",\n                64: \"4rem\",\n            },\n        },\n        title: {\n            small: {\n                fontSize: \"2.25rem\",\n                lineHeight: \"2.75rem\",\n                fontWeight: \"400\",\n            },\n            base: { fontSize: \"3.5rem\", lineHeight: \"4rem\", fontWeight: \"400\" },\n        },\n        titleSmall: {\n            small: {\n                fontSize: \"1.875rem\",\n                lineHeight: \"2.25rem\",\n                fontWeight: \"400\",\n            },\n            base: {\n                fontSize: \"2.75rem\",\n                lineHeight: \"3.25rem\",\n                fontWeight: \"400\",\n            },\n        },\n        heading_1: {\n            small: {\n                fontSize: \"1.625rem\",\n                lineHeight: \"2rem\",\n                fontWeight: \"400\",\n            },\n            base: {\n                fontSize: \"2.25rem\",\n                lineHeight: \"2.75rem\",\n                fontWeight: \"400\",\n            },\n        },\n        heading_2: {\n            small: {\n                fontSize: \"1.4375rem\",\n                lineHeight: \"2rem\",\n                fontWeight: \"400\",\n            },\n            base: {\n                fontSize: \"1.75rem\",\n                lineHeight: \"2.5rem\",\n                fontWeight: \"400\",\n            },\n        },\n        heading_3: {\n            small: {\n                fontSize: \"1.3125rem\",\n                lineHeight: \"1.75rem\",\n                fontWeight: \"700\",\n            },\n            base: {\n                fontSize: \"1.5625rem\",\n                lineHeight: \"2rem\",\n                fontWeight: \"700\",\n            },\n        },\n        heading_4: {\n            small: {\n                fontSize: \"1.125rem\",\n                lineHeight: \"1.5rem\",\n                fontWeight: \"700\",\n            },\n            base: {\n                fontSize: \"1.3125rem\",\n                lineHeight: \"1.75rem\",\n                fontWeight: \"700\",\n            },\n        },\n        heading_5: {\n            small: {\n                fontSize: \"1rem\",\n                lineHeight: \"1.5rem\",\n                fontWeight: \"700\",\n            },\n            base: { fontSize: \"1rem\", lineHeight: \"1.5rem\", fontWeight: \"700\" },\n        },\n        body: {\n            small: {\n                fontSize: \"1.125rem\",\n                lineHeight: \"1.75rem\",\n                fontWeight: \"400\",\n            },\n            base: {\n                fontSize: \"1.25rem\",\n                lineHeight: \"2rem\",\n                fontWeight: \"400\",\n            },\n        },\n        small: {\n            small: {\n                fontSize: \"1rem\",\n                lineHeight: \"1.5rem\",\n                fontWeight: \"400\",\n            },\n            base: { fontSize: \"1rem\", lineHeight: \"1.5rem\", fontWeight: \"400\" },\n        },\n    },\n};\n"],"names":["tokens","breakpoint","small","medium","large","xl","color","brand","snohvit","varde","granitt","hvit","svart","skifer","fjellgra","stein","svaberg","dis","sand","functional","info","infoDark","success","successDark","warning","warningDark","error","errorDark","background","page","light","dark","pageVariant","container","containerLow","containerHigh","containerInverted","containerSubdued","input","base","focus","action","interactive","interactiveHover","interactiveSelected","alert","neutral","text","default","subdued","inverted","onAction","onAlert","onAlertSubdued","border","inputFocus","separator","separatorStrong","separatorHover","motion","timing","energetic","snappy","productive","expressive","lazy","easing","standard","entrance","exit","easeInBounceOut","spacing","semanticSpacing","none","xs","s","m","l","icon","weight","normal","bold","typography","font","size","line","height","title","fontSize","lineHeight","fontWeight","titleSmall","heading_1","heading_2","heading_3","heading_4","heading_5","body"],"mappings":"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"}

package/build/es/utilities/polymorphism/polymorphism.d.ts

@@ -8,7 +8,7 @@ type ElementTypeProp<ElementType extends React.ElementType> = {
 };
 type PropsToOmit<ElementType extends React.ElementType, Props> = keyof (ElementTypeProp<ElementType> & Props);
 export type PolymorphicProps<ElementType extends React.ElementType, Props = {}> = React.PropsWithChildren<Props & ElementTypeProp<ElementType>> & Omit<React.ComponentPropsWithoutRef<ElementType>, PropsToOmit<ElementType, Props>> & ElementTypeProp<ElementType>;
-export type PolymorphicRef<ElementType extends React.ElementType> = React.ComponentPropsWithRef<ElementType>["ref"];
+export type PolymorphicRef<As extends React.ElementType> = React.ComponentPropsWithRef<As>["ref"];
 export type PolymorphicPropsWithRef<ElementType extends React.ElementType, Props = {}> = PolymorphicProps<ElementType, Props> & {
     ref?: PolymorphicRef<ElementType>;
 } & ElementTypeProp<ElementType>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fremtind/jokul",
-  "version": "2.0.1",
+  "version": "3.1.0",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/styles/components/autosuggest/autosuggest.css

@@ -1,6 +1,3 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
 /**
  * Do not edit directly, this file was auto-generated.
  */

package/styles/components/breadcrumb/breadcrumb.css

@@ -1,6 +1,3 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
 /**
  * Do not edit directly, this file was auto-generated.
  */

package/styles/components/button/button.css

@@ -1,6 +1,3 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
 /**
  * Do not edit directly, this file was auto-generated.
  */

package/styles/components/card/card.css

@@ -1,6 +1,3 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
 /**
  * Do not edit directly, this file was auto-generated.
  */

package/styles/components/checkbox/checkbox.css

@@ -1,6 +1,3 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -33,7 +30,7 @@
     --jkl-checkbox-box-size: 1.125rem;
     --jkl-checkbox-line-height: 1.5rem;
   }
-  @keyframes jkl-checkbox-checked-uyr68b4 {
+  @keyframes jkl-checkbox-checked-u6luvh9 {
     0% {
       width: 0;
       height: 0;
@@ -47,7 +44,7 @@
       height: 58%;
     }
   }
-  @keyframes jkl-checkbox-indeterminate-uyr68bg {
+  @keyframes jkl-checkbox-indeterminate-u6luvhe {
     0% {
       width: 0;
     }
@@ -76,11 +73,11 @@
     left: calc(-0.5 * var(--jkl-checkbox-box-size));
   }
   .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
-    animation: jkl-checkbox-checked-uyr68b4 150ms ease-in-out forwards;
+    animation: jkl-checkbox-checked-u6luvh9 150ms ease-in-out forwards;
     opacity: 1;
   }
   .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
-    animation: jkl-checkbox-indeterminate-uyr68bg 150ms ease-in-out forwards;
+    animation: jkl-checkbox-indeterminate-u6luvhe 150ms ease-in-out forwards;
     opacity: 1;
   }
   .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {

package/styles/components/checkbox/checkbox.min.css

@@ -1 +1 @@
-@layer jokul.components{:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-uyr68b4{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-uyr68bg{0%{width:0}to{width:66%}}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:#0000;color:var(--text-color);display:flex;flex-wrap:wrap;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:var(--jkl-checkbox-line-height);min-height:var(--jkl-checkbox-height);position:relative}.jkl-checkbox__input{left:calc(var(--jkl-checkbox-box-size)*-.5);opacity:0;position:absolute;top:var(--jkl-checkbox-box-size)}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-uyr68b4 .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label .jkl-checkbox__indeterminate-mark:after{animation:jkl-checkbox-indeterminate-uyr68bg .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label{color:var(--jkl-checkbox-focus-color)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label>.jkl-checkbox__mark{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.jkl-checkbox__input:active{--background-color:var(--jkl-color-background-input-focus)}.jkl-checkbox__label{cursor:pointer;display:flex;flex-shrink:0;max-width:100%;min-width:0}.jkl-checkbox__label:active .jkl-checkbox__mark,.jkl-checkbox__label:hover .jkl-checkbox__mark{outline:1px solid var(--box-color)}.jkl-checkbox__text{margin:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height))*.5) 0;transition-duration:.15s;transition-property:color;transition-timing-function:ease;translate:0 .0625rem}.jkl-checkbox__mark{box-sizing:border-box;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size))*.5);position:relative;width:var(--jkl-checkbox-box-size);-webkit-margin-end:var(--jkl-unit-10);align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;flex-shrink:0;margin-inline-end:var(--jkl-unit-10);outline:none;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-checkbox__mark{border:1px solid ButtonText;outline:revert}}.jkl-checkbox__check-mark:after{border-bottom:.125rem solid var(--check-color);border-left-width:.125rem;border-left:0 solid var(--check-color);border-right:.125rem solid var(--check-color);border-top-width:.125rem;border-top:0 solid var(--check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox__check-mark:after{border-color:ButtonText}}.jkl-checkbox__indeterminate-mark:after{--width:66%;--thickness:0.125rem;border-bottom:solid var(--thickness) var(--check-color);bottom:calc(50% - var(--thickness)/2);content:"";display:block;left:calc((100% - var(--width))/2);opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:var(--width)}@media screen and (forced-colors:active){.jkl-checkbox__indeterminate-mark:after{border-color:ButtonText}}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:calc(var(--jkl-unit-10)*3)}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}}
+@layer jokul.components{:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-u6luvh9{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-u6luvhe{0%{width:0}to{width:66%}}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:#0000;color:var(--text-color);display:flex;flex-wrap:wrap;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:var(--jkl-checkbox-line-height);min-height:var(--jkl-checkbox-height);position:relative}.jkl-checkbox__input{left:calc(var(--jkl-checkbox-box-size)*-.5);opacity:0;position:absolute;top:var(--jkl-checkbox-box-size)}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-u6luvh9 .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label .jkl-checkbox__indeterminate-mark:after{animation:jkl-checkbox-indeterminate-u6luvhe .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label{color:var(--jkl-checkbox-focus-color)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label>.jkl-checkbox__mark{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.jkl-checkbox__input:active{--background-color:var(--jkl-color-background-input-focus)}.jkl-checkbox__label{cursor:pointer;display:flex;flex-shrink:0;max-width:100%;min-width:0}.jkl-checkbox__label:active .jkl-checkbox__mark,.jkl-checkbox__label:hover .jkl-checkbox__mark{outline:1px solid var(--box-color)}.jkl-checkbox__text{margin:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height))*.5) 0;transition-duration:.15s;transition-property:color;transition-timing-function:ease;translate:0 .0625rem}.jkl-checkbox__mark{box-sizing:border-box;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size))*.5);position:relative;width:var(--jkl-checkbox-box-size);-webkit-margin-end:var(--jkl-unit-10);align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;flex-shrink:0;margin-inline-end:var(--jkl-unit-10);outline:none;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-checkbox__mark{border:1px solid ButtonText;outline:revert}}.jkl-checkbox__check-mark:after{border-bottom:.125rem solid var(--check-color);border-left-width:.125rem;border-left:0 solid var(--check-color);border-right:.125rem solid var(--check-color);border-top-width:.125rem;border-top:0 solid var(--check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox__check-mark:after{border-color:ButtonText}}.jkl-checkbox__indeterminate-mark:after{--width:66%;--thickness:0.125rem;border-bottom:solid var(--thickness) var(--check-color);bottom:calc(50% - var(--thickness)/2);content:"";display:block;left:calc((100% - var(--width))/2);opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:var(--width)}@media screen and (forced-colors:active){.jkl-checkbox__indeterminate-mark:after{border-color:ButtonText}}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:calc(var(--jkl-unit-10)*3)}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}}