@fremtind/jokul 0.57.8 → 0.58.1

package/build/cjs/components/chip/Chip.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../../clsx-E3yX_9sL.cjs"),i=require("react"),s=require("../icon/icons/CheckIcon.cjs"),r=require("../icon/icons/CloseIcon.cjs"),l=i.forwardRef((function({className:i,variant:l,onClick:a,children:n,selected:t,size:o="small",...j},u){return e.jsxs("button",{ref:u,className:c.clsx("jkl-chip",`jkl-chip--${o}`,`jkl-chip--${l}`,i),onClick:a,"aria-pressed":t,...j,children:[n,"filter"===l&&t&&e.jsx(s.CheckIcon,{className:"jkl-chip__icon",variant:"small","data-testid":"jkl-check-icon"}),"input"===l&&e.jsx(r.CloseIcon,{className:"jkl-chip__icon",variant:"small","data-testid":"jkl-close-icon"})]})}));exports.Chip=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../../clsx-E3yX_9sL.cjs"),i=require("react"),s=require("../icon/icons/CheckIcon.cjs"),r=require("../icon/icons/CloseIcon.cjs"),l=i.forwardRef((function({className:i,variant:l,onClick:t,children:n,selected:a,size:o="small",...j},u){return e.jsxs("button",{type:"button",ref:u,className:c.clsx("jkl-chip",`jkl-chip--${o}`,`jkl-chip--${l}`,i),onClick:t,"aria-pressed":a,...j,children:[n,"filter"===l&&a&&e.jsx(s.CheckIcon,{className:"jkl-chip__icon",variant:"small","data-testid":"jkl-check-icon"}),"input"===l&&e.jsx(r.CloseIcon,{className:"jkl-chip__icon",variant:"small","data-testid":"jkl-close-icon"})]})}));exports.Chip=l;
 //# sourceMappingURL=Chip.cjs.map

package/build/cjs/components/chip/Chip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.cjs","sources":["../../../../src/components/chip/Chip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { ChipProps } from \"./types.js\";\n\nexport const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(\n    {\n        className,\n        variant,\n        onClick,\n        children,\n        selected,\n        size = \"small\",\n        ...rest\n    },\n    ref,\n) {\n    return (\n        <button\n            ref={ref}\n            className={clsx(\n                \"jkl-chip\",\n                `jkl-chip--${size}`,\n                `jkl-chip--${variant}`,\n                className,\n            )}\n            onClick={onClick}\n            aria-pressed={selected}\n            {...rest}\n        >\n            {children}\n            {variant === \"filter\" && selected && (\n                <CheckIcon\n                    className=\"jkl-chip__icon\"\n                    variant=\"small\"\n                    data-testid=\"jkl-check-icon\"\n                />\n            )}\n            {variant === \"input\" && (\n                <CloseIcon\n                    className=\"jkl-chip__icon\"\n                    variant=\"small\"\n                    data-testid=\"jkl-close-icon\"\n                />\n            )}\n        </button>\n    );\n});\n"],"names":["Chip","forwardRef","className","variant","onClick","children","selected","size","rest","ref","jsxs","clsx","jsx","CheckIcon","CloseIcon"],"mappings":"kQAMaA,EAAOC,EAAAA,YAAyC,UAErDC,UAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,KAAAA,EAAO,WACJC,GAEPC,GAGI,OAAAC,EAAAA,KAAC,SAAA,CACGD,IAAAA,EACAP,UAAWS,EAAAA,KACP,WACA,aAAaJ,IACb,aAAaJ,IACbD,GAEJE,QAAAA,EACA,eAAcE,KACVE,EAEHH,SAAA,CAAAA,EACY,WAAZF,GAAwBG,GACrBM,EAAAA,IAACC,EAAAA,UAAA,CACGX,UAAU,iBACVC,QAAQ,QACR,cAAY,mBAGP,UAAZA,GACGS,EAAAA,IAACE,EAAAA,UAAA,CACGZ,UAAU,iBACVC,QAAQ,QACR,cAAY,qBAKhC"}
+{"version":3,"file":"Chip.cjs","sources":["../../../../src/components/chip/Chip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { ChipProps } from \"./types.js\";\n\nexport const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(\n    {\n        className,\n        variant,\n        onClick,\n        children,\n        selected,\n        size = \"small\",\n        ...rest\n    },\n    ref,\n) {\n    return (\n        <button\n            type=\"button\"\n            ref={ref}\n            className={clsx(\n                \"jkl-chip\",\n                `jkl-chip--${size}`,\n                `jkl-chip--${variant}`,\n                className,\n            )}\n            onClick={onClick}\n            aria-pressed={selected}\n            {...rest}\n        >\n            {children}\n            {variant === \"filter\" && selected && (\n                <CheckIcon\n                    className=\"jkl-chip__icon\"\n                    variant=\"small\"\n                    data-testid=\"jkl-check-icon\"\n                />\n            )}\n            {variant === \"input\" && (\n                <CloseIcon\n                    className=\"jkl-chip__icon\"\n                    variant=\"small\"\n                    data-testid=\"jkl-close-icon\"\n                />\n            )}\n        </button>\n    );\n});\n"],"names":["Chip","forwardRef","className","variant","onClick","children","selected","size","rest","ref","jsxs","type","clsx","jsx","CheckIcon","CloseIcon"],"mappings":"kQAMaA,EAAOC,EAAAA,YAAyC,UAErDC,UAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,KAAAA,EAAO,WACJC,GAEPC,GAGI,OAAAC,EAAAA,KAAC,SAAA,CACGC,KAAK,SACLF,IAAAA,EACAP,UAAWU,EAAAA,KACP,WACA,aAAaL,IACb,aAAaJ,IACbD,GAEJE,QAAAA,EACA,eAAcE,KACVE,EAEHH,SAAA,CAAAA,EACY,WAAZF,GAAwBG,GACrBO,EAAAA,IAACC,EAAAA,UAAA,CACGZ,UAAU,iBACVC,QAAQ,QACR,cAAY,mBAGP,UAAZA,GACGU,EAAAA,IAACE,EAAAA,UAAA,CACGb,UAAU,iBACVC,QAAQ,QACR,cAAY,qBAKhC"}

