@fremtind/jokul 0.19.0 → 0.19.2

package/build/cjs/components/accordion/documentation/Example.js

@@ -1,2 +1,2 @@
-"use strict";const n=require("react/jsx-runtime"),e=require("../../../../formatCode-Cr-qlO_l.cjs");require("react"),require("../../../hooks/useScreen/useScreen.js"),require("../../../hooks/useId/useId.js"),require("../../icon/Icon.js"),require("../../icon/icons/animated/ArrowVerticalAnimated.js"),require("../../icon/icons/animated/ArrowHorizontalAnimated.js"),require("../../icon/icons/animated/PlusRemoveAnimated.js"),require("../../icon/icons/ArrowDownIcon.js"),require("../../icon/icons/ArrowLeftIcon.js"),require("../../icon/icons/ArrowNorthEastIcon.js"),require("../../icon/icons/ArrowRightIcon.js"),require("../../icon/icons/ArrowUpIcon.js"),require("../../icon/icons/CalendarIcon.js"),require("../../icon/icons/CheckIcon.js"),require("../../icon/icons/ChevronDownIcon.js"),require("../../icon/icons/ChevronLeftIcon.js"),require("../../icon/icons/ChevronRightIcon.js"),require("../../icon/icons/ChevronUpIcon.js"),require("../../icon/icons/CloseIcon.js"),require("../../icon/icons/CopyIcon.js"),require("../../icon/icons/DotsIcon.js"),require("../../icon/icons/DragIcon.js"),require("../../icon/icons/ErrorIcon.js"),require("../../icon/icons/GreenCheckIcon.js"),require("../../icon/icons/HamburgerIcon.js"),require("../../icon/icons/InfoIcon.js"),require("../../icon/icons/LinkIcon.js"),require("../../icon/icons/PlusIcon.js"),require("../../icon/icons/QuestionIcon.js"),require("../../icon/icons/RedCrossIcon.js"),require("../../icon/icons/SearchIcon.js"),require("../../icon/icons/SuccessIcon.js"),require("../../icon/icons/WarningIcon.js"),require("../../icon/icons/MinusIcon.js"),require("../../icon/icons/ThumbDownIcon.js"),require("../../icon/icons/ThumbUpIcon.js"),require("../../icon/icons/TrashCanIcon.js"),require("../../icon/icons/PenIcon.js"),require("../../list/List.js"),require("../../list/ListItem.js");const o=[],r=e.formatCode('import React, { useId } from "react";\nimport { Accordion, AccordionItem } from "..";\nimport { UnorderedList, ListItem } from "../../list";\n\nexport const knobs = [];\n\nexport const AccordionExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    const id = useId();\n    return (\n        <>\n            <h2\n                className="jkl-portal-heading-medium"\n                id={id}\n                style={{ textAlign: "center", marginBottom: 24, width: "100%" }}\n            >\n                Noen spørsmål\n            </h2>\n            <Accordion aria-labelledby={id}>\n                <AccordionItem\n                    title="Hvem kan kjøpe livsforsikring?"\n                    onClick={(e, isOpen) => {\n                        isOpen\n                            ? console.log("Opening first accordion item")\n                            : console.log("Closing first accordion item");\n                    }}\n                >\n                    <UnorderedList>\n                        <ListItem>Personer med et norsk fødselsnummer.</ListItem>\n                        <ListItem>\n                            Personer som har vært bosatt i Norge i minst de fem siste årene før avtalen inngås.\n                        </ListItem>\n                        <ListItem>Livsforsikring kan kjøpes på nett av personer mellom 18 og 79 år.</ListItem>\n                    </UnorderedList>\n                    Ønsker du en forsikringssum på mer enn 3 millioner trenger vi ekstra økonomiske opplysninger. Da må\n                    du ta kontakt med banken din.\n                </AccordionItem>\n                <AccordionItem title="Hvem kan kjøpe kritisk sykdom?">\n                    Personer med et norsk fødselsnummer. Personer som har vært bosatt i Norge i minst de fem siste årene\n                    før avtalen inngås. Kritisk sykdom kan kjøpes på nett av personer mellom 18 og 58 år. Ønsker du en\n                    forsikringssum på mer enn 1,1 millioner trenger vi ekstra økonomiske opplysninger. Da må du ta\n                    kontakt med banken din.\n                </AccordionItem>\n                <AccordionItem title="Hvem kan kjøpe uførepensjon?">\n                    Personer med et norsk fødselsnummer. Personer som har vært bosatt i Norge i minst de fem siste årene\n                    før avtalen inngås. Uførepensjon kan kjøpes på nett av personer mellom 18 og 60 år. Ønsker du en\n                    forsikringssum på mer enn 96 000 trenger vi ekstra økonomiske opplysninger. Da må du ta kontakt med\n                    banken din.\n                </AccordionItem>\n            </Accordion>\n        </>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n');module.exports=function(){const i=e.useInteractiveCodeControls(r,o);return n.jsx("div",{className:"jkl",children:n.jsx(e.InteractiveCode,{title:"Accordion",defaultCode:r,defaultShowEditor:!0,noInline:!0,controls:i})})};
+"use strict";const n=require("react/jsx-runtime"),e=require("../../../../formatCode-BWsrUMWq.cjs");require("react"),require("../../../hooks/useScreen/useScreen.js"),require("../../../hooks/useId/useId.js"),require("../../icon/Icon.js"),require("../../icon/icons/animated/ArrowVerticalAnimated.js"),require("../../icon/icons/animated/ArrowHorizontalAnimated.js"),require("../../icon/icons/animated/PlusRemoveAnimated.js"),require("../../icon/icons/ArrowDownIcon.js"),require("../../icon/icons/ArrowLeftIcon.js"),require("../../icon/icons/ArrowNorthEastIcon.js"),require("../../icon/icons/ArrowRightIcon.js"),require("../../icon/icons/ArrowUpIcon.js"),require("../../icon/icons/CalendarIcon.js"),require("../../icon/icons/CheckIcon.js"),require("../../icon/icons/ChevronDownIcon.js"),require("../../icon/icons/ChevronLeftIcon.js"),require("../../icon/icons/ChevronRightIcon.js"),require("../../icon/icons/ChevronUpIcon.js"),require("../../icon/icons/CloseIcon.js"),require("../../icon/icons/CopyIcon.js"),require("../../icon/icons/DotsIcon.js"),require("../../icon/icons/DragIcon.js"),require("../../icon/icons/ErrorIcon.js"),require("../../icon/icons/GreenCheckIcon.js"),require("../../icon/icons/HamburgerIcon.js"),require("../../icon/icons/InfoIcon.js"),require("../../icon/icons/LinkIcon.js"),require("../../icon/icons/PlusIcon.js"),require("../../icon/icons/QuestionIcon.js"),require("../../icon/icons/RedCrossIcon.js"),require("../../icon/icons/SearchIcon.js"),require("../../icon/icons/SuccessIcon.js"),require("../../icon/icons/WarningIcon.js"),require("../../icon/icons/MinusIcon.js"),require("../../icon/icons/ThumbDownIcon.js"),require("../../icon/icons/ThumbUpIcon.js"),require("../../icon/icons/TrashCanIcon.js"),require("../../icon/icons/PenIcon.js"),require("../../list/List.js"),require("../../list/ListItem.js");const o=[],r=e.formatCode('import React, { useId } from "react";\nimport { Accordion, AccordionItem } from "..";\nimport { UnorderedList, ListItem } from "../../list";\n\nexport const knobs = [];\n\nexport const AccordionExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    const id = useId();\n    return (\n        <>\n            <h2\n                className="jkl-portal-heading-medium"\n                id={id}\n                style={{ textAlign: "center", marginBottom: 24, width: "100%" }}\n            >\n                Noen spørsmål\n            </h2>\n            <Accordion aria-labelledby={id}>\n                <AccordionItem\n                    title="Hvem kan kjøpe livsforsikring?"\n                    onClick={(e, isOpen) => {\n                        isOpen\n                            ? console.log("Opening first accordion item")\n                            : console.log("Closing first accordion item");\n                    }}\n                >\n                    <UnorderedList>\n                        <ListItem>Personer med et norsk fødselsnummer.</ListItem>\n                        <ListItem>\n                            Personer som har vært bosatt i Norge i minst de fem siste årene før avtalen inngås.\n                        </ListItem>\n                        <ListItem>Livsforsikring kan kjøpes på nett av personer mellom 18 og 79 år.</ListItem>\n                    </UnorderedList>\n                    Ønsker du en forsikringssum på mer enn 3 millioner trenger vi ekstra økonomiske opplysninger. Da må\n                    du ta kontakt med banken din.\n                </AccordionItem>\n                <AccordionItem title="Hvem kan kjøpe kritisk sykdom?">\n                    Personer med et norsk fødselsnummer. Personer som har vært bosatt i Norge i minst de fem siste årene\n                    før avtalen inngås. Kritisk sykdom kan kjøpes på nett av personer mellom 18 og 58 år. Ønsker du en\n                    forsikringssum på mer enn 1,1 millioner trenger vi ekstra økonomiske opplysninger. Da må du ta\n                    kontakt med banken din.\n                </AccordionItem>\n                <AccordionItem title="Hvem kan kjøpe uførepensjon?">\n                    Personer med et norsk fødselsnummer. Personer som har vært bosatt i Norge i minst de fem siste årene\n                    før avtalen inngås. Uførepensjon kan kjøpes på nett av personer mellom 18 og 60 år. Ønsker du en\n                    forsikringssum på mer enn 96 000 trenger vi ekstra økonomiske opplysninger. Da må du ta kontakt med\n                    banken din.\n                </AccordionItem>\n            </Accordion>\n        </>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n');module.exports=function(){const i=e.useInteractiveCodeControls(r,o);return n.jsx("div",{className:"jkl",children:n.jsx(e.InteractiveCode,{title:"Accordion",defaultCode:r,defaultShowEditor:!0,noInline:!0,controls:i})})};
 //# sourceMappingURL=Example.js.map

package/build/cjs/components/breadcrumb/documentation/Example.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),r=require("../../../../formatCode-BWsrUMWq.cjs");require("react");const n=[],t=r.formatCode('import React from "react";\nimport { Breadcrumb, BreadcrumbItem } from "..";\n\nexport const knobs = [];\n\nexport const BreadcrumbExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    return (\n        <Breadcrumb>\n            <BreadcrumbItem>\n                <a href="/">Hjem</a>\n            </BreadcrumbItem>\n            <BreadcrumbItem>\n                <a href="/komponenter/accordion">Komponenter</a>\n            </BreadcrumbItem>\n            <BreadcrumbItem>\n                <a href="/komponenter/breadcrumb">Breadcrumb</a>\n            </BreadcrumbItem>\n        </Breadcrumb>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n');module.exports=function(){const o=r.useInteractiveCodeControls(t,n);return e.jsx("div",{className:"jkl",children:e.jsx(r.InteractiveCode,{title:"Breadcrumb",defaultCode:t,defaultShowEditor:!0,noInline:!0,controls:o})})};
+//# sourceMappingURL=Example.js.map

package/build/cjs/components/breadcrumb/documentation/Example.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Example.js","sources":["../../../../../src/components/breadcrumb/documentation/BreadcrumbExample.jsx","../../../../../src/components/breadcrumb/documentation/Example.tsx","../../../../../src/components/breadcrumb/documentation/BreadcrumbExample.jsx?raw"],"sourcesContent":["import React from \"react\";\nimport { Breadcrumb, BreadcrumbItem } from \"..\";\n\nexport const knobs = [];\n\nexport const BreadcrumbExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    return (\n        <Breadcrumb>\n            <BreadcrumbItem>\n                <a href=\"/\">Hjem</a>\n            </BreadcrumbItem>\n            <BreadcrumbItem>\n                <a href=\"/komponenter/accordion\">Komponenter</a>\n            </BreadcrumbItem>\n            <BreadcrumbItem>\n                <a href=\"/komponenter/breadcrumb\">Breadcrumb</a>\n            </BreadcrumbItem>\n        </Breadcrumb>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n","import React from \"react\";\nimport { formatCode, InteractiveCode, useInteractiveCodeControls } from \"../../../../../../utils/interactive-code\";\n// @ts-ignore\nimport { knobs } from \"./BreadcrumbExample\";\n// @ts-ignore\nimport BreadcrumbExample from \"./BreadcrumbExample?raw\";\n\nimport \"../styles/_index.scss\";\n\nconst code = formatCode(BreadcrumbExample);\n\nexport default function Example() {\n    const controls = useInteractiveCodeControls(code, knobs);\n\n    return (\n        <div className={\"jkl\"}>\n            <InteractiveCode\n                title={\"Breadcrumb\"}\n                defaultCode={code}\n                defaultShowEditor={true}\n                noInline={true}\n                controls={controls}\n            />\n        </div>\n    );\n}\n","export default \"import React from \\\"react\\\";\\nimport { Breadcrumb, BreadcrumbItem } from \\\"..\\\";\\n\\nexport const knobs = [];\\n\\nexport const BreadcrumbExample = () => {\\n    /* -- EXAMPLE CODE START -- */\\n    return (\\n        <Breadcrumb>\\n            <BreadcrumbItem>\\n                <a href=\\\"/\\\">Hjem</a>\\n            </BreadcrumbItem>\\n            <BreadcrumbItem>\\n                <a href=\\\"/komponenter/accordion\\\">Komponenter</a>\\n            </BreadcrumbItem>\\n            <BreadcrumbItem>\\n                <a href=\\\"/komponenter/breadcrumb\\\">Breadcrumb</a>\\n            </BreadcrumbItem>\\n        </Breadcrumb>\\n    );\\n    /* -- EXAMPLE CODE END -- */\\n};\\n\""],"names":["knobs","code","formatCode","controls","useInteractiveCodeControls","jsx","className","children","InteractiveCode","title","defaultCode","defaultShowEditor","noInline"],"mappings":"oHAGO,MAAMA,EAAQ,GCMfC,EAAOC,EAAAA,WCTE,upBDWf,WACU,MAAAC,EAAWC,EAAAA,2BAA2BH,EAAMD,GAG9C,OAAAK,EAAAA,IAAC,MAAI,CAAAC,UAAW,MACZC,SAAAF,EAAAA,IAACG,EAAAA,gBAAA,CACGC,MAAO,aACPC,YAAaT,EACbU,mBAAmB,EACnBC,UAAU,EACVT,SAAAA,KAIhB"}

package/build/cjs/components/breadcrumb/documentation/main.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),r=require("react-dom/client");require("react"),require("../../../hooks/useScreen/useScreen.js"),require("../../../hooks/useId/useId.js"),require("../../icon/Icon.js"),require("../../icon/icons/animated/ArrowVerticalAnimated.js"),require("../../icon/icons/animated/ArrowHorizontalAnimated.js"),require("../../icon/icons/animated/PlusRemoveAnimated.js"),require("../../icon/icons/ArrowDownIcon.js"),require("../../icon/icons/ArrowLeftIcon.js"),require("../../icon/icons/ArrowNorthEastIcon.js"),require("../../icon/icons/ArrowRightIcon.js"),require("../../icon/icons/ArrowUpIcon.js"),require("../../icon/icons/CalendarIcon.js"),require("../../icon/icons/CheckIcon.js"),require("../../icon/icons/ChevronDownIcon.js"),require("../../icon/icons/ChevronLeftIcon.js"),require("../../icon/icons/ChevronRightIcon.js"),require("../../icon/icons/ChevronUpIcon.js"),require("../../icon/icons/CloseIcon.js"),require("../../icon/icons/CopyIcon.js"),require("../../icon/icons/DotsIcon.js"),require("../../icon/icons/DragIcon.js"),require("../../icon/icons/ErrorIcon.js"),require("../../icon/icons/GreenCheckIcon.js"),require("../../icon/icons/HamburgerIcon.js"),require("../../icon/icons/InfoIcon.js"),require("../../icon/icons/LinkIcon.js"),require("../../icon/icons/PlusIcon.js"),require("../../icon/icons/QuestionIcon.js"),require("../../icon/icons/RedCrossIcon.js"),require("../../icon/icons/SearchIcon.js"),require("../../icon/icons/SuccessIcon.js"),require("../../icon/icons/WarningIcon.js"),require("../../icon/icons/MinusIcon.js"),require("../../icon/icons/ThumbDownIcon.js"),require("../../icon/icons/ThumbUpIcon.js"),require("../../icon/icons/TrashCanIcon.js"),require("../../icon/icons/PenIcon.js"),require("../../button/Button.js"),require("../../card/Card.js"),require("../../card/CardImage.js"),require("../../card/NavCard.js"),require("../../checkbox/Checkbox.js"),require("../../combobox/Combobox.js"),require("../../cookie-consent/CookieConsentContext.js"),require("react-dom"),require("../../modal/Modal.js"),require("react-a11y-dialog"),require("../../list/List.js"),require("../../list/ListItem.js"),require("../../datepicker/DatePicker.js"),require("../../feedback/feedbackContext.js"),require("../../message/Message.js"),require("../../message/FormErrorMessage.js"),require("../../tooltip/Tooltip.js"),require("../../tooltip/TooltipContent.js"),require("../../tooltip/TooltipTrigger.js"),require("../../input-group/InputGroup.js"),require("../../feedback/followup/followupContext.js"),require("../../feedback/main-question/mainQuestionContext.js"),require("../../radio-button/RadioButton.js"),require("../../radio-button/radioGroupContext.js"),require("../../radio-button/BaseRadioButton.js"),require("../../text-input/BaseTextArea.js"),require("../../text-input/BaseTextInput.js"),require("../../text-input/TextArea.js"),require("../../text-input/TextInput.js"),require("../../../utilities/polymorphism/SlotComponent.js");const i=require("../../../utilities/tabListener.js");require("../../../../ExpandableTableRow-Bkqt-qP5.cjs"),require("../../icon-button/IconButton.js"),require("../../link/Link.js"),require("../../link/NavLink.js"),require("../../link-list/LinkList.js"),require("../../logo/text-paths/ForsikringLevertAvFremtind.js"),require("../../logo/text-paths/FraSB1ogDNB.js"),require("../../logo/text-paths/InnovasjonFraFremtind.js"),require("../../logo/text-paths/TeknologiFraFremtind.js"),require("../../logo/text-paths/VartEgetForsikringsselskap.js"),require("../../logo/text-paths/VartForsikringsselskap.js"),require("../../menu/MenuItem.js"),require("../../menu/MenuItemCheckbox.js"),require("../../popover/Popover.js"),require("../../system-message/SystemMessage.js"),require("../../table/DataTable.js"),require("../../table/Table.js"),require("../../table/TableBody.js"),require("../../table/TableCaption.js"),require("../../table/TableCell.js"),require("../../table/TableColumn.js"),require("../../table/TableColumnGroup.js"),require("../../table/tableContext.js"),require("../../table/tableSectionContext.js"),require("../../table/TableFooter.js"),require("../../table/TableHead.js"),require("../../table/TableHeader.js"),require("../../table/TableRow.js"),require("../../tabs/NavTab.js"),require("../../tabs/tabsContext.js"),require("../../tabs/Tab.js"),require("../../tag/Tag.js"),require("../../toast/toastContext.js"),require("../../toggle-switch/ToggleSwitch.js");const o=require("./Example.js");i.initTabListener(),r.createRoot(document.getElementById("root")).render(e.jsx(o,{}));
+//# sourceMappingURL=main.js.map

package/build/cjs/components/breadcrumb/documentation/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sources":["../../../../../src/components/breadcrumb/documentation/main.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport { initTabListener } from \"../../..\";\nimport Example from \"./Example\";\n\ninitTabListener();\n\nReactDOM.createRoot(document.getElementById(\"root\")!).render(<Example />);\n"],"names":["initTabListener","ReactDOM","createRoot","document","getElementById","render","jsx","Example"],"mappings":"63IAKAA,EAAAA,kBAEAC,EAASC,WAAWC,SAASC,eAAe,SAAUC,OAAQC,EAAAA,IAAAC,EAAA,CAAA"}

package/build/cjs/components/breadcrumb/documentation/vite.dev.config.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("node:path"),i=require("@vitejs/plugin-react-swc"),r=require("vite"),s=require("../../../../copy-jkl-fonts-BEH11kbT.cjs"),o=r.defineConfig({plugins:[i(),s.copyJklFonts(e.resolve(__dirname,"public","fonts"))]});module.exports=o;
+//# sourceMappingURL=vite.dev.config.js.map

package/build/cjs/components/breadcrumb/documentation/vite.dev.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.dev.config.js","sources":["../../../../../src/components/breadcrumb/documentation/vite.dev.config.ts"],"sourcesContent":["import { resolve } from \"path\";\nimport react from \"@vitejs/plugin-react-swc\";\nimport { defineConfig } from \"vite\";\nimport { copyJklFonts } from \"../../../../../../utils/vite\";\n\nexport default defineConfig({\n    plugins: [react(), copyJklFonts(resolve(__dirname, \"public\", \"fonts\"))],\n});\n"],"names":["vite_dev_config","defineConfig","plugins","react","copyJklFonts","resolve","__dirname"],"mappings":"uJAKAA,EAAeC,eAAa,CACxBC,QAAS,CAACC,IAASC,EAAAA,aAAaC,UAAQC,UAAW,SAAU"}

