@fremtind/jokul 5.0.5 → 5.2.0

package/build/es/components/icon/icons/SuccessIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"SuccessIcon.js","sources":["../../../../../src/components/icon/icons/SuccessIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const SuccessIcon: IconComponent = (props: IconProps) => (\n    <Icon bold filled {...props}>\n        {\"\\uf0be\"}\n    </Icon>\n);\nSuccessIcon.displayName = \"SuccessIcon\";\n"],"names":["SuccessIcon","props","jsx","Icon","bold","filled","children","displayName"],"mappings":"wFAIO,MAAMA,EAA8BC,GACvCC,EAACC,EAAA,CAAKC,MAAI,EAACC,QAAM,KAAKJ,EACjBK,SAAA,MAGTN,EAAYO,YAAc"}
+{"version":3,"file":"SuccessIcon.js","sources":["../../../../../src/components/icon/icons/SuccessIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const SuccessIcon: IconComponent = (props: IconProps) => (\n    <Icon {...props} filled>\n        {\"\\uf0be\"}\n    </Icon>\n);\nSuccessIcon.displayName = \"SuccessIcon\";\n"],"names":["SuccessIcon","props","jsx","Icon","filled","children","displayName"],"mappings":"wFAIO,MAAMA,EAA8BC,GACvCC,EAACC,MAASF,EAAOG,QAAM,EAClBC,SAAA,MAGTL,EAAYM,YAAc"}

package/build/es/components/icon/icons/WarningIcon.js

@@ -1,2 +1,2 @@
-import{jsx as o}from"react/jsx-runtime";import"react";import{Icon as r}from"../Icon.js";const n=n=>o(r,{bold:!0,filled:!0,...n,children:""});n.displayName="WarningIcon";export{n as WarningIcon};
+import{jsx as r}from"react/jsx-runtime";import"react";import{Icon as n}from"../Icon.js";const o=o=>r(n,{...o,filled:!0,children:""});o.displayName="WarningIcon";export{o as WarningIcon};
 //# sourceMappingURL=WarningIcon.js.map

package/build/es/components/icon/icons/WarningIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"WarningIcon.js","sources":["../../../../../src/components/icon/icons/WarningIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const WarningIcon: IconComponent = (props: IconProps) => (\n    <Icon bold filled {...props}>\n        {\"\\uf083\"}\n    </Icon>\n);\nWarningIcon.displayName = \"WarningIcon\";\n"],"names":["WarningIcon","props","jsx","Icon","bold","filled","children","displayName"],"mappings":"wFAIO,MAAMA,EAA8BC,GACvCC,EAACC,EAAA,CAAKC,MAAI,EAACC,QAAM,KAAKJ,EACjBK,SAAA,MAGTN,EAAYO,YAAc"}
+{"version":3,"file":"WarningIcon.js","sources":["../../../../../src/components/icon/icons/WarningIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, type IconComponent } from \"../Icon.js\";\nimport type { IconProps } from \"../types.js\";\n\nexport const WarningIcon: IconComponent = (props: IconProps) => (\n    <Icon {...props} filled>\n        {\"\\uf083\"}\n    </Icon>\n);\nWarningIcon.displayName = \"WarningIcon\";\n"],"names":["WarningIcon","props","jsx","Icon","filled","children","displayName"],"mappings":"wFAIO,MAAMA,EAA8BC,GACvCC,EAACC,MAASF,EAAOG,QAAM,EAClBC,SAAA,MAGTL,EAAYM,YAAc"}

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

@@ -1,6 +1,5 @@
 export type IconVariant = "inherit" | "small" | "medium";
 export interface IconProps {
-    as?: "div" | "span";
     "data-testid"?: string;
     /**
      * @deprecated Størrelsen settes nå automatisk etter fontstørrelse.
@@ -10,7 +9,7 @@ export interface IconProps {
      */
     variant?: IconVariant;
     /**
-     * Angir om ikonet skal vises i fet versjon
+     * @deprecated Fra Jøkul 5.0 har ikonene alltid samme vekt, og bold har ingen effekt
      * @default false
      */
     bold?: boolean;

package/build/es/components/input-group/InputGroup.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as r,Fragment as l}from"react/jsx-runtime";import{c as i}from"../../../clsx-BeLtu-UY.js";import s,{forwardRef as a}from"react";import{useId as o}from"../../hooks/useId/useId.js";import{Label as p}from"./Label.js";import{SupportLabel as t}from"./SupportLabel.js";const n=a((a,n)=>{const{className:d,children:c,errorLabel:m,helpLabel:u,inline:b,label:h,labelProps:f,render:j,supportLabelProps:y,description:L,tooltip:k,id:v,...x}=a,g=o(v||"jkl-input",{generateSuffix:!v}),I=o("jkl-support-label"),S=!!k,w=m||u,N=m?"error":u?"help":void 0,A={"aria-describedby":w?I:void 0,"aria-invalid":!!m||void 0,id:g},E=j?()=>j(A):()=>{const e=s.Children.toArray(a.children)[0];if(s.isValidElement(e))return s.cloneElement(e,{...A,...e.props})};return e("div",{ref:n,className:i(d,"jkl-input-group",{"jkl-input-group--inline":b}),...x,children:[r(p,{standAlone:!0,htmlFor:g,srOnly:b,...f,style:{whiteSpace:S?"nowrap":void 0,...f?.style},children:S?e(l,{children:[r("span",{style:{whiteSpace:"normal"},children:h})," ",k]}):h}),L&&r("p",{className:"jkl-input-group-description",children:L}),E(),r(t,{srOnly:b,...y,label:w,labelType:N,id:I})]})});n.displayName="InputGroup";export{n as InputGroup};
+import{jsxs as e,jsx as r,Fragment as l}from"react/jsx-runtime";import{c as i}from"../../../clsx-BeLtu-UY.js";import o,{forwardRef as s}from"react";import{useId as a}from"../../hooks/useId/useId.js";import{Label as n}from"./Label.js";import{SupportLabel as p}from"./SupportLabel.js";const t=s((s,t)=>{const{className:d,children:c,errorLabel:m,helpLabel:u,inline:b,label:h,labelProps:j,render:f,supportLabelProps:y,description:v,tooltip:k,id:L,...x}=s,g=a(L||"jkl-input",{generateSuffix:!L}),I=a("jkl-support-label"),S=a("jkl-description"),w=!!k,N=m||u,A=m?"error":u?"help":void 0,E={"aria-describedby":[v?S:void 0,N?I:void 0].filter(Boolean).join(" ")||void 0,"aria-invalid":!!m||void 0,id:g},F=f?()=>f(E):()=>{const e=o.Children.toArray(s.children)[0];if(o.isValidElement(e))return o.cloneElement(e,{...E,...e.props})};return e("div",{ref:t,className:i(d,"jkl-input-group",{"jkl-input-group--inline":b}),...x,children:[r(n,{standAlone:!0,htmlFor:g,srOnly:b,...j,style:{whiteSpace:w?"nowrap":void 0,...j?.style},children:w?e(l,{children:[r("span",{style:{whiteSpace:"normal"},children:h})," ",k]}):h}),v&&r("p",{id:S,className:"jkl-input-group-description",children:v}),F(),r(p,{srOnly:b,...y,label:N,labelType:A,id:I})]})});t.displayName="InputGroup";export{t as InputGroup};
 //# sourceMappingURL=InputGroup.js.map

package/build/es/components/input-group/InputGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.js","sources":["../../../../src/components/input-group/InputGroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { Label } from \"./Label.js\";\nimport { SupportLabel } from \"./SupportLabel.js\";\nimport type { InputGroupProps, InputProps } from \"./types.js\";\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(\n    (props, ref) => {\n        const {\n            className,\n            children,\n            errorLabel,\n            helpLabel,\n            inline,\n            label,\n            labelProps,\n            render,\n            supportLabelProps,\n            description,\n            tooltip,\n            id,\n            ...rest\n        } = props;\n\n        const uid = useId(id || \"jkl-input\", { generateSuffix: !id });\n        const supportId = useId(\"jkl-support-label\");\n\n        const hasTooltip = !!tooltip;\n\n        const supportText = errorLabel || helpLabel;\n        const supportTextType = errorLabel\n            ? \"error\"\n            : helpLabel\n              ? \"help\"\n              : undefined;\n\n        const describedBy = supportText ? supportId : undefined;\n\n        const inputProps: InputProps = {\n            \"aria-describedby\": describedBy,\n            \"aria-invalid\": errorLabel ? true : undefined,\n            id: uid,\n        };\n\n        const renderInput = render\n            ? () => render(inputProps)\n            : () => {\n                  const input = React.Children.toArray(props.children)[0];\n\n                  if (!React.isValidElement<InputProps>(input)) return;\n\n                  return React.cloneElement<InputProps>(input, {\n                      ...inputProps,\n                      ...input.props,\n                  });\n              };\n\n        return (\n            <div\n                ref={ref}\n                className={clsx(className, \"jkl-input-group\", {\n                    \"jkl-input-group--inline\": inline,\n                })}\n                {...rest}\n            >\n                <Label\n                    standAlone\n                    htmlFor={uid}\n                    srOnly={inline}\n                    {...labelProps}\n                    style={{\n                        whiteSpace: hasTooltip ? \"nowrap\" : undefined,\n                        ...labelProps?.style,\n                    }}\n                >\n                    {hasTooltip ? (\n                        <>\n                            <span style={{ whiteSpace: \"normal\" }}>\n                                {label}\n                            </span>\n                            {\"\\u00A0\"}\n                            {tooltip}\n                        </>\n                    ) : (\n                        label\n                    )}\n                </Label>\n                {description && (\n                    <p className=\"jkl-input-group-description\">{description}</p>\n                )}\n                {renderInput()}\n                <SupportLabel\n                    srOnly={inline}\n                    {...supportLabelProps}\n                    label={supportText}\n                    labelType={supportTextType}\n                    id={supportId}\n                />\n            </div>\n        );\n    },\n);\n\nInputGroup.displayName = \"InputGroup\";\n"],"names":["InputGroup","forwardRef","props","ref","className","children","errorLabel","helpLabel","inline","label","labelProps","render","supportLabelProps","description","tooltip","id","rest","uid","useId","generateSuffix","supportId","hasTooltip","supportText","supportTextType","inputProps","renderInput","input","React","Children","toArray","isValidElement","cloneElement","jsxs","clsx","jsx","Label","standAlone","htmlFor","srOnly","style","whiteSpace","Fragment","SupportLabel","labelType","displayName"],"mappings":"2RAOO,MAAMA,EAAaC,EACtB,CAACC,EAAOC,KACJ,MACIC,UAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,kBAAAA,EACAC,YAAAA,EACAC,QAAAA,EACAC,GAAAA,KACGC,GACHd,EAEEe,EAAMC,EAAMH,GAAM,YAAa,CAAEI,gBAAiBJ,IAClDK,EAAYF,EAAM,qBAElBG,IAAeP,EAEfQ,EAAchB,GAAcC,EAC5BgB,EAAkBjB,EAClB,QACAC,EACE,YACA,EAIFiB,EAAyB,CAC3B,mBAHgBF,EAAcF,OAAY,EAI1C,iBAAgBd,QAAoB,EACpCS,GAAIE,GAGFQ,EAAcd,EACd,IAAMA,EAAOa,GACb,KACI,MAAME,EAAQC,EAAMC,SAASC,QAAQ3B,EAAMG,UAAU,GAErD,GAAKsB,EAAMG,eAA2BJ,GAEtC,OAAOC,EAAMI,aAAyBL,EAAO,IACtCF,KACAE,EAAMxB,SAIvB,OACI8B,EAAC,MAAA,CACG7B,IAAAA,EACAC,UAAW6B,EAAK7B,EAAW,kBAAmB,CAC1C,0BAA2BI,OAE3BQ,EAEJX,SAAA,CAAA6B,EAACC,EAAA,CACGC,YAAU,EACVC,QAASpB,EACTqB,OAAQ9B,KACJE,EACJ6B,MAAO,CACHC,WAAYnB,EAAa,cAAW,KACjCX,GAAY6B,OAGlBlC,WACG2B,EAAAS,EAAA,CACIpC,SAAA,CAAA6B,EAAC,QAAKK,MAAO,CAAEC,WAAY,UACtBnC,SAAAI,IAEJ,IACAK,KAGLL,IAGPI,GACGqB,EAAC,IAAA,CAAE9B,UAAU,8BAA+BC,SAAAQ,IAE/CY,IACDS,EAACQ,EAAA,CACGJ,OAAQ9B,KACJI,EACJH,MAAOa,EACPqB,UAAWpB,EACXR,GAAIK,SAOxBpB,EAAW4C,YAAc"}
+{"version":3,"file":"InputGroup.js","sources":["../../../../src/components/input-group/InputGroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { Label } from \"./Label.js\";\nimport { SupportLabel } from \"./SupportLabel.js\";\nimport type { InputGroupProps, InputProps } from \"./types.js\";\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(\n    (props, ref) => {\n        const {\n            className,\n            children,\n            errorLabel,\n            helpLabel,\n            inline,\n            label,\n            labelProps,\n            render,\n            supportLabelProps,\n            description,\n            tooltip,\n            id,\n            ...rest\n        } = props;\n\n        const uid = useId(id || \"jkl-input\", { generateSuffix: !id });\n        const supportId = useId(\"jkl-support-label\");\n        const descriptionId = useId(\"jkl-description\");\n\n        const hasTooltip = !!tooltip;\n\n        const supportText = errorLabel || helpLabel;\n        const supportTextType = errorLabel\n            ? \"error\"\n            : helpLabel\n              ? \"help\"\n              : undefined;\n\n        const describedBy =\n            [\n                description ? descriptionId : undefined,\n                supportText ? supportId : undefined,\n            ]\n                .filter(Boolean)\n                .join(\" \") || undefined;\n\n        const inputProps: InputProps = {\n            \"aria-describedby\": describedBy,\n            \"aria-invalid\": errorLabel ? true : undefined,\n            id: uid,\n        };\n\n        const renderInput = render\n            ? () => render(inputProps)\n            : () => {\n                  const input = React.Children.toArray(props.children)[0];\n\n                  if (!React.isValidElement<InputProps>(input)) return;\n\n                  return React.cloneElement<InputProps>(input, {\n                      ...inputProps,\n                      ...input.props,\n                  });\n              };\n\n        return (\n            <div\n                ref={ref}\n                className={clsx(className, \"jkl-input-group\", {\n                    \"jkl-input-group--inline\": inline,\n                })}\n                {...rest}\n            >\n                <Label\n                    standAlone\n                    htmlFor={uid}\n                    srOnly={inline}\n                    {...labelProps}\n                    style={{\n                        whiteSpace: hasTooltip ? \"nowrap\" : undefined,\n                        ...labelProps?.style,\n                    }}\n                >\n                    {hasTooltip ? (\n                        <>\n                            <span style={{ whiteSpace: \"normal\" }}>\n                                {label}\n                            </span>\n                            {\"\\u00A0\"}\n                            {tooltip}\n                        </>\n                    ) : (\n                        label\n                    )}\n                </Label>\n                {description && (\n                    <p\n                        id={descriptionId}\n                        className=\"jkl-input-group-description\"\n                    >\n                        {description}\n                    </p>\n                )}\n                {renderInput()}\n                <SupportLabel\n                    srOnly={inline}\n                    {...supportLabelProps}\n                    label={supportText}\n                    labelType={supportTextType}\n                    id={supportId}\n                />\n            </div>\n        );\n    },\n);\n\nInputGroup.displayName = \"InputGroup\";\n"],"names":["InputGroup","forwardRef","props","ref","className","children","errorLabel","helpLabel","inline","label","labelProps","render","supportLabelProps","description","tooltip","id","rest","uid","useId","generateSuffix","supportId","descriptionId","hasTooltip","supportText","supportTextType","inputProps","filter","Boolean","join","renderInput","input","React","Children","toArray","isValidElement","cloneElement","jsxs","clsx","jsx","Label","standAlone","htmlFor","srOnly","style","whiteSpace","Fragment","SupportLabel","labelType","displayName"],"mappings":"2RAOO,MAAMA,EAAaC,EACtB,CAACC,EAAOC,KACJ,MACIC,UAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,kBAAAA,EACAC,YAAAA,EACAC,QAAAA,EACAC,GAAAA,KACGC,GACHd,EAEEe,EAAMC,EAAMH,GAAM,YAAa,CAAEI,gBAAiBJ,IAClDK,EAAYF,EAAM,qBAClBG,EAAgBH,EAAM,mBAEtBI,IAAeR,EAEfS,EAAcjB,GAAcC,EAC5BiB,EAAkBlB,EAClB,QACAC,EACE,YACA,EAUFkB,EAAyB,CAC3B,mBARA,CACIZ,EAAcQ,OAAgB,EAC9BE,EAAcH,OAAY,GAEzBM,OAAOC,SACPC,KAAK,WAAQ,EAIlB,iBAAgBtB,QAAoB,EACpCS,GAAIE,GAGFY,EAAclB,EACd,IAAMA,EAAOc,GACb,KACI,MAAMK,EAAQC,EAAMC,SAASC,QAAQ/B,EAAMG,UAAU,GAErD,GAAK0B,EAAMG,eAA2BJ,GAEtC,OAAOC,EAAMI,aAAyBL,EAAO,IACtCL,KACAK,EAAM5B,SAIvB,OACIkC,EAAC,MAAA,CACGjC,IAAAA,EACAC,UAAWiC,EAAKjC,EAAW,kBAAmB,CAC1C,0BAA2BI,OAE3BQ,EAEJX,SAAA,CAAAiC,EAACC,EAAA,CACGC,YAAU,EACVC,QAASxB,EACTyB,OAAQlC,KACJE,EACJiC,MAAO,CACHC,WAAYtB,EAAa,cAAW,KACjCZ,GAAYiC,OAGlBtC,WACG+B,EAAAS,EAAA,CACIxC,SAAA,CAAAiC,EAAC,QAAKK,MAAO,CAAEC,WAAY,UACtBvC,SAAAI,IAEJ,IACAK,KAGLL,IAGPI,GACGyB,EAAC,IAAA,CACGvB,GAAIM,EACJjB,UAAU,8BAETC,SAAAQ,IAGRgB,IACDS,EAACQ,EAAA,CACGJ,OAAQlC,KACJI,EACJH,MAAOc,EACPwB,UAAWvB,EACXT,GAAIK,SAOxBpB,EAAWgD,YAAc"}

