@helsenorge/designsystem-react 2.17.0 → 3.0.1

package/components/Close/styles.module.scss

@@ -1,34 +1,42 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/_breakpoints.scss';
+@use 'sass:map';
+@import '../../scss/spacers';
+@import '../../scss/palette';
+@import '../../scss/breakpoints';
+
 .close {
   display: flex;
   align-items: center;
   justify-content: center;
-  @media (max-width: map-get($grid-breakpoints, sm)) {
+
+  @media (max-width: map.get($grid-breakpoints, sm)) {
     height: 2.375rem;
     width: 2.375rem;
   }
+
   height: 3rem;
   width: 3rem;
   padding: 0;
   border: 0;
   background-color: transparent;
   cursor: pointer;
+
   &:hover,
   &:active {
-    background-color: rgba(88, 170, 187, 0.1);
+    background-color: rgb(88 170 187 / 10%);
   }
+
   &:focus {
-    box-shadow: 0px 0px 0px 2px $black;
+    box-shadow: 0 0 0 2px $black;
     background-color: transparent;
     border-radius: 0;
     border: 0;
     outline: none;
   }
-  &:hover#{&}:hover {
-    background-color: rgba(88, 170, 187, 0.1);
+
+  &:hover {
+    background-color: rgb(88 170 187 / 10%);
   }
+
   &--small {
     height: auto;
     width: auto;

package/components/Dropdown/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAuBhD,oBAAY,YAAY;IACtB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,0BAA0B;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACjC,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAsJrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAsBhD,oBAAY,YAAY;IACtB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,0BAA0B;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACjC,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAsJrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/Dropdown/componentdata.json

@@ -1 +1 @@
-{"props":{"label":{"defaultValue":null,"description":"Label for dropdown. Synlig for skjermlesere.","name":"label","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":true,"type":{"name":"string"}},"placeholder":{"defaultValue":null,"description":"Tekst på knappen som åpner dropdownen","name":"placeholder","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":true,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Sets the dropdown content","name":"children","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"closeText":{"defaultValue":null,"description":"Close button text","name":"closeText","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"string"}},"noCloseButton":{"defaultValue":null,"description":"No close button","name":"noCloseButton","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"boolean"}},"onToggle":{"defaultValue":null,"description":"Called when dropdown is open/closed.","name":"onToggle","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"((isOpen: boolean) => void)"}},"open":{"defaultValue":null,"description":"Om dropdown er åpen","name":"open","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"boolean"}},"mode":{"defaultValue":null,"description":"Changes the visuals of the dropdown","name":"mode","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"enum","raw":"\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"oncherry\"","value":[{"value":"\"onwhite\""},{"value":"\"ongrey\""},{"value":"\"onblueberry\""},{"value":"\"oncherry\""}]}},"transparent":{"defaultValue":null,"description":"Makes the background transparent","name":"transparent","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"boolean"}},"fluid":{"defaultValue":null,"description":"Makes the background transparent","name":"fluid","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"boolean"}},"disabled":{"defaultValue":null,"description":"Makes the dropdown disabled","name":"disabled","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"boolean"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute on the dropdown button.","name":"testId","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"string"}}}}
+{"props":{"label":{"defaultValue":null,"description":"Label for dropdown. Synlig for skjermlesere.","name":"label","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":true,"type":{"name":"string"}},"placeholder":{"defaultValue":null,"description":"Tekst på knappen som åpner dropdownen","name":"placeholder","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":true,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Sets the dropdown content","name":"children","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},{"fileName":"s/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"closeText":{"defaultValue":null,"description":"Close button text","name":"closeText","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"string"}},"noCloseButton":{"defaultValue":null,"description":"No close button","name":"noCloseButton","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"boolean"}},"onToggle":{"defaultValue":null,"description":"Called when dropdown is open/closed.","name":"onToggle","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"((isOpen: boolean) => void)"}},"open":{"defaultValue":null,"description":"Om dropdown er åpen","name":"open","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"boolean"}},"mode":{"defaultValue":null,"description":"Changes the visuals of the dropdown","name":"mode","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"enum","raw":"\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"oncherry\"","value":[{"value":"\"onwhite\""},{"value":"\"ongrey\""},{"value":"\"onblueberry\""},{"value":"\"oncherry\""}]}},"transparent":{"defaultValue":null,"description":"Makes the background transparent","name":"transparent","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"boolean"}},"fluid":{"defaultValue":null,"description":"Makes the background transparent","name":"fluid","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"boolean"}},"disabled":{"defaultValue":null,"description":"Makes the dropdown disabled","name":"disabled","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"boolean"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute on the dropdown button.","name":"testId","parent":{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"},"declarations":[{"fileName":"src/components/Dropdown/Dropdown.tsx","name":"DropdownProps"}],"required":false,"type":{"name":"string"}}}}

package/components/Dropdown/index.js

@@ -1,2 +1,2 @@
-import t,{useRef as f,useState as V}from"react";import v from"classnames";import{Icon as W}from"../Icons/Icon.js";import{KeyboardEventKey as r,AnalyticsId as X,IconSize as j}from"../../constants.js";import{theme as C}from"../../theme/index.js";import"../../hooks/useBreakpoint.js";import{useHover as q}from"../../hooks/useHover.js";import{useSize as F}from"../../hooks/useSize.js";import{useToggle as G}from"../../hooks/useToggle.js";import{useKeyboardEvent as J}from"../../hooks/useKeyboardEvent.js";import{useOutsideEvent as Q}from"../../hooks/useOutsideEvent.js";import{useUuid as g}from"../../hooks/useUuid.js";import e from"./styles.module.scss";import Y from"../Icons/PlusSmall.js";import{B as Z}from"../../Button.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../utils/debounce.js";import"../../hooks/usePrevious.js";import"../../theme/currys/color.js";import"../../hooks/useIcons.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";var M=(s=>(s.onwhite="onwhite",s.ongrey="ongrey",s.onblueberry="onblueberry",s.oncherry="oncherry",s))(M||{});const Ce=s=>{const{label:R,placeholder:A,closeText:K="Lukk",noCloseButton:S=!1,onToggle:$,open:H=!1,children:_,mode:d="onwhite",transparent:O=!1,fluid:y=!1,testId:z,disabled:c}=s,p=f(null),b=f(null),{hoverRef:m,isHovered:B}=q(),{value:a,toggleValue:w}=G(!c&&H,$),i=f(t.Children.map(_,()=>t.createRef())),[h,L]=V(),{width:T}=F(m)||{},E=g(),x=g(),I=g(),N=()=>{var o;w(),(o=b.current)==null||o.focus()},u=()=>{var o;w(),(o=m.current)==null||o.focus()};J(p,o=>{var k;if(o.preventDefault(),!i.current)return;if(a){if(o.key===r.Escape&&a){u();return}}else{N();return}const l=i.current.findIndex(P=>P.current===o.target);let n=l;o.key===r.Home?n=0:o.key===r.End?n=i.current.length-1:o.key===r.ArrowDown&&l<i.current.length-1?n=l+1:o.key===r.ArrowUp&&l>0?n=l-1:o.key===r.Enter&&l!==-1&&(n=l),n!==-1&&((k=i.current[n].current)==null||k.focus(),L(n))},[r.ArrowDown,r.ArrowUp,r.End,r.Enter,r.Escape,r.Home]),Q(p,()=>a&&u());const U=v(e.dropdown__toggle,!c&&{[e["dropdown__toggle--on-white"]]:d==="onwhite",[e["dropdown__toggle--on-grey"]]:d==="ongrey",[e["dropdown__toggle--on-blueberry"]]:d==="onblueberry",[e["dropdown__toggle--on-cherry"]]:d==="oncherry",[e["dropdown__toggle--transparent"]]:O,[e["dropdown__toggle--fluid"]]:y,[e["dropdown__toggle--open"]]:a}),D=v(e.dropdown__content,a&&e["dropdown__content--open"]);return t.createElement("div",{className:e.dropdown,ref:p},t.createElement("span",{id:E,className:e.dropdown__label},R),t.createElement("button",{type:"button",onClick:()=>!a&&N(),className:U,ref:m,"data-testid":z,"data-analyticsid":X.Dropdown,disabled:c,"aria-labelledby":x,"aria-haspopup":"listbox","aria-expanded":a},t.createElement("span",{id:x,className:e.dropdown__toggle__label},A),t.createElement(W,{color:c?C.palette.neutral500:C.palette.blueberry600,svgIcon:Y,className:e.dropdown__icon,isHovered:B,size:j.XSmall})),t.createElement("div",{className:D,style:{width:y?"100%":`${T}px`}},t.createElement("ul",{className:e.dropdown__options,role:"listbox","aria-labelledby":E,tabIndex:-1,"aria-activedescendant":typeof h<"u"?`${I}-${h}`:void 0,ref:b},t.Children.map(_,(o,l)=>{var n;return t.createElement("li",{className:e.dropdown__input,role:"option",id:`${I}-${l}`},t.cloneElement(o,{ref:(n=i.current)==null?void 0:n[l]}))})),!S&&t.createElement("div",{className:e.dropdown__close},t.createElement(Z,{onClick:u,fluid:!0,"aria-expanded":a},K))))};export{M as DropdownMode,Ce as default};
+import t,{useRef as g,useState as V}from"react";import v from"classnames";import{theme as C}from"../../theme/index.js";import"../../hooks/useBreakpoint.js";import{useHover as W}from"../../hooks/useHover.js";import{useSize as X}from"../../hooks/useSize.js";import{useToggle as j}from"../../hooks/useToggle.js";import{useKeyboardEvent as q}from"../../hooks/useKeyboardEvent.js";import{useOutsideEvent as F}from"../../hooks/useOutsideEvent.js";import{useUuid as _}from"../../hooks/useUuid.js";import{KeyboardEventKey as r,AnalyticsId as G,IconSize as J}from"../../constants.js";import{B as Q}from"../../Button.js";import{Icon as Y}from"../Icons/Icon.js";import Z from"../Icons/PlusSmall.js";import e from"./styles.module.scss";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../utils/debounce.js";import"../../hooks/usePrevious.js";import"../../uuid.js";import"../../utils/environment.js";import"../../hooks/useIcons.js";import"../../theme/currys/color.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";var M=(s=>(s.onwhite="onwhite",s.ongrey="ongrey",s.onblueberry="onblueberry",s.oncherry="oncherry",s))(M||{});const ee=s=>{const{label:R,placeholder:$,closeText:A="Lukk",noCloseButton:K=!1,onToggle:S,open:H=!1,children:y,mode:d="onwhite",transparent:O=!1,fluid:b=!1,testId:z,disabled:c}=s,p=g(null),w=g(null),{hoverRef:m,isHovered:B}=W(),{value:a,toggleValue:h}=j(!c&&H,S),i=g(t.Children.map(y,()=>t.createRef())),[u,D]=V(),{width:L}=X(m)||{},E=_(),I=_(),x=_(),N=()=>{var o;h(),(o=w.current)==null||o.focus()},f=()=>{var o;h(),(o=m.current)==null||o.focus()};q(p,o=>{var k;if(o.preventDefault(),!i.current)return;if(a){if(o.key===r.Escape&&a){f();return}}else{N();return}const n=i.current.findIndex(P=>P.current===o.target);let l=n;o.key===r.Home?l=0:o.key===r.End?l=i.current.length-1:o.key===r.ArrowDown&&n<i.current.length-1?l=n+1:o.key===r.ArrowUp&&n>0?l=n-1:o.key===r.Enter&&n!==-1&&(l=n),l!==-1&&((k=i.current[l].current)==null||k.focus(),D(l))},[r.ArrowDown,r.ArrowUp,r.End,r.Enter,r.Escape,r.Home]),F(p,()=>a&&f());const T=v(e.dropdown__toggle,!c&&{[e["dropdown__toggle--on-white"]]:d==="onwhite",[e["dropdown__toggle--on-grey"]]:d==="ongrey",[e["dropdown__toggle--on-blueberry"]]:d==="onblueberry",[e["dropdown__toggle--on-cherry"]]:d==="oncherry",[e["dropdown__toggle--transparent"]]:O,[e["dropdown__toggle--fluid"]]:b,[e["dropdown__toggle--open"]]:a}),U=v(e.dropdown__content,a&&e["dropdown__content--open"]);return t.createElement("div",{className:e.dropdown,ref:p},t.createElement("span",{id:E,className:e.dropdown__label},R),t.createElement("button",{type:"button",onClick:()=>!a&&N(),className:T,ref:m,"data-testid":z,"data-analyticsid":G.Dropdown,disabled:c,"aria-labelledby":I,"aria-haspopup":"listbox","aria-expanded":a},t.createElement("span",{id:I,className:e.dropdown__toggle__label},$),t.createElement(Y,{color:c?C.palette.neutral500:C.palette.blueberry600,svgIcon:Z,className:e.dropdown__icon,isHovered:B,size:J.XSmall})),t.createElement("div",{className:U,style:{width:b?"100%":`${L}px`}},t.createElement("ul",{className:e.dropdown__options,role:"listbox","aria-labelledby":E,tabIndex:-1,"aria-activedescendant":typeof u<"u"?`${x}-${u}`:void 0,ref:w},t.Children.map(y,(o,n)=>{var l;return t.createElement("li",{className:e.dropdown__input,role:"option",id:`${x}-${n}`,"aria-selected":n===u},t.cloneElement(o,{ref:(l=i.current)==null?void 0:l[n]}))})),!K&&t.createElement("div",{className:e.dropdown__close},t.createElement(Q,{onClick:f,fluid:!0,"aria-expanded":a},A))))},Re=ee;export{M as DropdownMode,Re as default};
 //# sourceMappingURL=index.js.map

package/components/Dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon from '../Icons';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useSize,\n  useToggle,\n  useUuid,\n} from '../..';\n\nimport styles from './styles.module.scss';\nimport PlusSmall from '../Icons/PlusSmall';\nimport Button from '../Button';\n\nexport enum DropdownMode {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n  /** Label for dropdown. Synlig for skjermlesere.  */\n  label: string;\n  /** Tekst på knappen som åpner dropdownen */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** Close button text */\n  closeText?: string;\n  /** No close button */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed. */\n  onToggle?: (isOpen: boolean) => void;\n  /** Om dropdown er åpen */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  mode?: keyof typeof DropdownMode;\n  /** Makes the background transparent */\n  transparent?: boolean;\n  /** Makes the background transparent */\n  fluid?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button. */\n  testId?: string;\n}\n\nconst Dropdown: React.FC<DropdownProps> = props => {\n  const {\n    label,\n    placeholder,\n    closeText = 'Lukk',\n    noCloseButton = false,\n    onToggle,\n    open = false,\n    children,\n    mode = DropdownMode.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n  } = props;\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const [currentIndex, setCurrentIndex] = useState<number>();\n  const { width: buttonWidth } = useSize(buttonRef) || {};\n  const labelId = useUuid();\n  const toggleLabelId = useUuid();\n  const optionIdPrefix = useUuid();\n\n  const handleOpen = () => {\n    toggleIsOpen();\n    optionsRef.current?.focus();\n  };\n\n  const handleClose = () => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  const handleKeyboardNavigation = (event: KeyboardEvent) => {\n    event.preventDefault();\n\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen();\n      return;\n    } else if (event.key === KeyboardEventKey.Escape && isOpen) {\n      handleClose();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n    if (nextIndex !== -1) {\n      inputRefList.current[nextIndex].current?.focus();\n      setCurrentIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: mode === DropdownMode.onwhite,\n      [styles['dropdown__toggle--on-grey']]: mode === DropdownMode.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: mode === DropdownMode.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: mode === DropdownMode.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={() => !isOpen && handleOpen()}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral500 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div className={contentClasses} style={{ width: fluid ? '100%' : `${buttonWidth}px` }}>\n        <ul\n          className={styles.dropdown__options}\n          role=\"listbox\"\n          aria-labelledby={labelId}\n          tabIndex={-1}\n          aria-activedescendant={typeof currentIndex !== 'undefined' ? `${optionIdPrefix}-${currentIndex}` : undefined}\n          ref={optionsRef}\n        >\n          {React.Children.map(children, (child, index) => (\n            <li className={styles.dropdown__input} role=\"option\" id={`${optionIdPrefix}-${index}`}>\n              {React.cloneElement(child as React.ReactElement, { ref: inputRefList.current?.[index] })}\n            </li>\n          ))}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose} fluid aria-expanded={isOpen}>\n              {closeText}\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"names":["DropdownMode","Dropdown","props","label","placeholder","closeText","noCloseButton","onToggle","open","children","mode","transparent","fluid","testId","disabled","dropdownRef","useRef","optionsRef","buttonRef","isHovered","useHover","isOpen","toggleIsOpen","useToggle","inputRefList","React","currentIndex","setCurrentIndex","useState","buttonWidth","useSize","labelId","useUuid","toggleLabelId","optionIdPrefix","handleOpen","_a","handleClose","useKeyboardEvent","event","KeyboardEventKey","index","x","nextIndex","useOutsideEvent","toggleClasses","classNames","styles","contentClasses","AnalyticsId","Icon","theme","PlusSmall","IconSize","child","Button"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useSize,\n  useToggle,\n  useUuid,\n} from '../..';\nimport Button from '../Button';\nimport Icon from '../Icons';\nimport PlusSmall from '../Icons/PlusSmall';\n\nimport styles from './styles.module.scss';\n\nexport enum DropdownMode {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n  /** Label for dropdown. Synlig for skjermlesere.  */\n  label: string;\n  /** Tekst på knappen som åpner dropdownen */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** Close button text */\n  closeText?: string;\n  /** No close button */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed. */\n  onToggle?: (isOpen: boolean) => void;\n  /** Om dropdown er åpen */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  mode?: keyof typeof DropdownMode;\n  /** Makes the background transparent */\n  transparent?: boolean;\n  /** Makes the background transparent */\n  fluid?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button. */\n  testId?: string;\n}\n\nconst Dropdown: React.FC<DropdownProps> = props => {\n  const {\n    label,\n    placeholder,\n    closeText = 'Lukk',\n    noCloseButton = false,\n    onToggle,\n    open = false,\n    children,\n    mode = DropdownMode.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n  } = props;\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const [currentIndex, setCurrentIndex] = useState<number>();\n  const { width: buttonWidth } = useSize(buttonRef) || {};\n  const labelId = useUuid();\n  const toggleLabelId = useUuid();\n  const optionIdPrefix = useUuid();\n\n  const handleOpen = () => {\n    toggleIsOpen();\n    optionsRef.current?.focus();\n  };\n\n  const handleClose = () => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  const handleKeyboardNavigation = (event: KeyboardEvent) => {\n    event.preventDefault();\n\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen();\n      return;\n    } else if (event.key === KeyboardEventKey.Escape && isOpen) {\n      handleClose();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n    if (nextIndex !== -1) {\n      inputRefList.current[nextIndex].current?.focus();\n      setCurrentIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: mode === DropdownMode.onwhite,\n      [styles['dropdown__toggle--on-grey']]: mode === DropdownMode.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: mode === DropdownMode.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: mode === DropdownMode.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={() => !isOpen && handleOpen()}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral500 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div className={contentClasses} style={{ width: fluid ? '100%' : `${buttonWidth}px` }}>\n        <ul\n          className={styles.dropdown__options}\n          role=\"listbox\"\n          aria-labelledby={labelId}\n          tabIndex={-1}\n          aria-activedescendant={typeof currentIndex !== 'undefined' ? `${optionIdPrefix}-${currentIndex}` : undefined}\n          ref={optionsRef}\n        >\n          {React.Children.map(children, (child, index) => (\n            <li className={styles.dropdown__input} role=\"option\" id={`${optionIdPrefix}-${index}`} aria-selected={index === currentIndex}>\n              {React.cloneElement(child as React.ReactElement, { ref: inputRefList.current?.[index] })}\n            </li>\n          ))}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose} fluid aria-expanded={isOpen}>\n              {closeText}\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"names":["DropdownMode","Dropdown","props","label","placeholder","closeText","noCloseButton","onToggle","open","children","mode","transparent","fluid","testId","disabled","dropdownRef","useRef","optionsRef","buttonRef","isHovered","useHover","isOpen","toggleIsOpen","useToggle","inputRefList","React","currentIndex","setCurrentIndex","useState","buttonWidth","useSize","labelId","useUuid","toggleLabelId","optionIdPrefix","handleOpen","_a","handleClose","useKeyboardEvent","event","KeyboardEventKey","index","x","nextIndex","useOutsideEvent","toggleClasses","classNames","styles","contentClasses","AnalyticsId","Icon","theme","PlusSmall","IconSize","child","Button","Dropdown$1"],"mappings":"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"}

package/components/Dropdown/styles.module.scss

@@ -1,14 +1,15 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/_font-settings.scss';
-@import '../../scss/_screen-reader.scss';
+@use 'sass:map';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
+@import '../../scss/screen-reader';
 
 .dropdown {
   position: relative;
 
   &__label {
-    @include sr-only();
+    @include sr-only;
   }
 
   &__toggle {
@@ -24,7 +25,7 @@
     font-size: $font-size-sm;
     line-height: 1.3rem; // Custom fordi teksten skal henge bedre sammen om den går over to linjer
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       padding: getSpacer(3xs) getSpacer(3xs) getSpacer(3xs) getSpacer(s);
       font-size: $font-size-md;
       line-height: 1.5rem;
@@ -43,10 +44,12 @@
     &--on-grey {
       border-color: $neutral700;
       background-color: $white;
+
       &:hover {
         background-color: $neutral50;
         box-shadow: 0 0 0 1px $neutral700;
       }
+
       &:focus {
         border-color: $black;
         box-shadow: 0 0 0 1px $black;
@@ -56,10 +59,12 @@
     &--on-blueberry {
       border-color: $blueberry500;
       background-color: $white;
+
       &:hover {
         background-color: $blueberry50;
         box-shadow: 0 0 0 1px $blueberry500;
       }
+
       &:focus {
         border-color: $black;
         box-shadow: 0 0 0 1px $black;
@@ -69,10 +74,12 @@
     &--on-cherry {
       border-color: $cherry500;
       background-color: $white;
+
       &:hover {
         background-color: $cherry50;
         box-shadow: 0 0 0 1px $cherry500;
       }
+
       &:focus {
         border-color: $black;
         box-shadow: 0 0 0 1px $black;
@@ -82,6 +89,7 @@
     &--open#{&}--on-white,
     &--open#{&}--on-grey {
       background-color: $neutral50;
+
       &:hover {
         background-color: $white;
       }
@@ -89,6 +97,7 @@
 
     &--open#{&}--on-blueberry {
       background-color: $blueberry50;
+
       &:hover {
         background-color: $white;
       }
@@ -96,6 +105,7 @@
 
     &--open#{&}--on-cherry {
       background-color: $cherry50;
+
       &:hover {
         background-color: $white;
       }
@@ -125,6 +135,7 @@
 
     &--transparent#{&}--open#{&}--on-grey {
       background-color: $neutral100;
+
       &:hover {
         background-color: transparent;
       }
@@ -132,6 +143,7 @@
 
     &--transparent#{&}--open#{&}--on-blueberry {
       background-color: $blueberry100;
+
       &:hover {
         background-color: transparent;
       }
@@ -139,6 +151,7 @@
 
     &--transparent#{&}--open#{&}--on-cherry {
       background-color: $cherry100;
+
       &:hover {
         background-color: transparent;
       }
@@ -150,7 +163,8 @@
 
     &__label {
       padding: getSpacer(3xs) 0;
-      @media (min-width: map-get($grid-breakpoints, md)) {
+
+      @media (min-width: map.get($grid-breakpoints, md)) {
         padding: getSpacer(2xs) 0;
       }
     }
@@ -166,10 +180,12 @@
     background-color: $white;
     margin-top: getSpacer(2xs);
     box-shadow: 0 0 0 2px $blueberry500;
+
     &--open {
       display: block;
     }
   }
+
   &__options {
     overflow-x: hidden;
     overflow-y: auto;
@@ -177,19 +193,24 @@
     list-style: none;
     padding: 0;
     margin: 0;
-    @media (min-width: map-get($grid-breakpoints, md)) {
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
       max-height: 464px;
     }
   }
+
   &__close {
     padding: getSpacer(s);
   }
+
   &__input {
     border-bottom: 1px solid $neutral300;
     padding: getSpacer(2xs) getSpacer(s) getSpacer(2xs) getSpacer(s);
-    @media (min-width: map-get($grid-breakpoints, md)) {
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
       padding: getSpacer(s);
     }
+
     &:last-child {
       border-bottom: none;
     }

package/components/Duolist/Duolist.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { TitleProps } from '../Title';
-export declare type DuolistVariants = 'normal' | 'line';
-export declare type BoldColumn = 'first' | 'second' | 'none';
-export declare type Border = 'no-border' | 'border';
-export declare type Formats = 'formatted' | 'non-formatted';
+export type DuolistVariants = 'normal' | 'line';
+export type BoldColumn = 'first' | 'second' | 'none';
+export type Border = 'no-border' | 'border';
+export type Formats = 'formatted' | 'non-formatted';
 interface DuolistProps {
     /** Determines which column is bold */
     boldColumn?: BoldColumn;

package/components/Duolist/Duolist.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Duolist.d.ts","sourceRoot":"","sources":["../../../src/components/Duolist/Duolist.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,oBAAY,eAAe,GAAG,QAAQ,GAAG,MAAM,CAAC;AAChD,oBAAY,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AACrD,oBAAY,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;AAC5C,oBAAY,OAAO,GAAG,WAAW,GAAG,eAAe,CAAC;AAEpD,UAAU,YAAY;IACpB,sCAAsC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,uCAAuC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,UAAU,iBAAiB;IACzB,sCAAsC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,oCAAoC;IACpC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4BpD,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAyD1C,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Duolist.d.ts","sourceRoot":"","sources":["../../../src/components/Duolist/Duolist.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,MAAM,CAAC;AAChD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AACrD,MAAM,MAAM,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;AAC5C,MAAM,MAAM,OAAO,GAAG,WAAW,GAAG,eAAe,CAAC;AAEpD,UAAU,YAAY;IACpB,sCAAsC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,uCAAuC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,UAAU,iBAAiB;IACzB,sCAAsC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,oCAAoC;IACpC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4BpD,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAyD1C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/components/Duolist/index.js

@@ -1,2 +1,2 @@
-import t from"react";import u from"classnames";import o from"./styles.module.scss";import{AnalyticsId as w}from"../../constants.js";import{S as B}from"../../Spacer.js";import"../Spacer/styles.module.scss";const D=c=>{const{format:n="formatted",boldColumn:a=n==="non-formatted"?"none":"first",description:d,separator:r=": ",term:l}=c,p=a==="first",f=a==="second",e=n==="non-formatted",C=u(o.duolist__dt,{[o["duolist__dt--bold"]]:p,[o["duolist__dt--non-formatted"]]:e}),_=u(o.duolist__dd,{[o["duolist__dd--bold"]]:f,[o["duolist__dd--non-formatted"]]:e}),s=()=>t.createElement(t.Fragment,null,t.createElement("dt",{"data-separator":e?r:void 0,className:C},l),t.createElement("dd",{className:_},d));return e?t.createElement("div",null,s()):t.createElement(t.Fragment,null,s())},L=c=>{const{boldColumn:n,border:a="no-border",descriptionWidth:d,label:r,format:l="formatted",separator:p,variant:f="normal",children:e,className:C,testId:_}=c,s=a==="border",b=f==="line",v=s&&(r||b),E=l==="non-formatted",F=u(o["duolist-wrapper"],{[o["duolist-wrapper--border"]]:s,[o["duolist-wrapper--extra-padding-top"]]:v},C),x=u(o.duolist,{[o["duolist--line"]]:b,[o["duolist--non-formatted"]]:E}),S=d?d+"%":"minmax(60%, 1fr)";return t.createElement("div",{className:F,"data-testid":_,"data-analyticsid":w.Duolist},r&&t.createElement(t.Fragment,null,r,t.createElement(B,null)),t.createElement("dl",{style:E?void 0:{gridTemplateColumns:`auto ${S}`},className:x},t.Children.map(e,m=>{var N,y,g;if(m===null||typeof m>"u")return;const i=m;if(i.type===D)return t.cloneElement(m,{boldColumn:(N=i.props.boldColumn)!=null?N:n,format:(y=i.props.format)!=null?y:l,separator:(g=i.props.separator)!=null?g:p})})))};export{L as Duolist,D as DuolistGroup,L as default};
+import t from"react";import u from"classnames";import{AnalyticsId as F}from"../../constants.js";import{S as x}from"../../Spacer.js";import o from"./styles.module.scss";import"../Spacer/styles.module.scss";const D=c=>{const{format:n="formatted",boldColumn:a=n==="non-formatted"?"none":"first",description:d,separator:r=": ",term:l}=c,p=a==="first",f=a==="second",e=n==="non-formatted",C=u(o.duolist__dt,{[o["duolist__dt--bold"]]:p,[o["duolist__dt--non-formatted"]]:e}),_=u(o.duolist__dd,{[o["duolist__dd--bold"]]:f,[o["duolist__dd--non-formatted"]]:e}),s=()=>t.createElement(t.Fragment,null,t.createElement("dt",{"data-separator":e?r:void 0,className:C},l),t.createElement("dd",{className:_},d));return e?t.createElement("div",null,s()):t.createElement(t.Fragment,null,s())},S=c=>{const{boldColumn:n,border:a="no-border",descriptionWidth:d,label:r,format:l="formatted",separator:p,variant:f="normal",children:e,className:C,testId:_}=c,s=a==="border",b=f==="line",N=s&&(r||b),E=l==="non-formatted",y=u(o["duolist-wrapper"],{[o["duolist-wrapper--border"]]:s,[o["duolist-wrapper--extra-padding-top"]]:N},C),g=u(o.duolist,{[o["duolist--line"]]:b,[o["duolist--non-formatted"]]:E}),v=d?d+"%":"minmax(60%, 1fr)";return t.createElement("div",{className:y,"data-testid":_,"data-analyticsid":F.Duolist},r&&t.createElement(t.Fragment,null,r,t.createElement(x,null)),t.createElement("dl",{style:E?void 0:{gridTemplateColumns:`auto ${v}`},className:g},t.Children.map(e,m=>{if(m===null||typeof m>"u")return;const i=m;if(i.type===D)return t.cloneElement(m,{boldColumn:i.props.boldColumn??n,format:i.props.format??l,separator:i.props.separator??p})})))},W=S;export{S as Duolist,D as DuolistGroup,W as default};
 //# sourceMappingURL=index.js.map

package/components/Duolist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Duolist/Duolist.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport duolistStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\nimport { TitleProps } from '../Title';\nimport Spacer from '../Spacer';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second' | 'none';\nexport type Border = 'no-border' | 'border';\nexport type Formats = 'formatted' | 'non-formatted';\n\ninterface DuolistProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Label of the Duolist */\n  border?: Border;\n  /** Label of the Duolist */\n  label?: TitleProps;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets the visual variant of the Duolist. */\n  variant?: DuolistVariants;\n  /** Sets the content of the Duolist. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Width of the description column in percentage */\n  descriptionWidth?: number;\n}\n\ninterface DuolistGroupProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Sets content of the <dd> tag. */\n  description: React.ReactNode;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets content of the <dt> tag. */\n  term: React.ReactNode;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n  const { format = 'formatted', boldColumn = format === 'non-formatted' ? 'none' : 'first', description, separator = ': ', term } = props;\n\n  const firstBold = boldColumn === 'first';\n  const secondBold = boldColumn === 'second';\n  const nonFormatted = format === 'non-formatted';\n\n  const dtClassNames = classNames(duolistStyles['duolist__dt'], {\n    [duolistStyles['duolist__dt--bold']]: firstBold,\n    [duolistStyles['duolist__dt--non-formatted']]: nonFormatted,\n  });\n  const ddClassNames = classNames(duolistStyles['duolist__dd'], {\n    [duolistStyles['duolist__dd--bold']]: secondBold,\n    [duolistStyles['duolist__dd--non-formatted']]: nonFormatted,\n  });\n\n  const renderContent = () => {\n    return (\n      <>\n        <dt data-separator={nonFormatted ? separator : undefined} className={dtClassNames}>\n          {term}\n        </dt>\n        <dd className={ddClassNames}>{description}</dd>\n      </>\n    );\n  };\n\n  return nonFormatted ? <div>{renderContent()}</div> : <>{renderContent()}</>;\n};\n\nexport const Duolist: React.FC<DuolistProps> = props => {\n  const {\n    boldColumn,\n    border = 'no-border',\n    descriptionWidth,\n    label,\n    format = 'formatted',\n    separator,\n    variant = 'normal',\n    children,\n    className,\n    testId,\n  } = props;\n\n  const hasBorder = border === 'border';\n  const hasLines = variant === 'line';\n  const extraPaddingTop = hasBorder && (label || hasLines);\n  const nonFormatted = format === 'non-formatted';\n\n  const duolistWrapperClasses = classNames(\n    duolistStyles['duolist-wrapper'],\n    {\n      [duolistStyles['duolist-wrapper--border']]: hasBorder,\n      [duolistStyles['duolist-wrapper--extra-padding-top']]: extraPaddingTop,\n    },\n    className\n  );\n\n  const duolistClasses = classNames(duolistStyles.duolist, {\n    [duolistStyles['duolist--line']]: hasLines,\n    [duolistStyles['duolist--non-formatted']]: nonFormatted,\n  });\n  const duolistColumnStyle = descriptionWidth ? descriptionWidth + '%' : 'minmax(60%, 1fr)';\n\n  return (\n    <div className={duolistWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.Duolist}>\n      {label && (\n        <>\n          {label}\n          <Spacer />\n        </>\n      )}\n      <dl style={!nonFormatted ? { gridTemplateColumns: `auto ${duolistColumnStyle}` } : undefined} className={duolistClasses}>\n        {React.Children.map(children, (child: React.ReactNode | React.ReactElement<DuolistGroupProps>) => {\n          if (child === null || typeof child === 'undefined') return;\n          const duolistGroup = child as React.ReactElement<DuolistGroupProps>;\n          if (duolistGroup.type === DuolistGroup) {\n            return React.cloneElement(child as React.ReactElement<DuolistGroupProps>, {\n              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,\n              format: duolistGroup.props.format ?? format,\n              separator: duolistGroup.props.separator ?? separator,\n            });\n          }\n        })}\n      </dl>\n    </div>\n  );\n};\n\nexport default Duolist;\n"],"names":["DuolistGroup","props","format","boldColumn","description","separator","term","firstBold","secondBold","nonFormatted","dtClassNames","classNames","duolistStyles","ddClassNames","renderContent","React","Duolist","border","descriptionWidth","label","variant","children","className","testId","hasBorder","hasLines","extraPaddingTop","duolistWrapperClasses","duolistClasses","duolistColumnStyle","AnalyticsId","Spacer","child","duolistGroup","_a","_b","_c"],"mappings":"6MAiDO,MAAMA,EAAqDC,GAAA,CAChE,KAAM,CAAE,OAAAC,EAAS,YAAa,WAAAC,EAAaD,IAAW,gBAAkB,OAAS,QAAS,YAAAE,EAAa,UAAAC,EAAY,KAAM,KAAAC,CAAA,EAASL,EAE5HM,EAAYJ,IAAe,QAC3BK,EAAaL,IAAe,SAC5BM,EAAeP,IAAW,gBAE1BQ,EAAeC,EAAWC,EAAc,YAAgB,CAC5D,CAACA,EAAc,sBAAuBL,EACtC,CAACK,EAAc,+BAAgCH,CAAA,CAChD,EACKI,EAAeF,EAAWC,EAAc,YAAgB,CAC5D,CAACA,EAAc,sBAAuBJ,EACtC,CAACI,EAAc,+BAAgCH,CAAA,CAChD,EAEKK,EAAgB,oCAGfC,EAAA,cAAA,KAAA,CAAG,iBAAgBN,EAAeJ,EAAY,OAAW,UAAWK,CAClE,EAAAJ,CACH,EACCS,EAAA,cAAA,KAAA,CAAG,UAAWF,CAAA,EAAeT,CAAY,CAC5C,EAIG,OAAAK,kBAAgB,MAAK,KAAAK,EAAgB,CAAA,EAASC,EAAA,cAAAA,EAAA,SAAA,KAAGD,EAAgB,CAAA,CAC1E,EAEaE,EAA2Cf,GAAA,CAChD,KAAA,CACJ,WAAAE,EACA,OAAAc,EAAS,YACT,iBAAAC,EACA,MAAAC,EACA,OAAAjB,EAAS,YACT,UAAAG,EACA,QAAAe,EAAU,SACV,SAAAC,EACA,UAAAC,EACA,OAAAC,CACE,EAAAtB,EAEEuB,EAAYP,IAAW,SACvBQ,EAAWL,IAAY,OACvBM,EAAkBF,IAAcL,GAASM,GACzChB,EAAeP,IAAW,gBAE1ByB,EAAwBhB,EAC5BC,EAAc,mBACd,CACE,CAACA,EAAc,4BAA6BY,EAC5C,CAACZ,EAAc,uCAAwCc,CACzD,EACAJ,CAAA,EAGIM,EAAiBjB,EAAWC,EAAc,QAAS,CACvD,CAACA,EAAc,kBAAmBa,EAClC,CAACb,EAAc,2BAA4BH,CAAA,CAC5C,EACKoB,EAAqBX,EAAmBA,EAAmB,IAAM,mBAEvE,OACGH,EAAA,cAAA,MAAA,CAAI,UAAWY,EAAuB,cAAaJ,EAAQ,mBAAkBO,EAAY,OAAA,EACvFX,GAEIJ,EAAA,cAAAA,EAAA,SAAA,KAAAI,kBACAY,EAAO,IAAA,CACV,EAEDhB,EAAA,cAAA,KAAA,CAAG,MAAQN,EAAuE,OAAxD,CAAE,oBAAqB,QAAQoB,GAAyB,EAAW,UAAWD,CAAA,EACtGb,EAAM,SAAS,IAAIM,EAAWW,GAAmE,WAC5F,GAAAA,IAAU,MAAQ,OAAOA,EAAU,IAAa,OACpD,MAAMC,EAAeD,EACjB,GAAAC,EAAa,OAASjC,EACjB,OAAAe,EAAM,aAAaiB,EAAgD,CACxE,YAAYE,EAAAD,EAAa,MAAM,aAAnB,KAAAC,EAAiC/B,EAC7C,QAAQgC,EAAAF,EAAa,MAAM,SAAnB,KAAAE,EAA6BjC,EACrC,WAAWkC,EAAAH,EAAa,MAAM,YAAnB,KAAAG,EAAgC/B,CAAA,CAC5C,CAEJ,CAAA,CACH,CACF,CAEJ"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Duolist/Duolist.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport Spacer from '../Spacer';\nimport { TitleProps } from '../Title';\n\nimport duolistStyles from './styles.module.scss';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second' | 'none';\nexport type Border = 'no-border' | 'border';\nexport type Formats = 'formatted' | 'non-formatted';\n\ninterface DuolistProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Label of the Duolist */\n  border?: Border;\n  /** Label of the Duolist */\n  label?: TitleProps;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets the visual variant of the Duolist. */\n  variant?: DuolistVariants;\n  /** Sets the content of the Duolist. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Width of the description column in percentage */\n  descriptionWidth?: number;\n}\n\ninterface DuolistGroupProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Sets content of the <dd> tag. */\n  description: React.ReactNode;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets content of the <dt> tag. */\n  term: React.ReactNode;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n  const { format = 'formatted', boldColumn = format === 'non-formatted' ? 'none' : 'first', description, separator = ': ', term } = props;\n\n  const firstBold = boldColumn === 'first';\n  const secondBold = boldColumn === 'second';\n  const nonFormatted = format === 'non-formatted';\n\n  const dtClassNames = classNames(duolistStyles['duolist__dt'], {\n    [duolistStyles['duolist__dt--bold']]: firstBold,\n    [duolistStyles['duolist__dt--non-formatted']]: nonFormatted,\n  });\n  const ddClassNames = classNames(duolistStyles['duolist__dd'], {\n    [duolistStyles['duolist__dd--bold']]: secondBold,\n    [duolistStyles['duolist__dd--non-formatted']]: nonFormatted,\n  });\n\n  const renderContent = () => {\n    return (\n      <>\n        <dt data-separator={nonFormatted ? separator : undefined} className={dtClassNames}>\n          {term}\n        </dt>\n        <dd className={ddClassNames}>{description}</dd>\n      </>\n    );\n  };\n\n  return nonFormatted ? <div>{renderContent()}</div> : <>{renderContent()}</>;\n};\n\nexport const Duolist: React.FC<DuolistProps> = props => {\n  const {\n    boldColumn,\n    border = 'no-border',\n    descriptionWidth,\n    label,\n    format = 'formatted',\n    separator,\n    variant = 'normal',\n    children,\n    className,\n    testId,\n  } = props;\n\n  const hasBorder = border === 'border';\n  const hasLines = variant === 'line';\n  const extraPaddingTop = hasBorder && (label || hasLines);\n  const nonFormatted = format === 'non-formatted';\n\n  const duolistWrapperClasses = classNames(\n    duolistStyles['duolist-wrapper'],\n    {\n      [duolistStyles['duolist-wrapper--border']]: hasBorder,\n      [duolistStyles['duolist-wrapper--extra-padding-top']]: extraPaddingTop,\n    },\n    className\n  );\n\n  const duolistClasses = classNames(duolistStyles.duolist, {\n    [duolistStyles['duolist--line']]: hasLines,\n    [duolistStyles['duolist--non-formatted']]: nonFormatted,\n  });\n  const duolistColumnStyle = descriptionWidth ? descriptionWidth + '%' : 'minmax(60%, 1fr)';\n\n  return (\n    <div className={duolistWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.Duolist}>\n      {label && (\n        <>\n          {label}\n          <Spacer />\n        </>\n      )}\n      <dl style={!nonFormatted ? { gridTemplateColumns: `auto ${duolistColumnStyle}` } : undefined} className={duolistClasses}>\n        {React.Children.map(children, (child: React.ReactNode | React.ReactElement<DuolistGroupProps>) => {\n          if (child === null || typeof child === 'undefined') return;\n          const duolistGroup = child as React.ReactElement<DuolistGroupProps>;\n          if (duolistGroup.type === DuolistGroup) {\n            return React.cloneElement(child as React.ReactElement<DuolistGroupProps>, {\n              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,\n              format: duolistGroup.props.format ?? format,\n              separator: duolistGroup.props.separator ?? separator,\n            });\n          }\n        })}\n      </dl>\n    </div>\n  );\n};\n\nexport default Duolist;\n"],"names":["DuolistGroup","props","format","boldColumn","description","separator","term","firstBold","secondBold","nonFormatted","dtClassNames","classNames","duolistStyles","ddClassNames","renderContent","React","Duolist","border","descriptionWidth","label","variant","children","className","testId","hasBorder","hasLines","extraPaddingTop","duolistWrapperClasses","duolistClasses","duolistColumnStyle","AnalyticsId","Spacer","child","duolistGroup","Duolist$1"],"mappings":"6MAmDO,MAAMA,EAAqDC,GAAA,CAChE,KAAM,CAAE,OAAAC,EAAS,YAAa,WAAAC,EAAaD,IAAW,gBAAkB,OAAS,QAAS,YAAAE,EAAa,UAAAC,EAAY,KAAM,KAAAC,CAAA,EAASL,EAE5HM,EAAYJ,IAAe,QAC3BK,EAAaL,IAAe,SAC5BM,EAAeP,IAAW,gBAE1BQ,EAAeC,EAAWC,EAAc,YAAgB,CAC5D,CAACA,EAAc,mBAAmB,CAAC,EAAGL,EACtC,CAACK,EAAc,4BAA4B,CAAC,EAAGH,CAAA,CAChD,EACKI,EAAeF,EAAWC,EAAc,YAAgB,CAC5D,CAACA,EAAc,mBAAmB,CAAC,EAAGJ,EACtC,CAACI,EAAc,4BAA4B,CAAC,EAAGH,CAAA,CAChD,EAEKK,EAAgB,oCAGfC,EAAA,cAAA,KAAA,CAAG,iBAAgBN,EAAeJ,EAAY,OAAW,UAAWK,CAClE,EAAAJ,CACH,EACCS,EAAA,cAAA,KAAA,CAAG,UAAWF,GAAeT,CAAY,CAC5C,EAIG,OAAAK,kBAAgB,MAAK,KAAAK,EAAgB,CAAA,EAASC,EAAA,cAAAA,EAAA,SAAA,KAAGD,EAAgB,CAAA,CAC1E,EAEaE,EAA2Cf,GAAA,CAChD,KAAA,CACJ,WAAAE,EACA,OAAAc,EAAS,YACT,iBAAAC,EACA,MAAAC,EACA,OAAAjB,EAAS,YACT,UAAAG,EACA,QAAAe,EAAU,SACV,SAAAC,EACA,UAAAC,EACA,OAAAC,CACE,EAAAtB,EAEEuB,EAAYP,IAAW,SACvBQ,EAAWL,IAAY,OACvBM,EAAkBF,IAAcL,GAASM,GACzChB,EAAeP,IAAW,gBAE1ByB,EAAwBhB,EAC5BC,EAAc,iBAAiB,EAC/B,CACE,CAACA,EAAc,yBAAyB,CAAC,EAAGY,EAC5C,CAACZ,EAAc,oCAAoC,CAAC,EAAGc,CACzD,EACAJ,CAAA,EAGIM,EAAiBjB,EAAWC,EAAc,QAAS,CACvD,CAACA,EAAc,eAAe,CAAC,EAAGa,EAClC,CAACb,EAAc,wBAAwB,CAAC,EAAGH,CAAA,CAC5C,EACKoB,EAAqBX,EAAmBA,EAAmB,IAAM,mBAEvE,OACGH,EAAA,cAAA,MAAA,CAAI,UAAWY,EAAuB,cAAaJ,EAAQ,mBAAkBO,EAAY,OAAA,EACvFX,GAEIJ,EAAA,cAAAA,EAAA,SAAA,KAAAI,EACAJ,EAAA,cAAAgB,EAAA,IAAO,CACV,EAEFhB,EAAA,cAAC,KAAG,CAAA,MAAQN,EAAuE,OAAxD,CAAE,oBAAqB,QAAQoB,GAAqB,EAAe,UAAWD,GACtGb,EAAM,SAAS,IAAIM,EAAWW,GAAmE,CAC5F,GAAAA,IAAU,MAAQ,OAAOA,EAAU,IAAa,OACpD,MAAMC,EAAeD,EACjB,GAAAC,EAAa,OAASjC,EACjB,OAAAe,EAAM,aAAaiB,EAAgD,CACxE,WAAYC,EAAa,MAAM,YAAc9B,EAC7C,OAAQ8B,EAAa,MAAM,QAAU/B,EACrC,UAAW+B,EAAa,MAAM,WAAa5B,CAAA,CAC5C,CAEJ,CAAA,CACH,CACF,CAEJ,EAEA6B,EAAelB"}

package/components/Duolist/styles.module.scss

@@ -1,4 +1,5 @@
-@import '../../scss/_breakpoints.scss';
+@use 'sass:map';
+@import '../../scss/breakpoints';
 @import '../../scss/font-settings';
 @import '../../scss/palette';
 @import '../../scss/spacers';
@@ -8,6 +9,7 @@
     padding: getSpacer(s) getSpacer(s) getSpacer(l);
     border: 0.062rem solid $neutral500;
   }
+
   &--extra-padding-top {
     padding-top: getSpacer(xl);
     padding-bottom: getSpacer(xl);
@@ -19,7 +21,7 @@
   margin: 0;
   display: grid;
 
-  @media (min-width: map-get($grid-breakpoints, sm)) {
+  @media (min-width: map.get($grid-breakpoints, sm)) {
     font-size: $font-size-md;
   }
 
@@ -45,7 +47,7 @@
   &__dt {
     padding-right: getSpacer(l);
 
-    @media (min-width: map-get($grid-breakpoints, sm)) {
+    @media (min-width: map.get($grid-breakpoints, sm)) {
       padding-right: 2.6669rem;
     }
 

package/components/ErrorWrapper/ErrorWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorWrapper/ErrorWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,iBAAiB;IAChC,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiBpD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ErrorWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorWrapper/ErrorWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,WAAW,iBAAiB;IAChC,oBAAoB;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiBpD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/components/ErrorWrapper/componentdata.json

@@ -1 +1 @@
-{"props":{"errorText":{"defaultValue":null,"description":"Error message","name":"errorText","parent":{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},"declarations":[{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Form component","name":"children","parent":{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},"declarations":[{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},"declarations":[{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},"declarations":[{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"}],"required":false,"type":{"name":"string"}}}}
+{"props":{"errorText":{"defaultValue":null,"description":"Error message","name":"errorText","parent":{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},"declarations":[{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Form component","name":"children","parent":{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},"declarations":[{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},{"fileName":"s/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},"declarations":[{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"},"declarations":[{"fileName":"src/components/ErrorWrapper/ErrorWrapper.tsx","name":"ErrorWrapperProps"}],"required":false,"type":{"name":"string"}}}}

package/components/ErrorWrapper/index.js

@@ -1,2 +1,2 @@
-import"../../ErrorWrapper.js";import{E as e,E as i}from"../../ErrorWrapper.js";import"react";import"classnames";import"./styles.module.scss";export{e as ErrorWrapper,i as default};
+import{E as o}from"../../ErrorWrapper.js";import{a as i}from"../../ErrorWrapper.js";import"react";import"classnames";import"./styles.module.scss";export{i as ErrorWrapper,o as default};
 //# sourceMappingURL=index.js.map

package/components/ErrorWrapper/styles.module.scss

@@ -1,11 +1,13 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/font-settings.scss';
+@use 'sass:map';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
 
 .error-wrapper {
   padding-bottom: getSpacer(m);
-  @media (min-width: map-get($grid-breakpoints, md)) {
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
     padding-bottom: getSpacer(l);
   }
 
@@ -18,7 +20,7 @@
     background-color: $cherry100;
     border-left: getSpacer(3xs) solid $cherry600;
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       margin-left: (getSpacer(m) + 0.25rem) * -1;
       margin-right: (getSpacer(m) + 0.25rem) * -1;
       padding-left: getSpacer(m);

package/components/Expander/Expander.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import { SvgIcon } from '../Icons';
 import { PaletteNames } from '../../theme/palette';
+import { SvgIcon } from '../Icons';
 export declare enum ExpanderSize {
     small = "small",
     large = "large"
 }
-export declare type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;
+export type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;
 interface ExpanderProps {
     /** Sets the trigger title */
     title: string;

package/components/Expander/Expander.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Expander.d.ts","sourceRoot":"","sources":["../../../src/components/Expander/Expander.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAGnD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAUnD,oBAAY,YAAY;IACtB,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,oBAAY,cAAc,GAAG,OAAO,CAAC,YAAY,EAAE,QAAQ,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;AAE9H,UAAU,aAAa;IACrB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iEAAiE;IACjE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,sGAAsG;IACtG,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6HrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Expander.d.ts","sourceRoot":"","sources":["../../../src/components/Expander/Expander.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAQtC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAMnD,oBAAY,YAAY;IACtB,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,YAAY,EAAE,QAAQ,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;AAE9H,UAAU,aAAa;IACrB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iEAAiE;IACjE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,sGAAsG;IACtG,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAgHrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/Expander/componentdata.json

@@ -1 +1 @@
-{"props":{"title":{"defaultValue":null,"description":"Sets the trigger title","name":"title","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":true,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Sets the expanded content","name":"children","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"size":{"defaultValue":null,"description":"Sets the size of the expander. Default: ExpanderSize.small","name":"size","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"enum","raw":"ExpanderSize","value":[{"value":"\"small\"","description":"","fullComment":"","tags":{}},{"value":"\"large\"","description":"","fullComment":"","tags":{}}]}},"color":{"defaultValue":null,"description":"Sets the background of the expander. Requires size=ExpanderSize.large.","name":"color","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"enum","raw":"ExpanderColors","value":[{"value":"\"banana\""},{"value":"\"blueberry\""},{"value":"\"cherry\""},{"value":"\"kiwi\""},{"value":"\"neutral\""},{"value":"\"plum\""},{"value":"\"white\""}]}},"svgIcon":{"defaultValue":null,"description":"Adds an icon to the expander trigger. Requires size=ExpanderSize.large.","name":"svgIcon","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"SvgIcon"}},"expanded":{"defaultValue":null,"description":"Opens or closes the expander","name":"expanded","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"boolean"}},"noNestedLine":{"defaultValue":null,"description":"Removes border to the left of the content. Requires size=ExpanderSize.small.","name":"noNestedLine","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"boolean"}},"sticky":{"defaultValue":null,"description":"Stick expander trigger to top of screen while scrolling down","name":"sticky","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"boolean"}},"onExpand":{"defaultValue":null,"description":"Called when expander is open/closed.","name":"onExpand","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"((isExpanded: boolean) => void)"}},"renderChildrenWhenClosed":{"defaultValue":null,"description":"Whether to render children when closed (in which case they are hidden with CSS). Default: false","name":"renderChildrenWhenClosed","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"boolean"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute on the expander button.","name":"testId","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"string"}}}}
+{"props":{"title":{"defaultValue":null,"description":"Sets the trigger title","name":"title","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":true,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Sets the expanded content","name":"children","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},{"fileName":"s/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"size":{"defaultValue":null,"description":"Sets the size of the expander. Default: ExpanderSize.small","name":"size","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"enum","raw":"ExpanderSize","value":[{"value":"\"small\"","description":"","fullComment":"","tags":{}},{"value":"\"large\"","description":"","fullComment":"","tags":{}}]}},"color":{"defaultValue":null,"description":"Sets the background of the expander. Requires size=ExpanderSize.large.","name":"color","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"enum","raw":"ExpanderColors","value":[{"value":"\"banana\""},{"value":"\"blueberry\""},{"value":"\"cherry\""},{"value":"\"kiwi\""},{"value":"\"neutral\""},{"value":"\"plum\""},{"value":"\"white\""}]}},"svgIcon":{"defaultValue":null,"description":"Adds an icon to the expander trigger. Requires size=ExpanderSize.large.","name":"svgIcon","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"SvgIcon"}},"expanded":{"defaultValue":null,"description":"Opens or closes the expander","name":"expanded","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"boolean"}},"noNestedLine":{"defaultValue":null,"description":"Removes border to the left of the content. Requires size=ExpanderSize.small.","name":"noNestedLine","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"boolean"}},"sticky":{"defaultValue":null,"description":"Stick expander trigger to top of screen while scrolling down","name":"sticky","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"boolean"}},"onExpand":{"defaultValue":null,"description":"Called when expander is open/closed.","name":"onExpand","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"((isExpanded: boolean) => void)"}},"renderChildrenWhenClosed":{"defaultValue":null,"description":"Whether to render children when closed (in which case they are hidden with CSS). Default: false","name":"renderChildrenWhenClosed","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"boolean"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute on the expander button.","name":"testId","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"string"}}}}

package/components/Expander/index.js

@@ -1,2 +1,2 @@
-import n,{useState as O,useRef as b,useEffect as h}from"react";import{Icon as g}from"../Icons/Icon.js";import{ZIndex as P,AnalyticsId as k,IconSize as f}from"../../constants.js";import{useHover as U}from"../../hooks/useHover.js";import{usePrevious as Z}from"../../hooks/usePrevious.js";import e from"./styles.module.scss";import s from"classnames";import $ from"../Icons/ChevronDown.js";import S from"../Icons/ChevronUp.js";import{B as j}from"../../Button.js";import{useSticky as q}from"../../hooks/useSticky.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../../hooks/useLayoutEvent.js";var F=(o=>(o.small="small",o.large="large",o))(F||{});const Ee=o=>{const{title:u,children:z,size:r="small",color:v,svgIcon:i,expanded:d=!1,noNestedLine:w=!1,sticky:R=!1,testId:E,onExpand:c,renderChildrenWhenClosed:W=!1}=o,[t,m]=O(d),B=Z(t),y=b(null),l=b(null),{isHovered:_}=U(l),{isOutsideWindow:H,isLeavingWindow:p,offsetHeight:I,contentWidth:C}=q(y,l),a=R&&t&&H;h(()=>{d!==t&&m(d)},[d]),h(()=>{c&&t!==!!B&&c(t)},[t,c]);const N=x=>n.createElement("span",{className:s(e.expander__icon,e[`expander__icon--${x}`])},n.createElement(g,{svgIcon:t?S:$,size:f.XSmall,isHovered:_})),T=s(e.expander__trigger,e[`expander__trigger--${r}`],r==="large"&&e[`expander__trigger--${v||"neutral"}`],r==="large"&&i&&e["expander__trigger--icon"],t&&e["expander__trigger--expanded"],a&&!p&&e["expander__trigger--sticky"],a&&p&&e["expander__trigger--absolute"]),X=()=>n.createElement("button",{type:"button",className:T,style:{zIndex:_||a?P.ExpanderTrigger:void 0,width:a&&C?`${C}px`:void 0},"aria-expanded":t,ref:l,onClick:()=>m(!t),"data-testid":E,"data-analyticsid":k.Expander},r==="small"&&N("left"),i&&n.createElement("span",{className:s(e.expander__icon,e["expander__icon--left"])},n.createElement(g,{svgIcon:i,size:f.XSmall,isHovered:_})),u,r==="large"&&N("right")),L=s(e.expander__button,t&&e["expander__button--expanded"],a&&!p&&e["expander__button--sticky"],a&&p&&e["expander__button--absolute"]),A=()=>n.createElement(j,{variant:"borderless",className:L,"aria-expanded":t,ref:l,onClick:()=>m(!t),testId:E,"data-analyticsid":k.Expander},n.createElement(g,{svgIcon:t?S:$,size:f.XSmall}),u),D=()=>{if(!W&&!t)return null;const x=s(e.expander__content,e[`expander__content--${r}`],r==="large"&&e[`expander__content--${v||"neutral"}`],r==="large"&&i&&e["expander__content--icon"],t&&e["expander__content--expanded"],r==="small"&&!w&&e["expander__content--nested-line"]);return n.createElement("div",{className:x},z)};return n.createElement("div",{className:e.expander,ref:y,style:{paddingTop:a&&I?`${I}px`:void 0}},r==="large"?X():A(),D())};export{F as ExpanderSize,Ee as default};
+import n,{useRef as I}from"react";import i from"classnames";import{ZIndex as A,AnalyticsId as N,IconSize as m}from"../../constants.js";import{useExpand as D}from"../../hooks/useExpand.js";import{useHover as O}from"../../hooks/useHover.js";import{useSticky as U}from"../../hooks/useSticky.js";import{B as Z}from"../../Button.js";import{Icon as x}from"../Icons/Icon.js";import b from"../Icons/ChevronDown.js";import h from"../Icons/ChevronUp.js";import e from"./styles.module.scss";import"../../hooks/usePrevious.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../utils/environment.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../../hooks/useUuid.js";import"../../uuid.js";var j=(o=>(o.small="small",o.large="large",o))(j||{});const q=o=>{const{title:_,children:$,size:r="small",color:g,svgIcon:s,expanded:k=!1,noNestedLine:z=!1,sticky:S=!1,testId:f,onExpand:w,renderChildrenWhenClosed:R=!1}=o,[t,u]=D(k,w),v=I(null),d=I(null),{isHovered:p}=O(d),{isOutsideWindow:W,isLeavingWindow:l,offsetHeight:E,contentWidth:y}=U(v,d),a=S&&t&&W,C=c=>n.createElement("span",{className:i(e.expander__icon,e[`expander__icon--${c}`])},n.createElement(x,{svgIcon:t?h:b,size:m.XSmall,isHovered:p})),B=i(e.expander__trigger,e[`expander__trigger--${r}`],r==="large"&&e[`expander__trigger--${g||"neutral"}`],r==="large"&&s&&e["expander__trigger--icon"],t&&e["expander__trigger--expanded"],a&&!l&&e["expander__trigger--sticky"],a&&l&&e["expander__trigger--absolute"]),H=()=>n.createElement("button",{type:"button",className:B,style:{zIndex:p||a?A.ExpanderTrigger:void 0,width:a&&y?`${y}px`:void 0},"aria-expanded":t,ref:d,onClick:()=>u(!t),"data-testid":f,"data-analyticsid":N.Expander},r==="small"&&C("left"),s&&n.createElement("span",{className:i(e.expander__icon,e["expander__icon--left"])},n.createElement(x,{svgIcon:s,size:m.XSmall,isHovered:p})),_,r==="large"&&C("right")),T=i(e.expander__button,t&&e["expander__button--expanded"],a&&!l&&e["expander__button--sticky"],a&&l&&e["expander__button--absolute"]),X=()=>n.createElement(Z,{variant:"borderless",className:T,"aria-expanded":t,ref:d,onClick:()=>u(!t),testId:f,"data-analyticsid":N.Expander},n.createElement(x,{svgIcon:t?h:b,size:m.XSmall}),_),L=()=>{if(!R&&!t)return null;const c=i(e.expander__content,e[`expander__content--${r}`],r==="large"&&e[`expander__content--${g||"neutral"}`],r==="large"&&s&&e["expander__content--icon"],t&&e["expander__content--expanded"],r==="small"&&!z&&e["expander__content--nested-line"]);return n.createElement("div",{className:c},$)};return n.createElement("div",{className:e.expander,ref:v,style:{paddingTop:a&&E?`${E}px`:void 0}},r==="large"?H():X(),L())},ve=q;export{j as ExpanderSize,ve as default};
 //# sourceMappingURL=index.js.map