@fremtind/jokul 5.0.1 → 5.0.3

package/build/cjs/components/text-area/BaseTextArea.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),a=require("./counter.cjs"),r=t.forwardRef((r,s)=>{const{autoExpand:l,counter:n,defaultValue:o,onBlur:u,onFocus:i,rows:c=7,placeholder:d=" ",startOpen:h,style:x,value:f,"aria-invalid":g,onChange:v,...j}=r,p=n?.strategy??"characters",y=typeof f<"u",[_,m]=t.useState(o),[k,w]=t.useState(!1),N=t.useRef(null),B=s||N,S=y?f:_,q=y?{value:f}:{defaultValue:o},C=a.getCounterValue(S,p),T=n?.maxLength||0,V=T-C,b=!(!g&&!!!(n&&C>T));t.useEffect(()=>{const e=B.current;if(e){if(!l)return void(e.style.height="");k||S?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height=""}},[l,B,S,k,C]);const A={overflowX:l?"hidden":void 0};return e.jsxs("div",{className:"jkl-text-area-wrapper","data-invalid":b,"data-has-content":C>0,children:[e.jsx("textarea",{"aria-invalid":b,className:`jkl-text-area__text-area jkl-text-area__text-area--${c}-rows`,onBlur:function(e){w(!1),u&&u(e)},onFocus:function(e){w(!0),i&&i(e)},onChange:function(e){y||m(e.target.value),v&&v(e)},ref:B,style:{...x,...A},placeholder:d,...q,...j}),n&&e.jsxs("div",{className:"jkl-text-area__counter","aria-hidden":"true",children:[e.jsxs("div",{className:"jkl-text-area__counter-count",children:[C," / ",T]}),!n.hideProgress&&e.jsx("div",{className:"jkl-text-area__counter-progress",style:{"--progress-width":(E=V,F=T,E<=0||0===F?0:100*E/F)+"%"}})]})]});var E,F});r.displayName="BaseTextArea",exports.BaseTextArea=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),a=require("../../utilities/mergeRefs.cjs"),r=require("./counter.cjs"),s=t.forwardRef((s,l)=>{const{autoExpand:n,counter:u,defaultValue:o,onBlur:i,onFocus:c,rows:d=7,placeholder:h=" ",startOpen:x,style:f,value:g,"aria-invalid":v,onChange:j,...p}=s,m=u?.strategy??"characters",y=typeof g<"u",[_,k]=t.useState(o??""),[w,N]=t.useState(!1),q=t.useRef(null),B=t.useMemo(()=>a.mergeRefs(q,l),[l]),R=y?g:_,S=y?{value:g}:{defaultValue:o},C=r.getCounterValue(R,m),E=u?.maxLength||0,T=E-C,V=!(!v&&!!!(u&&C>E));t.useEffect(()=>{if(!y&&q.current){const e=q.current.value;k(t=>t===e?t:e)}},[y]),t.useEffect(()=>{const e=q.current;if(e){if(!n)return void(e.style.height="");w||R?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height=""}},[n,R,w,C]);const b={overflowX:n?"hidden":void 0};return e.jsxs("div",{className:"jkl-text-area-wrapper","data-invalid":V,"data-has-content":C>0,children:[e.jsx("textarea",{"aria-invalid":V,className:`jkl-text-area__text-area jkl-text-area__text-area--${d}-rows`,onBlur:function(e){N(!1),i&&i(e)},onFocus:function(e){N(!0),c&&c(e)},onChange:function(e){y||k(e.target.value),j&&j(e)},ref:B,style:{...f,...b},placeholder:h,...S,...p}),u&&e.jsxs("div",{className:"jkl-text-area__counter","aria-hidden":"true",children:[e.jsxs("div",{className:"jkl-text-area__counter-count",children:[C," / ",E]}),!u.hideProgress&&e.jsx("div",{className:"jkl-text-area__counter-progress",style:{"--progress-width":(A=T,F=E,A<=0||0===F?0:100*A/F)+"%"}})]})]});var A,F});s.displayName="BaseTextArea",exports.BaseTextArea=s;
 //# sourceMappingURL=BaseTextArea.cjs.map

