npm - @fremtind/jokul - Versions diffs - 0.68.4 → 0.68.5 - Mend

@fremtind/jokul 0.68.4 → 0.68.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (406) hide show

package/build/cjs/components/file-input/File.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"File.cjs","sources":["../../../../src/components/file-input/File.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type ComponentProps,\n type FC,\n type MouseEvent,\n useId,\n} from \"react\";\nimport { IconButton } from \"../../components/icon-button/IconButton.js\";\nimport { SuccessIcon, TrashCanIcon } from \"../../components/icon/index.js\";\nimport { SupportLabel } from \"../../components/input-group/SupportLabel.js\";\nimport { formatBytes } from \"../../utilities/formatters/bytes/formatBytes.js\";\nimport { Thumbnail } from \"./internal/Thumbnail.js\";\nimport { useFileInputContext } from \"./internal/fileInputContext.js\";\nimport type { FileInputFileState } from \"./types.js\";\n\nexport type FileProps = {\n fileName: string;\n fileType: string;\n fileSize: number;\n path?: string;\n file?: File;\n supportLabel?: string;\n supportLabelType?: \"help\" \| \"error\" \| \"warning\" \| \"success\";\n state?: FileInputFileState;\n onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\n};\n\nexport const File: FC<FileProps & ComponentProps<\"div\">> = (props) => {\n const {\n children,\n className,\n fileName,\n fileType,\n fileSize,\n path,\n file,\n supportLabel,\n supportLabelType,\n state,\n onRemove,\n ...rest\n } = props;\n\n const id = `jkl-file-preview-${useId()}`;\n const supportId = `${id}-support`;\n\n const context = useFileInputContext();\n\n const Component = path ? \"a\" : \"div\";\n\n const hasErrorOrWarning =\n supportLabelType === \"error\" \|\| supportLabelType === \"warning\";\n const hasSuccess = supportLabelType === \"success\";\n\n const renderFeedbackElement = () => {\n if (!hasErrorOrWarning && !hasSuccess) {\n return (\n <SupportLabel\n className=\"jkl-file__support-label jkl-body\"\n id={supportId}\n label={supportLabel}\n labelType={supportLabelType}\n />\n );\n }\n\n if (hasSuccess)\n return (\n <SuccessIcon\n variant=\"small\"\n aria-label=\"Filen ble lastet opp uten feil\"\n aria-hidden={false}\n />\n );\n\n return null;\n };\n\n const fileComponent = (\n <div id={id} className={clsx(className, \"jkl-file\")} {...rest}>\n <Component\n className={clsx(\"jkl-file__content\", {\n \"jkl-file__content--error\": supportLabelType === \"error\",\n \"jkl-file__content--warning\":\n supportLabelType === \"warning\",\n })}\n href={path}\n target={path ? \"_blank\" : undefined}\n >\n <Thumbnail\n fileName={fileName}\n fileType={fileType}\n file={file}\n path={path}\n state={state}\n >\n {children}\n </Thumbnail>\n <div>\n <p className=\"jkl-file__name\">{fileName}</p>\n <p className=\"jkl-file__description\">\n <span>{formatBytes(fileSize)}</span>\n {renderFeedbackElement()}\n </p>\n {supportLabel && hasErrorOrWarning && (\n <SupportLabel\n className=\"jkl-file__support-label\"\n id={supportId}\n label={supportLabel}\n labelType={supportLabelType}\n />\n )}\n </div>\n </Component>\n {onRemove && (\n <IconButton\n className=\"jkl-file__delete\"\n onClick={onRemove}\n title={`Fjern ${fileName}`}\n >\n <TrashCanIcon />\n </IconButton>\n )}\n </div>\n );\n\n return context ? <li>{fileComponent}</li> : fileComponent;\n};\n"],"names":["props","children","className","fileName","fileType","fileSize","path","file","supportLabel","supportLabelType","state","onRemove","rest","id","useId","supportId","context","useFileInputContext","Component","hasErrorOrWarning","hasSuccess","fileComponent","jsxs","clsx","href","target","jsx","Thumbnail","formatBytes","SuccessIcon","variant","SupportLabel","label","labelType","IconButton","onClick","title","TrashCanIcon"],"mappings":"s7DA2B4DA,IAClD,MACFC,SAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,KAAAA,EACAC,KAAAA,EACAC,aAAAA,EACAC,iBAAAA,EACAC,MAAAA,EACAC,SAAAA,KACGC,GACHZ,EAEEa,EAAK,oBAAoBC,EAAAA,UACzBC,EAAY,GAAGF,YAEfG,EAAUC,EAAAA,sBAEVC,EAAYZ,EAAO,IAAM,MAEzBa,EACmB,UAArBV,GAAqD,YAArBA,EAC9BW,EAAkC,YAArBX,EA0BbY,EACDC,EAAAA,KAAA,MAAA,CAAIT,GAAAA,EAAQX,UAAWqB,OAAKrB,EAAW,eAAiBU,EACrDX,SAAA,CAAAqB,EAAAA,KAACJ,EAAA,CACGhB,UAAWqB,OAAK,oBAAqB,CACjC,2BAAiD,UAArBd,EAC5B,6BACyB,YAArBA,IAERe,KAAMlB,EACNmB,OAAQnB,EAAO,cAAW,EAE1BL,SAAA,CAAAyB,EAAAA,IAACC,EAAAA,UAAA,CACGxB,SAAAA,EACAC,SAAAA,EACAG,KAAAA,EACAD,KAAAA,EACAI,MAAAA,EAECT,SAAAA,WAEJ,MACG,CAAAA,SAAA,CAACyB,EAAAA,IAAA,IAAA,CAAExB,UAAU,iBAAkBD,SAASE,IACxCmB,EAAAA,KAAC,IAAE,CAAApB,UAAU,wBACTD,SAAA,CAACyB,EAAAA,IAAA,OAAA,CAAMzB,SAAY2B,EAAAA,YAAAvB,KA9C9Bc,GAAsBC,EAWvBA,EAEIM,EAAAA,IAACG,EAAAA,YAAA,CACGC,QAAQ,QACR,aAAW,iCACX,eAAa,IAIlB,KAlBCJ,EAAAA,IAACK,EAAAA,aAAA,CACG7B,UAAU,mCACVW,GAAIE,EACJiB,MAAOxB,EACPyB,UAAWxB,OA2CVD,GAAgBW,GACbO,EAAAA,IAACK,EAAAA,aAAA,CACG7B,UAAU,0BACVW,GAAIE,EACJiB,MAAOxB,EACPyB,UAAWxB,UAK1BE,GACGe,EAAAA,IAACQ,EAAAA,WAAA,CACGhC,UAAU,mBACViC,QAASxB,EACTyB,MAAO,SAASjC,IAEhBF,eAACoC,~~EAAaA~~,~~aAAA~~,~~SAM9B~~,OAAOrB,EAAUU,EAAAA,IAAC,KAAI,CAAAzB,SAAAoB,IAAsBA"}
1	+ {"version":3,"file":"File.cjs","sources":["../../../../src/components/file-input/File.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type ComponentProps,\n type FC,\n type MouseEvent,\n useId,\n} from \"react\";\nimport { IconButton } from \"../../components/icon-button/IconButton.js\";\nimport { SuccessIcon, TrashCanIcon } from \"../../components/icon/index.js\";\nimport { SupportLabel } from \"../../components/input-group/SupportLabel.js\";\nimport { formatBytes } from \"../../utilities/formatters/bytes/formatBytes.js\";\nimport { Thumbnail } from \"./internal/Thumbnail.js\";\nimport { useFileInputContext } from \"./internal/fileInputContext.js\";\nimport type { FileInputFileState } from \"./types.js\";\n\nexport type FileProps = {\n fileName: string;\n fileType: string;\n fileSize: number;\n path?: string;\n file?: File;\n supportLabel?: string;\n supportLabelType?: \"help\" \| \"error\" \| \"warning\" \| \"success\";\n state?: FileInputFileState;\n onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\n};\n\nexport const File: FC<FileProps & ComponentProps<\"div\">> = (props) => {\n const {\n children,\n className,\n fileName,\n fileType,\n fileSize,\n path,\n file,\n supportLabel,\n supportLabelType,\n state,\n onRemove,\n ...rest\n } = props;\n\n const id = `jkl-file-preview-${useId()}`;\n const supportId = `${id}-support`;\n\n const context = useFileInputContext();\n\n const Component = path ? \"a\" : \"div\";\n\n const hasErrorOrWarning =\n supportLabelType === \"error\" \|\| supportLabelType === \"warning\";\n const hasSuccess = supportLabelType === \"success\";\n\n const renderFeedbackElement = () => {\n if (!hasErrorOrWarning && !hasSuccess) {\n return (\n <SupportLabel\n className=\"jkl-file__support-label jkl-body\"\n id={supportId}\n label={supportLabel}\n labelType={supportLabelType}\n />\n );\n }\n\n if (hasSuccess)\n return (\n <SuccessIcon\n variant=\"small\"\n aria-label=\"Filen ble lastet opp uten feil\"\n aria-hidden={false}\n />\n );\n\n return null;\n };\n\n const fileComponent = (\n <div id={id} className={clsx(className, \"jkl-file\")} {...rest}>\n <Component\n className={clsx(\"jkl-file__content\", {\n \"jkl-file__content--error\": supportLabelType === \"error\",\n \"jkl-file__content--warning\":\n supportLabelType === \"warning\",\n })}\n href={path}\n target={path ? \"_blank\" : undefined}\n >\n <Thumbnail\n fileName={fileName}\n fileType={fileType}\n file={file}\n path={path}\n state={state}\n >\n {children}\n </Thumbnail>\n <div>\n <p className=\"jkl-file__name\">{fileName}</p>\n <p className=\"jkl-file__description\">\n <span>{formatBytes(fileSize)}</span>\n {renderFeedbackElement()}\n </p>\n {supportLabel && hasErrorOrWarning && (\n <SupportLabel\n className=\"jkl-file__support-label\"\n id={supportId}\n label={supportLabel}\n labelType={supportLabelType}\n />\n )}\n </div>\n </Component>\n {onRemove && (\n <IconButton\n className=\"jkl-file__delete\"\n onClick={onRemove}\n title={`Fjern ${fileName}`}\n >\n <TrashCanIcon />\n </IconButton>\n )}\n </div>\n );\n\n return context ? <li>{fileComponent}</li> : fileComponent;\n};\n"],"names":["props","children","className","fileName","fileType","fileSize","path","file","supportLabel","supportLabelType","state","onRemove","rest","id","useId","supportId","context","useFileInputContext","Component","hasErrorOrWarning","hasSuccess","fileComponent","jsxs","clsx","href","target","jsx","Thumbnail","formatBytes","SuccessIcon","variant","SupportLabel","label","labelType","IconButton","onClick","title","TrashCanIcon"],"mappings":"s7DA2B4DA,IAClD,MACFC,SAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,KAAAA,EACAC,KAAAA,EACAC,aAAAA,EACAC,iBAAAA,EACAC,MAAAA,EACAC,SAAAA,KACGC,GACHZ,EAEEa,EAAK,oBAAoBC,EAAAA,UACzBC,EAAY,GAAGF,YAEfG,EAAUC,EAAAA,sBAEVC,EAAYZ,EAAO,IAAM,MAEzBa,EACmB,UAArBV,GAAqD,YAArBA,EAC9BW,EAAkC,YAArBX,EA0BbY,EACDC,EAAAA,KAAA,MAAA,CAAIT,GAAAA,EAAQX,UAAWqB,OAAKrB,EAAW,eAAiBU,EACrDX,SAAA,CAAAqB,EAAAA,KAACJ,EAAA,CACGhB,UAAWqB,OAAK,oBAAqB,CACjC,2BAAiD,UAArBd,EAC5B,6BACyB,YAArBA,IAERe,KAAMlB,EACNmB,OAAQnB,EAAO,cAAW,EAE1BL,SAAA,CAAAyB,EAAAA,IAACC,EAAAA,UAAA,CACGxB,SAAAA,EACAC,SAAAA,EACAG,KAAAA,EACAD,KAAAA,EACAI,MAAAA,EAECT,SAAAA,WAEJ,MACG,CAAAA,SAAA,CAACyB,EAAAA,IAAA,IAAA,CAAExB,UAAU,iBAAkBD,SAASE,IACxCmB,EAAAA,KAAC,IAAE,CAAApB,UAAU,wBACTD,SAAA,CAACyB,EAAAA,IAAA,OAAA,CAAMzB,SAAY2B,EAAAA,YAAAvB,KA9C9Bc,GAAsBC,EAWvBA,EAEIM,EAAAA,IAACG,EAAAA,YAAA,CACGC,QAAQ,QACR,aAAW,iCACX,eAAa,IAIlB,KAlBCJ,EAAAA,IAACK,EAAAA,aAAA,CACG7B,UAAU,mCACVW,GAAIE,EACJiB,MAAOxB,EACPyB,UAAWxB,OA2CVD,GAAgBW,GACbO,EAAAA,IAACK,EAAAA,aAAA,CACG7B,UAAU,0BACVW,GAAIE,EACJiB,MAAOxB,EACPyB,UAAWxB,UAK1BE,GACGe,EAAAA,IAACQ,EAAAA,WAAA,CACGhC,UAAU,mBACViC,QAASxB,EACTyB,MAAO,SAASjC,IAEhBF,eAACoC,EAAAA,aAAa,CAAA,QAM9B,OAAOrB,EAAUU,EAAAA,IAAC,KAAI,CAAAzB,SAAAoB,IAAsBA"}

package/build/cjs/components/file-input/FileInput.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileInput.cjs","sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useId } from \"react\";\nimport { FieldGroup } from \"../../components/input-group/FieldGroup.js\";\nimport type { Density } from \"../../core/types.js\";\nimport type { FieldGroupProps } from \"../input-group/types.js\";\nimport { Dropzone } from \"./internal/Dropzone.js\";\nimport { Input } from \"./internal/Input.js\";\nimport { MaxSize } from \"./internal/MaxSize.js\";\nimport { FileInputContextProvider } from \"./internal/fileInputContext.js\";\nimport type { FileInputFile } from \"./types.js\";\n\nexport interface FileInputProps extends Omit<FieldGroupProps, \"onChange\"> {\n className?: string;\n id?: string;\n density?: Density;\n /*\n En string som begrenser hvilke filtyper som kan velges.\n \n Flere filtyper kan defineres som en kommaseparert liste.\n \n @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept\n /\n accept?: \"image/\" \| \".pdf\" \| \"image/,.pdf\" \| HTMLInputElement[\"accept\"];\n maxSizeBytes?: number;\n /\n @default true\n */\n multiple?: boolean;\n value: FileInputFile[];\n variant?: \"flexible\" \| \"small\";\n onChange: (\n e:\n \| React.ChangeEvent<HTMLInputElement>\n \| React.DragEvent<HTMLDivElement>,\n files: FileInputFile[],\n ) => void;\n}\n\nexport const FileInput = forwardRef<HTMLInputElement, FileInputProps>(\n (props, ref) => {\n const {\n accept,\n className,\n children,\n id,\n value,\n density,\n multiple = true,\n maxSizeBytes,\n onChange,\n variant,\n ...rest\n } = props;\n\n const hasFiles = value.length > 0;\n\n const maxSizeDescriptionId = useId();\n\n if (variant === \"small\") {\n return (\n <FileInputContextProvider\n context={{ accept, onChange, maxSizeBytes, files: value }}\n >\n <FieldGroup\n className={clsx(\n \"jkl-file-input\",\n \"jkl-file-input--small\",\n className,\n {\n \"jkl-file-input--has-files\": hasFiles,\n },\n )}\n data-layout-density={density ? density : \"compact\"}\n {...rest}\n >\n <Dropzone>\n <div className=\"jkl-file-input__call-to-action\">\n <Input\n id={id}\n label=\"Legg til fil\"\n multiple={multiple}\n ref={ref}\n aria-describedby={maxSizeDescriptionId}\n />\n </div>\n </Dropzone>\n <MaxSize id={maxSizeDescriptionId} />\n {value.length > 0 && (\n <ul className=\"jkl-file-input__files\">\n {children}\n </ul>\n )}\n </FieldGroup>\n </FileInputContextProvider>\n );\n }\n\n return (\n <FileInputContextProvider\n context={{ accept, onChange, maxSizeBytes, files: value }}\n >\n <FieldGroup\n className={clsx(\"jkl-file-input\", className, {\n \"jkl-file-input--has-files\": hasFiles,\n })}\n data-layout-density={density}\n {...rest}\n >\n <Dropzone>\n {value.length > 0 && (\n <ul className=\"jkl-file-input__files\">\n {children}\n </ul>\n )}\n <div className=\"jkl-file-input__call-to-action\">\n <Input\n id={id}\n label={\n multiple && hasFiles\n ? \"Legg til flere filer\"\n : \"Legg til fil\"\n }\n multiple={multiple}\n ref={ref}\n aria-describedby={maxSizeDescriptionId}\n />\n <MaxSize id={maxSizeDescriptionId} />\n </div>\n </Dropzone>\n </FieldGroup>\n </FileInputContextProvider>\n );\n },\n);\n\nFileInput.displayName = \"FileInput\";\n"],"names":["FileInput","forwardRef","props","ref","accept","className","children","id","value","density","multiple","maxSizeBytes","onChange","variant","rest","hasFiles","length","maxSizeDescriptionId","useId","jsx","FileInputContextProvider","context","files","jsxs","FieldGroup","clsx","Dropzone","Input","label","MaxSize","displayName"],"mappings":"mXAsCaA,EAAYC,EAAAA,YACrB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,GAAAA,EACAC,MAAAA,EACAC,QAAAA,EACAC,SAAAA,GAAW,EACXC,aAAAA,EACAC,SAAAA,EACAC,QAAAA,KACGC,GACHZ,EAEEa,EAAWP,EAAMQ,OAAS,EAE1BC,EAAuBC,EAAAA,QAE7B,MAAgB,UAAZL,EAEIM,EAAAA,IAACC,EAAAA,yBAAA,CACGC,QAAS,CAAEjB,OAAAA,EAAQQ,SAAAA,EAAUD,aAAAA,EAAcW,MAAOd,GAElDF,SAAAiB,EAAAA,KAACC,EAAAA,WAAA,CACGnB,UAAWoB,EAAAA,KACP,iBACA,wBACApB,EACA,CACI,4BAA6BU,IAGrC,sBAAqBN,GAAoB,aACrCK,EAEJR,SAAA,CAAAa,MAACO,EAAAA,SACG,CAAApB,SAAAa,EAAAA,IAAC,MAAI,CAAAd,UAAU,iCACXC,SAAAa,EAAAA,IAACQ,EAAAA,MAAA,CACGpB,GAAAA,EACAqB,MAAM,eACNlB,SAAAA,EACAP,IAAAA,EACA,mBAAkBc,QAI9BE,EAAAA,IAACU,EAAQA,QAAA,CAAAtB,GAAIU,IACZT,EAAMQ,OAAS,SACX,KAAG,CAAAX,UAAU,wBACTC,SAAAA,SASrBa,EAAAA,IAACC,EAAAA,yBAAA,CACGC,QAAS,CAAEjB,OAAAA,EAAQQ,SAAAA,EAAUD,aAAAA,EAAcW,MAAOd,GAElDF,SAAAa,EAAAA,IAACK,EAAAA,WAAA,CACGnB,UAAWoB,EAAAA,KAAK,iBAAkBpB,EAAW,CACzC,4BAA6BU,IAEjC,sBAAqBN,KACjBK,EAEJR,gBAACoB,WACI,CAAApB,SAAA,CAAAE,EAAMQ,OAAS,GACZG,EAAAA,IAAC,KAAG,CAAAd,UAAU,wBACTC,SAAAA,IAGTiB,EAAAA,KAAC,MAAI,CAAAlB,UAAU,iCACXC,SAAA,CAAAa,EAAAA,IAACQ,EAAAA,MAAA,CACGpB,GAAAA,EACAqB,MACIlB,GAAYK,EACN,uBACA,eAEVL,SAAAA,EACAP,IAAAA,EACA,mBAAkBc,IAEtBE,EAAAA,IAACU,EAAQA,QAAA,CAAAtB,GAAIU,~~aAGzB~~,~~IAMhBjB~~,EAAU8B,YAAc"}
1	+ {"version":3,"file":"FileInput.cjs","sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useId } from \"react\";\nimport { FieldGroup } from \"../../components/input-group/FieldGroup.js\";\nimport type { Density } from \"../../core/types.js\";\nimport type { FieldGroupProps } from \"../input-group/types.js\";\nimport { Dropzone } from \"./internal/Dropzone.js\";\nimport { Input } from \"./internal/Input.js\";\nimport { MaxSize } from \"./internal/MaxSize.js\";\nimport { FileInputContextProvider } from \"./internal/fileInputContext.js\";\nimport type { FileInputFile } from \"./types.js\";\n\nexport interface FileInputProps extends Omit<FieldGroupProps, \"onChange\"> {\n className?: string;\n id?: string;\n density?: Density;\n /*\n En string som begrenser hvilke filtyper som kan velges.\n \n Flere filtyper kan defineres som en kommaseparert liste.\n \n @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept\n /\n accept?: \"image/\" \| \".pdf\" \| \"image/,.pdf\" \| HTMLInputElement[\"accept\"];\n maxSizeBytes?: number;\n /\n @default true\n */\n multiple?: boolean;\n value: FileInputFile[];\n variant?: \"flexible\" \| \"small\";\n onChange: (\n e:\n \| React.ChangeEvent<HTMLInputElement>\n \| React.DragEvent<HTMLDivElement>,\n files: FileInputFile[],\n ) => void;\n}\n\nexport const FileInput = forwardRef<HTMLInputElement, FileInputProps>(\n (props, ref) => {\n const {\n accept,\n className,\n children,\n id,\n value,\n density,\n multiple = true,\n maxSizeBytes,\n onChange,\n variant,\n ...rest\n } = props;\n\n const hasFiles = value.length > 0;\n\n const maxSizeDescriptionId = useId();\n\n if (variant === \"small\") {\n return (\n <FileInputContextProvider\n context={{ accept, onChange, maxSizeBytes, files: value }}\n >\n <FieldGroup\n className={clsx(\n \"jkl-file-input\",\n \"jkl-file-input--small\",\n className,\n {\n \"jkl-file-input--has-files\": hasFiles,\n },\n )}\n data-layout-density={density ? density : \"compact\"}\n {...rest}\n >\n <Dropzone>\n <div className=\"jkl-file-input__call-to-action\">\n <Input\n id={id}\n label=\"Legg til fil\"\n multiple={multiple}\n ref={ref}\n aria-describedby={maxSizeDescriptionId}\n />\n </div>\n </Dropzone>\n <MaxSize id={maxSizeDescriptionId} />\n {value.length > 0 && (\n <ul className=\"jkl-file-input__files\">\n {children}\n </ul>\n )}\n </FieldGroup>\n </FileInputContextProvider>\n );\n }\n\n return (\n <FileInputContextProvider\n context={{ accept, onChange, maxSizeBytes, files: value }}\n >\n <FieldGroup\n className={clsx(\"jkl-file-input\", className, {\n \"jkl-file-input--has-files\": hasFiles,\n })}\n data-layout-density={density}\n {...rest}\n >\n <Dropzone>\n {value.length > 0 && (\n <ul className=\"jkl-file-input__files\">\n {children}\n </ul>\n )}\n <div className=\"jkl-file-input__call-to-action\">\n <Input\n id={id}\n label={\n multiple && hasFiles\n ? \"Legg til flere filer\"\n : \"Legg til fil\"\n }\n multiple={multiple}\n ref={ref}\n aria-describedby={maxSizeDescriptionId}\n />\n <MaxSize id={maxSizeDescriptionId} />\n </div>\n </Dropzone>\n </FieldGroup>\n </FileInputContextProvider>\n );\n },\n);\n\nFileInput.displayName = \"FileInput\";\n"],"names":["FileInput","forwardRef","props","ref","accept","className","children","id","value","density","multiple","maxSizeBytes","onChange","variant","rest","hasFiles","length","maxSizeDescriptionId","useId","jsx","FileInputContextProvider","context","files","jsxs","FieldGroup","clsx","Dropzone","Input","label","MaxSize","displayName"],"mappings":"mXAsCaA,EAAYC,EAAAA,YACrB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,GAAAA,EACAC,MAAAA,EACAC,QAAAA,EACAC,SAAAA,GAAW,EACXC,aAAAA,EACAC,SAAAA,EACAC,QAAAA,KACGC,GACHZ,EAEEa,EAAWP,EAAMQ,OAAS,EAE1BC,EAAuBC,EAAAA,QAE7B,MAAgB,UAAZL,EAEIM,EAAAA,IAACC,EAAAA,yBAAA,CACGC,QAAS,CAAEjB,OAAAA,EAAQQ,SAAAA,EAAUD,aAAAA,EAAcW,MAAOd,GAElDF,SAAAiB,EAAAA,KAACC,EAAAA,WAAA,CACGnB,UAAWoB,EAAAA,KACP,iBACA,wBACApB,EACA,CACI,4BAA6BU,IAGrC,sBAAqBN,GAAoB,aACrCK,EAEJR,SAAA,CAAAa,MAACO,EAAAA,SACG,CAAApB,SAAAa,EAAAA,IAAC,MAAI,CAAAd,UAAU,iCACXC,SAAAa,EAAAA,IAACQ,EAAAA,MAAA,CACGpB,GAAAA,EACAqB,MAAM,eACNlB,SAAAA,EACAP,IAAAA,EACA,mBAAkBc,QAI9BE,EAAAA,IAACU,EAAQA,QAAA,CAAAtB,GAAIU,IACZT,EAAMQ,OAAS,SACX,KAAG,CAAAX,UAAU,wBACTC,SAAAA,SASrBa,EAAAA,IAACC,EAAAA,yBAAA,CACGC,QAAS,CAAEjB,OAAAA,EAAQQ,SAAAA,EAAUD,aAAAA,EAAcW,MAAOd,GAElDF,SAAAa,EAAAA,IAACK,EAAAA,WAAA,CACGnB,UAAWoB,EAAAA,KAAK,iBAAkBpB,EAAW,CACzC,4BAA6BU,IAEjC,sBAAqBN,KACjBK,EAEJR,gBAACoB,WACI,CAAApB,SAAA,CAAAE,EAAMQ,OAAS,GACZG,EAAAA,IAAC,KAAG,CAAAd,UAAU,wBACTC,SAAAA,IAGTiB,EAAAA,KAAC,MAAI,CAAAlB,UAAU,iCACXC,SAAA,CAAAa,EAAAA,IAACQ,EAAAA,MAAA,CACGpB,GAAAA,EACAqB,MACIlB,GAAYK,EACN,uBACA,eAEVL,SAAAA,EACAP,IAAAA,EACA,mBAAkBc,IAEtBE,EAAAA,IAACU,EAAQA,QAAA,CAAAtB,GAAIU,aAI7B,IAKZjB,EAAU8B,YAAc"}