package/build/cjs/components/button/documentation/Example.js

@@ -0,0 +1,2 @@
+"use strict";const n=require("react/jsx-runtime"),o=require("../../../../formatCode-BWsrUMWq.cjs");require("react"),require("../../icon/Icon.js"),require("../../icon/icons/animated/ArrowVerticalAnimated.js"),require("../../icon/icons/animated/ArrowHorizontalAnimated.js"),require("../../icon/icons/animated/PlusRemoveAnimated.js"),require("../../icon/icons/ArrowDownIcon.js"),require("../../icon/icons/ArrowLeftIcon.js"),require("../../icon/icons/ArrowNorthEastIcon.js"),require("../../icon/icons/ArrowRightIcon.js"),require("../../icon/icons/ArrowUpIcon.js"),require("../../icon/icons/CalendarIcon.js"),require("../../icon/icons/CheckIcon.js"),require("../../icon/icons/ChevronDownIcon.js"),require("../../icon/icons/ChevronLeftIcon.js"),require("../../icon/icons/ChevronRightIcon.js"),require("../../icon/icons/ChevronUpIcon.js"),require("../../icon/icons/CloseIcon.js"),require("../../icon/icons/CopyIcon.js"),require("../../icon/icons/DotsIcon.js"),require("../../icon/icons/DragIcon.js"),require("../../icon/icons/ErrorIcon.js"),require("../../icon/icons/GreenCheckIcon.js"),require("../../icon/icons/HamburgerIcon.js"),require("../../icon/icons/InfoIcon.js"),require("../../icon/icons/LinkIcon.js"),require("../../icon/icons/PlusIcon.js"),require("../../icon/icons/QuestionIcon.js"),require("../../icon/icons/RedCrossIcon.js"),require("../../icon/icons/SearchIcon.js"),require("../../icon/icons/SuccessIcon.js"),require("../../icon/icons/WarningIcon.js"),require("../../icon/icons/MinusIcon.js"),require("../../icon/icons/ThumbDownIcon.js"),require("../../icon/icons/ThumbUpIcon.js"),require("../../icon/icons/TrashCanIcon.js"),require("../../icon/icons/PenIcon.js"),require("../Button.js");const e=[{type:"bool",label:"label",boolOptions:{trueValue:!0,falseValue:!1},defaultValue:!0},{type:"bool",label:"icon",boolOptions:{trueValue:!0,falseValue:!1}},{type:"choice",label:"iconPlacement",choiceOptions:[{label:"left",value:"left"},{label:"right",value:"right"}],defaultValue:0}],r=o.formatCode('import React, { useCallback, useState } from "react";\nimport { CheckIcon, ChevronDownIcon, CloseIcon } from "../../icon";\nimport { Button } from "../Button";\n\nexport const knobs = [\n    {\n        type: "bool",\n        label: "label",\n        boolOptions: {\n            trueValue: true,\n            falseValue: false,\n        },\n        defaultValue: true,\n    },\n    {\n        type: "bool",\n        label: "icon",\n        boolOptions: {\n            trueValue: true,\n            falseValue: false,\n        },\n    },\n    {\n        type: "choice",\n        label: "iconPlacement",\n        choiceOptions: [\n            { label: "left", value: "left" },\n            { label: "right", value: "right" },\n        ],\n        defaultValue: 0,\n    },\n];\n\nexport const ButtonExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    const [showLoader, setShowLoader] = useState(false);\n\n    const simulateLoading = useCallback(() => {\n        setShowLoader(true);\n        setTimeout(() => {\n            setShowLoader(false);\n        }, 2200);\n    }, []);\n\n    return (\n        <div className="flex flex-column gap-32 justify-between items-center">\n            <Button\n                variant="primary"\n                loader={{\n                    showLoader,\n                    textDescription: "Laster innhold",\n                }}\n                onClick={simulateLoading}\n                icon={boolKnob("icon") && <CheckIcon />}\n                iconPosition={choiceKnob("iconPlacement")}\n            >\n                {boolKnob("label") ? "Lagre og send inn" : null}\n            </Button>\n            <Button\n                variant="secondary"\n                loader={{\n                    showLoader,\n                    textDescription: "Laster innhold",\n                }}\n                onClick={simulateLoading}\n                icon={boolKnob("icon") && <CheckIcon />}\n                iconPosition={choiceKnob("iconPlacement")}\n            >\n                {boolKnob("label") ? "Lagre" : null}\n            </Button>\n            <Button\n                variant="tertiary"\n                loader={{\n                    showLoader,\n                    textDescription: "Laster innhold",\n                }}\n                onClick={simulateLoading}\n                icon={boolKnob("icon") && <CloseIcon />}\n                iconPosition={choiceKnob("iconPlacement")}\n            >\n                {boolKnob("label") ? "Avbryt" : null}\n            </Button>\n            <Button\n                variant="ghost"\n                icon={boolKnob("icon") && <ChevronDownIcon />}\n                iconPosition={choiceKnob("iconPlacement")}\n            >\n                {boolKnob("label") ? "Ola Nordmann" : null}\n            </Button>\n        </div>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n'),i=o.formatCode('import React from "react";\nimport { Button } from "../Button";\nimport "./style.scss";\n\nexport const AnchorsExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    return (\n        <div className="flex flex-column gap-32 justify-between items-center">\n            <Button as="a" variant="primary" href="/komponenter/buttons#knapper-rendret-som-andre-elementer">\n                Send inn\n            </Button>\n            <Button variant="secondary" as="a" href="/komponenter/buttons#knapper-rendret-som-andre-elementer">\n                Lagre\n            </Button>\n            <Button variant="tertiary" as="a" href="/komponenter/buttons#knapper-rendret-som-andre-elementer">\n                Avbryt\n            </Button>\n            <Button variant="ghost" as="a" href="/komponenter/buttons#knapper-rendret-som-andre-elementer">\n                Vis mer\n            </Button>\n        </div>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n');module.exports=function(){const t=o.useInteractiveCodeControls(r,e),c=o.useInteractiveCodeControls(i,[]);return n.jsxs("div",{className:"jkl",children:[n.jsx(o.InteractiveCode,{title:"Button",defaultCode:r,defaultShowEditor:!0,noInline:!0,controls:t}),n.jsx(o.InteractiveCode,{title:"Button som lenke",defaultCode:i,defaultShowEditor:!0,noInline:!0,controls:c})]})};
+//# sourceMappingURL=Example.js.map

package/build/cjs/components/button/documentation/Example.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Example.js","sources":["../../../../../src/components/button/documentation/AnchorsExample.jsx?raw","../../../../../src/components/button/documentation/ButtonExample.jsx","../../../../../src/components/button/documentation/Example.tsx","../../../../../src/components/button/documentation/ButtonExample.jsx?raw"],"sourcesContent":["export default \"import React from \\\"react\\\";\\nimport { Button } from \\\"../Button\\\";\\nimport \\\"./style.scss\\\";\\n\\nexport const AnchorsExample = () => {\\n    /* -- EXAMPLE CODE START -- */\\n    return (\\n        <div className=\\\"flex flex-column gap-32 justify-between items-center\\\">\\n            <Button as=\\\"a\\\" variant=\\\"primary\\\" href=\\\"/komponenter/buttons#knapper-rendret-som-andre-elementer\\\">\\n                Send inn\\n            </Button>\\n            <Button variant=\\\"secondary\\\" as=\\\"a\\\" href=\\\"/komponenter/buttons#knapper-rendret-som-andre-elementer\\\">\\n                Lagre\\n            </Button>\\n            <Button variant=\\\"tertiary\\\" as=\\\"a\\\" href=\\\"/komponenter/buttons#knapper-rendret-som-andre-elementer\\\">\\n                Avbryt\\n            </Button>\\n            <Button variant=\\\"ghost\\\" as=\\\"a\\\" href=\\\"/komponenter/buttons#knapper-rendret-som-andre-elementer\\\">\\n                Vis mer\\n            </Button>\\n        </div>\\n    );\\n    /* -- EXAMPLE CODE END -- */\\n};\\n\"","import React, { useCallback, useState } from \"react\";\nimport { CheckIcon, ChevronDownIcon, CloseIcon } from \"../../icon\";\nimport { Button } from \"../Button\";\n\nexport const knobs = [\n    {\n        type: \"bool\",\n        label: \"label\",\n        boolOptions: {\n            trueValue: true,\n            falseValue: false,\n        },\n        defaultValue: true,\n    },\n    {\n        type: \"bool\",\n        label: \"icon\",\n        boolOptions: {\n            trueValue: true,\n            falseValue: false,\n        },\n    },\n    {\n        type: \"choice\",\n        label: \"iconPlacement\",\n        choiceOptions: [\n            { label: \"left\", value: \"left\" },\n            { label: \"right\", value: \"right\" },\n        ],\n        defaultValue: 0,\n    },\n];\n\nexport const ButtonExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    const [showLoader, setShowLoader] = useState(false);\n\n    const simulateLoading = useCallback(() => {\n        setShowLoader(true);\n        setTimeout(() => {\n            setShowLoader(false);\n        }, 2200);\n    }, []);\n\n    return (\n        <div className=\"flex flex-column gap-32 justify-between items-center\">\n            <Button\n                variant=\"primary\"\n                loader={{\n                    showLoader,\n                    textDescription: \"Laster innhold\",\n                }}\n                onClick={simulateLoading}\n                icon={boolKnob(\"icon\") && <CheckIcon />}\n                iconPosition={choiceKnob(\"iconPlacement\")}\n            >\n                {boolKnob(\"label\") ? \"Lagre og send inn\" : null}\n            </Button>\n            <Button\n                variant=\"secondary\"\n                loader={{\n                    showLoader,\n                    textDescription: \"Laster innhold\",\n                }}\n                onClick={simulateLoading}\n                icon={boolKnob(\"icon\") && <CheckIcon />}\n                iconPosition={choiceKnob(\"iconPlacement\")}\n            >\n                {boolKnob(\"label\") ? \"Lagre\" : null}\n            </Button>\n            <Button\n                variant=\"tertiary\"\n                loader={{\n                    showLoader,\n                    textDescription: \"Laster innhold\",\n                }}\n                onClick={simulateLoading}\n                icon={boolKnob(\"icon\") && <CloseIcon />}\n                iconPosition={choiceKnob(\"iconPlacement\")}\n            >\n                {boolKnob(\"label\") ? \"Avbryt\" : null}\n            </Button>\n            <Button\n                variant=\"ghost\"\n                icon={boolKnob(\"icon\") && <ChevronDownIcon />}\n                iconPosition={choiceKnob(\"iconPlacement\")}\n            >\n                {boolKnob(\"label\") ? \"Ola Nordmann\" : null}\n            </Button>\n        </div>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n","import React from \"react\";\nimport { formatCode, InteractiveCode, useInteractiveCodeControls } from \"../../../../../../utils/interactive-code\";\nimport AnchorsExample from \"./AnchorsExample?raw\";\n// @ts-ignore\nimport { knobs } from \"./ButtonExample\";\nimport ButtonExample from \"./ButtonExample?raw\";\n\nimport \"../styles/_index.scss\";\n\nconst code = formatCode(ButtonExample);\nconst anchorsCode = formatCode(AnchorsExample);\n\nexport default function Example() {\n    const controls = useInteractiveCodeControls(code, knobs);\n    const anchorsControls = useInteractiveCodeControls(anchorsCode, []);\n    return (\n        <div className={\"jkl\"}>\n            <InteractiveCode\n                title={\"Button\"}\n                defaultCode={code}\n                defaultShowEditor={true}\n                noInline={true}\n                controls={controls}\n            />\n            <InteractiveCode\n                title={\"Button som lenke\"}\n                defaultCode={anchorsCode}\n                defaultShowEditor={true}\n                noInline={true}\n                controls={anchorsControls}\n            />\n        </div>\n    );\n}\n","export default \"import React, { useCallback, useState } from \\\"react\\\";\\nimport { CheckIcon, ChevronDownIcon, CloseIcon } from \\\"../../icon\\\";\\nimport { Button } from \\\"../Button\\\";\\n\\nexport const knobs = [\\n    {\\n        type: \\\"bool\\\",\\n        label: \\\"label\\\",\\n        boolOptions: {\\n            trueValue: true,\\n            falseValue: false,\\n        },\\n        defaultValue: true,\\n    },\\n    {\\n        type: \\\"bool\\\",\\n        label: \\\"icon\\\",\\n        boolOptions: {\\n            trueValue: true,\\n            falseValue: false,\\n        },\\n    },\\n    {\\n        type: \\\"choice\\\",\\n        label: \\\"iconPlacement\\\",\\n        choiceOptions: [\\n            { label: \\\"left\\\", value: \\\"left\\\" },\\n            { label: \\\"right\\\", value: \\\"right\\\" },\\n        ],\\n        defaultValue: 0,\\n    },\\n];\\n\\nexport const ButtonExample = () => {\\n    /* -- EXAMPLE CODE START -- */\\n    const [showLoader, setShowLoader] = useState(false);\\n\\n    const simulateLoading = useCallback(() => {\\n        setShowLoader(true);\\n        setTimeout(() => {\\n            setShowLoader(false);\\n        }, 2200);\\n    }, []);\\n\\n    return (\\n        <div className=\\\"flex flex-column gap-32 justify-between items-center\\\">\\n            <Button\\n                variant=\\\"primary\\\"\\n                loader={{\\n                    showLoader,\\n                    textDescription: \\\"Laster innhold\\\",\\n                }}\\n                onClick={simulateLoading}\\n                icon={boolKnob(\\\"icon\\\") && <CheckIcon />}\\n                iconPosition={choiceKnob(\\\"iconPlacement\\\")}\\n            >\\n                {boolKnob(\\\"label\\\") ? \\\"Lagre og send inn\\\" : null}\\n            </Button>\\n            <Button\\n                variant=\\\"secondary\\\"\\n                loader={{\\n                    showLoader,\\n                    textDescription: \\\"Laster innhold\\\",\\n                }}\\n                onClick={simulateLoading}\\n                icon={boolKnob(\\\"icon\\\") && <CheckIcon />}\\n                iconPosition={choiceKnob(\\\"iconPlacement\\\")}\\n            >\\n                {boolKnob(\\\"label\\\") ? \\\"Lagre\\\" : null}\\n            </Button>\\n            <Button\\n                variant=\\\"tertiary\\\"\\n                loader={{\\n                    showLoader,\\n                    textDescription: \\\"Laster innhold\\\",\\n                }}\\n                onClick={simulateLoading}\\n                icon={boolKnob(\\\"icon\\\") && <CloseIcon />}\\n                iconPosition={choiceKnob(\\\"iconPlacement\\\")}\\n            >\\n                {boolKnob(\\\"label\\\") ? \\\"Avbryt\\\" : null}\\n            </Button>\\n            <Button\\n                variant=\\\"ghost\\\"\\n                icon={boolKnob(\\\"icon\\\") && <ChevronDownIcon />}\\n                iconPosition={choiceKnob(\\\"iconPlacement\\\")}\\n            >\\n                {boolKnob(\\\"label\\\") ? \\\"Ola Nordmann\\\" : null}\\n            </Button>\\n        </div>\\n    );\\n    /* -- EXAMPLE CODE END -- */\\n};\\n\""],"names":["knobs","type","label","boolOptions","trueValue","falseValue","defaultValue","choiceOptions","value","code","formatCode","anchorsCode","controls","useInteractiveCodeControls","anchorsControls","jsxs","className","children","jsx","InteractiveCode","title","defaultCode","defaultShowEditor","noInline"],"mappings":"iqDAAA,MCIaA,EAAQ,CACjB,CACIC,KAAM,OACNC,MAAO,QACPC,YAAa,CACTC,WAAW,EACXC,YAAY,GAEhBC,cAAc,GAElB,CACIL,KAAM,OACNC,MAAO,OACPC,YAAa,CACTC,WAAW,EACXC,YAAY,IAGpB,CACIJ,KAAM,SACNC,MAAO,gBACPK,cAAe,CACX,CAAEL,MAAO,OAAQM,MAAO,QACxB,CAAEN,MAAO,QAASM,MAAO,UAE7BF,aAAc,ICpBhBG,EAAOC,EAAAA,WCTE,0zFDUTC,EAAcD,EAAAA,WFVL,g9BEYf,WACU,MAAAE,EAAWC,EAAAA,2BAA2BJ,EAAMT,GAC5Cc,EAAkBD,EAAAA,2BAA2BF,EAAa,IAE5D,OAAAI,EAAAA,KAAC,MAAI,CAAAC,UAAW,MACZC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,gBAAA,CACGC,MAAO,SACPC,YAAaZ,EACba,mBAAmB,EACnBC,UAAU,EACVX,SAAAA,IAEJM,EAAAA,IAACC,EAAAA,gBAAA,CACGC,MAAO,mBACPC,YAAaV,EACbW,mBAAmB,EACnBC,UAAU,EACVX,SAAUE,MAI1B"}

package/build/cjs/components/button/documentation/main.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),r=require("react-dom/client");require("react"),require("../../../hooks/useScreen/useScreen.js"),require("../../../hooks/useId/useId.js"),require("../../icon/Icon.js"),require("../../icon/icons/animated/ArrowVerticalAnimated.js"),require("../../icon/icons/animated/ArrowHorizontalAnimated.js"),require("../../icon/icons/animated/PlusRemoveAnimated.js"),require("../../icon/icons/ArrowDownIcon.js"),require("../../icon/icons/ArrowLeftIcon.js"),require("../../icon/icons/ArrowNorthEastIcon.js"),require("../../icon/icons/ArrowRightIcon.js"),require("../../icon/icons/ArrowUpIcon.js"),require("../../icon/icons/CalendarIcon.js"),require("../../icon/icons/CheckIcon.js"),require("../../icon/icons/ChevronDownIcon.js"),require("../../icon/icons/ChevronLeftIcon.js"),require("../../icon/icons/ChevronRightIcon.js"),require("../../icon/icons/ChevronUpIcon.js"),require("../../icon/icons/CloseIcon.js"),require("../../icon/icons/CopyIcon.js"),require("../../icon/icons/DotsIcon.js"),require("../../icon/icons/DragIcon.js"),require("../../icon/icons/ErrorIcon.js"),require("../../icon/icons/GreenCheckIcon.js"),require("../../icon/icons/HamburgerIcon.js"),require("../../icon/icons/InfoIcon.js"),require("../../icon/icons/LinkIcon.js"),require("../../icon/icons/PlusIcon.js"),require("../../icon/icons/QuestionIcon.js"),require("../../icon/icons/RedCrossIcon.js"),require("../../icon/icons/SearchIcon.js"),require("../../icon/icons/SuccessIcon.js"),require("../../icon/icons/WarningIcon.js"),require("../../icon/icons/MinusIcon.js"),require("../../icon/icons/ThumbDownIcon.js"),require("../../icon/icons/ThumbUpIcon.js"),require("../../icon/icons/TrashCanIcon.js"),require("../../icon/icons/PenIcon.js"),require("../Button.js"),require("../../card/Card.js"),require("../../card/CardImage.js"),require("../../card/NavCard.js"),require("../../checkbox/Checkbox.js"),require("../../combobox/Combobox.js"),require("../../cookie-consent/CookieConsentContext.js"),require("react-dom"),require("../../modal/Modal.js"),require("react-a11y-dialog"),require("../../list/List.js"),require("../../list/ListItem.js"),require("../../datepicker/DatePicker.js"),require("../../feedback/feedbackContext.js"),require("../../message/Message.js"),require("../../message/FormErrorMessage.js"),require("../../tooltip/Tooltip.js"),require("../../tooltip/TooltipContent.js"),require("../../tooltip/TooltipTrigger.js"),require("../../input-group/InputGroup.js"),require("../../feedback/followup/followupContext.js"),require("../../feedback/main-question/mainQuestionContext.js"),require("../../radio-button/RadioButton.js"),require("../../radio-button/radioGroupContext.js"),require("../../radio-button/BaseRadioButton.js"),require("../../text-input/BaseTextArea.js"),require("../../text-input/BaseTextInput.js"),require("../../text-input/TextArea.js"),require("../../text-input/TextInput.js"),require("../../../utilities/polymorphism/SlotComponent.js");const i=require("../../../utilities/tabListener.js");require("../../../../ExpandableTableRow-Bkqt-qP5.cjs"),require("../../icon-button/IconButton.js"),require("../../link/Link.js"),require("../../link/NavLink.js"),require("../../link-list/LinkList.js"),require("../../logo/text-paths/ForsikringLevertAvFremtind.js"),require("../../logo/text-paths/FraSB1ogDNB.js"),require("../../logo/text-paths/InnovasjonFraFremtind.js"),require("../../logo/text-paths/TeknologiFraFremtind.js"),require("../../logo/text-paths/VartEgetForsikringsselskap.js"),require("../../logo/text-paths/VartForsikringsselskap.js"),require("../../menu/MenuItem.js"),require("../../menu/MenuItemCheckbox.js"),require("../../popover/Popover.js"),require("../../system-message/SystemMessage.js"),require("../../table/DataTable.js"),require("../../table/Table.js"),require("../../table/TableBody.js"),require("../../table/TableCaption.js"),require("../../table/TableCell.js"),require("../../table/TableColumn.js"),require("../../table/TableColumnGroup.js"),require("../../table/tableContext.js"),require("../../table/tableSectionContext.js"),require("../../table/TableFooter.js"),require("../../table/TableHead.js"),require("../../table/TableHeader.js"),require("../../table/TableRow.js"),require("../../tabs/NavTab.js"),require("../../tabs/tabsContext.js"),require("../../tabs/Tab.js"),require("../../tag/Tag.js"),require("../../toast/toastContext.js"),require("../../toggle-switch/ToggleSwitch.js");const o=require("./Example.js");i.initTabListener(),r.createRoot(document.getElementById("root")).render(e.jsx(o,{}));
+//# sourceMappingURL=main.js.map