package/build/es/components/radio-button/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { SupportLabel } from \"../input-group/SupportLabel.js\";\nimport { BaseRadioButton } from \"./BaseRadioButton.js\";\nimport { useRadioGroupContext } from \"./radioGroupContext.js\";\nimport type { RadioButtonProps } from \"./types.js\";\n\nexport const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(\n    (props, ref) => {\n        const { checked, value, supportLabelProps, helpLabel, ...rest } = props;\n        const { value: selectedValue, ...context } = useRadioGroupContext();\n        const supportId = useId(\"jkl-support-label\");\n\n        return (\n            <>\n                <BaseRadioButton\n                    {...context}\n                    {...rest}\n                    ref={ref}\n                    checked={\n                        typeof checked !== \"undefined\"\n                            ? checked\n                            : typeof selectedValue !== \"undefined\"\n                              ? value === selectedValue\n                              : undefined\n                    }\n                    value={value}\n                    aria-describedby={helpLabel ? supportId : undefined}\n                />\n                <SupportLabel\n                    {...supportLabelProps}\n                    label={helpLabel}\n                    labelType={\"help\"}\n                    id={supportId}\n                />\n            </>\n        );\n    },\n);\n\nRadioButton.displayName = \"RadioButton\";\n"],"names":["RadioButton","forwardRef","props","ref","checked","value","supportLabelProps","helpLabel","rest","selectedValue","context","useRadioGroupContext","supportId","useId","jsxs","Fragment","children","jsx","BaseRadioButton","SupportLabel","label","labelType","id","displayName"],"mappings":"yUAOO,MAAMA,EAAcC,EACvB,CAACC,EAAOC,KACJ,MAAQC,QAAAA,EAASC,MAAAA,EAAOC,kBAAAA,EAAmBC,UAAAA,KAAcC,GAASN,GAC1DG,MAAOI,KAAkBC,GAAYC,IACvCC,EAAYC,EAAM,qBAExB,OACIC,EAAAC,EAAA,CACIC,SAAA,CAAAC,EAACC,EAAA,IACOR,KACAF,EACJL,IAAAA,EACAC,eACWA,EAAY,IACbA,SACOK,EAAkB,IACvBJ,IAAUI,OACV,EAEZJ,MAAAA,EACA,mBAAkBE,EAAYK,OAAY,IAE9CK,EAACE,EAAA,IACOb,EACJc,MAAOb,EACPc,UAAW,OACXC,GAAIV,SAOxBZ,EAAYuB,YAAc"}
+{"version":3,"file":"RadioButton.js","sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { SupportLabel } from \"../input-group/SupportLabel.js\";\nimport { BaseRadioButton } from \"./BaseRadioButton.js\";\nimport { useRadioGroupContext } from \"./radioGroupContext.js\";\nimport type { RadioButtonProps } from \"./types.js\";\n\nexport const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(\n    (props, ref) => {\n        const { checked, value, supportLabelProps, helpLabel, ...rest } = props;\n        const { value: selectedValue, ...context } = useRadioGroupContext();\n\n        const supportId = useId(\"jkl-support-label\");\n\n        return (\n            <>\n                <BaseRadioButton\n                    {...context}\n                    {...rest}\n                    ref={ref}\n                    checked={\n                        typeof checked !== \"undefined\"\n                            ? checked\n                            : typeof selectedValue !== \"undefined\"\n                              ? value === selectedValue\n                              : undefined\n                    }\n                    value={value}\n                    aria-describedby={helpLabel ? supportId : undefined}\n                />\n                <SupportLabel\n                    {...supportLabelProps}\n                    label={helpLabel}\n                    labelType={\"help\"}\n                    id={supportId}\n                />\n            </>\n        );\n    },\n);\n\nRadioButton.displayName = \"RadioButton\";\n"],"names":["RadioButton","forwardRef","props","ref","checked","value","supportLabelProps","helpLabel","rest","selectedValue","context","useRadioGroupContext","supportId","useId","jsxs","Fragment","children","jsx","BaseRadioButton","SupportLabel","label","labelType","id","displayName"],"mappings":"yUAOO,MAAMA,EAAcC,EACvB,CAACC,EAAOC,KACJ,MAAQC,QAAAA,EAASC,MAAAA,EAAOC,kBAAAA,EAAmBC,UAAAA,KAAcC,GAASN,GAC1DG,MAAOI,KAAkBC,GAAYC,IAEvCC,EAAYC,EAAM,qBAExB,OACIC,EAAAC,EAAA,CACIC,SAAA,CAAAC,EAACC,EAAA,IACOR,KACAF,EACJL,IAAAA,EACAC,eACWA,EAAY,IACbA,SACOK,EAAkB,IACvBJ,IAAUI,OACV,EAEZJ,MAAAA,EACA,mBAAkBE,EAAYK,OAAY,IAE9CK,EAACE,EAAA,IACOb,EACJc,MAAOb,EACPc,UAAW,OACXC,GAAIV,SAOxBZ,EAAYuB,YAAc"}

package/build/es/components/system-message/SystemMessage.js

@@ -1,2 +1,2 @@
-import{jsx as s,jsxs as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import"react";import{useId as t}from"../../hooks/useId/useId.js";import{DismissButton as m}from"../message/DismissButton.js";import{MessageIcon as i}from"./common/MessageIcon.js";function n(n){return({id:l,className:d,maxContentWidth:o,paddingLeft:r,role:c="status",dismissed:g,dismissAction:y,children:h,...u})=>{const j=t(l||"jkl-system-message",{generateSuffix:!l});return s("div",{role:c,...u,id:j,className:a("jkl-system-message",`jkl-system-message--${n}`,d,{"jkl-system-message--dismissed":g}),children:e("div",{className:"jkl-system-message__content","data-testid":"system-message-content","data-theme":"light",style:{maxWidth:o,paddingLeft:r},children:[s(i,{variant:n||"info"}),s("span",{className:"jkl-system-message__message",children:h}),y?.handleDismiss&&s(m,{"data-theme":"light","aria-controls":j,className:"jkl-system-message__dismiss-button",label:y.buttonTitle||"Lukk",onClick:y.handleDismiss})]})})}}const l=({id:n,className:l,maxContentWidth:d,paddingLeft:o,role:r="status",dismissed:c,variant:g="info",dismissAction:y,children:h,...u})=>{const j=t(n||"jkl-system-message",{generateSuffix:!n});return s("div",{role:r,...u,id:j,className:a("jkl-system-message",`jkl-system-message--${g}`,l,{"jkl-system-message--dismissed":c}),children:e("div",{className:"jkl-system-message__content","data-testid":"system-message-content","data-theme":"light",style:{maxWidth:d,paddingLeft:o},children:[s(i,{variant:g}),s("span",{className:"jkl-system-message__message",children:h}),y?.handleDismiss&&s(m,{"data-theme":"light","aria-controls":j,className:"jkl-system-message__dismiss-button",label:y.buttonTitle||"Lukk",onClick:y.handleDismiss})]})})},d=n("info");d.displayName="InfoSystemMessage";const o=n("error");o.displayName="ErrorSystemMessage";const r=n("warning");r.displayName="WarningSystemMessage";const c=n("success");c.displayName="SuccessSystemMessage";export{o as ErrorSystemMessage,d as InfoSystemMessage,c as SuccessSystemMessage,l as SystemMessage,r as WarningSystemMessage};
+import{jsx as s,jsxs as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import"react";import{useId as t}from"../../hooks/useId/useId.js";import{DismissButton as m}from"../message/DismissButton.js";import{MessageIcon as i}from"./common/MessageIcon.js";function n(n){return({id:l,className:o,maxContentWidth:d,paddingLeft:r,role:c="status",dismissed:g,dismissAction:y,children:u,...j})=>{const k=t(l||"jkl-system-message",{generateSuffix:!l});return s("div",{role:c,...j,id:k,className:a("jkl-system-message",`jkl-system-message--${n}`,o,{"jkl-system-message--dismissed":g}),children:e("div",{className:"jkl-system-message__content","data-testid":"system-message-content",style:{maxWidth:d,paddingLeft:r},children:[s(i,{variant:n||"info"}),s("span",{className:"jkl-system-message__message",children:u}),y?.handleDismiss&&s(m,{"aria-controls":k,className:"jkl-system-message__dismiss-button",label:y.buttonTitle||"Lukk",onClick:y.handleDismiss})]})})}}const l=({id:n,className:l,maxContentWidth:o,paddingLeft:d,role:r="status",dismissed:c,variant:g="info",dismissAction:y,children:u,...j})=>{const k=t(n||"jkl-system-message",{generateSuffix:!n});return s("div",{role:r,...j,id:k,className:a("jkl-system-message",`jkl-system-message--${g}`,l,{"jkl-system-message--dismissed":c}),children:e("div",{className:"jkl-system-message__content","data-testid":"system-message-content",style:{maxWidth:o,paddingLeft:d},children:[s(i,{variant:g}),s("span",{className:"jkl-system-message__message",children:u}),y?.handleDismiss&&s(m,{"aria-controls":k,className:"jkl-system-message__dismiss-button",label:y.buttonTitle||"Lukk",onClick:y.handleDismiss})]})})},o=n("info");o.displayName="InfoSystemMessage";const d=n("error");d.displayName="ErrorSystemMessage";const r=n("warning");r.displayName="WarningSystemMessage";const c=n("success");c.displayName="SuccessSystemMessage";export{d as ErrorSystemMessage,o as InfoSystemMessage,c as SuccessSystemMessage,l as SystemMessage,r as WarningSystemMessage};
 //# sourceMappingURL=SystemMessage.js.map

package/build/es/components/system-message/SystemMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SystemMessage.js","sources":["../../../../src/components/system-message/SystemMessage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { DismissButton } from \"../message/DismissButton.js\";\nimport { MessageIcon } from \"./common/MessageIcon.js\";\nimport type { SystemMessageProps } from \"./types.js\";\n\nfunction systemFactory(\n    variant: SystemMessageProps[\"variant\"],\n): React.FC<SystemMessageProps> {\n    const SystemMessage: React.FC<SystemMessageProps> = ({\n        id,\n        className,\n        maxContentWidth,\n        paddingLeft,\n        role = \"status\",\n        dismissed,\n        dismissAction,\n        children,\n        ...rest\n    }) => {\n        const systemId = useId(id || \"jkl-system-message\", {\n            generateSuffix: !id,\n        });\n\n        return (\n            <div\n                role={role}\n                {...rest}\n                id={systemId}\n                className={clsx(\n                    \"jkl-system-message\",\n                    `jkl-system-message--${variant}`,\n                    className,\n                    {\n                        \"jkl-system-message--dismissed\": dismissed,\n                    },\n                )}\n            >\n                <div\n                    className=\"jkl-system-message__content\"\n                    data-testid=\"system-message-content\"\n                    data-theme=\"light\"\n                    style={{\n                        maxWidth: maxContentWidth,\n                        paddingLeft,\n                    }}\n                >\n                    <MessageIcon variant={variant || \"info\"} />\n                    <span className=\"jkl-system-message__message\">\n                        {children}\n                    </span>\n                    {dismissAction?.handleDismiss && (\n                        <DismissButton\n                            data-theme=\"light\"\n                            aria-controls={systemId}\n                            className=\"jkl-system-message__dismiss-button\"\n                            label={dismissAction.buttonTitle || \"Lukk\"}\n                            onClick={dismissAction.handleDismiss}\n                        />\n                    )}\n                </div>\n            </div>\n        );\n    };\n    return SystemMessage;\n}\n\nexport const SystemMessage: React.FC<SystemMessageProps> = ({\n    id,\n    className,\n    maxContentWidth,\n    paddingLeft,\n    role = \"status\",\n    dismissed,\n    variant = \"info\",\n    dismissAction,\n    children,\n    ...rest\n}) => {\n    const systemId = useId(id || \"jkl-system-message\", {\n        generateSuffix: !id,\n    });\n\n    return (\n        <div\n            role={role}\n            {...rest}\n            id={systemId}\n            className={clsx(\n                \"jkl-system-message\",\n                `jkl-system-message--${variant}`,\n                className,\n                {\n                    \"jkl-system-message--dismissed\": dismissed,\n                },\n            )}\n        >\n            <div\n                className=\"jkl-system-message__content\"\n                data-testid=\"system-message-content\"\n                data-theme=\"light\"\n                style={{\n                    maxWidth: maxContentWidth,\n                    paddingLeft,\n                }}\n            >\n                <MessageIcon variant={variant} />\n                <span className=\"jkl-system-message__message\">{children}</span>\n                {dismissAction?.handleDismiss && (\n                    <DismissButton\n                        data-theme=\"light\"\n                        aria-controls={systemId}\n                        className=\"jkl-system-message__dismiss-button\"\n                        label={dismissAction.buttonTitle || \"Lukk\"}\n                        onClick={dismissAction.handleDismiss}\n                    />\n                )}\n            </div>\n        </div>\n    );\n};\n\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"info\"\n */\nexport const InfoSystemMessage = systemFactory(\"info\");\nInfoSystemMessage.displayName = \"InfoSystemMessage\";\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"error\"\n */\nexport const ErrorSystemMessage = systemFactory(\"error\");\nErrorSystemMessage.displayName = \"ErrorSystemMessage\";\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"warning\"\n */\nexport const WarningSystemMessage = systemFactory(\"warning\");\nWarningSystemMessage.displayName = \"WarningSystemMessage\";\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"success\"\n */\nexport const SuccessSystemMessage = systemFactory(\"success\");\nSuccessSystemMessage.displayName = \"SuccessSystemMessage\";\n"],"names":["systemFactory","variant","id","className","maxContentWidth","paddingLeft","role","dismissed","dismissAction","children","rest","systemId","useId","generateSuffix","jsx","clsx","jsxs","style","maxWidth","MessageIcon","handleDismiss","DismissButton","label","buttonTitle","onClick","SystemMessage","InfoSystemMessage","displayName","ErrorSystemMessage","WarningSystemMessage","SuccessSystemMessage"],"mappings":"mRAOA,SAASA,EACLC,GAyDA,MAvDoD,EAChDC,GAAAA,EACAC,UAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,MAEH,MAAMC,EAAWC,EAAMV,GAAM,qBAAsB,CAC/CW,gBAAiBX,IAGrB,OACIY,EAAC,MAAA,CACGR,KAAAA,KACII,EACJR,GAAIS,EACJR,UAAWY,EACP,qBACA,uBAAuBd,IACvBE,EACA,CACI,gCAAiCI,IAIzCE,SAAAO,EAAC,MAAA,CACGb,UAAU,8BACV,cAAY,yBACZ,aAAW,QACXc,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,EAACK,EAAA,CAAYlB,QAASA,GAAW,SACjCa,EAAC,OAAA,CAAKX,UAAU,8BACXM,SAAAA,IAEJD,GAAeY,eACZN,EAACO,EAAA,CACG,aAAW,QACX,gBAAeV,EACfR,UAAU,qCACVmB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY,qBAQnD,CAEO,MAAMK,EAA8C,EACvDvB,GAAAA,EACAC,UAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAN,QAAAA,EAAU,OACVO,cAAAA,EACAC,SAAAA,KACGC,MAEH,MAAMC,EAAWC,EAAMV,GAAM,qBAAsB,CAC/CW,gBAAiBX,IAGrB,OACIY,EAAC,MAAA,CACGR,KAAAA,KACII,EACJR,GAAIS,EACJR,UAAWY,EACP,qBACA,uBAAuBd,IACvBE,EACA,CACI,gCAAiCI,IAIzCE,SAAAO,EAAC,MAAA,CACGb,UAAU,8BACV,cAAY,yBACZ,aAAW,QACXc,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,EAACK,GAAYlB,QAAAA,IACba,EAAC,OAAA,CAAKX,UAAU,8BAA+BM,SAAAA,IAC9CD,GAAeY,eACZN,EAACO,EAAA,CACG,aAAW,QACX,gBAAeV,EACfR,UAAU,qCACVmB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY,sBAWlCM,EAAoB1B,EAAc,QAC/C0B,EAAkBC,YAAc,oBAIzB,MAAMC,EAAqB5B,EAAc,SAChD4B,EAAmBD,YAAc,qBAI1B,MAAME,EAAuB7B,EAAc,WAClD6B,EAAqBF,YAAc,uBAI5B,MAAMG,EAAuB9B,EAAc,WAClD8B,EAAqBH,YAAc"}
+{"version":3,"file":"SystemMessage.js","sources":["../../../../src/components/system-message/SystemMessage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { DismissButton } from \"../message/DismissButton.js\";\nimport { MessageIcon } from \"./common/MessageIcon.js\";\nimport type { SystemMessageProps } from \"./types.js\";\n\nfunction systemFactory(\n    variant: SystemMessageProps[\"variant\"],\n): React.FC<SystemMessageProps> {\n    const SystemMessage: React.FC<SystemMessageProps> = ({\n        id,\n        className,\n        maxContentWidth,\n        paddingLeft,\n        role = \"status\",\n        dismissed,\n        dismissAction,\n        children,\n        ...rest\n    }) => {\n        const systemId = useId(id || \"jkl-system-message\", {\n            generateSuffix: !id,\n        });\n\n        return (\n            <div\n                role={role}\n                {...rest}\n                id={systemId}\n                className={clsx(\n                    \"jkl-system-message\",\n                    `jkl-system-message--${variant}`,\n                    className,\n                    {\n                        \"jkl-system-message--dismissed\": dismissed,\n                    },\n                )}\n            >\n                <div\n                    className=\"jkl-system-message__content\"\n                    data-testid=\"system-message-content\"\n                    style={{\n                        maxWidth: maxContentWidth,\n                        paddingLeft,\n                    }}\n                >\n                    <MessageIcon variant={variant || \"info\"} />\n                    <span className=\"jkl-system-message__message\">\n                        {children}\n                    </span>\n                    {dismissAction?.handleDismiss && (\n                        <DismissButton\n                            aria-controls={systemId}\n                            className=\"jkl-system-message__dismiss-button\"\n                            label={dismissAction.buttonTitle || \"Lukk\"}\n                            onClick={dismissAction.handleDismiss}\n                        />\n                    )}\n                </div>\n            </div>\n        );\n    };\n    return SystemMessage;\n}\n\nexport const SystemMessage: React.FC<SystemMessageProps> = ({\n    id,\n    className,\n    maxContentWidth,\n    paddingLeft,\n    role = \"status\",\n    dismissed,\n    variant = \"info\",\n    dismissAction,\n    children,\n    ...rest\n}) => {\n    const systemId = useId(id || \"jkl-system-message\", {\n        generateSuffix: !id,\n    });\n\n    return (\n        <div\n            role={role}\n            {...rest}\n            id={systemId}\n            className={clsx(\n                \"jkl-system-message\",\n                `jkl-system-message--${variant}`,\n                className,\n                {\n                    \"jkl-system-message--dismissed\": dismissed,\n                },\n            )}\n        >\n            <div\n                className=\"jkl-system-message__content\"\n                data-testid=\"system-message-content\"\n                style={{\n                    maxWidth: maxContentWidth,\n                    paddingLeft,\n                }}\n            >\n                <MessageIcon variant={variant} />\n                <span className=\"jkl-system-message__message\">{children}</span>\n                {dismissAction?.handleDismiss && (\n                    <DismissButton\n                        aria-controls={systemId}\n                        className=\"jkl-system-message__dismiss-button\"\n                        label={dismissAction.buttonTitle || \"Lukk\"}\n                        onClick={dismissAction.handleDismiss}\n                    />\n                )}\n            </div>\n        </div>\n    );\n};\n\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"info\"\n */\nexport const InfoSystemMessage = systemFactory(\"info\");\nInfoSystemMessage.displayName = \"InfoSystemMessage\";\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"error\"\n */\nexport const ErrorSystemMessage = systemFactory(\"error\");\nErrorSystemMessage.displayName = \"ErrorSystemMessage\";\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"warning\"\n */\nexport const WarningSystemMessage = systemFactory(\"warning\");\nWarningSystemMessage.displayName = \"WarningSystemMessage\";\n/**\n * @deprecated bruk {@link SystemMessage} med variant=\"success\"\n */\nexport const SuccessSystemMessage = systemFactory(\"success\");\nSuccessSystemMessage.displayName = \"SuccessSystemMessage\";\n"],"names":["systemFactory","variant","id","className","maxContentWidth","paddingLeft","role","dismissed","dismissAction","children","rest","systemId","useId","generateSuffix","jsx","clsx","jsxs","style","maxWidth","MessageIcon","handleDismiss","DismissButton","label","buttonTitle","onClick","SystemMessage","InfoSystemMessage","displayName","ErrorSystemMessage","WarningSystemMessage","SuccessSystemMessage"],"mappings":"mRAOA,SAASA,EACLC,GAuDA,MArDoD,EAChDC,GAAAA,EACAC,UAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,MAEH,MAAMC,EAAWC,EAAMV,GAAM,qBAAsB,CAC/CW,gBAAiBX,IAGrB,OACIY,EAAC,MAAA,CACGR,KAAAA,KACII,EACJR,GAAIS,EACJR,UAAWY,EACP,qBACA,uBAAuBd,IACvBE,EACA,CACI,gCAAiCI,IAIzCE,SAAAO,EAAC,MAAA,CACGb,UAAU,8BACV,cAAY,yBACZc,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,EAACK,EAAA,CAAYlB,QAASA,GAAW,SACjCa,EAAC,OAAA,CAAKX,UAAU,8BACXM,SAAAA,IAEJD,GAAeY,eACZN,EAACO,EAAA,CACG,gBAAeV,EACfR,UAAU,qCACVmB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY,qBAQnD,CAEO,MAAMK,EAA8C,EACvDvB,GAAAA,EACAC,UAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAN,QAAAA,EAAU,OACVO,cAAAA,EACAC,SAAAA,KACGC,MAEH,MAAMC,EAAWC,EAAMV,GAAM,qBAAsB,CAC/CW,gBAAiBX,IAGrB,OACIY,EAAC,MAAA,CACGR,KAAAA,KACII,EACJR,GAAIS,EACJR,UAAWY,EACP,qBACA,uBAAuBd,IACvBE,EACA,CACI,gCAAiCI,IAIzCE,SAAAO,EAAC,MAAA,CACGb,UAAU,8BACV,cAAY,yBACZc,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,EAACK,GAAYlB,QAAAA,IACba,EAAC,OAAA,CAAKX,UAAU,8BAA+BM,SAAAA,IAC9CD,GAAeY,eACZN,EAACO,EAAA,CACG,gBAAeV,EACfR,UAAU,qCACVmB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY,sBAWlCM,EAAoB1B,EAAc,QAC/C0B,EAAkBC,YAAc,oBAIzB,MAAMC,EAAqB5B,EAAc,SAChD4B,EAAmBD,YAAc,qBAI1B,MAAME,EAAuB7B,EAAc,WAClD6B,EAAqBF,YAAc,uBAI5B,MAAMG,EAAuB9B,EAAc,WAClD8B,EAAqBH,YAAc"}