package/build/cjs/components/file-input/internal/Dropzone.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dropzone.cjs","sources":["../../../../../src/components/file-input/internal/Dropzone.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useState } from \"react\";\nimport type { WithChildren } from \"../../../core/types.js\";\nimport type { FileInputFile } from \"../types.js\";\nimport { useFileInputContext } from \"./fileInputContext.js\";\nimport { validateFile } from \"./validateFile.js\";\n\ninterface DropzoneProps extends WithChildren {}\n\nexport const Dropzone = forwardRef<HTMLDivElement, DropzoneProps>(\n (props, ref) => {\n const { children, ...rest } = props;\n const [onDragClassName, setOnDragClassName] = useState<string>(\"\");\n\n const context = useFileInputContext();\n if (!context) {\n return (\n <p>\n Dropzone must be placed inside a FileInputContextProvider.\n </p>\n );\n }\n const { maxSizeBytes, accept, onChange } = context;\n\n return (\n <div\n {...rest}\n ref={ref}\n className={clsx(\"jkl-file-input__dropzone\", onDragClassName)}\n onDragEnter={(e) => {\n setOnDragClassName(\"jkl-file-input__dropzone--enter\");\n e.preventDefault();\n }}\n onDragOver={(e) => {\n /* Prevent browser from opening file in a new tab */\n setOnDragClassName(\"jkl-file-input__dropzone--enter\");\n e.preventDefault();\n }}\n onDrop={(e) => {\n e.preventDefault();\n setOnDragClassName(\"\");\n\n if (e.dataTransfer.files) {\n onChange(\n e,\n [...e.dataTransfer.files].map<FileInputFile>(\n (file) => ({\n file,\n state: \"SELECTED\",\n validation: validateFile(\n file,\n accept,\n maxSizeBytes,\n ),\n uploadProgress: 0,\n }),\n ),\n );\n }\n }}\n onDragLeave={(e) => {\n setOnDragClassName(\"\");\n e.preventDefault();\n }}\n >\n {children}\n </div>\n );\n },\n);\n\nDropzone.displayName = \"Dropzone\";\n"],"names":["Dropzone","forwardRef","props","ref","children","rest","onDragClassName","setOnDragClassName","useState","context","useFileInputContext","jsx","maxSizeBytes","accept","onChange","className","clsx","onDragEnter","e","preventDefault","onDragOver","onDrop","dataTransfer","files","map","file","state","validation","validateFile","uploadProgress","onDragLeave","displayName"],"mappings":"uPASaA,EAAWC,EAAAA,YACpB,CAACC,EAAOC,KACJ,MAAQC,SAAAA,KAAaC,GAASH,GACvBI,EAAiBC,GAAsBC,~~WAAiB~~,IAEzDC,EAAUC,EAAAA,sBAChB,IAAKD,EAEG,OAAAE,EAAAA,IAAC,KAAEP,SAEH,+DAGR,MAAQQ,aAAAA,EAAcC,OAAAA,EAAQC,SAAAA,GAAaL,EAGvC,OAAAE,EAAAA,IAAC,MAAA,IACON,EACJF,IAAAA,EACAY,UAAWC,EAAAA,KAAK,2BAA4BV,GAC5CW,YAAcC,IACVX,EAAmB,mCACnBW,EAAEC,gBAAe,EAErBC,WAAaF,IAETX,EAAmB,mCACnBW,EAAEC,gBAAe,EAErBE,OAASH,IACLA,EAAEC,iBACFZ,EAAmB,IAEfW,EAAEI,aAAaC,OACfT,EACII,EACA,IAAIA,EAAEI,aAAaC,OAAOC,KACrBC,IAAAA,CACGA,KAAAA,EACAC,MAAO,WACPC,WAAYC,EAAAA,aACRH,EACAZ,EACAD,GAEJiB,eAAgB,~~MAExB~~,~~EAIZC~~,YAAcZ,IACVX,EAAmB,IACnBW,EAAEC,gBAAe,EAGpBf,SAAAA,~~GAAA~~,~~IAMjBJ~~,EAAS+B,YAAc"}
1	+ {"version":3,"file":"Dropzone.cjs","sources":["../../../../../src/components/file-input/internal/Dropzone.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useState } from \"react\";\nimport type { WithChildren } from \"../../../core/types.js\";\nimport type { FileInputFile } from \"../types.js\";\nimport { useFileInputContext } from \"./fileInputContext.js\";\nimport { validateFile } from \"./validateFile.js\";\n\ninterface DropzoneProps extends WithChildren {}\n\nexport const Dropzone = forwardRef<HTMLDivElement, DropzoneProps>(\n (props, ref) => {\n const { children, ...rest } = props;\n const [onDragClassName, setOnDragClassName] = useState<string>(\"\");\n\n const context = useFileInputContext();\n if (!context) {\n return (\n <p>\n Dropzone must be placed inside a FileInputContextProvider.\n </p>\n );\n }\n const { maxSizeBytes, accept, onChange } = context;\n\n return (\n <div\n {...rest}\n ref={ref}\n className={clsx(\"jkl-file-input__dropzone\", onDragClassName)}\n onDragEnter={(e) => {\n setOnDragClassName(\"jkl-file-input__dropzone--enter\");\n e.preventDefault();\n }}\n onDragOver={(e) => {\n /* Prevent browser from opening file in a new tab */\n setOnDragClassName(\"jkl-file-input__dropzone--enter\");\n e.preventDefault();\n }}\n onDrop={(e) => {\n e.preventDefault();\n setOnDragClassName(\"\");\n\n if (e.dataTransfer.files) {\n onChange(\n e,\n [...e.dataTransfer.files].map<FileInputFile>(\n (file) => ({\n file,\n state: \"SELECTED\",\n validation: validateFile(\n file,\n accept,\n maxSizeBytes,\n ),\n uploadProgress: 0,\n }),\n ),\n );\n }\n }}\n onDragLeave={(e) => {\n setOnDragClassName(\"\");\n e.preventDefault();\n }}\n >\n {children}\n </div>\n );\n },\n);\n\nDropzone.displayName = \"Dropzone\";\n"],"names":["Dropzone","forwardRef","props","ref","children","rest","onDragClassName","setOnDragClassName","useState","context","useFileInputContext","jsx","maxSizeBytes","accept","onChange","className","clsx","onDragEnter","e","preventDefault","onDragOver","onDrop","dataTransfer","files","map","file","state","validation","validateFile","uploadProgress","onDragLeave","displayName"],"mappings":"uPASaA,EAAWC,EAAAA,YACpB,CAACC,EAAOC,KACJ,MAAQC,SAAAA,KAAaC,GAASH,GACvBI,EAAiBC,GAAsBC,EAAAA,SAAiB,IAEzDC,EAAUC,EAAAA,sBAChB,IAAKD,EAEG,OAAAE,EAAAA,IAAC,KAAEP,SAEH,+DAGR,MAAQQ,aAAAA,EAAcC,OAAAA,EAAQC,SAAAA,GAAaL,EAGvC,OAAAE,EAAAA,IAAC,MAAA,IACON,EACJF,IAAAA,EACAY,UAAWC,EAAAA,KAAK,2BAA4BV,GAC5CW,YAAcC,IACVX,EAAmB,mCACnBW,EAAEC,gBAAe,EAErBC,WAAaF,IAETX,EAAmB,mCACnBW,EAAEC,gBAAe,EAErBE,OAASH,IACLA,EAAEC,iBACFZ,EAAmB,IAEfW,EAAEI,aAAaC,OACfT,EACII,EACA,IAAIA,EAAEI,aAAaC,OAAOC,KACrBC,IAAAA,CACGA,KAAAA,EACAC,MAAO,WACPC,WAAYC,EAAAA,aACRH,EACAZ,EACAD,GAEJiB,eAAgB,MAG5B,EAGRC,YAAcZ,IACVX,EAAmB,IACnBW,EAAEC,gBAAe,EAGpBf,SAAAA,GACL,IAKZJ,EAAS+B,YAAc"}

package/build/cjs/components/file-input/internal/Input.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.cjs","sources":["../../../../../src/components/file-input/internal/Input.tsx"],"sourcesContent":["import React, { forwardRef, useId } from \"react\";\nimport type { FileInputFile } from \"../types.js\";\nimport { useFileInputContext } from \"./fileInputContext.js\";\nimport { validateFile } from \"./validateFile.js\";\n\ninterface FileInputProps {\n id?: string;\n label: string;\n multiple: boolean;\n}\n\nexport const Input = forwardRef<HTMLInputElement, FileInputProps>(\n (props, ref) => {\n const { multiple, id, label, ...rest } = props;\n\n const defaultId = useId();\n\n const maxSizeDescriptionId = `${id}-description`;\n const descriptor = multiple ? \"filer\" : \"fil\";\n\n const context = useFileInputContext();\n if (!context) {\n return (\n <p>Input must be placed inside a FileInputContextProvider.</p>\n );\n }\n const { accept, maxSizeBytes, onChange } = context;\n\n const elementId = id \|\| defaultId;\n\n return (\n <>\n <label\n className=\"jkl-button jkl-button--secondary\"\n htmlFor={elementId}\n id={`${elementId}__add-btn`}\n >\n {label}\n </label>\n <input\n {...rest}\n ref={ref}\n id={elementId}\n accept={accept}\n aria-describedby={\n maxSizeBytes ? maxSizeDescriptionId : undefined\n }\n className=\"jkl-sr-only\"\n type=\"file\"\n multiple={multiple}\n value=\"\"\n onChange={(e) => {\n if (e.target.files) {\n onChange(\n e,\n [...e.target.files].map<FileInputFile>(\n (file) => ({\n file,\n state: \"SELECTED\",\n validation: validateFile(\n file,\n accept,\n maxSizeBytes,\n ),\n uploadProgress: 0,\n }),\n ),\n );\n }\n }}\n />\n <p className=\"jkl-file-input__dropzone-hint\">\n eller slipp {descriptor} her\n </p>{\" \"}\n </>\n );\n },\n);\n\nInput.displayName = \"Input\";\n"],"names":["Input","forwardRef","props","ref","multiple","id","label","rest","defaultId","useId","maxSizeDescriptionId","descriptor","context","useFileInputContext","jsx","children","accept","maxSizeBytes","onChange","elementId","jsxs","Fragment","className","htmlFor","type","value","e","target","files","map","file","state","validation","validateFile","uploadProgress","displayName"],"mappings":"4MAWaA,EAAQC,EAAAA,YACjB,CAACC,EAAOC,KACJ,MAAQC,SAAAA,EAAUC,GAAAA,EAAIC,MAAAA,KAAUC,GAASL,EAEnCM,EAAYC,EAAAA,QAEZC,EAAuB,GAAGL,gBAC1BM,EAAaP,EAAW,QAAU,MAElCQ,EAAUC,EAAAA,sBAChB,IAAKD,EAEG,OAAAE,EAAAA,IAAC,KAAEC,SAAuD,4DAGlE,MAAQC,OAAAA,EAAQC,aAAAA,EAAcC,SAAAA,GAAaN,EAErCO,EAAYd,GAAMG,EAExB,OAEQY,EAAAA,KAAAC,WAAA,CAAAN,SAAA,CAAAD,EAAAA,IAAC,QAAA,CACGQ,UAAU,mCACVC,QAASJ,EACTd,GAAI,GAAGc,aAENJ,SAAAT,IAELQ,EAAAA,IAAC,QAAA,IACOP,EACJJ,IAAAA,EACAE,GAAIc,EACJH,OAAAA,EACA,mBACIC,EAAeP,OAAuB,EAE1CY,UAAU,cACVE,KAAK,OACLpB,SAAAA,EACAqB,MAAM,GACNP,SAAWQ,IACHA,EAAEC,OAAOC,OACTV,EACIQ,EACA,IAAIA,EAAEC,OAAOC,OAAOC,KACfC,KACGA,KAAAA,EACAC,MAAO,WACPC,WAAYC,EAAAA,aACRH,EACAd,EACAC,GAEJiB,eAAgB,~~MAExB~~,~~IAKhBd~~,EAAAA,KAAC,IAAE,CAAAE,UAAU,gCAAgCP,SAAA,CAAA,eAC5BJ,EAAW,UACvB,MACT,IAKZX,EAAMmC,YAAc"}
1	+ {"version":3,"file":"Input.cjs","sources":["../../../../../src/components/file-input/internal/Input.tsx"],"sourcesContent":["import React, { forwardRef, useId } from \"react\";\nimport type { FileInputFile } from \"../types.js\";\nimport { useFileInputContext } from \"./fileInputContext.js\";\nimport { validateFile } from \"./validateFile.js\";\n\ninterface FileInputProps {\n id?: string;\n label: string;\n multiple: boolean;\n}\n\nexport const Input = forwardRef<HTMLInputElement, FileInputProps>(\n (props, ref) => {\n const { multiple, id, label, ...rest } = props;\n\n const defaultId = useId();\n\n const maxSizeDescriptionId = `${id}-description`;\n const descriptor = multiple ? \"filer\" : \"fil\";\n\n const context = useFileInputContext();\n if (!context) {\n return (\n <p>Input must be placed inside a FileInputContextProvider.</p>\n );\n }\n const { accept, maxSizeBytes, onChange } = context;\n\n const elementId = id \|\| defaultId;\n\n return (\n <>\n <label\n className=\"jkl-button jkl-button--secondary\"\n htmlFor={elementId}\n id={`${elementId}__add-btn`}\n >\n {label}\n </label>\n <input\n {...rest}\n ref={ref}\n id={elementId}\n accept={accept}\n aria-describedby={\n maxSizeBytes ? maxSizeDescriptionId : undefined\n }\n className=\"jkl-sr-only\"\n type=\"file\"\n multiple={multiple}\n value=\"\"\n onChange={(e) => {\n if (e.target.files) {\n onChange(\n e,\n [...e.target.files].map<FileInputFile>(\n (file) => ({\n file,\n state: \"SELECTED\",\n validation: validateFile(\n file,\n accept,\n maxSizeBytes,\n ),\n uploadProgress: 0,\n }),\n ),\n );\n }\n }}\n />\n <p className=\"jkl-file-input__dropzone-hint\">\n eller slipp {descriptor} her\n </p>{\" \"}\n </>\n );\n },\n);\n\nInput.displayName = \"Input\";\n"],"names":["Input","forwardRef","props","ref","multiple","id","label","rest","defaultId","useId","maxSizeDescriptionId","descriptor","context","useFileInputContext","jsx","children","accept","maxSizeBytes","onChange","elementId","jsxs","Fragment","className","htmlFor","type","value","e","target","files","map","file","state","validation","validateFile","uploadProgress","displayName"],"mappings":"4MAWaA,EAAQC,EAAAA,YACjB,CAACC,EAAOC,KACJ,MAAQC,SAAAA,EAAUC,GAAAA,EAAIC,MAAAA,KAAUC,GAASL,EAEnCM,EAAYC,EAAAA,QAEZC,EAAuB,GAAGL,gBAC1BM,EAAaP,EAAW,QAAU,MAElCQ,EAAUC,EAAAA,sBAChB,IAAKD,EAEG,OAAAE,EAAAA,IAAC,KAAEC,SAAuD,4DAGlE,MAAQC,OAAAA,EAAQC,aAAAA,EAAcC,SAAAA,GAAaN,EAErCO,EAAYd,GAAMG,EAExB,OAEQY,EAAAA,KAAAC,WAAA,CAAAN,SAAA,CAAAD,EAAAA,IAAC,QAAA,CACGQ,UAAU,mCACVC,QAASJ,EACTd,GAAI,GAAGc,aAENJ,SAAAT,IAELQ,EAAAA,IAAC,QAAA,IACOP,EACJJ,IAAAA,EACAE,GAAIc,EACJH,OAAAA,EACA,mBACIC,EAAeP,OAAuB,EAE1CY,UAAU,cACVE,KAAK,OACLpB,SAAAA,EACAqB,MAAM,GACNP,SAAWQ,IACHA,EAAEC,OAAOC,OACTV,EACIQ,EACA,IAAIA,EAAEC,OAAOC,OAAOC,KACfC,KACGA,KAAAA,EACAC,MAAO,WACPC,WAAYC,EAAAA,aACRH,EACAd,EACAC,GAEJiB,eAAgB,MAG5B,IAIZd,EAAAA,KAAC,IAAE,CAAAE,UAAU,gCAAgCP,SAAA,CAAA,eAC5BJ,EAAW,UACvB,MACT,IAKZX,EAAMmC,YAAc"}

package/build/cjs/components/file-input/internal/fileInputContext.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fileInputContext.cjs","sources":["../../../../../src/components/file-input/internal/fileInputContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\nimport type { WithChildren } from \"../../../core/types.js\";\nimport type { FileInputFile } from \"../types.js\";\n\ntype FileInputContext = {\n accept?: \"image/\" \| \".pdf\" \| \"image/,.pdf\" \| HTMLInputElement[\"accept\"];\n maxSizeBytes?: number;\n files: FileInputFile[];\n onChange: (\n e:\n \| React.ChangeEvent<HTMLInputElement>\n \| React.DragEvent<HTMLDivElement>,\n files: FileInputFile[],\n ) => void;\n};\n\nconst fileInputContext = createContext<FileInputContext \| null>(null);\n\nexport const useFileInputContext = (): FileInputContext \| null =>\n useContext(fileInputContext);\n\nexport interface FileInputContextProviderProps extends WithChildren {\n context: FileInputContext;\n}\n\nexport const FileInputContextProvider: React.FC<\n FileInputContextProviderProps\n> = ({ context, children }) => (\n <fileInputContext.Provider value={context}>\n {children}\n </fileInputContext.Provider>\n);\n"],"names":["fileInputContext","createContext","context","children","jsx","Provider","value","useContext"],"mappings":"wIAgBMA,EAAmBC,~~EAAAA~~,~~cAAuC,~~uCAW5D,EAAGC,QAAAA,EAASC,SAAAA,KACXC,EAAAA,IAAAJ,EAAiBK,SAAjB,CAA0BC,MAAOJ,EAC7BC,SAAAA,gCAX0B,IAC/BI,EAAAA,WAAWP"}
1	+ {"version":3,"file":"fileInputContext.cjs","sources":["../../../../../src/components/file-input/internal/fileInputContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\nimport type { WithChildren } from \"../../../core/types.js\";\nimport type { FileInputFile } from \"../types.js\";\n\ntype FileInputContext = {\n accept?: \"image/\" \| \".pdf\" \| \"image/,.pdf\" \| HTMLInputElement[\"accept\"];\n maxSizeBytes?: number;\n files: FileInputFile[];\n onChange: (\n e:\n \| React.ChangeEvent<HTMLInputElement>\n \| React.DragEvent<HTMLDivElement>,\n files: FileInputFile[],\n ) => void;\n};\n\nconst fileInputContext = createContext<FileInputContext \| null>(null);\n\nexport const useFileInputContext = (): FileInputContext \| null =>\n useContext(fileInputContext);\n\nexport interface FileInputContextProviderProps extends WithChildren {\n context: FileInputContext;\n}\n\nexport const FileInputContextProvider: React.FC<\n FileInputContextProviderProps\n> = ({ context, children }) => (\n <fileInputContext.Provider value={context}>\n {children}\n </fileInputContext.Provider>\n);\n"],"names":["fileInputContext","createContext","context","children","jsx","Provider","value","useContext"],"mappings":"wIAgBMA,EAAmBC,gBAAuC,uCAW5D,EAAGC,QAAAA,EAASC,SAAAA,KACXC,EAAAA,IAAAJ,EAAiBK,SAAjB,CAA0BC,MAAOJ,EAC7BC,SAAAA,gCAX0B,IAC/BI,EAAAA,WAAWP"}

