@fremtind/jokul 3.6.0 → 3.7.0

package/build/es/components/text-input/BaseTextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTextInput.js","sources":["../../../../src/components/text-input/BaseTextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type CSSProperties, forwardRef } from \"react\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport type { BaseTextInputProps } from \"./types.js\";\n\nfunction getWidthAsStyle(\n    width?: string,\n    maxLength?: number,\n): CSSProperties | undefined {\n    if (width) {\n        return { width }; // prioritize width prop\n    }\n\n    if (maxLength) {\n        // adapt to maxLength, but capped at 40ch\n        const length = `${Math.min(maxLength, 40)}ch`;\n        const padding = \"24px\"; // left + right padding\n        return { width: `calc(${length} + ${padding})` };\n    }\n\n    return undefined;\n}\n\nexport const BaseTextInput = forwardRef<HTMLInputElement, BaseTextInputProps>(\n    (props, ref) => {\n        const {\n            action,\n            align = \"left\",\n            \"aria-invalid\": ariaInvalid,\n            className = \"\",\n            density,\n            maxLength,\n            style,\n            type = \"text\",\n            unit,\n            width,\n            actionButton,\n            ...rest\n        } = props;\n\n        return (\n            <div\n                className=\"jkl-text-input-wrapper\"\n                data-invalid={ariaInvalid}\n                style={{ ...style, ...getWidthAsStyle(width, maxLength) }}\n            >\n                <input\n                    aria-invalid={ariaInvalid}\n                    ref={ref}\n                    className={clsx(\"jkl-text-input__input\", className, {\n                        \"jkl-text-input__input--align-right\": align === \"right\",\n                    })}\n                    maxLength={maxLength}\n                    type={type}\n                    {...rest}\n                />\n                {unit && <span className=\"jkl-text-input__unit\">{unit}</span>}\n                {!action &&\n                    actionButton &&\n                    React.cloneElement(actionButton, {\n                        className: clsx(\n                            \"jkl-text-input-action-button\",\n                            actionButton.props.className,\n                        ),\n                    })}\n                {action && !actionButton && (\n                    <IconButton\n                        density={density}\n                        className={clsx(\n                            \"jkl-text-input-action-button\",\n                            action.className,\n                        )}\n                        title={action.label}\n                        onClick={action.onClick}\n                        onFocus={action.onFocus}\n                        onBlur={action.onBlur}\n                        ref={action.buttonRef}\n                        type={action.type || \"button\"}\n                    >\n                        {action.icon}\n                    </IconButton>\n                )}\n            </div>\n        );\n    },\n);\n\nBaseTextInput.displayName = \"BaseInputField\";\n"],"names":["getWidthAsStyle","width","maxLength","Math","min","BaseTextInput","forwardRef","props","ref","action","align","ariaInvalid","className","density","style","type","unit","actionButton","rest","jsxs","children","jsx","clsx","React","cloneElement","IconButton","title","label","onClick","onFocus","onBlur","buttonRef","icon","displayName"],"mappings":"gMAKA,SAASA,EACLC,EACAC,GAEA,OAAID,EACO,CAAEA,MAAAA,GAGTC,EAIO,CAAED,MAAO,QAFEE,KAAKC,IAAIF,EAAW,sBAF1C,CAQJ,CAEO,MAAMG,EAAgBC,EACzB,CAACC,EAAOC,KACJ,MACIC,OAAAA,EACAC,MAAAA,EAAQ,OACR,eAAgBC,EAChBC,UAAAA,EAAY,GACZC,QAAAA,EACAX,UAAAA,EACAY,MAAAA,EACAC,KAAAA,EAAO,OACPC,KAAAA,EACAf,MAAAA,EACAgB,aAAAA,KACGC,GACHX,EAEJ,OACIY,EAAC,MAAA,CACGP,UAAU,yBACV,eAAcD,EACdG,MAAO,IAAKA,KAAUd,EAAgBC,EAAOC,IAE7CkB,SAAA,CAAAC,EAAC,QAAA,CACG,eAAcV,EACdH,IAAAA,EACAI,UAAWU,EAAK,wBAAyBV,EAAW,CAChD,qCAAgD,UAAVF,IAE1CR,UAAAA,EACAa,KAAAA,KACIG,IAEPF,GAAQK,EAAC,OAAA,CAAKT,UAAU,uBAAwBQ,SAAAJ,KAC/CP,GACEQ,GACAM,EAAMC,aAAaP,EAAc,CAC7BL,UAAWU,EACP,+BACAL,EAAaV,MAAMK,aAG9BH,IAAWQ,GACRI,EAACI,EAAA,CACGZ,QAAAA,EACAD,UAAWU,EACP,+BACAb,EAAOG,WAEXc,MAAOjB,EAAOkB,MACdC,QAASnB,EAAOmB,QAChBC,QAASpB,EAAOoB,QAChBC,OAAQrB,EAAOqB,OACftB,IAAKC,EAAOsB,UACZhB,KAAMN,EAAOM,MAAQ,SAEpBK,SAAAX,EAAOuB,YAQhC3B,EAAc4B,YAAc"}
+{"version":3,"file":"BaseTextInput.js","sources":["../../../../src/components/text-input/BaseTextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type CSSProperties, forwardRef } from \"react\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport type { BaseTextInputProps } from \"./types.js\";\n\nfunction getWidthAsStyle(\n    width?: string,\n    maxLength?: number,\n): CSSProperties | undefined {\n    if (width) {\n        return { width }; // prioritize width prop\n    }\n\n    if (maxLength) {\n        // adapt to maxLength, but capped at 15em\n        const length = `${Math.min(maxLength, 15)}em`;\n        const padding = \"24px\"; // left + right padding\n        return { width: `calc(${length} + ${padding})` };\n    }\n\n    return undefined;\n}\n\nexport const BaseTextInput = forwardRef<HTMLInputElement, BaseTextInputProps>(\n    (props, ref) => {\n        const {\n            action,\n            align = \"left\",\n            \"aria-invalid\": ariaInvalid,\n            className = \"\",\n            density,\n            maxLength,\n            style,\n            type = \"text\",\n            unit,\n            width,\n            actionButton,\n            ...rest\n        } = props;\n\n        return (\n            <div\n                className=\"jkl-text-input-wrapper\"\n                data-invalid={ariaInvalid}\n                style={{ ...style, ...getWidthAsStyle(width, maxLength) }}\n            >\n                <input\n                    aria-invalid={ariaInvalid}\n                    ref={ref}\n                    className={clsx(\"jkl-text-input__input\", className, {\n                        \"jkl-text-input__input--align-right\": align === \"right\",\n                    })}\n                    maxLength={maxLength}\n                    type={type}\n                    {...rest}\n                />\n                {unit && <span className=\"jkl-text-input__unit\">{unit}</span>}\n                {!action &&\n                    actionButton &&\n                    React.cloneElement(actionButton, {\n                        className: clsx(\n                            \"jkl-text-input-action-button\",\n                            actionButton.props.className,\n                        ),\n                    })}\n                {action && !actionButton && (\n                    <IconButton\n                        density={density}\n                        className={clsx(\n                            \"jkl-text-input-action-button\",\n                            action.className,\n                        )}\n                        title={action.label}\n                        onClick={action.onClick}\n                        onFocus={action.onFocus}\n                        onBlur={action.onBlur}\n                        ref={action.buttonRef}\n                        type={action.type || \"button\"}\n                    >\n                        {action.icon}\n                    </IconButton>\n                )}\n            </div>\n        );\n    },\n);\n\nBaseTextInput.displayName = \"BaseInputField\";\n"],"names":["getWidthAsStyle","width","maxLength","Math","min","BaseTextInput","forwardRef","props","ref","action","align","ariaInvalid","className","density","style","type","unit","actionButton","rest","jsxs","children","jsx","clsx","React","cloneElement","IconButton","title","label","onClick","onFocus","onBlur","buttonRef","icon","displayName"],"mappings":"gMAKA,SAASA,EACLC,EACAC,GAEA,OAAID,EACO,CAAEA,MAAAA,GAGTC,EAIO,CAAED,MAAO,QAFEE,KAAKC,IAAIF,EAAW,sBAF1C,CAQJ,CAEO,MAAMG,EAAgBC,EACzB,CAACC,EAAOC,KACJ,MACIC,OAAAA,EACAC,MAAAA,EAAQ,OACR,eAAgBC,EAChBC,UAAAA,EAAY,GACZC,QAAAA,EACAX,UAAAA,EACAY,MAAAA,EACAC,KAAAA,EAAO,OACPC,KAAAA,EACAf,MAAAA,EACAgB,aAAAA,KACGC,GACHX,EAEJ,OACIY,EAAC,MAAA,CACGP,UAAU,yBACV,eAAcD,EACdG,MAAO,IAAKA,KAAUd,EAAgBC,EAAOC,IAE7CkB,SAAA,CAAAC,EAAC,QAAA,CACG,eAAcV,EACdH,IAAAA,EACAI,UAAWU,EAAK,wBAAyBV,EAAW,CAChD,qCAAgD,UAAVF,IAE1CR,UAAAA,EACAa,KAAAA,KACIG,IAEPF,GAAQK,EAAC,OAAA,CAAKT,UAAU,uBAAwBQ,SAAAJ,KAC/CP,GACEQ,GACAM,EAAMC,aAAaP,EAAc,CAC7BL,UAAWU,EACP,+BACAL,EAAaV,MAAMK,aAG9BH,IAAWQ,GACRI,EAACI,EAAA,CACGZ,QAAAA,EACAD,UAAWU,EACP,+BACAb,EAAOG,WAEXc,MAAOjB,EAAOkB,MACdC,QAASnB,EAAOmB,QAChBC,QAASpB,EAAOoB,QAChBC,OAAQrB,EAAOqB,OACftB,IAAKC,EAAOsB,UACZhB,KAAMN,EAAOM,MAAQ,SAEpBK,SAAAX,EAAOuB,YAQhC3B,EAAc4B,YAAc"}

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