package/build/cjs/components/button/documentation/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sources":["../../../../../src/components/button/documentation/main.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport { initTabListener } from \"../../..\";\nimport Example from \"./Example\";\n\ninitTabListener();\n\nReactDOM.createRoot(document.getElementById(\"root\")!).render(<Example />);\n"],"names":["initTabListener","ReactDOM","createRoot","document","getElementById","render","jsx","Example"],"mappings":"m3IAKAA,EAAAA,kBAEAC,EAASC,WAAWC,SAASC,eAAe,SAAUC,OAAQC,EAAAA,IAAAC,EAAA,CAAA"}

package/build/cjs/components/button/documentation/vite.dev.config.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("node:path"),i=require("@vitejs/plugin-react-swc"),r=require("vite"),s=require("../../../../copy-jkl-fonts-BEH11kbT.cjs"),o=r.defineConfig({plugins:[i(),s.copyJklFonts(e.resolve(__dirname,"public","fonts"))]});module.exports=o;
+//# sourceMappingURL=vite.dev.config.js.map

package/build/cjs/components/button/documentation/vite.dev.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.dev.config.js","sources":["../../../../../src/components/button/documentation/vite.dev.config.ts"],"sourcesContent":["import { resolve } from \"path\";\nimport react from \"@vitejs/plugin-react-swc\";\nimport { defineConfig } from \"vite\";\nimport { copyJklFonts } from \"../../../../../../utils/vite\";\n\nexport default defineConfig({\n    plugins: [react(), copyJklFonts(resolve(__dirname, \"public\", \"fonts\"))],\n});\n"],"names":["vite_dev_config","defineConfig","plugins","react","copyJklFonts","resolve","__dirname"],"mappings":"uJAKAA,EAAeC,eAAa,CACxBC,QAAS,CAACC,IAASC,EAAAA,aAAaC,UAAQC,UAAW,SAAU"}

package/build/cjs/components/card/documentation/Example.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),n=require("../../../../formatCode-BWsrUMWq.cjs");require("react"),require("../../tag/Tag.js");const o=require("../Card.js");require("../../../utilities/polymorphism/SlotComponent.js"),require("../NavCard.js"),require("../../../hooks/useScreen/useScreen.js"),require("../../../hooks/useId/useId.js"),require("../CardImage.js"),require("../../checkbox/Checkbox.js"),require("../../tooltip/Tooltip.js"),require("../../tooltip/TooltipContent.js"),require("../../tooltip/TooltipTrigger.js"),require("../../icon/Icon.js"),require("../../icon/icons/animated/ArrowVerticalAnimated.js"),require("../../icon/icons/animated/ArrowHorizontalAnimated.js"),require("../../icon/icons/animated/PlusRemoveAnimated.js"),require("../../icon/icons/ArrowDownIcon.js"),require("../../icon/icons/ArrowLeftIcon.js"),require("../../icon/icons/ArrowNorthEastIcon.js"),require("../../icon/icons/ArrowRightIcon.js"),require("../../icon/icons/ArrowUpIcon.js"),require("../../icon/icons/CalendarIcon.js"),require("../../icon/icons/CheckIcon.js"),require("../../icon/icons/ChevronDownIcon.js"),require("../../icon/icons/ChevronLeftIcon.js"),require("../../icon/icons/ChevronRightIcon.js"),require("../../icon/icons/ChevronUpIcon.js"),require("../../icon/icons/CloseIcon.js"),require("../../icon/icons/CopyIcon.js"),require("../../icon/icons/DotsIcon.js"),require("../../icon/icons/DragIcon.js"),require("../../icon/icons/ErrorIcon.js"),require("../../icon/icons/GreenCheckIcon.js"),require("../../icon/icons/HamburgerIcon.js"),require("../../icon/icons/InfoIcon.js"),require("../../icon/icons/LinkIcon.js"),require("../../icon/icons/PlusIcon.js"),require("../../icon/icons/QuestionIcon.js"),require("../../icon/icons/RedCrossIcon.js"),require("../../icon/icons/SearchIcon.js"),require("../../icon/icons/SuccessIcon.js"),require("../../icon/icons/WarningIcon.js"),require("../../icon/icons/MinusIcon.js"),require("../../icon/icons/ThumbDownIcon.js"),require("../../icon/icons/ThumbUpIcon.js"),require("../../icon/icons/TrashCanIcon.js"),require("../../icon/icons/PenIcon.js"),require("../../input-group/InputGroup.js"),require("../../../../ExpandableTableRow-Bkqt-qP5.cjs");const a=[{type:"bool",label:"Clickable",boolOptions:{trueValue:!0,falseValue:!1}},{type:"choice",label:"Padding",choiceOptions:o.CARD_PADDINGS.map((e=>({label:e,value:e}))),defaultValue:0},{type:"choice",label:"Type",choiceOptions:o.CARD_VARIANTS.map((e=>({label:e,value:e}))),defaultValue:0}],i=[{type:"bool",label:"Title",boolOptions:{trueValue:!0,falseValue:!1}},{type:"choice",label:"Padding",choiceOptions:["0","16","24","40","blandet"],defaultValue:2}],r=[{type:"bool",label:"Image",boolOptions:{trueValue:!0,falseValue:!1}},{type:"bool",label:"Tag",boolOptions:{trueValue:!0,falseValue:!1}},{type:"bool",label:"Description",boolOptions:{trueValue:!0,falseValue:!1}},{type:"bool",label:"Ekstra info",boolOptions:{trueValue:!0,falseValue:!1}},{type:"bool",label:"Ekstra lenke",boolOptions:{trueValue:!0,falseValue:!1}},{type:"choice",label:"Padding",choiceOptions:["0","16","24","40","blandet"],defaultValue:2}],t=[{type:"bool",label:"Clickable",boolOptions:{trueValue:!0,falseValue:!1}},{type:"choice",label:"Padding",choiceOptions:o.CARD_PADDINGS.map((e=>({label:e,value:e}))),defaultValue:0},{type:"choice",label:"Type",choiceOptions:o.CARD_VARIANTS.map((e=>({label:e,value:e}))),defaultValue:0}],l=[{type:"choice",label:"Padding",choiceOptions:["0","16","24","40","blandet"],defaultValue:2}],s=n.formatCode('import React from "react";\nimport { formatValuta } from "../../../../utilities/formatters";\nimport { ErrorTag } from "../../../tag";\nimport { Card, CARD_PADDINGS, CARD_VARIANTS } from "../../Card";\n\nexport const knobs = [\n    {\n        type: "bool",\n        label: "Clickable",\n        boolOptions: {\n            trueValue: true,\n            falseValue: false,\n        },\n    },\n    {\n        type: "choice",\n        label: "Padding",\n        choiceOptions: CARD_PADDINGS.map((p) => ({ label: p, value: p })),\n        defaultValue: 0,\n    },\n    {\n        type: "choice",\n        label: "Type",\n        choiceOptions: CARD_VARIANTS.map((v) => ({ label: v, value: v })),\n        defaultValue: 0,\n    },\n];\n\nexport const FakturainfoExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    const padding = choiceKnob("Padding");\n    const type = choiceKnob("Type");\n\n    return (\n        <div className="flex">\n            <Card asChild clickable={!!boolKnob("Clickable")} padding={padding} variant={type}>\n                <a href="#test" className="flex gap-x-40">\n                    <div className="flex flex-column gap-4">\n                        <p className="jkl-heading-2">\n                            {formatValuta(18856)}\n                            <span aria-hidden> →</span>\n                        </p>\n                        <p className="jkl-body">Frist 20.03.2023</p>\n                    </div>\n                    <div className="flex flex-column gap-12">\n                        <ErrorTag>Ubetalt</ErrorTag>\n                        <p className="jkl-body">Purring</p>\n                    </div>\n                </a>\n            </Card>\n        </div>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n'),c=n.formatCode('import React from "react";\nimport { Image } from "../../../image";\nimport { SuccessTag } from "../../../tag";\nimport { Card, CARD_PADDINGS, CARD_VARIANTS } from "../../Card";\nimport { CardImage } from "../../CardImage";\n\nexport const knobs = [\n    {\n        type: "bool",\n        label: "Clickable",\n        boolOptions: {\n            trueValue: true,\n            falseValue: false,\n        },\n    },\n    {\n        type: "choice",\n        label: "Padding",\n        choiceOptions: CARD_PADDINGS.map((p) => ({ label: p, value: p })),\n        defaultValue: 0,\n    },\n    {\n        type: "choice",\n        label: "Type",\n        choiceOptions: CARD_VARIANTS.map((v) => ({ label: v, value: v })),\n        defaultValue: 0,\n    },\n];\n\nexport const StatuskortExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    const imageProps = {\n        src: "/img/grass-400.jpg",\n        srcSet: `/img/grass-400.jpg 400w, /img/grass-800.jpg 800w`,\n        placeholder: "/img/grass-thumbnail.jpg",\n        alt: "Nærbilde av strå, med en åker i bakgrunnen",\n    };\n\n    const padding = choiceKnob("Padding");\n    const type = choiceKnob("Type");\n\n    return (\n        <Card\n            as="a"\n            href="#"\n            clickable={boolKnob("Clickable")}\n            padding={padding}\n            variant={type}\n            style={{ maxWidth: "350px" }}\n            className="flex flex-column gap-24 items-start"\n        >\n            <CardImage as={Image} placement="top" {...imageProps} />\n            <SuccessTag>Behandles</SuccessTag>\n            <div className="flex flex-column gap-4">\n                <p className="jkl-heading-2">\n                    Behandlings- og veterinærutgifter\n                    <span aria-hidden> →</span>\n                </p>\n                <p className="jkl-body">Balder</p>\n            </div>\n            <hr\n                style={{\n                    margin: 0,\n                    width: "100%",\n                    border: 0,\n                    borderBottom: "1px solid var(--jkl-color-border-separator)",\n                }}\n            />\n            <p className="jkl-small">\n                Skadedato\n                <br />\n                24.01.2024\n            </p>\n        </Card>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n'),d=n.formatCode('import React from "react";\nimport { NavCard, InfoBlock } from "../../NavCard";\n\nexport const knobs = [\n    {\n        type: "bool",\n        label: "Image",\n        boolOptions: {\n            trueValue: true,\n            falseValue: false,\n        },\n    },\n    {\n        type: "bool",\n        label: "Tag",\n        boolOptions: {\n            trueValue: true,\n            falseValue: false,\n        },\n    },\n    {\n        type: "bool",\n        label: "Description",\n        boolOptions: {\n            trueValue: true,\n            falseValue: false,\n        },\n    },\n    {\n        type: "bool",\n        label: "Ekstra info",\n        boolOptions: {\n            trueValue: true,\n            falseValue: false,\n        },\n    },\n    {\n        type: "bool",\n        label: "Ekstra lenke",\n        boolOptions: {\n            trueValue: true,\n            falseValue: false,\n        },\n    },\n    {\n        type: "choice",\n        label: "Padding",\n        choiceOptions: ["0", "16", "24", "40", "blandet"],\n        defaultValue: 2,\n    },\n];\n\nexport const NavCardExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    const imageProps = {\n        src: "/img/grass-400.jpg",\n        srcSet: `/img/grass-400.jpg 400w, /img/grass-800.jpg 800w`,\n        placeholder: "/img/grass-thumbnail.jpg",\n        alt: "Nærbilde av strå, med en åker i bakgrunnen",\n    };\n\n    const image = boolKnob("Image") ? imageProps : undefined;\n    const tag = boolKnob("Tag") ? { type: "success", text: "Behandles" } : undefined;\n    const description = boolKnob("Description") ? "Balder" : undefined;\n    const paddingChoice = choiceKnob("Padding");\n    const external = boolKnob("Ekstra lenke") ? true : undefined;\n    const padding =\n        paddingChoice === "blandet"\n            ? {\n                  top: "64",\n                  right: "40",\n                  bottom: "16",\n                  left: "24",\n              }\n            : paddingChoice;\n\n    return (\n        <div className="flex">\n            <NavCard\n                padding={padding}\n                id="nav-card"\n                href="#nav-card"\n                image={image}\n                title="Behandlings- og Veterinærutgifter"\n                description={description}\n                tag={tag}\n                external={external}\n            >\n                {boolKnob("Ekstra info") && (\n                    <InfoBlock>\n                        Skadedato\n                        <br />\n                        01.12.2021\n                    </InfoBlock>\n                )}\n            </NavCard>\n        </div>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n'),p=n.formatCode('import React from "react";\nimport { unicode } from "../../../../utilities";\nimport { InfoCard } from "../../InfoCard";\n\n//import "./info-card-example.scss";\n\nexport const knobs = [\n    {\n        type: "bool",\n        label: "Title",\n        boolOptions: {\n            trueValue: true,\n            falseValue: false,\n        },\n    },\n    {\n        type: "choice",\n        label: "Padding",\n        choiceOptions: ["0", "16", "24", "40", "blandet"],\n        defaultValue: 2,\n    },\n];\n\nexport const InfoCardExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    const title = boolKnob("Title") ? `Samle forsikringer –${unicode.nbsp}få${unicode.nbsp}rabatt` : undefined;\n    const paddingChoice = choiceKnob("Padding") || "24";\n    const padding =\n        paddingChoice === "blandet"\n            ? {\n                  top: "64",\n                  right: "40",\n                  bottom: "16",\n                  left: "24",\n              }\n            : paddingChoice;\n\n    return (\n        <div className="flex">\n            <InfoCard title={title} padding={padding} className="example-info-card">\n                <p className="jkl-body">Har du tre eller flere forsikringer får du samlerabatt</p>\n            </InfoCard>\n        </div>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n'),u=n.formatCode('import React, { useState } from "react";\nimport { useAnimatedHeight } from "../../../../hooks";\nimport { Checkbox } from "../../../checkbox";\nimport { FieldGroup } from "../../../input-group";\nimport { Select } from "../../../select";\nimport { TaskCard } from "../../TaskCard";\n\nexport const knobs = [\n    {\n        type: "choice",\n        label: "Padding",\n        choiceOptions: ["0", "16", "24", "40", "blandet"],\n        defaultValue: 2,\n    },\n];\n\nexport const TaskCardExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    const [selected, setSelected] = useState(false);\n    const [contentRef] = useAnimatedHeight(selected);\n\n    const paddingChoice = choiceKnob("Padding") || "24";\n    const padding =\n        paddingChoice === "blandet"\n            ? {\n                  top: "64",\n                  right: "40",\n                  bottom: "16",\n                  left: "24",\n              }\n            : paddingChoice;\n\n    return (\n        <TaskCard background={selected ? "highlighted" : "subdued"} withShadow={selected} padding={padding}>\n            <Checkbox\n                id="veterinar-checkbox"\n                aria-controls="expanded-content"\n                aria-expanded={selected}\n                name="veterinar"\n                value="veterinar"\n                onChange={() => setSelected((selected) => !selected)}\n            >\n                Veterinærutgifter\n            </Checkbox>\n            <p className="jkl-body jkl-spacing-12--top">\n                Dekker veterinærutgifter og medisiner på resept, som ofte kan bli dyrt.\n            </p>\n            <div\n                id="expanded-content"\n                aria-labelledby="veterinar-checkbox"\n                role="group"\n                className="jkl-task-card-example__content"\n                hidden={!selected}\n                ref={contentRef}\n            >\n                <Select\n                    label="Forsikringssum"\n                    name="forsikringssum"\n                    className="jkl-spacing-40--top"\n                    items={["10 000 kr", "20 000 kr", "30 000 kr"]}\n                />\n                <Select\n                    label="Velg egenandel"\n                    name="egenandel"\n                    className="jkl-spacing-24--top"\n                    items={["1 500 kr", "2 500 kr", "3 000 kr"]}\n                />\n                <FieldGroup className="jkl-spacing-24--top" legend="Tilleggsforsikring">\n                    <Checkbox name="tilleggsforsikring" value="rehab">\n                        Dekning av rehabilitering\n                    </Checkbox>\n                </FieldGroup>\n                <p className="jkl-body jkl-spacing-40--top">\n                    Dersom du ønsker ekstra forsikring av valpekull, må du ta kontakt med en rådgiver.\n                </p>\n            </div>\n        </TaskCard>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n');module.exports=function(){const o=n.useInteractiveCodeControls(s,a),m=n.useInteractiveCodeControls(c,t),b=n.useInteractiveCodeControls(d,r),g=n.useInteractiveCodeControls(p,i),f=n.useInteractiveCodeControls(u,l);return e.jsxs("div",{className:"jkl",children:[e.jsx(n.InteractiveCode,{title:"Informasjon om forfalt faktura",defaultCode:s,defaultShowEditor:!0,noInline:!0,controls:o}),e.jsx(n.InteractiveCode,{title:"Statuskort for skadesak",defaultCode:c,defaultShowEditor:!0,noInline:!0,controls:m}),e.jsx(n.InteractiveCode,{title:"NavCard",defaultCode:d,defaultShowEditor:!0,noInline:!0,controls:b}),e.jsx(n.InteractiveCode,{title:"InfoCard",defaultCode:p,defaultShowEditor:!0,noInline:!0,controls:g}),e.jsx(n.InteractiveCode,{title:"TaskCard",defaultCode:u,defaultShowEditor:!0,noInline:!0,controls:f})]})};
+//# sourceMappingURL=Example.js.map