package/build/cjs/components/file-input/internal/validateFile.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"validateFile.cjs","sources":["../../../../../src/components/file-input/internal/validateFile.ts"],"sourcesContent":["import { formatBytes } from \"../../../utilities/formatters/bytes/formatBytes.js\";\nimport type { FileInputFileValidation } from \"../types.js\";\n\nexport function validateFile(\n file: File,\n accept = \"\",\n maxSizeBytes?: number,\n): FileInputFileValidation \| undefined {\n const acceptStrings = accept\n .split(\",\")\n .map((s) => s.toLowerCase())\n .map((s) => s.replaceAll(\"*\", \"\"))\n .map((s) => s.trim());\n\n let isValidFormat = acceptStrings.length === 0;\n\n isValidFormat = acceptStrings.some(\n (acceptString) =>\n file.type.toLowerCase().includes(acceptString) \|\|\n file.name.toLowerCase().endsWith(acceptString),\n );\n\n if (!isValidFormat) {\n return {\n type: \"WRONG_TYPE\",\n message: `Filtypen ${file.name?.split(\".\")[1] \|\| \"\"} støttes ikke`,\n };\n }\n\n if (typeof maxSizeBytes !== \"undefined\" && file.size > maxSizeBytes) {\n return {\n type: \"TOO_LARGE\",\n message: `Filen er ${formatBytes(\n file.size,\n )}, men kan maksimalt være ${formatBytes(maxSizeBytes)}`,\n };\n }\n\n return undefined;\n}\n"],"names":["file","accept","maxSizeBytes","acceptStrings","split","map","s","toLowerCase","replaceAll","trim","isValidFormat","length","some","acceptString","type","includes","name","endsWith","size","message","formatBytes","_a"],"mappings":"4KAGO,SACHA,EACAC,EAAS,GACTC,SAEM,MAAAC,EAAgBF,EACjBG,MAAM,KACNC,KAAKC,GAAMA,EAAEC,gBACbF,KAAKC,GAAMA,EAAEE,WAAW,IAAK,MAC7BH,KAAKC,GAAMA,EAAEG,SAEd,IAAAC,EAAyC,IAAzBP,EAAcQ,OAQlC,OANAD,EAAgBP,EAAcS,MACzBC,GACGb,EAAKc,KAAKP,cAAcQ,SAASF,IACjCb,EAAKgB,KAAKT,cAAcU,SAASJ,KAGpCH,SAOMR,EAAiB,KAAeF,EAAKkB,KAAOhB,EAC5C,CACHY,KAAM,YACNK,QAAS,YAAYC,EAAAA,YACjBpB,EAAKkB,iCACoBE,~~EAAAA~~,~~YAAYlB,~~WALjD,EANW,CACHY,KAAM,aACNK,QAAS,aAAY,OAAAE,EAAArB,EAAKgB,WAALK,EAAAA,EAAWjB,MAAM,KAAK,KAAM,kBAc7D"}
1	+ {"version":3,"file":"validateFile.cjs","sources":["../../../../../src/components/file-input/internal/validateFile.ts"],"sourcesContent":["import { formatBytes } from \"../../../utilities/formatters/bytes/formatBytes.js\";\nimport type { FileInputFileValidation } from \"../types.js\";\n\nexport function validateFile(\n file: File,\n accept = \"\",\n maxSizeBytes?: number,\n): FileInputFileValidation \| undefined {\n const acceptStrings = accept\n .split(\",\")\n .map((s) => s.toLowerCase())\n .map((s) => s.replaceAll(\"*\", \"\"))\n .map((s) => s.trim());\n\n let isValidFormat = acceptStrings.length === 0;\n\n isValidFormat = acceptStrings.some(\n (acceptString) =>\n file.type.toLowerCase().includes(acceptString) \|\|\n file.name.toLowerCase().endsWith(acceptString),\n );\n\n if (!isValidFormat) {\n return {\n type: \"WRONG_TYPE\",\n message: `Filtypen ${file.name?.split(\".\")[1] \|\| \"\"} støttes ikke`,\n };\n }\n\n if (typeof maxSizeBytes !== \"undefined\" && file.size > maxSizeBytes) {\n return {\n type: \"TOO_LARGE\",\n message: `Filen er ${formatBytes(\n file.size,\n )}, men kan maksimalt være ${formatBytes(maxSizeBytes)}`,\n };\n }\n\n return undefined;\n}\n"],"names":["file","accept","maxSizeBytes","acceptStrings","split","map","s","toLowerCase","replaceAll","trim","isValidFormat","length","some","acceptString","type","includes","name","endsWith","size","message","formatBytes","_a"],"mappings":"4KAGO,SACHA,EACAC,EAAS,GACTC,SAEM,MAAAC,EAAgBF,EACjBG,MAAM,KACNC,KAAKC,GAAMA,EAAEC,gBACbF,KAAKC,GAAMA,EAAEE,WAAW,IAAK,MAC7BH,KAAKC,GAAMA,EAAEG,SAEd,IAAAC,EAAyC,IAAzBP,EAAcQ,OAQlC,OANAD,EAAgBP,EAAcS,MACzBC,GACGb,EAAKc,KAAKP,cAAcQ,SAASF,IACjCb,EAAKgB,KAAKT,cAAcU,SAASJ,KAGpCH,SAOMR,EAAiB,KAAeF,EAAKkB,KAAOhB,EAC5C,CACHY,KAAM,YACNK,QAAS,YAAYC,EAAAA,YACjBpB,EAAKkB,iCACoBE,cAAYlB,WALjD,EANW,CACHY,KAAM,aACNK,QAAS,aAAY,OAAAE,EAAArB,EAAKgB,WAALK,EAAAA,EAAWjB,MAAM,KAAK,KAAM,kBAc7D"}

package/build/cjs/components/file-input/stories/FileInput.stories.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileInput.stories.cjs","sources":["../../../../../src/components/file-input/stories/FileInput.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from \"@storybook/react\";\nimport React, {useState} from \"react\";\nimport \"../styles/_index.scss\";\nimport {formatBytes} from \"../../../utilities/index.js\";\nimport {Button, PrimaryButton} from \"../../button/index.js\";\nimport type {SupportLabelType} from \"../../input-group/index.js\";\nimport {File} from \"../File.js\";\nimport {FileInput} from \"../FileInput.js\";\nimport {Dropzone} from \"../internal/Dropzone.js\";\nimport {MaxSize} from \"../internal/MaxSize.js\";\nimport type {FileInputFile, FileInputFileState} from \"../types.js\";\n\nconst meta = {\n title: \"Komponenter/FileInput\",\n component: FileInput,\n subcomponents: {File, Dropzone, MaxSize, Button},\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<typeof FileInput>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const FileInputStory: Story = {\n name: \"FileInput\",\n args: {\n variant: \"flexible\",\n value: [],\n onChange: console.info,\n legend: \"Legg til fil\",\n labelProps: {\n variant: \"medium\",\n },\n accept: \"image/*,.pdf\",\n maxSizeBytes: 8_000_000,\n },\n render: (args) => {\n const [files, setFiles] = useState<FileInputFile[]>([]);\n\n return (\n <div>\n <FileInput\n {...args}\n id=\"file-input-example\"\n className=\"jkl-spacing-16-24--bottom\"\n value={files}\n onChange={(_e, newFiles) => {\n setFiles((currentFiles) => [\n ...currentFiles,\n ...newFiles,\n ]);\n }}\n >\n {files.map(({state, file, validation}, index) => {\n let label: string \| undefined = undefined;\n let labelType: SupportLabelType \| undefined = undefined;\n let demoState: FileInputFileState = state;\n\n const isUploading = state === \"UPLOADING\";\n\n if (validation?.type === \"WRONG_TYPE\") {\n labelType = \"warning\";\n label = `Filtypen ${\n file.name?.split(\".\")[1] \|\| \"\"\n } støttes ikke`;\n } else if (state === \"UPLOAD_SUCCESS\") {\n labelType = \"success\";\n label = \"Lastet opp\";\n demoState = \"UPLOAD_SUCCESS\";\n } else if (state === \"UPLOAD_ERROR\") {\n labelType = \"error\";\n label = \"Filen lot seg ikke laste opp\";\n demoState = \"UPLOAD_ERROR\";\n } else if (\n validation?.type === \"TOO_LARGE\" &&\n args.maxSizeBytes\n ) {\n labelType = \"error\";\n label = `Filen er større enn ${formatBytes(\n args.maxSizeBytes,\n )} og kan ikke lastes opp`;\n } else if (isUploading) {\n label = \"Laster opp…\";\n demoState = \"UPLOADING\";\n }\n\n return (\n <File\n key={`${file.name}-${index}`}\n fileName={file.name}\n fileType={file.type}\n fileSize={file.size}\n path={`/path/fil-${index}`}\n file={file}\n state={demoState}\n supportLabel={label}\n supportLabelType={labelType}\n onRemove={\n [\"UPLOAD_ERROR\", \"SELECTED\"].includes(state)\n ? () => {\n setFiles([\n ...files.slice(0, index),\n ...files.slice(index + 1),\n ]);\n }\n : undefined\n }\n />\n );\n })}\n </FileInput>\n <PrimaryButton\n className=\"jkl-spacing-16--top\"\n type=\"button\"\n onClick={async () => {\n const toUpload = files.filter(\n (fileState) =>\n fileState.state === \"SELECTED\" &&\n typeof fileState.validation === \"undefined\",\n );\n\n const promises = toUpload.map(\n (fileToUpload) =>\n new Promise<void>((resolve) => {\n const timeout = 5000;\n setTimeout(() => {\n setFiles((currentFiles) =>\n currentFiles.map((file) =>\n file.file.name ===\n fileToUpload.file.name\n ? {\n ...file,\n state: \"UPLOAD_SUCCESS\",\n }\n : file,\n ),\n );\n resolve();\n }, timeout);\n }),\n );\n\n const newFiles = files.map((file) =>\n toUpload.includes(file)\n ? {\n ...file,\n state: \"UPLOADING\" as FileInputFileState,\n }\n : file,\n );\n\n setFiles(newFiles);\n\n await Promise.all(promises);\n }}\n >\n Last opp\n </PrimaryButton>\n </div>\n );\n },\n};\n"],"names":["meta","title","component","FileInput","subcomponents","File","Dropzone","MaxSize","Button","parameters","layout","tags","FileInputStory","name","args","variant","value","onChange","console","info","legend","labelProps","accept","maxSizeBytes","render","files","setFiles","useState","children","jsx","id","className","_e","newFiles","currentFiles","map","state","file","validation","index","label","labelType","demoState","isUploading","type","_a","split","formatBytes","fileName","fileType","fileSize","size","path","supportLabel","supportLabelType","onRemove","includes","slice","PrimaryButton","onClick","async","toUpload","filter","fileState","promises","fileToUpload","Promise","resolve","setTimeout","all"],"mappings":"ggBAYMA,EAAO,CACTC,MAAO,wBACPC,UAAWC,EAAAA,UACXC,cAAe,CAAAC,KAACA,EAAMA,KAAAC,SAAAA,WAAUC,QAAAA,EAAAA,QAASC,OAAAA,EAAAA,QACzCC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOEC,EAAwB,CACjCC,KAAM,YACNC,KAAM,CACFC,QAAS,WACTC,MAAO,GACPC,SAAUC,QAAQC,KAClBC,OAAQ,eACRC,WAAY,CACRN,QAAS,UAEbO,OAAQ,eACRC,aAAc,KAElBC,OAASV,IACL,MAAOW,EAAOC,GAAYC,EAAAA,SAA0B,IAEpD,cACK,MACG,CAAAC,SAAA,CAAAC,EAAAA,IAAC1B,EAAAA,UAAA,IACOW,EACJgB,GAAG,qBACHC,UAAU,4BACVf,MAAOS,EACPR,SAAU,CAACe,EAAIC,KACXP,GAAUQ,GAAiB,IACpBA,KACAD,IACN,EAGJL,SAAAH,EAAMU,KAAI,EAAEC,MAAAA,EAAOC,KAAAA,EAAMC,WAAAA,GAAaC,WACnC,IAAIC,EACAC,EACAC,EAAgCN,EAEpC,MAAMO,EAAwB,cAAVP,EAEhB,MAAqB,gBAArB,MAAAE,OAAAA,EAAAA,EAAYM,OACAH,EAAA,UACJD,EAAA,aACJ,OAAAK,EAAAR,EAAKxB,WAAL,EAAAgC,EAAWC,MAAM,KAAK,KAAM,mBAEf,mBAAVV,GACKK,EAAA,UACJD,EAAA,aACIE,EAAA,kBACK,iBAAVN,GACKK,EAAA,QACJD,EAAA,+BACIE,EAAA,gBAES,eAArB,MAAAJ,SAAAA,EAAYM,OACZ9B,EAAKS,cAEOkB,EAAA,QACZD,EAAQ,uBAAuBO,EAAAA,YAC3BjC,EAAKS,wCAEFoB,IACCH,EAAA,cACIE,EAAA,aAIZb,EAAAA,IAACxB,EAAAA,KAAA,CAEG2C,SAAUX,EAAKxB,KACfoC,SAAUZ,EAAKO,KACfM,SAAUb,EAAKc,KACfC,KAAM,aAAab,IACnBF,KAAAA,EACAD,MAAOM,EACPW,aAAcb,EACdc,iBAAkBb,EAClBc,SACI,CAAC,eAAgB,YAAYC,SAASpB,GAChC,KACWV,EAAA,IACFD,EAAMgC,MAAM,EAAGlB,MACfd,EAAMgC,MAAMlB,EAAQ,IAC1B,OAEH,GAjBL,GAAGF,EAAKxB,QAAQ0B,~~IAAK~~,~~MAuB1CV~~,EAAAA,IAAC6B,EAAAA,cAAA,CACG3B,UAAU,sBACVa,KAAK,SACLe,QAASC,UACL,MAAMC,EAAWpC,EAAMqC,QAClBC,GACuB,aAApBA,EAAU3B,cACH2B,EAAUzB,WAAe,MAGlC0B,EAAWH,EAAS1B,KACrB8B,GACG,IAAIC,SAAeC,IAEfC,YAAW,KACP1C,GAAUQ,GACNA,EAAaC,KAAKE,GACdA,EAAKA,KAAKxB,OACVoD,EAAa5B,KAAKxB,KACZ,IACKwB,EACHD,MAAO,kBAETC,MAGN8B,~~MACT~~,IAAO,MAIhBlC,EAAWR,EAAMU,KAAKE,GACxBwB,EAASL,SAASnB,GACZ,IACKA,EACHD,MAAO,aAETC,IAGVX,EAASO,SAEHiC,QAAQG,IAAIL,EAAQ,EAEjCpC,SAAA,eAGL"}
1	+ {"version":3,"file":"FileInput.stories.cjs","sources":["../../../../../src/components/file-input/stories/FileInput.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from \"@storybook/react\";\nimport React, {useState} from \"react\";\nimport \"../styles/_index.scss\";\nimport {formatBytes} from \"../../../utilities/index.js\";\nimport {Button, PrimaryButton} from \"../../button/index.js\";\nimport type {SupportLabelType} from \"../../input-group/index.js\";\nimport {File} from \"../File.js\";\nimport {FileInput} from \"../FileInput.js\";\nimport {Dropzone} from \"../internal/Dropzone.js\";\nimport {MaxSize} from \"../internal/MaxSize.js\";\nimport type {FileInputFile, FileInputFileState} from \"../types.js\";\n\nconst meta = {\n title: \"Komponenter/FileInput\",\n component: FileInput,\n subcomponents: {File, Dropzone, MaxSize, Button},\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<typeof FileInput>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const FileInputStory: Story = {\n name: \"FileInput\",\n args: {\n variant: \"flexible\",\n value: [],\n onChange: console.info,\n legend: \"Legg til fil\",\n labelProps: {\n variant: \"medium\",\n },\n accept: \"image/*,.pdf\",\n maxSizeBytes: 8_000_000,\n },\n render: (args) => {\n const [files, setFiles] = useState<FileInputFile[]>([]);\n\n return (\n <div>\n <FileInput\n {...args}\n id=\"file-input-example\"\n className=\"jkl-spacing-16-24--bottom\"\n value={files}\n onChange={(_e, newFiles) => {\n setFiles((currentFiles) => [\n ...currentFiles,\n ...newFiles,\n ]);\n }}\n >\n {files.map(({state, file, validation}, index) => {\n let label: string \| undefined = undefined;\n let labelType: SupportLabelType \| undefined = undefined;\n let demoState: FileInputFileState = state;\n\n const isUploading = state === \"UPLOADING\";\n\n if (validation?.type === \"WRONG_TYPE\") {\n labelType = \"warning\";\n label = `Filtypen ${\n file.name?.split(\".\")[1] \|\| \"\"\n } støttes ikke`;\n } else if (state === \"UPLOAD_SUCCESS\") {\n labelType = \"success\";\n label = \"Lastet opp\";\n demoState = \"UPLOAD_SUCCESS\";\n } else if (state === \"UPLOAD_ERROR\") {\n labelType = \"error\";\n label = \"Filen lot seg ikke laste opp\";\n demoState = \"UPLOAD_ERROR\";\n } else if (\n validation?.type === \"TOO_LARGE\" &&\n args.maxSizeBytes\n ) {\n labelType = \"error\";\n label = `Filen er større enn ${formatBytes(\n args.maxSizeBytes,\n )} og kan ikke lastes opp`;\n } else if (isUploading) {\n label = \"Laster opp…\";\n demoState = \"UPLOADING\";\n }\n\n return (\n <File\n key={`${file.name}-${index}`}\n fileName={file.name}\n fileType={file.type}\n fileSize={file.size}\n path={`/path/fil-${index}`}\n file={file}\n state={demoState}\n supportLabel={label}\n supportLabelType={labelType}\n onRemove={\n [\"UPLOAD_ERROR\", \"SELECTED\"].includes(state)\n ? () => {\n setFiles([\n ...files.slice(0, index),\n ...files.slice(index + 1),\n ]);\n }\n : undefined\n }\n />\n );\n })}\n </FileInput>\n <PrimaryButton\n className=\"jkl-spacing-16--top\"\n type=\"button\"\n onClick={async () => {\n const toUpload = files.filter(\n (fileState) =>\n fileState.state === \"SELECTED\" &&\n typeof fileState.validation === \"undefined\",\n );\n\n const promises = toUpload.map(\n (fileToUpload) =>\n new Promise<void>((resolve) => {\n const timeout = 5000;\n setTimeout(() => {\n setFiles((currentFiles) =>\n currentFiles.map((file) =>\n file.file.name ===\n fileToUpload.file.name\n ? {\n ...file,\n state: \"UPLOAD_SUCCESS\",\n }\n : file,\n ),\n );\n resolve();\n }, timeout);\n }),\n );\n\n const newFiles = files.map((file) =>\n toUpload.includes(file)\n ? {\n ...file,\n state: \"UPLOADING\" as FileInputFileState,\n }\n : file,\n );\n\n setFiles(newFiles);\n\n await Promise.all(promises);\n }}\n >\n Last opp\n </PrimaryButton>\n </div>\n );\n },\n};\n"],"names":["meta","title","component","FileInput","subcomponents","File","Dropzone","MaxSize","Button","parameters","layout","tags","FileInputStory","name","args","variant","value","onChange","console","info","legend","labelProps","accept","maxSizeBytes","render","files","setFiles","useState","children","jsx","id","className","_e","newFiles","currentFiles","map","state","file","validation","index","label","labelType","demoState","isUploading","type","_a","split","formatBytes","fileName","fileType","fileSize","size","path","supportLabel","supportLabelType","onRemove","includes","slice","PrimaryButton","onClick","async","toUpload","filter","fileState","promises","fileToUpload","Promise","resolve","setTimeout","all"],"mappings":"ggBAYMA,EAAO,CACTC,MAAO,wBACPC,UAAWC,EAAAA,UACXC,cAAe,CAAAC,KAACA,EAAMA,KAAAC,SAAAA,WAAUC,QAAAA,EAAAA,QAASC,OAAAA,EAAAA,QACzCC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOEC,EAAwB,CACjCC,KAAM,YACNC,KAAM,CACFC,QAAS,WACTC,MAAO,GACPC,SAAUC,QAAQC,KAClBC,OAAQ,eACRC,WAAY,CACRN,QAAS,UAEbO,OAAQ,eACRC,aAAc,KAElBC,OAASV,IACL,MAAOW,EAAOC,GAAYC,EAAAA,SAA0B,IAEpD,cACK,MACG,CAAAC,SAAA,CAAAC,EAAAA,IAAC1B,EAAAA,UAAA,IACOW,EACJgB,GAAG,qBACHC,UAAU,4BACVf,MAAOS,EACPR,SAAU,CAACe,EAAIC,KACXP,GAAUQ,GAAiB,IACpBA,KACAD,IACN,EAGJL,SAAAH,EAAMU,KAAI,EAAEC,MAAAA,EAAOC,KAAAA,EAAMC,WAAAA,GAAaC,WACnC,IAAIC,EACAC,EACAC,EAAgCN,EAEpC,MAAMO,EAAwB,cAAVP,EAEhB,MAAqB,gBAArB,MAAAE,OAAAA,EAAAA,EAAYM,OACAH,EAAA,UACJD,EAAA,aACJ,OAAAK,EAAAR,EAAKxB,WAAL,EAAAgC,EAAWC,MAAM,KAAK,KAAM,mBAEf,mBAAVV,GACKK,EAAA,UACJD,EAAA,aACIE,EAAA,kBACK,iBAAVN,GACKK,EAAA,QACJD,EAAA,+BACIE,EAAA,gBAES,eAArB,MAAAJ,SAAAA,EAAYM,OACZ9B,EAAKS,cAEOkB,EAAA,QACZD,EAAQ,uBAAuBO,EAAAA,YAC3BjC,EAAKS,wCAEFoB,IACCH,EAAA,cACIE,EAAA,aAIZb,EAAAA,IAACxB,EAAAA,KAAA,CAEG2C,SAAUX,EAAKxB,KACfoC,SAAUZ,EAAKO,KACfM,SAAUb,EAAKc,KACfC,KAAM,aAAab,IACnBF,KAAAA,EACAD,MAAOM,EACPW,aAAcb,EACdc,iBAAkBb,EAClBc,SACI,CAAC,eAAgB,YAAYC,SAASpB,GAChC,KACWV,EAAA,IACFD,EAAMgC,MAAM,EAAGlB,MACfd,EAAMgC,MAAMlB,EAAQ,IAC1B,OAEH,GAjBL,GAAGF,EAAKxB,QAAQ0B,IAmBzB,MAIZV,EAAAA,IAAC6B,EAAAA,cAAA,CACG3B,UAAU,sBACVa,KAAK,SACLe,QAASC,UACL,MAAMC,EAAWpC,EAAMqC,QAClBC,GACuB,aAApBA,EAAU3B,cACH2B,EAAUzB,WAAe,MAGlC0B,EAAWH,EAAS1B,KACrB8B,GACG,IAAIC,SAAeC,IAEfC,YAAW,KACP1C,GAAUQ,GACNA,EAAaC,KAAKE,GACdA,EAAKA,KAAKxB,OACVoD,EAAa5B,KAAKxB,KACZ,IACKwB,EACHD,MAAO,kBAETC,MAGN8B,GAAA,GACT,IAAO,MAIhBlC,EAAWR,EAAMU,KAAKE,GACxBwB,EAASL,SAASnB,GACZ,IACKA,EACHD,MAAO,aAETC,IAGVX,EAASO,SAEHiC,QAAQG,IAAIL,EAAQ,EAEjCpC,SAAA,eAGL"}