package/build/cjs/components/text-area/BaseTextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTextArea.cjs","sources":["../../../../src/components/text-area/BaseTextArea.tsx"],"sourcesContent":["import React, {\n    type ChangeEvent,\n    type FocusEvent,\n    forwardRef,\n    type RefObject,\n    useEffect,\n    useRef,\n    useState,\n} from \"react\";\nimport { getCounterValue } from \"./counter.js\";\nimport type { BaseTextAreaProps } from \"./types.js\";\n\nexport const BaseTextArea = forwardRef<HTMLTextAreaElement, BaseTextAreaProps>(\n    (props, ref) => {\n        const {\n            autoExpand,\n            counter,\n            defaultValue,\n            onBlur,\n            onFocus,\n            rows = 7,\n            placeholder = \" \", // This space intentionally left blank. Denne + rows trengs for å få den ekspanderende effekten.\n            startOpen,\n            style,\n            value,\n            \"aria-invalid\": ariaInvalid,\n            onChange,\n            ...rest\n        } = props;\n\n        const strategy = counter?.strategy ?? \"characters\";\n        const isControlled = typeof value !== \"undefined\";\n\n        const [uncontrolledValue, setUncontrolledValue] =\n            useState(defaultValue);\n        const [textAreaFocused, setTextAreaFocused] = useState(false);\n        const internalRef = useRef<HTMLTextAreaElement>(null);\n        const textAreaRef =\n            (ref as RefObject<HTMLTextAreaElement>) || internalRef;\n\n        // Hvis feltet styres utenfra bruker vi `value`, ellers holder vi styr på verdien selv.\n        const textAreaValue = isControlled ? value : uncontrolledValue;\n        const textAreaValueProps = isControlled ? { value } : { defaultValue };\n\n        const counterCurrent = getCounterValue(textAreaValue, strategy);\n        const counterTotal: number = counter?.maxLength || 0;\n        const progressCurrent: number = counterTotal - counterCurrent;\n        const isOverLimit = Boolean(counter && counterCurrent > counterTotal);\n        const invalid = Boolean(ariaInvalid || isOverLimit);\n\n        // biome-ignore lint/correctness/useExhaustiveDependencies: counterCurrent trengs for å lytte på tekstendringer i textarea for auto-expand funksjonalitet\n        useEffect(() => {\n            const textAreaElement = textAreaRef.current;\n            if (textAreaElement) {\n                if (!autoExpand) {\n                    textAreaElement.style.height = \"\";\n                    return;\n                }\n\n                if (textAreaFocused || textAreaValue) {\n                    textAreaElement.style.height = \"auto\"; // Sett til auto før scrollhøyden leses, sånn at redusering av høyde ved sletting av tekst fungerer\n                    textAreaElement.style.height = `${textAreaElement.scrollHeight}px`;\n                } else {\n                    textAreaElement.style.height = \"\";\n                }\n            }\n        }, [\n            autoExpand,\n            textAreaRef,\n            textAreaValue,\n            textAreaFocused,\n            counterCurrent,\n        ]);\n\n        function handleOnFocus(e: FocusEvent<HTMLTextAreaElement>) {\n            setTextAreaFocused(true);\n            if (onFocus) {\n                onFocus(e);\n            }\n        }\n\n        function handleOnBlur(e: FocusEvent<HTMLTextAreaElement>) {\n            setTextAreaFocused(false);\n            if (onBlur) {\n                onBlur(e);\n            }\n        }\n\n        function handleOnChange(e: ChangeEvent<HTMLTextAreaElement>) {\n            if (!isControlled) {\n                setUncontrolledValue(e.target.value);\n            }\n\n            if (onChange) {\n                onChange(e);\n            }\n        }\n        function calculatePercentage(current: number, total: number): number {\n            if (current <= 0) {\n                return 0;\n            }\n            return total === 0 ? 0 : (current * 100) / total;\n        }\n\n        const overflowStyle = {\n            overflowX: autoExpand ? \"hidden\" : undefined, // Must set overflowX hidden for Firefox https://stackoverflow.com/a/22700700\n        } as React.CSSProperties;\n\n        return (\n            <div\n                className=\"jkl-text-area-wrapper\"\n                data-invalid={invalid}\n                data-has-content={counterCurrent > 0}\n            >\n                <textarea\n                    aria-invalid={invalid}\n                    className={`jkl-text-area__text-area jkl-text-area__text-area--${rows}-rows`}\n                    onBlur={handleOnBlur}\n                    onFocus={handleOnFocus}\n                    onChange={handleOnChange}\n                    ref={textAreaRef}\n                    style={{ ...style, ...overflowStyle }}\n                    placeholder={placeholder}\n                    {...textAreaValueProps}\n                    {...rest}\n                />\n                {counter && (\n                    <div className=\"jkl-text-area__counter\" aria-hidden=\"true\">\n                        <div className=\"jkl-text-area__counter-count\">\n                            {counterCurrent}&nbsp;/&nbsp;{counterTotal}\n                        </div>\n                        {!counter.hideProgress && (\n                            <div\n                                className=\"jkl-text-area__counter-progress\"\n                                style={{\n                                    [\"--progress-width\" as string]: `${calculatePercentage(\n                                        progressCurrent,\n                                        counterTotal,\n                                    )}%`,\n                                }}\n                            />\n                        )}\n                    </div>\n                )}\n            </div>\n        );\n    },\n);\nBaseTextArea.displayName = \"BaseTextArea\";\n"],"names":["BaseTextArea","forwardRef","props","ref","autoExpand","counter","defaultValue","onBlur","onFocus","rows","placeholder","startOpen","style","value","ariaInvalid","onChange","rest","strategy","isControlled","uncontrolledValue","setUncontrolledValue","useState","textAreaFocused","setTextAreaFocused","internalRef","useRef","textAreaRef","textAreaValue","textAreaValueProps","counterCurrent","getCounterValue","counterTotal","maxLength","progressCurrent","invalid","useEffect","textAreaElement","current","height","scrollHeight","overflowStyle","overflowX","jsxs","className","children","jsx","e","target","hideProgress","total","displayName"],"mappings":"mKAYaA,EAAeC,EAAAA,WACxB,CAACC,EAAOC,KACJ,MACIC,WAAAA,EACAC,QAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EAAO,EACPC,YAAAA,EAAc,IACdC,UAAAA,EACAC,MAAAA,EACAC,MAAAA,EACA,eAAgBC,EAChBC,SAAAA,KACGC,GACHd,EAEEe,EAAWZ,GAASY,UAAY,aAChCC,SAAsBL,EAAU,KAE/BM,EAAmBC,GACtBC,EAAAA,SAASf,IACNgB,EAAiBC,GAAsBF,EAAAA,UAAS,GACjDG,EAAcC,EAAAA,OAA4B,MAC1CC,EACDvB,GAA0CqB,EAGzCG,EAAgBT,EAAeL,EAAQM,EACvCS,EAAqBV,EAAe,CAAEL,MAAAA,GAAU,CAAEP,aAAAA,GAElDuB,EAAiBC,EAAAA,gBAAgBH,EAAeV,GAChDc,EAAuB1B,GAAS2B,WAAa,EAC7CC,EAA0BF,EAAeF,EAEzCK,KAAkBpB,OADIT,GAAWwB,EAAiBE,IAIxDI,EAAAA,UAAU,KACN,MAAMC,EAAkBV,EAAYW,QACpC,GAAID,EAAiB,CACjB,IAAKhC,EAED,YADAgC,EAAgBxB,MAAM0B,OAAS,IAI/BhB,GAAmBK,GACnBS,EAAgBxB,MAAM0B,OAAS,OAC/BF,EAAgBxB,MAAM0B,OAAS,GAAGF,EAAgBG,kBAElDH,EAAgBxB,MAAM0B,OAAS,EAEvC,GACD,CACClC,EACAsB,EACAC,EACAL,EACAO,IAiCJ,MAAMW,EAAgB,CAClBC,UAAWrC,EAAa,cAAW,GAGvC,OACIsC,EAAAA,KAAC,MAAA,CACGC,UAAU,wBACV,eAAcT,EACd,mBAAkBL,EAAiB,EAEnCe,SAAA,CAAAC,EAAAA,IAAC,WAAA,CACG,eAAcX,EACdS,UAAW,sDAAsDlC,SACjEF,OApCZ,SAAsBuC,GAClBvB,GAAmB,GACfhB,GACAA,EAAOuC,EAEf,EAgCYtC,QA5CZ,SAAuBsC,GACnBvB,GAAmB,GACff,GACAA,EAAQsC,EAEhB,EAwCY/B,SA/BZ,SAAwB+B,GACf5B,GACDE,EAAqB0B,EAAEC,OAAOlC,OAG9BE,GACAA,EAAS+B,EAEjB,EAwBY3C,IAAKuB,EACLd,MAAO,IAAKA,KAAU4B,GACtB9B,YAAAA,KACIkB,KACAZ,IAEPX,GACGqC,EAAAA,KAAC,MAAA,CAAIC,UAAU,yBAAyB,cAAY,OAChDC,SAAA,CAAAF,EAAAA,KAAC,MAAA,CAAIC,UAAU,+BACVC,SAAA,CAAAf,EAAe,MAAcE,MAEhC1B,EAAQ2C,cACNH,EAAAA,IAAC,MAAA,CACGF,UAAU,kCACV/B,MAAO,CACF,oBAtCAyB,EAuCGJ,EAvCcgB,EAwCdlB,EAvCxBM,GAAW,GAGE,IAAVY,EAFI,EAEyB,IAAVZ,EAAiBY,GAkCa,aAtC5D,IAA6BZ,EAAiBY,IAmDtDjD,EAAakD,YAAc"}
+{"version":3,"file":"BaseTextArea.cjs","sources":["../../../../src/components/text-area/BaseTextArea.tsx"],"sourcesContent":["import React, {\n    type ChangeEvent,\n    type FocusEvent,\n    forwardRef,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\nimport { getCounterValue } from \"./counter.js\";\nimport type { BaseTextAreaProps } from \"./types.js\";\n\nexport const BaseTextArea = forwardRef<HTMLTextAreaElement, BaseTextAreaProps>(\n    (props, ref) => {\n        const {\n            autoExpand,\n            counter,\n            defaultValue,\n            onBlur,\n            onFocus,\n            rows = 7,\n            placeholder = \" \", // This space intentionally left blank. Denne + rows trengs for å få den ekspanderende effekten.\n            startOpen,\n            style,\n            value,\n            \"aria-invalid\": ariaInvalid,\n            onChange,\n            ...rest\n        } = props;\n\n        const strategy = counter?.strategy ?? \"characters\";\n        const isControlled = typeof value !== \"undefined\";\n\n        const [uncontrolledValue, setUncontrolledValue] = useState(\n            defaultValue ?? \"\",\n        );\n        const [textAreaFocused, setTextAreaFocused] = useState(false);\n        const internalRef = useRef<HTMLTextAreaElement>(null);\n        const textAreaRef = useMemo(() => mergeRefs(internalRef, ref), [ref]);\n\n        // Hvis feltet styres utenfra bruker vi `value`, ellers holder vi styr på verdien selv.\n        const textAreaValue = isControlled ? value : uncontrolledValue;\n        const textAreaValueProps = isControlled ? { value } : { defaultValue };\n\n        const counterCurrent = getCounterValue(textAreaValue, strategy);\n        const counterTotal: number = counter?.maxLength || 0;\n        const progressCurrent: number = counterTotal - counterCurrent;\n        const isOverLimit = Boolean(counter && counterCurrent > counterTotal);\n        const invalid = Boolean(ariaInvalid || isOverLimit);\n\n        useEffect(() => {\n            if (!isControlled && internalRef.current) {\n                const value = internalRef.current.value;\n                setUncontrolledValue((currentValue) =>\n                    currentValue === value ? currentValue : value,\n                );\n            }\n        }, [isControlled]);\n\n        // biome-ignore lint/correctness/useExhaustiveDependencies: counterCurrent trengs for å lytte på tekstendringer i textarea for auto-expand funksjonalitet\n        useEffect(() => {\n            const textAreaElement = internalRef.current;\n            if (textAreaElement) {\n                if (!autoExpand) {\n                    textAreaElement.style.height = \"\";\n                    return;\n                }\n\n                if (textAreaFocused || textAreaValue) {\n                    textAreaElement.style.height = \"auto\"; // Sett til auto før scrollhøyden leses, sånn at redusering av høyde ved sletting av tekst fungerer\n                    textAreaElement.style.height = `${textAreaElement.scrollHeight}px`;\n                } else {\n                    textAreaElement.style.height = \"\";\n                }\n            }\n        }, [autoExpand, textAreaValue, textAreaFocused, counterCurrent]);\n\n        function handleOnFocus(e: FocusEvent<HTMLTextAreaElement>) {\n            setTextAreaFocused(true);\n            if (onFocus) {\n                onFocus(e);\n            }\n        }\n\n        function handleOnBlur(e: FocusEvent<HTMLTextAreaElement>) {\n            setTextAreaFocused(false);\n            if (onBlur) {\n                onBlur(e);\n            }\n        }\n\n        function handleOnChange(e: ChangeEvent<HTMLTextAreaElement>) {\n            if (!isControlled) {\n                setUncontrolledValue(e.target.value);\n            }\n\n            if (onChange) {\n                onChange(e);\n            }\n        }\n        function calculatePercentage(current: number, total: number): number {\n            if (current <= 0) {\n                return 0;\n            }\n            return total === 0 ? 0 : (current * 100) / total;\n        }\n\n        const overflowStyle = {\n            overflowX: autoExpand ? \"hidden\" : undefined, // Must set overflowX hidden for Firefox https://stackoverflow.com/a/22700700\n        } as React.CSSProperties;\n\n        return (\n            <div\n                className=\"jkl-text-area-wrapper\"\n                data-invalid={invalid}\n                data-has-content={counterCurrent > 0}\n            >\n                <textarea\n                    aria-invalid={invalid}\n                    className={`jkl-text-area__text-area jkl-text-area__text-area--${rows}-rows`}\n                    onBlur={handleOnBlur}\n                    onFocus={handleOnFocus}\n                    onChange={handleOnChange}\n                    ref={textAreaRef}\n                    style={{ ...style, ...overflowStyle }}\n                    placeholder={placeholder}\n                    {...textAreaValueProps}\n                    {...rest}\n                />\n                {counter && (\n                    <div className=\"jkl-text-area__counter\" aria-hidden=\"true\">\n                        <div className=\"jkl-text-area__counter-count\">\n                            {counterCurrent}&nbsp;/&nbsp;{counterTotal}\n                        </div>\n                        {!counter.hideProgress && (\n                            <div\n                                className=\"jkl-text-area__counter-progress\"\n                                style={{\n                                    [\"--progress-width\" as string]: `${calculatePercentage(\n                                        progressCurrent,\n                                        counterTotal,\n                                    )}%`,\n                                }}\n                            />\n                        )}\n                    </div>\n                )}\n            </div>\n        );\n    },\n);\nBaseTextArea.displayName = \"BaseTextArea\";\n"],"names":["BaseTextArea","forwardRef","props","ref","autoExpand","counter","defaultValue","onBlur","onFocus","rows","placeholder","startOpen","style","value","ariaInvalid","onChange","rest","strategy","isControlled","uncontrolledValue","setUncontrolledValue","useState","textAreaFocused","setTextAreaFocused","internalRef","useRef","textAreaRef","useMemo","mergeRefs","textAreaValue","textAreaValueProps","counterCurrent","getCounterValue","counterTotal","maxLength","progressCurrent","invalid","useEffect","current","currentValue","textAreaElement","height","scrollHeight","overflowStyle","overflowX","jsxs","className","children","jsx","e","target","hideProgress","total","displayName"],"mappings":"8MAaaA,EAAeC,EAAAA,WACxB,CAACC,EAAOC,KACJ,MACIC,WAAAA,EACAC,QAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EAAO,EACPC,YAAAA,EAAc,IACdC,UAAAA,EACAC,MAAAA,EACAC,MAAAA,EACA,eAAgBC,EAChBC,SAAAA,KACGC,GACHd,EAEEe,EAAWZ,GAASY,UAAY,aAChCC,SAAsBL,EAAU,KAE/BM,EAAmBC,GAAwBC,EAAAA,SAC9Cf,GAAgB,KAEbgB,EAAiBC,GAAsBF,EAAAA,UAAS,GACjDG,EAAcC,EAAAA,OAA4B,MAC1CC,EAAcC,EAAAA,QAAQ,IAAMC,EAAAA,UAAUJ,EAAarB,GAAM,CAACA,IAG1D0B,EAAgBX,EAAeL,EAAQM,EACvCW,EAAqBZ,EAAe,CAAEL,MAAAA,GAAU,CAAEP,aAAAA,GAElDyB,EAAiBC,EAAAA,gBAAgBH,EAAeZ,GAChDgB,EAAuB5B,GAAS6B,WAAa,EAC7CC,EAA0BF,EAAeF,EAEzCK,KAAkBtB,OADIT,GAAW0B,EAAiBE,IAGxDI,EAAAA,UAAU,KACN,IAAKnB,GAAgBM,EAAYc,QAAS,CACtC,MAAMzB,EAAQW,EAAYc,QAAQzB,MAClCO,EAAsBmB,GAClBA,IAAiB1B,EAAQ0B,EAAe1B,EAEhD,GACD,CAACK,IAGJmB,EAAAA,UAAU,KACN,MAAMG,EAAkBhB,EAAYc,QACpC,GAAIE,EAAiB,CACjB,IAAKpC,EAED,YADAoC,EAAgB5B,MAAM6B,OAAS,IAI/BnB,GAAmBO,GACnBW,EAAgB5B,MAAM6B,OAAS,OAC/BD,EAAgB5B,MAAM6B,OAAS,GAAGD,EAAgBE,kBAElDF,EAAgB5B,MAAM6B,OAAS,EAEvC,GACD,CAACrC,EAAYyB,EAAeP,EAAiBS,IAgChD,MAAMY,EAAgB,CAClBC,UAAWxC,EAAa,cAAW,GAGvC,OACIyC,EAAAA,KAAC,MAAA,CACGC,UAAU,wBACV,eAAcV,EACd,mBAAkBL,EAAiB,EAEnCgB,SAAA,CAAAC,EAAAA,IAAC,WAAA,CACG,eAAcZ,EACdU,UAAW,sDAAsDrC,SACjEF,OApCZ,SAAsB0C,GAClB1B,GAAmB,GACfhB,GACAA,EAAO0C,EAEf,EAgCYzC,QA5CZ,SAAuByC,GACnB1B,GAAmB,GACff,GACAA,EAAQyC,EAEhB,EAwCYlC,SA/BZ,SAAwBkC,GACf/B,GACDE,EAAqB6B,EAAEC,OAAOrC,OAG9BE,GACAA,EAASkC,EAEjB,EAwBY9C,IAAKuB,EACLd,MAAO,IAAKA,KAAU+B,GACtBjC,YAAAA,KACIoB,KACAd,IAEPX,GACGwC,EAAAA,KAAC,MAAA,CAAIC,UAAU,yBAAyB,cAAY,OAChDC,SAAA,CAAAF,EAAAA,KAAC,MAAA,CAAIC,UAAU,+BACVC,SAAA,CAAAhB,EAAe,MAAcE,MAEhC5B,EAAQ8C,cACNH,EAAAA,IAAC,MAAA,CACGF,UAAU,kCACVlC,MAAO,CACF,oBAtCA0B,EAuCGH,EAvCciB,EAwCdnB,EAvCxBK,GAAW,GAGE,IAAVc,EAFI,EAEyB,IAAVd,EAAiBc,GAkCa,aAtC5D,IAA6Bd,EAAiBc,IAmDtDpD,EAAaqD,YAAc"}