package/build/cjs/components/chip/types.d.cts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { ButtonHTMLAttributes } from 'react';
 type Size = "small" | "large";
 export type ChipVariant = {
     variant: "input";
@@ -9,5 +9,5 @@ export type ChipVariant = {
     selected?: boolean;
     size?: Size;
 };
-export type ChipProps = ChipVariant & HTMLAttributes<HTMLButtonElement>;
+export type ChipProps = ChipVariant & ButtonHTMLAttributes<HTMLButtonElement>;
 export {};

package/build/cjs/components/text-input/BaseTextInput.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs"),n=require("react"),i=require("../icon-button/IconButton.cjs");function a(t,e){return t?{width:t}:e?{width:`calc(${Math.min(e,40)}ch + 24px)`}:void 0}const l=n.forwardRef(((l,s)=>{const{action:c,align:o="left","aria-invalid":r,className:u="",density:p,maxLength:d,style:x,type:m="text",unit:h,width:j,actionButton:y,...g}=l;return t.jsxs("div",{className:"jkl-text-input-wrapper","data-invalid":r,style:{...x,...a(j,d)},children:[t.jsx("input",{"aria-invalid":r,ref:s,className:e.clsx("jkl-text-input__input",u,{"jkl-text-input__input--align-right":"right"===o}),maxLength:d,type:m,...g}),h&&t.jsx("span",{className:"jkl-text-input__unit",children:h}),!c&&y&&n.cloneElement(y,{className:e.clsx("jkl-text-input-action-button",y.props.className),"data-theme":r?"light":void 0}),c&&!y&&t.jsx(i.IconButton,{"data-theme":r?"light":void 0,density:p,className:e.clsx("jkl-text-input-action-button",c.className),title:c.label,onClick:c.onClick,onFocus:c.onFocus,onBlur:c.onBlur,ref:c.buttonRef,type:c.type||"button",children:c.icon})]})}));l.displayName="BaseInputField",exports.BaseTextInput=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs"),n=require("react"),i=require("../icon-button/IconButton.cjs");function a(t,e){return t?{width:t}:e?{width:`calc(${Math.min(e,40)}ch + 24px)`}:void 0}const s=n.forwardRef(((s,l)=>{const{action:c,align:o="left","aria-invalid":r,className:u="",density:p,maxLength:x,style:d,type:m="text",unit:j,width:h,actionButton:y,...N}=s;return t.jsxs("div",{className:"jkl-text-input-wrapper","data-invalid":r,style:{...d,...a(h,x)},children:[t.jsx("input",{"aria-invalid":r,ref:l,className:e.clsx("jkl-text-input__input",u,{"jkl-text-input__input--align-right":"right"===o}),maxLength:x,type:m,...N}),j&&t.jsx("span",{className:"jkl-text-input__unit",children:j}),!c&&y&&n.cloneElement(y,{className:e.clsx("jkl-text-input-action-button",y.props.className)}),c&&!y&&t.jsx(i.IconButton,{density:p,className:e.clsx("jkl-text-input-action-button",c.className),title:c.label,onClick:c.onClick,onFocus:c.onFocus,onBlur:c.onBlur,ref:c.buttonRef,type:c.type||"button",children:c.icon})]})}));s.displayName="BaseInputField",exports.BaseTextInput=s;
 //# sourceMappingURL=BaseTextInput.cjs.map