@@ -1,2 +1,2 @@
-import o from"style-dictionary";import{legacyDesignTokensConfig as n,designTokensConfig as i}from"./config.js";import"./register.js";!async function(){console.log("Starting design token build...\n"),console.log("⚙️ Building legacy tokens"),await(await new o(n)).buildAllPlatforms(),console.log("⚙️ Building modern tokens"),await(await new o(i)).buildAllPlatforms(),console.log("\nBuild complete.")}();
+import i from"style-dictionary";import{legacyDesignTokensConfig as o,designTokensConfig as n}from"./config.js";import"./register.js";import{buildTailwind4Theme as l}from"../build-tailwind-4.js";!async function(){console.log("Starting design token build...\n"),console.log("⚙️ Building legacy tokens"),await(await new i(o)).buildAllPlatforms(),console.log("⚙️ Building modern tokens"),await(await new i(n)).buildAllPlatforms(),console.log("⚙️ Generating Tailwind v4 theme"),await l(),console.log("\nBuild complete.")}();
 //# sourceMappingURL=build.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"build.js","sources":["../../../../../src/core/tokens/style-dictionary/build.ts"],"sourcesContent":["import StyleDictionary from \"style-dictionary\";\nimport { legacyDesignTokensConfig, designTokensConfig } from \"./config.js\";\nimport \"./register.js\";\n\nasync function build() {\n    console.log(\"Starting design token build...\\n\");\n\n    console.log(\"⚙️ Building legacy tokens\");\n    const legacySd = await new StyleDictionary(legacyDesignTokensConfig);\n    await legacySd.buildAllPlatforms();\n\n    console.log(\"⚙️ Building modern tokens\");\n    const modernSd = await new StyleDictionary(designTokensConfig);\n    await modernSd.buildAllPlatforms();\n\n    console.log(\"\\nBuild complete.\");\n}\n\nbuild();\n"],"names":["async","console","log","StyleDictionary","legacyDesignTokensConfig","buildAllPlatforms","designTokensConfig","build"],"mappings":"sIAIAA,iBACIC,QAAQC,IAAI,oCAEZD,QAAQC,IAAI,yCACW,IAAIC,EAAgBC,IAC5BC,oBAEfJ,QAAQC,IAAI,yCACW,IAAIC,EAAgBG,IAC5BD,oBAEfJ,QAAQC,IAAI,oBAChB,CAEAK"}