package/build/cjs/tailwind/tailwindPreset.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../tokens.cjs"),r=require("./plugins/jokulTypographyPlugin.cjs"),o={theme:{colors:e.color,spacing:e.spacing,fontWeight:e.font.weight,fontSize:e.font.size,lineHeight:e.lineHeight,borderRadius:e.border.radius,borderWidth:e.border.width,screens:{sm:e.breakpoint.medium,md:e.breakpoint.large,lg:e.breakpoint.xl}},plugins:[r.jokulTypographyPlugin]};exports.jokulPreset=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../tokens.cjs"),o=require("./plugins/jokulTypographyPlugin.cjs"),r="@";const t={theme:{colors:function(){const{[r]:o,...t}=e.color;return{...o,...t}}(),spacing:e.spacing,fontWeight:e.font.weight,fontSize:e.font.size,lineHeight:e.lineHeight,borderRadius:e.border.radius,borderWidth:e.border.width,screens:{sm:e.breakpoint.medium,md:e.breakpoint.large,lg:e.breakpoint.xl}},plugins:[o.jokulTypographyPlugin]};exports.jokulPreset=t;
 //# sourceMappingURL=tailwindPreset.cjs.map

package/build/cjs/tailwind/tailwindPreset.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tailwindPreset.cjs","sources":["../../../src/tailwind/tailwindPreset.ts"],"sourcesContent":["import type { Config } from \"tailwindcss\";\nimport tokens from \"../tokens.js\";\nimport { jokulTypographyPlugin } from \"./plugins/jokulTypographyPlugin.js\";\n\nexport const jokulPreset: Partial<Config> = {\n    theme: {\n        colors: tokens.color,\n        spacing: tokens.spacing,\n        fontWeight: tokens.font.weight,\n        fontSize: tokens.font.size,\n        lineHeight: tokens.lineHeight,\n        borderRadius: tokens.border.radius,\n        borderWidth: tokens.border.width,\n        screens: {\n            sm: tokens.breakpoint.medium,\n            md: tokens.breakpoint.large,\n            lg: tokens.breakpoint.xl,\n        },\n    },\n    plugins: [jokulTypographyPlugin],\n};\n"],"names":["jokulPreset","theme","colors","tokens","color","spacing","fontWeight","font","weight","fontSize","size","lineHeight","borderRadius","border","radius","borderWidth","width","screens","sm","breakpoint","medium","md","large","lg","xl","plugins","jokulTypographyPlugin"],"mappings":"kKAIaA,EAA+B,CACxCC,MAAO,CACHC,OAAQC,EAAOC,MACfC,QAASF,EAAOE,QAChBC,WAAYH,EAAOI,KAAKC,OACxBC,SAAUN,EAAOI,KAAKG,KACtBC,WAAYR,EAAOQ,WACnBC,aAAcT,EAAOU,OAAOC,OAC5BC,YAAaZ,EAAOU,OAAOG,MAC3BC,QAAS,CACLC,GAAIf,EAAOgB,WAAWC,OACtBC,GAAIlB,EAAOgB,WAAWG,MACtBC,GAAIpB,EAAOgB,WAAWK,KAG9BC,QAAS,CAACC,EAAAA"}
+{"version":3,"file":"tailwindPreset.cjs","sources":["../../../src/tailwind/tailwindPreset.ts"],"sourcesContent":["import type { Config } from \"tailwindcss\";\nimport tokens from \"../tokens.js\";\nimport { jokulTypographyPlugin } from \"./plugins/jokulTypographyPlugin.js\";\n\nconst DEFAULT_COLOR_VARIANT_KEY = \"@\";\n\nfunction createTailwindColors() {\n    const { [DEFAULT_COLOR_VARIANT_KEY]: defaultColors, ...semanticColors } =\n        tokens.color;\n\n    return {\n        ...defaultColors,\n        ...semanticColors,\n    };\n}\n\nexport const jokulPreset: Partial<Config> = {\n    theme: {\n        colors: createTailwindColors(),\n        spacing: tokens.spacing,\n        fontWeight: tokens.font.weight,\n        fontSize: tokens.font.size,\n        lineHeight: tokens.lineHeight,\n        borderRadius: tokens.border.radius,\n        borderWidth: tokens.border.width,\n        screens: {\n            sm: tokens.breakpoint.medium,\n            md: tokens.breakpoint.large,\n            lg: tokens.breakpoint.xl,\n        },\n    },\n    plugins: [jokulTypographyPlugin],\n};\n"],"names":["DEFAULT_COLOR_VARIANT_KEY","jokulPreset","theme","colors","i","defaultColors","semanticColors","tokens","color","createTailwindColors","spacing","fontWeight","font","weight","fontSize","size","lineHeight","borderRadius","border","radius","borderWidth","width","screens","sm","breakpoint","medium","md","large","lg","xl","plugins","jokulTypographyPlugin"],"mappings":"kKAIMA,EAA4B,IAY3B,MAAMC,EAA+B,CACxCC,MAAO,CACHC,OAZR,WACI,MAAQC,CAACJ,GAA4BK,KAAkBC,GACnDC,EAAOC,MAEX,MAAO,IACAH,KACAC,EAEX,CAIgBG,GACRC,QAASH,EAAOG,QAChBC,WAAYJ,EAAOK,KAAKC,OACxBC,SAAUP,EAAOK,KAAKG,KACtBC,WAAYT,EAAOS,WACnBC,aAAcV,EAAOW,OAAOC,OAC5BC,YAAab,EAAOW,OAAOG,MAC3BC,QAAS,CACLC,GAAIhB,EAAOiB,WAAWC,OACtBC,GAAInB,EAAOiB,WAAWG,MACtBC,GAAIrB,EAAOiB,WAAWK,KAG9BC,QAAS,CAACC,EAAAA"}

package/build/cjs/utilities/formatters/util/registerWithMask.cjs

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

package/build/cjs/utilities/formatters/util/registerWithMask.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"registerWithMask.cjs","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\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\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            form.setValue(\n                name,\n                formatters[formatter](event.target.value, {\n                    partial: true,\n                }) as PathValue<T, Path<T>>,\n            );\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\n                // calculate new caret position (- because we move backwards)\n                newPosition = onKeyDownCaretPosition - delta;\n            } else if (onChangeCaretPosition < event.target.value.length) {\n                // handle adding content from inside the string\n                // calculate how much to move the caret forwards\n                const delta = event.target.value.length - inputLength;\n\n                // calculate new caret position (+ because we move forwards)\n                newPosition = onChangeCaretPosition + delta;\n            }\n\n            if (newPosition !== null) {\n                event.target.setSelectionRange(\n                    newPosition,\n                    newPosition,\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            if ((event.target as HTMLInputElement).selectionStart !== null) {\n                onKeyDownCaretPosition = (event.target as HTMLInputElement)\n                    .selectionStart as number;\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","registerOptions","setValueAs","value","replace","onChange","event","onChangeCaretPosition","inputLength","target","length","selectionStart","setValue","partial","newPosition","includes","setSelectionRange","Object","assign","register","extra","onKeyDown","key","align","registerWithFodselsnummerMask","registerWithKortnummerMask","registerWithKontonummerMask","registerWithTelefonnummerMask","registerWithOrganisasjonsnummerMask","registerWithDateMask","registerWithNumber"],"mappings":"0aAiBMA,EAAa,CACfC,KAAMC,EAAAA,iBACNC,cAAeC,EAAAA,oBACfC,WAAYC,EAAAA,iBACZC,YAAaC,EAAAA,kBACbC,cAAeC,EAAAA,oBACfC,OAAQC,EAAAA,aACRC,oBAAqBC,EAAAA,2BASnBC,EACDC,GACD,CACIC,EACAC,EACAC,KAEA,IAAIC,EAAyB,EACzBC,EAAsB,GAiD1B,MAAMC,EAA+C,CACjDC,WAhDgBC,GAAkBA,EAAMC,QAAQ,MAAO,IAiDvDC,SAhDcC,IACdR,GAASO,WAAWC,GAGpB,IAAIC,EAAwB,EAC5B,MAAMC,EAAcF,EAAMG,OAAON,MAAMO,OAGH,OAAhCJ,EAAMG,OAAOE,iBACbJ,EAAwBD,EAAMG,OAAOE,gBAGzCf,EAAKgB,SACDf,EACAlB,EAAWgB,GAAWW,EAAMG,OAAON,MAAO,CACtCU,SAAS,KAIjB,IAAIC,EAA6B,KAEjC,GAAI,CAAC,SAAU,aAAaC,SAASf,GAAsB,CAMvDc,EAAcf,GAHAA,EAAyBQ,EAI3C,MAAA,GAAWA,EAAwBD,EAAMG,OAAON,MAAMO,OAAQ,CAM1DI,EAAcP,GAHAD,EAAMG,OAAON,MAAMO,OAASF,EAI9C,CAEoB,OAAhBM,GACAR,EAAMG,OAAOO,kBACTF,EACAA,OACA,KASRhB,GACAmB,OAAOC,OAAOjB,EAAiBH,GAEnC,MAAMqB,EAAWvB,EAAKuB,SAAStB,EAAMI,GAY/BmB,EAAiC,CACnCC,UAVuDf,IACG,OAArDA,EAAMG,OAA4BE,iBACnCZ,EAA0BO,EAAMG,OAC3BE,gBAETX,EAAsBM,EAAMgB,MAQhC,MAAkB,WAAd3B,IACAyB,EAAMG,MAAQ,SAGXN,OAAOC,OAAOC,EAAUC,IAI1BI,EAAgC9B,EAAiB,iBAEjD+B,EAA6B/B,EAAiB,cAE9CgC,EAA8BhC,EAAiB,eAE/CiC,EAAgCjC,EAAiB,8JAM1DE,IAAAA,CAEA4B,8BAA+B,CAC3B3B,EACAC,IAEAJ,EAAiB,gBAAjBA,CAAqCE,EAAMC,EAAMC,GACrD2B,2BAA4B,CACxB5B,EACAC,IAEAJ,EAAiB,aAAjBA,CAAkCE,EAAMC,EAAMC,GAClD4B,4BAA6B,CACzB7B,EACAC,IAEAJ,EAAiB,cAAjBA,CAAmCE,EAAMC,EAAMC,GACnD6B,8BAA+B,CAC3B9B,EACAC,IAEAJ,EAAiB,gBAAjBA,CAAqCE,EAAMC,EAAMC,GACrD8B,oCAAqC,CACjC/B,EACAC,IAEAJ,EAAiB,sBAAjBA,CAA2CE,EAAMC,EAAMC,GAC3D+B,qBAAsB,CAClBhC,EACAC,IAEAJ,EAAiB,OAAjBA,CAA4BE,EAAMC,EAAMC,GAC5CgC,mBAAoB,CAChBjC,EACAC,IAEAJ,EAAiB,SAAjBA,CACIE,EACAC,EACAC"}
+{"version":3,"file":"registerWithMask.cjs","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","registerWithOrganisasjonsnummerMask","registerWithDateMask","registerWithNumber"],"mappings":"0aAiBMA,EAAa,CACfC,KAAMC,EAAAA,iBACNC,cAAeC,EAAAA,oBACfC,WAAYC,EAAAA,iBACZC,YAAaC,EAAAA,kBACbC,cAAeC,EAAAA,oBACfC,OAAQC,EAAAA,aACRC,oBAAqBC,EAAAA,2BAYnBC,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,MAAA,GACIb,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,8JAM1DE,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,GACrD6C,oCAAqC,CACjC9C,EACAC,IAEAJ,EAAiB,sBAAjBA,CAA2CE,EAAMC,EAAMC,GAC3D8C,qBAAsB,CAClB/C,EACAC,IAEAJ,EAAiB,OAAjBA,CAA4BE,EAAMC,EAAMC,GAC5C+C,mBAAoB,CAChBhD,EACAC,IAEAJ,EAAiB,SAAjBA,CACIE,EACAC,EACAC"}