package/build/cjs/components/card/documentation/Example.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Example.js","sources":["../../../../../src/components/card/documentation/examples/FakturainfoExample.jsx","../../../../../src/components/card/documentation/examples/InfoCardExample.jsx","../../../../../src/components/card/documentation/examples/NavCardExample.jsx","../../../../../src/components/card/documentation/examples/StatuskortExample.jsx","../../../../../src/components/card/documentation/examples/TaskCardExample.jsx","../../../../../src/components/card/documentation/Example.tsx","../../../../../src/components/card/documentation/examples/FakturainfoExample.jsx?raw","../../../../../src/components/card/documentation/examples/StatuskortExample.jsx?raw","../../../../../src/components/card/documentation/examples/NavCardExample.jsx?raw","../../../../../src/components/card/documentation/examples/InfoCardExample.jsx?raw","../../../../../src/components/card/documentation/examples/TaskCardExample.jsx?raw"],"sourcesContent":["import React from \"react\";\nimport { formatValuta } from \"../../../../utilities/formatters\";\nimport { ErrorTag } from \"../../../tag\";\nimport { Card, CARD_PADDINGS, CARD_VARIANTS } from \"../../Card\";\n\nexport const knobs = [\n    {\n        type: \"bool\",\n        label: \"Clickable\",\n        boolOptions: {\n            trueValue: true,\n            falseValue: false,\n        },\n    },\n    {\n        type: \"choice\",\n        label: \"Padding\",\n        choiceOptions: CARD_PADDINGS.map((p) => ({ label: p, value: p })),\n        defaultValue: 0,\n    },\n    {\n        type: \"choice\",\n        label: \"Type\",\n        choiceOptions: CARD_VARIANTS.map((v) => ({ label: v, value: v })),\n        defaultValue: 0,\n    },\n];\n\nexport const FakturainfoExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    const padding = choiceKnob(\"Padding\");\n    const type = choiceKnob(\"Type\");\n\n    return (\n        <div className=\"flex\">\n            <Card asChild clickable={!!boolKnob(\"Clickable\")} padding={padding} variant={type}>\n                <a href=\"#test\" className=\"flex gap-x-40\">\n                    <div className=\"flex flex-column gap-4\">\n                        <p className=\"jkl-heading-2\">\n                            {formatValuta(18856)}\n                            <span aria-hidden> →</span>\n                        </p>\n                        <p className=\"jkl-body\">Frist 20.03.2023</p>\n                    </div>\n                    <div className=\"flex flex-column gap-12\">\n                        <ErrorTag>Ubetalt</ErrorTag>\n                        <p className=\"jkl-body\">Purring</p>\n                    </div>\n                </a>\n            </Card>\n        </div>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n","import React from \"react\";\nimport { unicode } from \"../../../../utilities\";\nimport { InfoCard } from \"../../InfoCard\";\n\n//import \"./info-card-example.scss\";\n\nexport const knobs = [\n    {\n        type: \"bool\",\n        label: \"Title\",\n        boolOptions: {\n            trueValue: true,\n            falseValue: false,\n        },\n    },\n    {\n        type: \"choice\",\n        label: \"Padding\",\n        choiceOptions: [\"0\", \"16\", \"24\", \"40\", \"blandet\"],\n        defaultValue: 2,\n    },\n];\n\nexport const InfoCardExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    const title = boolKnob(\"Title\") ? `Samle forsikringer –${unicode.nbsp}få${unicode.nbsp}rabatt` : undefined;\n    const paddingChoice = choiceKnob(\"Padding\") || \"24\";\n    const padding =\n        paddingChoice === \"blandet\"\n            ? {\n                  top: \"64\",\n                  right: \"40\",\n                  bottom: \"16\",\n                  left: \"24\",\n              }\n            : paddingChoice;\n\n    return (\n        <div className=\"flex\">\n            <InfoCard title={title} padding={padding} className=\"example-info-card\">\n                <p className=\"jkl-body\">Har du tre eller flere forsikringer får du samlerabatt</p>\n            </InfoCard>\n        </div>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n","import React from \"react\";\nimport { NavCard, InfoBlock } from \"../../NavCard\";\n\nexport const knobs = [\n    {\n        type: \"bool\",\n        label: \"Image\",\n        boolOptions: {\n            trueValue: true,\n            falseValue: false,\n        },\n    },\n    {\n        type: \"bool\",\n        label: \"Tag\",\n        boolOptions: {\n            trueValue: true,\n            falseValue: false,\n        },\n    },\n    {\n        type: \"bool\",\n        label: \"Description\",\n        boolOptions: {\n            trueValue: true,\n            falseValue: false,\n        },\n    },\n    {\n        type: \"bool\",\n        label: \"Ekstra info\",\n        boolOptions: {\n            trueValue: true,\n            falseValue: false,\n        },\n    },\n    {\n        type: \"bool\",\n        label: \"Ekstra lenke\",\n        boolOptions: {\n            trueValue: true,\n            falseValue: false,\n        },\n    },\n    {\n        type: \"choice\",\n        label: \"Padding\",\n        choiceOptions: [\"0\", \"16\", \"24\", \"40\", \"blandet\"],\n        defaultValue: 2,\n    },\n];\n\nexport const NavCardExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    const imageProps = {\n        src: \"/img/grass-400.jpg\",\n        srcSet: `/img/grass-400.jpg 400w, /img/grass-800.jpg 800w`,\n        placeholder: \"/img/grass-thumbnail.jpg\",\n        alt: \"Nærbilde av strå, med en åker i bakgrunnen\",\n    };\n\n    const image = boolKnob(\"Image\") ? imageProps : undefined;\n    const tag = boolKnob(\"Tag\") ? { type: \"success\", text: \"Behandles\" } : undefined;\n    const description = boolKnob(\"Description\") ? \"Balder\" : undefined;\n    const paddingChoice = choiceKnob(\"Padding\");\n    const external = boolKnob(\"Ekstra lenke\") ? true : undefined;\n    const padding =\n        paddingChoice === \"blandet\"\n            ? {\n                  top: \"64\",\n                  right: \"40\",\n                  bottom: \"16\",\n                  left: \"24\",\n              }\n            : paddingChoice;\n\n    return (\n        <div className=\"flex\">\n            <NavCard\n                padding={padding}\n                id=\"nav-card\"\n                href=\"#nav-card\"\n                image={image}\n                title=\"Behandlings- og Veterinærutgifter\"\n                description={description}\n                tag={tag}\n                external={external}\n            >\n                {boolKnob(\"Ekstra info\") && (\n                    <InfoBlock>\n                        Skadedato\n                        <br />\n                        01.12.2021\n                    </InfoBlock>\n                )}\n            </NavCard>\n        </div>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n","import React from \"react\";\nimport { Image } from \"../../../image\";\nimport { SuccessTag } from \"../../../tag\";\nimport { Card, CARD_PADDINGS, CARD_VARIANTS } from \"../../Card\";\nimport { CardImage } from \"../../CardImage\";\n\nexport const knobs = [\n    {\n        type: \"bool\",\n        label: \"Clickable\",\n        boolOptions: {\n            trueValue: true,\n            falseValue: false,\n        },\n    },\n    {\n        type: \"choice\",\n        label: \"Padding\",\n        choiceOptions: CARD_PADDINGS.map((p) => ({ label: p, value: p })),\n        defaultValue: 0,\n    },\n    {\n        type: \"choice\",\n        label: \"Type\",\n        choiceOptions: CARD_VARIANTS.map((v) => ({ label: v, value: v })),\n        defaultValue: 0,\n    },\n];\n\nexport const StatuskortExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    const imageProps = {\n        src: \"/img/grass-400.jpg\",\n        srcSet: `/img/grass-400.jpg 400w, /img/grass-800.jpg 800w`,\n        placeholder: \"/img/grass-thumbnail.jpg\",\n        alt: \"Nærbilde av strå, med en åker i bakgrunnen\",\n    };\n\n    const padding = choiceKnob(\"Padding\");\n    const type = choiceKnob(\"Type\");\n\n    return (\n        <Card\n            as=\"a\"\n            href=\"#\"\n            clickable={boolKnob(\"Clickable\")}\n            padding={padding}\n            variant={type}\n            style={{ maxWidth: \"350px\" }}\n            className=\"flex flex-column gap-24 items-start\"\n        >\n            <CardImage as={Image} placement=\"top\" {...imageProps} />\n            <SuccessTag>Behandles</SuccessTag>\n            <div className=\"flex flex-column gap-4\">\n                <p className=\"jkl-heading-2\">\n                    Behandlings- og veterinærutgifter\n                    <span aria-hidden> →</span>\n                </p>\n                <p className=\"jkl-body\">Balder</p>\n            </div>\n            <hr\n                style={{\n                    margin: 0,\n                    width: \"100%\",\n                    border: 0,\n                    borderBottom: \"1px solid var(--jkl-color-border-separator)\",\n                }}\n            />\n            <p className=\"jkl-small\">\n                Skadedato\n                <br />\n                24.01.2024\n            </p>\n        </Card>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n","import React, { useState } from \"react\";\nimport { useAnimatedHeight } from \"../../../../hooks\";\nimport { Checkbox } from \"../../../checkbox\";\nimport { FieldGroup } from \"../../../input-group\";\nimport { Select } from \"../../../select\";\nimport { TaskCard } from \"../../TaskCard\";\n\nexport const knobs = [\n    {\n        type: \"choice\",\n        label: \"Padding\",\n        choiceOptions: [\"0\", \"16\", \"24\", \"40\", \"blandet\"],\n        defaultValue: 2,\n    },\n];\n\nexport const TaskCardExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    const [selected, setSelected] = useState(false);\n    const [contentRef] = useAnimatedHeight(selected);\n\n    const paddingChoice = choiceKnob(\"Padding\") || \"24\";\n    const padding =\n        paddingChoice === \"blandet\"\n            ? {\n                  top: \"64\",\n                  right: \"40\",\n                  bottom: \"16\",\n                  left: \"24\",\n              }\n            : paddingChoice;\n\n    return (\n        <TaskCard background={selected ? \"highlighted\" : \"subdued\"} withShadow={selected} padding={padding}>\n            <Checkbox\n                id=\"veterinar-checkbox\"\n                aria-controls=\"expanded-content\"\n                aria-expanded={selected}\n                name=\"veterinar\"\n                value=\"veterinar\"\n                onChange={() => setSelected((selected) => !selected)}\n            >\n                Veterinærutgifter\n            </Checkbox>\n            <p className=\"jkl-body jkl-spacing-12--top\">\n                Dekker veterinærutgifter og medisiner på resept, som ofte kan bli dyrt.\n            </p>\n            <div\n                id=\"expanded-content\"\n                aria-labelledby=\"veterinar-checkbox\"\n                role=\"group\"\n                className=\"jkl-task-card-example__content\"\n                hidden={!selected}\n                ref={contentRef}\n            >\n                <Select\n                    label=\"Forsikringssum\"\n                    name=\"forsikringssum\"\n                    className=\"jkl-spacing-40--top\"\n                    items={[\"10 000 kr\", \"20 000 kr\", \"30 000 kr\"]}\n                />\n                <Select\n                    label=\"Velg egenandel\"\n                    name=\"egenandel\"\n                    className=\"jkl-spacing-24--top\"\n                    items={[\"1 500 kr\", \"2 500 kr\", \"3 000 kr\"]}\n                />\n                <FieldGroup className=\"jkl-spacing-24--top\" legend=\"Tilleggsforsikring\">\n                    <Checkbox name=\"tilleggsforsikring\" value=\"rehab\">\n                        Dekning av rehabilitering\n                    </Checkbox>\n                </FieldGroup>\n                <p className=\"jkl-body jkl-spacing-40--top\">\n                    Dersom du ønsker ekstra forsikring av valpekull, må du ta kontakt med en rådgiver.\n                </p>\n            </div>\n        </TaskCard>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n","import React from \"react\";\nimport { formatCode, InteractiveCode, useInteractiveCodeControls } from \"../../../../../../utils/interactive-code\";\n// @ts-ignore\nimport { knobs as fakturaInfoKnobs } from \"./examples/FakturainfoExample\";\nimport FakturainfoExample from \"./examples/FakturainfoExample?raw\";\n// @ts-ignore\nimport { knobs as infoCardKnobs } from \"./examples/InfoCardExample\";\nimport InfoCardExample from \"./examples/InfoCardExample?raw\";\n// @ts-ignore\nimport { knobs as navCardKnobs } from \"./examples/NavCardExample\";\nimport NavCardExample from \"./examples/NavCardExample?raw\";\n// @ts-ignore\nimport { knobs as statuskortKnobs } from \"./examples/StatuskortExample\";\nimport StatuskortExample from \"./examples/StatuskortExample?raw\";\n// @ts-ignore\nimport { knobs as taskCardKnobs } from \"./examples/TaskCardExample\";\nimport TaskCardExample from \"./examples/TaskCardExample?raw\";\n\nimport \"../styles/_index.scss\";\nimport \"./info-card-example.scss\";\nimport \"./task-card-example.scss\";\n\nconst fakturaInfoCode = formatCode(FakturainfoExample);\nconst statuskortCode = formatCode(StatuskortExample);\nconst navCardCode = formatCode(NavCardExample);\nconst infoCardCode = formatCode(InfoCardExample);\nconst taskCardCode = formatCode(TaskCardExample);\n\nexport default function Example() {\n    const fakturaInfoControls = useInteractiveCodeControls(fakturaInfoCode, fakturaInfoKnobs);\n    const statuskortControls = useInteractiveCodeControls(statuskortCode, statuskortKnobs);\n    const navCardControls = useInteractiveCodeControls(navCardCode, navCardKnobs);\n    const infoCardControls = useInteractiveCodeControls(infoCardCode, infoCardKnobs);\n    const taskCardControls = useInteractiveCodeControls(taskCardCode, taskCardKnobs);\n\n    return (\n        <div className={\"jkl\"}>\n            <InteractiveCode\n                title={\"Informasjon om forfalt faktura\"}\n                defaultCode={fakturaInfoCode}\n                defaultShowEditor={true}\n                noInline={true}\n                controls={fakturaInfoControls}\n            />\n            <InteractiveCode\n                title={\"Statuskort for skadesak\"}\n                defaultCode={statuskortCode}\n                defaultShowEditor={true}\n                noInline={true}\n                controls={statuskortControls}\n            />\n            <InteractiveCode\n                title={\"NavCard\"}\n                defaultCode={navCardCode}\n                defaultShowEditor={true}\n                noInline={true}\n                controls={navCardControls}\n            />\n            <InteractiveCode\n                title={\"InfoCard\"}\n                defaultCode={infoCardCode}\n                defaultShowEditor={true}\n                noInline={true}\n                controls={infoCardControls}\n            />\n            <InteractiveCode\n                title={\"TaskCard\"}\n                defaultCode={taskCardCode}\n                defaultShowEditor={true}\n                noInline={true}\n                controls={taskCardControls}\n            />\n            {/*\n\n            <DevExample\n                title=\"TaskCard\"\n                knobs={taskCardExampleProps}\n                component={TaskCardExample}\n                codeExample={taskCardExampleCode}\n            />\n            */}\n        </div>\n    );\n}\n","export default \"import React from \\\"react\\\";\\nimport { formatValuta } from \\\"../../../../utilities/formatters\\\";\\nimport { ErrorTag } from \\\"../../../tag\\\";\\nimport { Card, CARD_PADDINGS, CARD_VARIANTS } from \\\"../../Card\\\";\\n\\nexport const knobs = [\\n    {\\n        type: \\\"bool\\\",\\n        label: \\\"Clickable\\\",\\n        boolOptions: {\\n            trueValue: true,\\n            falseValue: false,\\n        },\\n    },\\n    {\\n        type: \\\"choice\\\",\\n        label: \\\"Padding\\\",\\n        choiceOptions: CARD_PADDINGS.map((p) => ({ label: p, value: p })),\\n        defaultValue: 0,\\n    },\\n    {\\n        type: \\\"choice\\\",\\n        label: \\\"Type\\\",\\n        choiceOptions: CARD_VARIANTS.map((v) => ({ label: v, value: v })),\\n        defaultValue: 0,\\n    },\\n];\\n\\nexport const FakturainfoExample = () => {\\n    /* -- EXAMPLE CODE START -- */\\n    const padding = choiceKnob(\\\"Padding\\\");\\n    const type = choiceKnob(\\\"Type\\\");\\n\\n    return (\\n        <div className=\\\"flex\\\">\\n            <Card asChild clickable={!!boolKnob(\\\"Clickable\\\")} padding={padding} variant={type}>\\n                <a href=\\\"#test\\\" className=\\\"flex gap-x-40\\\">\\n                    <div className=\\\"flex flex-column gap-4\\\">\\n                        <p className=\\\"jkl-heading-2\\\">\\n                            {formatValuta(18856)}\\n                            <span aria-hidden> →</span>\\n                        </p>\\n                        <p className=\\\"jkl-body\\\">Frist 20.03.2023</p>\\n                    </div>\\n                    <div className=\\\"flex flex-column gap-12\\\">\\n                        <ErrorTag>Ubetalt</ErrorTag>\\n                        <p className=\\\"jkl-body\\\">Purring</p>\\n                    </div>\\n                </a>\\n            </Card>\\n        </div>\\n    );\\n    /* -- EXAMPLE CODE END -- */\\n};\\n\"","export default \"import React from \\\"react\\\";\\nimport { Image } from \\\"../../../image\\\";\\nimport { SuccessTag } from \\\"../../../tag\\\";\\nimport { Card, CARD_PADDINGS, CARD_VARIANTS } from \\\"../../Card\\\";\\nimport { CardImage } from \\\"../../CardImage\\\";\\n\\nexport const knobs = [\\n    {\\n        type: \\\"bool\\\",\\n        label: \\\"Clickable\\\",\\n        boolOptions: {\\n            trueValue: true,\\n            falseValue: false,\\n        },\\n    },\\n    {\\n        type: \\\"choice\\\",\\n        label: \\\"Padding\\\",\\n        choiceOptions: CARD_PADDINGS.map((p) => ({ label: p, value: p })),\\n        defaultValue: 0,\\n    },\\n    {\\n        type: \\\"choice\\\",\\n        label: \\\"Type\\\",\\n        choiceOptions: CARD_VARIANTS.map((v) => ({ label: v, value: v })),\\n        defaultValue: 0,\\n    },\\n];\\n\\nexport const StatuskortExample = () => {\\n    /* -- EXAMPLE CODE START -- */\\n    const imageProps = {\\n        src: \\\"/img/grass-400.jpg\\\",\\n        srcSet: `/img/grass-400.jpg 400w, /img/grass-800.jpg 800w`,\\n        placeholder: \\\"/img/grass-thumbnail.jpg\\\",\\n        alt: \\\"Nærbilde av strå, med en åker i bakgrunnen\\\",\\n    };\\n\\n    const padding = choiceKnob(\\\"Padding\\\");\\n    const type = choiceKnob(\\\"Type\\\");\\n\\n    return (\\n        <Card\\n            as=\\\"a\\\"\\n            href=\\\"#\\\"\\n            clickable={boolKnob(\\\"Clickable\\\")}\\n            padding={padding}\\n            variant={type}\\n            style={{ maxWidth: \\\"350px\\\" }}\\n            className=\\\"flex flex-column gap-24 items-start\\\"\\n        >\\n            <CardImage as={Image} placement=\\\"top\\\" {...imageProps} />\\n            <SuccessTag>Behandles</SuccessTag>\\n            <div className=\\\"flex flex-column gap-4\\\">\\n                <p className=\\\"jkl-heading-2\\\">\\n                    Behandlings- og veterinærutgifter\\n                    <span aria-hidden> →</span>\\n                </p>\\n                <p className=\\\"jkl-body\\\">Balder</p>\\n            </div>\\n            <hr\\n                style={{\\n                    margin: 0,\\n                    width: \\\"100%\\\",\\n                    border: 0,\\n                    borderBottom: \\\"1px solid var(--jkl-color-border-separator)\\\",\\n                }}\\n            />\\n            <p className=\\\"jkl-small\\\">\\n                Skadedato\\n                <br />\\n                24.01.2024\\n            </p>\\n        </Card>\\n    );\\n    /* -- EXAMPLE CODE END -- */\\n};\\n\"","export default \"import React from \\\"react\\\";\\nimport { NavCard, InfoBlock } from \\\"../../NavCard\\\";\\n\\nexport const knobs = [\\n    {\\n        type: \\\"bool\\\",\\n        label: \\\"Image\\\",\\n        boolOptions: {\\n            trueValue: true,\\n            falseValue: false,\\n        },\\n    },\\n    {\\n        type: \\\"bool\\\",\\n        label: \\\"Tag\\\",\\n        boolOptions: {\\n            trueValue: true,\\n            falseValue: false,\\n        },\\n    },\\n    {\\n        type: \\\"bool\\\",\\n        label: \\\"Description\\\",\\n        boolOptions: {\\n            trueValue: true,\\n            falseValue: false,\\n        },\\n    },\\n    {\\n        type: \\\"bool\\\",\\n        label: \\\"Ekstra info\\\",\\n        boolOptions: {\\n            trueValue: true,\\n            falseValue: false,\\n        },\\n    },\\n    {\\n        type: \\\"bool\\\",\\n        label: \\\"Ekstra lenke\\\",\\n        boolOptions: {\\n            trueValue: true,\\n            falseValue: false,\\n        },\\n    },\\n    {\\n        type: \\\"choice\\\",\\n        label: \\\"Padding\\\",\\n        choiceOptions: [\\\"0\\\", \\\"16\\\", \\\"24\\\", \\\"40\\\", \\\"blandet\\\"],\\n        defaultValue: 2,\\n    },\\n];\\n\\nexport const NavCardExample = () => {\\n    /* -- EXAMPLE CODE START -- */\\n    const imageProps = {\\n        src: \\\"/img/grass-400.jpg\\\",\\n        srcSet: `/img/grass-400.jpg 400w, /img/grass-800.jpg 800w`,\\n        placeholder: \\\"/img/grass-thumbnail.jpg\\\",\\n        alt: \\\"Nærbilde av strå, med en åker i bakgrunnen\\\",\\n    };\\n\\n    const image = boolKnob(\\\"Image\\\") ? imageProps : undefined;\\n    const tag = boolKnob(\\\"Tag\\\") ? { type: \\\"success\\\", text: \\\"Behandles\\\" } : undefined;\\n    const description = boolKnob(\\\"Description\\\") ? \\\"Balder\\\" : undefined;\\n    const paddingChoice = choiceKnob(\\\"Padding\\\");\\n    const external = boolKnob(\\\"Ekstra lenke\\\") ? true : undefined;\\n    const padding =\\n        paddingChoice === \\\"blandet\\\"\\n            ? {\\n                  top: \\\"64\\\",\\n                  right: \\\"40\\\",\\n                  bottom: \\\"16\\\",\\n                  left: \\\"24\\\",\\n              }\\n            : paddingChoice;\\n\\n    return (\\n        <div className=\\\"flex\\\">\\n            <NavCard\\n                padding={padding}\\n                id=\\\"nav-card\\\"\\n                href=\\\"#nav-card\\\"\\n                image={image}\\n                title=\\\"Behandlings- og Veterinærutgifter\\\"\\n                description={description}\\n                tag={tag}\\n                external={external}\\n            >\\n                {boolKnob(\\\"Ekstra info\\\") && (\\n                    <InfoBlock>\\n                        Skadedato\\n                        <br />\\n                        01.12.2021\\n                    </InfoBlock>\\n                )}\\n            </NavCard>\\n        </div>\\n    );\\n    /* -- EXAMPLE CODE END -- */\\n};\\n\"","export default \"import React from \\\"react\\\";\\nimport { unicode } from \\\"../../../../utilities\\\";\\nimport { InfoCard } from \\\"../../InfoCard\\\";\\n\\n//import \\\"./info-card-example.scss\\\";\\n\\nexport const knobs = [\\n    {\\n        type: \\\"bool\\\",\\n        label: \\\"Title\\\",\\n        boolOptions: {\\n            trueValue: true,\\n            falseValue: false,\\n        },\\n    },\\n    {\\n        type: \\\"choice\\\",\\n        label: \\\"Padding\\\",\\n        choiceOptions: [\\\"0\\\", \\\"16\\\", \\\"24\\\", \\\"40\\\", \\\"blandet\\\"],\\n        defaultValue: 2,\\n    },\\n];\\n\\nexport const InfoCardExample = () => {\\n    /* -- EXAMPLE CODE START -- */\\n    const title = boolKnob(\\\"Title\\\") ? `Samle forsikringer –${unicode.nbsp}få${unicode.nbsp}rabatt` : undefined;\\n    const paddingChoice = choiceKnob(\\\"Padding\\\") || \\\"24\\\";\\n    const padding =\\n        paddingChoice === \\\"blandet\\\"\\n            ? {\\n                  top: \\\"64\\\",\\n                  right: \\\"40\\\",\\n                  bottom: \\\"16\\\",\\n                  left: \\\"24\\\",\\n              }\\n            : paddingChoice;\\n\\n    return (\\n        <div className=\\\"flex\\\">\\n            <InfoCard title={title} padding={padding} className=\\\"example-info-card\\\">\\n                <p className=\\\"jkl-body\\\">Har du tre eller flere forsikringer får du samlerabatt</p>\\n            </InfoCard>\\n        </div>\\n    );\\n    /* -- EXAMPLE CODE END -- */\\n};\\n\"","export default \"import React, { useState } from \\\"react\\\";\\nimport { useAnimatedHeight } from \\\"../../../../hooks\\\";\\nimport { Checkbox } from \\\"../../../checkbox\\\";\\nimport { FieldGroup } from \\\"../../../input-group\\\";\\nimport { Select } from \\\"../../../select\\\";\\nimport { TaskCard } from \\\"../../TaskCard\\\";\\n\\nexport const knobs = [\\n    {\\n        type: \\\"choice\\\",\\n        label: \\\"Padding\\\",\\n        choiceOptions: [\\\"0\\\", \\\"16\\\", \\\"24\\\", \\\"40\\\", \\\"blandet\\\"],\\n        defaultValue: 2,\\n    },\\n];\\n\\nexport const TaskCardExample = () => {\\n    /* -- EXAMPLE CODE START -- */\\n    const [selected, setSelected] = useState(false);\\n    const [contentRef] = useAnimatedHeight(selected);\\n\\n    const paddingChoice = choiceKnob(\\\"Padding\\\") || \\\"24\\\";\\n    const padding =\\n        paddingChoice === \\\"blandet\\\"\\n            ? {\\n                  top: \\\"64\\\",\\n                  right: \\\"40\\\",\\n                  bottom: \\\"16\\\",\\n                  left: \\\"24\\\",\\n              }\\n            : paddingChoice;\\n\\n    return (\\n        <TaskCard background={selected ? \\\"highlighted\\\" : \\\"subdued\\\"} withShadow={selected} padding={padding}>\\n            <Checkbox\\n                id=\\\"veterinar-checkbox\\\"\\n                aria-controls=\\\"expanded-content\\\"\\n                aria-expanded={selected}\\n                name=\\\"veterinar\\\"\\n                value=\\\"veterinar\\\"\\n                onChange={() => setSelected((selected) => !selected)}\\n            >\\n                Veterinærutgifter\\n            </Checkbox>\\n            <p className=\\\"jkl-body jkl-spacing-12--top\\\">\\n                Dekker veterinærutgifter og medisiner på resept, som ofte kan bli dyrt.\\n            </p>\\n            <div\\n                id=\\\"expanded-content\\\"\\n                aria-labelledby=\\\"veterinar-checkbox\\\"\\n                role=\\\"group\\\"\\n                className=\\\"jkl-task-card-example__content\\\"\\n                hidden={!selected}\\n                ref={contentRef}\\n            >\\n                <Select\\n                    label=\\\"Forsikringssum\\\"\\n                    name=\\\"forsikringssum\\\"\\n                    className=\\\"jkl-spacing-40--top\\\"\\n                    items={[\\\"10 000 kr\\\", \\\"20 000 kr\\\", \\\"30 000 kr\\\"]}\\n                />\\n                <Select\\n                    label=\\\"Velg egenandel\\\"\\n                    name=\\\"egenandel\\\"\\n                    className=\\\"jkl-spacing-24--top\\\"\\n                    items={[\\\"1 500 kr\\\", \\\"2 500 kr\\\", \\\"3 000 kr\\\"]}\\n                />\\n                <FieldGroup className=\\\"jkl-spacing-24--top\\\" legend=\\\"Tilleggsforsikring\\\">\\n                    <Checkbox name=\\\"tilleggsforsikring\\\" value=\\\"rehab\\\">\\n                        Dekning av rehabilitering\\n                    </Checkbox>\\n                </FieldGroup>\\n                <p className=\\\"jkl-body jkl-spacing-40--top\\\">\\n                    Dersom du ønsker ekstra forsikring av valpekull, må du ta kontakt med en rådgiver.\\n                </p>\\n            </div>\\n        </TaskCard>\\n    );\\n    /* -- EXAMPLE CODE END -- */\\n};\\n\""],"names":["knobs","type","label","boolOptions","trueValue","falseValue","choiceOptions","CARD_PADDINGS","map","p","value","defaultValue","CARD_VARIANTS","v","fakturaInfoCode","formatCode","statuskortCode","navCardCode","infoCardCode","taskCardCode","fakturaInfoControls","useInteractiveCodeControls","fakturaInfoKnobs","statuskortControls","statuskortKnobs","navCardControls","navCardKnobs","infoCardControls","infoCardKnobs","taskCardControls","taskCardKnobs","jsxs","className","children","jsx","InteractiveCode","title","defaultCode","defaultShowEditor","noInline","controls"],"mappings":"+oEAKO,MAAMA,EAAQ,CACjB,CACIC,KAAM,OACNC,MAAO,YACPC,YAAa,CACTC,WAAW,EACXC,YAAY,IAGpB,CACIJ,KAAM,SACNC,MAAO,UACPI,cAAeC,EAAAA,cAAcC,KAAKC,IAAO,CAAEP,MAAOO,EAAGC,MAAOD,MAC5DE,aAAc,GAElB,CACIV,KAAM,SACNC,MAAO,OACPI,cAAeM,EAAAA,cAAcJ,KAAKK,KAASX,MAAOW,EAAGH,MAAOG,MAC5DF,aAAc,IClBTX,EAAQ,CACjB,CACIC,KAAM,OACNC,MAAO,QACPC,YAAa,CACTC,WAAW,EACXC,YAAY,IAGpB,CACIJ,KAAM,SACNC,MAAO,UACPI,cAAe,CAAC,IAAK,KAAM,KAAM,KAAM,WACvCK,aAAc,IChBTX,EAAQ,CACjB,CACIC,KAAM,OACNC,MAAO,QACPC,YAAa,CACTC,WAAW,EACXC,YAAY,IAGpB,CACIJ,KAAM,OACNC,MAAO,MACPC,YAAa,CACTC,WAAW,EACXC,YAAY,IAGpB,CACIJ,KAAM,OACNC,MAAO,cACPC,YAAa,CACTC,WAAW,EACXC,YAAY,IAGpB,CACIJ,KAAM,OACNC,MAAO,cACPC,YAAa,CACTC,WAAW,EACXC,YAAY,IAGpB,CACIJ,KAAM,OACNC,MAAO,eACPC,YAAa,CACTC,WAAW,EACXC,YAAY,IAGpB,CACIJ,KAAM,SACNC,MAAO,UACPI,cAAe,CAAC,IAAK,KAAM,KAAM,KAAM,WACvCK,aAAc,IC1CTX,EAAQ,CACjB,CACIC,KAAM,OACNC,MAAO,YACPC,YAAa,CACTC,WAAW,EACXC,YAAY,IAGpB,CACIJ,KAAM,SACNC,MAAO,UACPI,cAAeC,EAAAA,cAAcC,KAAKC,IAAO,CAAEP,MAAOO,EAAGC,MAAOD,MAC5DE,aAAc,GAElB,CACIV,KAAM,SACNC,MAAO,OACPI,cAAeM,EAAAA,cAAcJ,KAAKK,IAAO,CAAEX,MAAOW,EAAGH,MAAOG,MAC5DF,aAAc,IClBTX,EAAQ,CACjB,CACIC,KAAM,SACNC,MAAO,UACPI,cAAe,CAAC,IAAK,KAAM,KAAM,KAAM,WACvCK,aAAc,ICUhBG,EAAkBC,EAAAA,WCtBT,wuDDuBTC,EAAiBD,EAAAA,WEvBR,uyEFwBTE,EAAcF,EAAAA,WGxBL,upFHyBTG,EAAeH,EAAAA,WIzBN,gzCJ0BTI,EAAeJ,EAAAA,WK1BN,q6FL4Bf,WACU,MAAAK,EAAsBC,EAAAA,2BAA2BP,EAAiBQ,GAClEC,EAAqBF,EAAAA,2BAA2BL,EAAgBQ,GAChEC,EAAkBJ,EAAAA,2BAA2BJ,EAAaS,GAC1DC,EAAmBN,EAAAA,2BAA2BH,EAAcU,GAC5DC,EAAmBR,EAAAA,2BAA2BF,EAAcW,GAG9D,OAAAC,EAAAA,KAAC,MAAI,CAAAC,UAAW,MACZC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,gBAAA,CACGC,MAAO,iCACPC,YAAavB,EACbwB,mBAAmB,EACnBC,UAAU,EACVC,SAAUpB,IAEdc,EAAAA,IAACC,EAAAA,gBAAA,CACGC,MAAO,0BACPC,YAAarB,EACbsB,mBAAmB,EACnBC,UAAU,EACVC,SAAUjB,IAEdW,EAAAA,IAACC,EAAAA,gBAAA,CACGC,MAAO,UACPC,YAAapB,EACbqB,mBAAmB,EACnBC,UAAU,EACVC,SAAUf,IAEdS,EAAAA,IAACC,EAAAA,gBAAA,CACGC,MAAO,WACPC,YAAanB,EACboB,mBAAmB,EACnBC,UAAU,EACVC,SAAUb,IAEdO,EAAAA,IAACC,EAAAA,gBAAA,CACGC,MAAO,WACPC,YAAalB,EACbmB,mBAAmB,EACnBC,UAAU,EACVC,SAAUX,MAa1B"}

