@helsenorge/designsystem-react 14.6.0 → 14.7.1

package/lib/Search.js

@@ -0,0 +1,26 @@
+import { t as getIcon } from "./utils.js";
+import { jsx } from "react/jsx-runtime";
+var Search = ({ size, isHovered }) => {
+	return getIcon({
+		size,
+		isHovered,
+		normal: /* @__PURE__ */ jsx("path", { d: "M21.277 7.738c7.27 0 13.165 5.895 13.165 13.166 0 2.222-.55 4.316-1.523 6.153l6.268 6.268a3.929 3.929 0 01-5.41 5.695l-.146-.139-6.289-6.289a13.11 13.11 0 01-6.065 1.478c-7.272 0-13.166-5.895-13.166-13.166 0-7.271 5.894-13.166 13.166-13.166zM32 28.542a13.24 13.24 0 01-3.164 3.142l5.996 5.995a2.229 2.229 0 003.26-3.036l-.108-.116zM21.277 9.438c-6.333 0-11.466 5.133-11.466 11.466 0 6.332 5.133 11.466 11.466 11.466 2.258 0 4.365-.654 6.14-1.781l.163-.163.034.035a11.529 11.529 0 003.165-3.14l-.047-.048.228-.226a11.412 11.412 0 001.782-6.143c0-6.333-5.133-11.466-11.465-11.466z" }),
+		normalHover: /* @__PURE__ */ jsx("path", { d: "M21.527 6.932c7.932 0 14.363 6.43 14.363 14.362 0 2.556-.668 4.956-1.838 7.035l5.386 5.386a3.929 3.929 0 01-5.41 5.696l-.146-.14-5.406-5.404a14.298 14.298 0 01-6.949 1.79c-7.932 0-14.362-6.43-14.362-14.363 0-7.932 6.43-14.362 14.362-14.362zM33.11 29.79a14.445 14.445 0 01-3.162 3.141l5.137 5.138a2.229 2.229 0 003.26-3.035l-.108-.117zM21.527 8.632c-6.993 0-12.662 5.669-12.662 12.662 0 6.993 5.669 12.663 12.662 12.663 6.993 0 12.663-5.67 12.663-12.663S28.52 8.632 21.527 8.632z" }),
+		xSmall: /* @__PURE__ */ jsx("path", { d: "M34.476 34.206c-.486.487-1.333.487-1.82 0l-4.402-4.403a10.426 10.426 0 001.78-1.857l4.442 4.44c.243.243.376.567.376.91 0 .345-.133.668-.376.91M21.742 30.07c-4.592 0-8.327-3.737-8.327-8.327 0-4.592 3.735-8.327 8.327-8.327 4.591 0 8.327 3.735 8.327 8.327 0 4.59-3.736 8.327-8.327 8.327m14.181.871l-4.8-4.8c.63-1.338.991-2.825.991-4.398 0-5.72-4.653-10.374-10.372-10.374-5.72 0-10.374 4.653-10.374 10.374 0 5.72 4.653 10.372 10.374 10.372 1.717 0 3.333-.426 4.76-1.168l4.708 4.708a3.312 3.312 0 002.357.976c.89 0 1.727-.348 2.356-.976a3.339 3.339 0 000-4.714" }),
+		xSmallHover: /* @__PURE__ */ jsx("path", { d: "M34.7 34.43c-.486.485-1.338.487-1.823 0l-3.388-3.39c.663-.55 1.255-1.18 1.785-1.859l3.426 3.424c.244.242.377.567.377.911 0 .346-.133.669-.377.914m-12.76-2.994c-5.238 0-9.5-4.26-9.5-9.499 0-5.238 4.262-9.499 9.5-9.499 5.237 0 9.498 4.261 9.498 9.5 0 5.237-4.26 9.498-9.499 9.498m14.21-.28l-3.734-3.736a11.744 11.744 0 001.356-5.483c0-6.524-5.31-11.832-11.832-11.832-6.524 0-11.834 5.308-11.834 11.832 0 6.525 5.31 11.834 11.834 11.834 2.12 0 4.108-.57 5.831-1.55l3.656 3.658c.633.63 1.47.979 2.362.979.893 0 1.732-.348 2.36-.98.632-.63.98-1.467.98-2.362 0-.89-.348-1.73-.98-2.36" }),
+		xxSmall: /* @__PURE__ */ jsx("path", {
+			"fill-rule": "evenodd",
+			"clip-rule": "evenodd",
+			d: "M20.1738 6.88672C27.4533 6.88672 33.3765 12.8075 33.377 20.0879C33.377 22.0407 32.934 23.8871 32.1699 25.5547L38.0918 31.4785C39.7973 33.1852 39.7973 35.9613 38.0918 37.668C37.2652 38.4933 36.1671 38.9509 34.998 38.9512C33.8287 38.9512 32.7281 38.4937 31.9023 37.668L26.1016 31.8672C24.3175 32.7694 22.3071 33.291 20.1738 33.291C12.8934 33.2906 6.97266 27.3673 6.97266 20.0879C6.97311 12.8077 12.8937 6.88717 20.1738 6.88672ZM33.9766 35.8223C34.0595 35.8891 34.1486 35.9464 34.2422 35.9941L34.1055 35.9141C34.0613 35.8856 34.0179 35.8555 33.9766 35.8223ZM30.5879 28.166C30.0088 28.9128 29.3558 29.5973 28.6309 30.2051L34 35.5742C34.5316 36.105 35.4668 36.1054 35.998 35.5742C36.2647 35.3076 36.4102 34.9522 36.4102 34.5742C36.4099 34.1967 36.264 33.8424 35.998 33.5762L30.5879 28.166ZM12.3984 30.5039C12.4725 30.5593 12.5498 30.6102 12.625 30.6641C12.3803 30.4889 12.1399 30.3085 11.9082 30.1172L12.3984 30.5039ZM20.1758 9.85156C14.5314 9.85197 9.93993 14.4435 9.93945 20.0879C9.93945 25.7316 14.5311 30.3258 20.1758 30.3262C25.8208 30.3262 30.4141 25.7318 30.4141 20.0879C30.4136 14.4432 25.8205 9.85156 20.1758 9.85156ZM24.2363 29.7051C24.392 29.6391 24.5456 29.5693 24.6973 29.4961C24.3933 29.6428 24.0811 29.7753 23.7617 29.8926L24.2363 29.7051ZM30.4199 18.0801C30.5472 18.7301 30.6152 19.4012 30.6152 20.0879L30.6016 19.5527C30.5761 19.0518 30.5139 18.5601 30.4199 18.0801ZM30.5898 12.3145C30.6024 12.3312 30.6145 12.3484 30.627 12.3652C30.4902 12.1806 30.3492 11.9993 30.2031 11.8223L30.5898 12.3145ZM23.2754 10.1211C24.0922 10.3756 24.8663 10.7276 25.584 11.1641L25.1484 10.9121C24.5564 10.59 23.9293 10.3248 23.2754 10.1211Z"
+		}),
+		xxSmallHover: /* @__PURE__ */ jsx("path", {
+			"fill-rule": "evenodd",
+			"clip-rule": "evenodd",
+			d: "M20.0664 5.13281C28.324 5.13306 35.0464 11.8511 35.0469 20.1113C35.0469 22.5634 34.442 24.8729 33.3926 26.918L37.957 31.4863C38.7823 32.3116 39.2383 33.4111 39.2383 34.5762C39.2382 35.7464 38.7821 36.8427 37.957 37.668C37.1342 38.4934 36.0347 38.9492 34.8672 38.9492C33.6999 38.9491 32.6029 38.4943 31.7754 37.6699L27.3105 33.2031C25.1607 34.3979 22.6954 35.0956 20.0664 35.0957C11.806 35.0954 5.08398 28.3719 5.08398 20.1113C5.08443 11.8511 11.8063 5.13314 20.0664 5.13281ZM31.7402 29.459C31.1525 30.1928 30.5023 30.8761 29.7871 31.4902L33.8711 35.5762C34.3983 36.1051 35.3349 36.1032 35.8633 35.5762C36.1311 35.3083 36.2772 34.9554 36.2773 34.5762C36.2773 34.1993 36.132 33.8448 35.8652 33.5801L31.7402 29.459ZM26.5273 33.3926C25.4214 33.9344 24.2397 34.3442 23.002 34.5977C23.3028 34.5361 23.6006 34.4664 23.8945 34.3867C25.1149 34.0558 26.2734 33.5714 27.3496 32.959C27.0807 33.112 26.8062 33.256 26.5273 33.3926ZM38.0957 31.9355C38.3575 32.2543 38.5693 32.6057 38.7246 32.9805C38.5174 32.4804 38.2105 32.0211 37.8164 31.627L38.0957 31.9355ZM20.0664 8.44531C13.6343 8.44564 8.40039 13.6791 8.40039 20.1113C8.40058 26.5434 13.6344 31.777 20.0664 31.7773C26.4984 31.777 31.7322 26.5434 31.7324 20.1113C31.7324 13.6791 26.4985 8.44568 20.0664 8.44531ZM17.6777 8.48633C16.327 8.76346 15.0598 9.27215 13.918 9.9668C14.7339 9.47055 15.6142 9.07065 16.543 8.78125C16.9139 8.66566 17.2923 8.56542 17.6777 8.48633ZM22.4551 8.48828C22.6482 8.52791 22.8397 8.57217 23.0293 8.62109C22.6501 8.52325 22.2639 8.443 21.8711 8.38281L22.4551 8.48828ZM20.0664 8.24609C19.6577 8.24609 19.2537 8.2661 18.8555 8.30664L19.457 8.26172C19.6589 8.25145 19.862 8.2461 20.0664 8.24609Z"
+		})
+	});
+};
+var Search_default = Search;
+export { Search_default as t };
+
+//# sourceMappingURL=Search.js.map