package/build/cjs/components/flex/Flex.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Flex.cjs","sources":["../../../../src/components/flex/Flex.tsx"],"sourcesContent":["import React, { type CSSProperties } from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport { SlotComponent } from \"../../utilities/polymorphism/SlotComponent.js\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport type { FlexComponent, FlexProps } from \"./types.js\";\n\nexport const Flex = React.forwardRef(function Flex<\n ElementType extends React.ElementType = \"div\",\n>(props: FlexProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n const {\n asChild,\n as = \"div\",\n alignContent,\n alignItems,\n children,\n colGap,\n direction,\n gap,\n justifyContent,\n justifyItems,\n rowGap,\n wrap = false,\n ...rest\n } = props;\n const Component = asChild ? SlotComponent : as;\n\n const flexStyle: CSSProperties = {\n display: \"flex\",\n flexDirection: direction,\n alignContent,\n alignItems,\n justifyContent,\n justifyItems,\n ...(wrap ? { flexWrap: \"wrap\" } : {}),\n ...(gap ? { gap: tokens.spacing[gap] } : {}),\n ...(colGap ? { columnGap: tokens.spacing[colGap] } : {}),\n ...(rowGap ? { rowGap: tokens.spacing[rowGap] } : {}),\n };\n\n return (\n <Component ref={ref} {...rest} style={{ ...flexStyle, ...rest.style }}>\n {children}\n </Component>\n );\n}) as FlexComponent;\n"],"names":["Flex","React","forwardRef","props","ref","asChild","as","alignContent","alignItems","children","colGap","direction","gap","justifyContent","justifyItems","rowGap","wrap","rest","Component","SlotComponent","flexStyle","display","flexDirection","flexWrap","tokens","spacing","columnGap","jsx","style"],"mappings":"uOAMaA,EAAOC,EAAMC,YAAW,SAEnCC,EAA+BC,GACvB,MACFC,QAAAA,EACAC,GAAAA,EAAK,MACLC,aAAAA,EACAC,WAAAA,EACAC,SAAAA,EACAC,OAAAA,EACAC,UAAAA,EACAC,IAAAA,EACAC,eAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,KAAAA,GAAO,KACJC,GACHd,EACEe,EAAYb,EAAUc,~~EAAgBA~~,~~cAAAb~~,EAEtCc,EAA2B,CAC7BC,QAAS,OACTC,cAAeX,EACfJ,aAAAA,EACAC,WAAAA,EACAK,eAAAA,EACAC,aAAAA,KACIE,EAAO,CAAEO,SAAU,QAAW,CAAC,KAC/BX,EAAM,CAAEA,IAAKY,EAAOC,QAAQb,IAAS,CAAC,KACtCF,EAAS,CAAEgB,UAAWF,EAAOC,QAAQf,IAAY,CAAC,KAClDK,EAAS,CAAEA,OAAQS,EAAOC,QAAQV,IAAY,~~CAAC~~,~~GAGvD~~,OACKY,EAAAA,IAAAT,EAAA,CAAUd,IAAAA,KAAca,EAAMW,MAAO,IAAKR,KAAcH,EAAKW,OACzDnB,SAAAA,GAGb"}
1	+ {"version":3,"file":"Flex.cjs","sources":["../../../../src/components/flex/Flex.tsx"],"sourcesContent":["import React, { type CSSProperties } from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport { SlotComponent } from \"../../utilities/polymorphism/SlotComponent.js\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport type { FlexComponent, FlexProps } from \"./types.js\";\n\nexport const Flex = React.forwardRef(function Flex<\n ElementType extends React.ElementType = \"div\",\n>(props: FlexProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n const {\n asChild,\n as = \"div\",\n alignContent,\n alignItems,\n children,\n colGap,\n direction,\n gap,\n justifyContent,\n justifyItems,\n rowGap,\n wrap = false,\n ...rest\n } = props;\n const Component = asChild ? SlotComponent : as;\n\n const flexStyle: CSSProperties = {\n display: \"flex\",\n flexDirection: direction,\n alignContent,\n alignItems,\n justifyContent,\n justifyItems,\n ...(wrap ? { flexWrap: \"wrap\" } : {}),\n ...(gap ? { gap: tokens.spacing[gap] } : {}),\n ...(colGap ? { columnGap: tokens.spacing[colGap] } : {}),\n ...(rowGap ? { rowGap: tokens.spacing[rowGap] } : {}),\n };\n\n return (\n <Component ref={ref} {...rest} style={{ ...flexStyle, ...rest.style }}>\n {children}\n </Component>\n );\n}) as FlexComponent;\n"],"names":["Flex","React","forwardRef","props","ref","asChild","as","alignContent","alignItems","children","colGap","direction","gap","justifyContent","justifyItems","rowGap","wrap","rest","Component","SlotComponent","flexStyle","display","flexDirection","flexWrap","tokens","spacing","columnGap","jsx","style"],"mappings":"uOAMaA,EAAOC,EAAMC,YAAW,SAEnCC,EAA+BC,GACvB,MACFC,QAAAA,EACAC,GAAAA,EAAK,MACLC,aAAAA,EACAC,WAAAA,EACAC,SAAAA,EACAC,OAAAA,EACAC,UAAAA,EACAC,IAAAA,EACAC,eAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,KAAAA,GAAO,KACJC,GACHd,EACEe,EAAYb,EAAUc,EAAAA,cAAgBb,EAEtCc,EAA2B,CAC7BC,QAAS,OACTC,cAAeX,EACfJ,aAAAA,EACAC,WAAAA,EACAK,eAAAA,EACAC,aAAAA,KACIE,EAAO,CAAEO,SAAU,QAAW,CAAC,KAC/BX,EAAM,CAAEA,IAAKY,EAAOC,QAAQb,IAAS,CAAC,KACtCF,EAAS,CAAEgB,UAAWF,EAAOC,QAAQf,IAAY,CAAC,KAClDK,EAAS,CAAEA,OAAQS,EAAOC,QAAQV,IAAY,CAAA,GAGtD,OACKY,EAAAA,IAAAT,EAAA,CAAUd,IAAAA,KAAca,EAAMW,MAAO,IAAKR,KAAcH,EAAKW,OACzDnB,SAAAA,GAGb"}

package/build/cjs/components/icon/icons/GreenCheckIcon.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GreenCheckIcon.cjs","sources":["../../../../../src/components/icon/icons/GreenCheckIcon.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport type { IconProps } from \"../types.js\";\n\n/\n NOTE: The green-check and red-cross icons also exists as a copy in the jkl-list package.\n * If you're here to change them, consider changing them there as well, or\n * finding a technical solution to sharing the SVG markup\n */\nexport const GreenCheckIcon: FC<IconProps> = ({\n as = \"div\",\n bold = false,\n className,\n variant = \"inherit\",\n \"data-testid\": testId,\n style,\n ...rest\n}) => {\n const El = as;\n\n return (\n <El\n className={clsx(\n className,\n \"jkl-icon\",\n \"jkl-icon-green-check\",\n `jkl-icon--${variant}`,\n {\n \"jkl-icon--bold\": bold,\n },\n )}\n aria-hidden=\"true\"\n style={style}\n data-testid={testId}\n {...rest}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path\n fillRule=\"evenodd\"\n d=\"M17.52 9.54 10.7 16.2l-4.21-4.1 1.04-1.08 3.17 3.09 5.79-5.65 1.04 1.08Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n </El>\n );\n};\nGreenCheckIcon.displayName = \"GreenCheckIcon\";\n"],"names":["GreenCheckIcon","as","bold","className","variant","testId","style","rest","El","jsx","clsx","children","jsxs","xmlns","viewBox","width","height","cx","cy","r","fillRule","d","clipRule","displayName"],"mappings":"iLASO,MAAMA,EAAgC,EACzCC,GAAAA,EAAK,MACLC,KAAAA,GAAO,EACPC,UAAAA,EACAC,QAAAA,EAAU,UACV,cAAeC,EACfC,MAAAA,KACGC,MAEH,MAAMC,EAAKP,EAGP,OAAAQ,EAAAA,IAACD,EAAA,CACGL,UAAWO,EAAAA,KACPP,EACA,WACA,uBACA,aAAaC,IACb,CACI,iBAAkBF,IAG1B,cAAY,OACZI,MAAAA,EACA,cAAaD,KACTE,EAEJI,SAAAC,EAAAA,KAAC,MAAA,CACGC,MAAM,6BACNC,QAAQ,YACRC,MAAM,OACNC,OAAO,OAEPL,SAAA,CAAAF,MAAC,UAAOQ,GAAG,KAAKC,GAAG,KAAKC,EAAE,OAC1BV,EAAAA,IAAC,OAAA,CACGW,SAAS,UACTC,EAAE,2EACFC,SAAS,~~gBAEjB~~,~~EAIZtB~~,EAAeuB,YAAc"}
1	+ {"version":3,"file":"GreenCheckIcon.cjs","sources":["../../../../../src/components/icon/icons/GreenCheckIcon.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport type { IconProps } from \"../types.js\";\n\n/\n NOTE: The green-check and red-cross icons also exists as a copy in the jkl-list package.\n * If you're here to change them, consider changing them there as well, or\n * finding a technical solution to sharing the SVG markup\n */\nexport const GreenCheckIcon: FC<IconProps> = ({\n as = \"div\",\n bold = false,\n className,\n variant = \"inherit\",\n \"data-testid\": testId,\n style,\n ...rest\n}) => {\n const El = as;\n\n return (\n <El\n className={clsx(\n className,\n \"jkl-icon\",\n \"jkl-icon-green-check\",\n `jkl-icon--${variant}`,\n {\n \"jkl-icon--bold\": bold,\n },\n )}\n aria-hidden=\"true\"\n style={style}\n data-testid={testId}\n {...rest}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path\n fillRule=\"evenodd\"\n d=\"M17.52 9.54 10.7 16.2l-4.21-4.1 1.04-1.08 3.17 3.09 5.79-5.65 1.04 1.08Z\"\n clipRule=\"evenodd\"\n />\n </svg>\n </El>\n );\n};\nGreenCheckIcon.displayName = \"GreenCheckIcon\";\n"],"names":["GreenCheckIcon","as","bold","className","variant","testId","style","rest","El","jsx","clsx","children","jsxs","xmlns","viewBox","width","height","cx","cy","r","fillRule","d","clipRule","displayName"],"mappings":"iLASO,MAAMA,EAAgC,EACzCC,GAAAA,EAAK,MACLC,KAAAA,GAAO,EACPC,UAAAA,EACAC,QAAAA,EAAU,UACV,cAAeC,EACfC,MAAAA,KACGC,MAEH,MAAMC,EAAKP,EAGP,OAAAQ,EAAAA,IAACD,EAAA,CACGL,UAAWO,EAAAA,KACPP,EACA,WACA,uBACA,aAAaC,IACb,CACI,iBAAkBF,IAG1B,cAAY,OACZI,MAAAA,EACA,cAAaD,KACTE,EAEJI,SAAAC,EAAAA,KAAC,MAAA,CACGC,MAAM,6BACNC,QAAQ,YACRC,MAAM,OACNC,OAAO,OAEPL,SAAA,CAAAF,MAAC,UAAOQ,GAAG,KAAKC,GAAG,KAAKC,EAAE,OAC1BV,EAAAA,IAAC,OAAA,CACGW,SAAS,UACTC,EAAE,2EACFC,SAAS,gBAGrB,EAGRtB,EAAeuB,YAAc"}

package/build/cjs/components/icon/icons/RedCrossIcon.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RedCrossIcon.cjs","sources":["../../../../../src/components/icon/icons/RedCrossIcon.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport type { IconProps } from \"../types.js\";\n\n/\n NOTE: The green-check and red-cross icons also exists as a copy in the jkl-list package.\n * If you're here to change them, consider changing them there as well, or\n * finding a technical solution to sharing the SVG markup\n */\nexport const RedCrossIcon: FC<IconProps> = ({\n as = \"div\",\n bold = false,\n className,\n variant = \"inherit\",\n \"data-testid\": testId,\n style,\n ...rest\n}) => {\n const El = as;\n\n return (\n <El\n className={clsx(\n className,\n \"jkl-icon\",\n \"jkl-icon-red-cross\",\n `jkl-icon--${variant}`,\n {\n \"jkl-icon--bold\": bold,\n },\n )}\n aria-hidden=\"true\"\n style={style}\n data-testid={testId}\n {...rest}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"m15.71 7.23 1.06 1.06-8.48 8.48-1.06-1.06 8.48-8.48Z\" />\n <path d=\"m8.29 7.23 8.48 8.48-1.06 1.06L7.23 8.3l1.06-1.06Z\" />\n </svg>\n </El>\n );\n};\nRedCrossIcon.displayName = \"RedCrossIcon\";\n"],"names":["RedCrossIcon","as","bold","className","variant","testId","style","rest","El","jsx","clsx","children","jsxs","xmlns","viewBox","width","height","cx","cy","r","d","displayName"],"mappings":"iLASO,MAAMA,EAA8B,EACvCC,GAAAA,EAAK,MACLC,KAAAA,GAAO,EACPC,UAAAA,EACAC,QAAAA,EAAU,UACV,cAAeC,EACfC,MAAAA,KACGC,MAEH,MAAMC,EAAKP,EAGP,OAAAQ,EAAAA,IAACD,EAAA,CACGL,UAAWO,EAAAA,KACPP,EACA,WACA,qBACA,aAAaC,IACb,CACI,iBAAkBF,IAG1B,cAAY,OACZI,MAAAA,EACA,cAAaD,KACTE,EAEJI,SAAAC,EAAAA,KAAC,MAAA,CACGC,MAAM,6BACNC,QAAQ,YACRC,MAAM,OACNC,OAAO,OAEPL,SAAA,CAAAF,MAAC,UAAOQ,GAAG,KAAKC,GAAG,KAAKC,EAAE,OAC1BV,EAAAA,IAAC,OAAK,CAAAW,EAAE,yDACRX,EAAAA,IAAC,OAAK,CAAAW,EAAE,~~2DACZ~~,~~EAIZpB~~,EAAaqB,YAAc"}
1	+ {"version":3,"file":"RedCrossIcon.cjs","sources":["../../../../../src/components/icon/icons/RedCrossIcon.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport type { IconProps } from \"../types.js\";\n\n/\n NOTE: The green-check and red-cross icons also exists as a copy in the jkl-list package.\n * If you're here to change them, consider changing them there as well, or\n * finding a technical solution to sharing the SVG markup\n */\nexport const RedCrossIcon: FC<IconProps> = ({\n as = \"div\",\n bold = false,\n className,\n variant = \"inherit\",\n \"data-testid\": testId,\n style,\n ...rest\n}) => {\n const El = as;\n\n return (\n <El\n className={clsx(\n className,\n \"jkl-icon\",\n \"jkl-icon-red-cross\",\n `jkl-icon--${variant}`,\n {\n \"jkl-icon--bold\": bold,\n },\n )}\n aria-hidden=\"true\"\n style={style}\n data-testid={testId}\n {...rest}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"24px\"\n height=\"24px\"\n >\n <circle cx=\"12\" cy=\"12\" r=\"10\" />\n <path d=\"m15.71 7.23 1.06 1.06-8.48 8.48-1.06-1.06 8.48-8.48Z\" />\n <path d=\"m8.29 7.23 8.48 8.48-1.06 1.06L7.23 8.3l1.06-1.06Z\" />\n </svg>\n </El>\n );\n};\nRedCrossIcon.displayName = \"RedCrossIcon\";\n"],"names":["RedCrossIcon","as","bold","className","variant","testId","style","rest","El","jsx","clsx","children","jsxs","xmlns","viewBox","width","height","cx","cy","r","d","displayName"],"mappings":"iLASO,MAAMA,EAA8B,EACvCC,GAAAA,EAAK,MACLC,KAAAA,GAAO,EACPC,UAAAA,EACAC,QAAAA,EAAU,UACV,cAAeC,EACfC,MAAAA,KACGC,MAEH,MAAMC,EAAKP,EAGP,OAAAQ,EAAAA,IAACD,EAAA,CACGL,UAAWO,EAAAA,KACPP,EACA,WACA,qBACA,aAAaC,IACb,CACI,iBAAkBF,IAG1B,cAAY,OACZI,MAAAA,EACA,cAAaD,KACTE,EAEJI,SAAAC,EAAAA,KAAC,MAAA,CACGC,MAAM,6BACNC,QAAQ,YACRC,MAAM,OACNC,OAAO,OAEPL,SAAA,CAAAF,MAAC,UAAOQ,GAAG,KAAKC,GAAG,KAAKC,EAAE,OAC1BV,EAAAA,IAAC,OAAK,CAAAW,EAAE,yDACRX,EAAAA,IAAC,OAAK,CAAAW,EAAE,2DAEhB,EAGRpB,EAAaqB,YAAc"}