package/build/cjs/components/card/documentation/main.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),r=require("react-dom/client");require("react"),require("../../../hooks/useScreen/useScreen.js"),require("../../../hooks/useId/useId.js"),require("../../icon/Icon.js"),require("../../icon/icons/animated/ArrowVerticalAnimated.js"),require("../../icon/icons/animated/ArrowHorizontalAnimated.js"),require("../../icon/icons/animated/PlusRemoveAnimated.js"),require("../../icon/icons/ArrowDownIcon.js"),require("../../icon/icons/ArrowLeftIcon.js"),require("../../icon/icons/ArrowNorthEastIcon.js"),require("../../icon/icons/ArrowRightIcon.js"),require("../../icon/icons/ArrowUpIcon.js"),require("../../icon/icons/CalendarIcon.js"),require("../../icon/icons/CheckIcon.js"),require("../../icon/icons/ChevronDownIcon.js"),require("../../icon/icons/ChevronLeftIcon.js"),require("../../icon/icons/ChevronRightIcon.js"),require("../../icon/icons/ChevronUpIcon.js"),require("../../icon/icons/CloseIcon.js"),require("../../icon/icons/CopyIcon.js"),require("../../icon/icons/DotsIcon.js"),require("../../icon/icons/DragIcon.js"),require("../../icon/icons/ErrorIcon.js"),require("../../icon/icons/GreenCheckIcon.js"),require("../../icon/icons/HamburgerIcon.js"),require("../../icon/icons/InfoIcon.js"),require("../../icon/icons/LinkIcon.js"),require("../../icon/icons/PlusIcon.js"),require("../../icon/icons/QuestionIcon.js"),require("../../icon/icons/RedCrossIcon.js"),require("../../icon/icons/SearchIcon.js"),require("../../icon/icons/SuccessIcon.js"),require("../../icon/icons/WarningIcon.js"),require("../../icon/icons/MinusIcon.js"),require("../../icon/icons/ThumbDownIcon.js"),require("../../icon/icons/ThumbUpIcon.js"),require("../../icon/icons/TrashCanIcon.js"),require("../../icon/icons/PenIcon.js"),require("../../button/Button.js"),require("../Card.js"),require("../CardImage.js"),require("../NavCard.js"),require("../../checkbox/Checkbox.js"),require("../../combobox/Combobox.js"),require("../../cookie-consent/CookieConsentContext.js"),require("react-dom"),require("../../modal/Modal.js"),require("react-a11y-dialog"),require("../../list/List.js"),require("../../list/ListItem.js"),require("../../datepicker/DatePicker.js"),require("../../feedback/feedbackContext.js"),require("../../message/Message.js"),require("../../message/FormErrorMessage.js"),require("../../tooltip/Tooltip.js"),require("../../tooltip/TooltipContent.js"),require("../../tooltip/TooltipTrigger.js"),require("../../input-group/InputGroup.js"),require("../../feedback/followup/followupContext.js"),require("../../feedback/main-question/mainQuestionContext.js"),require("../../radio-button/RadioButton.js"),require("../../radio-button/radioGroupContext.js"),require("../../radio-button/BaseRadioButton.js"),require("../../text-input/BaseTextArea.js"),require("../../text-input/BaseTextInput.js"),require("../../text-input/TextArea.js"),require("../../text-input/TextInput.js"),require("../../../utilities/polymorphism/SlotComponent.js");const i=require("../../../utilities/tabListener.js");require("../../../../ExpandableTableRow-Bkqt-qP5.cjs"),require("../../icon-button/IconButton.js"),require("../../link/Link.js"),require("../../link/NavLink.js"),require("../../link-list/LinkList.js"),require("../../logo/text-paths/ForsikringLevertAvFremtind.js"),require("../../logo/text-paths/FraSB1ogDNB.js"),require("../../logo/text-paths/InnovasjonFraFremtind.js"),require("../../logo/text-paths/TeknologiFraFremtind.js"),require("../../logo/text-paths/VartEgetForsikringsselskap.js"),require("../../logo/text-paths/VartForsikringsselskap.js"),require("../../menu/MenuItem.js"),require("../../menu/MenuItemCheckbox.js"),require("../../popover/Popover.js"),require("../../system-message/SystemMessage.js"),require("../../table/DataTable.js"),require("../../table/Table.js"),require("../../table/TableBody.js"),require("../../table/TableCaption.js"),require("../../table/TableCell.js"),require("../../table/TableColumn.js"),require("../../table/TableColumnGroup.js"),require("../../table/tableContext.js"),require("../../table/tableSectionContext.js"),require("../../table/TableFooter.js"),require("../../table/TableHead.js"),require("../../table/TableHeader.js"),require("../../table/TableRow.js"),require("../../tabs/NavTab.js"),require("../../tabs/tabsContext.js"),require("../../tabs/Tab.js"),require("../../tag/Tag.js"),require("../../toast/toastContext.js"),require("../../toggle-switch/ToggleSwitch.js");const o=require("./Example.js");i.initTabListener(),r.createRoot(document.getElementById("root")).render(e.jsx(o,{}));
+//# sourceMappingURL=main.js.map

package/build/cjs/components/card/documentation/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sources":["../../../../../src/components/card/documentation/main.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom/client\";\nimport { initTabListener } from \"../../..\";\nimport Example from \"./Example\";\n\ninitTabListener();\n\nReactDOM.createRoot(document.getElementById(\"root\")!).render(<Example />);\n"],"names":["initTabListener","ReactDOM","createRoot","document","getElementById","render","jsx","Example"],"mappings":"q2IAKAA,EAAAA,kBAEAC,EAASC,WAAWC,SAASC,eAAe,SAAUC,OAAQC,EAAAA,IAAAC,EAAA,CAAA"}

package/build/cjs/components/card/documentation/vite.dev.config.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("node:path"),i=require("@vitejs/plugin-react-swc"),r=require("vite"),s=require("../../../../copy-jkl-fonts-BEH11kbT.cjs"),o=r.defineConfig({plugins:[i(),s.copyJklFonts(e.resolve(__dirname,"public","fonts"))]});module.exports=o;
+//# sourceMappingURL=vite.dev.config.js.map

package/build/cjs/components/card/documentation/vite.dev.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.dev.config.js","sources":["../../../../../src/components/card/documentation/vite.dev.config.ts"],"sourcesContent":["import { resolve } from \"path\";\nimport react from \"@vitejs/plugin-react-swc\";\nimport { defineConfig } from \"vite\";\nimport { copyJklFonts } from \"../../../../../../utils/vite\";\n\nexport default defineConfig({\n    plugins: [react(), copyJklFonts(resolve(__dirname, \"public\", \"fonts\"))],\n});\n"],"names":["vite_dev_config","defineConfig","plugins","react","copyJklFonts","resolve","__dirname"],"mappings":"uJAKAA,EAAeC,eAAa,CACxBC,QAAS,CAACC,IAASC,EAAAA,aAAaC,UAAQC,UAAW,SAAU"}

package/build/cjs/components/link/documentation/Example.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),n=require("../../../../formatCode-Cr-qlO_l.cjs");require("react"),require("../Link.js"),require("../NavLink.js");const r=[],t=n.formatCode('import React, { FC } from "react";\nimport { Link } from "..";\n\nexport const knobs = [];\n\nexport const LinkExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    return (\n        <div>\n            <Link href="#">Lenke</Link>\n        </div>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n');module.exports=function(){const o=n.useInteractiveCodeControls(t,r);return e.jsx("div",{className:"jkl",children:e.jsx(n.InteractiveCode,{title:"Link",defaultCode:t,defaultShowEditor:!0,noInline:!0,controls:o})})};
+"use strict";const e=require("react/jsx-runtime"),n=require("../../../../formatCode-BWsrUMWq.cjs");require("react"),require("../Link.js"),require("../NavLink.js");const r=[],t=n.formatCode('import React, { FC } from "react";\nimport { Link } from "..";\n\nexport const knobs = [];\n\nexport const LinkExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    return (\n        <div>\n            <Link href="#">Lenke</Link>\n        </div>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n');module.exports=function(){const o=n.useInteractiveCodeControls(t,r);return e.jsx("div",{className:"jkl",children:e.jsx(n.InteractiveCode,{title:"Link",defaultCode:t,defaultShowEditor:!0,noInline:!0,controls:o})})};
 //# sourceMappingURL=Example.js.map