package/build/es/components/text-area/BaseTextArea.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as a}from"react/jsx-runtime";import{forwardRef as t,useState as r,useRef as s,useEffect as o}from"react";import{getCounterValue as l}from"./counter.js";const n=t((t,n)=>{const{autoExpand:i,counter:u,defaultValue:c,onBlur:d,onFocus:h,rows:f=7,placeholder:x=" ",startOpen:p,style:g,value:m,"aria-invalid":v,onChange:j,...y}=t,_=u?.strategy??"characters",k=typeof m<"u",[w,N]=r(c),[B,C]=r(!1),V=s(null),A=n||V,E=k?m:w,F=k?{value:m}:{defaultValue:c},R=l(E,_),T=u?.maxLength||0,$=T-R,H=!(!v&&!!!(u&&R>T));o(()=>{const e=A.current;if(e){if(!i)return void(e.style.height="");B||E?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height=""}},[i,A,E,B,R]);return e("div",{className:"jkl-text-area-wrapper","data-invalid":H,"data-has-content":R>0,children:[a("textarea",{"aria-invalid":H,className:`jkl-text-area__text-area jkl-text-area__text-area--${f}-rows`,onBlur:function(e){C(!1),d&&d(e)},onFocus:function(e){C(!0),h&&h(e)},onChange:function(e){k||N(e.target.value),j&&j(e)},ref:A,style:{...g,...{overflowX:i?"hidden":void 0}},placeholder:x,...F,...y}),u&&e("div",{className:"jkl-text-area__counter","aria-hidden":"true",children:[e("div",{className:"jkl-text-area__counter-count",children:[R," / ",T]}),!u.hideProgress&&a("div",{className:"jkl-text-area__counter-progress",style:{"--progress-width":(L=$,O=T,L<=0||0===O?0:100*L/O)+"%"}})]})]});var L,O});n.displayName="BaseTextArea";export{n as BaseTextArea};
+import{jsxs as e,jsx as a}from"react/jsx-runtime";import{forwardRef as t,useState as r,useRef as s,useMemo as o,useEffect as l}from"react";import{mergeRefs as n}from"../../utilities/mergeRefs.js";import{getCounterValue as i}from"./counter.js";const u=t((t,u)=>{const{autoExpand:c,counter:d,defaultValue:h,onBlur:f,onFocus:m,rows:x=7,placeholder:g=" ",startOpen:p,style:v,value:j,"aria-invalid":y,onChange:_,...k}=t,w=d?.strategy??"characters",N=typeof j<"u",[B,R]=r(h??""),[C,V]=r(!1),A=s(null),E=o(()=>n(A,u),[u]),F=N?j:B,T=N?{value:j}:{defaultValue:h},$=i(F,w),H=d?.maxLength||0,L=H-$,M=!(!y&&!!!(d&&$>H));l(()=>{if(!N&&A.current){const e=A.current.value;R(a=>a===e?a:e)}},[N]),l(()=>{const e=A.current;if(e){if(!c)return void(e.style.height="");C||F?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height=""}},[c,F,C,$]);return e("div",{className:"jkl-text-area-wrapper","data-invalid":M,"data-has-content":$>0,children:[a("textarea",{"aria-invalid":M,className:`jkl-text-area__text-area jkl-text-area__text-area--${x}-rows`,onBlur:function(e){V(!1),f&&f(e)},onFocus:function(e){V(!0),m&&m(e)},onChange:function(e){N||R(e.target.value),_&&_(e)},ref:E,style:{...v,...{overflowX:c?"hidden":void 0}},placeholder:g,...T,...k}),d&&e("div",{className:"jkl-text-area__counter","aria-hidden":"true",children:[e("div",{className:"jkl-text-area__counter-count",children:[$," / ",H]}),!d.hideProgress&&a("div",{className:"jkl-text-area__counter-progress",style:{"--progress-width":(O=L,P=H,O<=0||0===P?0:100*O/P)+"%"}})]})]});var O,P});u.displayName="BaseTextArea";export{u as BaseTextArea};
 //# sourceMappingURL=BaseTextArea.js.map