package/build/cjs/components/icon/stories/Icons.stories.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icons.stories.cjs","sources":["../../../../../src/components/icon/development/internal/IconExample.tsx","../../../../../src/components/icon/development/internal/IconsExampleGrid.tsx","../../../../../src/components/icon/stories/Icons.stories.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\n\ninterface Props extends React.HTMLAttributes<HTMLDivElement> {\n name?: string;\n renderIcon: () => ReactNode;\n}\n\nexport const IconExample: React.FC<Props> = ({\n name,\n renderIcon,\n ...restProps\n}) => (\n <div title={name \|\| renderIcon.name} {...restProps}>\n {renderIcon()}\n </div>\n);\n","import React, { type CSSProperties } from \"react\";\nimport \"./icons-example-grid.scss\";\nimport type { WithChildren } from \"../../../../core/types.js\";\n\ninterface IconsExampleGridProps extends WithChildren {\n columns: \"two\" \| \"four\";\n style?: CSSProperties;\n}\n\nexport const IconsExampleGrid: React.FC<IconsExampleGridProps> = ({\n columns,\n children,\n ...rest\n}) => (\n <div\n className={`jkl-example-grid jkl-example-grid--${columns}-columns`}\n {...rest}\n >\n {children}\n </div>\n);\n","import type { Meta, StoryObj } from \"@storybook/react\";\nimport React, { useState } from \"react\";\nimport { TextInput } from \"../../text-input/TextInput.js\";\nimport { Icon } from \"../Icon.js\";\nimport { IconExample } from \"../development/internal/IconExample.js\";\nimport { IconsExampleGrid } from \"../development/internal/IconsExampleGrid.js\";\nimport {\n ArrowDownIcon,\n ArrowLeftIcon,\n ArrowNorthEastIcon,\n ArrowRightIcon,\n ArrowUpIcon,\n CalendarIcon,\n CheckIcon,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n CloseIcon,\n CopyIcon,\n DotsIcon,\n DragIcon,\n ErrorIcon,\n GreenCheckIcon,\n HamburgerIcon,\n InfoIcon,\n LinkIcon,\n MinusIcon,\n OpenInNewIcon,\n PenIcon,\n PlusIcon,\n QuestionIcon,\n RedCrossIcon,\n SearchIcon,\n SuccessIcon,\n ThumbDownIcon,\n ThumbUpIcon,\n TrashCanIcon,\n WarningIcon,\n} from \"../index.js\";\nimport \"../styles/_index.scss\";\nimport \"../../text-input/styles/text-input.scss\";\nimport \"../../input-group/styles/_index.scss\";\n\nconst meta: Meta = {\n title: \"Komponenter/Ikoner\",\n component: Icon,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n argTypes: {\n variant: {\n control: \"radio\",\n options: [\"inherit\", \"medium\", \"small\"],\n },\n },\n} satisfies Meta<typeof Icon>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof Icon>;\n\nconst allIcons = [\n ArrowDownIcon,\n ArrowLeftIcon,\n ArrowNorthEastIcon,\n ArrowRightIcon,\n ArrowUpIcon,\n CalendarIcon,\n CheckIcon,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n CloseIcon,\n CopyIcon,\n DotsIcon,\n DragIcon,\n ErrorIcon,\n GreenCheckIcon,\n HamburgerIcon,\n InfoIcon,\n LinkIcon,\n MinusIcon,\n OpenInNewIcon,\n PenIcon,\n PlusIcon,\n QuestionIcon,\n RedCrossIcon,\n SearchIcon,\n SuccessIcon,\n ThumbDownIcon,\n ThumbUpIcon,\n TrashCanIcon,\n WarningIcon,\n];\n\nexport const Ikoner: Story = {\n args: {\n variant: \"small\",\n bold: false,\n },\n render: ({ variant, bold }) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const [fontSize, setFontSize] = useState(\"1rem\");\n\n return (\n <div style={{ width: \"50vw\" }}>\n {variant === \"inherit\" && (\n <TextInput\n label=\"Fontstørrelse\"\n className=\"jkl-spacing-24--bottom\"\n value={fontSize}\n onChange={(e) => setFontSize(e.target.value)}\n width=\"10ch\"\n />\n )}\n <IconsExampleGrid style={{ fontSize }} columns=\"four\">\n {allIcons.map((Ico) => (\n <IconExample\n style={{ justifySelf: \"center\" }}\n key={Ico.displayName}\n renderIcon={() => (\n <Ico bold={bold} variant={variant} />\n )}\n name={Ico.displayName}\n />\n ))}\n </IconsExampleGrid>\n </div>\n );\n },\n};\n"],"names":["IconExample","name","renderIcon","restProps","jsx","title","children","IconsExampleGrid","columns","rest","className","meta","component","Icon","parameters","layout","tags","argTypes","variant","control","options","allIcons","ArrowDownIcon","ArrowLeftIcon","ArrowNorthEastIcon","ArrowRightIcon","ArrowUpIcon","CalendarIcon","CheckIcon","ChevronDownIcon","ChevronLeftIcon","ChevronRightIcon","ChevronUpIcon","CloseIcon","CopyIcon","DotsIcon","DragIcon","ErrorIcon","GreenCheckIcon","HamburgerIcon","InfoIcon","LinkIcon","MinusIcon","OpenInNewIcon","PenIcon","PlusIcon","QuestionIcon","RedCrossIcon","SearchIcon","SuccessIcon","ThumbDownIcon","ThumbUpIcon","TrashCanIcon","WarningIcon","Ikoner","args","bold","render","fontSize","setFontSize","useState","style","width","TextInput","label","value","onChange","e","target","map","Ico","justifySelf","displayName"],"mappings":"yoDAOO,MAAMA,EAA+B,EACxCC,KAAAA,EACAC,WAAAA,KACGC,KAEHC,MAAC,OAAIC,MAAOJ,GAAQC,EAAWD,QAAUE,EACpCG,SAAAJ,MCJIK,EAAoD,EAC7DC,QAAAA,EACAF,SAAAA,KACGG,KAEHL,EAAAA,IAAC,MAAA,CACGM,UAAW,sCAAsCF,eAC7CC,EAEHH,SAAAA,IC0BHK,EAAa,CACfN,MAAO,qBACPO,UAAWC,EAAAA,KACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,YACPC,SAAU,CACNC,QAAS,CACLC,QAAS,QACTC,QAAS,CAAC,UAAW,SAAU,YASrCC,EAAW,CACbC,EAAAA,cACAC,EAAAA,cACAC,EAAAA,mBACAC,EAAAA,eACAC,EAAAA,YACAC,EAAAA,aACAC,EAAAA,UACAC,EAAAA,gBACAC,EAAAA,gBACAC,EAAAA,iBACAC,EAAAA,cACAC,EAAAA,UACAC,EAAAA,SACAC,EAAAA,SACAC,EAAAA,SACAC,EAAAA,UACAC,EAAAA,eACAC,EAAAA,cACAC,EAAAA,SACAC,EAAAA,SACAC,EAAAA,UACAC,EAAAA,cACAC,EAAAA,QACAC,EAAAA,SACAC,EAAAA,aACAC,EAAAA,aACAC,EAAAA,WACAC,EAAAA,YACAC,EAAAA,cACAC,EAAAA,YACAC,EAAAA,aACAC,EAAAA,aAGSC,EAAgB,CACzBC,KAAM,CACFrC,QAAS,QACTsC,MAAM,GAEVC,OAAQ,EAAGvC,QAAAA,EAASsC,KAAAA,MAEhB,MAAOE,EAAUC,GAAeC,~~WAAS~~,QAEzC,cACK,MAAI,CAAAC,MAAO,CAAEC,MAAO,QAChBxD,SAAA,CAAY,YAAZY,GACGd,EAAAA,IAAC2D,EAAAA,UAAA,CACGC,MAAM,gBACNtD,UAAU,yBACVuD,MAAOP,EACPQ,SAAWC,GAAMR,EAAYQ,EAAEC,OAAOH,OACtCH,MAAM,SAGd1D,EAAAA,IAACG,EAAiB,CAAAsD,MAAO,CAAEH,SAAAA,GAAYlD,QAAQ,OAC1CF,SAAAe,EAASgD,KAAKC,GACXlE,EAAAA,IAACJ,EAAA,CACG6D,MAAO,CAAEU,YAAa,UAEtBrE,WAAY,IACPE,EAAAA,IAAAkE,EAAA,CAAId,KAAAA,EAAYtC,QAAAA,IAErBjB,KAAMqE,EAAIE,aAJLF,EAAIE,mBAQzB"}
1	+ {"version":3,"file":"Icons.stories.cjs","sources":["../../../../../src/components/icon/development/internal/IconExample.tsx","../../../../../src/components/icon/development/internal/IconsExampleGrid.tsx","../../../../../src/components/icon/stories/Icons.stories.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\n\ninterface Props extends React.HTMLAttributes<HTMLDivElement> {\n name?: string;\n renderIcon: () => ReactNode;\n}\n\nexport const IconExample: React.FC<Props> = ({\n name,\n renderIcon,\n ...restProps\n}) => (\n <div title={name \|\| renderIcon.name} {...restProps}>\n {renderIcon()}\n </div>\n);\n","import React, { type CSSProperties } from \"react\";\nimport \"./icons-example-grid.scss\";\nimport type { WithChildren } from \"../../../../core/types.js\";\n\ninterface IconsExampleGridProps extends WithChildren {\n columns: \"two\" \| \"four\";\n style?: CSSProperties;\n}\n\nexport const IconsExampleGrid: React.FC<IconsExampleGridProps> = ({\n columns,\n children,\n ...rest\n}) => (\n <div\n className={`jkl-example-grid jkl-example-grid--${columns}-columns`}\n {...rest}\n >\n {children}\n </div>\n);\n","import type { Meta, StoryObj } from \"@storybook/react\";\nimport React, { useState } from \"react\";\nimport { TextInput } from \"../../text-input/TextInput.js\";\nimport { Icon } from \"../Icon.js\";\nimport { IconExample } from \"../development/internal/IconExample.js\";\nimport { IconsExampleGrid } from \"../development/internal/IconsExampleGrid.js\";\nimport {\n ArrowDownIcon,\n ArrowLeftIcon,\n ArrowNorthEastIcon,\n ArrowRightIcon,\n ArrowUpIcon,\n CalendarIcon,\n CheckIcon,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n CloseIcon,\n CopyIcon,\n DotsIcon,\n DragIcon,\n ErrorIcon,\n GreenCheckIcon,\n HamburgerIcon,\n InfoIcon,\n LinkIcon,\n MinusIcon,\n OpenInNewIcon,\n PenIcon,\n PlusIcon,\n QuestionIcon,\n RedCrossIcon,\n SearchIcon,\n SuccessIcon,\n ThumbDownIcon,\n ThumbUpIcon,\n TrashCanIcon,\n WarningIcon,\n} from \"../index.js\";\nimport \"../styles/_index.scss\";\nimport \"../../text-input/styles/text-input.scss\";\nimport \"../../input-group/styles/_index.scss\";\n\nconst meta: Meta = {\n title: \"Komponenter/Ikoner\",\n component: Icon,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n argTypes: {\n variant: {\n control: \"radio\",\n options: [\"inherit\", \"medium\", \"small\"],\n },\n },\n} satisfies Meta<typeof Icon>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof Icon>;\n\nconst allIcons = [\n ArrowDownIcon,\n ArrowLeftIcon,\n ArrowNorthEastIcon,\n ArrowRightIcon,\n ArrowUpIcon,\n CalendarIcon,\n CheckIcon,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n CloseIcon,\n CopyIcon,\n DotsIcon,\n DragIcon,\n ErrorIcon,\n GreenCheckIcon,\n HamburgerIcon,\n InfoIcon,\n LinkIcon,\n MinusIcon,\n OpenInNewIcon,\n PenIcon,\n PlusIcon,\n QuestionIcon,\n RedCrossIcon,\n SearchIcon,\n SuccessIcon,\n ThumbDownIcon,\n ThumbUpIcon,\n TrashCanIcon,\n WarningIcon,\n];\n\nexport const Ikoner: Story = {\n args: {\n variant: \"small\",\n bold: false,\n },\n render: ({ variant, bold }) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const [fontSize, setFontSize] = useState(\"1rem\");\n\n return (\n <div style={{ width: \"50vw\" }}>\n {variant === \"inherit\" && (\n <TextInput\n label=\"Fontstørrelse\"\n className=\"jkl-spacing-24--bottom\"\n value={fontSize}\n onChange={(e) => setFontSize(e.target.value)}\n width=\"10ch\"\n />\n )}\n <IconsExampleGrid style={{ fontSize }} columns=\"four\">\n {allIcons.map((Ico) => (\n <IconExample\n style={{ justifySelf: \"center\" }}\n key={Ico.displayName}\n renderIcon={() => (\n <Ico bold={bold} variant={variant} />\n )}\n name={Ico.displayName}\n />\n ))}\n </IconsExampleGrid>\n </div>\n );\n },\n};\n"],"names":["IconExample","name","renderIcon","restProps","jsx","title","children","IconsExampleGrid","columns","rest","className","meta","component","Icon","parameters","layout","tags","argTypes","variant","control","options","allIcons","ArrowDownIcon","ArrowLeftIcon","ArrowNorthEastIcon","ArrowRightIcon","ArrowUpIcon","CalendarIcon","CheckIcon","ChevronDownIcon","ChevronLeftIcon","ChevronRightIcon","ChevronUpIcon","CloseIcon","CopyIcon","DotsIcon","DragIcon","ErrorIcon","GreenCheckIcon","HamburgerIcon","InfoIcon","LinkIcon","MinusIcon","OpenInNewIcon","PenIcon","PlusIcon","QuestionIcon","RedCrossIcon","SearchIcon","SuccessIcon","ThumbDownIcon","ThumbUpIcon","TrashCanIcon","WarningIcon","Ikoner","args","bold","render","fontSize","setFontSize","useState","style","width","TextInput","label","value","onChange","e","target","map","Ico","justifySelf","displayName"],"mappings":"yoDAOO,MAAMA,EAA+B,EACxCC,KAAAA,EACAC,WAAAA,KACGC,KAEHC,MAAC,OAAIC,MAAOJ,GAAQC,EAAWD,QAAUE,EACpCG,SAAAJ,MCJIK,EAAoD,EAC7DC,QAAAA,EACAF,SAAAA,KACGG,KAEHL,EAAAA,IAAC,MAAA,CACGM,UAAW,sCAAsCF,eAC7CC,EAEHH,SAAAA,IC0BHK,EAAa,CACfN,MAAO,qBACPO,UAAWC,EAAAA,KACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,YACPC,SAAU,CACNC,QAAS,CACLC,QAAS,QACTC,QAAS,CAAC,UAAW,SAAU,YASrCC,EAAW,CACbC,EAAAA,cACAC,EAAAA,cACAC,EAAAA,mBACAC,EAAAA,eACAC,EAAAA,YACAC,EAAAA,aACAC,EAAAA,UACAC,EAAAA,gBACAC,EAAAA,gBACAC,EAAAA,iBACAC,EAAAA,cACAC,EAAAA,UACAC,EAAAA,SACAC,EAAAA,SACAC,EAAAA,SACAC,EAAAA,UACAC,EAAAA,eACAC,EAAAA,cACAC,EAAAA,SACAC,EAAAA,SACAC,EAAAA,UACAC,EAAAA,cACAC,EAAAA,QACAC,EAAAA,SACAC,EAAAA,aACAC,EAAAA,aACAC,EAAAA,WACAC,EAAAA,YACAC,EAAAA,cACAC,EAAAA,YACAC,EAAAA,aACAC,EAAAA,aAGSC,EAAgB,CACzBC,KAAM,CACFrC,QAAS,QACTsC,MAAM,GAEVC,OAAQ,EAAGvC,QAAAA,EAASsC,KAAAA,MAEhB,MAAOE,EAAUC,GAAeC,EAAAA,SAAS,QAEzC,cACK,MAAI,CAAAC,MAAO,CAAEC,MAAO,QAChBxD,SAAA,CAAY,YAAZY,GACGd,EAAAA,IAAC2D,EAAAA,UAAA,CACGC,MAAM,gBACNtD,UAAU,yBACVuD,MAAOP,EACPQ,SAAWC,GAAMR,EAAYQ,EAAEC,OAAOH,OACtCH,MAAM,SAGd1D,EAAAA,IAACG,EAAiB,CAAAsD,MAAO,CAAEH,SAAAA,GAAYlD,QAAQ,OAC1CF,SAAAe,EAASgD,KAAKC,GACXlE,EAAAA,IAACJ,EAAA,CACG6D,MAAO,CAAEU,YAAa,UAEtBrE,WAAY,IACPE,EAAAA,IAAAkE,EAAA,CAAId,KAAAA,EAAYtC,QAAAA,IAErBjB,KAAMqE,EAAIE,aAJLF,EAAIE,mBAQzB"}

package/build/cjs/components/icon-button/IconButton.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconButton.cjs","sources":["../../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport type { IconButtonProps } from \"./types.js\";\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n (props, ref) => {\n const { className, children, density, ...rest } = props;\n return (\n <button\n ref={ref}\n type=\"button\"\n className={clsx(\"jkl-icon-button\", className)}\n data-testid=\"jkl-icon-button\"\n data-density={density}\n {...rest}\n >\n {children}\n </button>\n );\n },\n);\n\nIconButton.displayName = \"IconButton\";\n"],"names":["IconButton","forwardRef","props","ref","className","children","density","rest","jsx","type","clsx","displayName"],"mappings":"6JAIaA,mBAAaC,YACtB,CAACC,EAAOC,KACJ,MAAQC,UAAAA,EAAWC,SAAAA,EAAUC,QAAAA,KAAYC,GAASL,EAE9C,OAAAM,EAAAA,IAAC,SAAA,CACGL,IAAAA,EACAM,KAAK,SACLL,UAAWM,EAAAA,KAAK,kBAAmBN,GACnC,cAAY,kBACZ,eAAcE,KACVC,EAEHF,SAAAA,~~GAAA~~,~~IAMjBL~~,EAAWW,YAAc"}
1	+ {"version":3,"file":"IconButton.cjs","sources":["../../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport type { IconButtonProps } from \"./types.js\";\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n (props, ref) => {\n const { className, children, density, ...rest } = props;\n return (\n <button\n ref={ref}\n type=\"button\"\n className={clsx(\"jkl-icon-button\", className)}\n data-testid=\"jkl-icon-button\"\n data-density={density}\n {...rest}\n >\n {children}\n </button>\n );\n },\n);\n\nIconButton.displayName = \"IconButton\";\n"],"names":["IconButton","forwardRef","props","ref","className","children","density","rest","jsx","type","clsx","displayName"],"mappings":"6JAIaA,mBAAaC,YACtB,CAACC,EAAOC,KACJ,MAAQC,UAAAA,EAAWC,SAAAA,EAAUC,QAAAA,KAAYC,GAASL,EAE9C,OAAAM,EAAAA,IAAC,SAAA,CACGL,IAAAA,EACAM,KAAK,SACLL,UAAWM,EAAAA,KAAK,kBAAmBN,GACnC,cAAY,kBACZ,eAAcE,KACVC,EAEHF,SAAAA,GACL,IAKZL,EAAWW,YAAc"}

package/build/cjs/components/icon-button/stories/IconButton.stories.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconButton.stories.cjs","sources":["../../../../../src/components/icon-button/stories/IconButton.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { PenIcon } from \"../../icon/icons/PenIcon.js\";\nimport { IconButton } from \"../IconButton.js\";\nimport \"../styles/_index.scss\";\n\nconst meta: Meta = {\n title: \"Komponenter/IconButton\",\n component: IconButton,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof IconButton>;\n\nexport const IconButtonStory: Story = {\n name: \"IconButton\",\n args: {\n children: <PenIcon />,\n },\n render: (props) => <IconButton {...props} />,\n};\n"],"names":["meta","title","component","IconButton","parameters","layout","tags","IconButtonStory","name","args","children","PenIcon","render","props","jsx"],"mappings":"iPAMMA,EAAa,CACfC,MAAO,yBACPC,UAAWC,EAAAA,WACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOEC,EAAyB,CAClCC,KAAM,aACNC,KAAM,CACFC,eAAWC,~~EAAQA~~,~~QAAA~~,~~KAEvBC~~,OAASC,GAAWC,EAAAA,IAAAX,EAAAA,WAAA,IAAeU"}
1	+ {"version":3,"file":"IconButton.stories.cjs","sources":["../../../../../src/components/icon-button/stories/IconButton.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { PenIcon } from \"../../icon/icons/PenIcon.js\";\nimport { IconButton } from \"../IconButton.js\";\nimport \"../styles/_index.scss\";\n\nconst meta: Meta = {\n title: \"Komponenter/IconButton\",\n component: IconButton,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof IconButton>;\n\nexport const IconButtonStory: Story = {\n name: \"IconButton\",\n args: {\n children: <PenIcon />,\n },\n render: (props) => <IconButton {...props} />,\n};\n"],"names":["meta","title","component","IconButton","parameters","layout","tags","IconButtonStory","name","args","children","PenIcon","render","props","jsx"],"mappings":"iPAMMA,EAAa,CACfC,MAAO,yBACPC,UAAWC,EAAAA,WACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOEC,EAAyB,CAClCC,KAAM,aACNC,KAAM,CACFC,eAAWC,EAAAA,QAAQ,CAAA,IAEvBC,OAASC,GAAWC,EAAAA,IAAAX,EAAAA,WAAA,IAAeU"}

package/build/cjs/components/image/Image.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.cjs","sources":["../../../../src/components/image/Image.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport { useElementDimensions } from \"../../hooks/useElementDimensions/useElementDimensions.js\";\nimport type { ImageProps } from \"./types.js\";\nimport { useImageLoadingStatus } from \"./useImageLoadingStatus.js\";\n\nexport const Image: FC<ImageProps> = ({\n className,\n placeholder,\n alt,\n ...imageProperties\n}) => {\n const [imageRef, imageLoaded] = useImageLoadingStatus();\n const [containerRef, dimensions] =\n useElementDimensions<HTMLDivElement>(400);\n\n return (\n <div\n ref={containerRef}\n className={clsx(\"jkl-image\", className, {\n \"jkl-image--loading\": !imageLoaded,\n })}\n >\n {/* Placeholder er bevisst uten loading og decoding for å vises umiddelbart /}\n <img\n className=\"jkl-image__placeholder\"\n alt={alt}\n src={placeholder \|\| imageProperties.src}\n />\n {/ biome-ignore lint/a11y/useAltText: Den har da vitterlig en alt-attributt? */}\n <img\n alt={alt}\n className=\"jkl-image__image\"\n data-testid=\"jkl-image__image\"\n ref={imageRef}\n sizes={`${dimensions.width}px`}\n loading=\"lazy\"\n decoding=\"async\"\n {...imageProperties}\n />\n </div>\n );\n};\n"],"names":["className","placeholder","alt","imageProperties","imageRef","imageLoaded","useImageLoadingStatus","containerRef","dimensions","useElementDimensions","jsxs","ref","clsx","children","jsx","src","sizes","width","loading","decoding"],"mappings":"kTAMqC,EACjCA,UAAAA,EACAC,YAAAA,EACAC,IAAAA,KACGC,MAEH,MAAOC,EAAUC,GAAeC,~~EAAsBA~~,~~yBAC/CC,~~EAAcC,GACjBC,~~uBAAqC~~,KAGrC,OAAAC,EAAAA,KAAC,MAAA,CACGC,IAAKJ,EACLP,UAAWY,EAAAA,KAAK,YAAaZ,EAAW,CACpC,sBAAuBK,IAI3BQ,SAAA,CAAAC,EAAAA,IAAC,MAAA,CACGd,UAAU,yBACVE,IAAAA,EACAa,IAAKd,GAAeE,EAAgBY,MAGxCD,EAAAA,IAAC,MAAA,CACGZ,IAAAA,EACAF,UAAU,mBACV,cAAY,mBACZW,IAAKP,EACLY,MAAO,GAAGR,EAAWS,UACrBC,QAAQ,OACRC,SAAS,WACLhB,~~MACR~~"}
1	+ {"version":3,"file":"Image.cjs","sources":["../../../../src/components/image/Image.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport { useElementDimensions } from \"../../hooks/useElementDimensions/useElementDimensions.js\";\nimport type { ImageProps } from \"./types.js\";\nimport { useImageLoadingStatus } from \"./useImageLoadingStatus.js\";\n\nexport const Image: FC<ImageProps> = ({\n className,\n placeholder,\n alt,\n ...imageProperties\n}) => {\n const [imageRef, imageLoaded] = useImageLoadingStatus();\n const [containerRef, dimensions] =\n useElementDimensions<HTMLDivElement>(400);\n\n return (\n <div\n ref={containerRef}\n className={clsx(\"jkl-image\", className, {\n \"jkl-image--loading\": !imageLoaded,\n })}\n >\n {/* Placeholder er bevisst uten loading og decoding for å vises umiddelbart /}\n <img\n className=\"jkl-image__placeholder\"\n alt={alt}\n src={placeholder \|\| imageProperties.src}\n />\n {/ biome-ignore lint/a11y/useAltText: Den har da vitterlig en alt-attributt? */}\n <img\n alt={alt}\n className=\"jkl-image__image\"\n data-testid=\"jkl-image__image\"\n ref={imageRef}\n sizes={`${dimensions.width}px`}\n loading=\"lazy\"\n decoding=\"async\"\n {...imageProperties}\n />\n </div>\n );\n};\n"],"names":["className","placeholder","alt","imageProperties","imageRef","imageLoaded","useImageLoadingStatus","containerRef","dimensions","useElementDimensions","jsxs","ref","clsx","children","jsx","src","sizes","width","loading","decoding"],"mappings":"kTAMqC,EACjCA,UAAAA,EACAC,YAAAA,EACAC,IAAAA,KACGC,MAEH,MAAOC,EAAUC,GAAeC,2BACzBC,EAAcC,GACjBC,EAAAA,qBAAqC,KAGrC,OAAAC,EAAAA,KAAC,MAAA,CACGC,IAAKJ,EACLP,UAAWY,EAAAA,KAAK,YAAaZ,EAAW,CACpC,sBAAuBK,IAI3BQ,SAAA,CAAAC,EAAAA,IAAC,MAAA,CACGd,UAAU,yBACVE,IAAAA,EACAa,IAAKd,GAAeE,EAAgBY,MAGxCD,EAAAA,IAAC,MAAA,CACGZ,IAAAA,EACAF,UAAU,mBACV,cAAY,mBACZW,IAAKP,EACLY,MAAO,GAAGR,EAAWS,UACrBC,QAAQ,OACRC,SAAS,WACLhB,MAEZ"}