package/build/cjs/components/loader/documentation/Example.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),n=require("../../../../formatCode-Cr-qlO_l.cjs");require("react");const t=[{type:"choice",label:"Variant",choiceOptions:[{label:"Large",value:"large"},{label:"Medium",value:"medium"},{label:"Small",value:"small"}],defaultValue:0}],o=[],l=n.formatCode('import React, { FC } from "react";\nimport { Loader } from "..";\nimport "./styles.scss";\n\nexport const knobs = [\n    {\n        type: "choice",\n        label: "Variant",\n        choiceOptions: [\n            { label: "Large", value: "large" },\n            { label: "Medium", value: "medium" },\n            { label: "Small", value: "small" },\n        ],\n        defaultValue: 0,\n    },\n];\n\nexport const LoaderExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    return (\n        <div className="jkl-loader-example">\n            <div>\n                <Loader variant={choiceKnob("Variant")} textDescription="Laster innhold" />\n            </div>\n        </div>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n'),a=n.formatCode('import React, { FC } from "react";\nimport {\n    SkeletonAnimation,\n    SkeletonButton,\n    SkeletonCheckboxGroup,\n    SkeletonElement,\n    SkeletonInput,\n    SkeletonRadioButtonGroup,\n    SkeletonTable,\n    SkeletonTableHeader,\n    SkeletonTableRow,\n    SkeletonTextArea,\n} from "..";\n\nexport const knobs = [];\n\nexport const SkeletonLoaderExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    return (\n        <SkeletonAnimation role="none presentation">\n            <div style={{ display: "flex", flexDirection: "column", gap: 40 }}>\n                <SkeletonElement width={350} height={32} />\n                <SkeletonInput />\n                <SkeletonTextArea />\n                <SkeletonCheckboxGroup checkboxes={3} />\n                <SkeletonRadioButtonGroup radioButtons={3} />\n                <SkeletonButton width={225} />\n                <SkeletonTable>\n                    <SkeletonTableHeader>\n                        <div style={{ width: 215 }}>\n                            <SkeletonElement width={115} height={16} />\n                        </div>\n                        <div style={{ width: 115 }}>\n                            <SkeletonElement width={115} height={16} />\n                        </div>\n                    </SkeletonTableHeader>\n                    {Array.from(Array(5)).map((_, index) => (\n                        <SkeletonTableRow key={index}>\n                            <div style={{ width: 215 }}>\n                                <SkeletonElement width={index % 2 ? 115 : 185} height={19} />\n                            </div>\n                            <div style={{ width: 115 }}>\n                                <SkeletonElement width={24} height={24} shape="circle" />\n                            </div>\n                        </SkeletonTableRow>\n                    ))}\n                </SkeletonTable>\n            </div>\n        </SkeletonAnimation>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n');module.exports=function(){const i=n.useInteractiveCodeControls(l,t),r=n.useInteractiveCodeControls(a,o);return e.jsxs("div",{className:"jkl",children:[e.jsx(n.InteractiveCode,{title:"Loader",defaultCode:l,defaultShowEditor:!0,noInline:!0,controls:i}),e.jsx(n.InteractiveCode,{title:"SkeletonLoader",defaultCode:a,defaultShowEditor:!0,noInline:!0,controls:r})]})};
+"use strict";const e=require("react/jsx-runtime"),n=require("../../../../formatCode-BWsrUMWq.cjs");require("react");const t=[{type:"choice",label:"Variant",choiceOptions:[{label:"Large",value:"large"},{label:"Medium",value:"medium"},{label:"Small",value:"small"}],defaultValue:0}],o=[],l=n.formatCode('import React, { FC } from "react";\nimport { Loader } from "..";\nimport "./styles.scss";\n\nexport const knobs = [\n    {\n        type: "choice",\n        label: "Variant",\n        choiceOptions: [\n            { label: "Large", value: "large" },\n            { label: "Medium", value: "medium" },\n            { label: "Small", value: "small" },\n        ],\n        defaultValue: 0,\n    },\n];\n\nexport const LoaderExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    return (\n        <div className="jkl-loader-example">\n            <div>\n                <Loader variant={choiceKnob("Variant")} textDescription="Laster innhold" />\n            </div>\n        </div>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n'),a=n.formatCode('import React, { FC } from "react";\nimport {\n    SkeletonAnimation,\n    SkeletonButton,\n    SkeletonCheckboxGroup,\n    SkeletonElement,\n    SkeletonInput,\n    SkeletonRadioButtonGroup,\n    SkeletonTable,\n    SkeletonTableHeader,\n    SkeletonTableRow,\n    SkeletonTextArea,\n} from "..";\n\nexport const knobs = [];\n\nexport const SkeletonLoaderExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    return (\n        <SkeletonAnimation role="none presentation">\n            <div style={{ display: "flex", flexDirection: "column", gap: 40 }}>\n                <SkeletonElement width={350} height={32} />\n                <SkeletonInput />\n                <SkeletonTextArea />\n                <SkeletonCheckboxGroup checkboxes={3} />\n                <SkeletonRadioButtonGroup radioButtons={3} />\n                <SkeletonButton width={225} />\n                <SkeletonTable>\n                    <SkeletonTableHeader>\n                        <div style={{ width: 215 }}>\n                            <SkeletonElement width={115} height={16} />\n                        </div>\n                        <div style={{ width: 115 }}>\n                            <SkeletonElement width={115} height={16} />\n                        </div>\n                    </SkeletonTableHeader>\n                    {Array.from(Array(5)).map((_, index) => (\n                        <SkeletonTableRow key={index}>\n                            <div style={{ width: 215 }}>\n                                <SkeletonElement width={index % 2 ? 115 : 185} height={19} />\n                            </div>\n                            <div style={{ width: 115 }}>\n                                <SkeletonElement width={24} height={24} shape="circle" />\n                            </div>\n                        </SkeletonTableRow>\n                    ))}\n                </SkeletonTable>\n            </div>\n        </SkeletonAnimation>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n');module.exports=function(){const i=n.useInteractiveCodeControls(l,t),r=n.useInteractiveCodeControls(a,o);return e.jsxs("div",{className:"jkl",children:[e.jsx(n.InteractiveCode,{title:"Loader",defaultCode:l,defaultShowEditor:!0,noInline:!0,controls:i}),e.jsx(n.InteractiveCode,{title:"SkeletonLoader",defaultCode:a,defaultShowEditor:!0,noInline:!0,controls:r})]})};
 //# sourceMappingURL=Example.js.map

package/build/cjs/components/toggle-switch/documentation/Example.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),o=require("../../../../formatCode-Cr-qlO_l.cjs");require("react"),require("../ToggleSwitch.js"),require("../../../hooks/useScreen/useScreen.js"),require("../../../hooks/useId/useId.js"),require("../../button/Button.js");const t=[{type:"bool",label:"Deaktivert",boolOptions:{trueValue:!0,falseValue:!1}}],n=o.formatCode('import React from "react";\nimport { ToggleSwitch } from "..";\nimport { PrimaryButton } from "../../button";\n\nexport const knobs = [\n    {\n        type: "bool",\n        label: "Deaktivert",\n        boolOptions: {\n            trueValue: true,\n            falseValue: false,\n        },\n    },\n];\n\nexport const ToggleSwitchExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    const isDisabled = boolKnob("Deaktivert");\n\n    const handleToggle = (event, pressed) => console.log("Mørk modus satt til: ", pressed, event);\n\n    return (\n        <ToggleSwitch disabled={isDisabled} onChange={handleToggle}>\n            Mørk modus\n        </ToggleSwitch>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n');module.exports=function(){const r=o.useInteractiveCodeControls(n,t);return e.jsx("div",{className:"jkl",children:e.jsx(o.InteractiveCode,{title:"Loader",defaultCode:n,defaultShowEditor:!0,noInline:!0,controls:r})})};
+"use strict";const e=require("react/jsx-runtime"),o=require("../../../../formatCode-BWsrUMWq.cjs");require("react"),require("../ToggleSwitch.js"),require("../../../hooks/useScreen/useScreen.js"),require("../../../hooks/useId/useId.js"),require("../../button/Button.js");const t=[{type:"bool",label:"Deaktivert",boolOptions:{trueValue:!0,falseValue:!1}}],n=o.formatCode('import React from "react";\nimport { ToggleSwitch } from "..";\nimport { PrimaryButton } from "../../button";\n\nexport const knobs = [\n    {\n        type: "bool",\n        label: "Deaktivert",\n        boolOptions: {\n            trueValue: true,\n            falseValue: false,\n        },\n    },\n];\n\nexport const ToggleSwitchExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    const isDisabled = boolKnob("Deaktivert");\n\n    const handleToggle = (event, pressed) => console.log("Mørk modus satt til: ", pressed, event);\n\n    return (\n        <ToggleSwitch disabled={isDisabled} onChange={handleToggle}>\n            Mørk modus\n        </ToggleSwitch>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n');module.exports=function(){const r=o.useInteractiveCodeControls(n,t);return e.jsx("div",{className:"jkl",children:e.jsx(o.InteractiveCode,{title:"Loader",defaultCode:n,defaultShowEditor:!0,noInline:!0,controls:r})})};
 //# sourceMappingURL=Example.js.map

package/build/cjs/components/tooltip/documentation/Example.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),n=require("../../../../formatCode-Cr-qlO_l.cjs");require("react"),require("../Tooltip.js"),require("../TooltipContent.js"),require("../TooltipTrigger.js"),require("../../icon/Icon.js"),require("../../icon/icons/animated/ArrowVerticalAnimated.js"),require("../../icon/icons/animated/ArrowHorizontalAnimated.js"),require("../../icon/icons/animated/PlusRemoveAnimated.js"),require("../../icon/icons/ArrowDownIcon.js"),require("../../icon/icons/ArrowLeftIcon.js"),require("../../icon/icons/ArrowNorthEastIcon.js"),require("../../icon/icons/ArrowRightIcon.js"),require("../../icon/icons/ArrowUpIcon.js"),require("../../icon/icons/CalendarIcon.js"),require("../../icon/icons/CheckIcon.js"),require("../../icon/icons/ChevronDownIcon.js"),require("../../icon/icons/ChevronLeftIcon.js"),require("../../icon/icons/ChevronRightIcon.js"),require("../../icon/icons/ChevronUpIcon.js"),require("../../icon/icons/CloseIcon.js"),require("../../icon/icons/CopyIcon.js"),require("../../icon/icons/DotsIcon.js"),require("../../icon/icons/DragIcon.js"),require("../../icon/icons/ErrorIcon.js"),require("../../icon/icons/GreenCheckIcon.js"),require("../../icon/icons/HamburgerIcon.js"),require("../../icon/icons/InfoIcon.js"),require("../../icon/icons/LinkIcon.js"),require("../../icon/icons/PlusIcon.js"),require("../../icon/icons/QuestionIcon.js"),require("../../icon/icons/RedCrossIcon.js"),require("../../icon/icons/SearchIcon.js"),require("../../icon/icons/SuccessIcon.js"),require("../../icon/icons/WarningIcon.js"),require("../../icon/icons/MinusIcon.js"),require("../../icon/icons/ThumbDownIcon.js"),require("../../icon/icons/ThumbUpIcon.js"),require("../../icon/icons/TrashCanIcon.js"),require("../../icon/icons/PenIcon.js");const o=[{type:"choice",label:"Plassering",choiceOptions:[{label:"Top",value:"top"},{label:"Top start",value:"top-start"},{label:"Top end",value:"top-end"},{label:"Left",value:"left"},{label:"Right",value:"right"}],defaultValue:0},{type:"choice",label:"Forsinkelse (ms)",choiceOptions:[{laber:"0",value:"0"},{laber:"150",value:"150"},{laber:"250",value:"250"},{laber:"500",value:"500"},{laber:"1000",value:"1000"}],defaultValue:0}],i=[{type:"choice",label:"Plassering",choiceOptions:[{label:"Top",value:"top"},{label:"Top start",value:"top-start"},{label:"Top end",value:"top-end"},{label:"Left",value:"left"},{label:"Right",value:"right"}],defaultValue:0},{type:"choice",label:"Forsinkelse (ms)",choiceOptions:[{laber:"0",value:"0"},{laber:"150",value:"150"},{laber:"250",value:"250"},{laber:"500",value:"500"},{laber:"1000",value:"1000"}],defaultValue:0}],r=n.formatCode('import React, { useState } from "react";\nimport { Tooltip, TooltipContent, TooltipTrigger } from "..";\nimport { formatKontonummer } from "../../../utilities/formatters";\n\nexport const knobs = [\n    {\n        type: "choice",\n        label: "Plassering",\n        choiceOptions: [\n            { label: "Top", value: "top" },\n            { label: "Top start", value: "top-start" },\n            { label: "Top end", value: "top-end" },\n            { label: "Left", value: "left" },\n            { label: "Right", value: "right" },\n        ],\n        defaultValue: 0,\n    },\n    {\n        type: "choice",\n        label: "Forsinkelse (ms)",\n        choiceOptions: [\n            { laber: "0", value: "0" },\n            { laber: "150", value: "150" },\n            { laber: "250", value: "250" },\n            { laber: "500", value: "500" },\n            { laber: "1000", value: "1000" },\n        ],\n        defaultValue: 0,\n    },\n];\n\nexport const TooltipExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    const [copied, setCopied] = useState(false);\n    const kontonummer = "16024454979";\n\n    function copyToClipboard() {\n        navigator.clipboard.writeText(kontonummer);\n        setCopied(true);\n        setTimeout(() => setCopied(false), 2000);\n    }\n\n    return (\n        <p>\n            Kontonummer:{" "}\n            <Tooltip placement={choiceKnob("Plassering")} delay={choiceKnob("Forsinkelse (ms)")}>\n                <TooltipTrigger onClick={copyToClipboard}>{formatKontonummer(kontonummer)}</TooltipTrigger>\n                <TooltipContent>\n                    {copied ? <span aria-live="assertive">Kopiert</span> : "Klikk for å kopiere til utklippstavlen"}\n                </TooltipContent>\n            </Tooltip>\n        </p>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n'),l=n.formatCode('import React from "react";\nimport { PopupTip } from "..";\nimport { formatValuta } from "../../../utilities/formatters";\n\nexport const knobs = [\n    {\n        type: "choice",\n        label: "Plassering",\n        choiceOptions: [\n            { label: "Top", value: "top" },\n            { label: "Top start", value: "top-start" },\n            { label: "Top end", value: "top-end" },\n            { label: "Left", value: "left" },\n            { label: "Right", value: "right" },\n        ],\n        defaultValue: 0,\n    },\n    {\n        type: "choice",\n        label: "Forsinkelse (ms)",\n        choiceOptions: [\n            { laber: "0", value: "0" },\n            { laber: "150", value: "150" },\n            { laber: "250", value: "250" },\n            { laber: "500", value: "500" },\n            { laber: "1000", value: "1000" },\n        ],\n        defaultValue: 0,\n    },\n];\n\nexport const PopupTipExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    return (\n        <p>\n            Du betaler 348 kr/mnd{" "}\n            <PopupTip\n                placement={choiceKnob("Plassering")}\n                delay={choiceKnob("Forsinkelse (ms)")}\n                content={`Månedsprisen vil variere på fakturaen din gjennom året. Årsprisen er ${formatValuta(4176)}.`}\n                triggerProps={{\n                    onClick: () => console.log("PopupTip clicked"),\n                }}\n            />\n        </p>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n');module.exports=function(){const t=n.useInteractiveCodeControls(r,i),a=n.useInteractiveCodeControls(l,o);return e.jsxs("div",{className:"jkl",children:[e.jsx(n.InteractiveCode,{title:"Tooltip",defaultCode:r,defaultShowEditor:!0,noInline:!0,controls:t}),e.jsx(n.InteractiveCode,{title:"PopupTip",defaultCode:l,defaultShowEditor:!0,noInline:!0,controls:a})]})};
+"use strict";const e=require("react/jsx-runtime"),n=require("../../../../formatCode-BWsrUMWq.cjs");require("react"),require("../Tooltip.js"),require("../TooltipContent.js"),require("../TooltipTrigger.js"),require("../../icon/Icon.js"),require("../../icon/icons/animated/ArrowVerticalAnimated.js"),require("../../icon/icons/animated/ArrowHorizontalAnimated.js"),require("../../icon/icons/animated/PlusRemoveAnimated.js"),require("../../icon/icons/ArrowDownIcon.js"),require("../../icon/icons/ArrowLeftIcon.js"),require("../../icon/icons/ArrowNorthEastIcon.js"),require("../../icon/icons/ArrowRightIcon.js"),require("../../icon/icons/ArrowUpIcon.js"),require("../../icon/icons/CalendarIcon.js"),require("../../icon/icons/CheckIcon.js"),require("../../icon/icons/ChevronDownIcon.js"),require("../../icon/icons/ChevronLeftIcon.js"),require("../../icon/icons/ChevronRightIcon.js"),require("../../icon/icons/ChevronUpIcon.js"),require("../../icon/icons/CloseIcon.js"),require("../../icon/icons/CopyIcon.js"),require("../../icon/icons/DotsIcon.js"),require("../../icon/icons/DragIcon.js"),require("../../icon/icons/ErrorIcon.js"),require("../../icon/icons/GreenCheckIcon.js"),require("../../icon/icons/HamburgerIcon.js"),require("../../icon/icons/InfoIcon.js"),require("../../icon/icons/LinkIcon.js"),require("../../icon/icons/PlusIcon.js"),require("../../icon/icons/QuestionIcon.js"),require("../../icon/icons/RedCrossIcon.js"),require("../../icon/icons/SearchIcon.js"),require("../../icon/icons/SuccessIcon.js"),require("../../icon/icons/WarningIcon.js"),require("../../icon/icons/MinusIcon.js"),require("../../icon/icons/ThumbDownIcon.js"),require("../../icon/icons/ThumbUpIcon.js"),require("../../icon/icons/TrashCanIcon.js"),require("../../icon/icons/PenIcon.js");const o=[{type:"choice",label:"Plassering",choiceOptions:[{label:"Top",value:"top"},{label:"Top start",value:"top-start"},{label:"Top end",value:"top-end"},{label:"Left",value:"left"},{label:"Right",value:"right"}],defaultValue:0},{type:"choice",label:"Forsinkelse (ms)",choiceOptions:[{label:"0",value:"0"},{label:"150",value:"150"},{label:"250",value:"250"},{label:"500",value:"500"},{label:"1000",value:"1000"}],defaultValue:0}],i=[{type:"choice",label:"Plassering",choiceOptions:[{label:"Top",value:"top"},{label:"Top start",value:"top-start"},{label:"Top end",value:"top-end"},{label:"Left",value:"left"},{label:"Right",value:"right"}],defaultValue:0},{type:"choice",label:"Forsinkelse (ms)",choiceOptions:[{label:"0",value:"0"},{label:"150",value:"150"},{label:"250",value:"250"},{label:"500",value:"500"},{label:"1000",value:"1000"}],defaultValue:0}],l=n.formatCode('import React, { useState } from "react";\nimport { Tooltip, TooltipContent, TooltipTrigger } from "..";\nimport { formatKontonummer } from "../../../utilities/formatters";\n\nexport const knobs = [\n    {\n        type: "choice",\n        label: "Plassering",\n        choiceOptions: [\n            { label: "Top", value: "top" },\n            { label: "Top start", value: "top-start" },\n            { label: "Top end", value: "top-end" },\n            { label: "Left", value: "left" },\n            { label: "Right", value: "right" },\n        ],\n        defaultValue: 0,\n    },\n    {\n        type: "choice",\n        label: "Forsinkelse (ms)",\n        choiceOptions: [\n            { label: "0", value: "0" },\n            { label: "150", value: "150" },\n            { label: "250", value: "250" },\n            { label: "500", value: "500" },\n            { label: "1000", value: "1000" },\n        ],\n        defaultValue: 0,\n    },\n];\n\nexport const TooltipExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    const [copied, setCopied] = useState(false);\n    const kontonummer = "16024454979";\n\n    function copyToClipboard() {\n        navigator.clipboard.writeText(kontonummer);\n        setCopied(true);\n        setTimeout(() => setCopied(false), 2000);\n    }\n\n    return (\n        <p>\n            Kontonummer:{" "}\n            <Tooltip placement={choiceKnob("Plassering")} delay={choiceKnob("Forsinkelse (ms)")}>\n                <TooltipTrigger onClick={copyToClipboard}>{formatKontonummer(kontonummer)}</TooltipTrigger>\n                <TooltipContent>\n                    {copied ? <span aria-live="assertive">Kopiert</span> : "Klikk for å kopiere til utklippstavlen"}\n                </TooltipContent>\n            </Tooltip>\n        </p>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n'),r=n.formatCode('import React from "react";\nimport { PopupTip } from "..";\nimport { formatValuta } from "../../../utilities/formatters";\n\nexport const knobs = [\n    {\n        type: "choice",\n        label: "Plassering",\n        choiceOptions: [\n            { label: "Top", value: "top" },\n            { label: "Top start", value: "top-start" },\n            { label: "Top end", value: "top-end" },\n            { label: "Left", value: "left" },\n            { label: "Right", value: "right" },\n        ],\n        defaultValue: 0,\n    },\n    {\n        type: "choice",\n        label: "Forsinkelse (ms)",\n        choiceOptions: [\n            { label: "0", value: "0" },\n            { label: "150", value: "150" },\n            { label: "250", value: "250" },\n            { label: "500", value: "500" },\n            { label: "1000", value: "1000" },\n        ],\n        defaultValue: 0,\n    },\n];\n\nexport const PopupTipExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    return (\n        <p>\n            Du betaler 348 kr/mnd{" "}\n            <PopupTip\n                placement={choiceKnob("Plassering")}\n                delay={choiceKnob("Forsinkelse (ms)")}\n                content={`Månedsprisen vil variere på fakturaen din gjennom året. Årsprisen er ${formatValuta(4176)}.`}\n                triggerProps={{\n                    onClick: () => console.log("PopupTip clicked"),\n                }}\n            />\n        </p>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n');module.exports=function(){const t=n.useInteractiveCodeControls(l,i),a=n.useInteractiveCodeControls(r,o);return e.jsxs("div",{className:"jkl",children:[e.jsx(n.InteractiveCode,{title:"Tooltip",defaultCode:l,defaultShowEditor:!0,noInline:!0,controls:t}),e.jsx(n.InteractiveCode,{title:"PopupTip",defaultCode:r,defaultShowEditor:!0,noInline:!0,controls:a})]})};
 //# sourceMappingURL=Example.js.map

package/build/cjs/components/tooltip/documentation/Example.js.map