package/lib/Search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search.js","names":["Search: React.FC<SvgPathProps>"],"sources":["../src/components/Icons/Search.tsx"],"sourcesContent":["import type { SvgPathProps } from '../Icon';\n\nimport { getIcon } from '../Icon/utils';\n\nconst Search: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n  const normal = (\n    <path d=\"M21.277 7.738c7.27 0 13.165 5.895 13.165 13.166 0 2.222-.55 4.316-1.523 6.153l6.268 6.268a3.929 3.929 0 01-5.41 5.695l-.146-.139-6.289-6.289a13.11 13.11 0 01-6.065 1.478c-7.272 0-13.166-5.895-13.166-13.166 0-7.271 5.894-13.166 13.166-13.166zM32 28.542a13.24 13.24 0 01-3.164 3.142l5.996 5.995a2.229 2.229 0 003.26-3.036l-.108-.116zM21.277 9.438c-6.333 0-11.466 5.133-11.466 11.466 0 6.332 5.133 11.466 11.466 11.466 2.258 0 4.365-.654 6.14-1.781l.163-.163.034.035a11.529 11.529 0 003.165-3.14l-.047-.048.228-.226a11.412 11.412 0 001.782-6.143c0-6.333-5.133-11.466-11.465-11.466z\" />\n  );\n\n  const normalHover = (\n    <path d=\"M21.527 6.932c7.932 0 14.363 6.43 14.363 14.362 0 2.556-.668 4.956-1.838 7.035l5.386 5.386a3.929 3.929 0 01-5.41 5.696l-.146-.14-5.406-5.404a14.298 14.298 0 01-6.949 1.79c-7.932 0-14.362-6.43-14.362-14.363 0-7.932 6.43-14.362 14.362-14.362zM33.11 29.79a14.445 14.445 0 01-3.162 3.141l5.137 5.138a2.229 2.229 0 003.26-3.035l-.108-.117zM21.527 8.632c-6.993 0-12.662 5.669-12.662 12.662 0 6.993 5.669 12.663 12.662 12.663 6.993 0 12.663-5.67 12.663-12.663S28.52 8.632 21.527 8.632z\" />\n  );\n\n  const xSmall = (\n    <path d=\"M34.476 34.206c-.486.487-1.333.487-1.82 0l-4.402-4.403a10.426 10.426 0 001.78-1.857l4.442 4.44c.243.243.376.567.376.91 0 .345-.133.668-.376.91M21.742 30.07c-4.592 0-8.327-3.737-8.327-8.327 0-4.592 3.735-8.327 8.327-8.327 4.591 0 8.327 3.735 8.327 8.327 0 4.59-3.736 8.327-8.327 8.327m14.181.871l-4.8-4.8c.63-1.338.991-2.825.991-4.398 0-5.72-4.653-10.374-10.372-10.374-5.72 0-10.374 4.653-10.374 10.374 0 5.72 4.653 10.372 10.374 10.372 1.717 0 3.333-.426 4.76-1.168l4.708 4.708a3.312 3.312 0 002.357.976c.89 0 1.727-.348 2.356-.976a3.339 3.339 0 000-4.714\" />\n  );\n\n  const xSmallHover = (\n    <path d=\"M34.7 34.43c-.486.485-1.338.487-1.823 0l-3.388-3.39c.663-.55 1.255-1.18 1.785-1.859l3.426 3.424c.244.242.377.567.377.911 0 .346-.133.669-.377.914m-12.76-2.994c-5.238 0-9.5-4.26-9.5-9.499 0-5.238 4.262-9.499 9.5-9.499 5.237 0 9.498 4.261 9.498 9.5 0 5.237-4.26 9.498-9.499 9.498m14.21-.28l-3.734-3.736a11.744 11.744 0 001.356-5.483c0-6.524-5.31-11.832-11.832-11.832-6.524 0-11.834 5.308-11.834 11.832 0 6.525 5.31 11.834 11.834 11.834 2.12 0 4.108-.57 5.831-1.55l3.656 3.658c.633.63 1.47.979 2.362.979.893 0 1.732-.348 2.36-.98.632-.63.98-1.467.98-2.362 0-.89-.348-1.73-.98-2.36\" />\n  );\n\n  const xxSmall = (\n    <path\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M20.1738 6.88672C27.4533 6.88672 33.3765 12.8075 33.377 20.0879C33.377 22.0407 32.934 23.8871 32.1699 25.5547L38.0918 31.4785C39.7973 33.1852 39.7973 35.9613 38.0918 37.668C37.2652 38.4933 36.1671 38.9509 34.998 38.9512C33.8287 38.9512 32.7281 38.4937 31.9023 37.668L26.1016 31.8672C24.3175 32.7694 22.3071 33.291 20.1738 33.291C12.8934 33.2906 6.97266 27.3673 6.97266 20.0879C6.97311 12.8077 12.8937 6.88717 20.1738 6.88672ZM33.9766 35.8223C34.0595 35.8891 34.1486 35.9464 34.2422 35.9941L34.1055 35.9141C34.0613 35.8856 34.0179 35.8555 33.9766 35.8223ZM30.5879 28.166C30.0088 28.9128 29.3558 29.5973 28.6309 30.2051L34 35.5742C34.5316 36.105 35.4668 36.1054 35.998 35.5742C36.2647 35.3076 36.4102 34.9522 36.4102 34.5742C36.4099 34.1967 36.264 33.8424 35.998 33.5762L30.5879 28.166ZM12.3984 30.5039C12.4725 30.5593 12.5498 30.6102 12.625 30.6641C12.3803 30.4889 12.1399 30.3085 11.9082 30.1172L12.3984 30.5039ZM20.1758 9.85156C14.5314 9.85197 9.93993 14.4435 9.93945 20.0879C9.93945 25.7316 14.5311 30.3258 20.1758 30.3262C25.8208 30.3262 30.4141 25.7318 30.4141 20.0879C30.4136 14.4432 25.8205 9.85156 20.1758 9.85156ZM24.2363 29.7051C24.392 29.6391 24.5456 29.5693 24.6973 29.4961C24.3933 29.6428 24.0811 29.7753 23.7617 29.8926L24.2363 29.7051ZM30.4199 18.0801C30.5472 18.7301 30.6152 19.4012 30.6152 20.0879L30.6016 19.5527C30.5761 19.0518 30.5139 18.5601 30.4199 18.0801ZM30.5898 12.3145C30.6024 12.3312 30.6145 12.3484 30.627 12.3652C30.4902 12.1806 30.3492 11.9993 30.2031 11.8223L30.5898 12.3145ZM23.2754 10.1211C24.0922 10.3756 24.8663 10.7276 25.584 11.1641L25.1484 10.9121C24.5564 10.59 23.9293 10.3248 23.2754 10.1211Z\"\n    />\n  );\n\n  const xxSmallHover = (\n    <path\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M20.0664 5.13281C28.324 5.13306 35.0464 11.8511 35.0469 20.1113C35.0469 22.5634 34.442 24.8729 33.3926 26.918L37.957 31.4863C38.7823 32.3116 39.2383 33.4111 39.2383 34.5762C39.2382 35.7464 38.7821 36.8427 37.957 37.668C37.1342 38.4934 36.0347 38.9492 34.8672 38.9492C33.6999 38.9491 32.6029 38.4943 31.7754 37.6699L27.3105 33.2031C25.1607 34.3979 22.6954 35.0956 20.0664 35.0957C11.806 35.0954 5.08398 28.3719 5.08398 20.1113C5.08443 11.8511 11.8063 5.13314 20.0664 5.13281ZM31.7402 29.459C31.1525 30.1928 30.5023 30.8761 29.7871 31.4902L33.8711 35.5762C34.3983 36.1051 35.3349 36.1032 35.8633 35.5762C36.1311 35.3083 36.2772 34.9554 36.2773 34.5762C36.2773 34.1993 36.132 33.8448 35.8652 33.5801L31.7402 29.459ZM26.5273 33.3926C25.4214 33.9344 24.2397 34.3442 23.002 34.5977C23.3028 34.5361 23.6006 34.4664 23.8945 34.3867C25.1149 34.0558 26.2734 33.5714 27.3496 32.959C27.0807 33.112 26.8062 33.256 26.5273 33.3926ZM38.0957 31.9355C38.3575 32.2543 38.5693 32.6057 38.7246 32.9805C38.5174 32.4804 38.2105 32.0211 37.8164 31.627L38.0957 31.9355ZM20.0664 8.44531C13.6343 8.44564 8.40039 13.6791 8.40039 20.1113C8.40058 26.5434 13.6344 31.777 20.0664 31.7773C26.4984 31.777 31.7322 26.5434 31.7324 20.1113C31.7324 13.6791 26.4985 8.44568 20.0664 8.44531ZM17.6777 8.48633C16.327 8.76346 15.0598 9.27215 13.918 9.9668C14.7339 9.47055 15.6142 9.07065 16.543 8.78125C16.9139 8.66566 17.2923 8.56542 17.6777 8.48633ZM22.4551 8.48828C22.6482 8.52791 22.8397 8.57217 23.0293 8.62109C22.6501 8.52325 22.2639 8.443 21.8711 8.38281L22.4551 8.48828ZM20.0664 8.24609C19.6577 8.24609 19.2537 8.2661 18.8555 8.30664L19.457 8.26172C19.6589 8.25145 19.862 8.2461 20.0664 8.24609Z\"\n    />\n  );\n\n  return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover, xxSmall, xxSmallHover });\n};\n\nexport default Search;\n"],"mappings":";;AAIA,IAAMA,UAAkC,EAAE,MAAM,gBAAkD;AAiChG,QAAO,QAAQ;EAAE;EAAM;EAAW,QA/BhC,oBAAC,QAAA,EAAK,GAAE,skBAAA,CAAukB;EA+BviB,aA3BxC,oBAAC,QAAA,EAAK,GAAE,keAAA,CAAme;EA2Btb,QAvBrD,oBAAC,QAAA,EAAK,GAAE,+iBAAA,CAAgjB;EAuB3f,aAnB7D,oBAAC,QAAA,EAAK,GAAE,qkBAAA,CAAskB;EAmBpgB,SAf1E,oBAAC,QAAA;GACC,aAAU;GACV,aAAU;GACV,GAAE;IACF;EAWiF,cAPnF,oBAAC,QAAA;GACC,aAAU;GACV,aAAU;GACV,GAAE;IACF;EAG+F,CAAC;;AAGtG,IAAA,iBAAe"}

package/lib/Select.js