package/build/cjs/components/image/stories/Image.stories.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.stories.cjs","sources":["../../../../../src/components/image/stories/Image.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { Image } from \"../Image.js\";\nimport type { ImageProps } from \"../types.js\";\nimport \"../styles/_index.scss\";\nimport \"./styles.scss\";\n\nconst dog400 = \"/images/dog-400.jpg\";\nconst dog800 = \"/images/dog-800.jpg\";\nconst dog1200 = \"/images/dog-1200.jpg\";\nconst dog1920 = \"/images/dog-1920.jpg\";\nconst thumbnail = \"/images/thumbnail.jpg\";\n\nexport default {\n title: \"Komponenter/Image\",\n component: Image,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n args: {\n src: dog400,\n srcSet: `${dog400} 400w, ${dog800} 800w, ${dog1200} 1200w, ${dog1920} 1920w`,\n placeholder: thumbnail,\n },\n argTypes: {\n className: {\n control: \"radio\",\n options: [\"fluid\", \"static\"],\n },\n },\n} satisfies Meta<typeof Image>;\n\nexport const Fluid: StoryObj<ImageProps> = {\n args: {\n className: \"fluid\",\n },\n render: (props) => {\n return (\n <div style={{ width: \"50vw\", height: \"auto\" }}>\n <Image {...props} />\n </div>\n );\n },\n};\n\nexport const Static: StoryObj<ImageProps> = {\n args: {\n className: \"static\",\n },\n render: (props) => {\n return (\n <div style={{ width: \"50vw\", height: \"auto\" }}>\n <Image {...props} />\n </div>\n );\n },\n};\n"],"names":["dog400","Image_stories","title","component","Image","parameters","layout","tags","args","src","srcSet","placeholder","argTypes","className","control","options","Fluid","render","props","jsx","style","width","height","children","Static"],"mappings":"kMAOMA,EAAS,sBAMAC,EAAA,CACXC,MAAO,oBACPC,UAAWC,EAAAA,MACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,YACPC,KAAM,CACFC,IAAKT,EACLU,OAAQ,GAAGV,2FACXW,YAZU,yBAcdC,SAAU,CACNC,UAAW,CACPC,QAAS,QACTC,QAAS,CAAC,QAAS,aAKlBC,EAA8B,CACvCR,KAAM,CACFK,UAAW,SAEfI,OAASC,GAEAC,EAAAA,IAAA,MAAA,CAAIC,MAAO,CAAEC,MAAO,OAAQC,OAAQ,QACjCC,SAAAJ,EAAAA,IAACf,~~EAAOA~~,~~MAAA~~,IAAGc,OAMdM,EAA+B,CACxChB,KAAM,CACFK,UAAW,UAEfI,OAASC,GAEAC,EAAAA,IAAA,MAAA,CAAIC,MAAO,CAAEC,MAAO,OAAQC,OAAQ,QACjCC,SAAAJ,EAAAA,IAACf,~~EAAOA~~,~~MAAA~~,IAAGc"}
1	+ {"version":3,"file":"Image.stories.cjs","sources":["../../../../../src/components/image/stories/Image.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { Image } from \"../Image.js\";\nimport type { ImageProps } from \"../types.js\";\nimport \"../styles/_index.scss\";\nimport \"./styles.scss\";\n\nconst dog400 = \"/images/dog-400.jpg\";\nconst dog800 = \"/images/dog-800.jpg\";\nconst dog1200 = \"/images/dog-1200.jpg\";\nconst dog1920 = \"/images/dog-1920.jpg\";\nconst thumbnail = \"/images/thumbnail.jpg\";\n\nexport default {\n title: \"Komponenter/Image\",\n component: Image,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n args: {\n src: dog400,\n srcSet: `${dog400} 400w, ${dog800} 800w, ${dog1200} 1200w, ${dog1920} 1920w`,\n placeholder: thumbnail,\n },\n argTypes: {\n className: {\n control: \"radio\",\n options: [\"fluid\", \"static\"],\n },\n },\n} satisfies Meta<typeof Image>;\n\nexport const Fluid: StoryObj<ImageProps> = {\n args: {\n className: \"fluid\",\n },\n render: (props) => {\n return (\n <div style={{ width: \"50vw\", height: \"auto\" }}>\n <Image {...props} />\n </div>\n );\n },\n};\n\nexport const Static: StoryObj<ImageProps> = {\n args: {\n className: \"static\",\n },\n render: (props) => {\n return (\n <div style={{ width: \"50vw\", height: \"auto\" }}>\n <Image {...props} />\n </div>\n );\n },\n};\n"],"names":["dog400","Image_stories","title","component","Image","parameters","layout","tags","args","src","srcSet","placeholder","argTypes","className","control","options","Fluid","render","props","jsx","style","width","height","children","Static"],"mappings":"kMAOMA,EAAS,sBAMAC,EAAA,CACXC,MAAO,oBACPC,UAAWC,EAAAA,MACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,YACPC,KAAM,CACFC,IAAKT,EACLU,OAAQ,GAAGV,2FACXW,YAZU,yBAcdC,SAAU,CACNC,UAAW,CACPC,QAAS,QACTC,QAAS,CAAC,QAAS,aAKlBC,EAA8B,CACvCR,KAAM,CACFK,UAAW,SAEfI,OAASC,GAEAC,EAAAA,IAAA,MAAA,CAAIC,MAAO,CAAEC,MAAO,OAAQC,OAAQ,QACjCC,SAAAJ,EAAAA,IAACf,EAAAA,MAAO,IAAGc,OAMdM,EAA+B,CACxChB,KAAM,CACFK,UAAW,UAEfI,OAASC,GAEAC,EAAAA,IAAA,MAAA,CAAIC,MAAO,CAAEC,MAAO,OAAQC,OAAQ,QACjCC,SAAAJ,EAAAA,IAACf,EAAAA,MAAO,IAAGc"}

package/build/cjs/components/image/useImageLoadingStatus.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useImageLoadingStatus.cjs","sources":["../../../../src/components/image/useImageLoadingStatus.ts"],"sourcesContent":["import { type RefObject, useEffect, useRef, useState } from \"react\";\n\nconst doWhenImageLoaded = (image: HTMLImageElement, callback?: () => void) => {\n let timeout: number \| undefined;\n\n function checkLoaded() {\n if (image.complete) {\n clearTimeout(timeout);\n callback?.();\n return;\n }\n timeout = window.setTimeout(checkLoaded, 50);\n }\n\n checkLoaded();\n};\n\nexport const useImageLoadingStatus = (\n callback?: () => void,\n): [RefObject<HTMLImageElement>, boolean] => {\n const imageRef = useRef<HTMLImageElement>(null);\n const [imageLoaded, setImageLoaded] = useState(false);\n\n useEffect(() => {\n imageRef.current &&\n doWhenImageLoaded(imageRef.current, () => {\n setImageLoaded(true);\n callback?.();\n });\n }, [callback]);\n\n return [imageRef, imageLoaded];\n};\n"],"names":["callback","imageRef","useRef","imageLoaded","setImageLoaded","useState","useEffect","current","image","timeout","checkLoaded","complete","clearTimeout","window","setTimeout","doWhenImageLoaded"],"mappings":"uIAkBIA,IAEM,MAAAC,EAAWC,SAAyB,OACnCC,EAAaC,GAAkBC,~~YAAS~~,GAE/CC,OAAAA,EAAAA,WAAU,KACNL,EAASM,SAtBS,EAACC,EAAyBR,KAC5C,IAAAS,GAEJ,SAASC,IACL,GAAIF,EAAMG,SAGN,OAFAC,aAAaH,QACF,MAAAT,GAAAA,KAGLS,EAAAI,OAAOC,WAAWJ,EAAa,~~GAC7C~~,~~CAEYA~~,~~IAWJK~~,CAAkBd,EAASM,SAAS,KAChCH,GAAe,GACJ,MAAAJ,GAAAA,MACd,GACN,CAACA,IAEG,CAACC,EAAUE,EAAW"}
1	+ {"version":3,"file":"useImageLoadingStatus.cjs","sources":["../../../../src/components/image/useImageLoadingStatus.ts"],"sourcesContent":["import { type RefObject, useEffect, useRef, useState } from \"react\";\n\nconst doWhenImageLoaded = (image: HTMLImageElement, callback?: () => void) => {\n let timeout: number \| undefined;\n\n function checkLoaded() {\n if (image.complete) {\n clearTimeout(timeout);\n callback?.();\n return;\n }\n timeout = window.setTimeout(checkLoaded, 50);\n }\n\n checkLoaded();\n};\n\nexport const useImageLoadingStatus = (\n callback?: () => void,\n): [RefObject<HTMLImageElement>, boolean] => {\n const imageRef = useRef<HTMLImageElement>(null);\n const [imageLoaded, setImageLoaded] = useState(false);\n\n useEffect(() => {\n imageRef.current &&\n doWhenImageLoaded(imageRef.current, () => {\n setImageLoaded(true);\n callback?.();\n });\n }, [callback]);\n\n return [imageRef, imageLoaded];\n};\n"],"names":["callback","imageRef","useRef","imageLoaded","setImageLoaded","useState","useEffect","current","image","timeout","checkLoaded","complete","clearTimeout","window","setTimeout","doWhenImageLoaded"],"mappings":"uIAkBIA,IAEM,MAAAC,EAAWC,SAAyB,OACnCC,EAAaC,GAAkBC,EAAAA,UAAS,GAE/CC,OAAAA,EAAAA,WAAU,KACNL,EAASM,SAtBS,EAACC,EAAyBR,KAC5C,IAAAS,GAEJ,SAASC,IACL,GAAIF,EAAMG,SAGN,OAFAC,aAAaH,QACF,MAAAT,GAAAA,KAGLS,EAAAI,OAAOC,WAAWJ,EAAa,GAAE,CAGnCA,EAAA,EAWJK,CAAkBd,EAASM,SAAS,KAChCH,GAAe,GACJ,MAAAJ,GAAAA,MACd,GACN,CAACA,IAEG,CAACC,EAAUE,EAAW"}

package/build/cjs/components/input-group/FieldGroup.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroup.cjs","sources":["../../../../src/components/input-group/FieldGroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { Label } from \"./Label.js\";\nimport { SupportLabel } from \"./SupportLabel.js\";\nimport type { FieldGroupProps } from \"./types.js\";\n\nexport const FieldGroup: FC<FieldGroupProps> = (props) => {\n const {\n id,\n legend,\n labelProps,\n supportLabelProps,\n tooltip,\n className,\n children,\n helpLabel,\n errorLabel,\n density,\n \"data-testautoid\": testAutoId,\n ...rest\n } = props;\n\n const uid = useId(id \|\| \"jkl-field-group\", { generateSuffix: !id });\n const supportId = `${uid}_support-label`;\n\n const supportText = errorLabel \|\| helpLabel;\n const supportTextType = errorLabel\n ? \"error\"\n : helpLabel\n ? \"help\"\n : undefined;\n\n const describedBy = supportText ? supportId : undefined;\n\n return (\n <fieldset\n id={uid}\n className={clsx(\"jkl-field-group\", className)}\n data-testautoid={testAutoId}\n {...rest}\n aria-describedby={describedBy}\n data-density={density}\n >\n <legend className=\"jkl-field-group__legend\">\n <Label {...labelProps} density={density}>\n {tooltip ? (\n <>\n <span style={{ whiteSpace: \"normal\" }}>\n {legend}\n </span>\n {\"\\u00A0\"}\n {tooltip}\n </>\n ) : (\n legend\n )}\n </Label>\n </legend>\n {children}\n {(helpLabel \|\| errorLabel) && (\n <SupportLabel\n {...supportLabelProps}\n label={supportText}\n labelType={supportTextType}\n id={supportId}\n density={density}\n />\n )}\n </fieldset>\n );\n};\n"],"names":["props","id","legend","labelProps","supportLabelProps","tooltip","className","children","helpLabel","errorLabel","density","testAutoId","rest","uid","useId","generateSuffix","supportId","supportText","supportTextType","describedBy","jsxs","clsx","jsx","Label","Fragment","style","whiteSpace","SupportLabel","label","labelType"],"mappings":"ySAOgDA,IACtC,MACFC,GAAAA,EACAC,OAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,QAAAA,EACA,kBAAmBC,KAChBC,GACHZ,EAEEa,EAAMC,~~QAAMb~~,GAAM,kBAAmB,CAAEc,gBAAiBd,IACxDe,EAAY,GAAGH,kBAEfI,EAAcR,GAAcD,EAC5BU,EAAkBT,EAClB,QACAD,EACE,YACA,EAEFW,EAAcF,EAAcD,OAAY,EAG1C,OAAAI,EAAAA,KAAC,WAAA,CACGnB,GAAIY,EACJP,UAAWe,EAAAA,KAAK,kBAAmBf,GACnC,kBAAiBK,KACbC,EACJ,mBAAkBO,EAClB,eAAcT,EAEdH,SAAA,CAACe,EAAAA,IAAA,SAAA,CAAOhB,UAAU,0BACdC,SAAAe,EAAAA,IAACC,YAAUpB,EAAYO,QAAAA,EAClBH,SAAAF,EAEOe,EAAAA,KAAAI,EAAAA,SAAA,CAAAjB,SAAA,CAAAe,MAAC,QAAKG,MAAO,CAAEC,WAAY,UACtBnB,SACLL,IACC,IACAG,KAGLH,MAIXK,GACCC,GAAaC,IACXa,EAAAA,IAACK,EAAAA,aAAA,IACOvB,EACJwB,MAAOX,EACPY,UAAWX,EACXjB,GAAIe,EACJN,QAAAA,~~MACJ~~"}
1	+ {"version":3,"file":"FieldGroup.cjs","sources":["../../../../src/components/input-group/FieldGroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { Label } from \"./Label.js\";\nimport { SupportLabel } from \"./SupportLabel.js\";\nimport type { FieldGroupProps } from \"./types.js\";\n\nexport const FieldGroup: FC<FieldGroupProps> = (props) => {\n const {\n id,\n legend,\n labelProps,\n supportLabelProps,\n tooltip,\n className,\n children,\n helpLabel,\n errorLabel,\n density,\n \"data-testautoid\": testAutoId,\n ...rest\n } = props;\n\n const uid = useId(id \|\| \"jkl-field-group\", { generateSuffix: !id });\n const supportId = `${uid}_support-label`;\n\n const supportText = errorLabel \|\| helpLabel;\n const supportTextType = errorLabel\n ? \"error\"\n : helpLabel\n ? \"help\"\n : undefined;\n\n const describedBy = supportText ? supportId : undefined;\n\n return (\n <fieldset\n id={uid}\n className={clsx(\"jkl-field-group\", className)}\n data-testautoid={testAutoId}\n {...rest}\n aria-describedby={describedBy}\n data-density={density}\n >\n <legend className=\"jkl-field-group__legend\">\n <Label {...labelProps} density={density}>\n {tooltip ? (\n <>\n <span style={{ whiteSpace: \"normal\" }}>\n {legend}\n </span>\n {\"\\u00A0\"}\n {tooltip}\n </>\n ) : (\n legend\n )}\n </Label>\n </legend>\n {children}\n {(helpLabel \|\| errorLabel) && (\n <SupportLabel\n {...supportLabelProps}\n label={supportText}\n labelType={supportTextType}\n id={supportId}\n density={density}\n />\n )}\n </fieldset>\n );\n};\n"],"names":["props","id","legend","labelProps","supportLabelProps","tooltip","className","children","helpLabel","errorLabel","density","testAutoId","rest","uid","useId","generateSuffix","supportId","supportText","supportTextType","describedBy","jsxs","clsx","jsx","Label","Fragment","style","whiteSpace","SupportLabel","label","labelType"],"mappings":"ySAOgDA,IACtC,MACFC,GAAAA,EACAC,OAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,QAAAA,EACA,kBAAmBC,KAChBC,GACHZ,EAEEa,EAAMC,EAAAA,MAAMb,GAAM,kBAAmB,CAAEc,gBAAiBd,IACxDe,EAAY,GAAGH,kBAEfI,EAAcR,GAAcD,EAC5BU,EAAkBT,EAClB,QACAD,EACE,YACA,EAEFW,EAAcF,EAAcD,OAAY,EAG1C,OAAAI,EAAAA,KAAC,WAAA,CACGnB,GAAIY,EACJP,UAAWe,EAAAA,KAAK,kBAAmBf,GACnC,kBAAiBK,KACbC,EACJ,mBAAkBO,EAClB,eAAcT,EAEdH,SAAA,CAACe,EAAAA,IAAA,SAAA,CAAOhB,UAAU,0BACdC,SAAAe,EAAAA,IAACC,YAAUpB,EAAYO,QAAAA,EAClBH,SAAAF,EAEOe,EAAAA,KAAAI,EAAAA,SAAA,CAAAjB,SAAA,CAAAe,MAAC,QAAKG,MAAO,CAAEC,WAAY,UACtBnB,SACLL,IACC,IACAG,KAGLH,MAIXK,GACCC,GAAaC,IACXa,EAAAA,IAACK,EAAAA,aAAA,IACOvB,EACJwB,MAAOX,EACPY,UAAWX,EACXjB,GAAIe,EACJN,QAAAA,MAGZ"}

package/build/cjs/components/input-group/InputGroup.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputGroup.cjs","sources":["../../../../src/components/input-group/InputGroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { Label } from \"./Label.js\";\nimport { SupportLabel } from \"./SupportLabel.js\";\nimport type { InputGroupProps, InputProps } from \"./types.js\";\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(\n (props, ref) => {\n const {\n className,\n children,\n density,\n errorLabel,\n helpLabel,\n inline,\n label,\n labelProps,\n render,\n supportLabelProps,\n tooltip,\n id,\n ...rest\n } = props;\n\n const uid = useId(id \|\| \"jkl-input\", { generateSuffix: !id });\n const supportId = useId(\"jkl-support-label\");\n\n const hasTooltip = !!tooltip;\n\n const supportText = errorLabel \|\| helpLabel;\n const supportTextType = errorLabel\n ? \"error\"\n : helpLabel\n ? \"help\"\n : undefined;\n\n const describedBy = supportText ? supportId : undefined;\n\n const inputProps: InputProps = {\n \"aria-describedby\": describedBy,\n \"aria-invalid\": errorLabel ? true : undefined,\n id: uid,\n };\n\n const renderInput = render\n ? () => render(inputProps)\n : () => {\n const input = React.Children.toArray(props.children)[0];\n\n if (!React.isValidElement<InputProps>(input)) return;\n\n return React.cloneElement<InputProps>(input, {\n ...inputProps,\n ...input.props,\n });\n };\n\n return (\n <div\n ref={ref}\n className={clsx(className, \"jkl-input-group\", {\n \"jkl-input-group--inline\": inline,\n })}\n data-density={density}\n {...rest}\n >\n <Label\n standAlone\n htmlFor={uid}\n srOnly={inline}\n {...labelProps}\n style={{\n whiteSpace: hasTooltip ? \"nowrap\" : undefined,\n ...labelProps?.style,\n }}\n density={density}\n >\n {hasTooltip ? (\n <>\n <span style={{ whiteSpace: \"normal\" }}>\n {label}\n </span>\n {\"\\u00A0\"}\n {tooltip}\n </>\n ) : (\n label\n )}\n </Label>\n {renderInput()}\n <SupportLabel\n srOnly={inline}\n {...supportLabelProps}\n label={supportText}\n labelType={supportTextType}\n id={supportId}\n density={density}\n />\n </div>\n );\n },\n);\n\nInputGroup.displayName = \"InputGroup\";\n"],"names":["InputGroup","forwardRef","props","ref","className","children","density","errorLabel","helpLabel","inline","label","labelProps","render","supportLabelProps","tooltip","id","rest","uid","useId","generateSuffix","supportId","hasTooltip","supportText","supportTextType","inputProps","renderInput","input","React","Children","toArray","isValidElement","cloneElement","jsxs","clsx","jsx","Label","standAlone","htmlFor","srOnly","style","whiteSpace","Fragment","SupportLabel","labelType","displayName"],"mappings":"kRAOaA,EAAaC,EAAAA,YACtB,CAACC,EAAOC,KACE,MACFC,UAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,GAAAA,KACGC,GACHd,EAEEe,EAAMC,~~QAAMH~~,GAAM,YAAa,CAAEI,gBAAiBJ,IAClDK,EAAYF,QAAM,qBAElBG,IAAeP,EAEfQ,EAAcf,GAAcC,EAC5Be,EAAkBhB,EAClB,QACAC,EACE,YACA,EAIFgB,EAAyB,CAC3B,mBAHgBF,EAAcF,OAAY,EAI1C,iBAAgBb,QAAoB,EACpCQ,GAAIE,GAGFQ,EAAcb,EACd,IAAMA,EAAOY,GACb,KACI,MAAME,EAAQC,EAAMC,SAASC,QAAQ3B,EAAMG,UAAU,GAErD,GAAKsB,EAAMG,eAA2BJ,GAE/B,OAAAC,EAAMI,aAAyBL,EAAO,IACtCF,KACAE,EAAMxB,OACZ,EAIP,OAAA8B,EAAAA,KAAC,MAAA,CACG7B,IAAAA,EACAC,UAAW6B,EAAAA,KAAK7B,EAAW,kBAAmB,CAC1C,0BAA2BK,IAE/B,eAAcH,KACVU,EAEJX,SAAA,CAAA6B,EAAAA,IAACC,EAAAA,MAAA,CACGC,YAAU,EACVC,QAASpB,EACTqB,OAAQ7B,KACJE,EACJ4B,MAAO,CACHC,WAAYnB,EAAa,cAAW,KACjC,MAAAV,OAAAA,EAAAA,EAAY4B,OAEnBjC,QAAAA,EAECD,WAEO2B,EAAAA,KAAAS,EAAAA,SAAA,CAAApC,SAAA,CAAA6B,MAAC,QAAKK,MAAO,CAAEC,WAAY,UACtBnC,SACLK,IACC,IACAI,KAGLJ,IAGPe,IACDS,EAAAA,IAACQ,EAAAA,aAAA,CACGJ,OAAQ7B,KACJI,EACJH,MAAOY,EACPqB,UAAWpB,EACXR,GAAIK,EACJd,QAAAA,~~MACJ~~,~~IAMhBN~~,EAAW4C,YAAc"}
1	+ {"version":3,"file":"InputGroup.cjs","sources":["../../../../src/components/input-group/InputGroup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { Label } from \"./Label.js\";\nimport { SupportLabel } from \"./SupportLabel.js\";\nimport type { InputGroupProps, InputProps } from \"./types.js\";\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(\n (props, ref) => {\n const {\n className,\n children,\n density,\n errorLabel,\n helpLabel,\n inline,\n label,\n labelProps,\n render,\n supportLabelProps,\n tooltip,\n id,\n ...rest\n } = props;\n\n const uid = useId(id \|\| \"jkl-input\", { generateSuffix: !id });\n const supportId = useId(\"jkl-support-label\");\n\n const hasTooltip = !!tooltip;\n\n const supportText = errorLabel \|\| helpLabel;\n const supportTextType = errorLabel\n ? \"error\"\n : helpLabel\n ? \"help\"\n : undefined;\n\n const describedBy = supportText ? supportId : undefined;\n\n const inputProps: InputProps = {\n \"aria-describedby\": describedBy,\n \"aria-invalid\": errorLabel ? true : undefined,\n id: uid,\n };\n\n const renderInput = render\n ? () => render(inputProps)\n : () => {\n const input = React.Children.toArray(props.children)[0];\n\n if (!React.isValidElement<InputProps>(input)) return;\n\n return React.cloneElement<InputProps>(input, {\n ...inputProps,\n ...input.props,\n });\n };\n\n return (\n <div\n ref={ref}\n className={clsx(className, \"jkl-input-group\", {\n \"jkl-input-group--inline\": inline,\n })}\n data-density={density}\n {...rest}\n >\n <Label\n standAlone\n htmlFor={uid}\n srOnly={inline}\n {...labelProps}\n style={{\n whiteSpace: hasTooltip ? \"nowrap\" : undefined,\n ...labelProps?.style,\n }}\n density={density}\n >\n {hasTooltip ? (\n <>\n <span style={{ whiteSpace: \"normal\" }}>\n {label}\n </span>\n {\"\\u00A0\"}\n {tooltip}\n </>\n ) : (\n label\n )}\n </Label>\n {renderInput()}\n <SupportLabel\n srOnly={inline}\n {...supportLabelProps}\n label={supportText}\n labelType={supportTextType}\n id={supportId}\n density={density}\n />\n </div>\n );\n },\n);\n\nInputGroup.displayName = \"InputGroup\";\n"],"names":["InputGroup","forwardRef","props","ref","className","children","density","errorLabel","helpLabel","inline","label","labelProps","render","supportLabelProps","tooltip","id","rest","uid","useId","generateSuffix","supportId","hasTooltip","supportText","supportTextType","inputProps","renderInput","input","React","Children","toArray","isValidElement","cloneElement","jsxs","clsx","jsx","Label","standAlone","htmlFor","srOnly","style","whiteSpace","Fragment","SupportLabel","labelType","displayName"],"mappings":"kRAOaA,EAAaC,EAAAA,YACtB,CAACC,EAAOC,KACE,MACFC,UAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,GAAAA,KACGC,GACHd,EAEEe,EAAMC,EAAAA,MAAMH,GAAM,YAAa,CAAEI,gBAAiBJ,IAClDK,EAAYF,QAAM,qBAElBG,IAAeP,EAEfQ,EAAcf,GAAcC,EAC5Be,EAAkBhB,EAClB,QACAC,EACE,YACA,EAIFgB,EAAyB,CAC3B,mBAHgBF,EAAcF,OAAY,EAI1C,iBAAgBb,QAAoB,EACpCQ,GAAIE,GAGFQ,EAAcb,EACd,IAAMA,EAAOY,GACb,KACI,MAAME,EAAQC,EAAMC,SAASC,QAAQ3B,EAAMG,UAAU,GAErD,GAAKsB,EAAMG,eAA2BJ,GAE/B,OAAAC,EAAMI,aAAyBL,EAAO,IACtCF,KACAE,EAAMxB,OACZ,EAIP,OAAA8B,EAAAA,KAAC,MAAA,CACG7B,IAAAA,EACAC,UAAW6B,EAAAA,KAAK7B,EAAW,kBAAmB,CAC1C,0BAA2BK,IAE/B,eAAcH,KACVU,EAEJX,SAAA,CAAA6B,EAAAA,IAACC,EAAAA,MAAA,CACGC,YAAU,EACVC,QAASpB,EACTqB,OAAQ7B,KACJE,EACJ4B,MAAO,CACHC,WAAYnB,EAAa,cAAW,KACjC,MAAAV,OAAAA,EAAAA,EAAY4B,OAEnBjC,QAAAA,EAECD,WAEO2B,EAAAA,KAAAS,EAAAA,SAAA,CAAApC,SAAA,CAAA6B,MAAC,QAAKK,MAAO,CAAEC,WAAY,UACtBnC,SACLK,IACC,IACAI,KAGLJ,IAGPe,IACDS,EAAAA,IAACQ,EAAAA,aAAA,CACGJ,OAAQ7B,KACJI,EACJH,MAAOY,EACPqB,UAAWpB,EACXR,GAAIK,EACJd,QAAAA,MAER,IAKZN,EAAW4C,YAAc"}