package/build/es/components/text-area/BaseTextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTextArea.js","sources":["../../../../src/components/text-area/BaseTextArea.tsx"],"sourcesContent":["import React, {\n    type ChangeEvent,\n    type FocusEvent,\n    forwardRef,\n    type RefObject,\n    useEffect,\n    useRef,\n    useState,\n} from \"react\";\nimport { getCounterValue } from \"./counter.js\";\nimport type { BaseTextAreaProps } from \"./types.js\";\n\nexport const BaseTextArea = forwardRef<HTMLTextAreaElement, BaseTextAreaProps>(\n    (props, ref) => {\n        const {\n            autoExpand,\n            counter,\n            defaultValue,\n            onBlur,\n            onFocus,\n            rows = 7,\n            placeholder = \" \", // This space intentionally left blank. Denne + rows trengs for å få den ekspanderende effekten.\n            startOpen,\n            style,\n            value,\n            \"aria-invalid\": ariaInvalid,\n            onChange,\n            ...rest\n        } = props;\n\n        const strategy = counter?.strategy ?? \"characters\";\n        const isControlled = typeof value !== \"undefined\";\n\n        const [uncontrolledValue, setUncontrolledValue] =\n            useState(defaultValue);\n        const [textAreaFocused, setTextAreaFocused] = useState(false);\n        const internalRef = useRef<HTMLTextAreaElement>(null);\n        const textAreaRef =\n            (ref as RefObject<HTMLTextAreaElement>) || internalRef;\n\n        // Hvis feltet styres utenfra bruker vi `value`, ellers holder vi styr på verdien selv.\n        const textAreaValue = isControlled ? value : uncontrolledValue;\n        const textAreaValueProps = isControlled ? { value } : { defaultValue };\n\n        const counterCurrent = getCounterValue(textAreaValue, strategy);\n        const counterTotal: number = counter?.maxLength || 0;\n        const progressCurrent: number = counterTotal - counterCurrent;\n        const isOverLimit = Boolean(counter && counterCurrent > counterTotal);\n        const invalid = Boolean(ariaInvalid || isOverLimit);\n\n        // biome-ignore lint/correctness/useExhaustiveDependencies: counterCurrent trengs for å lytte på tekstendringer i textarea for auto-expand funksjonalitet\n        useEffect(() => {\n            const textAreaElement = textAreaRef.current;\n            if (textAreaElement) {\n                if (!autoExpand) {\n                    textAreaElement.style.height = \"\";\n                    return;\n                }\n\n                if (textAreaFocused || textAreaValue) {\n                    textAreaElement.style.height = \"auto\"; // Sett til auto før scrollhøyden leses, sånn at redusering av høyde ved sletting av tekst fungerer\n                    textAreaElement.style.height = `${textAreaElement.scrollHeight}px`;\n                } else {\n                    textAreaElement.style.height = \"\";\n                }\n            }\n        }, [\n            autoExpand,\n            textAreaRef,\n            textAreaValue,\n            textAreaFocused,\n            counterCurrent,\n        ]);\n\n        function handleOnFocus(e: FocusEvent<HTMLTextAreaElement>) {\n            setTextAreaFocused(true);\n            if (onFocus) {\n                onFocus(e);\n            }\n        }\n\n        function handleOnBlur(e: FocusEvent<HTMLTextAreaElement>) {\n            setTextAreaFocused(false);\n            if (onBlur) {\n                onBlur(e);\n            }\n        }\n\n        function handleOnChange(e: ChangeEvent<HTMLTextAreaElement>) {\n            if (!isControlled) {\n                setUncontrolledValue(e.target.value);\n            }\n\n            if (onChange) {\n                onChange(e);\n            }\n        }\n        function calculatePercentage(current: number, total: number): number {\n            if (current <= 0) {\n                return 0;\n            }\n            return total === 0 ? 0 : (current * 100) / total;\n        }\n\n        const overflowStyle = {\n            overflowX: autoExpand ? \"hidden\" : undefined, // Must set overflowX hidden for Firefox https://stackoverflow.com/a/22700700\n        } as React.CSSProperties;\n\n        return (\n            <div\n                className=\"jkl-text-area-wrapper\"\n                data-invalid={invalid}\n                data-has-content={counterCurrent > 0}\n            >\n                <textarea\n                    aria-invalid={invalid}\n                    className={`jkl-text-area__text-area jkl-text-area__text-area--${rows}-rows`}\n                    onBlur={handleOnBlur}\n                    onFocus={handleOnFocus}\n                    onChange={handleOnChange}\n                    ref={textAreaRef}\n                    style={{ ...style, ...overflowStyle }}\n                    placeholder={placeholder}\n                    {...textAreaValueProps}\n                    {...rest}\n                />\n                {counter && (\n                    <div className=\"jkl-text-area__counter\" aria-hidden=\"true\">\n                        <div className=\"jkl-text-area__counter-count\">\n                            {counterCurrent}&nbsp;/&nbsp;{counterTotal}\n                        </div>\n                        {!counter.hideProgress && (\n                            <div\n                                className=\"jkl-text-area__counter-progress\"\n                                style={{\n                                    [\"--progress-width\" as string]: `${calculatePercentage(\n                                        progressCurrent,\n                                        counterTotal,\n                                    )}%`,\n                                }}\n                            />\n                        )}\n                    </div>\n                )}\n            </div>\n        );\n    },\n);\nBaseTextArea.displayName = \"BaseTextArea\";\n"],"names":["BaseTextArea","forwardRef","props","ref","autoExpand","counter","defaultValue","onBlur","onFocus","rows","placeholder","startOpen","style","value","ariaInvalid","onChange","rest","strategy","isControlled","uncontrolledValue","setUncontrolledValue","useState","textAreaFocused","setTextAreaFocused","internalRef","useRef","textAreaRef","textAreaValue","textAreaValueProps","counterCurrent","getCounterValue","counterTotal","maxLength","progressCurrent","invalid","useEffect","textAreaElement","current","height","scrollHeight","jsxs","className","children","jsx","e","target","overflowX","hideProgress","total","displayName"],"mappings":"6KAYO,MAAMA,EAAeC,EACxB,CAACC,EAAOC,KACJ,MACIC,WAAAA,EACAC,QAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EAAO,EACPC,YAAAA,EAAc,IACdC,UAAAA,EACAC,MAAAA,EACAC,MAAAA,EACA,eAAgBC,EAChBC,SAAAA,KACGC,GACHd,EAEEe,EAAWZ,GAASY,UAAY,aAChCC,SAAsBL,EAAU,KAE/BM,EAAmBC,GACtBC,EAASf,IACNgB,EAAiBC,GAAsBF,GAAS,GACjDG,EAAcC,EAA4B,MAC1CC,EACDvB,GAA0CqB,EAGzCG,EAAgBT,EAAeL,EAAQM,EACvCS,EAAqBV,EAAe,CAAEL,MAAAA,GAAU,CAAEP,aAAAA,GAElDuB,EAAiBC,EAAgBH,EAAeV,GAChDc,EAAuB1B,GAAS2B,WAAa,EAC7CC,EAA0BF,EAAeF,EAEzCK,KAAkBpB,OADIT,GAAWwB,EAAiBE,IAIxDI,EAAU,KACN,MAAMC,EAAkBV,EAAYW,QACpC,GAAID,EAAiB,CACjB,IAAKhC,EAED,YADAgC,EAAgBxB,MAAM0B,OAAS,IAI/BhB,GAAmBK,GACnBS,EAAgBxB,MAAM0B,OAAS,OAC/BF,EAAgBxB,MAAM0B,OAAS,GAAGF,EAAgBG,kBAElDH,EAAgBxB,MAAM0B,OAAS,EAEvC,GACD,CACClC,EACAsB,EACAC,EACAL,EACAO,IAqCJ,OACIW,EAAC,MAAA,CACGC,UAAU,wBACV,eAAcP,EACd,mBAAkBL,EAAiB,EAEnCa,SAAA,CAAAC,EAAC,WAAA,CACG,eAAcT,EACdO,UAAW,sDAAsDhC,SACjEF,OApCZ,SAAsBqC,GAClBrB,GAAmB,GACfhB,GACAA,EAAOqC,EAEf,EAgCYpC,QA5CZ,SAAuBoC,GACnBrB,GAAmB,GACff,GACAA,EAAQoC,EAEhB,EAwCY7B,SA/BZ,SAAwB6B,GACf1B,GACDE,EAAqBwB,EAAEC,OAAOhC,OAG9BE,GACAA,EAAS6B,EAEjB,EAwBYzC,IAAKuB,EACLd,MAAO,IAAKA,KAjBF,CAClBkC,UAAW1C,EAAa,cAAW,IAiB3BM,YAAAA,KACIkB,KACAZ,IAEPX,GACGmC,EAAC,MAAA,CAAIC,UAAU,yBAAyB,cAAY,OAChDC,SAAA,CAAAF,EAAC,MAAA,CAAIC,UAAU,+BACVC,SAAA,CAAAb,EAAe,MAAcE,MAEhC1B,EAAQ0C,cACNJ,EAAC,MAAA,CACGF,UAAU,kCACV7B,MAAO,CACF,oBAtCAyB,EAuCGJ,EAvCce,EAwCdjB,EAvCxBM,GAAW,GAGE,IAAVW,EAFI,EAEyB,IAAVX,EAAiBW,GAkCa,aAtC5D,IAA6BX,EAAiBW,IAmDtDhD,EAAaiD,YAAc"}
+{"version":3,"file":"BaseTextArea.js","sources":["../../../../src/components/text-area/BaseTextArea.tsx"],"sourcesContent":["import React, {\n    type ChangeEvent,\n    type FocusEvent,\n    forwardRef,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\nimport { getCounterValue } from \"./counter.js\";\nimport type { BaseTextAreaProps } from \"./types.js\";\n\nexport const BaseTextArea = forwardRef<HTMLTextAreaElement, BaseTextAreaProps>(\n    (props, ref) => {\n        const {\n            autoExpand,\n            counter,\n            defaultValue,\n            onBlur,\n            onFocus,\n            rows = 7,\n            placeholder = \" \", // This space intentionally left blank. Denne + rows trengs for å få den ekspanderende effekten.\n            startOpen,\n            style,\n            value,\n            \"aria-invalid\": ariaInvalid,\n            onChange,\n            ...rest\n        } = props;\n\n        const strategy = counter?.strategy ?? \"characters\";\n        const isControlled = typeof value !== \"undefined\";\n\n        const [uncontrolledValue, setUncontrolledValue] = useState(\n            defaultValue ?? \"\",\n        );\n        const [textAreaFocused, setTextAreaFocused] = useState(false);\n        const internalRef = useRef<HTMLTextAreaElement>(null);\n        const textAreaRef = useMemo(() => mergeRefs(internalRef, ref), [ref]);\n\n        // Hvis feltet styres utenfra bruker vi `value`, ellers holder vi styr på verdien selv.\n        const textAreaValue = isControlled ? value : uncontrolledValue;\n        const textAreaValueProps = isControlled ? { value } : { defaultValue };\n\n        const counterCurrent = getCounterValue(textAreaValue, strategy);\n        const counterTotal: number = counter?.maxLength || 0;\n        const progressCurrent: number = counterTotal - counterCurrent;\n        const isOverLimit = Boolean(counter && counterCurrent > counterTotal);\n        const invalid = Boolean(ariaInvalid || isOverLimit);\n\n        useEffect(() => {\n            if (!isControlled && internalRef.current) {\n                const value = internalRef.current.value;\n                setUncontrolledValue((currentValue) =>\n                    currentValue === value ? currentValue : value,\n                );\n            }\n        }, [isControlled]);\n\n        // biome-ignore lint/correctness/useExhaustiveDependencies: counterCurrent trengs for å lytte på tekstendringer i textarea for auto-expand funksjonalitet\n        useEffect(() => {\n            const textAreaElement = internalRef.current;\n            if (textAreaElement) {\n                if (!autoExpand) {\n                    textAreaElement.style.height = \"\";\n                    return;\n                }\n\n                if (textAreaFocused || textAreaValue) {\n                    textAreaElement.style.height = \"auto\"; // Sett til auto før scrollhøyden leses, sånn at redusering av høyde ved sletting av tekst fungerer\n                    textAreaElement.style.height = `${textAreaElement.scrollHeight}px`;\n                } else {\n                    textAreaElement.style.height = \"\";\n                }\n            }\n        }, [autoExpand, textAreaValue, textAreaFocused, counterCurrent]);\n\n        function handleOnFocus(e: FocusEvent<HTMLTextAreaElement>) {\n            setTextAreaFocused(true);\n            if (onFocus) {\n                onFocus(e);\n            }\n        }\n\n        function handleOnBlur(e: FocusEvent<HTMLTextAreaElement>) {\n            setTextAreaFocused(false);\n            if (onBlur) {\n                onBlur(e);\n            }\n        }\n\n        function handleOnChange(e: ChangeEvent<HTMLTextAreaElement>) {\n            if (!isControlled) {\n                setUncontrolledValue(e.target.value);\n            }\n\n            if (onChange) {\n                onChange(e);\n            }\n        }\n        function calculatePercentage(current: number, total: number): number {\n            if (current <= 0) {\n                return 0;\n            }\n            return total === 0 ? 0 : (current * 100) / total;\n        }\n\n        const overflowStyle = {\n            overflowX: autoExpand ? \"hidden\" : undefined, // Must set overflowX hidden for Firefox https://stackoverflow.com/a/22700700\n        } as React.CSSProperties;\n\n        return (\n            <div\n                className=\"jkl-text-area-wrapper\"\n                data-invalid={invalid}\n                data-has-content={counterCurrent > 0}\n            >\n                <textarea\n                    aria-invalid={invalid}\n                    className={`jkl-text-area__text-area jkl-text-area__text-area--${rows}-rows`}\n                    onBlur={handleOnBlur}\n                    onFocus={handleOnFocus}\n                    onChange={handleOnChange}\n                    ref={textAreaRef}\n                    style={{ ...style, ...overflowStyle }}\n                    placeholder={placeholder}\n                    {...textAreaValueProps}\n                    {...rest}\n                />\n                {counter && (\n                    <div className=\"jkl-text-area__counter\" aria-hidden=\"true\">\n                        <div className=\"jkl-text-area__counter-count\">\n                            {counterCurrent}&nbsp;/&nbsp;{counterTotal}\n                        </div>\n                        {!counter.hideProgress && (\n                            <div\n                                className=\"jkl-text-area__counter-progress\"\n                                style={{\n                                    [\"--progress-width\" as string]: `${calculatePercentage(\n                                        progressCurrent,\n                                        counterTotal,\n                                    )}%`,\n                                }}\n                            />\n                        )}\n                    </div>\n                )}\n            </div>\n        );\n    },\n);\nBaseTextArea.displayName = \"BaseTextArea\";\n"],"names":["BaseTextArea","forwardRef","props","ref","autoExpand","counter","defaultValue","onBlur","onFocus","rows","placeholder","startOpen","style","value","ariaInvalid","onChange","rest","strategy","isControlled","uncontrolledValue","setUncontrolledValue","useState","textAreaFocused","setTextAreaFocused","internalRef","useRef","textAreaRef","useMemo","mergeRefs","textAreaValue","textAreaValueProps","counterCurrent","getCounterValue","counterTotal","maxLength","progressCurrent","invalid","useEffect","current","currentValue","textAreaElement","height","scrollHeight","jsxs","className","children","jsx","e","target","overflowX","hideProgress","total","displayName"],"mappings":"mPAaO,MAAMA,EAAeC,EACxB,CAACC,EAAOC,KACJ,MACIC,WAAAA,EACAC,QAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EAAO,EACPC,YAAAA,EAAc,IACdC,UAAAA,EACAC,MAAAA,EACAC,MAAAA,EACA,eAAgBC,EAChBC,SAAAA,KACGC,GACHd,EAEEe,EAAWZ,GAASY,UAAY,aAChCC,SAAsBL,EAAU,KAE/BM,EAAmBC,GAAwBC,EAC9Cf,GAAgB,KAEbgB,EAAiBC,GAAsBF,GAAS,GACjDG,EAAcC,EAA4B,MAC1CC,EAAcC,EAAQ,IAAMC,EAAUJ,EAAarB,GAAM,CAACA,IAG1D0B,EAAgBX,EAAeL,EAAQM,EACvCW,EAAqBZ,EAAe,CAAEL,MAAAA,GAAU,CAAEP,aAAAA,GAElDyB,EAAiBC,EAAgBH,EAAeZ,GAChDgB,EAAuB5B,GAAS6B,WAAa,EAC7CC,EAA0BF,EAAeF,EAEzCK,KAAkBtB,OADIT,GAAW0B,EAAiBE,IAGxDI,EAAU,KACN,IAAKnB,GAAgBM,EAAYc,QAAS,CACtC,MAAMzB,EAAQW,EAAYc,QAAQzB,MAClCO,EAAsBmB,GAClBA,IAAiB1B,EAAQ0B,EAAe1B,EAEhD,GACD,CAACK,IAGJmB,EAAU,KACN,MAAMG,EAAkBhB,EAAYc,QACpC,GAAIE,EAAiB,CACjB,IAAKpC,EAED,YADAoC,EAAgB5B,MAAM6B,OAAS,IAI/BnB,GAAmBO,GACnBW,EAAgB5B,MAAM6B,OAAS,OAC/BD,EAAgB5B,MAAM6B,OAAS,GAAGD,EAAgBE,kBAElDF,EAAgB5B,MAAM6B,OAAS,EAEvC,GACD,CAACrC,EAAYyB,EAAeP,EAAiBS,IAoChD,OACIY,EAAC,MAAA,CACGC,UAAU,wBACV,eAAcR,EACd,mBAAkBL,EAAiB,EAEnCc,SAAA,CAAAC,EAAC,WAAA,CACG,eAAcV,EACdQ,UAAW,sDAAsDnC,SACjEF,OApCZ,SAAsBwC,GAClBxB,GAAmB,GACfhB,GACAA,EAAOwC,EAEf,EAgCYvC,QA5CZ,SAAuBuC,GACnBxB,GAAmB,GACff,GACAA,EAAQuC,EAEhB,EAwCYhC,SA/BZ,SAAwBgC,GACf7B,GACDE,EAAqB2B,EAAEC,OAAOnC,OAG9BE,GACAA,EAASgC,EAEjB,EAwBY5C,IAAKuB,EACLd,MAAO,IAAKA,KAjBF,CAClBqC,UAAW7C,EAAa,cAAW,IAiB3BM,YAAAA,KACIoB,KACAd,IAEPX,GACGsC,EAAC,MAAA,CAAIC,UAAU,yBAAyB,cAAY,OAChDC,SAAA,CAAAF,EAAC,MAAA,CAAIC,UAAU,+BACVC,SAAA,CAAAd,EAAe,MAAcE,MAEhC5B,EAAQ6C,cACNJ,EAAC,MAAA,CACGF,UAAU,kCACVhC,MAAO,CACF,oBAtCA0B,EAuCGH,EAvCcgB,EAwCdlB,EAvCxBK,GAAW,GAGE,IAAVa,EAFI,EAEyB,IAAVb,EAAiBa,GAkCa,aAtC5D,IAA6Bb,EAAiBa,IAmDtDnD,EAAaoD,YAAc"}