@@ -1 +1 @@
-{"version":3,"file":"Example.js","sources":["../../../../../src/components/tooltip/documentation/PopupTipExample.jsx","../../../../../src/components/tooltip/documentation/TooltipExample.jsx","../../../../../src/components/tooltip/documentation/Example.tsx","../../../../../src/components/tooltip/documentation/TooltipExample.jsx?raw","../../../../../src/components/tooltip/documentation/PopupTipExample.jsx?raw"],"sourcesContent":["import React from \"react\";\nimport { PopupTip } from \"..\";\nimport { formatValuta } from \"../../../utilities/formatters\";\n\nexport const knobs = [\n    {\n        type: \"choice\",\n        label: \"Plassering\",\n        choiceOptions: [\n            { label: \"Top\", value: \"top\" },\n            { label: \"Top start\", value: \"top-start\" },\n            { label: \"Top end\", value: \"top-end\" },\n            { label: \"Left\", value: \"left\" },\n            { label: \"Right\", value: \"right\" },\n        ],\n        defaultValue: 0,\n    },\n    {\n        type: \"choice\",\n        label: \"Forsinkelse (ms)\",\n        choiceOptions: [\n            { laber: \"0\", value: \"0\" },\n            { laber: \"150\", value: \"150\" },\n            { laber: \"250\", value: \"250\" },\n            { laber: \"500\", value: \"500\" },\n            { laber: \"1000\", value: \"1000\" },\n        ],\n        defaultValue: 0,\n    },\n];\n\nexport const PopupTipExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    return (\n        <p>\n            Du betaler 348 kr/mnd{\" \"}\n            <PopupTip\n                placement={choiceKnob(\"Plassering\")}\n                delay={choiceKnob(\"Forsinkelse (ms)\")}\n                content={`Månedsprisen vil variere på fakturaen din gjennom året. Årsprisen er ${formatValuta(4176)}.`}\n                triggerProps={{\n                    onClick: () => console.log(\"PopupTip clicked\"),\n                }}\n            />\n        </p>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n","import React, { useState } from \"react\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"..\";\nimport { formatKontonummer } from \"../../../utilities/formatters\";\n\nexport const knobs = [\n    {\n        type: \"choice\",\n        label: \"Plassering\",\n        choiceOptions: [\n            { label: \"Top\", value: \"top\" },\n            { label: \"Top start\", value: \"top-start\" },\n            { label: \"Top end\", value: \"top-end\" },\n            { label: \"Left\", value: \"left\" },\n            { label: \"Right\", value: \"right\" },\n        ],\n        defaultValue: 0,\n    },\n    {\n        type: \"choice\",\n        label: \"Forsinkelse (ms)\",\n        choiceOptions: [\n            { laber: \"0\", value: \"0\" },\n            { laber: \"150\", value: \"150\" },\n            { laber: \"250\", value: \"250\" },\n            { laber: \"500\", value: \"500\" },\n            { laber: \"1000\", value: \"1000\" },\n        ],\n        defaultValue: 0,\n    },\n];\n\nexport const TooltipExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    const [copied, setCopied] = useState(false);\n    const kontonummer = \"16024454979\";\n\n    function copyToClipboard() {\n        navigator.clipboard.writeText(kontonummer);\n        setCopied(true);\n        setTimeout(() => setCopied(false), 2000);\n    }\n\n    return (\n        <p>\n            Kontonummer:{\" \"}\n            <Tooltip placement={choiceKnob(\"Plassering\")} delay={choiceKnob(\"Forsinkelse (ms)\")}>\n                <TooltipTrigger onClick={copyToClipboard}>{formatKontonummer(kontonummer)}</TooltipTrigger>\n                <TooltipContent>\n                    {copied ? <span aria-live=\"assertive\">Kopiert</span> : \"Klikk for å kopiere til utklippstavlen\"}\n                </TooltipContent>\n            </Tooltip>\n        </p>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n","import React from \"react\";\nimport { formatCode, InteractiveCode, useInteractiveCodeControls } from \"../../../../../../utils/interactive-code\";\n// @ts-ignore\nimport { knobs as popupTipKnobs } from \"./PopupTipExample\";\n// @ts-ignore\nimport PopupTipExample from \"./PopupTipExample?raw\";\n// @ts-ignore\nimport { knobs as tooltipKnobs } from \"./TooltipExample\";\n// @ts-ignore\nimport TooltipExample from \"./TooltipExample?raw\";\n\nimport \"../styles/tooltip.scss\";\n\nconst tooltipCode = formatCode(TooltipExample);\nconst popupTipCode = formatCode(PopupTipExample);\n\nexport default function Example() {\n    const tooltipControls = useInteractiveCodeControls(tooltipCode, tooltipKnobs);\n    const popupTipControls = useInteractiveCodeControls(popupTipCode, popupTipKnobs);\n\n    return (\n        <div className={\"jkl\"}>\n            <InteractiveCode\n                title={\"Tooltip\"}\n                defaultCode={tooltipCode}\n                defaultShowEditor={true}\n                noInline={true}\n                controls={tooltipControls}\n            />\n            <InteractiveCode\n                title={\"PopupTip\"}\n                defaultCode={popupTipCode}\n                defaultShowEditor={true}\n                noInline={true}\n                controls={popupTipControls}\n            />\n        </div>\n    );\n}\n","export default \"import React, { useState } from \\\"react\\\";\\nimport { Tooltip, TooltipContent, TooltipTrigger } from \\\"..\\\";\\nimport { formatKontonummer } from \\\"../../../utilities/formatters\\\";\\n\\nexport const knobs = [\\n    {\\n        type: \\\"choice\\\",\\n        label: \\\"Plassering\\\",\\n        choiceOptions: [\\n            { label: \\\"Top\\\", value: \\\"top\\\" },\\n            { label: \\\"Top start\\\", value: \\\"top-start\\\" },\\n            { label: \\\"Top end\\\", value: \\\"top-end\\\" },\\n            { label: \\\"Left\\\", value: \\\"left\\\" },\\n            { label: \\\"Right\\\", value: \\\"right\\\" },\\n        ],\\n        defaultValue: 0,\\n    },\\n    {\\n        type: \\\"choice\\\",\\n        label: \\\"Forsinkelse (ms)\\\",\\n        choiceOptions: [\\n            { laber: \\\"0\\\", value: \\\"0\\\" },\\n            { laber: \\\"150\\\", value: \\\"150\\\" },\\n            { laber: \\\"250\\\", value: \\\"250\\\" },\\n            { laber: \\\"500\\\", value: \\\"500\\\" },\\n            { laber: \\\"1000\\\", value: \\\"1000\\\" },\\n        ],\\n        defaultValue: 0,\\n    },\\n];\\n\\nexport const TooltipExample = () => {\\n    /* -- EXAMPLE CODE START -- */\\n    const [copied, setCopied] = useState(false);\\n    const kontonummer = \\\"16024454979\\\";\\n\\n    function copyToClipboard() {\\n        navigator.clipboard.writeText(kontonummer);\\n        setCopied(true);\\n        setTimeout(() => setCopied(false), 2000);\\n    }\\n\\n    return (\\n        <p>\\n            Kontonummer:{\\\" \\\"}\\n            <Tooltip placement={choiceKnob(\\\"Plassering\\\")} delay={choiceKnob(\\\"Forsinkelse (ms)\\\")}>\\n                <TooltipTrigger onClick={copyToClipboard}>{formatKontonummer(kontonummer)}</TooltipTrigger>\\n                <TooltipContent>\\n                    {copied ? <span aria-live=\\\"assertive\\\">Kopiert</span> : \\\"Klikk for å kopiere til utklippstavlen\\\"}\\n                </TooltipContent>\\n            </Tooltip>\\n        </p>\\n    );\\n    /* -- EXAMPLE CODE END -- */\\n};\\n\"","export default \"import React from \\\"react\\\";\\nimport { PopupTip } from \\\"..\\\";\\nimport { formatValuta } from \\\"../../../utilities/formatters\\\";\\n\\nexport const knobs = [\\n    {\\n        type: \\\"choice\\\",\\n        label: \\\"Plassering\\\",\\n        choiceOptions: [\\n            { label: \\\"Top\\\", value: \\\"top\\\" },\\n            { label: \\\"Top start\\\", value: \\\"top-start\\\" },\\n            { label: \\\"Top end\\\", value: \\\"top-end\\\" },\\n            { label: \\\"Left\\\", value: \\\"left\\\" },\\n            { label: \\\"Right\\\", value: \\\"right\\\" },\\n        ],\\n        defaultValue: 0,\\n    },\\n    {\\n        type: \\\"choice\\\",\\n        label: \\\"Forsinkelse (ms)\\\",\\n        choiceOptions: [\\n            { laber: \\\"0\\\", value: \\\"0\\\" },\\n            { laber: \\\"150\\\", value: \\\"150\\\" },\\n            { laber: \\\"250\\\", value: \\\"250\\\" },\\n            { laber: \\\"500\\\", value: \\\"500\\\" },\\n            { laber: \\\"1000\\\", value: \\\"1000\\\" },\\n        ],\\n        defaultValue: 0,\\n    },\\n];\\n\\nexport const PopupTipExample = () => {\\n    /* -- EXAMPLE CODE START -- */\\n    return (\\n        <p>\\n            Du betaler 348 kr/mnd{\\\" \\\"}\\n            <PopupTip\\n                placement={choiceKnob(\\\"Plassering\\\")}\\n                delay={choiceKnob(\\\"Forsinkelse (ms)\\\")}\\n                content={`Månedsprisen vil variere på fakturaen din gjennom året. Årsprisen er ${formatValuta(4176)}.`}\\n                triggerProps={{\\n                    onClick: () => console.log(\\\"PopupTip clicked\\\"),\\n                }}\\n            />\\n        </p>\\n    );\\n    /* -- EXAMPLE CODE END -- */\\n};\\n\""],"names":["knobs","type","label","choiceOptions","value","defaultValue","laber","tooltipCode","formatCode","popupTipCode","tooltipControls","useInteractiveCodeControls","tooltipKnobs","popupTipControls","popupTipKnobs","jsxs","className","children","jsx","InteractiveCode","title","defaultCode","defaultShowEditor","noInline","controls"],"mappings":"kuDAIO,MAAMA,EAAQ,CACjB,CACIC,KAAM,SACNC,MAAO,aACPC,cAAe,CACX,CAAED,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,YAAaE,MAAO,aAC7B,CAAEF,MAAO,UAAWE,MAAO,WAC3B,CAAEF,MAAO,OAAQE,MAAO,QACxB,CAAEF,MAAO,QAASE,MAAO,UAE7BC,aAAc,GAElB,CACIJ,KAAM,SACNC,MAAO,mBACPC,cAAe,CACX,CAAEG,MAAO,IAAKF,MAAO,KACrB,CAAEE,MAAO,MAAOF,MAAO,OACvB,CAAEE,MAAO,MAAOF,MAAO,OACvB,CAAEE,MAAO,MAAOF,MAAO,OACvB,CAAEE,MAAO,OAAQF,MAAO,SAE5BC,aAAc,ICvBTL,EAAQ,CACjB,CACIC,KAAM,SACNC,MAAO,aACPC,cAAe,CACX,CAAED,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,YAAaE,MAAO,aAC7B,CAAEF,MAAO,UAAWE,MAAO,WAC3B,CAAEF,MAAO,OAAQE,MAAO,QACxB,CAAEF,MAAO,QAASE,MAAO,UAE7BC,aAAc,GAElB,CACIJ,KAAM,SACNC,MAAO,mBACPC,cAAe,CACX,CAAEG,MAAO,IAAKF,MAAO,KACrB,CAAEE,MAAO,MAAOF,MAAO,OACvB,CAAEE,MAAO,MAAOF,MAAO,OACvB,CAAEE,MAAO,MAAOF,MAAO,OACvB,CAAEE,MAAO,OAAQF,MAAO,SAE5BC,aAAc,ICdhBE,EAAcC,EAAAA,WCbL,0yDDcTC,EAAeD,EAAAA,WEdN,6+CFgBf,WACU,MAAAE,EAAkBC,EAAAA,2BAA2BJ,EAAaK,GAC1DC,EAAmBF,EAAAA,2BAA2BF,EAAcK,GAG9D,OAAAC,EAAAA,KAAC,MAAI,CAAAC,UAAW,MACZC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,gBAAA,CACGC,MAAO,UACPC,YAAad,EACbe,mBAAmB,EACnBC,UAAU,EACVC,SAAUd,IAEdQ,EAAAA,IAACC,EAAAA,gBAAA,CACGC,MAAO,WACPC,YAAaZ,EACba,mBAAmB,EACnBC,UAAU,EACVC,SAAUX,MAI1B"}
+{"version":3,"file":"Example.js","sources":["../../../../../src/components/tooltip/documentation/PopupTipExample.jsx","../../../../../src/components/tooltip/documentation/TooltipExample.jsx","../../../../../src/components/tooltip/documentation/Example.tsx","../../../../../src/components/tooltip/documentation/TooltipExample.jsx?raw","../../../../../src/components/tooltip/documentation/PopupTipExample.jsx?raw"],"sourcesContent":["import React from \"react\";\nimport { PopupTip } from \"..\";\nimport { formatValuta } from \"../../../utilities/formatters\";\n\nexport const knobs = [\n    {\n        type: \"choice\",\n        label: \"Plassering\",\n        choiceOptions: [\n            { label: \"Top\", value: \"top\" },\n            { label: \"Top start\", value: \"top-start\" },\n            { label: \"Top end\", value: \"top-end\" },\n            { label: \"Left\", value: \"left\" },\n            { label: \"Right\", value: \"right\" },\n        ],\n        defaultValue: 0,\n    },\n    {\n        type: \"choice\",\n        label: \"Forsinkelse (ms)\",\n        choiceOptions: [\n            { label: \"0\", value: \"0\" },\n            { label: \"150\", value: \"150\" },\n            { label: \"250\", value: \"250\" },\n            { label: \"500\", value: \"500\" },\n            { label: \"1000\", value: \"1000\" },\n        ],\n        defaultValue: 0,\n    },\n];\n\nexport const PopupTipExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    return (\n        <p>\n            Du betaler 348 kr/mnd{\" \"}\n            <PopupTip\n                placement={choiceKnob(\"Plassering\")}\n                delay={choiceKnob(\"Forsinkelse (ms)\")}\n                content={`Månedsprisen vil variere på fakturaen din gjennom året. Årsprisen er ${formatValuta(4176)}.`}\n                triggerProps={{\n                    onClick: () => console.log(\"PopupTip clicked\"),\n                }}\n            />\n        </p>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n","import React, { useState } from \"react\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"..\";\nimport { formatKontonummer } from \"../../../utilities/formatters\";\n\nexport const knobs = [\n    {\n        type: \"choice\",\n        label: \"Plassering\",\n        choiceOptions: [\n            { label: \"Top\", value: \"top\" },\n            { label: \"Top start\", value: \"top-start\" },\n            { label: \"Top end\", value: \"top-end\" },\n            { label: \"Left\", value: \"left\" },\n            { label: \"Right\", value: \"right\" },\n        ],\n        defaultValue: 0,\n    },\n    {\n        type: \"choice\",\n        label: \"Forsinkelse (ms)\",\n        choiceOptions: [\n            { label: \"0\", value: \"0\" },\n            { label: \"150\", value: \"150\" },\n            { label: \"250\", value: \"250\" },\n            { label: \"500\", value: \"500\" },\n            { label: \"1000\", value: \"1000\" },\n        ],\n        defaultValue: 0,\n    },\n];\n\nexport const TooltipExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    const [copied, setCopied] = useState(false);\n    const kontonummer = \"16024454979\";\n\n    function copyToClipboard() {\n        navigator.clipboard.writeText(kontonummer);\n        setCopied(true);\n        setTimeout(() => setCopied(false), 2000);\n    }\n\n    return (\n        <p>\n            Kontonummer:{\" \"}\n            <Tooltip placement={choiceKnob(\"Plassering\")} delay={choiceKnob(\"Forsinkelse (ms)\")}>\n                <TooltipTrigger onClick={copyToClipboard}>{formatKontonummer(kontonummer)}</TooltipTrigger>\n                <TooltipContent>\n                    {copied ? <span aria-live=\"assertive\">Kopiert</span> : \"Klikk for å kopiere til utklippstavlen\"}\n                </TooltipContent>\n            </Tooltip>\n        </p>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n","import React from \"react\";\nimport { formatCode, InteractiveCode, useInteractiveCodeControls } from \"../../../../../../utils/interactive-code\";\n// @ts-ignore\nimport { knobs as popupTipKnobs } from \"./PopupTipExample\";\n// @ts-ignore\nimport PopupTipExample from \"./PopupTipExample?raw\";\n// @ts-ignore\nimport { knobs as tooltipKnobs } from \"./TooltipExample\";\n// @ts-ignore\nimport TooltipExample from \"./TooltipExample?raw\";\n\nimport \"../styles/tooltip.scss\";\n\nconst tooltipCode = formatCode(TooltipExample);\nconst popupTipCode = formatCode(PopupTipExample);\n\nexport default function Example() {\n    const tooltipControls = useInteractiveCodeControls(tooltipCode, tooltipKnobs);\n    const popupTipControls = useInteractiveCodeControls(popupTipCode, popupTipKnobs);\n\n    return (\n        <div className={\"jkl\"}>\n            <InteractiveCode\n                title={\"Tooltip\"}\n                defaultCode={tooltipCode}\n                defaultShowEditor={true}\n                noInline={true}\n                controls={tooltipControls}\n            />\n            <InteractiveCode\n                title={\"PopupTip\"}\n                defaultCode={popupTipCode}\n                defaultShowEditor={true}\n                noInline={true}\n                controls={popupTipControls}\n            />\n        </div>\n    );\n}\n","export default \"import React, { useState } from \\\"react\\\";\\nimport { Tooltip, TooltipContent, TooltipTrigger } from \\\"..\\\";\\nimport { formatKontonummer } from \\\"../../../utilities/formatters\\\";\\n\\nexport const knobs = [\\n    {\\n        type: \\\"choice\\\",\\n        label: \\\"Plassering\\\",\\n        choiceOptions: [\\n            { label: \\\"Top\\\", value: \\\"top\\\" },\\n            { label: \\\"Top start\\\", value: \\\"top-start\\\" },\\n            { label: \\\"Top end\\\", value: \\\"top-end\\\" },\\n            { label: \\\"Left\\\", value: \\\"left\\\" },\\n            { label: \\\"Right\\\", value: \\\"right\\\" },\\n        ],\\n        defaultValue: 0,\\n    },\\n    {\\n        type: \\\"choice\\\",\\n        label: \\\"Forsinkelse (ms)\\\",\\n        choiceOptions: [\\n            { label: \\\"0\\\", value: \\\"0\\\" },\\n            { label: \\\"150\\\", value: \\\"150\\\" },\\n            { label: \\\"250\\\", value: \\\"250\\\" },\\n            { label: \\\"500\\\", value: \\\"500\\\" },\\n            { label: \\\"1000\\\", value: \\\"1000\\\" },\\n        ],\\n        defaultValue: 0,\\n    },\\n];\\n\\nexport const TooltipExample = () => {\\n    /* -- EXAMPLE CODE START -- */\\n    const [copied, setCopied] = useState(false);\\n    const kontonummer = \\\"16024454979\\\";\\n\\n    function copyToClipboard() {\\n        navigator.clipboard.writeText(kontonummer);\\n        setCopied(true);\\n        setTimeout(() => setCopied(false), 2000);\\n    }\\n\\n    return (\\n        <p>\\n            Kontonummer:{\\\" \\\"}\\n            <Tooltip placement={choiceKnob(\\\"Plassering\\\")} delay={choiceKnob(\\\"Forsinkelse (ms)\\\")}>\\n                <TooltipTrigger onClick={copyToClipboard}>{formatKontonummer(kontonummer)}</TooltipTrigger>\\n                <TooltipContent>\\n                    {copied ? <span aria-live=\\\"assertive\\\">Kopiert</span> : \\\"Klikk for å kopiere til utklippstavlen\\\"}\\n                </TooltipContent>\\n            </Tooltip>\\n        </p>\\n    );\\n    /* -- EXAMPLE CODE END -- */\\n};\\n\"","export default \"import React from \\\"react\\\";\\nimport { PopupTip } from \\\"..\\\";\\nimport { formatValuta } from \\\"../../../utilities/formatters\\\";\\n\\nexport const knobs = [\\n    {\\n        type: \\\"choice\\\",\\n        label: \\\"Plassering\\\",\\n        choiceOptions: [\\n            { label: \\\"Top\\\", value: \\\"top\\\" },\\n            { label: \\\"Top start\\\", value: \\\"top-start\\\" },\\n            { label: \\\"Top end\\\", value: \\\"top-end\\\" },\\n            { label: \\\"Left\\\", value: \\\"left\\\" },\\n            { label: \\\"Right\\\", value: \\\"right\\\" },\\n        ],\\n        defaultValue: 0,\\n    },\\n    {\\n        type: \\\"choice\\\",\\n        label: \\\"Forsinkelse (ms)\\\",\\n        choiceOptions: [\\n            { label: \\\"0\\\", value: \\\"0\\\" },\\n            { label: \\\"150\\\", value: \\\"150\\\" },\\n            { label: \\\"250\\\", value: \\\"250\\\" },\\n            { label: \\\"500\\\", value: \\\"500\\\" },\\n            { label: \\\"1000\\\", value: \\\"1000\\\" },\\n        ],\\n        defaultValue: 0,\\n    },\\n];\\n\\nexport const PopupTipExample = () => {\\n    /* -- EXAMPLE CODE START -- */\\n    return (\\n        <p>\\n            Du betaler 348 kr/mnd{\\\" \\\"}\\n            <PopupTip\\n                placement={choiceKnob(\\\"Plassering\\\")}\\n                delay={choiceKnob(\\\"Forsinkelse (ms)\\\")}\\n                content={`Månedsprisen vil variere på fakturaen din gjennom året. Årsprisen er ${formatValuta(4176)}.`}\\n                triggerProps={{\\n                    onClick: () => console.log(\\\"PopupTip clicked\\\"),\\n                }}\\n            />\\n        </p>\\n    );\\n    /* -- EXAMPLE CODE END -- */\\n};\\n\""],"names":["knobs","type","label","choiceOptions","value","defaultValue","tooltipCode","formatCode","popupTipCode","tooltipControls","useInteractiveCodeControls","tooltipKnobs","popupTipControls","popupTipKnobs","jsxs","className","children","jsx","InteractiveCode","title","defaultCode","defaultShowEditor","noInline","controls"],"mappings":"kuDAIO,MAAMA,EAAQ,CACjB,CACIC,KAAM,SACNC,MAAO,aACPC,cAAe,CACX,CAAED,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,YAAaE,MAAO,aAC7B,CAAEF,MAAO,UAAWE,MAAO,WAC3B,CAAEF,MAAO,OAAQE,MAAO,QACxB,CAAEF,MAAO,QAASE,MAAO,UAE7BC,aAAc,GAElB,CACIJ,KAAM,SACNC,MAAO,mBACPC,cAAe,CACX,CAAED,MAAO,IAAKE,MAAO,KACrB,CAAEF,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,OAAQE,MAAO,SAE5BC,aAAc,ICvBTL,EAAQ,CACjB,CACIC,KAAM,SACNC,MAAO,aACPC,cAAe,CACX,CAAED,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,YAAaE,MAAO,aAC7B,CAAEF,MAAO,UAAWE,MAAO,WAC3B,CAAEF,MAAO,OAAQE,MAAO,QACxB,CAAEF,MAAO,QAASE,MAAO,UAE7BC,aAAc,GAElB,CACIJ,KAAM,SACNC,MAAO,mBACPC,cAAe,CACX,CAAED,MAAO,IAAKE,MAAO,KACrB,CAAEF,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,MAAOE,MAAO,OACvB,CAAEF,MAAO,OAAQE,MAAO,SAE5BC,aAAc,ICdhBC,EAAcC,EAAAA,WCbL,0yDDcTC,EAAeD,EAAAA,WEdN,6+CFgBf,WACU,MAAAE,EAAkBC,EAAAA,2BAA2BJ,EAAaK,GAC1DC,EAAmBF,EAAAA,2BAA2BF,EAAcK,GAG9D,OAAAC,EAAAA,KAAC,MAAI,CAAAC,UAAW,MACZC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,gBAAA,CACGC,MAAO,UACPC,YAAad,EACbe,mBAAmB,EACnBC,UAAU,EACVC,SAAUd,IAEdQ,EAAAA,IAACC,EAAAA,gBAAA,CACGC,MAAO,WACPC,YAAaZ,EACba,mBAAmB,EACnBC,UAAU,EACVC,SAAUX,MAI1B"}