package/build/cjs/components/input-group/Label.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Label.cjs","sources":["../../../../src/components/input-group/Label.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport type { LabelProps } from \"./types.js\";\n\nexport const Label: FC<LabelProps> = ({\n variant = \"small\",\n density,\n srOnly,\n children,\n standAlone,\n htmlFor,\n className = \"\",\n ...rest\n}) => {\n const labelClassNames = clsx(\"jkl-label\", className, {\n [`jkl-label--${variant}`]: variant,\n \"jkl-label--sr-only\": srOnly,\n });\n\n const C = standAlone ? \"label\" : \"span\";\n\n if (!standAlone && htmlFor) {\n htmlFor = undefined;\n if (process.env.NODE_ENV !== \"production\") {\n console.warn(\n \"WARNING: The standard Label component renders as a <span> element, which does not take a htmlFor prop. If you want the Label to belong to a specific input, use the standAlone prop, which renders as a <label> element instead. In most cases the Label component should not be used directly, as it is part of all our input components.\",\n );\n }\n }\n\n return (\n <C\n {...rest}\n className={labelClassNames}\n htmlFor={htmlFor}\n data-density={density}\n >\n {children}\n </C>\n );\n};\n"],"names":["variant","density","srOnly","children","standAlone","htmlFor","className","rest","labelClassNames","clsx","C","process","env","NODE_ENV","console","warn","jsx"],"mappings":"4LAIqC,EACjCA,QAAAA,EAAU,QACVC,QAAAA,EACAC,OAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,UAAAA,EAAY,MACTC,MAEG,MAAAC,EAAkBC,EAAAA,KAAK,YAAaH,EAAW,CACjD,CAAC,cAAcN,KAAYA,EAC3B,qBAAsBE,IAGpBQ,EAAIN,EAAa,QAAU,OAE7B,OAACA,GAAcC,IACLA,OAAA,EACmB,eAAzBM,QAAQC,IAAIC,UACJC,QAAAC,KACJ,+UAMRC,EAAAA,IAACN,EAAA,IACOH,EACJD,UAAWE,EACXH,QAAAA,EACA,eAAcJ,EAEbE,SAAAA,~~GAAA~~"}
1	+ {"version":3,"file":"Label.cjs","sources":["../../../../src/components/input-group/Label.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport type { LabelProps } from \"./types.js\";\n\nexport const Label: FC<LabelProps> = ({\n variant = \"small\",\n density,\n srOnly,\n children,\n standAlone,\n htmlFor,\n className = \"\",\n ...rest\n}) => {\n const labelClassNames = clsx(\"jkl-label\", className, {\n [`jkl-label--${variant}`]: variant,\n \"jkl-label--sr-only\": srOnly,\n });\n\n const C = standAlone ? \"label\" : \"span\";\n\n if (!standAlone && htmlFor) {\n htmlFor = undefined;\n if (process.env.NODE_ENV !== \"production\") {\n console.warn(\n \"WARNING: The standard Label component renders as a <span> element, which does not take a htmlFor prop. If you want the Label to belong to a specific input, use the standAlone prop, which renders as a <label> element instead. In most cases the Label component should not be used directly, as it is part of all our input components.\",\n );\n }\n }\n\n return (\n <C\n {...rest}\n className={labelClassNames}\n htmlFor={htmlFor}\n data-density={density}\n >\n {children}\n </C>\n );\n};\n"],"names":["variant","density","srOnly","children","standAlone","htmlFor","className","rest","labelClassNames","clsx","C","process","env","NODE_ENV","console","warn","jsx"],"mappings":"4LAIqC,EACjCA,QAAAA,EAAU,QACVC,QAAAA,EACAC,OAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,UAAAA,EAAY,MACTC,MAEG,MAAAC,EAAkBC,EAAAA,KAAK,YAAaH,EAAW,CACjD,CAAC,cAAcN,KAAYA,EAC3B,qBAAsBE,IAGpBQ,EAAIN,EAAa,QAAU,OAE7B,OAACA,GAAcC,IACLA,OAAA,EACmB,eAAzBM,QAAQC,IAAIC,UACJC,QAAAC,KACJ,+UAMRC,EAAAA,IAACN,EAAA,IACOH,EACJD,UAAWE,EACXH,QAAAA,EACA,eAAcJ,EAEbE,SAAAA,GACL"}

package/build/cjs/components/input-group/SupportLabel.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SupportLabel.cjs","sources":["../../../../src/components/input-group/SupportLabel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport type { SupportLabelProps } from \"./types.js\";\n\nexport const SupportLabel: FC<SupportLabelProps> = ({\n id,\n helpLabel,\n errorLabel,\n label,\n labelType = \"help\",\n density,\n className,\n srOnly,\n ...rest\n}) => {\n const hasLabel = errorLabel \|\| helpLabel \|\| label;\n\n const isHelp = labelType === \"help\" \|\| (helpLabel && !errorLabel);\n const isWarning = labelType === \"warning\" \|\| errorLabel;\n const isError = labelType === \"error\";\n const isSuccess = labelType === \"success\";\n\n const componentClassName = hasLabel\n ? clsx(\"jkl-form-support-label\", className, {\n \"jkl-form-support-label--sr-only\": srOnly,\n \"jkl-form-support-label--help\": isHelp,\n \"jkl-form-support-label--error\": isError,\n \"jkl-form-support-label--warning\": isWarning,\n \"jkl-form-support-label--success\": isSuccess,\n })\n : \"jkl-dormant-form-support-label\";\n\n const restProps = hasLabel ? rest : {};\n\n const Icon = isError ? ErrorIcon : isSuccess ? SuccessIcon : WarningIcon;\n\n return (\n <span\n id={id}\n className={componentClassName}\n {...restProps}\n data-density={density}\n >\n <Icon variant=\"small\" className=\"jkl-form-support-label__icon\" />\n <span>{errorLabel \|\| helpLabel \|\| label}</span>\n </span>\n );\n};\n"],"names":["id","helpLabel","errorLabel","label","labelType","density","className","srOnly","rest","hasLabel","isHelp","isWarning","isError","isSuccess","componentClassName","clsx","restProps","Icon","ErrorIcon","SuccessIcon","WarningIcon","jsxs","children","jsx","variant"],"mappings":"wUAOmD,EAC/CA,GAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,MAAAA,EACAC,UAAAA,EAAY,OACZC,QAAAA,EACAC,UAAAA,EACAC,OAAAA,KACGC,MAEG,MAAAC,EAAWP,GAAcD,GAAaE,EAEtCO,EAAuB,SAAdN,GAAyBH,IAAcC,EAChDS,EAA0B,YAAdP,GAA2BF,EACvCU,EAAwB,UAAdR,EACVS,EAA0B,YAAdT,EAEZU,EAAqBL,EACrBM,OAAK,yBAA0BT,EAAW,CACtC,kCAAmCC,EACnC,+BAAgCG,EAChC,gCAAiCE,EACjC,kCAAmCD,EACnC,kCAAmCE,IAEvC,iCAEAG,EAAYP,EAAWD,EAAO,~~GAE9BS~~,EAAOL,EAAUM,~~EAAAA~~,~~UAAYL~~,EAAYM,~~EAAAA~~,~~YAAcC~~,EAAAA,YAGzD,OAAAC,EAAAA,KAAC,OAAA,CACGrB,GAAAA,EACAM,UAAWQ,KACPE,EACJ,eAAcX,EAEdiB,SAAA,CAAAC,EAAAA,IAACN,EAAK,CAAAO,QAAQ,QAAQlB,UAAU,iCAC/BiB,EAAAA,IAAA,OAAA,CAAMD,SAAcpB,GAAAD,GAAaE,~~MAAM~~"}
1	+ {"version":3,"file":"SupportLabel.cjs","sources":["../../../../src/components/input-group/SupportLabel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport type { SupportLabelProps } from \"./types.js\";\n\nexport const SupportLabel: FC<SupportLabelProps> = ({\n id,\n helpLabel,\n errorLabel,\n label,\n labelType = \"help\",\n density,\n className,\n srOnly,\n ...rest\n}) => {\n const hasLabel = errorLabel \|\| helpLabel \|\| label;\n\n const isHelp = labelType === \"help\" \|\| (helpLabel && !errorLabel);\n const isWarning = labelType === \"warning\" \|\| errorLabel;\n const isError = labelType === \"error\";\n const isSuccess = labelType === \"success\";\n\n const componentClassName = hasLabel\n ? clsx(\"jkl-form-support-label\", className, {\n \"jkl-form-support-label--sr-only\": srOnly,\n \"jkl-form-support-label--help\": isHelp,\n \"jkl-form-support-label--error\": isError,\n \"jkl-form-support-label--warning\": isWarning,\n \"jkl-form-support-label--success\": isSuccess,\n })\n : \"jkl-dormant-form-support-label\";\n\n const restProps = hasLabel ? rest : {};\n\n const Icon = isError ? ErrorIcon : isSuccess ? SuccessIcon : WarningIcon;\n\n return (\n <span\n id={id}\n className={componentClassName}\n {...restProps}\n data-density={density}\n >\n <Icon variant=\"small\" className=\"jkl-form-support-label__icon\" />\n <span>{errorLabel \|\| helpLabel \|\| label}</span>\n </span>\n );\n};\n"],"names":["id","helpLabel","errorLabel","label","labelType","density","className","srOnly","rest","hasLabel","isHelp","isWarning","isError","isSuccess","componentClassName","clsx","restProps","Icon","ErrorIcon","SuccessIcon","WarningIcon","jsxs","children","jsx","variant"],"mappings":"wUAOmD,EAC/CA,GAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,MAAAA,EACAC,UAAAA,EAAY,OACZC,QAAAA,EACAC,UAAAA,EACAC,OAAAA,KACGC,MAEG,MAAAC,EAAWP,GAAcD,GAAaE,EAEtCO,EAAuB,SAAdN,GAAyBH,IAAcC,EAChDS,EAA0B,YAAdP,GAA2BF,EACvCU,EAAwB,UAAdR,EACVS,EAA0B,YAAdT,EAEZU,EAAqBL,EACrBM,OAAK,yBAA0BT,EAAW,CACtC,kCAAmCC,EACnC,+BAAgCG,EAChC,gCAAiCE,EACjC,kCAAmCD,EACnC,kCAAmCE,IAEvC,iCAEAG,EAAYP,EAAWD,EAAO,CAAC,EAE/BS,EAAOL,EAAUM,EAAYA,UAAAL,EAAYM,EAAcA,YAAAC,EAAAA,YAGzD,OAAAC,EAAAA,KAAC,OAAA,CACGrB,GAAAA,EACAM,UAAWQ,KACPE,EACJ,eAAcX,EAEdiB,SAAA,CAAAC,EAAAA,IAACN,EAAK,CAAAO,QAAQ,QAAQlB,UAAU,iCAC/BiB,EAAAA,IAAA,OAAA,CAAMD,SAAcpB,GAAAD,GAAaE,MACtC"}

package/build/cjs/components/input-group/stories/FieldGroup.stories.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime");require("react");const r=require("../../checkbox/Checkbox.cjs"),o=require("../../tooltip/PopupTip.cjs"),t=require("../FieldGroup.cjs");,/* empty css                            */;/* empty css                            */const i={title:"Komponenter/InputGroup/FieldGroup",component:t.FieldGroup,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{tooltip:{type:"boolean"}}},l=e.jsx(o.PopupTip,{content:"Du kan velge flere metoder. Ved brev vil det ta lenger tid å få en beskjed."}),n={name:"Kontaktpreferanser",args:{legend:"Hvordan kan vi kontakte deg?",labelProps:{variant:"large"},supportLabelProps:{labelType:"help"},tooltip:!1},render:({tooltip:o,...i})=>e.jsxs(t.FieldGroup,{...i,tooltip:o?l:void 0,children:[e.jsx(r.Checkbox,{name:"checklist",value:"phone",invalid:!1,children:"Telefon"}),e.jsx(r.Checkbox,{name:"checklist",value:"email",invalid:!1,children:"E-post"}),e.jsx(r.Checkbox,{name:"checklist",value:"snailmail",invalid:!1,children:"Brev"})]})};exports.FieldGroupStory=n,exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime");require("react");const r=require("../../checkbox/Checkbox.cjs"),o=require("../../tooltip/PopupTip.cjs"),t=require("../FieldGroup.cjs");/* empty css                             */;/* empty css                            */const i={title:"Komponenter/InputGroup/FieldGroup",component:t.FieldGroup,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{tooltip:{type:"boolean"}}},l=e.jsx(o.PopupTip,{content:"Du kan velge flere metoder. Ved brev vil det ta lenger tid å få en beskjed."}),n={name:"Kontaktpreferanser",args:{legend:"Hvordan kan vi kontakte deg?",labelProps:{variant:"large"},supportLabelProps:{labelType:"help"},tooltip:!1},render:({tooltip:o,...i})=>e.jsxs(t.FieldGroup,{...i,tooltip:o?l:void 0,children:[e.jsx(r.Checkbox,{name:"checklist",value:"phone",invalid:!1,children:"Telefon"}),e.jsx(r.Checkbox,{name:"checklist",value:"email",invalid:!1,children:"E-post"}),e.jsx(r.Checkbox,{name:"checklist",value:"snailmail",invalid:!1,children:"Brev"})]})};exports.FieldGroupStory=n,exports.default=i;
 //# sourceMappingURL=FieldGroup.stories.cjs.map

package/build/cjs/components/input-group/stories/FieldGroup.stories.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroup.stories.cjs","sources":["../../../../../src/components/input-group/stories/FieldGroup.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { Checkbox } from \"../../checkbox/Checkbox.js\";\nimport { PopupTip } from \"../../tooltip/PopupTip.js\";\nimport { FieldGroup } from \"../FieldGroup.js\";\nimport \"../styles/_index.scss\";\nimport \"../../checkbox/styles/_index.scss\";\n\nconst meta: Meta = {\n title: \"Komponenter/InputGroup/FieldGroup\",\n component: FieldGroup,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n argTypes: {\n tooltip: {\n type: \"boolean\",\n },\n },\n} satisfies Meta<typeof FieldGroup>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof FieldGroup>;\n\nconst tooltipComponent = (\n <PopupTip content=\"Du kan velge flere metoder. Ved brev vil det ta lenger tid å få en beskjed.\" />\n);\n\nexport const FieldGroupStory: Story = {\n name: \"Kontaktpreferanser\",\n args: {\n legend: \"Hvordan kan vi kontakte deg?\",\n labelProps: {\n variant: \"large\",\n },\n supportLabelProps: {\n labelType: \"help\",\n },\n tooltip: false,\n },\n render: ({ tooltip, ...props }) => (\n <FieldGroup {...props} tooltip={tooltip ? tooltipComponent : undefined}>\n <Checkbox name=\"checklist\" value=\"phone\" invalid={false}>\n Telefon\n </Checkbox>\n <Checkbox name=\"checklist\" value=\"email\" invalid={false}>\n E-post\n </Checkbox>\n <Checkbox name=\"checklist\" value=\"snailmail\" invalid={false}>\n Brev\n </Checkbox>\n </FieldGroup>\n ),\n};\n"],"names":["meta","title","component","FieldGroup","parameters","layout","tags","argTypes","tooltip","type","tooltipComponent","jsx","PopupTip","content","FieldGroupStory","name","args","legend","labelProps","variant","supportLabelProps","labelType","render","props","jsxs","children","Checkbox","value","invalid"],"mappings":"8WAQA,MAAMA,EAAa,CACfC,MAAO,oCACPC,UAAWC,EAAAA,WACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,YACPC,SAAU,CACNC,QAAS,CACLC,KAAM,aASZC,EACFC,EAAAA,IAACC,~~EAASA~~,~~SAAA~~,CAAAC,QAAQ,gFAGTC,EAAyB,CAClCC,KAAM,qBACNC,KAAM,CACFC,OAAQ,+BACRC,WAAY,CACRC,QAAS,SAEbC,kBAAmB,CACfC,UAAW,QAEfb,SAAS,GAEbc,OAAQ,EAAGd,QAAAA,KAAYe,KAClBC,EAAAA,KAAArB,EAAAA,WAAA,IAAeoB,EAAOf,QAASA,EAAUE,OAAmB,EACzDe,SAAA,CAAAd,EAAAA,IAACe,YAASX,KAAK,YAAYY,MAAM,QAAQC,SAAS,EAAOH,SAEzD,YACAd,EAAAA,IAACe,YAASX,KAAK,YAAYY,MAAM,QAAQC,SAAS,EAAOH,SAEzD,WACAd,EAAAA,IAACe,YAASX,KAAK,YAAYY,MAAM,YAAYC,SAAS,EAAOH,SAE7D"}
1	+ {"version":3,"file":"FieldGroup.stories.cjs","sources":["../../../../../src/components/input-group/stories/FieldGroup.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { Checkbox } from \"../../checkbox/Checkbox.js\";\nimport { PopupTip } from \"../../tooltip/PopupTip.js\";\nimport { FieldGroup } from \"../FieldGroup.js\";\nimport \"../styles/_index.scss\";\nimport \"../../checkbox/styles/_index.scss\";\n\nconst meta: Meta = {\n title: \"Komponenter/InputGroup/FieldGroup\",\n component: FieldGroup,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n argTypes: {\n tooltip: {\n type: \"boolean\",\n },\n },\n} satisfies Meta<typeof FieldGroup>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof FieldGroup>;\n\nconst tooltipComponent = (\n <PopupTip content=\"Du kan velge flere metoder. Ved brev vil det ta lenger tid å få en beskjed.\" />\n);\n\nexport const FieldGroupStory: Story = {\n name: \"Kontaktpreferanser\",\n args: {\n legend: \"Hvordan kan vi kontakte deg?\",\n labelProps: {\n variant: \"large\",\n },\n supportLabelProps: {\n labelType: \"help\",\n },\n tooltip: false,\n },\n render: ({ tooltip, ...props }) => (\n <FieldGroup {...props} tooltip={tooltip ? tooltipComponent : undefined}>\n <Checkbox name=\"checklist\" value=\"phone\" invalid={false}>\n Telefon\n </Checkbox>\n <Checkbox name=\"checklist\" value=\"email\" invalid={false}>\n E-post\n </Checkbox>\n <Checkbox name=\"checklist\" value=\"snailmail\" invalid={false}>\n Brev\n </Checkbox>\n </FieldGroup>\n ),\n};\n"],"names":["meta","title","component","FieldGroup","parameters","layout","tags","argTypes","tooltip","type","tooltipComponent","jsx","PopupTip","content","FieldGroupStory","name","args","legend","labelProps","variant","supportLabelProps","labelType","render","props","jsxs","children","Checkbox","value","invalid"],"mappings":"8WAQA,MAAMA,EAAa,CACfC,MAAO,oCACPC,UAAWC,EAAAA,WACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,YACPC,SAAU,CACNC,QAAS,CACLC,KAAM,aASZC,EACFC,EAAAA,IAACC,EAAAA,SAAS,CAAAC,QAAQ,gFAGTC,EAAyB,CAClCC,KAAM,qBACNC,KAAM,CACFC,OAAQ,+BACRC,WAAY,CACRC,QAAS,SAEbC,kBAAmB,CACfC,UAAW,QAEfb,SAAS,GAEbc,OAAQ,EAAGd,QAAAA,KAAYe,KAClBC,EAAAA,KAAArB,EAAAA,WAAA,IAAeoB,EAAOf,QAASA,EAAUE,OAAmB,EACzDe,SAAA,CAAAd,EAAAA,IAACe,YAASX,KAAK,YAAYY,MAAM,QAAQC,SAAS,EAAOH,SAEzD,YACAd,EAAAA,IAACe,YAASX,KAAK,YAAYY,MAAM,QAAQC,SAAS,EAAOH,SAEzD,WACAd,EAAAA,IAACe,YAASX,KAAK,YAAYY,MAAM,YAAYC,SAAS,EAAOH,SAE7D"}