+{"version":3,"file":"build.js","sources":["../../../../../src/core/tokens/style-dictionary/build.ts"],"sourcesContent":["import StyleDictionary from \"style-dictionary\";\nimport { designTokensConfig, legacyDesignTokensConfig } from \"./config.js\";\nimport \"./register.js\";\nimport { buildTailwind4Theme } from \"../build-tailwind-4.js\";\n\nasync function build() {\n    console.log(\"Starting design token build...\\n\");\n\n    console.log(\"⚙️ Building legacy tokens\");\n    const legacySd = await new StyleDictionary(legacyDesignTokensConfig);\n    await legacySd.buildAllPlatforms();\n\n    console.log(\"⚙️ Building modern tokens\");\n    const modernSd = await new StyleDictionary(designTokensConfig);\n    await modernSd.buildAllPlatforms();\n\n    console.log(\"⚙️ Generating Tailwind v4 theme\");\n    await buildTailwind4Theme();\n\n    console.log(\"\\nBuild complete.\");\n}\n\nbuild();\n"],"names":["async","console","log","StyleDictionary","legacyDesignTokensConfig","buildAllPlatforms","designTokensConfig","buildTailwind4Theme","build"],"mappings":"mMAKAA,iBACIC,QAAQC,IAAI,oCAEZD,QAAQC,IAAI,yCACW,IAAIC,EAAgBC,IAC5BC,oBAEfJ,QAAQC,IAAI,yCACW,IAAIC,EAAgBG,IAC5BD,oBAEfJ,QAAQC,IAAI,yCACNK,IAENN,QAAQC,IAAI,oBAChB,CAEAM"}

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