@@ -6,7 +6,7 @@ import { t as getAriaDescribedBy } from "./accessibility.js";
 import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
 import { n as renderLabel } from "./utils2.js";
 import { t as ChevronDown_default } from "./ChevronDown.js";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import selectStyles from "./components/Select/styles.module.scss";
 var getSelectMaxWidth = (characters) => {
@@ -16,24 +16,24 @@ var getIconColor = (invalid, disabled) => {
 	return disabled ? getColor("neutral", 500) : getColor(invalid ? "cherry" : "blueberry", 600);
 };
 const Select = (props) => {
-	const { className, children, concept = "normal", disabled, error, errorText, errorTextId: errorTextIdProp, selectId: selectIdProp, errorWrapperClassName, label, name = props.selectId, onColor = FormOnColor.onwhite, testId, width, required, value, defaultValue, autoComplete = "off", wrapperClassName, ref, ...rest } = props;
+	const { className, children, concept = "normal", disabled, error, errorText, errorTextId: errorTextIdProp, selectId: selectIdProp, errorWrapperClassName, label, name = props.selectId, onColor = FormOnColor.onwhite, testId, width, required, value, defaultValue, autoComplete = "off", wrapperClassName, ref, labelClassName, ...rest } = props;
 	const selectId = useIdWithFallback(selectIdProp);
 	const errorTextId = useIdWithFallback(errorTextIdProp);
 	const onBlueberry = onColor === "onblueberry";
 	const invalid = onColor === "oninvalid" || !!errorText || !!error;
 	const iconColor = getIconColor(invalid, !!disabled);
 	const maxWidth = width ? getSelectMaxWidth(width) : void 0;
-	const selectInnerWrapperClasses = classNames(selectStyles["select-inner-wrapper"], {
+	const selectInnerWrapperClasses = cn(selectStyles["select-inner-wrapper"], {
 		[selectStyles["select-inner-wrapper--transparent"]]: concept === "transparent",
 		[selectStyles["select-inner-wrapper--on-blueberry"]]: onBlueberry,
 		[selectStyles["select-inner-wrapper--invalid"]]: invalid,
 		[selectStyles["select-inner-wrapper--disabled"]]: disabled
 	}, className);
-	const selectClasses = classNames(selectStyles.select, {
+	const selectClasses = cn(selectStyles.select, {
 		[selectStyles["select--on-blueberry"]]: onBlueberry,
 		[selectStyles["select--invalid"]]: invalid
 	});
-	const selectWrapperClasses = classNames(selectStyles["select-wrapper"], wrapperClassName);
+	const selectWrapperClasses = cn(selectStyles["select-wrapper"], wrapperClassName);
 	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
 		className: errorWrapperClassName,
 		errorText,
@@ -46,7 +46,8 @@ const Select = (props) => {
 			children: [renderLabel({
 				label,
 				inputId: selectId,
-				onColor
+				onColor,
+				className: labelClassName
 			}), /* @__PURE__ */ jsxs("div", {
 				className: selectInnerWrapperClasses,
 				"data-testid": testId + "-inner-wrapper",

package/lib/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["Select: React.FC<SelectProps>"],"sources":["../src/components/Select/Select.tsx","../src/components/Select/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label/utils';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n    > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  onColor?: keyof typeof FormOnColor;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: string;\n  /** Ref passed to the select element */\n  ref?: React.Ref<HTMLSelectElement | null>;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean): string => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select: React.FC<SelectProps> = props => {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    selectId: selectIdProp,\n    errorWrapperClassName,\n    label,\n    name = props.selectId,\n    onColor = FormOnColor.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    wrapperClassName,\n    ref,\n    ...rest\n  } = props;\n\n  const selectId = useIdWithFallback(selectIdProp);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onBlueberry = onColor === 'onblueberry';\n  const invalid = onColor === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel({ label: label, inputId: selectId, onColor: onColor as FormOnColor })}\n        <div className={selectInnerWrapperClasses} data-testid={testId + '-inner-wrapper'}>\n          <Icon\n            className={selectStyles['select-arrow']}\n            svgIcon={ChevronDown}\n            color={iconColor}\n            size={IconSize.XSmall}\n            testId={testId + '-icon'}\n          />\n          <select\n            {...rest}\n            aria-invalid={!!invalid}\n            id={selectId}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={getAriaDescribedBy(props, errorTextId)}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            autoComplete={autoComplete ? autoComplete : undefined}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nexport default Select;\n","import Select from './Select';\nexport * from './Select';\nexport default Select;\n"],"mappings":";;;;;;;;;;;AAsDA,IAAM,qBAAqB,eAA+B;AAGxD,QAAO,QAAQ,aAAA,GAAwC;;AAGzD,IAAM,gBAAgB,SAAkB,aAA8B;AAEpE,QAAO,WAAW,SAAS,WAAW,IAAI,GAAG,SAD3B,UAAU,WAAW,aAC0B,IAAI;;AAGvE,MAAaA,UAAgC,UAAS;CACpD,MAAM,EACJ,WACA,UACA,UAAU,UACV,UACA,OACA,WACA,aAAa,iBACb,UAAU,cACV,uBACA,OACA,OAAO,MAAM,UACb,UAAU,YAAY,SACtB,QACA,OACA,UACA,OACA,cACA,eAAe,OACf,kBACA,KACA,GAAG,SACD;CAEJ,MAAM,WAAW,kBAAkB,aAAa;CAChD,MAAM,cAAc,kBAAkB,gBAAgB;CACtD,MAAM,cAAc,YAAY;CAChC,MAAM,UAAU,YAAY,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC;CAC5D,MAAM,YAAY,aAAa,SAAS,CAAC,CAAC,SAAS;CACnD,MAAM,WAAW,QAAQ,kBAAkB,MAAM,GAAG,KAAA;CAEpD,MAAM,4BAA4B,WAChC,aAAa,yBACb;GACG,aAAa,uCAAuC,YAAY;GAChE,aAAa,wCAAwC;GACrD,aAAa,mCAAmC;GAChD,aAAa,oCAAoC;EACnD,EACD,UACD;CAED,MAAM,gBAAgB,WAAW,aAAa,QAAQ;GACnD,aAAa,0BAA0B;GACvC,aAAa,qBAAqB;EACpC,CAAC;CAEF,MAAM,uBAAuB,WAAW,aAAa,mBAAmB,iBAAiB;AAEzF,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,qBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAQ,WAAW;GAAsB,OAAO,EAAE,UAAU;cACjH,YAAY;IAAS;IAAO,SAAS;IAAmB;IAAwB,CAAC,EAClF,qBAAC,OAAA;IAAI,WAAW;IAA2B,eAAa,SAAS;eAC/D,oBAAC,cAAA;KACC,WAAW,aAAa;KACxB,SAAS;KACT,OAAO;KACP,MAAM,SAAS;KACf,QAAQ,SAAS;MACjB,EACF,oBAAC,UAAA;KACC,GAAI;KACJ,gBAAc,CAAC,CAAC;KAChB,IAAI;KACE;KACN,WAAW;KACD;KACL;KACK;KACV,oBAAkB,mBAAmB,OAAO,YAAY;KACxD,iBAAe,CAAC,CAAC;KACV;KACO;KACd,cAAc,eAAe,eAAe,KAAA;KAE3C;MACM,CAAA;KACL,CAAA;IACF;GACO;;AChJnB,IAAA,mBDoJe"}
+{"version":3,"file":"Select.js","names":["Select: React.FC<SelectProps>"],"sources":["../src/components/Select/Select.tsx","../src/components/Select/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label/utils';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n    > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Adds custom classes to the label wrapper */\n  labelClassName?: string;\n  /** Changes the visuals of the component */\n  onColor?: keyof typeof FormOnColor;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: string;\n  /** Ref passed to the select element */\n  ref?: React.Ref<HTMLSelectElement | null>;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean): string => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select: React.FC<SelectProps> = props => {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    selectId: selectIdProp,\n    errorWrapperClassName,\n    label,\n    name = props.selectId,\n    onColor = FormOnColor.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    wrapperClassName,\n    ref,\n    labelClassName,\n    ...rest\n  } = props;\n\n  const selectId = useIdWithFallback(selectIdProp);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onBlueberry = onColor === 'onblueberry';\n  const invalid = onColor === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel({ label: label, inputId: selectId, onColor: onColor as FormOnColor, className: labelClassName })}\n        <div className={selectInnerWrapperClasses} data-testid={testId + '-inner-wrapper'}>\n          <Icon\n            className={selectStyles['select-arrow']}\n            svgIcon={ChevronDown}\n            color={iconColor}\n            size={IconSize.XSmall}\n            testId={testId + '-icon'}\n          />\n          <select\n            {...rest}\n            aria-invalid={!!invalid}\n            id={selectId}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={getAriaDescribedBy(props, errorTextId)}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            autoComplete={autoComplete ? autoComplete : undefined}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nexport default Select;\n","import Select from './Select';\nexport * from './Select';\nexport default Select;\n"],"mappings":";;;;;;;;;;;AAwDA,IAAM,qBAAqB,eAA+B;AAGxD,QAAO,QAAQ,aAAA,GAAwC;;AAGzD,IAAM,gBAAgB,SAAkB,aAA8B;AAEpE,QAAO,WAAW,SAAS,WAAW,IAAI,GAAG,SAD3B,UAAU,WAAW,aAC0B,IAAI;;AAGvE,MAAaA,UAAgC,UAAS;CACpD,MAAM,EACJ,WACA,UACA,UAAU,UACV,UACA,OACA,WACA,aAAa,iBACb,UAAU,cACV,uBACA,OACA,OAAO,MAAM,UACb,UAAU,YAAY,SACtB,QACA,OACA,UACA,OACA,cACA,eAAe,OACf,kBACA,KACA,gBACA,GAAG,SACD;CAEJ,MAAM,WAAW,kBAAkB,aAAa;CAChD,MAAM,cAAc,kBAAkB,gBAAgB;CACtD,MAAM,cAAc,YAAY;CAChC,MAAM,UAAU,YAAY,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC;CAC5D,MAAM,YAAY,aAAa,SAAS,CAAC,CAAC,SAAS;CACnD,MAAM,WAAW,QAAQ,kBAAkB,MAAM,GAAG,KAAA;CAEpD,MAAM,4BAA4B,GAChC,aAAa,yBACb;GACG,aAAa,uCAAuC,YAAY;GAChE,aAAa,wCAAwC;GACrD,aAAa,mCAAmC;GAChD,aAAa,oCAAoC;EACnD,EACD,UACD;CAED,MAAM,gBAAgB,GAAW,aAAa,QAAQ;GACnD,aAAa,0BAA0B;GACvC,aAAa,qBAAqB;EACpC,CAAC;CAEF,MAAM,uBAAuB,GAAW,aAAa,mBAAmB,iBAAiB;AAEzF,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,qBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAQ,WAAW;GAAsB,OAAO,EAAE,UAAU;cACjH,YAAY;IAAS;IAAO,SAAS;IAAmB;IAAwB,WAAW;IAAgB,CAAC,EAC7G,qBAAC,OAAA;IAAI,WAAW;IAA2B,eAAa,SAAS;eAC/D,oBAAC,cAAA;KACC,WAAW,aAAa;KACxB,SAAS;KACT,OAAO;KACP,MAAM,SAAS;KACf,QAAQ,SAAS;MACjB,EACF,oBAAC,UAAA;KACC,GAAI;KACJ,gBAAc,CAAC,CAAC;KAChB,IAAI;KACE;KACN,WAAW;KACD;KACL;KACK;KACV,oBAAkB,mBAAmB,OAAO,YAAY;KACxD,iBAAe,CAAC,CAAC;KACV;KACO;KACd,cAAc,eAAe,eAAe,KAAA;KAE3C;MACM,CAAA;KACL,CAAA;IACF;GACO;;ACnJnB,IAAA,mBDuJe"}

package/lib/SingleSelectItem.js

@@ -1,5 +1,5 @@
 import { t as AsChildSlot_default } from "./AsChildSlot.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React, { useId } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Dropdown/SingleSelect/styles.module.scss";
@@ -21,8 +21,8 @@ const SingleSelectItem = (props) => {
 		group,
 		optionValue
 	]);
-	const contentClasses = classNames(styles["single-select-item__content"], { [styles["single-select-item__content--disabled"]]: isDisabled });
-	const dotClasses = classNames(styles["single-select-item__dot"], {
+	const contentClasses = cn(styles["single-select-item__content"], { [styles["single-select-item__content--disabled"]]: isDisabled });
+	const dotClasses = cn(styles["single-select-item__dot"], {
 		[styles["single-select-item__dot--disabled"]]: isDisabled,
 		[styles["single-select-item__dot--checked"]]: isSelected
 	});

package/lib/SingleSelectItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SingleSelectItem.js","names":["SingleSelectItem: React.FC<SingleSelectItemProps>"],"sources":["../src/components/Dropdown/SingleSelect/utils.tsx","../src/components/Dropdown/SingleSelect/SingleSelectItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SingleSelectContextType } from './SingleSelect';\n\nexport const SingleSelectContext = React.createContext<SingleSelectContextType | null>(null);\n\nexport const useSingleSelect = (): SingleSelectContextType | null => React.useContext(SingleSelectContext);\n","import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { AsChildSlotHandle } from '../../AsChildSlot';\n\nimport { useSingleSelect } from './utils';\nimport AsChildSlot from '../../AsChildSlot';\n\nimport styles from './styles.module.scss';\n\nexport interface SingleSelectItemProps extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> {\n  /** The text to the singleSelectItem */\n  text?: string;\n  /** input id of the singleSelectItem */\n  inputId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** When true, onclick and keyboard events will be passed to the child Button or AnchorLink. */\n  asChild?: boolean;\n  /** Only use when asChild is set to true and only pass one child */\n  children?: React.ReactNode;\n  /** Value for this singleSelectItem option - used by the parent wrapper to keep track of the context */\n  value?: string;\n  /** aria-describedby passthrough if needed */\n  ['aria-describedby']?: string;\n  /** Marks this option as initially selected */\n  defaultSelected?: boolean;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLElement | null>;\n}\n\nexport const SingleSelectItem: React.FC<SingleSelectItemProps> = props => {\n  const { text, value, testId, asChild = false, children, disabled, defaultSelected, ref, ...rest } = props;\n\n  const generatedId = useId();\n  const inputId = props.inputId ?? generatedId;\n  const group = useSingleSelect();\n  const optionValue = typeof value === 'string' && value.length > 0 ? value : inputId;\n  const isSelected = group ? group.value === optionValue : false;\n  const isDisabled = !!disabled || !!group?.disabled;\n  const asChildSlotRef = React.useRef<AsChildSlotHandle | null>(null);\n\n  React.useEffect(() => {\n    if (defaultSelected && group && typeof group.value === 'undefined') {\n      group.onValueChange?.(optionValue);\n    }\n  }, [defaultSelected, group, optionValue]);\n\n  const contentClasses = classNames(styles['single-select-item__content'], {\n    [styles['single-select-item__content--disabled']]: isDisabled,\n  });\n  const dotClasses = classNames(styles['single-select-item__dot'], {\n    [styles['single-select-item__dot--disabled']]: isDisabled,\n    [styles['single-select-item__dot--checked']]: isSelected,\n  });\n\n  const childArray = React.Children.toArray(children).filter(React.isValidElement) as React.ReactElement[];\n  const childElement = childArray[0] ?? null;\n\n  const selectThis = (e?: React.SyntheticEvent): void => {\n    if (isDisabled) return;\n    if (group && group.value !== optionValue) {\n      group.onValueChange?.(optionValue, e);\n    }\n  };\n\n  const content = (\n    <>\n      <span className={dotClasses} aria-hidden />\n      <span>{text}</span>\n    </>\n  );\n\n  const Component = (asChild ? AsChildSlot : 'button') as React.ElementType;\n  const childWithInjectedContent = childElement ? React.cloneElement(childElement, undefined, content) : null;\n\n  const componentProps = asChild\n    ? {\n        ref: asChildSlotRef,\n        elementRef: ref,\n        className: contentClasses,\n        disabled: isDisabled,\n        onSelect: (e: React.SyntheticEvent): void => selectThis(e),\n        ariaCurrent: isSelected ? 'true' : undefined,\n        children: childWithInjectedContent,\n      }\n    : {\n        ...rest,\n        type: 'button' as const,\n        className: contentClasses,\n        disabled: isDisabled,\n        onClick: (e: React.MouseEvent<HTMLButtonElement>): void => {\n          e.preventDefault();\n          selectThis(e);\n        },\n        onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>): void => {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            selectThis(e);\n          }\n        },\n        ref: ref,\n        'aria-disabled': isDisabled || undefined,\n        'aria-current': isSelected ? 'true' : undefined,\n        children: content,\n      };\n\n  return (\n    <div data-testid={testId} className={styles['single-select-item']}>\n      <Component {...componentProps} />\n    </div>\n  );\n};\n\nSingleSelectItem.displayName = 'Dropdown.SingleSelectItem';\n\nexport default SingleSelectItem;\n"],"mappings":";;;;;AAIA,MAAa,sBAAsB,MAAM,cAA8C,KAAK;AAE5F,MAAa,wBAAwD,MAAM,WAAW,oBAAoB;AC0B1G,MAAaA,oBAAoD,UAAS;CACxE,MAAM,EAAE,MAAM,OAAO,QAAQ,UAAU,OAAO,UAAU,UAAU,iBAAiB,KAAK,GAAG,SAAS;CAEpG,MAAM,cAAc,OAAO;CAC3B,MAAM,UAAU,MAAM,WAAW;CACjC,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,cAAc,OAAO,UAAU,YAAY,MAAM,SAAS,IAAI,QAAQ;CAC5E,MAAM,aAAa,QAAQ,MAAM,UAAU,cAAc;CACzD,MAAM,aAAa,CAAC,CAAC,YAAY,CAAC,CAAC,OAAO;CAC1C,MAAM,iBAAiB,MAAM,OAAiC,KAAK;AAEnE,OAAM,gBAAgB;AACpB,MAAI,mBAAmB,SAAS,OAAO,MAAM,UAAU,YACrD,OAAM,gBAAgB,YAAY;IAEnC;EAAC;EAAiB;EAAO;EAAY,CAAC;CAEzC,MAAM,iBAAiB,WAAW,OAAO,gCAAgC,GACtE,OAAO,2CAA2C,YACpD,CAAC;CACF,MAAM,aAAa,WAAW,OAAO,4BAA4B;GAC9D,OAAO,uCAAuC;GAC9C,OAAO,sCAAsC;EAC/C,CAAC;CAGF,MAAM,eADa,MAAM,SAAS,QAAQ,SAAS,CAAC,OAAO,MAAM,eAAe,CAChD,MAAM;CAEtC,MAAM,cAAc,MAAmC;AACrD,MAAI,WAAY;AAChB,MAAI,SAAS,MAAM,UAAU,YAC3B,OAAM,gBAAgB,aAAa,EAAE;;CAIzC,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAA;EAAK,WAAW;EAAY,eAAA;GAAc,EAC3C,oBAAC,QAAA,EAAA,UAAM,MAAA,CAAY,CAAA,EAAA,CAClB;CAGL,MAAM,YAAa,UAAU,sBAAc;CAC3C,MAAM,2BAA2B,eAAe,MAAM,aAAa,cAAc,KAAA,GAAW,QAAQ,GAAG;CAEvG,MAAM,iBAAiB,UACnB;EACE,KAAK;EACL,YAAY;EACZ,WAAW;EACX,UAAU;EACV,WAAW,MAAkC,WAAW,EAAE;EAC1D,aAAa,aAAa,SAAS,KAAA;EACnC,UAAU;EACX,GACD;EACE,GAAG;EACH,MAAM;EACN,WAAW;EACX,UAAU;EACV,UAAU,MAAiD;AACzD,KAAE,gBAAgB;AAClB,cAAW,EAAE;;EAEf,YAAY,MAAoD;AAC9D,OAAI,EAAE,QAAQ,SAAS;AACrB,MAAE,gBAAgB;AAClB,eAAW,EAAE;;;EAGZ;EACL,iBAAiB,cAAc,KAAA;EAC/B,gBAAgB,aAAa,SAAS,KAAA;EACtC,UAAU;EACX;AAEL,QACE,oBAAC,OAAA;EAAI,eAAa;EAAQ,WAAW,OAAO;YAC1C,oBAAC,WAAA,EAAU,GAAI,gBAAA,CAAkB;GAC7B;;AAIV,iBAAiB,cAAc;AAE/B,IAAA,2BAAe"}
+{"version":3,"file":"SingleSelectItem.js","names":["SingleSelectItem: React.FC<SingleSelectItemProps>"],"sources":["../src/components/Dropdown/SingleSelect/utils.tsx","../src/components/Dropdown/SingleSelect/SingleSelectItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SingleSelectContextType } from './SingleSelect';\n\nexport const SingleSelectContext = React.createContext<SingleSelectContextType | null>(null);\n\nexport const useSingleSelect = (): SingleSelectContextType | null => React.useContext(SingleSelectContext);\n","import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { AsChildSlotHandle } from '../../AsChildSlot';\n\nimport { useSingleSelect } from './utils';\nimport AsChildSlot from '../../AsChildSlot';\n\nimport styles from './styles.module.scss';\n\nexport interface SingleSelectItemProps extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> {\n  /** The text to the singleSelectItem */\n  text?: string;\n  /** input id of the singleSelectItem */\n  inputId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** When true, onclick and keyboard events will be passed to the child Button or AnchorLink. */\n  asChild?: boolean;\n  /** Only use when asChild is set to true and only pass one child */\n  children?: React.ReactNode;\n  /** Value for this singleSelectItem option - used by the parent wrapper to keep track of the context */\n  value?: string;\n  /** aria-describedby passthrough if needed */\n  ['aria-describedby']?: string;\n  /** Marks this option as initially selected */\n  defaultSelected?: boolean;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLElement | null>;\n}\n\nexport const SingleSelectItem: React.FC<SingleSelectItemProps> = props => {\n  const { text, value, testId, asChild = false, children, disabled, defaultSelected, ref, ...rest } = props;\n\n  const generatedId = useId();\n  const inputId = props.inputId ?? generatedId;\n  const group = useSingleSelect();\n  const optionValue = typeof value === 'string' && value.length > 0 ? value : inputId;\n  const isSelected = group ? group.value === optionValue : false;\n  const isDisabled = !!disabled || !!group?.disabled;\n  const asChildSlotRef = React.useRef<AsChildSlotHandle | null>(null);\n\n  React.useEffect(() => {\n    if (defaultSelected && group && typeof group.value === 'undefined') {\n      group.onValueChange?.(optionValue);\n    }\n  }, [defaultSelected, group, optionValue]);\n\n  const contentClasses = classNames(styles['single-select-item__content'], {\n    [styles['single-select-item__content--disabled']]: isDisabled,\n  });\n  const dotClasses = classNames(styles['single-select-item__dot'], {\n    [styles['single-select-item__dot--disabled']]: isDisabled,\n    [styles['single-select-item__dot--checked']]: isSelected,\n  });\n\n  const childArray = React.Children.toArray(children).filter(React.isValidElement) as React.ReactElement[];\n  const childElement = childArray[0] ?? null;\n\n  const selectThis = (e?: React.SyntheticEvent): void => {\n    if (isDisabled) return;\n    if (group && group.value !== optionValue) {\n      group.onValueChange?.(optionValue, e);\n    }\n  };\n\n  const content = (\n    <>\n      <span className={dotClasses} aria-hidden />\n      <span>{text}</span>\n    </>\n  );\n\n  const Component = (asChild ? AsChildSlot : 'button') as React.ElementType;\n  const childWithInjectedContent = childElement ? React.cloneElement(childElement, undefined, content) : null;\n\n  const componentProps = asChild\n    ? {\n        ref: asChildSlotRef,\n        elementRef: ref,\n        className: contentClasses,\n        disabled: isDisabled,\n        onSelect: (e: React.SyntheticEvent): void => selectThis(e),\n        ariaCurrent: isSelected ? 'true' : undefined,\n        children: childWithInjectedContent,\n      }\n    : {\n        ...rest,\n        type: 'button' as const,\n        className: contentClasses,\n        disabled: isDisabled,\n        onClick: (e: React.MouseEvent<HTMLButtonElement>): void => {\n          e.preventDefault();\n          selectThis(e);\n        },\n        onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>): void => {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            selectThis(e);\n          }\n        },\n        ref: ref,\n        'aria-disabled': isDisabled || undefined,\n        'aria-current': isSelected ? 'true' : undefined,\n        children: content,\n      };\n\n  return (\n    <div data-testid={testId} className={styles['single-select-item']}>\n      <Component {...componentProps} />\n    </div>\n  );\n};\n\nSingleSelectItem.displayName = 'Dropdown.SingleSelectItem';\n\nexport default SingleSelectItem;\n"],"mappings":";;;;;AAIA,MAAa,sBAAsB,MAAM,cAA8C,KAAK;AAE5F,MAAa,wBAAwD,MAAM,WAAW,oBAAoB;AC0B1G,MAAaA,oBAAoD,UAAS;CACxE,MAAM,EAAE,MAAM,OAAO,QAAQ,UAAU,OAAO,UAAU,UAAU,iBAAiB,KAAK,GAAG,SAAS;CAEpG,MAAM,cAAc,OAAO;CAC3B,MAAM,UAAU,MAAM,WAAW;CACjC,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,cAAc,OAAO,UAAU,YAAY,MAAM,SAAS,IAAI,QAAQ;CAC5E,MAAM,aAAa,QAAQ,MAAM,UAAU,cAAc;CACzD,MAAM,aAAa,CAAC,CAAC,YAAY,CAAC,CAAC,OAAO;CAC1C,MAAM,iBAAiB,MAAM,OAAiC,KAAK;AAEnE,OAAM,gBAAgB;AACpB,MAAI,mBAAmB,SAAS,OAAO,MAAM,UAAU,YACrD,OAAM,gBAAgB,YAAY;IAEnC;EAAC;EAAiB;EAAO;EAAY,CAAC;CAEzC,MAAM,iBAAiB,GAAW,OAAO,gCAAgC,GACtE,OAAO,2CAA2C,YACpD,CAAC;CACF,MAAM,aAAa,GAAW,OAAO,4BAA4B;GAC9D,OAAO,uCAAuC;GAC9C,OAAO,sCAAsC;EAC/C,CAAC;CAGF,MAAM,eADa,MAAM,SAAS,QAAQ,SAAS,CAAC,OAAO,MAAM,eAAe,CAChD,MAAM;CAEtC,MAAM,cAAc,MAAmC;AACrD,MAAI,WAAY;AAChB,MAAI,SAAS,MAAM,UAAU,YAC3B,OAAM,gBAAgB,aAAa,EAAE;;CAIzC,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAA;EAAK,WAAW;EAAY,eAAA;GAAc,EAC3C,oBAAC,QAAA,EAAA,UAAM,MAAA,CAAY,CAAA,EAAA,CAClB;CAGL,MAAM,YAAa,UAAU,sBAAc;CAC3C,MAAM,2BAA2B,eAAe,MAAM,aAAa,cAAc,KAAA,GAAW,QAAQ,GAAG;CAEvG,MAAM,iBAAiB,UACnB;EACE,KAAK;EACL,YAAY;EACZ,WAAW;EACX,UAAU;EACV,WAAW,MAAkC,WAAW,EAAE;EAC1D,aAAa,aAAa,SAAS,KAAA;EACnC,UAAU;EACX,GACD;EACE,GAAG;EACH,MAAM;EACN,WAAW;EACX,UAAU;EACV,UAAU,MAAiD;AACzD,KAAE,gBAAgB;AAClB,cAAW,EAAE;;EAEf,YAAY,MAAoD;AAC9D,OAAI,EAAE,QAAQ,SAAS;AACrB,MAAE,gBAAgB;AAClB,eAAW,EAAE;;;EAGZ;EACL,iBAAiB,cAAc,KAAA;EAC/B,gBAAgB,aAAa,SAAS,KAAA;EACtC,UAAU;EACX;AAEL,QACE,oBAAC,OAAA;EAAI,eAAa;EAAQ,WAAW,OAAO;YAC1C,oBAAC,WAAA,EAAU,GAAI,gBAAA,CAAkB;GAC7B;;AAIV,iBAAiB,cAAc;AAE/B,IAAA,2BAAe"}

package/lib/Slider.js

@@ -6,7 +6,7 @@ import { n as getAriaLabelAttributes } from "./accessibility.js";
 import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
 import { t as useSize } from "./useSize.js";
 import { t as Title_default } from "./Title2.js";
-import classNames from "classnames";
+import cn from "classnames";
 import { useEffect, useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Slider/styles.module.scss";
@@ -238,13 +238,13 @@ const Slider = (props) => {
 						renderEmojies(),
 						/* @__PURE__ */ jsxs("div", {
 							ref: trackRef,
-							className: classNames(styles["slider__track-wrapper"], disabled && styles["slider__track-wrapper--disabled"]),
+							className: cn(styles["slider__track-wrapper"], disabled && styles["slider__track-wrapper--disabled"]),
 							onPointerDown: handlePointerDown,
 							children: [/* @__PURE__ */ jsx("div", {
-								className: classNames(styles.slider__track, disabled && styles["slider__track--disabled"]),
+								className: cn(styles.slider__track, disabled && styles["slider__track--disabled"]),
 								children: renderSteps()
 							}), /* @__PURE__ */ jsx("div", {
-								className: classNames(styles.slider__marker, {
+								className: cn(styles.slider__marker, {
 									[styles["slider__marker--disabled"]]: disabled,
 									[styles["slider__marker--selected"]]: selectedState,
 									[styles["slider__marker--invalid"]]: invalid,

package/lib/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["Slider: React.FC<SliderProps>","handleKeyDown: React.KeyboardEventHandler<HTMLDivElement>","handleTrackClick: React.MouseEventHandler<HTMLDivElement>","handlePointerDown: React.PointerEventHandler<HTMLDivElement>"],"sources":["../src/components/Slider/Slider.tsx","../src/components/Slider/index.ts"],"sourcesContent":["import { useEffect, useState, useRef, useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n  const [prevMin, setPrevMin] = useState(min);\n  const [prevMax, setPrevMax] = useState(max);\n\n  const getSafeValue = (newValue: number): number => {\n    if (newValue > max) {\n      return max;\n    }\n    if (newValue < min) {\n      return min;\n    }\n    return newValue;\n  };\n\n  const setSafeValue = (newValue: number): void => {\n    setValue(getSafeValue(newValue));\n  };\n\n  if (min !== prevMin || max !== prevMax) {\n    setPrevMin(min);\n    setPrevMax(max);\n    const safeValue = getSafeValue(initial);\n    if (safeValue !== value) {\n      setValue(safeValue);\n    }\n  }\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\nexport interface SliderProps\n  extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'onChange' | 'onBlur'> {\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */\n  selected?: boolean;\n  /** Sets the steps data for the slider */\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the value of the slider */\n  value?: number;\n  /** Ref passed to component */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const Slider: React.FC<SliderProps> = props => {\n  const {\n    title,\n    ariaLabel,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    labelLeft,\n    labelRight,\n    disabled = false,\n    onChange,\n    steps,\n    step = 1,\n    minValue = 0,\n    maxValue = steps ? steps.length - 1 : 100,\n    selected = true,\n    testId,\n    value,\n    ref,\n    ...rest\n  } = props;\n\n  const [isMoving, setIsMoving] = useState(false);\n  const [selectedState, setSelectedState] = useState(typeof value === 'undefined' ? selected : true);\n  const [valueState, setValueState] = useSafeNumberValue(\n    typeof value === 'undefined' ? (maxValue - minValue) / 2 + minValue : value,\n    minValue,\n    maxValue\n  );\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const baseId = useId();\n  const titleId = 'title-' + baseId;\n  const labelLeftId = 'label-' + baseId;\n  const labelRightId = 'label-right-' + baseId;\n  const trackRef = useRef<HTMLDivElement>(null);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n  const invalid = !!errorText || !!error;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return (): void => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValueState(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return (): void => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (value !== valueState && typeof value !== 'undefined') {\n      handleSelected();\n      setValueState(value);\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (typeof value === 'undefined' && selected !== selectedState) {\n      setSelectedState(selected);\n    }\n  }, [selected]);\n\n  const handleSelected = (): void => {\n    if (selectedState === false) {\n      setSelectedState(true);\n    }\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValueState(valueState - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValueState(valueState - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValueState(valueState + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValueState(valueState + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValueState(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValueState(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      handleSelected();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValueState(newValue);\n    refObject.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    handleTrackClick(e);\n    setIsMoving(true);\n    handleSelected();\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    refObject.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (valueState - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((valueState - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPositionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  useEffect(() => {\n    if (selectedState && onChange) {\n      onChange({\n        target: {\n          name: props.name,\n          value: valueState,\n        },\n      } as unknown as React.ChangeEvent<HTMLInputElement>);\n    }\n  }, [valueState, selectedState]);\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPositionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <input\n        aria-valuetext={getAriaValueText()}\n        className={styles['sr-only-slider']}\n        disabled={disabled}\n        min={minValue}\n        max={maxValue}\n        onChange={onChange}\n        onKeyDown={handleKeyDown}\n        value={valueState}\n        ref={mergedRefs}\n        type=\"range\"\n        {...rest}\n        {...ariaLabelAttributes}\n      />\n      <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n        {title && (\n          <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n            {title}\n          </Title>\n        )}\n        <div className={styles['slider__content-container']}>\n          {renderEmojies()}\n          {/* Slider streken er klikkbar med mus/touch */}\n          <div\n            ref={trackRef}\n            className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n            onPointerDown={handlePointerDown}\n          >\n            <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n            <div\n              className={classNames(styles.slider__marker, {\n                [styles['slider__marker--disabled']]: disabled,\n                [styles['slider__marker--selected']]: selectedState,\n                [styles['slider__marker--invalid']]: invalid,\n                [styles['slider__marker--focused']]: !disabled && isFocused,\n              })}\n              style={{\n                left: `${markerXPos}px`,\n              }}\n            />\n          </div>\n          {renderStepLabels()}\n        </div>\n        {(labelLeft || labelRight) && (\n          <span className={styles.slider__options}>\n            <span id={labelLeftId}>{labelLeft}</span>\n            <span id={labelRightId}>{labelRight}</span>\n          </span>\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n","import Slider from './Slider';\nexport * from './Slider';\nexport default Slider;\n"],"mappings":"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"}
+{"version":3,"file":"Slider.js","names":["Slider: React.FC<SliderProps>","handleKeyDown: React.KeyboardEventHandler<HTMLDivElement>","handleTrackClick: React.MouseEventHandler<HTMLDivElement>","handlePointerDown: React.PointerEventHandler<HTMLDivElement>"],"sources":["../src/components/Slider/Slider.tsx","../src/components/Slider/index.ts"],"sourcesContent":["import { useEffect, useState, useRef, useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n  const [prevMin, setPrevMin] = useState(min);\n  const [prevMax, setPrevMax] = useState(max);\n\n  const getSafeValue = (newValue: number): number => {\n    if (newValue > max) {\n      return max;\n    }\n    if (newValue < min) {\n      return min;\n    }\n    return newValue;\n  };\n\n  const setSafeValue = (newValue: number): void => {\n    setValue(getSafeValue(newValue));\n  };\n\n  if (min !== prevMin || max !== prevMax) {\n    setPrevMin(min);\n    setPrevMax(max);\n    const safeValue = getSafeValue(initial);\n    if (safeValue !== value) {\n      setValue(safeValue);\n    }\n  }\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\nexport interface SliderProps\n  extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'onChange' | 'onBlur'> {\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */\n  selected?: boolean;\n  /** Sets the steps data for the slider */\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the value of the slider */\n  value?: number;\n  /** Ref passed to component */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const Slider: React.FC<SliderProps> = props => {\n  const {\n    title,\n    ariaLabel,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    errorWrapperClassName,\n    labelLeft,\n    labelRight,\n    disabled = false,\n    onChange,\n    steps,\n    step = 1,\n    minValue = 0,\n    maxValue = steps ? steps.length - 1 : 100,\n    selected = true,\n    testId,\n    value,\n    ref,\n    ...rest\n  } = props;\n\n  const [isMoving, setIsMoving] = useState(false);\n  const [selectedState, setSelectedState] = useState(typeof value === 'undefined' ? selected : true);\n  const [valueState, setValueState] = useSafeNumberValue(\n    typeof value === 'undefined' ? (maxValue - minValue) / 2 + minValue : value,\n    minValue,\n    maxValue\n  );\n\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const baseId = useId();\n  const titleId = 'title-' + baseId;\n  const labelLeftId = 'label-' + baseId;\n  const labelRightId = 'label-right-' + baseId;\n  const trackRef = useRef<HTMLDivElement>(null);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n  const invalid = !!errorText || !!error;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return (): void => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValueState(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return (): void => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (value !== valueState && typeof value !== 'undefined') {\n      handleSelected();\n      setValueState(value);\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (typeof value === 'undefined' && selected !== selectedState) {\n      setSelectedState(selected);\n    }\n  }, [selected]);\n\n  const handleSelected = (): void => {\n    if (selectedState === false) {\n      setSelectedState(true);\n    }\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValueState(valueState - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValueState(valueState - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValueState(valueState + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValueState(valueState + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValueState(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValueState(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      handleSelected();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValueState(newValue);\n    refObject.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    handleTrackClick(e);\n    setIsMoving(true);\n    handleSelected();\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    refObject.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (valueState - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((valueState - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPositionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  useEffect(() => {\n    if (selectedState && onChange) {\n      onChange({\n        target: {\n          name: props.name,\n          value: valueState,\n        },\n      } as unknown as React.ChangeEvent<HTMLInputElement>);\n    }\n  }, [valueState, selectedState]);\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPositionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <input\n        aria-valuetext={getAriaValueText()}\n        className={styles['sr-only-slider']}\n        disabled={disabled}\n        min={minValue}\n        max={maxValue}\n        onChange={onChange}\n        onKeyDown={handleKeyDown}\n        value={valueState}\n        ref={mergedRefs}\n        type=\"range\"\n        {...rest}\n        {...ariaLabelAttributes}\n      />\n      <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n        {title && (\n          <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n            {title}\n          </Title>\n        )}\n        <div className={styles['slider__content-container']}>\n          {renderEmojies()}\n          {/* Slider streken er klikkbar med mus/touch */}\n          <div\n            ref={trackRef}\n            className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n            onPointerDown={handlePointerDown}\n          >\n            <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n            <div\n              className={classNames(styles.slider__marker, {\n                [styles['slider__marker--disabled']]: disabled,\n                [styles['slider__marker--selected']]: selectedState,\n                [styles['slider__marker--invalid']]: invalid,\n                [styles['slider__marker--focused']]: !disabled && isFocused,\n              })}\n              style={{\n                left: `${markerXPos}px`,\n              }}\n            />\n          </div>\n          {renderStepLabels()}\n        </div>\n        {(labelLeft || labelRight) && (\n          <span className={styles.slider__options}>\n            <span id={labelLeftId}>{labelLeft}</span>\n            <span id={labelRightId}>{labelRight}</span>\n          </span>\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n","import Slider from './Slider';\nexport * from './Slider';\nexport default Slider;\n"],"mappings":"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"}

package/lib/Spacer.js

@@ -1,11 +1,11 @@
 import { n as AnalyticsId } from "./constants2.js";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx } from "react/jsx-runtime";
 import spacerStyles from "./components/Spacer/styles.module.scss";
 var Spacer = (props) => {
 	const { size = "s", className, testId, ref } = props;
 	return /* @__PURE__ */ jsx("span", {
-		className: classNames(spacerStyles.spacer, {
+		className: cn(spacerStyles.spacer, {
 			[spacerStyles["spacer--4xs"]]: size === "4xs",
 			[spacerStyles["spacer--3xs"]]: size === "3xs",
 			[spacerStyles["spacer--2xs"]]: size === "2xs",

package/lib/Spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","names":["Spacer: React.FC<SpacerProps>"],"sources":["../src/components/Spacer/Spacer.tsx","../src/components/Spacer/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { SpacerSizes } from './../../theme/spacers';\n\nimport { AnalyticsId } from '../../constants';\n\nimport spacerStyles from './styles.module.scss';\n\nexport interface SpacerProps {\n  /** Sets the size of the spacer. */\n  size?: SpacerSizes;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLElement | null>;\n}\n\nconst Spacer: React.FC<SpacerProps> = (props: SpacerProps) => {\n  const { size = 's', className, testId, ref } = props;\n  const spacerClasses = classNames(\n    spacerStyles.spacer,\n    {\n      [spacerStyles['spacer--4xs']]: size === '4xs',\n      [spacerStyles['spacer--3xs']]: size === '3xs',\n      [spacerStyles['spacer--2xs']]: size === '2xs',\n      [spacerStyles['spacer--xs']]: size === 'xs',\n      [spacerStyles['spacer--s']]: size === 's',\n      [spacerStyles['spacer--m']]: size === 'm',\n      [spacerStyles['spacer--l']]: size === 'l',\n      [spacerStyles['spacer--xl']]: size === 'xl',\n      [spacerStyles['spacer--2xl']]: size === '2xl',\n      [spacerStyles['spacer--3xl']]: size === '3xl',\n      [spacerStyles['spacer--4xl']]: size === '4xl',\n      [spacerStyles['spacer--5xl']]: size === '5xl',\n      [spacerStyles['spacer--6xl']]: size === '6xl',\n    },\n    className\n  );\n\n  return <span className={spacerClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Spacer}></span>;\n};\n\nexport default Spacer;\n","import Spacer from './Spacer';\nexport * from './Spacer';\nexport default Spacer;\n"],"mappings":";;;;AAmBA,IAAMA,UAAiC,UAAuB;CAC5D,MAAM,EAAE,OAAO,KAAK,WAAW,QAAQ,QAAQ;AAqB/C,QAAO,oBAAC,QAAA;EAAK,WApBS,WACpB,aAAa,QACb;IACG,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,gBAAgB,SAAS;IACtC,aAAa,eAAe,SAAS;IACrC,aAAa,eAAe,SAAS;IACrC,aAAa,eAAe,SAAS;IACrC,aAAa,gBAAgB,SAAS;IACtC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;GACzC,EACD,UACD;EAE2C;EAAK,eAAa;EAAQ,oBAAkB,YAAY;GAAe;;ACvCrH,IAAA,mBD0Ce"}
+{"version":3,"file":"Spacer.js","names":["Spacer: React.FC<SpacerProps>"],"sources":["../src/components/Spacer/Spacer.tsx","../src/components/Spacer/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { SpacerSizes } from './../../theme/spacers';\n\nimport { AnalyticsId } from '../../constants';\n\nimport spacerStyles from './styles.module.scss';\n\nexport interface SpacerProps {\n  /** Sets the size of the spacer. */\n  size?: SpacerSizes;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLElement | null>;\n}\n\nconst Spacer: React.FC<SpacerProps> = (props: SpacerProps) => {\n  const { size = 's', className, testId, ref } = props;\n  const spacerClasses = classNames(\n    spacerStyles.spacer,\n    {\n      [spacerStyles['spacer--4xs']]: size === '4xs',\n      [spacerStyles['spacer--3xs']]: size === '3xs',\n      [spacerStyles['spacer--2xs']]: size === '2xs',\n      [spacerStyles['spacer--xs']]: size === 'xs',\n      [spacerStyles['spacer--s']]: size === 's',\n      [spacerStyles['spacer--m']]: size === 'm',\n      [spacerStyles['spacer--l']]: size === 'l',\n      [spacerStyles['spacer--xl']]: size === 'xl',\n      [spacerStyles['spacer--2xl']]: size === '2xl',\n      [spacerStyles['spacer--3xl']]: size === '3xl',\n      [spacerStyles['spacer--4xl']]: size === '4xl',\n      [spacerStyles['spacer--5xl']]: size === '5xl',\n      [spacerStyles['spacer--6xl']]: size === '6xl',\n    },\n    className\n  );\n\n  return <span className={spacerClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Spacer}></span>;\n};\n\nexport default Spacer;\n","import Spacer from './Spacer';\nexport * from './Spacer';\nexport default Spacer;\n"],"mappings":";;;;AAmBA,IAAMA,UAAiC,UAAuB;CAC5D,MAAM,EAAE,OAAO,KAAK,WAAW,QAAQ,QAAQ;AAqB/C,QAAO,oBAAC,QAAA;EAAK,WApBS,GACpB,aAAa,QACb;IACG,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,gBAAgB,SAAS;IACtC,aAAa,eAAe,SAAS;IACrC,aAAa,eAAe,SAAS;IACrC,aAAa,eAAe,SAAS;IACrC,aAAa,gBAAgB,SAAS;IACtC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;GACzC,EACD,UACD;EAE2C;EAAK,eAAa;EAAQ,oBAAkB,YAAY;GAAe;;ACvCrH,IAAA,mBD0Ce"}

package/lib/StatusDot.js

@@ -1,7 +1,7 @@
 import { a as IconSize, n as AnalyticsId, r as FormOnColor } from "./constants2.js";
 import { t as getColor } from "./color.js";
 import { r as LazyIcon } from "./LazyIcon.js";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/StatusDot/styles.module.scss";
 let StatusDotOnColor = /* @__PURE__ */ function(StatusDotOnColor$1) {
@@ -37,7 +37,7 @@ var StatusDotIcon = ({ onColor, variant = "info" }) => {
 		color: onColor === StatusDotOnColor.ondark ? getColor("white") : getColor("black"),
 		size: IconSize.XXSmall,
 		onColor,
-		className: classNames({
+		className: cn({
 			[styles[`statusdot__dot--${variant}`]]: typeof variant !== "undefined",
 			[styles["statusdot__dot--on-dark"]]: onColor === StatusDotOnColor.ondark
 		})
@@ -128,8 +128,8 @@ var StatusDotIcon = ({ onColor, variant = "info" }) => {
 };
 var StatusDot = (props) => {
 	const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId, ref } = props;
-	const statusDotClasses = classNames(styles["statusdot"], className);
-	const labelClasses = classNames(styles["statusdot__label"], { [styles["statusdot__label--on-dark"]]: onColor === StatusDotOnColor.ondark });
+	const statusDotClasses = cn(styles["statusdot"], className);
+	const labelClasses = cn(styles["statusdot__label"], { [styles["statusdot__label--on-dark"]]: onColor === StatusDotOnColor.ondark });
 	return /* @__PURE__ */ jsxs("span", {
 		id,
 		ref,

package/lib/StatusDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDot.js","names":["StatusDotIcon: React.FC<StatusDotIconProps>","StatusDot: React.FC<StatusDotProps>"],"sources":["../src/components/StatusDot/constants.ts","../src/components/StatusDot/StatusDot.tsx","../src/components/StatusDot/index.ts"],"sourcesContent":["import { FormOnColor } from '../../constants';\n\nexport enum StatusDotOnColor {\n  onwhite = FormOnColor.onwhite,\n  ondark = FormOnColor.ondark,\n}\n\nexport enum StatusDotVariant {\n  success = 'success',\n  inprocess = 'inprocess',\n  exception = 'exception',\n  unknown = 'unknown',\n  inspected = 'inspected',\n  cancelled = 'cancelled',\n  alert = 'alert',\n  transparent = 'transparent',\n  info = 'info',\n  group = 'group',\n  recurring = 'recurring',\n  noaccess = 'noaccess',\n  draft = 'draft',\n  hidden = 'hidden',\n  login = 'login',\n  attachment = 'attachment',\n  active = 'active',\n  pending = 'pending',\n  inactive = 'inactive',\n  ready = 'ready',\n}\n","import classNames from 'classnames';\n\nimport { StatusDotOnColor, StatusDotVariant } from './constants';\nimport { IconSize } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { LazyIcon } from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface StatusDotIconProps {\n  /** Defines the color of the icon */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ onColor, variant = 'info' }) => {\n  const color = onColor === StatusDotOnColor.ondark ? getColor('white') : getColor('black');\n  const iconProps = {\n    color,\n    size: IconSize.XXSmall,\n    onColor,\n    className: classNames({\n      [styles[`statusdot__dot--${variant}`]]: typeof variant !== 'undefined',\n      [styles['statusdot__dot--on-dark']]: onColor === StatusDotOnColor.ondark,\n    }),\n  };\n\n  switch (variant) {\n    case StatusDotVariant.success:\n      return <LazyIcon {...iconProps} iconName={'DotCheckmark'} />;\n    case StatusDotVariant.inprocess:\n      return <LazyIcon {...iconProps} iconName={'DotHalfDisc'} />;\n    case StatusDotVariant.exception:\n      return <LazyIcon {...iconProps} iconName={'DotTriangle'} />;\n    case StatusDotVariant.unknown:\n      return <LazyIcon {...iconProps} iconName={'DotQuestionMark'} />;\n    case StatusDotVariant.inspected:\n      return <LazyIcon {...iconProps} iconName={'DotLookingGlass'} />;\n    case StatusDotVariant.cancelled:\n      return <LazyIcon {...iconProps} iconName={'DotX'} />;\n    case StatusDotVariant.alert:\n      return <LazyIcon {...iconProps} iconName={'DotExclamationMark'} />;\n    case StatusDotVariant.transparent:\n      return <LazyIcon {...iconProps} iconName={'DotOutline'} />;\n    case StatusDotVariant.info:\n      return <LazyIcon {...iconProps} iconName={'DotInfo'} />;\n    case StatusDotVariant.group:\n      return <LazyIcon {...iconProps} iconName={'DotGroup'} />;\n    case StatusDotVariant.recurring:\n      return <LazyIcon {...iconProps} iconName={'DotCircleArrows'} />;\n    case StatusDotVariant.noaccess:\n      return <LazyIcon {...iconProps} iconName={'DotNoAccess'} />;\n    case StatusDotVariant.draft:\n      return <LazyIcon {...iconProps} iconName={'DotPencil'} />;\n    case StatusDotVariant.hidden:\n      return <LazyIcon {...iconProps} iconName={'DotNoEye'} />;\n    case StatusDotVariant.login:\n      return <LazyIcon {...iconProps} iconName={'DotLogin'} />;\n    case StatusDotVariant.attachment:\n      return <LazyIcon {...iconProps} iconName={'DotAttachment'} />;\n    case StatusDotVariant.active:\n      return <LazyIcon {...iconProps} iconName={'DotFill'} />;\n    case StatusDotVariant.pending:\n      return <LazyIcon {...iconProps} iconName={'DotDot'} />;\n    case StatusDotVariant.inactive:\n      return <LazyIcon {...iconProps} iconName={'DotOutline'} />;\n    case StatusDotVariant.ready:\n      return <LazyIcon {...iconProps} iconName={'DotOutline'} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the root element */\n  ref?: React.Ref<HTMLElement | null>;\n}\n\nexport type StatusDotType = typeof StatusDot;\nconst StatusDot: React.FC<StatusDotProps> = (props: StatusDotProps) => {\n  const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId, ref } = props;\n  const statusDotClasses = classNames(styles['statusdot'], className);\n  const labelClasses = classNames(styles['statusdot__label'], {\n    [styles['statusdot__label--on-dark']]: onColor === StatusDotOnColor.ondark,\n  });\n\n  return (\n    <span id={id} ref={ref} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={styles['statusdot__dot']} data-testid={testId + '-dot'}>\n        <StatusDotIcon onColor={onColor} variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n","import StatusDot from './StatusDot';\nexport { StatusDotOnColor, StatusDotVariant } from './constants';\nexport * from './StatusDot';\nexport default StatusDot;\n"],"mappings":"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"}
+{"version":3,"file":"StatusDot.js","names":["StatusDotIcon: React.FC<StatusDotIconProps>","StatusDot: React.FC<StatusDotProps>"],"sources":["../src/components/StatusDot/constants.ts","../src/components/StatusDot/StatusDot.tsx","../src/components/StatusDot/index.ts"],"sourcesContent":["import { FormOnColor } from '../../constants';\n\nexport enum StatusDotOnColor {\n  onwhite = FormOnColor.onwhite,\n  ondark = FormOnColor.ondark,\n}\n\nexport enum StatusDotVariant {\n  success = 'success',\n  inprocess = 'inprocess',\n  exception = 'exception',\n  unknown = 'unknown',\n  inspected = 'inspected',\n  cancelled = 'cancelled',\n  alert = 'alert',\n  transparent = 'transparent',\n  info = 'info',\n  group = 'group',\n  recurring = 'recurring',\n  noaccess = 'noaccess',\n  draft = 'draft',\n  hidden = 'hidden',\n  login = 'login',\n  attachment = 'attachment',\n  active = 'active',\n  pending = 'pending',\n  inactive = 'inactive',\n  ready = 'ready',\n}\n","import classNames from 'classnames';\n\nimport { StatusDotOnColor, StatusDotVariant } from './constants';\nimport { IconSize } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { LazyIcon } from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface StatusDotIconProps {\n  /** Defines the color of the icon */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ onColor, variant = 'info' }) => {\n  const color = onColor === StatusDotOnColor.ondark ? getColor('white') : getColor('black');\n  const iconProps = {\n    color,\n    size: IconSize.XXSmall,\n    onColor,\n    className: classNames({\n      [styles[`statusdot__dot--${variant}`]]: typeof variant !== 'undefined',\n      [styles['statusdot__dot--on-dark']]: onColor === StatusDotOnColor.ondark,\n    }),\n  };\n\n  switch (variant) {\n    case StatusDotVariant.success:\n      return <LazyIcon {...iconProps} iconName={'DotCheckmark'} />;\n    case StatusDotVariant.inprocess:\n      return <LazyIcon {...iconProps} iconName={'DotHalfDisc'} />;\n    case StatusDotVariant.exception:\n      return <LazyIcon {...iconProps} iconName={'DotTriangle'} />;\n    case StatusDotVariant.unknown:\n      return <LazyIcon {...iconProps} iconName={'DotQuestionMark'} />;\n    case StatusDotVariant.inspected:\n      return <LazyIcon {...iconProps} iconName={'DotLookingGlass'} />;\n    case StatusDotVariant.cancelled:\n      return <LazyIcon {...iconProps} iconName={'DotX'} />;\n    case StatusDotVariant.alert:\n      return <LazyIcon {...iconProps} iconName={'DotExclamationMark'} />;\n    case StatusDotVariant.transparent:\n      return <LazyIcon {...iconProps} iconName={'DotOutline'} />;\n    case StatusDotVariant.info:\n      return <LazyIcon {...iconProps} iconName={'DotInfo'} />;\n    case StatusDotVariant.group:\n      return <LazyIcon {...iconProps} iconName={'DotGroup'} />;\n    case StatusDotVariant.recurring:\n      return <LazyIcon {...iconProps} iconName={'DotCircleArrows'} />;\n    case StatusDotVariant.noaccess:\n      return <LazyIcon {...iconProps} iconName={'DotNoAccess'} />;\n    case StatusDotVariant.draft:\n      return <LazyIcon {...iconProps} iconName={'DotPencil'} />;\n    case StatusDotVariant.hidden:\n      return <LazyIcon {...iconProps} iconName={'DotNoEye'} />;\n    case StatusDotVariant.login:\n      return <LazyIcon {...iconProps} iconName={'DotLogin'} />;\n    case StatusDotVariant.attachment:\n      return <LazyIcon {...iconProps} iconName={'DotAttachment'} />;\n    case StatusDotVariant.active:\n      return <LazyIcon {...iconProps} iconName={'DotFill'} />;\n    case StatusDotVariant.pending:\n      return <LazyIcon {...iconProps} iconName={'DotDot'} />;\n    case StatusDotVariant.inactive:\n      return <LazyIcon {...iconProps} iconName={'DotOutline'} />;\n    case StatusDotVariant.ready:\n      return <LazyIcon {...iconProps} iconName={'DotOutline'} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  onColor?: keyof typeof StatusDotOnColor;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the root element */\n  ref?: React.Ref<HTMLElement | null>;\n}\n\nexport type StatusDotType = typeof StatusDot;\nconst StatusDot: React.FC<StatusDotProps> = (props: StatusDotProps) => {\n  const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId, ref } = props;\n  const statusDotClasses = classNames(styles['statusdot'], className);\n  const labelClasses = classNames(styles['statusdot__label'], {\n    [styles['statusdot__label--on-dark']]: onColor === StatusDotOnColor.ondark,\n  });\n\n  return (\n    <span id={id} ref={ref} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={styles['statusdot__dot']} data-testid={testId + '-dot'}>\n        <StatusDotIcon onColor={onColor} variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n","import StatusDot from './StatusDot';\nexport { StatusDotOnColor, StatusDotVariant } from './constants';\nexport * from './StatusDot';\nexport default StatusDot;\n"],"mappings":"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"}

package/lib/StatusDotList.js

@@ -1,12 +1,12 @@
 import { r as StatusDotVariant, t as StatusDot_default } from "./StatusDot.js";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/ElementHeader/StatusDotList/styles.module.scss";
 const StatusDotList = (props) => {
 	const { additionalText, children, className = "", testId, stacking = "horizontal", hiddenForChild = false, topStatusDot, bottomStatusDot } = props;
 	return /* @__PURE__ */ jsxs("span", {
 		"data-testid": testId,
-		className: classNames(styles["statusdotlist"], className),
+		className: cn(styles["statusdotlist"], className),
 		children: [
 			topStatusDot,
 			hiddenForChild && /* @__PURE__ */ jsx(StatusDot_default, {

package/lib/StatusDotList.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDotList.js","names":["StatusDotList: React.FC<StatusDotListProps>"],"sources":["../src/components/ElementHeader/StatusDotList/StatusDotList.tsx","../src/components/ElementHeader/StatusDotList/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { StatusDotProps } from '../../StatusDot';\n\nimport StatusDot, { StatusDotVariant } from '../../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type StatusDotListType = typeof StatusDotList;\n\nexport interface StatusDotListProps {\n  /** Additional text to the bottom statusdot */\n  additionalText?: string;\n  /** StatusDot that is under the others and outside the stacking */\n  bottomStatusDot?: React.ReactElement<StatusDotProps>;\n  /** Stacking of the statusdots  */\n  stacking?: 'vertical' | 'horizontal';\n  /** StatusDots as children */\n  children?: React.ReactNode;\n  /** Adds custom classes */\n  className?: string;\n  /** Show a hidden for child statusdot over the other */\n  hiddenForChild?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** StatusDot that is over the others and outside the stacking */\n  topStatusDot?: React.ReactElement<StatusDotProps>;\n}\n\nexport const StatusDotList: React.FC<StatusDotListProps> = props => {\n  const {\n    additionalText,\n    children,\n    className = '',\n    testId,\n    stacking = 'horizontal',\n    hiddenForChild = false,\n    topStatusDot,\n    bottomStatusDot,\n  } = props;\n\n  return (\n    <span data-testid={testId} className={cn(styles['statusdotlist'], className)}>\n      {topStatusDot}\n      {/* @todo: legg til tekst i SOT */}\n      {hiddenForChild && <StatusDot variant={StatusDotVariant.hidden} text=\"Skjult for barnet\" />}\n      <span data-stacking={stacking} className={styles['statusdotlist__children']}>\n        {children}\n      </span>\n      {bottomStatusDot}\n      {additionalText && <span className={styles['statusdotlist__additional-text']}>{additionalText}</span>}\n    </span>\n  );\n};\n\nexport default StatusDotList;\n","import StatusDotList from './StatusDotList';\nexport * from './StatusDotList';\nexport default StatusDotList;\n"],"mappings":";;;;AA6BA,MAAaA,iBAA8C,UAAS;CAClE,MAAM,EACJ,gBACA,UACA,YAAY,IACZ,QACA,WAAW,cACX,iBAAiB,OACjB,cACA,oBACE;AAEJ,QACE,qBAAC,QAAA;EAAK,eAAa;EAAQ,WAAW,WAAG,OAAO,kBAAkB,UAAU;;GACzE;GAEA,kBAAkB,oBAAC,mBAAA;IAAU,SAAS,iBAAiB;IAAQ,MAAK;KAAsB;GAC3F,oBAAC,QAAA;IAAK,iBAAe;IAAU,WAAW,OAAO;IAC9C;KACI;GACN;GACA,kBAAkB,oBAAC,QAAA;IAAK,WAAW,OAAO;cAAoC;KAAsB;;GAChG;;ACjDX,IAAA,0BDqDe"}
+{"version":3,"file":"StatusDotList.js","names":["StatusDotList: React.FC<StatusDotListProps>"],"sources":["../src/components/ElementHeader/StatusDotList/StatusDotList.tsx","../src/components/ElementHeader/StatusDotList/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { StatusDotProps } from '../../StatusDot';\n\nimport StatusDot, { StatusDotVariant } from '../../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type StatusDotListType = typeof StatusDotList;\n\nexport interface StatusDotListProps {\n  /** Additional text to the bottom statusdot */\n  additionalText?: string;\n  /** StatusDot that is under the others and outside the stacking */\n  bottomStatusDot?: React.ReactElement<StatusDotProps>;\n  /** Stacking of the statusdots  */\n  stacking?: 'vertical' | 'horizontal';\n  /** StatusDots as children */\n  children?: React.ReactNode;\n  /** Adds custom classes */\n  className?: string;\n  /** Show a hidden for child statusdot over the other */\n  hiddenForChild?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** StatusDot that is over the others and outside the stacking */\n  topStatusDot?: React.ReactElement<StatusDotProps>;\n}\n\nexport const StatusDotList: React.FC<StatusDotListProps> = props => {\n  const {\n    additionalText,\n    children,\n    className = '',\n    testId,\n    stacking = 'horizontal',\n    hiddenForChild = false,\n    topStatusDot,\n    bottomStatusDot,\n  } = props;\n\n  return (\n    <span data-testid={testId} className={cn(styles['statusdotlist'], className)}>\n      {topStatusDot}\n      {/* @todo: legg til tekst i SOT */}\n      {hiddenForChild && <StatusDot variant={StatusDotVariant.hidden} text=\"Skjult for barnet\" />}\n      <span data-stacking={stacking} className={styles['statusdotlist__children']}>\n        {children}\n      </span>\n      {bottomStatusDot}\n      {additionalText && <span className={styles['statusdotlist__additional-text']}>{additionalText}</span>}\n    </span>\n  );\n};\n\nexport default StatusDotList;\n","import StatusDotList from './StatusDotList';\nexport * from './StatusDotList';\nexport default StatusDotList;\n"],"mappings":";;;;AA6BA,MAAaA,iBAA8C,UAAS;CAClE,MAAM,EACJ,gBACA,UACA,YAAY,IACZ,QACA,WAAW,cACX,iBAAiB,OACjB,cACA,oBACE;AAEJ,QACE,qBAAC,QAAA;EAAK,eAAa;EAAQ,WAAW,GAAG,OAAO,kBAAkB,UAAU;;GACzE;GAEA,kBAAkB,oBAAC,mBAAA;IAAU,SAAS,iBAAiB;IAAQ,MAAK;KAAsB;GAC3F,oBAAC,QAAA;IAAK,iBAAe;IAAU,WAAW,OAAO;IAC9C;KACI;GACN;GACA,kBAAkB,oBAAC,QAAA;IAAK,WAAW,OAAO;cAAoC;KAAsB;;GAChG;;ACjDX,IAAA,0BDqDe"}

package/lib/StepButtons.js

@@ -1,11 +1,11 @@
 import { n as AnalyticsId } from "./constants2.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/StepButtons/styles.module.scss";
 const StepButtons = (props) => {
 	const { backButton, forwardButton, additionalButtons, cancelButton, sticky = false, testId } = props;
-	const navigationClasses = classNames(styles.stepbuttons, sticky && styles["stepbuttons--has-sticky-buttons"]);
+	const navigationClasses = cn(styles.stepbuttons, sticky && styles["stepbuttons--has-sticky-buttons"]);
 	if (backButton || forwardButton || additionalButtons || cancelButton) return /* @__PURE__ */ jsxs("div", {
 		className: navigationClasses,
 		"data-testid": testId,
@@ -15,14 +15,14 @@ const StepButtons = (props) => {
 				className: styles.stepbuttons__buttons,
 				children: [backButton && React.cloneElement(backButton, {
 					variant: "outline",
-					wrapperClassName: classNames(styles["stepbuttons__button--back"])
+					wrapperClassName: cn(styles["stepbuttons__button--back"])
 				}), forwardButton && React.cloneElement(forwardButton, {
 					variant: "fill",
-					wrapperClassName: classNames(styles["stepbuttons__button--forward"])
+					wrapperClassName: cn(styles["stepbuttons__button--forward"])
 				})]
 			}),
 			additionalButtons && /* @__PURE__ */ jsx("div", {
-				className: classNames(styles.stepbuttons__buttons, styles["stepbuttons__buttons--additional"]),
+				className: cn(styles.stepbuttons__buttons, styles["stepbuttons__buttons--additional"]),
 				children: additionalButtons
 			}),
 			cancelButton && /* @__PURE__ */ jsx("div", {

package/lib/StepButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepButtons.js","names":["StepButtons: React.FC<StepButtonsProps>"],"sources":["../src/components/StepButtons/StepButtons.tsx","../src/components/StepButtons/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ButtonProps } from '../Button';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface StepButtonsProps {\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen. Default: false  */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const StepButtons: React.FC<StepButtonsProps> = props => {\n  const { backButton, forwardButton, additionalButtons, cancelButton, sticky = false, testId } = props;\n\n  const navigationClasses = classNames(styles.stepbuttons, sticky && styles['stepbuttons--has-sticky-buttons']);\n\n  if (backButton || forwardButton || additionalButtons || cancelButton) {\n    return (\n      <div className={navigationClasses} data-testid={testId} data-analyticsid={AnalyticsId.StepButtons}>\n        {(backButton || forwardButton) && (\n          <div className={styles.stepbuttons__buttons}>\n            {backButton &&\n              React.cloneElement(backButton, {\n                variant: 'outline',\n                wrapperClassName: classNames(styles['stepbuttons__button--back']),\n              })}\n            {forwardButton &&\n              React.cloneElement(forwardButton, {\n                variant: 'fill',\n                wrapperClassName: classNames(styles['stepbuttons__button--forward']),\n              })}\n          </div>\n        )}\n        {additionalButtons && (\n          <div className={classNames(styles.stepbuttons__buttons, styles['stepbuttons__buttons--additional'])}>{additionalButtons}</div>\n        )}\n        {cancelButton && (\n          <div className={styles.stepbuttons__buttons}>\n            {React.cloneElement(cancelButton, {\n              variant: 'borderless',\n            })}\n          </div>\n        )}\n      </div>\n    );\n  }\n  return null;\n};\n\nexport default StepButtons;\n","import StepButtons from './StepButtons';\nexport * from './StepButtons';\nexport default StepButtons;\n"],"mappings":";;;;;AAyBA,MAAaA,eAA0C,UAAS;CAC9D,MAAM,EAAE,YAAY,eAAe,mBAAmB,cAAc,SAAS,OAAO,WAAW;CAE/F,MAAM,oBAAoB,WAAW,OAAO,aAAa,UAAU,OAAO,mCAAmC;AAE7G,KAAI,cAAc,iBAAiB,qBAAqB,aACtD,QACE,qBAAC,OAAA;EAAI,WAAW;EAAmB,eAAa;EAAQ,oBAAkB,YAAY;;IAClF,cAAc,kBACd,qBAAC,OAAA;IAAI,WAAW,OAAO;eACpB,cACC,MAAM,aAAa,YAAY;KAC7B,SAAS;KACT,kBAAkB,WAAW,OAAO,6BAA6B;KAClE,CAAC,EACH,iBACC,MAAM,aAAa,eAAe;KAChC,SAAS;KACT,kBAAkB,WAAW,OAAO,gCAAgC;KACrE,CAAC,CAAA;KACA;GAEP,qBACC,oBAAC,OAAA;IAAI,WAAW,WAAW,OAAO,sBAAsB,OAAO,oCAAoC;cAAG;KAAwB;GAE/H,gBACC,oBAAC,OAAA;IAAI,WAAW,OAAO;cACpB,MAAM,aAAa,cAAc,EAChC,SAAS,cACV,CAAC;KACE;;GAEJ;AAGV,QAAO;;AC1DT,IAAA,wBD6De"}
+{"version":3,"file":"StepButtons.js","names":["StepButtons: React.FC<StepButtonsProps>"],"sources":["../src/components/StepButtons/StepButtons.tsx","../src/components/StepButtons/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ButtonProps } from '../Button';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface StepButtonsProps {\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen. Default: false  */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const StepButtons: React.FC<StepButtonsProps> = props => {\n  const { backButton, forwardButton, additionalButtons, cancelButton, sticky = false, testId } = props;\n\n  const navigationClasses = classNames(styles.stepbuttons, sticky && styles['stepbuttons--has-sticky-buttons']);\n\n  if (backButton || forwardButton || additionalButtons || cancelButton) {\n    return (\n      <div className={navigationClasses} data-testid={testId} data-analyticsid={AnalyticsId.StepButtons}>\n        {(backButton || forwardButton) && (\n          <div className={styles.stepbuttons__buttons}>\n            {backButton &&\n              React.cloneElement(backButton, {\n                variant: 'outline',\n                wrapperClassName: classNames(styles['stepbuttons__button--back']),\n              })}\n            {forwardButton &&\n              React.cloneElement(forwardButton, {\n                variant: 'fill',\n                wrapperClassName: classNames(styles['stepbuttons__button--forward']),\n              })}\n          </div>\n        )}\n        {additionalButtons && (\n          <div className={classNames(styles.stepbuttons__buttons, styles['stepbuttons__buttons--additional'])}>{additionalButtons}</div>\n        )}\n        {cancelButton && (\n          <div className={styles.stepbuttons__buttons}>\n            {React.cloneElement(cancelButton, {\n              variant: 'borderless',\n            })}\n          </div>\n        )}\n      </div>\n    );\n  }\n  return null;\n};\n\nexport default StepButtons;\n","import StepButtons from './StepButtons';\nexport * from './StepButtons';\nexport default StepButtons;\n"],"mappings":";;;;;AAyBA,MAAaA,eAA0C,UAAS;CAC9D,MAAM,EAAE,YAAY,eAAe,mBAAmB,cAAc,SAAS,OAAO,WAAW;CAE/F,MAAM,oBAAoB,GAAW,OAAO,aAAa,UAAU,OAAO,mCAAmC;AAE7G,KAAI,cAAc,iBAAiB,qBAAqB,aACtD,QACE,qBAAC,OAAA;EAAI,WAAW;EAAmB,eAAa;EAAQ,oBAAkB,YAAY;;IAClF,cAAc,kBACd,qBAAC,OAAA;IAAI,WAAW,OAAO;eACpB,cACC,MAAM,aAAa,YAAY;KAC7B,SAAS;KACT,kBAAkB,GAAW,OAAO,6BAA6B;KAClE,CAAC,EACH,iBACC,MAAM,aAAa,eAAe;KAChC,SAAS;KACT,kBAAkB,GAAW,OAAO,gCAAgC;KACrE,CAAC,CAAA;KACA;GAEP,qBACC,oBAAC,OAAA;IAAI,WAAW,GAAW,OAAO,sBAAsB,OAAO,oCAAoC;cAAG;KAAwB;GAE/H,gBACC,oBAAC,OAAA;IAAI,WAAW,OAAO;cACpB,MAAM,aAAa,cAAc,EAChC,SAAS,cACV,CAAC;KACE;;GAEJ;AAGV,QAAO;;AC1DT,IAAA,wBD6De"}

package/lib/TabList.js

@@ -8,7 +8,7 @@ import { t as useIsVisible } from "./useIsVisible.js";
 import { t as ChevronLeft_default } from "./ChevronLeft.js";
 import { t as ChevronRight_default } from "./ChevronRight.js";
 import { t as useRovingFocus } from "./useRovingFocus.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React, { useEffect, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Tabs/TabList/styles.module.scss";
@@ -48,7 +48,7 @@ var TabItem = (props) => {
 		props.onTabListClick(props.index);
 		scrollToTab(props.index);
 	};
-	const tabButtonClasses = classNames(styles["tab-list__tab"], styles[`tab-list__tab--${props.color}`], {
+	const tabButtonClasses = cn(styles["tab-list__tab"], styles[`tab-list__tab--${props.color}`], {
 		[styles["tab-list__tab--selected"]]: isSelected,
 		[styles["tab-list__tab--not-selected"]]: !isSelected
 	});
@@ -96,7 +96,7 @@ var TabList = (props) => {
 	const listRef = useRef(null);
 	const tabRefs = useRef(React.Children.map(children, () => React.createRef()) || []);
 	useRovingFocus(onTabListClick, tabRefs, listRef, true);
-	const tablistClasses = classNames(styles["tab-list"], styles[`tab-list--${onColor}`]);
+	const tablistClasses = cn(styles["tab-list"], styles[`tab-list--${onColor}`]);
 	const getBackgroundColor = (onColor$1) => {
 		switch (onColor$1) {
 			case "onwhite": return "var(--color-base-background-white)";
@@ -139,14 +139,14 @@ var TabList = (props) => {
 		className: styles["tab-list-wrapper"],
 		children: [
 			shouldShowFadeStart() && /* @__PURE__ */ jsxs("div", {
-				className: classNames(styles["tab-list__start-wrapper"]),
+				className: cn(styles["tab-list__start-wrapper"]),
 				children: [/* @__PURE__ */ jsx(TabChevron_default, {
 					onClick: () => scrollInList("left"),
 					direction: "left",
 					backgroundColor: `${getBackgroundColor(onColor)}`,
 					ariaLabel: ariaLabelLeftButton
 				}), /* @__PURE__ */ jsx("div", {
-					className: classNames(styles["tab-list__fade-start"]),
+					className: cn(styles["tab-list__fade-start"]),
 					style: { backgroundColor: `${getBackgroundColor(onColor)}` }
 				})]
 			}),
@@ -169,9 +169,9 @@ var TabList = (props) => {
 				})
 			}),
 			shouldShowFadeEnd() && /* @__PURE__ */ jsxs("div", {
-				className: classNames(styles["tab-list__end-wrapper"]),
+				className: cn(styles["tab-list__end-wrapper"]),
 				children: [/* @__PURE__ */ jsx("div", {
-					className: classNames(styles["tab-list__fade-end"]),
+					className: cn(styles["tab-list__fade-end"]),
 					style: { backgroundColor: `${getBackgroundColor(onColor)}` }
 				}), /* @__PURE__ */ jsx(TabChevron_default, {
 					onClick: () => scrollInList("right"),
@@ -180,7 +180,7 @@ var TabList = (props) => {
 					ariaLabel: ariaLabelRightButton
 				})]
 			}),
-			/* @__PURE__ */ jsx("div", { className: classNames(styles["tab-list__border"]) })
+			/* @__PURE__ */ jsx("div", { className: cn(styles["tab-list__border"]) })
 		]
 	});
 };