package/build/cjs/components/input-group/stories/InputGroup.stories.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime");require("react");const t=require("../../text-input/BaseTextInput.cjs"),r=require("../InputGroup.cjs");,/* empty css                            */;/* empty css                            */const u={title:"Komponenter/InputGroup",component:r.InputGroup,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{label:{control:"text"}}},n={name:"InputGroup",args:{label:"Fødeselsnummer"},render:u=>e.jsx(r.InputGroup,{...u,children:e.jsx(t.BaseTextInput,{})})};exports.InputGroupStory=n,exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime");require("react");const t=require("../../text-input/BaseTextInput.cjs"),r=require("../InputGroup.cjs");/* empty css                             */;/* empty css                            */const u={title:"Komponenter/InputGroup",component:r.InputGroup,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{label:{control:"text"}}},n={name:"InputGroup",args:{label:"Fødeselsnummer"},render:u=>e.jsx(r.InputGroup,{...u,children:e.jsx(t.BaseTextInput,{})})};exports.InputGroupStory=n,exports.default=u;
 //# sourceMappingURL=InputGroup.stories.cjs.map

package/build/cjs/components/input-group/stories/InputGroup.stories.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputGroup.stories.cjs","sources":["../../../../../src/components/input-group/stories/InputGroup.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { BaseTextInput } from \"../../text-input/BaseTextInput.js\";\nimport { InputGroup } from \"../InputGroup.js\";\nimport \"../styles/_index.scss\";\nimport \"../../text-input/styles/_index.scss\";\n\nconst meta: Meta = {\n title: \"Komponenter/InputGroup\",\n component: InputGroup,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n argTypes: {\n label: {\n control: \"text\",\n },\n },\n} satisfies Meta<typeof InputGroup>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof InputGroup>;\n\nexport const InputGroupStory: Story = {\n name: \"InputGroup\",\n args: {\n label: \"Fødeselsnummer\",\n },\n render: (props) => (\n <InputGroup {...props}>\n <BaseTextInput />\n </InputGroup>\n ),\n};\n"],"names":["meta","title","component","InputGroup","parameters","layout","tags","argTypes","label","control","InputGroupStory","name","args","render","props","jsx","children","BaseTextInput"],"mappings":"6UAOA,MAAMA,EAAa,CACfC,MAAO,yBACPC,UAAWC,EAAAA,WACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,YACPC,SAAU,CACNC,MAAO,CACHC,QAAS,UASRC,EAAyB,CAClCC,KAAM,aACNC,KAAM,CACFJ,MAAO,kBAEXK,OAASC,GACLC,EAAAA,IAACZ,iBAAeW,EACZE,SAACD,EAAAA,IAAAE,~~gBAAA~~,~~CAAA~~"}
1	+ {"version":3,"file":"InputGroup.stories.cjs","sources":["../../../../../src/components/input-group/stories/InputGroup.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { BaseTextInput } from \"../../text-input/BaseTextInput.js\";\nimport { InputGroup } from \"../InputGroup.js\";\nimport \"../styles/_index.scss\";\nimport \"../../text-input/styles/_index.scss\";\n\nconst meta: Meta = {\n title: \"Komponenter/InputGroup\",\n component: InputGroup,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n argTypes: {\n label: {\n control: \"text\",\n },\n },\n} satisfies Meta<typeof InputGroup>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof InputGroup>;\n\nexport const InputGroupStory: Story = {\n name: \"InputGroup\",\n args: {\n label: \"Fødeselsnummer\",\n },\n render: (props) => (\n <InputGroup {...props}>\n <BaseTextInput />\n </InputGroup>\n ),\n};\n"],"names":["meta","title","component","InputGroup","parameters","layout","tags","argTypes","label","control","InputGroupStory","name","args","render","props","jsx","children","BaseTextInput"],"mappings":"6UAOA,MAAMA,EAAa,CACfC,MAAO,yBACPC,UAAWC,EAAAA,WACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,YACPC,SAAU,CACNC,MAAO,CACHC,QAAS,UASRC,EAAyB,CAClCC,KAAM,aACNC,KAAM,CACFJ,MAAO,kBAEXK,OAASC,GACLC,EAAAA,IAACZ,iBAAeW,EACZE,SAACD,EAAAA,IAAAE,EAAAA,cAAA,CAAc"}

package/build/cjs/components/link-list/LinkList.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LinkList.cjs","sources":["../../../../src/components/link-list/LinkList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport type {\n PolymorphicPropsWithRef,\n PolymorphicRef,\n} from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ArrowRightIcon } from \"../icon/icons/ArrowRightIcon.js\";\nimport type { ItemProps, LinkComponent, LinkListProps } from \"./types.js\";\n\nconst Item: ItemProps = ({ className, ...rest }) => {\n return <li className={clsx(\"jkl-link-list-item\", className)} {...rest} />;\n};\n\nconst Link = React.forwardRef(function LinkListLink<\n ElementType extends React.ElementType = \"a\",\n>(\n props: PolymorphicPropsWithRef<ElementType>,\n ref: PolymorphicRef<ElementType>,\n) {\n const { as: Component = \"a\", children, className, ...rest } = props;\n\n return (\n <Component\n className={clsx(\"jkl-link-list-link\", className)}\n ref={ref}\n {...rest}\n >\n {children}\n <ArrowRightIcon className=\"jkl-link-list-link__arrow\" />\n </Component>\n );\n}) as LinkComponent;\n\nexport const LinkList = ({\n variant,\n className,\n ...rest\n}: LinkListProps): React.JSX.Element => {\n const Component = variant === \"ordered\" ? \"ol\" : \"ul\";\n\n return (\n <Component\n className={clsx(\"jkl-link-list\", className, {\n \"jkl-link-list--ordered\": variant === \"ordered\",\n \"jkl-link-list--unordered\": variant === \"unordered\",\n })}\n {...rest}\n />\n );\n};\n\nLinkList.Link = Link;\nLinkList.Item = Item;\n"],"names":["Link","React","forwardRef","props","ref","as","Component","children","className","rest","jsxs","clsx","jsx","ArrowRightIcon","LinkList","variant","Item"],"mappings":"8NAaMA,EAAOC,EAAMC,YAAW,SAG1BC,EACAC,GAEM,MAAEC,GAAIC,EAAY,IAAKC,SAAAA,EAAUC,UAAAA,KAAcC,GAASN,EAG1D,OAAAO,EAAAA,KAACJ,EAAA,CACGE,UAAWG,EAAAA,KAAK,qBAAsBH,GACtCJ,IAAAA,KACIK,EAEHF,SAAA,CAAAA,EACDK,EAAAA,IAACC,EAAeA,eAAA,CAAAL,UAAU,gCAGtC,IAEaM,EAAW,EACpBC,QAAAA,EACAP,UAAAA,KACGC,MAEG,MAAAH,EAAwB,YAAZS,EAAwB,KAAO,KAG7C,OAAAH,EAAAA,IAACN,EAAA,CACGE,UAAWG,EAAAA,KAAK,gBAAiBH,EAAW,CACxC,yBAAsC,YAAZO,EAC1B,2BAAwC,cAAZA,OAE5BN,~~GAAA~~,~~EAKhBK~~,EAASd,KAAOA,EAChBc,EAASE,KA3Ce,EAAGR,UAAAA,KAAcC,KAC9BG,EAAAA,IAAC,MAAGJ,UAAWG,EAAAA,KAAK,qBAAsBH,MAAgBC"}
1	+ {"version":3,"file":"LinkList.cjs","sources":["../../../../src/components/link-list/LinkList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport type {\n PolymorphicPropsWithRef,\n PolymorphicRef,\n} from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ArrowRightIcon } from \"../icon/icons/ArrowRightIcon.js\";\nimport type { ItemProps, LinkComponent, LinkListProps } from \"./types.js\";\n\nconst Item: ItemProps = ({ className, ...rest }) => {\n return <li className={clsx(\"jkl-link-list-item\", className)} {...rest} />;\n};\n\nconst Link = React.forwardRef(function LinkListLink<\n ElementType extends React.ElementType = \"a\",\n>(\n props: PolymorphicPropsWithRef<ElementType>,\n ref: PolymorphicRef<ElementType>,\n) {\n const { as: Component = \"a\", children, className, ...rest } = props;\n\n return (\n <Component\n className={clsx(\"jkl-link-list-link\", className)}\n ref={ref}\n {...rest}\n >\n {children}\n <ArrowRightIcon className=\"jkl-link-list-link__arrow\" />\n </Component>\n );\n}) as LinkComponent;\n\nexport const LinkList = ({\n variant,\n className,\n ...rest\n}: LinkListProps): React.JSX.Element => {\n const Component = variant === \"ordered\" ? \"ol\" : \"ul\";\n\n return (\n <Component\n className={clsx(\"jkl-link-list\", className, {\n \"jkl-link-list--ordered\": variant === \"ordered\",\n \"jkl-link-list--unordered\": variant === \"unordered\",\n })}\n {...rest}\n />\n );\n};\n\nLinkList.Link = Link;\nLinkList.Item = Item;\n"],"names":["Link","React","forwardRef","props","ref","as","Component","children","className","rest","jsxs","clsx","jsx","ArrowRightIcon","LinkList","variant","Item"],"mappings":"8NAaMA,EAAOC,EAAMC,YAAW,SAG1BC,EACAC,GAEM,MAAEC,GAAIC,EAAY,IAAKC,SAAAA,EAAUC,UAAAA,KAAcC,GAASN,EAG1D,OAAAO,EAAAA,KAACJ,EAAA,CACGE,UAAWG,EAAAA,KAAK,qBAAsBH,GACtCJ,IAAAA,KACIK,EAEHF,SAAA,CAAAA,EACDK,EAAAA,IAACC,EAAeA,eAAA,CAAAL,UAAU,gCAGtC,IAEaM,EAAW,EACpBC,QAAAA,EACAP,UAAAA,KACGC,MAEG,MAAAH,EAAwB,YAAZS,EAAwB,KAAO,KAG7C,OAAAH,EAAAA,IAACN,EAAA,CACGE,UAAWG,EAAAA,KAAK,gBAAiBH,EAAW,CACxC,yBAAsC,YAAZO,EAC1B,2BAAwC,cAAZA,OAE5BN,GACR,EAIRK,EAASd,KAAOA,EAChBc,EAASE,KA3Ce,EAAGR,UAAAA,KAAcC,KAC9BG,EAAAA,IAAC,MAAGJ,UAAWG,EAAAA,KAAK,qBAAsBH,MAAgBC"}

package/build/cjs/components/link-list/stories/LinkList.stories.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LinkList.stories.cjs","sources":["../../../../../src/components/link-list/stories/LinkList.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { LinkList } from \"../LinkList.js\";\nimport \"../styles/_index.scss\";\n\nconst meta: Meta = {\n title: \"Komponenter/List/LinkList\",\n component: LinkList,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n argTypes: {\n variant: {\n control: \"radio\",\n options: [\"ordered\", \"unordered\"],\n },\n },\n} satisfies Meta<typeof LinkList>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof LinkList>;\n\nexport const LinkListStory: Story = {\n name: \"LinkList\",\n args: {\n variant: \"unordered\",\n },\n render: (props) => (\n <LinkList style={{ minWidth: \"50vw\" }} {...props}>\n <LinkList.Item>\n <LinkList.Link href=\"#\">SpareBank 1</LinkList.Link>\n </LinkList.Item>\n <LinkList.Item>\n <LinkList.Link href=\"#\">DNB</LinkList.Link>\n </LinkList.Item>\n <LinkList.Item>\n <LinkList.Link href=\"#\">LOfavør</LinkList.Link>\n </LinkList.Item>\n <LinkList.Item>\n <LinkList.Link href=\"#\">Norsk Sykepleierforbund</LinkList.Link>\n </LinkList.Item>\n </LinkList>\n ),\n};\n"],"names":["meta","title","component","LinkList","parameters","layout","tags","argTypes","variant","control","options","LinkListStory","name","args","render","props","jsxs","style","minWidth","children","jsx","Item","Link","href"],"mappings":"qMAKMA,EAAa,CACfC,MAAO,4BACPC,UAAWC,EAAAA,SACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,YACPC,SAAU,CACNC,QAAS,CACLC,QAAS,QACTC,QAAS,CAAC,UAAW,gBASpBC,EAAuB,CAChCC,KAAM,WACNC,KAAM,CACFL,QAAS,aAEbM,OAASC,GACJC,EAAAA,KAAAb,EAAAA,SAAA,CAASc,MAAO,CAAEC,SAAU,WAAcH,EACvCI,SAAA,CAACC,EAAAA,IAAAjB,EAAAA,SAASkB,KAAT,CACGF,SAACC,EAAAA,IAAAjB,EAAAA,SAASmB,KAAT,CAAcC,KAAK,IAAIJ,SAAA,kBAE5BC,EAAAA,IAACjB,EAAAA,SAASkB,KAAT,CACGF,SAAAC,EAAAA,IAACjB,EAASA,SAAAmB,KAAT,CAAcC,KAAK,IAAIJ,SAAA,UAE5BC,EAAAA,IAACjB,EAAAA,SAASkB,KAAT,CACGF,SAAAC,EAAAA,IAACjB,EAASA,SAAAmB,KAAT,CAAcC,KAAK,IAAIJ,SAAA,cAE5BC,EAAAA,IAACjB,EAAAA,SAASkB,KAAT,CACGF,SAAAC,EAAAA,IAACjB,~~EAASA~~,~~SAAAmB~~,KAAT,CAAcC,KAAK,IAAIJ,SAAA"}
1	+ {"version":3,"file":"LinkList.stories.cjs","sources":["../../../../../src/components/link-list/stories/LinkList.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { LinkList } from \"../LinkList.js\";\nimport \"../styles/_index.scss\";\n\nconst meta: Meta = {\n title: \"Komponenter/List/LinkList\",\n component: LinkList,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n argTypes: {\n variant: {\n control: \"radio\",\n options: [\"ordered\", \"unordered\"],\n },\n },\n} satisfies Meta<typeof LinkList>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof LinkList>;\n\nexport const LinkListStory: Story = {\n name: \"LinkList\",\n args: {\n variant: \"unordered\",\n },\n render: (props) => (\n <LinkList style={{ minWidth: \"50vw\" }} {...props}>\n <LinkList.Item>\n <LinkList.Link href=\"#\">SpareBank 1</LinkList.Link>\n </LinkList.Item>\n <LinkList.Item>\n <LinkList.Link href=\"#\">DNB</LinkList.Link>\n </LinkList.Item>\n <LinkList.Item>\n <LinkList.Link href=\"#\">LOfavør</LinkList.Link>\n </LinkList.Item>\n <LinkList.Item>\n <LinkList.Link href=\"#\">Norsk Sykepleierforbund</LinkList.Link>\n </LinkList.Item>\n </LinkList>\n ),\n};\n"],"names":["meta","title","component","LinkList","parameters","layout","tags","argTypes","variant","control","options","LinkListStory","name","args","render","props","jsxs","style","minWidth","children","jsx","Item","Link","href"],"mappings":"qMAKMA,EAAa,CACfC,MAAO,4BACPC,UAAWC,EAAAA,SACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,YACPC,SAAU,CACNC,QAAS,CACLC,QAAS,QACTC,QAAS,CAAC,UAAW,gBASpBC,EAAuB,CAChCC,KAAM,WACNC,KAAM,CACFL,QAAS,aAEbM,OAASC,GACJC,EAAAA,KAAAb,EAAAA,SAAA,CAASc,MAAO,CAAEC,SAAU,WAAcH,EACvCI,SAAA,CAACC,EAAAA,IAAAjB,EAAAA,SAASkB,KAAT,CACGF,SAACC,EAAAA,IAAAjB,EAAAA,SAASmB,KAAT,CAAcC,KAAK,IAAIJ,SAAA,kBAE5BC,EAAAA,IAACjB,EAAAA,SAASkB,KAAT,CACGF,SAAAC,EAAAA,IAACjB,EAASA,SAAAmB,KAAT,CAAcC,KAAK,IAAIJ,SAAA,UAE5BC,EAAAA,IAACjB,EAAAA,SAASkB,KAAT,CACGF,SAAAC,EAAAA,IAACjB,EAASA,SAAAmB,KAAT,CAAcC,KAAK,IAAIJ,SAAA,cAE5BC,EAAAA,IAACjB,EAAAA,SAASkB,KAAT,CACGF,SAAAC,EAAAA,IAACjB,EAAAA,SAASmB,KAAT,CAAcC,KAAK,IAAIJ,SAAA"}

package/build/cjs/components/list/List.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"List.cjs","sources":["../../../../src/components/list/List.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport type { ListProps } from \"./types.js\";\n\ntype ValidLists = \"unordered\" \| \"ordered\";\n\nfunction makeListComponent(listType: ValidLists): FC<ListProps> {\n const BaseList: FC<ListProps> = ({ children, className, ...rest }) => {\n const C = listType === \"ordered\" ? \"ol\" : \"ul\";\n\n return (\n <C\n className={clsx(\"jkl-list\", className, {\n \"jkl-list--ordered\": listType === \"ordered\",\n })}\n data-testid=\"jkl-list\"\n {...rest}\n >\n {children}\n </C>\n );\n };\n return BaseList;\n}\n\nexport const UnorderedList = makeListComponent(\"unordered\");\nUnorderedList.displayName = \"UnorderedList\";\nexport const OrderedList = makeListComponent(\"ordered\");\nOrderedList.displayName = \"OrderedList\";\nexport const List = UnorderedList;\nList.displayName = \"List\";\n"],"names":["makeListComponent","listType","children","className","rest","C","jsx","clsx","UnorderedList","displayName","OrderedList","List"],"mappings":"6JAMA,SAASA,EAAkBC,GAgBhB,MAfyB,EAAGC,SAAAA,EAAUC,UAAAA,KAAcC,MACjD,MAAAC,EAAiB,YAAbJ,EAAyB,KAAO,KAGtC,OAAAK,EAAAA,IAACD,EAAA,CACGF,UAAWI,EAAAA,KAAK,WAAYJ,EAAW,CACnC,oBAAkC,YAAbF,IAEzB,cAAY,cACRG,EAEHF,SAAAA,~~GAAA~~,~~CAKjB~~,kBAEa,MAAAM,EAAgBR,EAAkB,aAC/CQ,EAAcC,YAAc,gBACf,MAAAC,EAAcV,EAAkB,WAC7CU,EAAYD,YAAc,cACnB,MAAME,EAAOH,EACpBG,EAAKF,YAAc"}
1	+ {"version":3,"file":"List.cjs","sources":["../../../../src/components/list/List.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport type { ListProps } from \"./types.js\";\n\ntype ValidLists = \"unordered\" \| \"ordered\";\n\nfunction makeListComponent(listType: ValidLists): FC<ListProps> {\n const BaseList: FC<ListProps> = ({ children, className, ...rest }) => {\n const C = listType === \"ordered\" ? \"ol\" : \"ul\";\n\n return (\n <C\n className={clsx(\"jkl-list\", className, {\n \"jkl-list--ordered\": listType === \"ordered\",\n })}\n data-testid=\"jkl-list\"\n {...rest}\n >\n {children}\n </C>\n );\n };\n return BaseList;\n}\n\nexport const UnorderedList = makeListComponent(\"unordered\");\nUnorderedList.displayName = \"UnorderedList\";\nexport const OrderedList = makeListComponent(\"ordered\");\nOrderedList.displayName = \"OrderedList\";\nexport const List = UnorderedList;\nList.displayName = \"List\";\n"],"names":["makeListComponent","listType","children","className","rest","C","jsx","clsx","UnorderedList","displayName","OrderedList","List"],"mappings":"6JAMA,SAASA,EAAkBC,GAgBhB,MAfyB,EAAGC,SAAAA,EAAUC,UAAAA,KAAcC,MACjD,MAAAC,EAAiB,YAAbJ,EAAyB,KAAO,KAGtC,OAAAK,EAAAA,IAACD,EAAA,CACGF,UAAWI,EAAAA,KAAK,WAAYJ,EAAW,CACnC,oBAAkC,YAAbF,IAEzB,cAAY,cACRG,EAEHF,SAAAA,GACL,CAIZ,kBAEa,MAAAM,EAAgBR,EAAkB,aAC/CQ,EAAcC,YAAc,gBACf,MAAAC,EAAcV,EAAkB,WAC7CU,EAAYD,YAAc,cACnB,MAAME,EAAOH,EACpBG,EAAKF,YAAc"}