package/build/es/components/accordion/documentation/Example.js

@@ -1,2 +1,2 @@
-import{jsx as n}from"react/jsx-runtime";import{f as o,u as i,I as s}from"../../../../formatCode-BT20TgSH.js";import"react";import"../../../hooks/useScreen/useScreen.js";import"../../../hooks/useId/useId.js";import"../../icon/Icon.js";import"../../icon/icons/animated/ArrowVerticalAnimated.js";import"../../icon/icons/animated/ArrowHorizontalAnimated.js";import"../../icon/icons/animated/PlusRemoveAnimated.js";import"../../icon/icons/ArrowDownIcon.js";import"../../icon/icons/ArrowLeftIcon.js";import"../../icon/icons/ArrowNorthEastIcon.js";import"../../icon/icons/ArrowRightIcon.js";import"../../icon/icons/ArrowUpIcon.js";import"../../icon/icons/CalendarIcon.js";import"../../icon/icons/CheckIcon.js";import"../../icon/icons/ChevronDownIcon.js";import"../../icon/icons/ChevronLeftIcon.js";import"../../icon/icons/ChevronRightIcon.js";import"../../icon/icons/ChevronUpIcon.js";import"../../icon/icons/CloseIcon.js";import"../../icon/icons/CopyIcon.js";import"../../icon/icons/DotsIcon.js";import"../../icon/icons/DragIcon.js";import"../../icon/icons/ErrorIcon.js";import"../../icon/icons/GreenCheckIcon.js";import"../../icon/icons/HamburgerIcon.js";import"../../icon/icons/InfoIcon.js";import"../../icon/icons/LinkIcon.js";import"../../icon/icons/PlusIcon.js";import"../../icon/icons/QuestionIcon.js";import"../../icon/icons/RedCrossIcon.js";import"../../icon/icons/SearchIcon.js";import"../../icon/icons/SuccessIcon.js";import"../../icon/icons/WarningIcon.js";import"../../icon/icons/MinusIcon.js";import"../../icon/icons/ThumbDownIcon.js";import"../../icon/icons/ThumbUpIcon.js";import"../../icon/icons/TrashCanIcon.js";import"../../icon/icons/PenIcon.js";import"../../list/List.js";import"../../list/ListItem.js";const e=[],r=o('import React, { useId } from "react";\nimport { Accordion, AccordionItem } from "..";\nimport { UnorderedList, ListItem } from "../../list";\n\nexport const knobs = [];\n\nexport const AccordionExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    const id = useId();\n    return (\n        <>\n            <h2\n                className="jkl-portal-heading-medium"\n                id={id}\n                style={{ textAlign: "center", marginBottom: 24, width: "100%" }}\n            >\n                Noen spørsmål\n            </h2>\n            <Accordion aria-labelledby={id}>\n                <AccordionItem\n                    title="Hvem kan kjøpe livsforsikring?"\n                    onClick={(e, isOpen) => {\n                        isOpen\n                            ? console.log("Opening first accordion item")\n                            : console.log("Closing first accordion item");\n                    }}\n                >\n                    <UnorderedList>\n                        <ListItem>Personer med et norsk fødselsnummer.</ListItem>\n                        <ListItem>\n                            Personer som har vært bosatt i Norge i minst de fem siste årene før avtalen inngås.\n                        </ListItem>\n                        <ListItem>Livsforsikring kan kjøpes på nett av personer mellom 18 og 79 år.</ListItem>\n                    </UnorderedList>\n                    Ønsker du en forsikringssum på mer enn 3 millioner trenger vi ekstra økonomiske opplysninger. Da må\n                    du ta kontakt med banken din.\n                </AccordionItem>\n                <AccordionItem title="Hvem kan kjøpe kritisk sykdom?">\n                    Personer med et norsk fødselsnummer. Personer som har vært bosatt i Norge i minst de fem siste årene\n                    før avtalen inngås. Kritisk sykdom kan kjøpes på nett av personer mellom 18 og 58 år. Ønsker du en\n                    forsikringssum på mer enn 1,1 millioner trenger vi ekstra økonomiske opplysninger. Da må du ta\n                    kontakt med banken din.\n                </AccordionItem>\n                <AccordionItem title="Hvem kan kjøpe uførepensjon?">\n                    Personer med et norsk fødselsnummer. Personer som har vært bosatt i Norge i minst de fem siste årene\n                    før avtalen inngås. Uførepensjon kan kjøpes på nett av personer mellom 18 og 60 år. Ønsker du en\n                    forsikringssum på mer enn 96 000 trenger vi ekstra økonomiske opplysninger. Da må du ta kontakt med\n                    banken din.\n                </AccordionItem>\n            </Accordion>\n        </>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n');function t(){const o=i(r,e);return n("div",{className:"jkl",children:n(s,{title:"Accordion",defaultCode:r,defaultShowEditor:!0,noInline:!0,controls:o})})}export{t as default};
+import{jsx as n}from"react/jsx-runtime";import{f as o,u as i,I as s}from"../../../../formatCode-DzuWIQfw.js";import"react";import"../../../hooks/useScreen/useScreen.js";import"../../../hooks/useId/useId.js";import"../../icon/Icon.js";import"../../icon/icons/animated/ArrowVerticalAnimated.js";import"../../icon/icons/animated/ArrowHorizontalAnimated.js";import"../../icon/icons/animated/PlusRemoveAnimated.js";import"../../icon/icons/ArrowDownIcon.js";import"../../icon/icons/ArrowLeftIcon.js";import"../../icon/icons/ArrowNorthEastIcon.js";import"../../icon/icons/ArrowRightIcon.js";import"../../icon/icons/ArrowUpIcon.js";import"../../icon/icons/CalendarIcon.js";import"../../icon/icons/CheckIcon.js";import"../../icon/icons/ChevronDownIcon.js";import"../../icon/icons/ChevronLeftIcon.js";import"../../icon/icons/ChevronRightIcon.js";import"../../icon/icons/ChevronUpIcon.js";import"../../icon/icons/CloseIcon.js";import"../../icon/icons/CopyIcon.js";import"../../icon/icons/DotsIcon.js";import"../../icon/icons/DragIcon.js";import"../../icon/icons/ErrorIcon.js";import"../../icon/icons/GreenCheckIcon.js";import"../../icon/icons/HamburgerIcon.js";import"../../icon/icons/InfoIcon.js";import"../../icon/icons/LinkIcon.js";import"../../icon/icons/PlusIcon.js";import"../../icon/icons/QuestionIcon.js";import"../../icon/icons/RedCrossIcon.js";import"../../icon/icons/SearchIcon.js";import"../../icon/icons/SuccessIcon.js";import"../../icon/icons/WarningIcon.js";import"../../icon/icons/MinusIcon.js";import"../../icon/icons/ThumbDownIcon.js";import"../../icon/icons/ThumbUpIcon.js";import"../../icon/icons/TrashCanIcon.js";import"../../icon/icons/PenIcon.js";import"../../list/List.js";import"../../list/ListItem.js";const e=[],r=o('import React, { useId } from "react";\nimport { Accordion, AccordionItem } from "..";\nimport { UnorderedList, ListItem } from "../../list";\n\nexport const knobs = [];\n\nexport const AccordionExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    const id = useId();\n    return (\n        <>\n            <h2\n                className="jkl-portal-heading-medium"\n                id={id}\n                style={{ textAlign: "center", marginBottom: 24, width: "100%" }}\n            >\n                Noen spørsmål\n            </h2>\n            <Accordion aria-labelledby={id}>\n                <AccordionItem\n                    title="Hvem kan kjøpe livsforsikring?"\n                    onClick={(e, isOpen) => {\n                        isOpen\n                            ? console.log("Opening first accordion item")\n                            : console.log("Closing first accordion item");\n                    }}\n                >\n                    <UnorderedList>\n                        <ListItem>Personer med et norsk fødselsnummer.</ListItem>\n                        <ListItem>\n                            Personer som har vært bosatt i Norge i minst de fem siste årene før avtalen inngås.\n                        </ListItem>\n                        <ListItem>Livsforsikring kan kjøpes på nett av personer mellom 18 og 79 år.</ListItem>\n                    </UnorderedList>\n                    Ønsker du en forsikringssum på mer enn 3 millioner trenger vi ekstra økonomiske opplysninger. Da må\n                    du ta kontakt med banken din.\n                </AccordionItem>\n                <AccordionItem title="Hvem kan kjøpe kritisk sykdom?">\n                    Personer med et norsk fødselsnummer. Personer som har vært bosatt i Norge i minst de fem siste årene\n                    før avtalen inngås. Kritisk sykdom kan kjøpes på nett av personer mellom 18 og 58 år. Ønsker du en\n                    forsikringssum på mer enn 1,1 millioner trenger vi ekstra økonomiske opplysninger. Da må du ta\n                    kontakt med banken din.\n                </AccordionItem>\n                <AccordionItem title="Hvem kan kjøpe uførepensjon?">\n                    Personer med et norsk fødselsnummer. Personer som har vært bosatt i Norge i minst de fem siste årene\n                    før avtalen inngås. Uførepensjon kan kjøpes på nett av personer mellom 18 og 60 år. Ønsker du en\n                    forsikringssum på mer enn 96 000 trenger vi ekstra økonomiske opplysninger. Da må du ta kontakt med\n                    banken din.\n                </AccordionItem>\n            </Accordion>\n        </>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n');function t(){const o=i(r,e);return n("div",{className:"jkl",children:n(s,{title:"Accordion",defaultCode:r,defaultShowEditor:!0,noInline:!0,controls:o})})}export{t as default};
 //# sourceMappingURL=Example.js.map

package/build/es/components/breadcrumb/documentation/Example.js

@@ -0,0 +1,2 @@
+import{jsx as r}from"react/jsx-runtime";import{f as e,u as n,I as m}from"../../../../formatCode-DzuWIQfw.js";import"react";const t=[],a=e('import React from "react";\nimport { Breadcrumb, BreadcrumbItem } from "..";\n\nexport const knobs = [];\n\nexport const BreadcrumbExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    return (\n        <Breadcrumb>\n            <BreadcrumbItem>\n                <a href="/">Hjem</a>\n            </BreadcrumbItem>\n            <BreadcrumbItem>\n                <a href="/komponenter/accordion">Komponenter</a>\n            </BreadcrumbItem>\n            <BreadcrumbItem>\n                <a href="/komponenter/breadcrumb">Breadcrumb</a>\n            </BreadcrumbItem>\n        </Breadcrumb>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n');function o(){const e=n(a,t);return r("div",{className:"jkl",children:r(m,{title:"Breadcrumb",defaultCode:a,defaultShowEditor:!0,noInline:!0,controls:e})})}export{o as default};
+//# sourceMappingURL=Example.js.map

package/build/es/components/breadcrumb/documentation/Example.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Example.js","sources":["../../../../../src/components/breadcrumb/documentation/BreadcrumbExample.jsx","../../../../../src/components/breadcrumb/documentation/Example.tsx","../../../../../src/components/breadcrumb/documentation/BreadcrumbExample.jsx?raw"],"sourcesContent":["import React from \"react\";\nimport { Breadcrumb, BreadcrumbItem } from \"..\";\n\nexport const knobs = [];\n\nexport const BreadcrumbExample = () => {\n    /* -- EXAMPLE CODE START -- */\n    return (\n        <Breadcrumb>\n            <BreadcrumbItem>\n                <a href=\"/\">Hjem</a>\n            </BreadcrumbItem>\n            <BreadcrumbItem>\n                <a href=\"/komponenter/accordion\">Komponenter</a>\n            </BreadcrumbItem>\n            <BreadcrumbItem>\n                <a href=\"/komponenter/breadcrumb\">Breadcrumb</a>\n            </BreadcrumbItem>\n        </Breadcrumb>\n    );\n    /* -- EXAMPLE CODE END -- */\n};\n","import React from \"react\";\nimport { formatCode, InteractiveCode, useInteractiveCodeControls } from \"../../../../../../utils/interactive-code\";\n// @ts-ignore\nimport { knobs } from \"./BreadcrumbExample\";\n// @ts-ignore\nimport BreadcrumbExample from \"./BreadcrumbExample?raw\";\n\nimport \"../styles/_index.scss\";\n\nconst code = formatCode(BreadcrumbExample);\n\nexport default function Example() {\n    const controls = useInteractiveCodeControls(code, knobs);\n\n    return (\n        <div className={\"jkl\"}>\n            <InteractiveCode\n                title={\"Breadcrumb\"}\n                defaultCode={code}\n                defaultShowEditor={true}\n                noInline={true}\n                controls={controls}\n            />\n        </div>\n    );\n}\n","export default \"import React from \\\"react\\\";\\nimport { Breadcrumb, BreadcrumbItem } from \\\"..\\\";\\n\\nexport const knobs = [];\\n\\nexport const BreadcrumbExample = () => {\\n    /* -- EXAMPLE CODE START -- */\\n    return (\\n        <Breadcrumb>\\n            <BreadcrumbItem>\\n                <a href=\\\"/\\\">Hjem</a>\\n            </BreadcrumbItem>\\n            <BreadcrumbItem>\\n                <a href=\\\"/komponenter/accordion\\\">Komponenter</a>\\n            </BreadcrumbItem>\\n            <BreadcrumbItem>\\n                <a href=\\\"/komponenter/breadcrumb\\\">Breadcrumb</a>\\n            </BreadcrumbItem>\\n        </Breadcrumb>\\n    );\\n    /* -- EXAMPLE CODE END -- */\\n};\\n\""],"names":["knobs","code","formatCode","Example","controls","useInteractiveCodeControls","jsx","className","children","InteractiveCode","title","defaultCode","defaultShowEditor","noInline"],"mappings":"2HAGO,MAAMA,EAAQ,GCMfC,EAAOC,ECTE,woBDWf,SAAwBC,IACdC,MAAAA,EAAWC,EAA2BJ,EAAMD,GAG9C,OAAAM,EAAC,MAAI,CAAAC,UAAW,MACZC,SAAAF,EAACG,EAAA,CACGC,MAAO,aACPC,YAAaV,EACbW,mBAAmB,EACnBC,UAAU,EACVT,SAAAA,KAIhB"}

package/build/es/components/breadcrumb/documentation/main.js

@@ -0,0 +1,2 @@
+import{jsx as o}from"react/jsx-runtime";import t from"react-dom/client";import"react";import"../../../hooks/useScreen/useScreen.js";import"../../../hooks/useId/useId.js";import"../../icon/Icon.js";import"../../icon/icons/animated/ArrowVerticalAnimated.js";import"../../icon/icons/animated/ArrowHorizontalAnimated.js";import"../../icon/icons/animated/PlusRemoveAnimated.js";import"../../icon/icons/ArrowDownIcon.js";import"../../icon/icons/ArrowLeftIcon.js";import"../../icon/icons/ArrowNorthEastIcon.js";import"../../icon/icons/ArrowRightIcon.js";import"../../icon/icons/ArrowUpIcon.js";import"../../icon/icons/CalendarIcon.js";import"../../icon/icons/CheckIcon.js";import"../../icon/icons/ChevronDownIcon.js";import"../../icon/icons/ChevronLeftIcon.js";import"../../icon/icons/ChevronRightIcon.js";import"../../icon/icons/ChevronUpIcon.js";import"../../icon/icons/CloseIcon.js";import"../../icon/icons/CopyIcon.js";import"../../icon/icons/DotsIcon.js";import"../../icon/icons/DragIcon.js";import"../../icon/icons/ErrorIcon.js";import"../../icon/icons/GreenCheckIcon.js";import"../../icon/icons/HamburgerIcon.js";import"../../icon/icons/InfoIcon.js";import"../../icon/icons/LinkIcon.js";import"../../icon/icons/PlusIcon.js";import"../../icon/icons/QuestionIcon.js";import"../../icon/icons/RedCrossIcon.js";import"../../icon/icons/SearchIcon.js";import"../../icon/icons/SuccessIcon.js";import"../../icon/icons/WarningIcon.js";import"../../icon/icons/MinusIcon.js";import"../../icon/icons/ThumbDownIcon.js";import"../../icon/icons/ThumbUpIcon.js";import"../../icon/icons/TrashCanIcon.js";import"../../icon/icons/PenIcon.js";import"../../button/Button.js";import"../../card/Card.js";import"../../card/CardImage.js";import"../../card/NavCard.js";import"../../checkbox/Checkbox.js";import"../../combobox/Combobox.js";import"../../cookie-consent/CookieConsentContext.js";import"react-dom";import"../../modal/Modal.js";import"react-a11y-dialog";import"../../list/List.js";import"../../list/ListItem.js";import"../../datepicker/DatePicker.js";import"../../feedback/feedbackContext.js";import"../../message/Message.js";import"../../message/FormErrorMessage.js";import"../../tooltip/Tooltip.js";import"../../tooltip/TooltipContent.js";import"../../tooltip/TooltipTrigger.js";import"../../input-group/InputGroup.js";import"../../feedback/followup/followupContext.js";import"../../feedback/main-question/mainQuestionContext.js";import"../../radio-button/RadioButton.js";import"../../radio-button/radioGroupContext.js";import"../../radio-button/BaseRadioButton.js";import"../../text-input/BaseTextArea.js";import"../../text-input/BaseTextInput.js";import"../../text-input/TextArea.js";import"../../text-input/TextInput.js";import"../../../utilities/polymorphism/SlotComponent.js";import{initTabListener as i}from"../../../utilities/tabListener.js";import"../../../../ExpandableTableRow-vzoCcN_v.js";import"../../icon-button/IconButton.js";import"../../link/Link.js";import"../../link/NavLink.js";import"../../link-list/LinkList.js";import"../../logo/text-paths/ForsikringLevertAvFremtind.js";import"../../logo/text-paths/FraSB1ogDNB.js";import"../../logo/text-paths/InnovasjonFraFremtind.js";import"../../logo/text-paths/TeknologiFraFremtind.js";import"../../logo/text-paths/VartEgetForsikringsselskap.js";import"../../logo/text-paths/VartForsikringsselskap.js";import"../../menu/MenuItem.js";import"../../menu/MenuItemCheckbox.js";import"../../popover/Popover.js";import"../../system-message/SystemMessage.js";import"../../table/DataTable.js";import"../../table/Table.js";import"../../table/TableBody.js";import"../../table/TableCaption.js";import"../../table/TableCell.js";import"../../table/TableColumn.js";import"../../table/TableColumnGroup.js";import"../../table/tableContext.js";import"../../table/tableSectionContext.js";import"../../table/TableFooter.js";import"../../table/TableHead.js";import"../../table/TableHeader.js";import"../../table/TableRow.js";import"../../tabs/NavTab.js";import"../../tabs/tabsContext.js";import"../../tabs/Tab.js";import"../../tag/Tag.js";import"../../toast/toastContext.js";import"../../toggle-switch/ToggleSwitch.js";import s from"./Example.js";i(),t.createRoot(document.getElementById("root")).render(o(s,{}));
+//# sourceMappingURL=main.js.map