@@ -227,6 +227,10 @@ declare const _default: {
             bold: string;
         };
         font: {
+            weight: {
+                normal: string;
+                bold: string;
+            };
             size: {
                 16: string;
                 18: string;
@@ -254,6 +258,116 @@ declare const _default: {
                 64: string;
             };
         };
+        style: {
+            title: {
+                small: {
+                    fontSize: string;
+                    lineHeight: string;
+                    fontWeight: string;
+                };
+                base: {
+                    fontSize: string;
+                    lineHeight: string;
+                    fontWeight: string;
+                };
+            };
+            titleSmall: {
+                small: {
+                    fontSize: string;
+                    lineHeight: string;
+                    fontWeight: string;
+                };
+                base: {
+                    fontSize: string;
+                    lineHeight: string;
+                    fontWeight: string;
+                };
+            };
+            heading_1: {
+                small: {
+                    fontSize: string;
+                    lineHeight: string;
+                    fontWeight: string;
+                };
+                base: {
+                    fontSize: string;
+                    lineHeight: string;
+                    fontWeight: string;
+                };
+            };
+            heading_2: {
+                small: {
+                    fontSize: string;
+                    lineHeight: string;
+                    fontWeight: string;
+                };
+                base: {
+                    fontSize: string;
+                    lineHeight: string;
+                    fontWeight: string;
+                };
+            };
+            heading_3: {
+                small: {
+                    fontSize: string;
+                    lineHeight: string;
+                    fontWeight: string;
+                };
+                base: {
+                    fontSize: string;
+                    lineHeight: string;
+                    fontWeight: string;
+                };
+            };
+            heading_4: {
+                small: {
+                    fontSize: string;
+                    lineHeight: string;
+                    fontWeight: string;
+                };
+                base: {
+                    fontSize: string;
+                    lineHeight: string;
+                    fontWeight: string;
+                };
+            };
+            heading_5: {
+                small: {
+                    fontSize: string;
+                    lineHeight: string;
+                    fontWeight: string;
+                };
+                base: {
+                    fontSize: string;
+                    lineHeight: string;
+                    fontWeight: string;
+                };
+            };
+            body: {
+                small: {
+                    fontSize: string;
+                    lineHeight: string;
+                    fontWeight: string;
+                };
+                base: {
+                    fontSize: string;
+                    lineHeight: string;
+                    fontWeight: string;
+                };
+            };
+            small: {
+                small: {
+                    fontSize: string;
+                    lineHeight: string;
+                    fontWeight: string;
+                };
+                base: {
+                    fontSize: string;
+                    lineHeight: string;
+                    fontWeight: string;
+                };
+            };
+        };
         title: {
             small: {
                 fontSize: string;

package/build/es/core/tokens.js

@@ -1,2 +1,2 @@
-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};
+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:{weight:{normal:"400",bold:"700"},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"}},style:{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"}}},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: { 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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"}
+{"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            weight: { normal: \"400\", bold: \"700\" },\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        style: {\n            title: {\n                small: {\n                    fontSize: \"2.25rem\",\n                    lineHeight: \"2.75rem\",\n                    fontWeight: \"400\",\n                },\n                base: {\n                    fontSize: \"3.5rem\",\n                    lineHeight: \"4rem\",\n                    fontWeight: \"400\",\n                },\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: {\n                    fontSize: \"1rem\",\n                    lineHeight: \"1.5rem\",\n                    fontWeight: \"700\",\n                },\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: {\n                    fontSize: \"1rem\",\n                    lineHeight: \"1.5rem\",\n                    fontWeight: \"400\",\n                },\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","style","title","fontSize","lineHeight","fontWeight","titleSmall","heading_1","heading_2","heading_3","heading_4","heading_5","body"],"mappings":"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"}

package/build/es/tailwind/plugins/jokulTypographyPlugin.js