package/build/cjs/components/text-input/BaseTextInput.cjs.map

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

package/build/es/components/chip/Chip.js

@@ -1,2 +1,2 @@
-import{jsxs as s,jsx as c}from"react/jsx-runtime";import{c as i}from"../../../clsx-BeLtu-UY.js";import{forwardRef as a}from"react";import{CheckIcon as o}from"../icon/icons/CheckIcon.js";import{CloseIcon as e}from"../icon/icons/CloseIcon.js";const l=a((function({className:a,variant:l,onClick:r,children:n,selected:t,size:m="small",...p},j){return s("button",{ref:j,className:i("jkl-chip",`jkl-chip--${m}`,`jkl-chip--${l}`,a),onClick:r,"aria-pressed":t,...p,children:[n,"filter"===l&&t&&c(o,{className:"jkl-chip__icon",variant:"small","data-testid":"jkl-check-icon"}),"input"===l&&c(e,{className:"jkl-chip__icon",variant:"small","data-testid":"jkl-close-icon"})]})}));export{l as Chip};
+import{jsxs as s,jsx as c}from"react/jsx-runtime";import{c as i}from"../../../clsx-BeLtu-UY.js";import{forwardRef as a}from"react";import{CheckIcon as o}from"../icon/icons/CheckIcon.js";import{CloseIcon as e}from"../icon/icons/CloseIcon.js";const t=a((function({className:a,variant:t,onClick:l,children:n,selected:r,size:m="small",...p},j){return s("button",{type:"button",ref:j,className:i("jkl-chip",`jkl-chip--${m}`,`jkl-chip--${t}`,a),onClick:l,"aria-pressed":r,...p,children:[n,"filter"===t&&r&&c(o,{className:"jkl-chip__icon",variant:"small","data-testid":"jkl-check-icon"}),"input"===t&&c(e,{className:"jkl-chip__icon",variant:"small","data-testid":"jkl-close-icon"})]})}));export{t as Chip};
 //# sourceMappingURL=Chip.js.map