package/build/es/tailwind/tailwindPreset.js

@@ -1,2 +1,2 @@
-import o from"../tokens.js";import{jokulTypographyPlugin as e}from"./plugins/jokulTypographyPlugin.js";const i={theme:{colors:o.color,spacing:o.spacing,fontWeight:o.font.weight,fontSize:o.font.size,lineHeight:o.lineHeight,borderRadius:o.border.radius,borderWidth:o.border.width,screens:{sm:o.breakpoint.medium,md:o.breakpoint.large,lg:o.breakpoint.xl}},plugins:[e]};export{i as jokulPreset};
+import o from"../tokens.js";import{jokulTypographyPlugin as e}from"./plugins/jokulTypographyPlugin.js";const r="@";const i={theme:{colors:function(){const{[r]:e,...i}=o.color;return{...e,...i}}(),spacing:o.spacing,fontWeight:o.font.weight,fontSize:o.font.size,lineHeight:o.lineHeight,borderRadius:o.border.radius,borderWidth:o.border.width,screens:{sm:o.breakpoint.medium,md:o.breakpoint.large,lg:o.breakpoint.xl}},plugins:[e]};export{i as jokulPreset};
 //# sourceMappingURL=tailwindPreset.js.map

package/build/es/tailwind/tailwindPreset.js.map

@@ -1 +1 @@
-{"version":3,"file":"tailwindPreset.js","sources":["../../../src/tailwind/tailwindPreset.ts"],"sourcesContent":["import type { Config } from \"tailwindcss\";\nimport tokens from \"../tokens.js\";\nimport { jokulTypographyPlugin } from \"./plugins/jokulTypographyPlugin.js\";\n\nexport const jokulPreset: Partial<Config> = {\n    theme: {\n        colors: tokens.color,\n        spacing: tokens.spacing,\n        fontWeight: tokens.font.weight,\n        fontSize: tokens.font.size,\n        lineHeight: tokens.lineHeight,\n        borderRadius: tokens.border.radius,\n        borderWidth: tokens.border.width,\n        screens: {\n            sm: tokens.breakpoint.medium,\n            md: tokens.breakpoint.large,\n            lg: tokens.breakpoint.xl,\n        },\n    },\n    plugins: [jokulTypographyPlugin],\n};\n"],"names":["jokulPreset","theme","colors","tokens","color","spacing","fontWeight","font","weight","fontSize","size","lineHeight","borderRadius","border","radius","borderWidth","width","screens","sm","breakpoint","medium","md","large","lg","xl","plugins","jokulTypographyPlugin"],"mappings":"uGAIO,MAAMA,EAA+B,CACxCC,MAAO,CACHC,OAAQC,EAAOC,MACfC,QAASF,EAAOE,QAChBC,WAAYH,EAAOI,KAAKC,OACxBC,SAAUN,EAAOI,KAAKG,KACtBC,WAAYR,EAAOQ,WACnBC,aAAcT,EAAOU,OAAOC,OAC5BC,YAAaZ,EAAOU,OAAOG,MAC3BC,QAAS,CACLC,GAAIf,EAAOgB,WAAWC,OACtBC,GAAIlB,EAAOgB,WAAWG,MACtBC,GAAIpB,EAAOgB,WAAWK,KAG9BC,QAAS,CAACC"}
+{"version":3,"file":"tailwindPreset.js","sources":["../../../src/tailwind/tailwindPreset.ts"],"sourcesContent":["import type { Config } from \"tailwindcss\";\nimport tokens from \"../tokens.js\";\nimport { jokulTypographyPlugin } from \"./plugins/jokulTypographyPlugin.js\";\n\nconst DEFAULT_COLOR_VARIANT_KEY = \"@\";\n\nfunction createTailwindColors() {\n    const { [DEFAULT_COLOR_VARIANT_KEY]: defaultColors, ...semanticColors } =\n        tokens.color;\n\n    return {\n        ...defaultColors,\n        ...semanticColors,\n    };\n}\n\nexport const jokulPreset: Partial<Config> = {\n    theme: {\n        colors: createTailwindColors(),\n        spacing: tokens.spacing,\n        fontWeight: tokens.font.weight,\n        fontSize: tokens.font.size,\n        lineHeight: tokens.lineHeight,\n        borderRadius: tokens.border.radius,\n        borderWidth: tokens.border.width,\n        screens: {\n            sm: tokens.breakpoint.medium,\n            md: tokens.breakpoint.large,\n            lg: tokens.breakpoint.xl,\n        },\n    },\n    plugins: [jokulTypographyPlugin],\n};\n"],"names":["DEFAULT_COLOR_VARIANT_KEY","jokulPreset","theme","colors","i","defaultColors","semanticColors","tokens","color","createTailwindColors","spacing","fontWeight","font","weight","fontSize","size","lineHeight","borderRadius","border","radius","borderWidth","width","screens","sm","breakpoint","medium","md","large","lg","xl","plugins","jokulTypographyPlugin"],"mappings":"uGAIA,MAAMA,EAA4B,IAY3B,MAAMC,EAA+B,CACxCC,MAAO,CACHC,OAZR,WACI,MAAQC,CAACJ,GAA4BK,KAAkBC,GACnDC,EAAOC,MAEX,MAAO,IACAH,KACAC,EAEX,CAIgBG,GACRC,QAASH,EAAOG,QAChBC,WAAYJ,EAAOK,KAAKC,OACxBC,SAAUP,EAAOK,KAAKG,KACtBC,WAAYT,EAAOS,WACnBC,aAAcV,EAAOW,OAAOC,OAC5BC,YAAab,EAAOW,OAAOG,MAC3BC,QAAS,CACLC,GAAIhB,EAAOiB,WAAWC,OACtBC,GAAInB,EAAOiB,WAAWG,MACtBC,GAAIrB,EAAOiB,WAAWK,KAG9BC,QAAS,CAACC"}

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},u=e=>(r,t,m)=>{let n=0,s="";const o={setValueAs:e=>e.replace(/\s/g,""),onChange:o=>{m?.onChange?.(o);let u=0;const i=o.target.value.length;null!==o.target.selectionStart&&(u=o.target.selectionStart),r.setValue(t,a[e](o.target.value,{partial:!0}));let l=null;if(["Delete","Backspace"].includes(s)){l=n-(n-u)}else if(u<o.target.value.length){l=u+(o.target.value.length-i)}null!==l&&o.target.setSelectionRange(l,l,void 0)}};m&&Object.assign(o,m);const u=r.register(t,o),i={onKeyDown:e=>{null!==e.target.selectionStart&&(n=e.target.selectionStart),s=e.key}};return"number"===e&&(i.align="right"),Object.assign(u,i)},i=u("fodselsnummer"),l=u("kortnummer"),g=u("kontonummer"),f=u("telefonnummer"),k=e=>({registerWithFodselsnummerMask:(r,t)=>u("fodselsnummer")(e,r,t),registerWithKortnummerMask:(r,t)=>u("kortnummer")(e,r,t),registerWithKontonummerMask:(r,t)=>u("kontonummer")(e,r,t),registerWithTelefonnummerMask:(r,t)=>u("telefonnummer")(e,r,t),registerWithOrganisasjonsnummerMask:(r,t)=>u("organisasjonsnummer")(e,r,t),registerWithDateMask:(r,t)=>u("date")(e,r,t),registerWithNumber:(r,t)=>u("number")(e,r,t)});export{i 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),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};
 //# 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\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\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            form.setValue(\n                name,\n                formatters[formatter](event.target.value, {\n                    partial: true,\n                }) as PathValue<T, Path<T>>,\n            );\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\n                // calculate new caret position (- because we move backwards)\n                newPosition = onKeyDownCaretPosition - delta;\n            } else if (onChangeCaretPosition < event.target.value.length) {\n                // handle adding content from inside the string\n                // calculate how much to move the caret forwards\n                const delta = event.target.value.length - inputLength;\n\n                // calculate new caret position (+ because we move forwards)\n                newPosition = onChangeCaretPosition + delta;\n            }\n\n            if (newPosition !== null) {\n                event.target.setSelectionRange(\n                    newPosition,\n                    newPosition,\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            if ((event.target as HTMLInputElement).selectionStart !== null) {\n                onKeyDownCaretPosition = (event.target as HTMLInputElement)\n                    .selectionStart as number;\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","registerOptions","setValueAs","value","replace","onChange","event","onChangeCaretPosition","inputLength","target","length","selectionStart","setValue","partial","newPosition","includes","setSelectionRange","Object","assign","register","extra","onKeyDown","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,GASnBC,EACDC,GACD,CACIC,EACAC,EACAC,KAEA,IAAIC,EAAyB,EACzBC,EAAsB,GAiD1B,MAAMC,EAA+C,CACjDC,WAhDgBC,GAAkBA,EAAMC,QAAQ,MAAO,IAiDvDC,SAhDcC,IACdR,GAASO,WAAWC,GAGpB,IAAIC,EAAwB,EAC5B,MAAMC,EAAcF,EAAMG,OAAON,MAAMO,OAGH,OAAhCJ,EAAMG,OAAOE,iBACbJ,EAAwBD,EAAMG,OAAOE,gBAGzCf,EAAKgB,SACDf,EACAlB,EAAWgB,GAAWW,EAAMG,OAAON,MAAO,CACtCU,SAAS,KAIjB,IAAIC,EAA6B,KAEjC,GAAI,CAAC,SAAU,aAAaC,SAASf,GAAsB,CAMvDc,EAAcf,GAHAA,EAAyBQ,EAI3C,MAAA,GAAWA,EAAwBD,EAAMG,OAAON,MAAMO,OAAQ,CAM1DI,EAAcP,GAHAD,EAAMG,OAAON,MAAMO,OAASF,EAI9C,CAEoB,OAAhBM,GACAR,EAAMG,OAAOO,kBACTF,EACAA,OACA,KASRhB,GACAmB,OAAOC,OAAOjB,EAAiBH,GAEnC,MAAMqB,EAAWvB,EAAKuB,SAAStB,EAAMI,GAY/BmB,EAAiC,CACnCC,UAVuDf,IACG,OAArDA,EAAMG,OAA4BE,iBACnCZ,EAA0BO,EAAMG,OAC3BE,gBAETX,EAAsBM,EAAMgB,MAQhC,MAAkB,WAAd3B,IACAyB,EAAMG,MAAQ,SAGXN,OAAOC,OAAOC,EAAUC,IAI1BI,EAAgC9B,EAAiB,iBAEjD+B,EAA6B/B,EAAiB,cAE9CgC,EAA8BhC,EAAiB,eAE/CiC,EAAgCjC,EAAiB,iBAKjDkC,EACThC,IAAAA,CAEA4B,8BAA+B,CAC3B3B,EACAC,IAEAJ,EAAiB,gBAAjBA,CAAqCE,EAAMC,EAAMC,GACrD2B,2BAA4B,CACxB5B,EACAC,IAEAJ,EAAiB,aAAjBA,CAAkCE,EAAMC,EAAMC,GAClD4B,4BAA6B,CACzB7B,EACAC,IAEAJ,EAAiB,cAAjBA,CAAmCE,EAAMC,EAAMC,GACnD6B,8BAA+B,CAC3B9B,EACAC,IAEAJ,EAAiB,gBAAjBA,CAAqCE,EAAMC,EAAMC,GACrD+B,oCAAqC,CACjChC,EACAC,IAEAJ,EAAiB,sBAAjBA,CAA2CE,EAAMC,EAAMC,GAC3DgC,qBAAsB,CAClBjC,EACAC,IAEAJ,EAAiB,OAAjBA,CAA4BE,EAAMC,EAAMC,GAC5CiC,mBAAoB,CAChBlC,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        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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fremtind/jokul",