@@ -1,2 +1,2 @@
-import i from"tailwindcss/plugin.js";import m from"../../core/tokens.js";const{breakpoint:a,typography:e}=m,d=i(({addComponents:i})=>{i({".title":{...e.title.small,[`@media (min-width: ${a.medium})`]:{...e.title.base}},".title-small":{...e.titleSmall.small,[`@media (min-width: ${a.medium})`]:{...e.titleSmall.base}},".heading-1":{...e.heading_1.small,[`@media (min-width: ${a.medium})`]:{...e.heading_1.base}},".heading-2":{...e.heading_2.small,[`@media (min-width: ${a.medium})`]:{...e.heading_2.base}},".heading-3":{...e.heading_3.small,[`@media (min-width: ${a.medium})`]:{...e.heading_3.base}},".heading-4":{...e.heading_4.small,[`@media (min-width: ${a.medium})`]:{...e.heading_4.base}},".heading-5":{...e.heading_5.small,[`@media (min-width: ${a.medium})`]:{...e.heading_5.base}},".body":{...e.body.small,[`@media (min-width: ${a.medium})`]:{...e.body.base}},".small":{...e.small.small,[`@media (min-width: ${a.medium})`]:{...e.small.base}}})});export{d as jokulTypographyPlugin};
+import{kebabCase as e}from"change-case";import o from"tailwindcss/plugin.js";import s from"../../core/tokens.js";const{breakpoint:t,typography:a}=s,i=o(({addComponents:o})=>{const s=Object.entries(a.style).map(([o,s])=>[`.${e(o)}`,{...s.small,[`@media (min-width: ${t.medium})`]:{...s.base}}]);o(Object.fromEntries(s))});export{i as jokulTypographyPlugin};
 //# sourceMappingURL=jokulTypographyPlugin.js.map