package/build/es/components/chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../../../../src/components/chip/Chip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { ChipProps } from \"./types.js\";\n\nexport const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(\n    {\n        className,\n        variant,\n        onClick,\n        children,\n        selected,\n        size = \"small\",\n        ...rest\n    },\n    ref,\n) {\n    return (\n        <button\n            ref={ref}\n            className={clsx(\n                \"jkl-chip\",\n                `jkl-chip--${size}`,\n                `jkl-chip--${variant}`,\n                className,\n            )}\n            onClick={onClick}\n            aria-pressed={selected}\n            {...rest}\n        >\n            {children}\n            {variant === \"filter\" && selected && (\n                <CheckIcon\n                    className=\"jkl-chip__icon\"\n                    variant=\"small\"\n                    data-testid=\"jkl-check-icon\"\n                />\n            )}\n            {variant === \"input\" && (\n                <CloseIcon\n                    className=\"jkl-chip__icon\"\n                    variant=\"small\"\n                    data-testid=\"jkl-close-icon\"\n                />\n            )}\n        </button>\n    );\n});\n"],"names":["Chip","forwardRef","className","variant","onClick","children","selected","size","rest","ref","jsxs","clsx","jsx","CheckIcon","CloseIcon"],"mappings":"iPAMa,MAAAA,EAAOC,GAAyC,UAErDC,UAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,KAAAA,EAAO,WACJC,GAEPC,GAGI,OAAAC,EAAC,SAAA,CACGD,IAAAA,EACAP,UAAWS,EACP,WACA,aAAaJ,IACb,aAAaJ,IACbD,GAEJE,QAAAA,EACA,eAAcE,KACVE,EAEHH,SAAA,CAAAA,EACY,WAAZF,GAAwBG,GACrBM,EAACC,EAAA,CACGX,UAAU,iBACVC,QAAQ,QACR,cAAY,mBAGP,UAAZA,GACGS,EAACE,EAAA,CACGZ,UAAU,iBACVC,QAAQ,QACR,cAAY,qBAKhC"}
+{"version":3,"file":"Chip.js","sources":["../../../../src/components/chip/Chip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { ChipProps } from \"./types.js\";\n\nexport const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(\n    {\n        className,\n        variant,\n        onClick,\n        children,\n        selected,\n        size = \"small\",\n        ...rest\n    },\n    ref,\n) {\n    return (\n        <button\n            type=\"button\"\n            ref={ref}\n            className={clsx(\n                \"jkl-chip\",\n                `jkl-chip--${size}`,\n                `jkl-chip--${variant}`,\n                className,\n            )}\n            onClick={onClick}\n            aria-pressed={selected}\n            {...rest}\n        >\n            {children}\n            {variant === \"filter\" && selected && (\n                <CheckIcon\n                    className=\"jkl-chip__icon\"\n                    variant=\"small\"\n                    data-testid=\"jkl-check-icon\"\n                />\n            )}\n            {variant === \"input\" && (\n                <CloseIcon\n                    className=\"jkl-chip__icon\"\n                    variant=\"small\"\n                    data-testid=\"jkl-close-icon\"\n                />\n            )}\n        </button>\n    );\n});\n"],"names":["Chip","forwardRef","className","variant","onClick","children","selected","size","rest","ref","jsxs","type","clsx","jsx","CheckIcon","CloseIcon"],"mappings":"iPAMa,MAAAA,EAAOC,GAAyC,UAErDC,UAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,KAAAA,EAAO,WACJC,GAEPC,GAGI,OAAAC,EAAC,SAAA,CACGC,KAAK,SACLF,IAAAA,EACAP,UAAWU,EACP,WACA,aAAaL,IACb,aAAaJ,IACbD,GAEJE,QAAAA,EACA,eAAcE,KACVE,EAEHH,SAAA,CAAAA,EACY,WAAZF,GAAwBG,GACrBO,EAACC,EAAA,CACGZ,UAAU,iBACVC,QAAQ,QACR,cAAY,mBAGP,UAAZA,GACGU,EAACE,EAAA,CACGb,UAAU,iBACVC,QAAQ,QACR,cAAY,qBAKhC"}

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { ButtonHTMLAttributes } from 'react';
 type Size = "small" | "large";
 export type ChipVariant = {
     variant: "input";
@@ -9,5 +9,5 @@ export type ChipVariant = {
     selected?: boolean;
     size?: Size;
 };
-export type ChipProps = ChipVariant & HTMLAttributes<HTMLButtonElement>;
+export type ChipProps = ChipVariant & ButtonHTMLAttributes<HTMLButtonElement>;
 export {};

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

@@ -1,2 +1,2 @@
-import{jsxs as t,jsx as n}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import i,{forwardRef as e}from"react";import{IconButton as o}from"../icon-button/IconButton.js";function s(t,n){return t?{width:t}:n?{width:`calc(${Math.min(n,40)}ch + 24px)`}:void 0}const l=e(((e,l)=>{const{action:c,align:r="left","aria-invalid":u,className:p="",density:m,maxLength:d,style:h,type:x="text",unit:f,width:j,actionButton:y,...N}=e;return t("div",{className:"jkl-text-input-wrapper","data-invalid":u,style:{...h,...s(j,d)},children:[n("input",{"aria-invalid":u,ref:l,className:a("jkl-text-input__input",p,{"jkl-text-input__input--align-right":"right"===r}),maxLength:d,type:x,...N}),f&&n("span",{className:"jkl-text-input__unit",children:f}),!c&&y&&i.cloneElement(y,{className:a("jkl-text-input-action-button",y.props.className),"data-theme":u?"light":void 0}),c&&!y&&n(o,{"data-theme":u?"light":void 0,density:m,className:a("jkl-text-input-action-button",c.className),title:c.label,onClick:c.onClick,onFocus:c.onFocus,onBlur:c.onBlur,ref:c.buttonRef,type:c.type||"button",children:c.icon})]})}));l.displayName="BaseInputField";export{l as BaseTextInput};
+import{jsxs as t,jsx as n}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import i,{forwardRef as e}from"react";import{IconButton as s}from"../icon-button/IconButton.js";function o(t,n){return t?{width:t}:n?{width:`calc(${Math.min(n,40)}ch + 24px)`}:void 0}const l=e(((e,l)=>{const{action:c,align:r="left","aria-invalid":u,className:p="",density:m,maxLength:d,style:x,type:h="text",unit:f,width:j,actionButton:y,...N}=e;return t("div",{className:"jkl-text-input-wrapper","data-invalid":u,style:{...x,...o(j,d)},children:[n("input",{"aria-invalid":u,ref:l,className:a("jkl-text-input__input",p,{"jkl-text-input__input--align-right":"right"===r}),maxLength:d,type:h,...N}),f&&n("span",{className:"jkl-text-input__unit",children:f}),!c&&y&&i.cloneElement(y,{className:a("jkl-text-input-action-button",y.props.className)}),c&&!y&&n(s,{density:m,className:a("jkl-text-input-action-button",c.className),title:c.label,onClick:c.onClick,onFocus:c.onFocus,onBlur:c.onBlur,ref:c.buttonRef,type:c.type||"button",children:c.icon})]})}));l.displayName="BaseInputField";export{l as BaseTextInput};
 //# sourceMappingURL=BaseTextInput.js.map

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

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