package/build/es/components/typography/Text.js

@@ -1,2 +1,2 @@
-import{jsx as s}from"react/jsx-runtime";import{c as t}from"../../../clsx-BeLtu-UY.js";import{forwardRef as r}from"react";const a=r(function({as:r,className:a,size:o="m",bold:e,short:m,srOnly:i,...l},c){return s(r||"p",{className:t("jkl-text",i&&"jkl-sr-only",a),"data-text-size":o,"data-bold":e||void 0,"data-short":m||void 0,ref:c,...l})});export{a as Text};
+import{jsx as t}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{forwardRef as s}from"react";const r=s(function({as:s,className:r,size:e="m",bold:o,short:d,srOnly:i,center:c,subdued:m,...l},n){return t(s||"p",{className:a("jkl-text",i&&"jkl-sr-only",r),"data-text-size":e,"data-bold":o||void 0,"data-short":d||void 0,"data-center":c||void 0,"data-subdued":m||void 0,ref:n,...l})});export{r as Text};
 //# sourceMappingURL=Text.js.map

package/build/es/components/typography/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../../../../src/components/typography/Text.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/index.js\";\nimport type { TextElement, TextProps } from \"./types.js\";\n\ntype TextComponent = <As extends TextElement = \"p\">(\n    props: TextProps<As>,\n) => React.ReactElement | null;\n\nexport const Text: TextComponent = forwardRef(function Text<\n    As extends TextElement = \"p\",\n>(\n    { as, className, size = \"m\", bold, short, srOnly, ...rest }: TextProps<As>,\n    ref?: PolymorphicRef<As>,\n) {\n    const Component = (as || \"p\") as React.ElementType;\n    return (\n        <Component\n            className={clsx(\"jkl-text\", srOnly && \"jkl-sr-only\", className)}\n            data-text-size={size}\n            data-bold={bold || undefined}\n            data-short={short || undefined}\n            ref={ref}\n            {...rest}\n        />\n    );\n}) as TextComponent;\n"],"names":["Text","forwardRef","as","className","size","bold","short","srOnly","rest","ref","jsx","clsx"],"mappings":"yHASO,MAAMA,EAAsBC,EAAW,UAGxCC,GAAAA,EAAIC,UAAAA,EAAWC,KAAAA,EAAO,IAAKC,KAAAA,EAAMC,MAAAA,EAAOC,OAAAA,KAAWC,GACrDC,GAGA,OACIC,EAFeR,GAAM,IAEpB,CACGC,UAAWQ,EAAK,WAAYJ,GAAU,cAAeJ,GACrD,iBAAgBC,EAChB,YAAWC,QAAQ,EACnB,aAAYC,QAAS,EACrBG,IAAAA,KACID,GAGhB"}
+{"version":3,"file":"Text.js","sources":["../../../../src/components/typography/Text.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/index.js\";\nimport type { TextElement, TextProps } from \"./types.js\";\n\ntype TextComponent = <As extends TextElement = \"p\">(\n    props: TextProps<As>,\n) => React.ReactElement | null;\n\nexport const Text: TextComponent = forwardRef(function Text<\n    As extends TextElement = \"p\",\n>(\n    {\n        as,\n        className,\n        size = \"m\",\n        bold,\n        short,\n        srOnly,\n        center,\n        subdued,\n        ...rest\n    }: TextProps<As>,\n    ref?: PolymorphicRef<As>,\n) {\n    const Component = (as || \"p\") as React.ElementType;\n    return (\n        <Component\n            className={clsx(\"jkl-text\", srOnly && \"jkl-sr-only\", className)}\n            data-text-size={size}\n            data-bold={bold || undefined}\n            data-short={short || undefined}\n            data-center={center || undefined}\n            data-subdued={subdued || undefined}\n            ref={ref}\n            {...rest}\n        />\n    );\n}) as TextComponent;\n"],"names":["Text","forwardRef","as","className","size","bold","short","srOnly","center","subdued","rest","ref","jsx","clsx"],"mappings":"yHASO,MAAMA,EAAsBC,EAAW,UAItCC,GAAAA,EACAC,UAAAA,EACAC,KAAAA,EAAO,IACPC,KAAAA,EACAC,MAAAA,EACAC,OAAAA,EACAC,OAAAA,EACAC,QAAAA,KACGC,GAEPC,GAGA,OACIC,EAFeV,GAAM,IAEpB,CACGC,UAAWU,EAAK,WAAYN,GAAU,cAAeJ,GACrD,iBAAgBC,EAChB,YAAWC,QAAQ,EACnB,aAAYC,QAAS,EACrB,cAAaE,QAAU,EACvB,eAAcC,QAAW,EACzBE,IAAAA,KACID,GAGhB"}

package/build/es/components/typography/Title.js

@@ -1,2 +1,2 @@
-import{jsx as s}from"react/jsx-runtime";import{c as r}from"../../../clsx-BeLtu-UY.js";import{forwardRef as a}from"react";const t=a(function({className:a,size:t="l",as:e,srOnly:o,...m},c){return s(e||"h2",{className:r(o&&"jkl-sr-only",a),"data-text-size":t,ref:c,...m})});export{t as Title};
+import{jsx as r}from"react/jsx-runtime";import{c as s}from"../../../clsx-BeLtu-UY.js";import{forwardRef as e}from"react";const t=e(function({className:e,size:t="l",as:a,srOnly:o,center:c,...i},m){return r(a||"h2",{className:s(o&&"jkl-sr-only",e),"data-text-size":t,"data-center":c||void 0,ref:m,...i})});export{t as Title};
 //# sourceMappingURL=Title.js.map

package/build/es/components/typography/Title.js.map

@@ -1 +1 @@
-{"version":3,"file":"Title.js","sources":["../../../../src/components/typography/Title.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/index.js\";\nimport type { TitleElement, TitleProps } from \"./types.js\";\n\ntype TitleComponent = <As extends TitleElement = \"h2\">(\n    props: TitleProps<As>,\n) => React.ReactElement | null;\n\nexport const Title: TitleComponent = forwardRef(function Title<\n    As extends TitleElement = \"h2\",\n>(\n    { className, size = \"l\", as, srOnly, ...rest }: TitleProps<As>,\n    ref?: PolymorphicRef<As>,\n) {\n    const Tag = (as || \"h2\") as React.ElementType;\n    return (\n        <Tag\n            className={clsx(srOnly && \"jkl-sr-only\", className)}\n            data-text-size={size}\n            ref={ref}\n            {...rest}\n        />\n    );\n}) as TitleComponent;\n"],"names":["Title","forwardRef","className","size","as","srOnly","rest","ref","jsx","clsx"],"mappings":"yHASO,MAAMA,EAAwBC,EAAW,UAG1CC,UAAAA,EAAWC,KAAAA,EAAO,IAAKC,GAAAA,EAAIC,OAAAA,KAAWC,GACxCC,GAGA,OACIC,EAFSJ,GAAM,KAEd,CACGF,UAAWO,EAAKJ,GAAU,cAAeH,GACzC,iBAAgBC,EAChBI,IAAAA,KACID,GAGhB"}
+{"version":3,"file":"Title.js","sources":["../../../../src/components/typography/Title.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/index.js\";\nimport type { TitleElement, TitleProps } from \"./types.js\";\n\ntype TitleComponent = <As extends TitleElement = \"h2\">(\n    props: TitleProps<As>,\n) => React.ReactElement | null;\n\nexport const Title: TitleComponent = forwardRef(function Title<\n    As extends TitleElement = \"h2\",\n>(\n    { className, size = \"l\", as, srOnly, center, ...rest }: TitleProps<As>,\n    ref?: PolymorphicRef<As>,\n) {\n    const Tag = (as || \"h2\") as React.ElementType;\n    return (\n        <Tag\n            className={clsx(srOnly && \"jkl-sr-only\", className)}\n            data-text-size={size}\n            data-center={center || undefined}\n            ref={ref}\n            {...rest}\n        />\n    );\n}) as TitleComponent;\n"],"names":["Title","forwardRef","className","size","as","srOnly","center","rest","ref","jsx","clsx"],"mappings":"yHASO,MAAMA,EAAwBC,EAAW,UAG1CC,UAAAA,EAAWC,KAAAA,EAAO,IAAKC,GAAAA,EAAIC,OAAAA,EAAQC,OAAAA,KAAWC,GAChDC,GAGA,OACIC,EAFSL,GAAM,KAEd,CACGF,UAAWQ,EAAKL,GAAU,cAAeH,GACzC,iBAAgBC,EAChB,cAAaG,QAAU,EACvBE,IAAAA,KACID,GAGhB"}

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