package/build/es/tailwind/plugins/jokulTypographyPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"jokulTypographyPlugin.js","sources":["../../../../src/tailwind/plugins/jokulTypographyPlugin.ts"],"sourcesContent":["import plugin from \"tailwindcss/plugin.js\";\nimport tokens from \"../../core/tokens.js\";\n\nconst { breakpoint, typography } = tokens;\n\nexport const jokulTypographyPlugin = plugin(({ addComponents }) => {\n    addComponents({\n        \".title\": {\n            ...typography.title.small,\n            [`@media (min-width: ${breakpoint.medium})`]: {\n                ...typography.title.base,\n            },\n        },\n        \".title-small\": {\n            ...typography.titleSmall.small,\n            [`@media (min-width: ${breakpoint.medium})`]: {\n                ...typography.titleSmall.base,\n            },\n        },\n        \".heading-1\": {\n            ...typography.heading_1.small,\n            [`@media (min-width: ${breakpoint.medium})`]: {\n                ...typography.heading_1.base,\n            },\n        },\n        \".heading-2\": {\n            ...typography.heading_2.small,\n            [`@media (min-width: ${breakpoint.medium})`]: {\n                ...typography.heading_2.base,\n            },\n        },\n        \".heading-3\": {\n            ...typography.heading_3.small,\n            [`@media (min-width: ${breakpoint.medium})`]: {\n                ...typography.heading_3.base,\n            },\n        },\n        \".heading-4\": {\n            ...typography.heading_4.small,\n            [`@media (min-width: ${breakpoint.medium})`]: {\n                ...typography.heading_4.base,\n            },\n        },\n        \".heading-5\": {\n            ...typography.heading_5.small,\n            [`@media (min-width: ${breakpoint.medium})`]: {\n                ...typography.heading_5.base,\n            },\n        },\n        \".body\": {\n            ...typography.body.small,\n            [`@media (min-width: ${breakpoint.medium})`]: {\n                ...typography.body.base,\n            },\n        },\n        \".small\": {\n            ...typography.small.small,\n            [`@media (min-width: ${breakpoint.medium})`]: {\n                ...typography.small.base,\n            },\n        },\n    });\n});\n"],"names":["breakpoint","typography","tokens","jokulTypographyPlugin","plugin","addComponents","title","small","medium","base","titleSmall","heading_1","heading_2","heading_3","heading_4","heading_5","body"],"mappings":"yEAGA,MAAQA,WAAAA,EAAYC,WAAAA,GAAeC,EAEtBC,EAAwBC,EAAO,EAAGC,cAAAA,MAC3CA,EAAc,CACV,SAAU,IACHJ,EAAWK,MAAMC,MACpB,CAAC,sBAAsBP,EAAWQ,WAAY,IACvCP,EAAWK,MAAMG,OAG5B,eAAgB,IACTR,EAAWS,WAAWH,MACzB,CAAC,sBAAsBP,EAAWQ,WAAY,IACvCP,EAAWS,WAAWD,OAGjC,aAAc,IACPR,EAAWU,UAAUJ,MACxB,CAAC,sBAAsBP,EAAWQ,WAAY,IACvCP,EAAWU,UAAUF,OAGhC,aAAc,IACPR,EAAWW,UAAUL,MACxB,CAAC,sBAAsBP,EAAWQ,WAAY,IACvCP,EAAWW,UAAUH,OAGhC,aAAc,IACPR,EAAWY,UAAUN,MACxB,CAAC,sBAAsBP,EAAWQ,WAAY,IACvCP,EAAWY,UAAUJ,OAGhC,aAAc,IACPR,EAAWa,UAAUP,MACxB,CAAC,sBAAsBP,EAAWQ,WAAY,IACvCP,EAAWa,UAAUL,OAGhC,aAAc,IACPR,EAAWc,UAAUR,MACxB,CAAC,sBAAsBP,EAAWQ,WAAY,IACvCP,EAAWc,UAAUN,OAGhC,QAAS,IACFR,EAAWe,KAAKT,MACnB,CAAC,sBAAsBP,EAAWQ,WAAY,IACvCP,EAAWe,KAAKP,OAG3B,SAAU,IACHR,EAAWM,MAAMA,MACpB,CAAC,sBAAsBP,EAAWQ,WAAY,IACvCP,EAAWM,MAAME"}
+{"version":3,"file":"jokulTypographyPlugin.js","sources":["../../../../src/tailwind/plugins/jokulTypographyPlugin.ts"],"sourcesContent":["import { kebabCase } from \"change-case\";\nimport plugin from \"tailwindcss/plugin.js\";\nimport tokens from \"../../core/tokens.js\";\n\nconst { breakpoint, typography } = tokens;\n\nexport const jokulTypographyPlugin = plugin(({ addComponents }) => {\n    const mappedTextStyles = Object.entries(typography.style).map(\n        ([name, style]) => [\n            `.${kebabCase(name)}`,\n            {\n                ...style.small,\n                [`@media (min-width: ${breakpoint.medium})`]: {\n                    ...style.base,\n                },\n            },\n        ],\n    );\n\n    addComponents(Object.fromEntries(mappedTextStyles));\n});\n"],"names":["breakpoint","typography","tokens","jokulTypographyPlugin","plugin","addComponents","mappedTextStyles","Object","entries","style","map","name","kebabCase","small","medium","base","fromEntries"],"mappings":"iHAIA,MAAQA,WAAAA,EAAYC,WAAAA,GAAeC,EAEtBC,EAAwBC,EAAO,EAAGC,cAAAA,MAC3C,MAAMC,EAAmBC,OAAOC,QAAQP,EAAWQ,OAAOC,IACtD,EAAEC,EAAMF,KAAW,CACf,IAAIG,EAAUD,KACd,IACOF,EAAMI,MACT,CAAC,sBAAsBb,EAAWc,WAAY,IACvCL,EAAMM,SAMzBV,EAAcE,OAAOS,YAAYV"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fremtind/jokul",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -16,7 +16,8 @@
   "files": [
     "./build",
     "./styles",
-    "./src/fonts"
+    "./src/fonts",
+    "./src/tailwind/v4"
   ],
   "main": "./build/cjs/index.cjs",
   "exports": {
@@ -36,6 +37,7 @@
     "./styles/fonts": "./styles/fonts/_index.scss",
     "./styles": "./styles/styles.scss",
     "./styles/*": "./styles/*",
+    "./tailwind/v4": "./src/tailwind/v4/jokul-tailwind.css",
     "./tailwind": {
       "import": {
         "types": "./build/es/tailwind/index.d.ts",

package/styles/components/autosuggest/_index.scss

@@ -0,0 +1,2 @@
+@forward "autosuggest";
+@use "../text-input";

package/styles/components/autosuggest/autosuggest.scss

@@ -0,0 +1,87 @@
+@use "../../core/jkl";
+
+@include jkl.comfortable-density-variables {
+    @include jkl.declare-font-variables("jkl-autosuggest-item", "body");
+
+    --jkl-autosuggest-menu-padding: 1rem 0.5rem 0;
+    --jkl-autosuggest-controller-button-width: auto;
+    --jkl-autosuggest-controller-button-padding: 0 #{jkl.$spacing-12};
+    --jkl-autosuggest-controller-button-icon-size: #{jkl.rem(20px)};
+    --jkl-autosuggest-option-padding: 0 #{jkl.$spacing-12};
+    --jkl-autosuggest-option-height: #{jkl.rem(48px)};
+}
+
+@include jkl.compact-density-variables {
+    @include jkl.declare-font-variables("jkl-autosuggest-item", "small");
+
+    --jkl-autosuggest-menu-padding: #{jkl.$spacing-4};
+    --jkl-autosuggest-controller-button-width: #{jkl.rem(24px)};
+    --jkl-autosuggest-controller-button-padding: 0;
+    --jkl-autosuggest-controller-button-icon-size: #{jkl.rem(18px)};
+    --jkl-autosuggest-no-hits-message-font-size: var(--jkl-small-font-size);
+    --jkl-autosuggest-option-padding: 0 #{jkl.$spacing-8};
+    --jkl-autosuggest-option-height: #{jkl.rem(32px)};
+}
+
+.jkl-autosuggest {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    position: relative;
+
+    &[aria-expanded="true"] .jkl-text-input-wrapper {
+        border-radius: jkl.rem(3px) jkl.rem(3px) 0 0;
+    }
+
+    &__no-hits-message {
+        font-size: var(--jkl-autosuggest-no-hits-message-font-size);
+        padding: var(--jkl-autosuggest-option-padding);
+    }
+
+    &__menu {
+        background-color: var(--jkl-color-background-container-high);
+        border: jkl.rem(2px) solid var(--jkl-color-border-input-focus);
+        border-top: none;
+        border-radius: 0 0 jkl.rem(3px) jkl.rem(3px);
+        box-sizing: border-box;
+        position: absolute;
+        inset: 100% jkl.rem(-1px) auto;
+        margin: 0;
+        padding: 0;
+        max-height: 60vh;
+        overflow-y: auto;
+        width: calc(100% + jkl.rem(2px));
+        z-index: jkl.$z-index--dropdown;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    &__item-list {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    &__item {
+        @include jkl.use-font-variables("jkl-autosuggest-item");
+        color: unset;
+        display: flex; // avoids wrapping long names "under" the focus arrow
+        align-items: center;
+        border: 0; // removes native styling
+        background-color: var(--jkl-color-background-interactive);
+        min-height: var(--jkl-autosuggest-option-height);
+        text-align: left;
+
+        @include jkl.motion;
+        transition-property: color, background-color;
+        position: relative;
+        padding: var(--jkl-autosuggest-option-padding);
+        cursor: pointer;
+
+        &:focus,
+        &--active,
+        &:hover {
+            color: var(--jkl-color-text-default);
+            background-color: var(--jkl-color-background-interactive-hover);
+        }
+    }
+}

package/styles/components/breadcrumb/_index.scss

@@ -0,0 +1,2 @@
+@forward "breadcrumb";
+@use "../link";

package/styles/components/breadcrumb/breadcrumb.scss

@@ -0,0 +1,38 @@
+@charset "UTF-8";
+@use "../../core/jkl";
+
+.jkl-breadcrumb {
+    a[aria-current] {
+        text-decoration: none;
+        background-image: none;
+        color: var(--jkl-color-text-interactive);
+
+        &:hover {
+            cursor: default;
+            color: var(--jkl-color-text-interactive-hover);
+            background-image: none;
+        }
+    }
+
+    a:focus-visible {
+        @include jkl.focus-outline;
+    }
+
+    &__list {
+        display: flex;
+        flex-wrap: wrap;
+        list-style: none;
+        margin: 0;
+        padding-inline-start: 0;
+    }
+
+    &__item {
+        margin-bottom: jkl.$unit-10;
+        white-space: nowrap;
+    }
+
+    &__item-separator {
+        padding-left: jkl.$unit-10;
+        padding-right: jkl.$unit-10;
+    }
+}

package/styles/components/button/_index.scss

@@ -0,0 +1,2 @@
+@forward "button";
+@use "../loader" as button;

package/styles/components/button/button.scss

@@ -0,0 +1,169 @@
+@charset "UTF-8";
+@use "sass:string";
+@use "../../core/jkl";
+
+@include jkl.comfortable-density-variables {
+    --jkl-button-padding-block: #{jkl.$unit-10};
+    --jkl-button-padding-text: #{jkl.$unit-30};
+    --jkl-button-padding-icon: #{jkl.$unit-20};
+    --jkl-button-padding-icon-button: #{jkl.$unit-10};
+    --jkl-button-teritary-padding-icon: #{jkl.$unit-05};
+    --jkl-button-font-size: #{jkl.$typography-body-small-font-size};
+    --jkl-button-line-height: #{jkl.$typography-body-small-line-height};
+
+    @include jkl.from-medium-device {
+        --jkl-button-font-size: #{jkl.$typography-body-base-font-size};
+        --jkl-button-line-height: #{jkl.$typography-body-base-line-height};
+    }
+}
+
+@include jkl.compact-density-variables {
+    --jkl-button-padding-block: #{jkl.$unit-05};
+    --jkl-button-padding-text: #{jkl.$unit-15};
+    --jkl-button-padding-icon: #{jkl.$unit-10};
+    --jkl-button-padding-icon-button: #{jkl.$unit-05};
+    --jkl-button-teritary-padding-icon: #{jkl.$unit-02};
+    --jkl-button-padding-ghost-inline: #{jkl.$unit-05};
+    --jkl-button-font-size: #{jkl.$typography-small-small-font-size};
+    --jkl-button-line-height: #{jkl.$typography-small-small-line-height};
+
+    @include jkl.from-medium-device {
+        --jkl-button-font-size: #{jkl.$typography-small-base-font-size};
+        --jkl-button-line-height: #{jkl.$typography-small-base-line-height};
+        --jkl-button-icon-weight: #{jkl.$icon-weight-bold};
+    }
+}
+
+.jkl-button {
+    --jkl-icon-weight: var(--jkl-button-icon-weight, initial);
+    --text-color: var(--jkl-color-text-default);
+    --background-color: transparent;
+    --border-radius: 0;
+    --border-width: #{jkl.rem(1px)}; // For secondary og tertiary button
+
+    display: inline-block;
+
+    font-weight: #{jkl.$typography-weight-bold};
+    font-size: var(--jkl-button-font-size);
+    line-height: var(--jkl-button-line-height);
+
+    cursor: pointer;
+    user-select: none;
+    background: var(--background-color);
+    color: var(--text-color);
+    border: unset;
+    text-decoration: none;
+    -webkit-tap-highlight-color: transparent;
+
+    border-radius: var(--border-radius);
+    padding-inline: var(--jkl-button-padding-text);
+    padding-block: var(--jkl-button-padding-block);
+    position: relative;
+    overflow: hidden;
+    max-width: 100%;
+    animation: a 0.3s linear;
+
+    @include jkl.motion("standard", "productive", background-color);
+
+    &:has(.jkl-button__text) {
+        min-width: 9.5ch;
+    }
+
+    &:has(.jkl-icon:first-child) {
+        padding-inline-start: var(--jkl-button-padding-icon);
+    }
+
+    &:has(.jkl-icon:last-child) {
+        padding-inline-end: var(--jkl-button-padding-icon);
+    }
+
+    &:has(.jkl-icon:first-child):has(.jkl-icon:last-child) {
+        padding-inline: var(--jkl-button-padding-icon-button);
+    }
+
+    &__label {
+        @include jkl.motion("standard", "expressive", translate);
+
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: jkl.$unit-02;
+        pointer-events: none;
+    }
+
+    &__loader {
+        @include jkl.motion("standard", "expressive", opacity, translate);
+
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        translate: -50% 350%;
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    &__text {
+        // Håndter tekster som er lenger enn knappen
+        // Knappen vokser til teksten, men kan f.eks. begrenses
+        // av sidebredde på mobil
+        width: 100%;
+        max-width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    &[data-loading="true"] &__label {
+        translate: 0 -120%;
+    }
+
+    &[data-loading="true"] &__loader {
+        translate: -50% -50%;
+        opacity: 1;
+    }
+
+    &:focus-visible {
+        @include jkl.focus-outline;
+    }
+
+    &:hover {
+        background-color: color-mix(in srgb, var(--background-color), var(--text-color) 15%);
+
+        @media (forced-colors: active) {
+            @include jkl.focus-outline;
+        }
+    }
+
+    &--primary,
+    &--secondary,
+    &--ghost {
+        --border-radius: 999px;
+    }
+
+    &--primary {
+        --background-color: var(--jkl-color-background-action);
+        --text-color: var(--jkl-color-text-on-action);
+
+        @media (forced-colors: active) {
+            border: calc(var(--border-width) * 2) solid Highlight;
+        }
+    }
+
+    &--secondary {
+        border: var(--border-width) solid var(--text-color);
+    }
+
+    &--tertiary {
+        border-bottom: var(--border-width) solid var(--text-color);
+        padding-inline: var(--jkl-button-teritary-padding-icon);
+
+        &:has(.jkl-icon:first-child) {
+            padding-inline: var(--jkl-button-teritary-padding-icon) calc(var(--jkl-button-teritary-padding-icon) * 2);
+        }
+
+        &:has(.jkl-icon:last-child) {
+            padding-inline: calc(var(--jkl-button-teritary-padding-icon) * 2) var(--jkl-button-teritary-padding-icon);
+        }
+    }
+}

package/styles/components/card/_index.scss

@@ -0,0 +1,3 @@
+@forward "card";
+@use "../image" as image;
+@use "../tag" as tag;