-  "version": "5.0.1",
+  "version": "5.0.3",
   "type": "module",
   "engines": {
     "node": "^20.19.0 || >=22.12.0"

package/styles/components/checkbox/checkbox.css

@@ -51,7 +51,6 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-productive);
     transition-property: color;
-    font: var(--jkl-text-style-text-medium);
   }
   .jkl-checkbox__label::before {
     content: "check_box_outline_blank";

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-checkbox{--text-color:var(--jkl-color-background-contrast);--background-color:transparent;color:var(--text-color);display:flex;flex-wrap:wrap;font:var(--jkl-text-style-text-medium);position:relative}.jkl-checkbox__input{-webkit-appearance:none;appearance:none;background:transparent;block-size:1lh;border:0;border-style:none;cursor:pointer;inline-size:1lh;inset-block-start:0;inset-inline-start:0;margin:0;outline:0;outline-style:none;padding:0;position:absolute;z-index:1}.jkl-checkbox__input:active,.jkl-checkbox__input:focus,.jkl-checkbox__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-checkbox__input{border-style:revert;outline:revert;outline-style:revert}.jkl-checkbox__input:active,.jkl-checkbox__input:focus,.jkl-checkbox__input:hover{outline:revert;outline-style:revert}}.jkl-checkbox__label{cursor:pointer;display:flex;font:var(--jkl-text-style-text-medium);transition-duration:var(--jkl-motion-timing-productive);transition-property:color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-checkbox__label:before{content:"check_box_outline_blank";-webkit-margin-end:.25em;display:inline-block;font-family:Jokul Icons,Jokul Icons Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;line-height:1;margin-inline-end:.25em;-webkit-font-smoothing:antialiased;transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label:before{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-checkbox__input:is(:hover,:active)+.jkl-checkbox__label,.jkl-checkbox__label:active,.jkl-checkbox__label:hover{--jkl-icon-weight:var(--jkl-font-weight-bold)}.jkl-checkbox__input:checked+.jkl-checkbox__label:before{content:"check_box";--jkl-icon-fill:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label:before{content:"indeterminate_check_box";--jkl-icon-fill:1}.jkl-checkbox__input[aria-invalid=true]+.jkl-checkbox__label:before{color:var(--jkl-color-error-background-contrast)}.jkl-checkbox+.jkl-checkbox{margin-top:.75em}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:var(--jkl-unit-30)}}
+@layer jokul.components{.jkl-checkbox{--text-color:var(--jkl-color-background-contrast);--background-color:transparent;color:var(--text-color);display:flex;flex-wrap:wrap;font:var(--jkl-text-style-text-medium);position:relative}.jkl-checkbox__input{-webkit-appearance:none;appearance:none;background:transparent;block-size:1lh;border:0;border-style:none;cursor:pointer;inline-size:1lh;inset-block-start:0;inset-inline-start:0;margin:0;outline:0;outline-style:none;padding:0;position:absolute;z-index:1}.jkl-checkbox__input:active,.jkl-checkbox__input:focus,.jkl-checkbox__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-checkbox__input{border-style:revert;outline:revert;outline-style:revert}.jkl-checkbox__input:active,.jkl-checkbox__input:focus,.jkl-checkbox__input:hover{outline:revert;outline-style:revert}}.jkl-checkbox__label{cursor:pointer;display:flex;transition-duration:var(--jkl-motion-timing-productive);transition-property:color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-checkbox__label:before{content:"check_box_outline_blank";-webkit-margin-end:.25em;display:inline-block;font-family:Jokul Icons,Jokul Icons Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;line-height:1;margin-inline-end:.25em;-webkit-font-smoothing:antialiased;transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label:before{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-checkbox__input:is(:hover,:active)+.jkl-checkbox__label,.jkl-checkbox__label:active,.jkl-checkbox__label:hover{--jkl-icon-weight:var(--jkl-font-weight-bold)}.jkl-checkbox__input:checked+.jkl-checkbox__label:before{content:"check_box";--jkl-icon-fill:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label:before{content:"indeterminate_check_box";--jkl-icon-fill:1}.jkl-checkbox__input[aria-invalid=true]+.jkl-checkbox__label:before{color:var(--jkl-color-error-background-contrast)}.jkl-checkbox+.jkl-checkbox{margin-top:.75em}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:var(--jkl-unit-30)}}

package/styles/components/checkbox/checkbox.scss

@@ -40,8 +40,6 @@
             @include jkl.motion;
             transition-property: color;
 
-            @include jkl.text-style("text-medium");
-
             &::before {
                 content: "check_box_outline_blank";
                 margin-inline-end: 0.25em;

package/styles/components/checkbox-panel/checkbox-panel.css

@@ -126,7 +126,6 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-productive);
     transition-property: color;
-    font: var(--jkl-text-style-text-medium);
   }
   .jkl-checkbox__label::before {
     content: "check_box_outline_blank";

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

@@ -1 +1 @@
-@layer jokul.components{.jkl-input-panel{--outer-border-color:var(--jkl-color-border-default);--outer-border-thickness:0.0625rem;--background-color:transparent;--padding-inline:var(--jkl-unit-25);background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);display:flex;flex-direction:column;interpolate-size:allow-keywords;transition-duration:var(--jkl-motion-timing-productive);transition-property:box-shadow;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-input-panel__header{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content;padding:var(--jkl-unit-20) var(--padding-inline);position:relative}.jkl-input-panel__header .jkl-checkbox,.jkl-input-panel__header .jkl-radio-button{grid-column:1/-1;grid-row:1;inline-size:100%}.jkl-input-panel__header label{inline-size:100%}.jkl-input-panel__header__amount{align-items:center;display:flex;font:var(--jkl-text-style-text-medium);font-weight:var(--jkl-font-weight-bold);grid-column:2;grid-row:1;height:100%;justify-self:end;pointer-events:none;position:relative;z-index:1}.jkl-input-panel__description{height:0;overflow:hidden;padding-inline:var(--padding-inline);-webkit-padding-after:var(--jkl-spacing-none);line-height:normal;font:var(--jkl-text-style-paragraph-medium);padding-block-end:var(--jkl-spacing-none);transition-duration:var(--jkl-motion-timing-productive);transition-property:height;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-input-panel:has(:checked),.jkl-input-panel:not([data-always-open]),.jkl-input-panel[data-always-open=true]{--background-color:var(--jkl-color-background-container)}.jkl-input-panel:has(:checked) .jkl-input-panel__description,.jkl-input-panel:not([data-always-open]) .jkl-input-panel__description,.jkl-input-panel[data-always-open=true] .jkl-input-panel__description{height:auto;-webkit-padding-after:var(--jkl-unit-20);padding-block-end:var(--jkl-unit-20)}.jkl-input-panel:has(input:hover){--outer-border-color:var(--jkl-color-border-strong);--outer-border-thickness:0.125rem;cursor:pointer}}@layer jokul.components{.jkl-checkbox{--text-color:var(--jkl-color-background-contrast);--background-color:transparent;color:var(--text-color);display:flex;flex-wrap:wrap;font:var(--jkl-text-style-text-medium);position:relative}.jkl-checkbox__input{-webkit-appearance:none;appearance:none;background:transparent;block-size:1lh;border:0;border-style:none;cursor:pointer;inline-size:1lh;inset-block-start:0;inset-inline-start:0;margin:0;outline:0;outline-style:none;padding:0;position:absolute;z-index:1}.jkl-checkbox__input:active,.jkl-checkbox__input:focus,.jkl-checkbox__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-checkbox__input{border-style:revert;outline:revert;outline-style:revert}.jkl-checkbox__input:active,.jkl-checkbox__input:focus,.jkl-checkbox__input:hover{outline:revert;outline-style:revert}}.jkl-checkbox__label{cursor:pointer;display:flex;font:var(--jkl-text-style-text-medium);transition-duration:var(--jkl-motion-timing-productive);transition-property:color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-checkbox__label:before{content:"check_box_outline_blank";-webkit-margin-end:.25em;display:inline-block;font-family:Jokul Icons,Jokul Icons Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;line-height:1;margin-inline-end:.25em;-webkit-font-smoothing:antialiased;transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label:before{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-checkbox__input:is(:hover,:active)+.jkl-checkbox__label,.jkl-checkbox__label:active,.jkl-checkbox__label:hover{--jkl-icon-weight:var(--jkl-font-weight-bold)}.jkl-checkbox__input:checked+.jkl-checkbox__label:before{content:"check_box";--jkl-icon-fill:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label:before{content:"indeterminate_check_box";--jkl-icon-fill:1}.jkl-checkbox__input[aria-invalid=true]+.jkl-checkbox__label:before{color:var(--jkl-color-error-background-contrast)}.jkl-checkbox+.jkl-checkbox{margin-top:.75em}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:var(--jkl-unit-30)}}@layer jokul.components{.jkl-checkbox-panel .jkl-checkbox{-webkit-margin-start:-.1em;margin-inline-start:-.1em}.jkl-checkbox-panel .jkl-checkbox__input:focus-visible+.jkl-checkbox__label:before{outline:none}}
+@layer jokul.components{.jkl-input-panel{--outer-border-color:var(--jkl-color-border-default);--outer-border-thickness:0.0625rem;--background-color:transparent;--padding-inline:var(--jkl-unit-25);background-color:var(--background-color);border-radius:var(--jkl-border-radius-s);box-shadow:inset 0 0 0 var(--outer-border-thickness) var(--outer-border-color);display:flex;flex-direction:column;interpolate-size:allow-keywords;transition-duration:var(--jkl-motion-timing-productive);transition-property:box-shadow;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-input-panel__header{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content;padding:var(--jkl-unit-20) var(--padding-inline);position:relative}.jkl-input-panel__header .jkl-checkbox,.jkl-input-panel__header .jkl-radio-button{grid-column:1/-1;grid-row:1;inline-size:100%}.jkl-input-panel__header label{inline-size:100%}.jkl-input-panel__header__amount{align-items:center;display:flex;font:var(--jkl-text-style-text-medium);font-weight:var(--jkl-font-weight-bold);grid-column:2;grid-row:1;height:100%;justify-self:end;pointer-events:none;position:relative;z-index:1}.jkl-input-panel__description{height:0;overflow:hidden;padding-inline:var(--padding-inline);-webkit-padding-after:var(--jkl-spacing-none);line-height:normal;font:var(--jkl-text-style-paragraph-medium);padding-block-end:var(--jkl-spacing-none);transition-duration:var(--jkl-motion-timing-productive);transition-property:height;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-input-panel:has(:focus-visible){outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-input-panel:has(:checked),.jkl-input-panel:not([data-always-open]),.jkl-input-panel[data-always-open=true]{--background-color:var(--jkl-color-background-container)}.jkl-input-panel:has(:checked) .jkl-input-panel__description,.jkl-input-panel:not([data-always-open]) .jkl-input-panel__description,.jkl-input-panel[data-always-open=true] .jkl-input-panel__description{height:auto;-webkit-padding-after:var(--jkl-unit-20);padding-block-end:var(--jkl-unit-20)}.jkl-input-panel:has(input:hover){--outer-border-color:var(--jkl-color-border-strong);--outer-border-thickness:0.125rem;cursor:pointer}}@layer jokul.components{.jkl-checkbox{--text-color:var(--jkl-color-background-contrast);--background-color:transparent;color:var(--text-color);display:flex;flex-wrap:wrap;font:var(--jkl-text-style-text-medium);position:relative}.jkl-checkbox__input{-webkit-appearance:none;appearance:none;background:transparent;block-size:1lh;border:0;border-style:none;cursor:pointer;inline-size:1lh;inset-block-start:0;inset-inline-start:0;margin:0;outline:0;outline-style:none;padding:0;position:absolute;z-index:1}.jkl-checkbox__input:active,.jkl-checkbox__input:focus,.jkl-checkbox__input:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-checkbox__input{border-style:revert;outline:revert;outline-style:revert}.jkl-checkbox__input:active,.jkl-checkbox__input:focus,.jkl-checkbox__input:hover{outline:revert;outline-style:revert}}.jkl-checkbox__label{cursor:pointer;display:flex;transition-duration:var(--jkl-motion-timing-productive);transition-property:color;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-checkbox__label:before{content:"check_box_outline_blank";-webkit-margin-end:.25em;display:inline-block;font-family:Jokul Icons,Jokul Icons Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-weight:400;line-height:1;margin-inline-end:.25em;-webkit-font-smoothing:antialiased;transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label:before{outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.jkl-checkbox__input:is(:hover,:active)+.jkl-checkbox__label,.jkl-checkbox__label:active,.jkl-checkbox__label:hover{--jkl-icon-weight:var(--jkl-font-weight-bold)}.jkl-checkbox__input:checked+.jkl-checkbox__label:before{content:"check_box";--jkl-icon-fill:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label:before{content:"indeterminate_check_box";--jkl-icon-fill:1}.jkl-checkbox__input[aria-invalid=true]+.jkl-checkbox__label:before{color:var(--jkl-color-error-background-contrast)}.jkl-checkbox+.jkl-checkbox{margin-top:.75em}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:var(--jkl-unit-30)}}@layer jokul.components{.jkl-checkbox-panel .jkl-checkbox{-webkit-margin-start:-.1em;margin-inline-start:-.1em}.jkl-checkbox-panel .jkl-checkbox__input:focus-visible+.jkl-checkbox__label:before{outline:none}}

package/styles/components/countdown/countdown.css

@@ -26,10 +26,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-u71s7o3 var(--duration) linear forwards;
+    animation: jkl-downcount-ua1sz6b var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-u71s7o3 {
+  @keyframes jkl-downcount-ua1sz6b {
     from {
       width: 100%;
     }

package/styles/components/countdown/countdown.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-countdown{--track-color:var(--jkl-color-border-subdued);--bar-color:var(--jkl-color-border-strong);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-countdown__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-countdown{background-color:Canvas}.jkl-countdown__tracker{background-color:CanvasText}}.jkl-countdown__tracker{animation:jkl-downcount-u71s7o3 var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-u71s7o3{0%{width:100%}to{width:0}}}
+@layer jokul.components{.jkl-countdown{--track-color:var(--jkl-color-border-subdued);--bar-color:var(--jkl-color-border-strong);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-countdown__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-countdown{background-color:Canvas}.jkl-countdown__tracker{background-color:CanvasText}}.jkl-countdown__tracker{animation:jkl-downcount-ua1sz6b var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-ua1sz6b{0%{width:100%}to{width:0}}}

package/styles/components/feedback/feedback.css

@@ -20,12 +20,12 @@
     font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-unvalhh 0.25s ease-out;
+    animation: jkl-show-ue81spu 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-unvalhh {
+  @keyframes jkl-show-ue81spu {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;

package/styles/components/feedback/feedback.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:var(--jkl-motion-timing-expressive);transition-property:height;transition-timing-function:var(--jkl-motion-easing-standard);width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-paragraph-small);margin-bottom:var(--jkl-unit-20)}.jkl-feedback__fade-in{animation:jkl-show-unvalhh .25s ease-out}.jkl-feedback__buttons{display:flex}@keyframes jkl-show-unvalhh{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:var(--jkl-spacing-12);justify-content:space-between;margin-top:var(--jkl-unit-10);max-width:22.5rem;width:100%}.jkl-feedback-smiley-option{color:var(--jkl-color-text-subdued);cursor:pointer;display:inline-block;height:2.5rem;position:relative;transform:translateZ(0);transition-duration:var(--jkl-motion-timing-productive);transition-property:transform,color;transition-timing-function:var(--jkl-motion-easing-standard);width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{fill:ButtonText;stroke:ButtonFace}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:var(--jkl-motion-timing-productive);transition-property:opacity;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-feedback-smiley-option:before{box-shadow:0 .125rem 1.875rem rgba(0,0,0,.1);inset:0}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}input:checked+.jkl-feedback-smiley-option:before{opacity:1}input:focus-visible+.jkl-feedback-smiley-option{border-radius:var(--jkl-border-radius-full);outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}}
+@layer jokul.components{.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:var(--jkl-motion-timing-expressive);transition-property:height;transition-timing-function:var(--jkl-motion-easing-standard);width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-paragraph-small);margin-bottom:var(--jkl-unit-20)}.jkl-feedback__fade-in{animation:jkl-show-ue81spu .25s ease-out}.jkl-feedback__buttons{display:flex}@keyframes jkl-show-ue81spu{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:var(--jkl-spacing-12);justify-content:space-between;margin-top:var(--jkl-unit-10);max-width:22.5rem;width:100%}.jkl-feedback-smiley-option{color:var(--jkl-color-text-subdued);cursor:pointer;display:inline-block;height:2.5rem;position:relative;transform:translateZ(0);transition-duration:var(--jkl-motion-timing-productive);transition-property:transform,color;transition-timing-function:var(--jkl-motion-easing-standard);width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{fill:ButtonText;stroke:ButtonFace}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:var(--jkl-motion-timing-productive);transition-property:opacity;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-feedback-smiley-option:before{box-shadow:0 .125rem 1.875rem rgba(0,0,0,.1);inset:0}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}input:checked+.jkl-feedback-smiley-option:before{opacity:1}input:focus-visible+.jkl-feedback-smiley-option{border-radius:var(--jkl-border-radius-full);outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}}

package/styles/components/file-input/file-input.css

@@ -351,22 +351,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-uu9ystd;
+    animation-name: jkl-loader-left-spin-u0wy0qq;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-uu9ysud;
+    animation-name: jkl-loader-middle-spin-u0wy0ro;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-uu9ysuu;
+    animation-name: jkl-loader-right-spin-u0wy0rp;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-uu9ystd {
+  @keyframes jkl-loader-left-spin-u0wy0qq {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -380,7 +380,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-uu9ysud {
+  @keyframes jkl-loader-middle-spin-u0wy0ro {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -397,7 +397,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-uu9ysuu {
+  @keyframes jkl-loader-right-spin-u0wy0rp {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -437,7 +437,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-uu9ysvr;
+      animation: 2s ease infinite jkl-blink-u0wy0ru;
     }
   }
   .jkl-skeleton-input {
@@ -485,10 +485,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-uu9ysvr;
+      animation: 2s ease-in-out infinite jkl-blink-u0wy0ru;
     }
   }
-  @keyframes jkl-blink-uu9ysvr {
+  @keyframes jkl-blink-u0wy0ru {
     0% {
       opacity: 1;
     }