@@ -27,6 +27,18 @@ type TextOwnProps = {
      * @default false
      */
     srOnly?: boolean;
+    /**
+     * Sentrerer teksten horisontalt (text-align: center).
+     * Bruk når sentrering ikke arves fra containeren, f.eks. inne i en Flex
+     * med alignItems: center.
+     * @default false
+     */
+    center?: boolean;
+    /**
+     * Bruker dempet tekstfarge (--jkl-color-text-subdued).
+     * @default false
+     */
+    subdued?: boolean;
 };
 type TitleOwnProps = {
     /**
@@ -42,6 +54,11 @@ type TitleOwnProps = {
      * @default false
      */
     srOnly?: boolean;
+    /**
+     * Sentrerer teksten horisontalt (text-align: center).
+     * @default false
+     */
+    center?: boolean;
 };
 export type TextProps<As extends TextElement = "p"> = PolymorphicPropsWithRef<As, TextOwnProps>;
 export type TitleProps<As extends TitleElement = "h2"> = PolymorphicPropsWithRef<As, TitleOwnProps>;

package/build/es/tokens.d.ts

@@ -201,6 +201,7 @@ declare const _default: {
             regular: string;
             display: string;
             mono: string;
+            icons: string;
         };
     };
     lineHeight: {

package/build/es/tokens.js

@@ -1,2 +1,2 @@
-const r={color:{"@":{background:{page:"var(--jkl-color-background-page)",container:"var(--jkl-color-background-container)","container-accent":"var(--jkl-color-background-container-accent)",contrast:"var(--jkl-color-background-contrast)"},text:{default:"var(--jkl-color-text-default)",subdued:"var(--jkl-color-text-subdued)",accent:"var(--jkl-color-text-accent)","on-contrast":"var(--jkl-color-text-on-contrast)"},border:{default:"var(--jkl-color-border-default)",subdued:"var(--jkl-color-border-subdued)",strong:"var(--jkl-color-border-strong)"}},warning:{background:{page:"var(--jkl-color-warning-background-page)",container:"var(--jkl-color-warning-background-container)","container-accent":"var(--jkl-color-warning-background-container-accent)",contrast:"var(--jkl-color-warning-background-contrast)"},text:{default:"var(--jkl-color-warning-text-default)",subdued:"var(--jkl-color-warning-text-subdued)",accent:"var(--jkl-color-warning-text-accent)","on-contrast":"var(--jkl-color-warning-text-on-contrast)"},border:{default:"var(--jkl-color-warning-border-default)",subdued:"var(--jkl-color-warning-border-subdued)",strong:"var(--jkl-color-warning-border-strong)"}},success:{background:{page:"var(--jkl-color-success-background-page)",container:"var(--jkl-color-success-background-container)","container-accent":"var(--jkl-color-success-background-container-accent)",contrast:"var(--jkl-color-success-background-contrast)"},text:{default:"var(--jkl-color-success-text-default)",subdued:"var(--jkl-color-success-text-subdued)",accent:"var(--jkl-color-success-text-accent)","on-contrast":"var(--jkl-color-success-text-on-contrast)"},border:{default:"var(--jkl-color-success-border-default)",subdued:"var(--jkl-color-success-border-subdued)",strong:"var(--jkl-color-success-border-strong)"}},info:{background:{page:"var(--jkl-color-info-background-page)",container:"var(--jkl-color-info-background-container)","container-accent":"var(--jkl-color-info-background-container-accent)",contrast:"var(--jkl-color-info-background-contrast)"},text:{default:"var(--jkl-color-info-text-default)",subdued:"var(--jkl-color-info-text-subdued)",accent:"var(--jkl-color-info-text-accent)","on-contrast":"var(--jkl-color-info-text-on-contrast)"},border:{default:"var(--jkl-color-info-border-default)",subdued:"var(--jkl-color-info-border-subdued)",strong:"var(--jkl-color-info-border-strong)"}},error:{background:{page:"var(--jkl-color-error-background-page)",container:"var(--jkl-color-error-background-container)","container-accent":"var(--jkl-color-error-background-container-accent)",contrast:"var(--jkl-color-error-background-contrast)"},text:{default:"var(--jkl-color-error-text-default)",subdued:"var(--jkl-color-error-text-subdued)",accent:"var(--jkl-color-error-text-accent)","on-contrast":"var(--jkl-color-error-text-on-contrast)"},border:{default:"var(--jkl-color-error-border-default)",subdued:"var(--jkl-color-error-border-subdued)",strong:"var(--jkl-color-error-border-strong)"}}},unit:{0:"var(--jkl-unit-0)",10:"var(--jkl-unit-10)",15:"var(--jkl-unit-15)",20:"var(--jkl-unit-20)",25:"var(--jkl-unit-25)",30:"var(--jkl-unit-30)",35:"var(--jkl-unit-35)",40:"var(--jkl-unit-40)",50:"var(--jkl-unit-50)",60:"var(--jkl-unit-60)",70:"var(--jkl-unit-70)",80:"var(--jkl-unit-80)",90:"var(--jkl-unit-90)",100:"var(--jkl-unit-100)",130:"var(--jkl-unit-130)",210:"var(--jkl-unit-210)",base:"var(--jkl-unit-base)","02":"var(--jkl-unit-02)","05":"var(--jkl-unit-05)"},spacing:{0:"var(--jkl-spacing-0)",2:"var(--jkl-spacing-2)",4:"var(--jkl-spacing-4)",8:"var(--jkl-spacing-8)",12:"var(--jkl-spacing-12)",16:"var(--jkl-spacing-16)",24:"var(--jkl-spacing-24)",32:"var(--jkl-spacing-32)",40:"var(--jkl-spacing-40)",64:"var(--jkl-spacing-64)",104:"var(--jkl-spacing-104)",168:"var(--jkl-spacing-168)",none:"var(--jkl-spacing-none)","2xs":"var(--jkl-spacing-2xs)",xs:"var(--jkl-spacing-xs)",s:"var(--jkl-spacing-s)",m:"var(--jkl-spacing-m)",l:"var(--jkl-spacing-l)",xl:"var(--jkl-spacing-xl)","2xl":"var(--jkl-spacing-2xl)"},border:{width:{1:"var(--jkl-border-width-1)",2:"var(--jkl-border-width-2)",3:"var(--jkl-border-width-3)"},radius:{none:"var(--jkl-border-radius-none)",xs:"var(--jkl-border-radius-xs)",s:"var(--jkl-border-radius-s)",m:"var(--jkl-border-radius-m)",l:"var(--jkl-border-radius-l)",full:"var(--jkl-border-radius-full)"}},breakpoint:{small:"0",medium:"680px",large:"1200px",xl:"1600px"},motion:{timing:{energetic:"var(--jkl-motion-timing-energetic)",snappy:"var(--jkl-motion-timing-snappy)",productive:"var(--jkl-motion-timing-productive)",polite:"var(--jkl-motion-timing-polite)",expressive:"var(--jkl-motion-timing-expressive)",lazy:"var(--jkl-motion-timing-lazy)"},easing:{standard:"var(--jkl-motion-easing-standard)",entrance:"var(--jkl-motion-easing-entrance)",exit:"var(--jkl-motion-easing-exit)",easeInBounceOut:"var(--jkl-motion-easing-ease-in-bounce-out)",focus:"var(--jkl-motion-easing-focus)"}},font:{size:{1:"var(--jkl-font-size-1)",2:"var(--jkl-font-size-2)",3:"var(--jkl-font-size-3)",4:"var(--jkl-font-size-4)",5:"var(--jkl-font-size-5)",6:"var(--jkl-font-size-6)",7:"var(--jkl-font-size-7)",8:"var(--jkl-font-size-8)",9:"var(--jkl-font-size-9)",10:"var(--jkl-font-size-10)"},weight:{normal:"var(--jkl-font-weight-normal)",bold:"var(--jkl-font-weight-bold)"},family:{regular:"var(--jkl-font-family-regular)",display:"var(--jkl-font-family-display)",mono:"var(--jkl-font-family-mono)"}},lineHeight:{flush:"var(--jkl-line-height-flush)",tight:"var(--jkl-line-height-tight)",relaxed:"var(--jkl-line-height-relaxed)"},textStyle:{title:"var(--jkl-text-style-title)","title-small":"var(--jkl-text-style-title-small)","heading-1":"var(--jkl-text-style-heading-1)","heading-2":"var(--jkl-text-style-heading-2)","heading-3":"var(--jkl-text-style-heading-3)","heading-4":"var(--jkl-text-style-heading-4)","heading-5":"var(--jkl-text-style-heading-5)","paragraph-large":"var(--jkl-text-style-paragraph-large)","paragraph-medium":"var(--jkl-text-style-paragraph-medium)","paragraph-small":"var(--jkl-text-style-paragraph-small)","text-large":"var(--jkl-text-style-text-large)","text-medium":"var(--jkl-text-style-text-medium)","text-small":"var(--jkl-text-style-text-small)","text-micro":"var(--jkl-text-style-text-micro)"}};export{r as default};
+const r={color:{"@":{background:{page:"var(--jkl-color-background-page)",container:"var(--jkl-color-background-container)","container-accent":"var(--jkl-color-background-container-accent)",contrast:"var(--jkl-color-background-contrast)"},text:{default:"var(--jkl-color-text-default)",subdued:"var(--jkl-color-text-subdued)",accent:"var(--jkl-color-text-accent)","on-contrast":"var(--jkl-color-text-on-contrast)"},border:{default:"var(--jkl-color-border-default)",subdued:"var(--jkl-color-border-subdued)",strong:"var(--jkl-color-border-strong)"}},warning:{background:{page:"var(--jkl-color-warning-background-page)",container:"var(--jkl-color-warning-background-container)","container-accent":"var(--jkl-color-warning-background-container-accent)",contrast:"var(--jkl-color-warning-background-contrast)"},text:{default:"var(--jkl-color-warning-text-default)",subdued:"var(--jkl-color-warning-text-subdued)",accent:"var(--jkl-color-warning-text-accent)","on-contrast":"var(--jkl-color-warning-text-on-contrast)"},border:{default:"var(--jkl-color-warning-border-default)",subdued:"var(--jkl-color-warning-border-subdued)",strong:"var(--jkl-color-warning-border-strong)"}},success:{background:{page:"var(--jkl-color-success-background-page)",container:"var(--jkl-color-success-background-container)","container-accent":"var(--jkl-color-success-background-container-accent)",contrast:"var(--jkl-color-success-background-contrast)"},text:{default:"var(--jkl-color-success-text-default)",subdued:"var(--jkl-color-success-text-subdued)",accent:"var(--jkl-color-success-text-accent)","on-contrast":"var(--jkl-color-success-text-on-contrast)"},border:{default:"var(--jkl-color-success-border-default)",subdued:"var(--jkl-color-success-border-subdued)",strong:"var(--jkl-color-success-border-strong)"}},info:{background:{page:"var(--jkl-color-info-background-page)",container:"var(--jkl-color-info-background-container)","container-accent":"var(--jkl-color-info-background-container-accent)",contrast:"var(--jkl-color-info-background-contrast)"},text:{default:"var(--jkl-color-info-text-default)",subdued:"var(--jkl-color-info-text-subdued)",accent:"var(--jkl-color-info-text-accent)","on-contrast":"var(--jkl-color-info-text-on-contrast)"},border:{default:"var(--jkl-color-info-border-default)",subdued:"var(--jkl-color-info-border-subdued)",strong:"var(--jkl-color-info-border-strong)"}},error:{background:{page:"var(--jkl-color-error-background-page)",container:"var(--jkl-color-error-background-container)","container-accent":"var(--jkl-color-error-background-container-accent)",contrast:"var(--jkl-color-error-background-contrast)"},text:{default:"var(--jkl-color-error-text-default)",subdued:"var(--jkl-color-error-text-subdued)",accent:"var(--jkl-color-error-text-accent)","on-contrast":"var(--jkl-color-error-text-on-contrast)"},border:{default:"var(--jkl-color-error-border-default)",subdued:"var(--jkl-color-error-border-subdued)",strong:"var(--jkl-color-error-border-strong)"}}},unit:{0:"var(--jkl-unit-0)",10:"var(--jkl-unit-10)",15:"var(--jkl-unit-15)",20:"var(--jkl-unit-20)",25:"var(--jkl-unit-25)",30:"var(--jkl-unit-30)",35:"var(--jkl-unit-35)",40:"var(--jkl-unit-40)",50:"var(--jkl-unit-50)",60:"var(--jkl-unit-60)",70:"var(--jkl-unit-70)",80:"var(--jkl-unit-80)",90:"var(--jkl-unit-90)",100:"var(--jkl-unit-100)",130:"var(--jkl-unit-130)",210:"var(--jkl-unit-210)",base:"var(--jkl-unit-base)","02":"var(--jkl-unit-02)","05":"var(--jkl-unit-05)"},spacing:{0:"var(--jkl-spacing-0)",2:"var(--jkl-spacing-2)",4:"var(--jkl-spacing-4)",8:"var(--jkl-spacing-8)",12:"var(--jkl-spacing-12)",16:"var(--jkl-spacing-16)",24:"var(--jkl-spacing-24)",32:"var(--jkl-spacing-32)",40:"var(--jkl-spacing-40)",64:"var(--jkl-spacing-64)",104:"var(--jkl-spacing-104)",168:"var(--jkl-spacing-168)",none:"var(--jkl-spacing-none)","2xs":"var(--jkl-spacing-2xs)",xs:"var(--jkl-spacing-xs)",s:"var(--jkl-spacing-s)",m:"var(--jkl-spacing-m)",l:"var(--jkl-spacing-l)",xl:"var(--jkl-spacing-xl)","2xl":"var(--jkl-spacing-2xl)"},border:{width:{1:"var(--jkl-border-width-1)",2:"var(--jkl-border-width-2)",3:"var(--jkl-border-width-3)"},radius:{none:"var(--jkl-border-radius-none)",xs:"var(--jkl-border-radius-xs)",s:"var(--jkl-border-radius-s)",m:"var(--jkl-border-radius-m)",l:"var(--jkl-border-radius-l)",full:"var(--jkl-border-radius-full)"}},breakpoint:{small:"0",medium:"680px",large:"1200px",xl:"1600px"},motion:{timing:{energetic:"var(--jkl-motion-timing-energetic)",snappy:"var(--jkl-motion-timing-snappy)",productive:"var(--jkl-motion-timing-productive)",polite:"var(--jkl-motion-timing-polite)",expressive:"var(--jkl-motion-timing-expressive)",lazy:"var(--jkl-motion-timing-lazy)"},easing:{standard:"var(--jkl-motion-easing-standard)",entrance:"var(--jkl-motion-easing-entrance)",exit:"var(--jkl-motion-easing-exit)",easeInBounceOut:"var(--jkl-motion-easing-ease-in-bounce-out)",focus:"var(--jkl-motion-easing-focus)"}},font:{size:{1:"var(--jkl-font-size-1)",2:"var(--jkl-font-size-2)",3:"var(--jkl-font-size-3)",4:"var(--jkl-font-size-4)",5:"var(--jkl-font-size-5)",6:"var(--jkl-font-size-6)",7:"var(--jkl-font-size-7)",8:"var(--jkl-font-size-8)",9:"var(--jkl-font-size-9)",10:"var(--jkl-font-size-10)"},weight:{normal:"var(--jkl-font-weight-normal)",bold:"var(--jkl-font-weight-bold)"},family:{regular:"var(--jkl-font-family-regular)",display:"var(--jkl-font-family-display)",mono:"var(--jkl-font-family-mono)",icons:"var(--jkl-font-family-icons)"}},lineHeight:{flush:"var(--jkl-line-height-flush)",tight:"var(--jkl-line-height-tight)",relaxed:"var(--jkl-line-height-relaxed)"},textStyle:{title:"var(--jkl-text-style-title)","title-small":"var(--jkl-text-style-title-small)","heading-1":"var(--jkl-text-style-heading-1)","heading-2":"var(--jkl-text-style-heading-2)","heading-3":"var(--jkl-text-style-heading-3)","heading-4":"var(--jkl-text-style-heading-4)","heading-5":"var(--jkl-text-style-heading-5)","paragraph-large":"var(--jkl-text-style-paragraph-large)","paragraph-medium":"var(--jkl-text-style-paragraph-medium)","paragraph-small":"var(--jkl-text-style-paragraph-small)","text-large":"var(--jkl-text-style-text-large)","text-medium":"var(--jkl-text-style-text-medium)","text-small":"var(--jkl-text-style-text-small)","text-micro":"var(--jkl-text-style-text-micro)"}};export{r as default};
 //# sourceMappingURL=tokens.js.map

package/build/es/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sources":["../../src/tokens.ts"],"sourcesContent":["/**\n * Do not edit directly, this file was auto-generated.\n */\n\nexport default {\n  color: {\n    \"@\": {\n      background: {\n        page: \"var(--jkl-color-background-page)\",\n        container: \"var(--jkl-color-background-container)\",\n        \"container-accent\": \"var(--jkl-color-background-container-accent)\",\n        contrast: \"var(--jkl-color-background-contrast)\",\n      },\n      text: {\n        default: \"var(--jkl-color-text-default)\",\n        subdued: \"var(--jkl-color-text-subdued)\",\n        accent: \"var(--jkl-color-text-accent)\",\n        \"on-contrast\": \"var(--jkl-color-text-on-contrast)\",\n      },\n      border: {\n        default: \"var(--jkl-color-border-default)\",\n        subdued: \"var(--jkl-color-border-subdued)\",\n        strong: \"var(--jkl-color-border-strong)\",\n      },\n    },\n    warning: {\n      background: {\n        page: \"var(--jkl-color-warning-background-page)\",\n        container: \"var(--jkl-color-warning-background-container)\",\n        \"container-accent\":\n          \"var(--jkl-color-warning-background-container-accent)\",\n        contrast: \"var(--jkl-color-warning-background-contrast)\",\n      },\n      text: {\n        default: \"var(--jkl-color-warning-text-default)\",\n        subdued: \"var(--jkl-color-warning-text-subdued)\",\n        accent: \"var(--jkl-color-warning-text-accent)\",\n        \"on-contrast\": \"var(--jkl-color-warning-text-on-contrast)\",\n      },\n      border: {\n        default: \"var(--jkl-color-warning-border-default)\",\n        subdued: \"var(--jkl-color-warning-border-subdued)\",\n        strong: \"var(--jkl-color-warning-border-strong)\",\n      },\n    },\n    success: {\n      background: {\n        page: \"var(--jkl-color-success-background-page)\",\n        container: \"var(--jkl-color-success-background-container)\",\n        \"container-accent\":\n          \"var(--jkl-color-success-background-container-accent)\",\n        contrast: \"var(--jkl-color-success-background-contrast)\",\n      },\n      text: {\n        default: \"var(--jkl-color-success-text-default)\",\n        subdued: \"var(--jkl-color-success-text-subdued)\",\n        accent: \"var(--jkl-color-success-text-accent)\",\n        \"on-contrast\": \"var(--jkl-color-success-text-on-contrast)\",\n      },\n      border: {\n        default: \"var(--jkl-color-success-border-default)\",\n        subdued: \"var(--jkl-color-success-border-subdued)\",\n        strong: \"var(--jkl-color-success-border-strong)\",\n      },\n    },\n    info: {\n      background: {\n        page: \"var(--jkl-color-info-background-page)\",\n        container: \"var(--jkl-color-info-background-container)\",\n        \"container-accent\": \"var(--jkl-color-info-background-container-accent)\",\n        contrast: \"var(--jkl-color-info-background-contrast)\",\n      },\n      text: {\n        default: \"var(--jkl-color-info-text-default)\",\n        subdued: \"var(--jkl-color-info-text-subdued)\",\n        accent: \"var(--jkl-color-info-text-accent)\",\n        \"on-contrast\": \"var(--jkl-color-info-text-on-contrast)\",\n      },\n      border: {\n        default: \"var(--jkl-color-info-border-default)\",\n        subdued: \"var(--jkl-color-info-border-subdued)\",\n        strong: \"var(--jkl-color-info-border-strong)\",\n      },\n    },\n    error: {\n      background: {\n        page: \"var(--jkl-color-error-background-page)\",\n        container: \"var(--jkl-color-error-background-container)\",\n        \"container-accent\":\n          \"var(--jkl-color-error-background-container-accent)\",\n        contrast: \"var(--jkl-color-error-background-contrast)\",\n      },\n      text: {\n        default: \"var(--jkl-color-error-text-default)\",\n        subdued: \"var(--jkl-color-error-text-subdued)\",\n        accent: \"var(--jkl-color-error-text-accent)\",\n        \"on-contrast\": \"var(--jkl-color-error-text-on-contrast)\",\n      },\n      border: {\n        default: \"var(--jkl-color-error-border-default)\",\n        subdued: \"var(--jkl-color-error-border-subdued)\",\n        strong: \"var(--jkl-color-error-border-strong)\",\n      },\n    },\n  },\n  unit: {\n    0: \"var(--jkl-unit-0)\",\n    10: \"var(--jkl-unit-10)\",\n    15: \"var(--jkl-unit-15)\",\n    20: \"var(--jkl-unit-20)\",\n    25: \"var(--jkl-unit-25)\",\n    30: \"var(--jkl-unit-30)\",\n    35: \"var(--jkl-unit-35)\",\n    40: \"var(--jkl-unit-40)\",\n    50: \"var(--jkl-unit-50)\",\n    60: \"var(--jkl-unit-60)\",\n    70: \"var(--jkl-unit-70)\",\n    80: \"var(--jkl-unit-80)\",\n    90: \"var(--jkl-unit-90)\",\n    100: \"var(--jkl-unit-100)\",\n    130: \"var(--jkl-unit-130)\",\n    210: \"var(--jkl-unit-210)\",\n    base: \"var(--jkl-unit-base)\",\n    \"02\": \"var(--jkl-unit-02)\",\n    \"05\": \"var(--jkl-unit-05)\",\n  },\n  spacing: {\n    0: \"var(--jkl-spacing-0)\",\n    2: \"var(--jkl-spacing-2)\",\n    4: \"var(--jkl-spacing-4)\",\n    8: \"var(--jkl-spacing-8)\",\n    12: \"var(--jkl-spacing-12)\",\n    16: \"var(--jkl-spacing-16)\",\n    24: \"var(--jkl-spacing-24)\",\n    32: \"var(--jkl-spacing-32)\",\n    40: \"var(--jkl-spacing-40)\",\n    64: \"var(--jkl-spacing-64)\",\n    104: \"var(--jkl-spacing-104)\",\n    168: \"var(--jkl-spacing-168)\",\n    none: \"var(--jkl-spacing-none)\",\n    \"2xs\": \"var(--jkl-spacing-2xs)\",\n    xs: \"var(--jkl-spacing-xs)\",\n    s: \"var(--jkl-spacing-s)\",\n    m: \"var(--jkl-spacing-m)\",\n    l: \"var(--jkl-spacing-l)\",\n    xl: \"var(--jkl-spacing-xl)\",\n    \"2xl\": \"var(--jkl-spacing-2xl)\",\n  },\n  border: {\n    width: {\n      1: \"var(--jkl-border-width-1)\",\n      2: \"var(--jkl-border-width-2)\",\n      3: \"var(--jkl-border-width-3)\",\n    },\n    radius: {\n      none: \"var(--jkl-border-radius-none)\",\n      xs: \"var(--jkl-border-radius-xs)\",\n      s: \"var(--jkl-border-radius-s)\",\n      m: \"var(--jkl-border-radius-m)\",\n      l: \"var(--jkl-border-radius-l)\",\n      full: \"var(--jkl-border-radius-full)\",\n    },\n  },\n  breakpoint: {\n    small: \"0\",\n    medium: \"680px\",\n    large: \"1200px\",\n    xl: \"1600px\",\n  },\n  motion: {\n    timing: {\n      energetic: \"var(--jkl-motion-timing-energetic)\",\n      snappy: \"var(--jkl-motion-timing-snappy)\",\n      productive: \"var(--jkl-motion-timing-productive)\",\n      polite: \"var(--jkl-motion-timing-polite)\",\n      expressive: \"var(--jkl-motion-timing-expressive)\",\n      lazy: \"var(--jkl-motion-timing-lazy)\",\n    },\n    easing: {\n      standard: \"var(--jkl-motion-easing-standard)\",\n      entrance: \"var(--jkl-motion-easing-entrance)\",\n      exit: \"var(--jkl-motion-easing-exit)\",\n      easeInBounceOut: \"var(--jkl-motion-easing-ease-in-bounce-out)\",\n      focus: \"var(--jkl-motion-easing-focus)\",\n    },\n  },\n  font: {\n    size: {\n      1: \"var(--jkl-font-size-1)\",\n      2: \"var(--jkl-font-size-2)\",\n      3: \"var(--jkl-font-size-3)\",\n      4: \"var(--jkl-font-size-4)\",\n      5: \"var(--jkl-font-size-5)\",\n      6: \"var(--jkl-font-size-6)\",\n      7: \"var(--jkl-font-size-7)\",\n      8: \"var(--jkl-font-size-8)\",\n      9: \"var(--jkl-font-size-9)\",\n      10: \"var(--jkl-font-size-10)\",\n    },\n    weight: {\n      normal: \"var(--jkl-font-weight-normal)\",\n      bold: \"var(--jkl-font-weight-bold)\",\n    },\n    family: {\n      regular: \"var(--jkl-font-family-regular)\",\n      display: \"var(--jkl-font-family-display)\",\n      mono: \"var(--jkl-font-family-mono)\",\n    },\n  },\n  lineHeight: {\n    flush: \"var(--jkl-line-height-flush)\",\n    tight: \"var(--jkl-line-height-tight)\",\n    relaxed: \"var(--jkl-line-height-relaxed)\",\n  },\n  textStyle: {\n    title: \"var(--jkl-text-style-title)\",\n    \"title-small\": \"var(--jkl-text-style-title-small)\",\n    \"heading-1\": \"var(--jkl-text-style-heading-1)\",\n    \"heading-2\": \"var(--jkl-text-style-heading-2)\",\n    \"heading-3\": \"var(--jkl-text-style-heading-3)\",\n    \"heading-4\": \"var(--jkl-text-style-heading-4)\",\n    \"heading-5\": \"var(--jkl-text-style-heading-5)\",\n    \"paragraph-large\": \"var(--jkl-text-style-paragraph-large)\",\n    \"paragraph-medium\": \"var(--jkl-text-style-paragraph-medium)\",\n    \"paragraph-small\": \"var(--jkl-text-style-paragraph-small)\",\n    \"text-large\": \"var(--jkl-text-style-text-large)\",\n    \"text-medium\": \"var(--jkl-text-style-text-medium)\",\n    \"text-small\": \"var(--jkl-text-style-text-small)\",\n    \"text-micro\": \"var(--jkl-text-style-text-micro)\",\n  },\n};\n"],"names":["tokens","color","background","page","container","contrast","text","default","subdued","accent","border","strong","warning","success","info","error","unit","base","spacing","none","xs","s","m","l","xl","width","radius","full","breakpoint","small","medium","large","motion","timing","energetic","snappy","productive","polite","expressive","lazy","easing","standard","entrance","exit","easeInBounceOut","focus","font","size","weight","normal","bold","family","regular","display","mono","lineHeight","flush","tight","relaxed","textStyle","title"],"mappings":"AAIA,MAAAA,EAAe,CACbC,MAAO,CACL,IAAK,CACHC,WAAY,CACVC,KAAM,mCACNC,UAAW,wCACX,mBAAoB,+CACpBC,SAAU,wCAEZC,KAAM,CACJC,QAAS,gCACTC,QAAS,gCACTC,OAAQ,+BACR,cAAe,qCAEjBC,OAAQ,CACNH,QAAS,kCACTC,QAAS,kCACTG,OAAQ,mCAGZC,QAAS,CACPV,WAAY,CACVC,KAAM,2CACNC,UAAW,gDACX,mBACE,uDACFC,SAAU,gDAEZC,KAAM,CACJC,QAAS,wCACTC,QAAS,wCACTC,OAAQ,uCACR,cAAe,6CAEjBC,OAAQ,CACNH,QAAS,0CACTC,QAAS,0CACTG,OAAQ,2CAGZE,QAAS,CACPX,WAAY,CACVC,KAAM,2CACNC,UAAW,gDACX,mBACE,uDACFC,SAAU,gDAEZC,KAAM,CACJC,QAAS,wCACTC,QAAS,wCACTC,OAAQ,uCACR,cAAe,6CAEjBC,OAAQ,CACNH,QAAS,0CACTC,QAAS,0CACTG,OAAQ,2CAGZG,KAAM,CACJZ,WAAY,CACVC,KAAM,wCACNC,UAAW,6CACX,mBAAoB,oDACpBC,SAAU,6CAEZC,KAAM,CACJC,QAAS,qCACTC,QAAS,qCACTC,OAAQ,oCACR,cAAe,0CAEjBC,OAAQ,CACNH,QAAS,uCACTC,QAAS,uCACTG,OAAQ,wCAGZI,MAAO,CACLb,WAAY,CACVC,KAAM,yCACNC,UAAW,8CACX,mBACE,qDACFC,SAAU,8CAEZC,KAAM,CACJC,QAAS,sCACTC,QAAS,sCACTC,OAAQ,qCACR,cAAe,2CAEjBC,OAAQ,CACNH,QAAS,wCACTC,QAAS,wCACTG,OAAQ,0CAIdK,KAAM,CACJ,EAAG,oBACH,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,IAAK,sBACL,IAAK,sBACL,IAAK,sBACLC,KAAM,uBACN,KAAM,qBACN,KAAM,sBAERC,QAAS,CACP,EAAG,uBACH,EAAG,uBACH,EAAG,uBACH,EAAG,uBACH,GAAI,wBACJ,GAAI,wBACJ,GAAI,wBACJ,GAAI,wBACJ,GAAI,wBACJ,GAAI,wBACJ,IAAK,yBACL,IAAK,yBACLC,KAAM,0BACN,MAAO,yBACPC,GAAI,wBACJC,EAAG,uBACHC,EAAG,uBACHC,EAAG,uBACHC,GAAI,wBACJ,MAAO,0BAETd,OAAQ,CACNe,MAAO,CACL,EAAG,4BACH,EAAG,4BACH,EAAG,6BAELC,OAAQ,CACNP,KAAM,gCACNC,GAAI,8BACJC,EAAG,6BACHC,EAAG,6BACHC,EAAG,6BACHI,KAAM,kCAGVC,WAAY,CACVC,MAAO,IACPC,OAAQ,QACRC,MAAO,SACPP,GAAI,UAENQ,OAAQ,CACNC,OAAQ,CACNC,UAAW,qCACXC,OAAQ,kCACRC,WAAY,sCACZC,OAAQ,kCACRC,WAAY,sCACZC,KAAM,iCAERC,OAAQ,CACNC,SAAU,oCACVC,SAAU,oCACVC,KAAM,gCACNC,gBAAiB,8CACjBC,MAAO,mCAGXC,KAAM,CACJC,KAAM,CACJ,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,GAAI,2BAENC,OAAQ,CACNC,OAAQ,gCACRC,KAAM,+BAERC,OAAQ,CACNC,QAAS,iCACTC,QAAS,iCACTC,KAAM,gCAGVC,WAAY,CACVC,MAAO,+BACPC,MAAO,+BACPC,QAAS,kCAEXC,UAAW,CACTC,MAAO,8BACP,cAAe,oCACf,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,kBAAmB,wCACnB,mBAAoB,yCACpB,kBAAmB,wCACnB,aAAc,mCACd,cAAe,oCACf,aAAc,mCACd,aAAc"}
+{"version":3,"file":"tokens.js","sources":["../../src/tokens.ts"],"sourcesContent":["/**\n * Do not edit directly, this file was auto-generated.\n */\n\nexport default {\n  color: {\n    \"@\": {\n      background: {\n        page: \"var(--jkl-color-background-page)\",\n        container: \"var(--jkl-color-background-container)\",\n        \"container-accent\": \"var(--jkl-color-background-container-accent)\",\n        contrast: \"var(--jkl-color-background-contrast)\",\n      },\n      text: {\n        default: \"var(--jkl-color-text-default)\",\n        subdued: \"var(--jkl-color-text-subdued)\",\n        accent: \"var(--jkl-color-text-accent)\",\n        \"on-contrast\": \"var(--jkl-color-text-on-contrast)\",\n      },\n      border: {\n        default: \"var(--jkl-color-border-default)\",\n        subdued: \"var(--jkl-color-border-subdued)\",\n        strong: \"var(--jkl-color-border-strong)\",\n      },\n    },\n    warning: {\n      background: {\n        page: \"var(--jkl-color-warning-background-page)\",\n        container: \"var(--jkl-color-warning-background-container)\",\n        \"container-accent\":\n          \"var(--jkl-color-warning-background-container-accent)\",\n        contrast: \"var(--jkl-color-warning-background-contrast)\",\n      },\n      text: {\n        default: \"var(--jkl-color-warning-text-default)\",\n        subdued: \"var(--jkl-color-warning-text-subdued)\",\n        accent: \"var(--jkl-color-warning-text-accent)\",\n        \"on-contrast\": \"var(--jkl-color-warning-text-on-contrast)\",\n      },\n      border: {\n        default: \"var(--jkl-color-warning-border-default)\",\n        subdued: \"var(--jkl-color-warning-border-subdued)\",\n        strong: \"var(--jkl-color-warning-border-strong)\",\n      },\n    },\n    success: {\n      background: {\n        page: \"var(--jkl-color-success-background-page)\",\n        container: \"var(--jkl-color-success-background-container)\",\n        \"container-accent\":\n          \"var(--jkl-color-success-background-container-accent)\",\n        contrast: \"var(--jkl-color-success-background-contrast)\",\n      },\n      text: {\n        default: \"var(--jkl-color-success-text-default)\",\n        subdued: \"var(--jkl-color-success-text-subdued)\",\n        accent: \"var(--jkl-color-success-text-accent)\",\n        \"on-contrast\": \"var(--jkl-color-success-text-on-contrast)\",\n      },\n      border: {\n        default: \"var(--jkl-color-success-border-default)\",\n        subdued: \"var(--jkl-color-success-border-subdued)\",\n        strong: \"var(--jkl-color-success-border-strong)\",\n      },\n    },\n    info: {\n      background: {\n        page: \"var(--jkl-color-info-background-page)\",\n        container: \"var(--jkl-color-info-background-container)\",\n        \"container-accent\": \"var(--jkl-color-info-background-container-accent)\",\n        contrast: \"var(--jkl-color-info-background-contrast)\",\n      },\n      text: {\n        default: \"var(--jkl-color-info-text-default)\",\n        subdued: \"var(--jkl-color-info-text-subdued)\",\n        accent: \"var(--jkl-color-info-text-accent)\",\n        \"on-contrast\": \"var(--jkl-color-info-text-on-contrast)\",\n      },\n      border: {\n        default: \"var(--jkl-color-info-border-default)\",\n        subdued: \"var(--jkl-color-info-border-subdued)\",\n        strong: \"var(--jkl-color-info-border-strong)\",\n      },\n    },\n    error: {\n      background: {\n        page: \"var(--jkl-color-error-background-page)\",\n        container: \"var(--jkl-color-error-background-container)\",\n        \"container-accent\":\n          \"var(--jkl-color-error-background-container-accent)\",\n        contrast: \"var(--jkl-color-error-background-contrast)\",\n      },\n      text: {\n        default: \"var(--jkl-color-error-text-default)\",\n        subdued: \"var(--jkl-color-error-text-subdued)\",\n        accent: \"var(--jkl-color-error-text-accent)\",\n        \"on-contrast\": \"var(--jkl-color-error-text-on-contrast)\",\n      },\n      border: {\n        default: \"var(--jkl-color-error-border-default)\",\n        subdued: \"var(--jkl-color-error-border-subdued)\",\n        strong: \"var(--jkl-color-error-border-strong)\",\n      },\n    },\n  },\n  unit: {\n    0: \"var(--jkl-unit-0)\",\n    10: \"var(--jkl-unit-10)\",\n    15: \"var(--jkl-unit-15)\",\n    20: \"var(--jkl-unit-20)\",\n    25: \"var(--jkl-unit-25)\",\n    30: \"var(--jkl-unit-30)\",\n    35: \"var(--jkl-unit-35)\",\n    40: \"var(--jkl-unit-40)\",\n    50: \"var(--jkl-unit-50)\",\n    60: \"var(--jkl-unit-60)\",\n    70: \"var(--jkl-unit-70)\",\n    80: \"var(--jkl-unit-80)\",\n    90: \"var(--jkl-unit-90)\",\n    100: \"var(--jkl-unit-100)\",\n    130: \"var(--jkl-unit-130)\",\n    210: \"var(--jkl-unit-210)\",\n    base: \"var(--jkl-unit-base)\",\n    \"02\": \"var(--jkl-unit-02)\",\n    \"05\": \"var(--jkl-unit-05)\",\n  },\n  spacing: {\n    0: \"var(--jkl-spacing-0)\",\n    2: \"var(--jkl-spacing-2)\",\n    4: \"var(--jkl-spacing-4)\",\n    8: \"var(--jkl-spacing-8)\",\n    12: \"var(--jkl-spacing-12)\",\n    16: \"var(--jkl-spacing-16)\",\n    24: \"var(--jkl-spacing-24)\",\n    32: \"var(--jkl-spacing-32)\",\n    40: \"var(--jkl-spacing-40)\",\n    64: \"var(--jkl-spacing-64)\",\n    104: \"var(--jkl-spacing-104)\",\n    168: \"var(--jkl-spacing-168)\",\n    none: \"var(--jkl-spacing-none)\",\n    \"2xs\": \"var(--jkl-spacing-2xs)\",\n    xs: \"var(--jkl-spacing-xs)\",\n    s: \"var(--jkl-spacing-s)\",\n    m: \"var(--jkl-spacing-m)\",\n    l: \"var(--jkl-spacing-l)\",\n    xl: \"var(--jkl-spacing-xl)\",\n    \"2xl\": \"var(--jkl-spacing-2xl)\",\n  },\n  border: {\n    width: {\n      1: \"var(--jkl-border-width-1)\",\n      2: \"var(--jkl-border-width-2)\",\n      3: \"var(--jkl-border-width-3)\",\n    },\n    radius: {\n      none: \"var(--jkl-border-radius-none)\",\n      xs: \"var(--jkl-border-radius-xs)\",\n      s: \"var(--jkl-border-radius-s)\",\n      m: \"var(--jkl-border-radius-m)\",\n      l: \"var(--jkl-border-radius-l)\",\n      full: \"var(--jkl-border-radius-full)\",\n    },\n  },\n  breakpoint: {\n    small: \"0\",\n    medium: \"680px\",\n    large: \"1200px\",\n    xl: \"1600px\",\n  },\n  motion: {\n    timing: {\n      energetic: \"var(--jkl-motion-timing-energetic)\",\n      snappy: \"var(--jkl-motion-timing-snappy)\",\n      productive: \"var(--jkl-motion-timing-productive)\",\n      polite: \"var(--jkl-motion-timing-polite)\",\n      expressive: \"var(--jkl-motion-timing-expressive)\",\n      lazy: \"var(--jkl-motion-timing-lazy)\",\n    },\n    easing: {\n      standard: \"var(--jkl-motion-easing-standard)\",\n      entrance: \"var(--jkl-motion-easing-entrance)\",\n      exit: \"var(--jkl-motion-easing-exit)\",\n      easeInBounceOut: \"var(--jkl-motion-easing-ease-in-bounce-out)\",\n      focus: \"var(--jkl-motion-easing-focus)\",\n    },\n  },\n  font: {\n    size: {\n      1: \"var(--jkl-font-size-1)\",\n      2: \"var(--jkl-font-size-2)\",\n      3: \"var(--jkl-font-size-3)\",\n      4: \"var(--jkl-font-size-4)\",\n      5: \"var(--jkl-font-size-5)\",\n      6: \"var(--jkl-font-size-6)\",\n      7: \"var(--jkl-font-size-7)\",\n      8: \"var(--jkl-font-size-8)\",\n      9: \"var(--jkl-font-size-9)\",\n      10: \"var(--jkl-font-size-10)\",\n    },\n    weight: {\n      normal: \"var(--jkl-font-weight-normal)\",\n      bold: \"var(--jkl-font-weight-bold)\",\n    },\n    family: {\n      regular: \"var(--jkl-font-family-regular)\",\n      display: \"var(--jkl-font-family-display)\",\n      mono: \"var(--jkl-font-family-mono)\",\n      icons: \"var(--jkl-font-family-icons)\",\n    },\n  },\n  lineHeight: {\n    flush: \"var(--jkl-line-height-flush)\",\n    tight: \"var(--jkl-line-height-tight)\",\n    relaxed: \"var(--jkl-line-height-relaxed)\",\n  },\n  textStyle: {\n    title: \"var(--jkl-text-style-title)\",\n    \"title-small\": \"var(--jkl-text-style-title-small)\",\n    \"heading-1\": \"var(--jkl-text-style-heading-1)\",\n    \"heading-2\": \"var(--jkl-text-style-heading-2)\",\n    \"heading-3\": \"var(--jkl-text-style-heading-3)\",\n    \"heading-4\": \"var(--jkl-text-style-heading-4)\",\n    \"heading-5\": \"var(--jkl-text-style-heading-5)\",\n    \"paragraph-large\": \"var(--jkl-text-style-paragraph-large)\",\n    \"paragraph-medium\": \"var(--jkl-text-style-paragraph-medium)\",\n    \"paragraph-small\": \"var(--jkl-text-style-paragraph-small)\",\n    \"text-large\": \"var(--jkl-text-style-text-large)\",\n    \"text-medium\": \"var(--jkl-text-style-text-medium)\",\n    \"text-small\": \"var(--jkl-text-style-text-small)\",\n    \"text-micro\": \"var(--jkl-text-style-text-micro)\",\n  },\n};\n"],"names":["tokens","color","background","page","container","contrast","text","default","subdued","accent","border","strong","warning","success","info","error","unit","base","spacing","none","xs","s","m","l","xl","width","radius","full","breakpoint","small","medium","large","motion","timing","energetic","snappy","productive","polite","expressive","lazy","easing","standard","entrance","exit","easeInBounceOut","focus","font","size","weight","normal","bold","family","regular","display","mono","icons","lineHeight","flush","tight","relaxed","textStyle","title"],"mappings":"AAIA,MAAAA,EAAe,CACbC,MAAO,CACL,IAAK,CACHC,WAAY,CACVC,KAAM,mCACNC,UAAW,wCACX,mBAAoB,+CACpBC,SAAU,wCAEZC,KAAM,CACJC,QAAS,gCACTC,QAAS,gCACTC,OAAQ,+BACR,cAAe,qCAEjBC,OAAQ,CACNH,QAAS,kCACTC,QAAS,kCACTG,OAAQ,mCAGZC,QAAS,CACPV,WAAY,CACVC,KAAM,2CACNC,UAAW,gDACX,mBACE,uDACFC,SAAU,gDAEZC,KAAM,CACJC,QAAS,wCACTC,QAAS,wCACTC,OAAQ,uCACR,cAAe,6CAEjBC,OAAQ,CACNH,QAAS,0CACTC,QAAS,0CACTG,OAAQ,2CAGZE,QAAS,CACPX,WAAY,CACVC,KAAM,2CACNC,UAAW,gDACX,mBACE,uDACFC,SAAU,gDAEZC,KAAM,CACJC,QAAS,wCACTC,QAAS,wCACTC,OAAQ,uCACR,cAAe,6CAEjBC,OAAQ,CACNH,QAAS,0CACTC,QAAS,0CACTG,OAAQ,2CAGZG,KAAM,CACJZ,WAAY,CACVC,KAAM,wCACNC,UAAW,6CACX,mBAAoB,oDACpBC,SAAU,6CAEZC,KAAM,CACJC,QAAS,qCACTC,QAAS,qCACTC,OAAQ,oCACR,cAAe,0CAEjBC,OAAQ,CACNH,QAAS,uCACTC,QAAS,uCACTG,OAAQ,wCAGZI,MAAO,CACLb,WAAY,CACVC,KAAM,yCACNC,UAAW,8CACX,mBACE,qDACFC,SAAU,8CAEZC,KAAM,CACJC,QAAS,sCACTC,QAAS,sCACTC,OAAQ,qCACR,cAAe,2CAEjBC,OAAQ,CACNH,QAAS,wCACTC,QAAS,wCACTG,OAAQ,0CAIdK,KAAM,CACJ,EAAG,oBACH,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,IAAK,sBACL,IAAK,sBACL,IAAK,sBACLC,KAAM,uBACN,KAAM,qBACN,KAAM,sBAERC,QAAS,CACP,EAAG,uBACH,EAAG,uBACH,EAAG,uBACH,EAAG,uBACH,GAAI,wBACJ,GAAI,wBACJ,GAAI,wBACJ,GAAI,wBACJ,GAAI,wBACJ,GAAI,wBACJ,IAAK,yBACL,IAAK,yBACLC,KAAM,0BACN,MAAO,yBACPC,GAAI,wBACJC,EAAG,uBACHC,EAAG,uBACHC,EAAG,uBACHC,GAAI,wBACJ,MAAO,0BAETd,OAAQ,CACNe,MAAO,CACL,EAAG,4BACH,EAAG,4BACH,EAAG,6BAELC,OAAQ,CACNP,KAAM,gCACNC,GAAI,8BACJC,EAAG,6BACHC,EAAG,6BACHC,EAAG,6BACHI,KAAM,kCAGVC,WAAY,CACVC,MAAO,IACPC,OAAQ,QACRC,MAAO,SACPP,GAAI,UAENQ,OAAQ,CACNC,OAAQ,CACNC,UAAW,qCACXC,OAAQ,kCACRC,WAAY,sCACZC,OAAQ,kCACRC,WAAY,sCACZC,KAAM,iCAERC,OAAQ,CACNC,SAAU,oCACVC,SAAU,oCACVC,KAAM,gCACNC,gBAAiB,8CACjBC,MAAO,mCAGXC,KAAM,CACJC,KAAM,CACJ,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,GAAI,2BAENC,OAAQ,CACNC,OAAQ,gCACRC,KAAM,+BAERC,OAAQ,CACNC,QAAS,iCACTC,QAAS,iCACTC,KAAM,8BACNC,MAAO,iCAGXC,WAAY,CACVC,MAAO,+BACPC,MAAO,+BACPC,QAAS,kCAEXC,UAAW,CACTC,MAAO,8BACP,cAAe,oCACf,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,kBAAmB,wCACnB,mBAAoB,yCACpB,kBAAmB,wCACnB,aAAc,mCACd,cAAe,oCACf,aAAc,mCACd,aAAc"}

package/build/es/utilities/formatters/util/registerWithMask.d.ts

@@ -35,8 +35,6 @@ export declare const registerWithMasks: <T extends FieldValues>(form: UseFormRet
     registerWithTelefonnummerMask: (name: Path<T>, options?: RegisterWithMaskOptions<T>) => UseFormRegisterReturn;
     registerWithOrganisasjonsnummerMask: (name: Path<T>, options?: RegisterWithMaskOptions<T>) => UseFormRegisterReturn;
     registerWithDateMask: (name: Path<T>, options?: RegisterWithMaskOptions<T>) => UseFormRegisterReturn;
-    registerWithNumber: (name: Path<T>, options?: RegisterWithMaskOptions<T>) => UseFormRegisterReturn & {
-        align: "right";
-    };
+    registerWithNumber: (name: Path<T>, options?: RegisterWithMaskOptions<T>) => UseFormRegisterReturn;
 };
 export {};

package/build/es/utilities/formatters/util/registerWithMask.js

@@ -1,2 +1,2 @@
-import{formatDateString as e}from"../date/formatDate.js";import{formatFodselsnummer as r}from"../fodselsnummer/formatFodselsnummer.js";import{formatKontonummer as t}from"../kontonummer/formatKontonummer.js";import{formatKortnummer as m}from"../kortnummer/formatKortnummer.js";import{formatOrganisasjonsnummer as n}from"../organisasjonsnummer/formatOrganisasjonsnummer.js";import{formatTelefonnummer as s}from"../telefonnummer/formatTelefonnummer.js";import{formatNumber as o}from"./formatNumber.js";const a={date:e,fodselsnummer:r,kortnummer:m,kontonummer:t,telefonnummer:s,number:o,organisasjonsnummer:n},i=e=>(r,t,m)=>{let n=0,s="",o="";const i={setValueAs:e=>e.replace(/\s/g,""),onChange:i=>{m?.onChange?.(i);let u=0;const l=i.target.value.length;null!==i.target.selectionStart&&(u=i.target.selectionStart);const g=a[e](i.target.value,{partial:!0}),f=g.toString().length;r.setValue(t,g);let k=null;if(["Delete","Backspace"].includes(s)){const e=n-u,r=""===o.trim()?0:f-l;k=n-e+r}else if(u<i.target.value.length||l!==f){k=u+(f-l)}if(null!==k){const e=((e,r,t)=>Math.min(Math.max(e,r),t))(k,0,f);i.target.setSelectionRange(e,e,void 0)}}};m&&Object.assign(i,m);const u=r.register(t,i),l={onKeyDown:e=>{o="";const r=e.target,{selectionStart:t,selectionEnd:m,value:a}=r;null!==t&&(n=t,null!==m&&m>t?o=a.slice(t,m):"Backspace"===e.key?o=a[n-1]??"":"Delete"===e.key&&(o=a[n]??"")),s=e.key}};return"number"===e&&(l.align="right"),Object.assign(u,l)},u=i("fodselsnummer"),l=i("kortnummer"),g=i("kontonummer"),f=i("telefonnummer"),k=e=>({registerWithFodselsnummerMask:(r,t)=>i("fodselsnummer")(e,r,t),registerWithKortnummerMask:(r,t)=>i("kortnummer")(e,r,t),registerWithKontonummerMask:(r,t)=>i("kontonummer")(e,r,t),registerWithTelefonnummerMask:(r,t)=>i("telefonnummer")(e,r,t),registerWithOrganisasjonsnummerMask:(r,t)=>i("organisasjonsnummer")(e,r,t),registerWithDateMask:(r,t)=>i("date")(e,r,t),registerWithNumber:(r,t)=>i("number")(e,r,t)});export{u as registerWithFodselsnummerMask,g as registerWithKontonummerMask,l as registerWithKortnummerMask,k as registerWithMasks,f as registerWithTelefonnummerMask};
+import{formatDateString as e}from"../date/formatDate.js";import{formatFodselsnummer as r}from"../fodselsnummer/formatFodselsnummer.js";import{formatKontonummer as t}from"../kontonummer/formatKontonummer.js";import{formatKortnummer as m}from"../kortnummer/formatKortnummer.js";import{formatOrganisasjonsnummer as n}from"../organisasjonsnummer/formatOrganisasjonsnummer.js";import{formatTelefonnummer as s}from"../telefonnummer/formatTelefonnummer.js";import{formatNumber as o}from"./formatNumber.js";const a={date:e,fodselsnummer:r,kortnummer:m,kontonummer:t,telefonnummer:s,number:o,organisasjonsnummer:n},i=e=>(r,t,m)=>{let n=0,s="",o="";const i={setValueAs:e=>e.replace(/\s/g,""),onChange:i=>{m?.onChange?.(i);let u=0;const l=i.target.value.length;null!==i.target.selectionStart&&(u=i.target.selectionStart);const g=a[e](i.target.value,{partial:!0}),f=g.toString().length;r.setValue(t,g);let k=null;if(["Delete","Backspace"].includes(s)){const e=n-u,r=""===o.trim()?0:f-l;k=n-e+r}else if(u<i.target.value.length||l!==f){k=u+(f-l)}if(null!==k){const e=((e,r,t)=>Math.min(Math.max(e,r),t))(k,0,f);i.target.setSelectionRange(e,e,void 0)}}};m&&Object.assign(i,m);const u=r.register(t,i);return Object.assign(u,{onKeyDown:e=>{o="";const r=e.target,{selectionStart:t,selectionEnd:m,value:a}=r;null!==t&&(n=t,null!==m&&m>t?o=a.slice(t,m):"Backspace"===e.key?o=a[n-1]??"":"Delete"===e.key&&(o=a[n]??"")),s=e.key}})},u=i("fodselsnummer"),l=i("kortnummer"),g=i("kontonummer"),f=i("telefonnummer"),k=e=>({registerWithFodselsnummerMask:(r,t)=>i("fodselsnummer")(e,r,t),registerWithKortnummerMask:(r,t)=>i("kortnummer")(e,r,t),registerWithKontonummerMask:(r,t)=>i("kontonummer")(e,r,t),registerWithTelefonnummerMask:(r,t)=>i("telefonnummer")(e,r,t),registerWithOrganisasjonsnummerMask:(r,t)=>i("organisasjonsnummer")(e,r,t),registerWithDateMask:(r,t)=>i("date")(e,r,t),registerWithNumber:(r,t)=>i("number")(e,r,t)});export{u as registerWithFodselsnummerMask,g as registerWithKontonummerMask,l as registerWithKortnummerMask,k as registerWithMasks,f as registerWithTelefonnummerMask};
 //# sourceMappingURL=registerWithMask.js.map

package/build/es/utilities/formatters/util/registerWithMask.js.map

@@ -1 +1 @@
-{"version":3,"file":"registerWithMask.js","sources":["../../../../../src/utilities/formatters/util/registerWithMask.ts"],"sourcesContent":["import type { ChangeEvent, KeyboardEventHandler } from \"react\";\nimport type {\n    FieldValues,\n    Path,\n    PathValue,\n    RegisterOptions,\n    UseFormRegisterReturn,\n    UseFormReturn,\n} from \"react-hook-form\";\nimport { formatDateString } from \"../date/formatDate.js\";\nimport { formatFodselsnummer } from \"../fodselsnummer/formatFodselsnummer.js\";\nimport { formatKontonummer } from \"../kontonummer/formatKontonummer.js\";\nimport { formatKortnummer } from \"../kortnummer/formatKortnummer.js\";\nimport { formatOrganisasjonsnummer } from \"../organisasjonsnummer/formatOrganisasjonsnummer.js\";\nimport { formatTelefonnummer } from \"../telefonnummer/formatTelefonnummer.js\";\nimport { formatNumber } from \"./formatNumber.js\";\n\nconst formatters = {\n    date: formatDateString,\n    fodselsnummer: formatFodselsnummer,\n    kortnummer: formatKortnummer,\n    kontonummer: formatKontonummer,\n    telefonnummer: formatTelefonnummer,\n    number: formatNumber,\n    organisasjonsnummer: formatOrganisasjonsnummer,\n};\nexport type Formatter = keyof typeof formatters;\n\nconst clamp = (value: number, min: number, max: number) =>\n    Math.min(Math.max(value, min), max);\n\nexport type RegisterWithMaskOptions<T extends FieldValues> = Omit<\n    RegisterOptions<T>,\n    \"setValueAs\"\n>;\n\nconst registerWithMask =\n    (formatter: Formatter) =>\n    <T extends FieldValues>(\n        form: UseFormReturn<T>,\n        name: Path<T>,\n        options?: RegisterWithMaskOptions<T>,\n    ) => {\n        let onKeyDownCaretPosition = 0;\n        let onKeyDownKeyPressed = \"\";\n        let deletedCharactersOnKeyDown = \"\";\n\n        const setValueAs = (value: string) => value.replace(/\\s/g, \"\");\n        const onChange = (event: ChangeEvent<HTMLInputElement>) => {\n            options?.onChange?.(event);\n\n            // save some values before event.target.value change\n            let onChangeCaretPosition = 0;\n            const inputLength = event.target.value.length;\n\n            // type checking formalities\n            if (event.target.selectionStart !== null) {\n                onChangeCaretPosition = event.target.selectionStart;\n            }\n\n            const formattedValue = formatters[formatter](event.target.value, {\n                partial: true,\n            });\n            const formattedLength = formattedValue.toString().length;\n\n            form.setValue(name, formattedValue as PathValue<T, Path<T>>);\n\n            let newPosition: number | null = null;\n\n            if ([\"Delete\", \"Backspace\"].includes(onKeyDownKeyPressed)) {\n                // handle removing content\n                // calculate how much to move the caret, this also accounts for removing sections of text\n                const delta = onKeyDownCaretPosition - onChangeCaretPosition;\n                const formattedLengthChange =\n                    deletedCharactersOnKeyDown.trim() === \"\"\n                        ? 0\n                        : formattedLength - inputLength;\n\n                // calculate new caret position (- because we move backwards)\n                newPosition =\n                    onKeyDownCaretPosition - delta + formattedLengthChange;\n            } else if (\n                onChangeCaretPosition < event.target.value.length ||\n                inputLength !== formattedLength\n            ) {\n                // handle adding content from inside the string\n                // calculate how much to move the caret forwards\n                const delta = formattedLength - inputLength;\n\n                // calculate new caret position (+ because we move forwards)\n                newPosition = onChangeCaretPosition + delta;\n            }\n\n            if (newPosition !== null) {\n                const clampedPosition = clamp(newPosition, 0, formattedLength);\n\n                event.target.setSelectionRange(\n                    clampedPosition,\n                    clampedPosition,\n                    undefined,\n                );\n            }\n        };\n\n        const registerOptions: RegisterOptions<T, Path<T>> = {\n            setValueAs,\n            onChange,\n        };\n        if (options) {\n            Object.assign(registerOptions, options);\n        }\n        const register = form.register(name, registerOptions);\n\n        // save the caret position before the change occured\n        const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n            deletedCharactersOnKeyDown = \"\";\n\n            const input = event.target as HTMLInputElement;\n            const { selectionStart, selectionEnd, value } = input;\n\n            if (selectionStart !== null) {\n                onKeyDownCaretPosition = selectionStart;\n\n                if (selectionEnd !== null && selectionEnd > selectionStart) {\n                    deletedCharactersOnKeyDown = value.slice(\n                        selectionStart,\n                        selectionEnd,\n                    );\n                } else if (event.key === \"Backspace\") {\n                    deletedCharactersOnKeyDown =\n                        value[onKeyDownCaretPosition - 1] ?? \"\";\n                } else if (event.key === \"Delete\") {\n                    deletedCharactersOnKeyDown =\n                        value[onKeyDownCaretPosition] ?? \"\";\n                }\n            }\n            onKeyDownKeyPressed = event.key;\n        };\n\n        // add onKeyDown event handler to the registered input\n        const extra: Record<string, unknown> = {\n            onKeyDown,\n        };\n\n        if (formatter === \"number\") {\n            extra.align = \"right\"; // Se https://github.com/fremtind/jokul/pull/2898\n        }\n\n        return Object.assign(register, extra);\n    };\n\n/** @deprecated Bruk `registerWithMasks` i stedet */\nexport const registerWithFodselsnummerMask = registerWithMask(\"fodselsnummer\");\n/** @deprecated Bruk `registerWithMasks` i stedet */\nexport const registerWithKortnummerMask = registerWithMask(\"kortnummer\");\n/** @deprecated Bruk `registerWithMasks` i stedet */\nexport const registerWithKontonummerMask = registerWithMask(\"kontonummer\");\n/** @deprecated Bruk `registerWithMasks` i stedet */\nexport const registerWithTelefonnummerMask = registerWithMask(\"telefonnummer\");\n\n/**\n * Hjelpefunksjon for React Hook Form som lar deg bruke formateringsfunksjonene i denne pakken som inputmasker.\n */\nexport const registerWithMasks = <T extends FieldValues>(\n    form: UseFormReturn<T>,\n) => ({\n    registerWithFodselsnummerMask: (\n        name: Path<T>,\n        options?: RegisterWithMaskOptions<T>,\n    ): UseFormRegisterReturn =>\n        registerWithMask(\"fodselsnummer\")<T>(form, name, options),\n    registerWithKortnummerMask: (\n        name: Path<T>,\n        options?: RegisterWithMaskOptions<T>,\n    ): UseFormRegisterReturn =>\n        registerWithMask(\"kortnummer\")<T>(form, name, options),\n    registerWithKontonummerMask: (\n        name: Path<T>,\n        options?: RegisterWithMaskOptions<T>,\n    ): UseFormRegisterReturn =>\n        registerWithMask(\"kontonummer\")<T>(form, name, options),\n    registerWithTelefonnummerMask: (\n        name: Path<T>,\n        options?: RegisterWithMaskOptions<T>,\n    ): UseFormRegisterReturn =>\n        registerWithMask(\"telefonnummer\")<T>(form, name, options),\n    registerWithOrganisasjonsnummerMask: (\n        name: Path<T>,\n        options?: RegisterWithMaskOptions<T>,\n    ): UseFormRegisterReturn =>\n        registerWithMask(\"organisasjonsnummer\")<T>(form, name, options),\n    registerWithDateMask: (\n        name: Path<T>,\n        options?: RegisterWithMaskOptions<T>,\n    ): UseFormRegisterReturn =>\n        registerWithMask(\"date\")<T>(form, name, options),\n    registerWithNumber: (\n        name: Path<T>,\n        options?: RegisterWithMaskOptions<T>,\n    ): UseFormRegisterReturn & { align: \"right\" } =>\n        registerWithMask(\"number\")<T>(\n            form,\n            name,\n            options,\n        ) as unknown as UseFormRegisterReturn & {\n            align: \"right\";\n        },\n});\n"],"names":["formatters","date","formatDateString","fodselsnummer","formatFodselsnummer","kortnummer","formatKortnummer","kontonummer","formatKontonummer","telefonnummer","formatTelefonnummer","number","formatNumber","organisasjonsnummer","formatOrganisasjonsnummer","registerWithMask","formatter","form","name","options","onKeyDownCaretPosition","onKeyDownKeyPressed","deletedCharactersOnKeyDown","registerOptions","setValueAs","value","replace","onChange","event","onChangeCaretPosition","inputLength","target","length","selectionStart","formattedValue","partial","formattedLength","toString","setValue","newPosition","includes","delta","formattedLengthChange","trim","clampedPosition","min","max","Math","clamp","setSelectionRange","Object","assign","register","extra","onKeyDown","input","selectionEnd","slice","key","align","registerWithFodselsnummerMask","registerWithKortnummerMask","registerWithKontonummerMask","registerWithTelefonnummerMask","registerWithMasks","registerWithOrganisasjonsnummerMask","registerWithDateMask","registerWithNumber"],"mappings":"mfAiBA,MAAMA,EAAa,CACfC,KAAMC,EACNC,cAAeC,EACfC,WAAYC,EACZC,YAAaC,EACbC,cAAeC,EACfC,OAAQC,EACRC,oBAAqBC,GAYnBC,EACDC,GACD,CACIC,EACAC,EACAC,KAEA,IAAIC,EAAyB,EACzBC,EAAsB,GACtBC,EAA6B,GA2DjC,MAAMC,EAA+C,CACjDC,WA1DgBC,GAAkBA,EAAMC,QAAQ,MAAO,IA2DvDC,SA1DcC,IACdT,GAASQ,WAAWC,GAGpB,IAAIC,EAAwB,EAC5B,MAAMC,EAAcF,EAAMG,OAAON,MAAMO,OAGH,OAAhCJ,EAAMG,OAAOE,iBACbJ,EAAwBD,EAAMG,OAAOE,gBAGzC,MAAMC,EAAiBlC,EAAWgB,GAAWY,EAAMG,OAAON,MAAO,CAC7DU,SAAS,IAEPC,EAAkBF,EAAeG,WAAWL,OAElDf,EAAKqB,SAASpB,EAAMgB,GAEpB,IAAIK,EAA6B,KAEjC,GAAI,CAAC,SAAU,aAAaC,SAASnB,GAAsB,CAGvD,MAAMoB,EAAQrB,EAAyBS,EACjCa,EACoC,KAAtCpB,EAA2BqB,OACrB,EACAP,EAAkBN,EAG5BS,EACInB,EAAyBqB,EAAQC,CACzC,SACIb,EAAwBD,EAAMG,OAAON,MAAMO,QAC3CF,IAAgBM,EAClB,CAMEG,EAAcV,GAHAO,EAAkBN,EAIpC,CAEA,GAAoB,OAAhBS,EAAsB,CACtB,MAAMK,EAlER,EAACnB,EAAeoB,EAAaC,IACvCC,KAAKF,IAAIE,KAAKD,IAAIrB,EAAOoB,GAAMC,GAiEKE,CAAMT,EAAa,EAAGH,GAE9CR,EAAMG,OAAOkB,kBACTL,EACAA,OACA,EAER,IAOAzB,GACA+B,OAAOC,OAAO5B,EAAiBJ,GAEnC,MAAMiC,EAAWnC,EAAKmC,SAASlC,EAAMK,GA6B/B8B,EAAiC,CACnCC,UA3BuD1B,IACvDN,EAA6B,GAE7B,MAAMiC,EAAQ3B,EAAMG,QACZE,eAAAA,EAAgBuB,aAAAA,EAAc/B,MAAAA,GAAU8B,EAEzB,OAAnBtB,IACAb,EAAyBa,EAEJ,OAAjBuB,GAAyBA,EAAevB,EACxCX,EAA6BG,EAAMgC,MAC/BxB,EACAuB,GAEiB,cAAd5B,EAAM8B,IACbpC,EACIG,EAAML,EAAyB,IAAM,GACpB,WAAdQ,EAAM8B,MACbpC,EACIG,EAAML,IAA2B,KAG7CC,EAAsBO,EAAM8B,MAQhC,MAAkB,WAAd1C,IACAqC,EAAMM,MAAQ,SAGXT,OAAOC,OAAOC,EAAUC,IAI1BO,EAAgC7C,EAAiB,iBAEjD8C,EAA6B9C,EAAiB,cAE9C+C,EAA8B/C,EAAiB,eAE/CgD,EAAgChD,EAAiB,iBAKjDiD,EACT/C,IAAAA,CAEA2C,8BAA+B,CAC3B1C,EACAC,IAEAJ,EAAiB,gBAAjBA,CAAqCE,EAAMC,EAAMC,GACrD0C,2BAA4B,CACxB3C,EACAC,IAEAJ,EAAiB,aAAjBA,CAAkCE,EAAMC,EAAMC,GAClD2C,4BAA6B,CACzB5C,EACAC,IAEAJ,EAAiB,cAAjBA,CAAmCE,EAAMC,EAAMC,GACnD4C,8BAA+B,CAC3B7C,EACAC,IAEAJ,EAAiB,gBAAjBA,CAAqCE,EAAMC,EAAMC,GACrD8C,oCAAqC,CACjC/C,EACAC,IAEAJ,EAAiB,sBAAjBA,CAA2CE,EAAMC,EAAMC,GAC3D+C,qBAAsB,CAClBhD,EACAC,IAEAJ,EAAiB,OAAjBA,CAA4BE,EAAMC,EAAMC,GAC5CgD,mBAAoB,CAChBjD,EACAC,IAEAJ,EAAiB,SAAjBA,CACIE,EACAC,EACAC"}
+{"version":3,"file":"registerWithMask.js","sources":["../../../../../src/utilities/formatters/util/registerWithMask.ts"],"sourcesContent":["import type { ChangeEvent, KeyboardEventHandler } from \"react\";\nimport type {\n    FieldValues,\n    Path,\n    PathValue,\n    RegisterOptions,\n    UseFormRegisterReturn,\n    UseFormReturn,\n} from \"react-hook-form\";\nimport { formatDateString } from \"../date/formatDate.js\";\nimport { formatFodselsnummer } from \"../fodselsnummer/formatFodselsnummer.js\";\nimport { formatKontonummer } from \"../kontonummer/formatKontonummer.js\";\nimport { formatKortnummer } from \"../kortnummer/formatKortnummer.js\";\nimport { formatOrganisasjonsnummer } from \"../organisasjonsnummer/formatOrganisasjonsnummer.js\";\nimport { formatTelefonnummer } from \"../telefonnummer/formatTelefonnummer.js\";\nimport { formatNumber } from \"./formatNumber.js\";\n\nconst formatters = {\n    date: formatDateString,\n    fodselsnummer: formatFodselsnummer,\n    kortnummer: formatKortnummer,\n    kontonummer: formatKontonummer,\n    telefonnummer: formatTelefonnummer,\n    number: formatNumber,\n    organisasjonsnummer: formatOrganisasjonsnummer,\n};\nexport type Formatter = keyof typeof formatters;\n\nconst clamp = (value: number, min: number, max: number) =>\n    Math.min(Math.max(value, min), max);\n\nexport type RegisterWithMaskOptions<T extends FieldValues> = Omit<\n    RegisterOptions<T>,\n    \"setValueAs\"\n>;\n\nconst registerWithMask =\n    (formatter: Formatter) =>\n    <T extends FieldValues>(\n        form: UseFormReturn<T>,\n        name: Path<T>,\n        options?: RegisterWithMaskOptions<T>,\n    ) => {\n        let onKeyDownCaretPosition = 0;\n        let onKeyDownKeyPressed = \"\";\n        let deletedCharactersOnKeyDown = \"\";\n\n        const setValueAs = (value: string) => value.replace(/\\s/g, \"\");\n        const onChange = (event: ChangeEvent<HTMLInputElement>) => {\n            options?.onChange?.(event);\n\n            // save some values before event.target.value change\n            let onChangeCaretPosition = 0;\n            const inputLength = event.target.value.length;\n\n            // type checking formalities\n            if (event.target.selectionStart !== null) {\n                onChangeCaretPosition = event.target.selectionStart;\n            }\n\n            const formattedValue = formatters[formatter](event.target.value, {\n                partial: true,\n            });\n            const formattedLength = formattedValue.toString().length;\n\n            form.setValue(name, formattedValue as PathValue<T, Path<T>>);\n\n            let newPosition: number | null = null;\n\n            if ([\"Delete\", \"Backspace\"].includes(onKeyDownKeyPressed)) {\n                // handle removing content\n                // calculate how much to move the caret, this also accounts for removing sections of text\n                const delta = onKeyDownCaretPosition - onChangeCaretPosition;\n                const formattedLengthChange =\n                    deletedCharactersOnKeyDown.trim() === \"\"\n                        ? 0\n                        : formattedLength - inputLength;\n\n                // calculate new caret position (- because we move backwards)\n                newPosition =\n                    onKeyDownCaretPosition - delta + formattedLengthChange;\n            } else if (\n                onChangeCaretPosition < event.target.value.length ||\n                inputLength !== formattedLength\n            ) {\n                // handle adding content from inside the string\n                // calculate how much to move the caret forwards\n                const delta = formattedLength - inputLength;\n\n                // calculate new caret position (+ because we move forwards)\n                newPosition = onChangeCaretPosition + delta;\n            }\n\n            if (newPosition !== null) {\n                const clampedPosition = clamp(newPosition, 0, formattedLength);\n\n                event.target.setSelectionRange(\n                    clampedPosition,\n                    clampedPosition,\n                    undefined,\n                );\n            }\n        };\n\n        const registerOptions: RegisterOptions<T, Path<T>> = {\n            setValueAs,\n            onChange,\n        };\n        if (options) {\n            Object.assign(registerOptions, options);\n        }\n        const register = form.register(name, registerOptions);\n\n        // save the caret position before the change occured\n        const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n            deletedCharactersOnKeyDown = \"\";\n\n            const input = event.target as HTMLInputElement;\n            const { selectionStart, selectionEnd, value } = input;\n\n            if (selectionStart !== null) {\n                onKeyDownCaretPosition = selectionStart;\n\n                if (selectionEnd !== null && selectionEnd > selectionStart) {\n                    deletedCharactersOnKeyDown = value.slice(\n                        selectionStart,\n                        selectionEnd,\n                    );\n                } else if (event.key === \"Backspace\") {\n                    deletedCharactersOnKeyDown =\n                        value[onKeyDownCaretPosition - 1] ?? \"\";\n                } else if (event.key === \"Delete\") {\n                    deletedCharactersOnKeyDown =\n                        value[onKeyDownCaretPosition] ?? \"\";\n                }\n            }\n            onKeyDownKeyPressed = event.key;\n        };\n\n        // add onKeyDown event handler to the registered input\n        const extra: Record<string, unknown> = {\n            onKeyDown,\n        };\n\n        return Object.assign(register, extra);\n    };\n\n/** @deprecated Bruk `registerWithMasks` i stedet */\nexport const registerWithFodselsnummerMask = registerWithMask(\"fodselsnummer\");\n/** @deprecated Bruk `registerWithMasks` i stedet */\nexport const registerWithKortnummerMask = registerWithMask(\"kortnummer\");\n/** @deprecated Bruk `registerWithMasks` i stedet */\nexport const registerWithKontonummerMask = registerWithMask(\"kontonummer\");\n/** @deprecated Bruk `registerWithMasks` i stedet */\nexport const registerWithTelefonnummerMask = registerWithMask(\"telefonnummer\");\n\n/**\n * Hjelpefunksjon for React Hook Form som lar deg bruke formateringsfunksjonene i denne pakken som inputmasker.\n */\nexport const registerWithMasks = <T extends FieldValues>(\n    form: UseFormReturn<T>,\n) => ({\n    registerWithFodselsnummerMask: (\n        name: Path<T>,\n        options?: RegisterWithMaskOptions<T>,\n    ): UseFormRegisterReturn =>\n        registerWithMask(\"fodselsnummer\")<T>(form, name, options),\n    registerWithKortnummerMask: (\n        name: Path<T>,\n        options?: RegisterWithMaskOptions<T>,\n    ): UseFormRegisterReturn =>\n        registerWithMask(\"kortnummer\")<T>(form, name, options),\n    registerWithKontonummerMask: (\n        name: Path<T>,\n        options?: RegisterWithMaskOptions<T>,\n    ): UseFormRegisterReturn =>\n        registerWithMask(\"kontonummer\")<T>(form, name, options),\n    registerWithTelefonnummerMask: (\n        name: Path<T>,\n        options?: RegisterWithMaskOptions<T>,\n    ): UseFormRegisterReturn =>\n        registerWithMask(\"telefonnummer\")<T>(form, name, options),\n    registerWithOrganisasjonsnummerMask: (\n        name: Path<T>,\n        options?: RegisterWithMaskOptions<T>,\n    ): UseFormRegisterReturn =>\n        registerWithMask(\"organisasjonsnummer\")<T>(form, name, options),\n    registerWithDateMask: (\n        name: Path<T>,\n        options?: RegisterWithMaskOptions<T>,\n    ): UseFormRegisterReturn =>\n        registerWithMask(\"date\")<T>(form, name, options),\n    registerWithNumber: (\n        name: Path<T>,\n        options?: RegisterWithMaskOptions<T>,\n    ): UseFormRegisterReturn =>\n        registerWithMask(\"number\")<T>(form, name, options),\n});\n"],"names":["formatters","date","formatDateString","fodselsnummer","formatFodselsnummer","kortnummer","formatKortnummer","kontonummer","formatKontonummer","telefonnummer","formatTelefonnummer","number","formatNumber","organisasjonsnummer","formatOrganisasjonsnummer","registerWithMask","formatter","form","name","options","onKeyDownCaretPosition","onKeyDownKeyPressed","deletedCharactersOnKeyDown","registerOptions","setValueAs","value","replace","onChange","event","onChangeCaretPosition","inputLength","target","length","selectionStart","formattedValue","partial","formattedLength","toString","setValue","newPosition","includes","delta","formattedLengthChange","trim","clampedPosition","min","max","Math","clamp","setSelectionRange","Object","assign","register","onKeyDown","input","selectionEnd","slice","key","registerWithFodselsnummerMask","registerWithKortnummerMask","registerWithKontonummerMask","registerWithTelefonnummerMask","registerWithMasks","registerWithOrganisasjonsnummerMask","registerWithDateMask","registerWithNumber"],"mappings":"mfAiBA,MAAMA,EAAa,CACfC,KAAMC,EACNC,cAAeC,EACfC,WAAYC,EACZC,YAAaC,EACbC,cAAeC,EACfC,OAAQC,EACRC,oBAAqBC,GAYnBC,EACDC,GACD,CACIC,EACAC,EACAC,KAEA,IAAIC,EAAyB,EACzBC,EAAsB,GACtBC,EAA6B,GA2DjC,MAAMC,EAA+C,CACjDC,WA1DgBC,GAAkBA,EAAMC,QAAQ,MAAO,IA2DvDC,SA1DcC,IACdT,GAASQ,WAAWC,GAGpB,IAAIC,EAAwB,EAC5B,MAAMC,EAAcF,EAAMG,OAAON,MAAMO,OAGH,OAAhCJ,EAAMG,OAAOE,iBACbJ,EAAwBD,EAAMG,OAAOE,gBAGzC,MAAMC,EAAiBlC,EAAWgB,GAAWY,EAAMG,OAAON,MAAO,CAC7DU,SAAS,IAEPC,EAAkBF,EAAeG,WAAWL,OAElDf,EAAKqB,SAASpB,EAAMgB,GAEpB,IAAIK,EAA6B,KAEjC,GAAI,CAAC,SAAU,aAAaC,SAASnB,GAAsB,CAGvD,MAAMoB,EAAQrB,EAAyBS,EACjCa,EACoC,KAAtCpB,EAA2BqB,OACrB,EACAP,EAAkBN,EAG5BS,EACInB,EAAyBqB,EAAQC,CACzC,SACIb,EAAwBD,EAAMG,OAAON,MAAMO,QAC3CF,IAAgBM,EAClB,CAMEG,EAAcV,GAHAO,EAAkBN,EAIpC,CAEA,GAAoB,OAAhBS,EAAsB,CACtB,MAAMK,EAlER,EAACnB,EAAeoB,EAAaC,IACvCC,KAAKF,IAAIE,KAAKD,IAAIrB,EAAOoB,GAAMC,GAiEKE,CAAMT,EAAa,EAAGH,GAE9CR,EAAMG,OAAOkB,kBACTL,EACAA,OACA,EAER,IAOAzB,GACA+B,OAAOC,OAAO5B,EAAiBJ,GAEnC,MAAMiC,EAAWnC,EAAKmC,SAASlC,EAAMK,GAiCrC,OAAO2B,OAAOC,OAAOC,EAJkB,CACnCC,UA3BuDzB,IACvDN,EAA6B,GAE7B,MAAMgC,EAAQ1B,EAAMG,QACZE,eAAAA,EAAgBsB,aAAAA,EAAc9B,MAAAA,GAAU6B,EAEzB,OAAnBrB,IACAb,EAAyBa,EAEJ,OAAjBsB,GAAyBA,EAAetB,EACxCX,EAA6BG,EAAM+B,MAC/BvB,EACAsB,GAEiB,cAAd3B,EAAM6B,IACbnC,EACIG,EAAML,EAAyB,IAAM,GACpB,WAAdQ,EAAM6B,MACbnC,EACIG,EAAML,IAA2B,KAG7CC,EAAsBO,EAAM6B,QAY3BC,EAAgC3C,EAAiB,iBAEjD4C,EAA6B5C,EAAiB,cAE9C6C,EAA8B7C,EAAiB,eAE/C8C,EAAgC9C,EAAiB,iBAKjD+C,EACT7C,IAAAA,CAEAyC,8BAA+B,CAC3BxC,EACAC,IAEAJ,EAAiB,gBAAjBA,CAAqCE,EAAMC,EAAMC,GACrDwC,2BAA4B,CACxBzC,EACAC,IAEAJ,EAAiB,aAAjBA,CAAkCE,EAAMC,EAAMC,GAClDyC,4BAA6B,CACzB1C,EACAC,IAEAJ,EAAiB,cAAjBA,CAAmCE,EAAMC,EAAMC,GACnD0C,8BAA+B,CAC3B3C,EACAC,IAEAJ,EAAiB,gBAAjBA,CAAqCE,EAAMC,EAAMC,GACrD4C,oCAAqC,CACjC7C,EACAC,IAEAJ,EAAiB,sBAAjBA,CAA2CE,EAAMC,EAAMC,GAC3D6C,qBAAsB,CAClB9C,EACAC,IAEAJ,EAAiB,OAAjBA,CAA4BE,EAAMC,EAAMC,GAC5C8C,mBAAoB,CAChB/C,EACAC,IAEAJ,EAAiB,SAAjBA,CAA8BE,EAAMC,EAAMC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fremtind/jokul",
-  "version": "5.0.5",
+  "version": "5.2.0",
   "type": "module",
   "engines": {
     "node": "^20.19.0 || >=22.12.0"
@@ -116,7 +116,7 @@
     "tsx": "^4.20.6",
     "vite": "^7.3.2",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^3.2.4",
+    "vitest": "^4.1.0",
     "vitest-axe": "^0.1.0"
   },
   "peerDependencies": {

package/styles/base.css

@@ -274,13 +274,6 @@
     font-style: normal;
     src: url("/fonts/InterVariable.woff2") format("woff2");
   }
-  @font-face {
-    font-family: "Jokul Mono";
-    font-display: fallback;
-    font-weight: 400;
-    font-style: normal;
-    src: url("/fonts/InterVariable.woff2") format("woff2");
-  }
   @font-face {
     font-family: "Jokul Icons";
     font-weight: 300 400;
@@ -627,7 +620,8 @@
     --jkl-font-weight-bold: 530;
     --jkl-font-family-regular: "Jokul", "Adjusted Arial Fallback", arial, sans-serif;
     --jkl-font-family-display: "Jokul Display", "Adjusted Arial Display Fallback", arial, sans-serif;
-    --jkl-font-family-mono: "Jokul Mono", "Adjusted Courier New Fallback", -apple-system, blinkmacsystemfont, monospace;
+    --jkl-font-family-mono: monospace;
+    --jkl-font-family-icons: "Jokul Icons", "Jokul Icons Fallback", monospace;
     --jkl-line-height-flush: 1;
     --jkl-line-height-tight: 1.3;
     --jkl-line-height-relaxed: 1.6;
@@ -688,6 +682,7 @@
     background-color: var(--jkl-background-color);
     color: var(--jkl-color);
     font-family: var(--jkl-font-family-regular);
+    font-weight: var(--jkl-font-weight-normal);
   }
   .jkl strong {
     font-weight: var(--jkl-font-weight-bold);
@@ -708,9 +703,13 @@
 @layer jokul.global {
   [popover] {
     opacity: 0;
-    transition: opacity, overlay allow-discrete, display allow-discrete;
-    transition-timing-function: var(--jkl-motion-easing-standard);
-    transition-duration: var(--jkl-motion-timing-productive);
+  }
+  @supports (overlay: auto) {
+    [popover] {
+      transition: opacity, overlay allow-discrete, display allow-discrete;
+      transition-timing-function: var(--jkl-motion-easing-standard);
+      transition-duration: var(--jkl-motion-timing-productive);
+    }
   }
   [popover]:popover-open {
     opacity: 1;
@@ -720,6 +719,13 @@
       opacity: 0;
     }
   }
+  @supports not (overlay: auto) {
+    [popover]:popover-open {
+      transition: opacity;
+      transition-timing-function: var(--jkl-motion-easing-standard);
+      transition-duration: var(--jkl-motion-timing-productive);
+    }
+  }
 }
 @layer jokul.utility {
   .jkl-body {