@helsenorge/designsystem-react 1.0.0-beta76 → 1.0.0-beta80

package/components/Checkbox/componentdata.json

@@ -0,0 +1,259 @@
+{
+  "props": {
+    "className": {
+      "defaultValue": null,
+      "description": "Adds custom classes to the element.",
+      "name": "className",
+      "parent": {
+        "fileName": "src/components/Checkbox/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Checkbox/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "checked": {
+      "defaultValue": null,
+      "description": "Sets checkbox as checked",
+      "name": "checked",
+      "parent": {
+        "fileName": "src/components/Checkbox/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Checkbox/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "disabled": {
+      "defaultValue": null,
+      "description": "Disables the checkbox",
+      "name": "disabled",
+      "parent": {
+        "fileName": "src/components/Checkbox/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Checkbox/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "label": {
+      "defaultValue": null,
+      "description": "The label text next to the checkbox",
+      "name": "label",
+      "parent": {
+        "fileName": "src/components/Checkbox/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Checkbox/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": true,
+      "type": {
+        "name": "string"
+      }
+    },
+    "inputid": {
+      "defaultValue": null,
+      "description": "input id of the checkbox",
+      "name": "inputid",
+      "parent": {
+        "fileName": "src/components/Checkbox/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Checkbox/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "mode": {
+      "defaultValue": null,
+      "description": "Changes the visuals of the checkbox",
+      "name": "mode",
+      "parent": {
+        "fileName": "src/components/Checkbox/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Checkbox/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"on-white\" | \"on-blueberry\" | \"on-dark\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"on-white\""
+          },
+          {
+            "value": "\"on-blueberry\""
+          },
+          {
+            "value": "\"on-dark\""
+          }
+        ]
+      }
+    },
+    "name": {
+      "defaultValue": null,
+      "description": "Unique identifyer for the input tag",
+      "name": "name",
+      "parent": {
+        "fileName": "src/components/Checkbox/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Checkbox/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "value": {
+      "defaultValue": null,
+      "description": "Return value for the checkbox",
+      "name": "value",
+      "parent": {
+        "fileName": "src/components/Checkbox/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Checkbox/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "variant": {
+      "defaultValue": null,
+      "description": "Changes the visuals of the checkbox",
+      "name": "variant",
+      "parent": {
+        "fileName": "src/components/Checkbox/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Checkbox/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"normal\" | \"bigform\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"normal\""
+          },
+          {
+            "value": "\"bigform\""
+          }
+        ]
+      }
+    },
+    "error": {
+      "defaultValue": null,
+      "description": "Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup",
+      "name": "error",
+      "parent": {
+        "fileName": "src/components/Checkbox/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Checkbox/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "errorText": {
+      "defaultValue": null,
+      "description": "Error text to show above the component",
+      "name": "errorText",
+      "parent": {
+        "fileName": "src/components/Checkbox/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Checkbox/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "testId": {
+      "defaultValue": null,
+      "description": "Sets the data-testid attribute.",
+      "name": "testId",
+      "parent": {
+        "fileName": "src/components/Checkbox/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Checkbox/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    }
+  }
+}

package/components/Checkbox/index.d.ts

@@ -0,0 +1,3 @@
+import Checkbox from './Checkbox';
+export default Checkbox;
+//# sourceMappingURL=index.d.ts.map

package/components/Checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,eAAe,QAAQ,CAAC"}

package/components/Checkbox/index.js

@@ -0,0 +1,2 @@
+import{C as o}from"../../Checkbox-ffdd3cb7.js";export{C as default}from"../../Checkbox-ffdd3cb7.js";import"../../_rollupPluginBabelHelpers-e1c7fe69.js";import"react";import"../../index-9b84fabc.js";import"../../uuid-484288be.js";import"../../Check-6291ad09.js";import"../../constants-d1f48e8e.js";import"../../_tslib-51c8a283.js";import"../../color-acb834c6.js";import"../../index-19b48c51.js";import"../../palette-f206f488.js";import"../../grid-11a70eb7.js";import"./styles.module.scss";
+//# sourceMappingURL=index.js.map

package/components/Checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/Checkbox/styles.module.scss

@@ -0,0 +1,191 @@
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/font-settings.scss';
+
+.checkbox-errors {
+  font-size: $font-size-sm;
+  font-weight: 600;
+  color: $cherry500;
+  margin-top: 0;
+}
+
+.checkbox-wrapper {
+  &--with-error {
+    padding: getSpacer(s) getSpacer(xs) getSpacer(m);
+    background-color: $cherry50;
+    border-left: 0.25rem solid $cherry500;
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      padding: getSpacer(s) getSpacer(m) getSpacer(l);
+    }
+  }
+
+  &--with-error#{&}--bigform {
+    padding: getSpacer(m) getSpacer(m);
+  }
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: $font-size-sm;
+  margin: getSpacer(s) 0;
+
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    font-size: $font-size-md;
+  }
+
+  &--on-dark {
+    color: $white;
+  }
+
+  &--invalid {
+    color: $black;
+    padding: getSpacer(s);
+  }
+
+  &--disabled {
+    cursor: default;
+    color: $neutral400;
+  }
+
+  &--bigform {
+    margin: getSpacer(xs) 0 getSpacer(xs) 0;
+    padding: 1.68rem getSpacer(l);
+    background-color: $neutral50;
+  }
+
+  &--bigform#{&}--on-blueberry {
+    background-color: $blueberry50;
+  }
+
+  &--bigform#{&}--on-dark {
+    background-color: $blueberry800;
+  }
+
+  &--invalid,
+  &--bigform#{&}--invalid {
+    background-color: $white;
+  }
+}
+
+.checkbox-label:last-of-type {
+  margin-bottom: 0;
+}
+
+.checkbox {
+  width: 0px;
+
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -o-appearance: none;
+
+  &__icon-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: getSpacer(3xs) getSpacer(s) getSpacer(3xs) getSpacer(3xs);
+    height: 1.625rem;
+    width: 1.625rem;
+    min-width: auto !important;
+    min-height: auto !important;
+    color: $neutral700;
+    box-shadow: 0 0 0 getSpacer(3xs);
+
+    :hover > & {
+      box-shadow: 0 0 0 getSpacer(2xs);
+      background-color: $neutral100;
+    }
+
+    :active > & {
+      box-shadow: 0 0 0 getSpacer(2xs);
+      color: $black;
+    }
+
+    &--checked {
+      color: $blueberry500;
+
+      :hover > & {
+        background-color: $blueberry50;
+      }
+    }
+
+    &--on-blueberry {
+      color: $blueberry500;
+
+      :hover > & {
+        background-color: $blueberry100;
+      }
+    }
+
+    &--on-dark {
+      color: $neutral200;
+
+      :hover > & {
+        background-color: $inverted-hover;
+      }
+
+      &.checkbox__icon-wrapper--checked {
+        color: $blueberry200;
+      }
+
+      :active > & {
+        color: $white;
+      }
+    }
+
+    &--invalid {
+      color: $cherry500;
+
+      :hover > & {
+        background-color: $cherry100;
+      }
+
+      &.checkbox__icon-wrapper--checked {
+        color: $cherry500;
+      }
+
+      :active > & {
+        color: $black;
+      }
+    }
+
+    &--disabled {
+      color: $neutral400;
+      &.checkbox__icon-wrapper--checked {
+        color: $neutral400;
+      }
+      :hover > & {
+        box-shadow: 0 0 0 getSpacer(3xs);
+        background-color: transparent;
+      }
+
+      :active > & {
+        color: $neutral400;
+      }
+    }
+  }
+
+  &__icon {
+    position: relative;
+    top: 0.1rem;
+    right: 0.05rem;
+  }
+
+  &:focus {
+    & + .checkbox__icon-wrapper {
+      box-shadow: 0 0 0 getSpacer(2xs);
+      color: $black;
+
+      &--on-dark {
+        color: $white;
+      }
+
+      &--invalid {
+        color: $black;
+      }
+    }
+  }
+}

package/components/Checkbox/styles.module.scss.d.ts

@@ -0,0 +1,25 @@
+export type Styles = {
+  checkbox: string;
+  checkbox__icon: string;
+  'checkbox__icon-wrapper': string;
+  'checkbox__icon-wrapper--checked': string;
+  'checkbox__icon-wrapper--disabled': string;
+  'checkbox__icon-wrapper--invalid': string;
+  'checkbox__icon-wrapper--on-blueberry': string;
+  'checkbox__icon-wrapper--on-dark': string;
+  'checkbox-errors': string;
+  'checkbox-label': string;
+  'checkbox-label--bigform': string;
+  'checkbox-label--disabled': string;
+  'checkbox-label--invalid': string;
+  'checkbox-label--on-blueberry': string;
+  'checkbox-label--on-dark': string;
+  'checkbox-wrapper--bigform': string;
+  'checkbox-wrapper--with-error': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/ExpanderList/ExpanderList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpanderList.d.ts","sourceRoot":"","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAYnD,oBAAY,kBAAkB,GAAG,YAAY,CAAC;AAC9C,oBAAY,YAAY,GAAG,KAAK,CAAC,yBAAyB,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;AAE/G,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,yBAAyB,CAAC,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACtI,QAAQ,EAAE,YAAY,CAAC;CACxB;AAMD,UAAU,iBAAiB;IACzB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wCAAwC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,aAAK,MAAM,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;AAEzC,aAAK,aAAa,GAAG,MAAM,CACzB,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvC;IACE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CAClF,CACF,CAAC;AAmEF,eAAO,MAAM,YAAY,sBA8DC,CAAC;AAK3B,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ExpanderList.d.ts","sourceRoot":"","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAYnD,oBAAY,kBAAkB,GAAG,YAAY,CAAC;AAC9C,oBAAY,YAAY,GAAG,KAAK,CAAC,yBAAyB,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;AAE/G,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,yBAAyB,CAAC,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACtI,QAAQ,EAAE,YAAY,CAAC;CACxB;AAMD,UAAU,iBAAiB;IACzB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wCAAwC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,aAAK,MAAM,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;AAEzC,aAAK,aAAa,GAAG,MAAM,CACzB,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvC;IACE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CAClF,CACF,CAAC;AAuDF,eAAO,MAAM,YAAY,sBA8DC,CAAC;AAK3B,eAAe,YAAY,CAAC"}

package/components/ExpanderList/index.js

@@ -1,2 +1,2 @@
-import{_ as e,a as n}from"../../_rollupPluginBabelHelpers-e1c7fe69.js";import t,{useState as a,useEffect as r}from"react";import{a as i,I as l}from"../../constants-d1f48e8e.js";import{u as o}from"../../useHover-57ad4df9.js";import{u as d,B as s}from"../../useBreakpoint-a8fa8a61.js";import{c}from"../../index-9b84fabc.js";import m from"./styles.module.scss";import"../../_tslib-51c8a283.js";import"../../useWindowSize-c22d7634.js";import"../../grid-11a70eb7.js";var p=function(e){var n=e.isExtraSmall,a=e.isHovered,r=t.createElement("path",{d:"M15.049 30.277l-1.419-1.409 10.371-10.451L34.37 28.868l-1.419 1.409L24 21.257z"}),i=t.createElement("path",{d:"M24.001 10.14L36.37 22.591 34.951 24 25 13.985V35h-2V13.985L13.049 24l-1.419-1.409z"}),l=t.createElement("path",{d:"M32.577 30.115l1.793-1.779-10.371-10.451L13.63 28.336l1.793 1.779 8.576-8.644z"});return n?a?t.createElement("path",{d:"M23.999 9.043L36.897 22.02l-1.794 1.78-9.841-9.9.001 20.205h-2.526L22.736 13.9l-9.839 9.9-1.794-1.78z"}):l:a?i:r},u=function(e){var n=e.isExtraSmall,a=e.isHovered,r=t.createElement("path",{d:"M32.951 18.788l1.419 1.409-10.371 10.451L13.63 20.197l1.419-1.409L24 27.809z"}),i=t.createElement("path",{d:"M25 13v20.083l9.951-10.013 1.419 1.409L23.999 36.93 11.63 24.479l1.419-1.409L23 33.085V13z"}),l=t.createElement("path",{d:"M32.577 17.885l1.793 1.779-10.371 10.451L13.63 19.664l1.793-1.779 8.576 8.644z"});return n?a?t.createElement("path",{d:"M25 13v20.083l9.951-10.013 1.419 1.409L23.999 36.93 11.63 24.479l1.419-1.409L23 33.085V13z"}):l:a?i:r},v=t.forwardRef((function(e,a){var r,v=e.id,f=e.children,x=e.padding,E=void 0===x||x,h=e.color,_=void 0===h?"neutral":h,g=e.className,k=void 0===g?"":g,L=e.icon,N=e.large,b=void 0!==N&&N,z=e.title,j=e.isExpanded,H=void 0!==j&&j,w=e.testId,M=void 0===w?"":w,B=e.handleExpanderClick,C=o(),S=C.hoverRef,V=C.isHovered,y=d(),I=c(m["expander-list-link"],m["expander-list-link--".concat(_)],(n(r={},m["expander-list-link--closed"],!H),n(r,m["expander-list-link--large"],b),r)),O=c(m["expander-list-link__main-content"],E?m["expander-list-link__main-content--padding"]:""),P=c(m["expander-list-link__icon-container"],m["expander-list-link__icon-container--hasmargin"]);return t.createElement("li",{className:k,ref:a},t.createElement("button",{id:v,onClick:B,"data-testid":M,className:I,ref:S},t.createElement("span",{className:m["expander-list-link__link-content"]},L?t.createElement("span",{className:P},t.cloneElement(L,{className:m["expander-list-link__icon"],size:y===s.Xs?i.XSmall:i.Small,isHovered:V})):null,z),t.createElement("span",{className:m["expander-list-link__icon-container"]},t.createElement(l,{className:m["expander-list-link__icon"],size:i.XSmall,svgIcon:H?p:u,isHovered:V}))),H?t.createElement("div",{className:O},f):null)}));var f=t.forwardRef((function(i,l){var o=i.children,d=i.childPadding,s=void 0===d||d,p=i.large,u=i.isOpen,f=void 0!==u&&u,x=i.color,E=i.className,h=void 0===E?"":E,_=i.accordion,g=void 0!==_&&_,k=i.topBorder,L=void 0===k||k,N=i.bottomBorder,b=void 0===N||N,z=a({}),j=e(z,2),H=j[0],w=j[1],M=a(),B=e(M,2),C=B[0],S=B[1],V=t.Children.count(o),y=c(m["expander-list"],h);function I(e){var t,a=(null===(t=e.currentTarget)||void 0===t?void 0:t.id)||function(e,n){var t=(e.path||e.composedPath&&e.composedPath()).find((function(e){return e.tagName===n}));return t?t.id:""}(e,"BUTTON");f||(w((function(e){return g?n({},a,!e[a]):Object.assign(Object.assign({},e),n({},a,!e[a]))})),S(e.currentTarget))}return r((function(){var e,n,t,a,r;!g||!C||(e=C.getBoundingClientRect(),n=e.top,t=e.left,a=e.bottom,r=e.right,n>=0&&t>=0&&a<=(window.innerHeight||document.documentElement.clientHeight)&&r<=(window.innerWidth||document.documentElement.clientWidth))||C.scrollIntoView()}),[g,C]),t.createElement("ul",{className:y,ref:l},t.Children.map(o,(function(e,a){if(e.type===v){var r=f||H["expander-".concat(a)],i=function(e){var t;return c(m["expander-list__item"],(n(t={},m["expander-list__item--top"],0===e&&L),n(t,m["expander-list__item--no-bottom"],e===V-1&&!b),t))}(a);return t.cloneElement(e,{id:"expander-".concat(a),key:"expander-".concat(a),isExpanded:r,padding:s,color:x,large:p,"aria-expanded":r,className:i,handleExpanderClick:I})}return e})))}));f.Expander=v,v.displayName="ExpanderList.Expander";export default f;
+import{_ as e,a as t}from"../../_rollupPluginBabelHelpers-e1c7fe69.js";import n,{useState as a,useEffect as r}from"react";import{a as i,I as l}from"../../constants-d1f48e8e.js";import{u as d}from"../../useHover-57ad4df9.js";import{u as o,B as s}from"../../useBreakpoint-a8fa8a61.js";import{c}from"../../index-9b84fabc.js";import m from"./styles.module.scss";import"../../_tslib-51c8a283.js";import"../../useWindowSize-c22d7634.js";import"../../grid-11a70eb7.js";var p=function(e){var t=e.isExtraSmall,a=e.isHovered,r=n.createElement("path",{d:"M15.049 30.277l-1.419-1.409 10.371-10.451L34.37 28.868l-1.419 1.409L24 21.257z"}),i=n.createElement("path",{d:"M24.001 10.14L36.37 22.591 34.951 24 25 13.985V35h-2V13.985L13.049 24l-1.419-1.409z"}),l=n.createElement("path",{d:"M32.577 30.115l1.793-1.779-10.371-10.451L13.63 28.336l1.793 1.779 8.576-8.644z"});return t?a?n.createElement("path",{d:"M23.999 9.043L36.897 22.02l-1.794 1.78-9.841-9.9.001 20.205h-2.526L22.736 13.9l-9.839 9.9-1.794-1.78z"}):l:a?i:r},u=function(e){var t=e.isExtraSmall,a=e.isHovered,r=n.createElement("path",{d:"M32.951 18.788l1.419 1.409-10.371 10.451L13.63 20.197l1.419-1.409L24 27.809z"}),i=n.createElement("path",{d:"M25 13v20.083l9.951-10.013 1.419 1.409L23.999 36.93 11.63 24.479l1.419-1.409L23 33.085V13z"}),l=n.createElement("path",{d:"M32.577 17.885l1.793 1.779-10.371 10.451L13.63 19.664l1.793-1.779 8.576 8.644z"});return t?a?n.createElement("path",{d:"M25 13v20.083l9.951-10.013 1.419 1.409L23.999 36.93 11.63 24.479l1.419-1.409L23 33.085V13z"}):l:a?i:r},v=n.forwardRef((function(e,a){var r,v=e.id,f=e.children,E=e.padding,x=void 0===E||E,h=e.color,g=void 0===h?"neutral":h,_=e.className,L=void 0===_?"":_,k=e.icon,N=e.large,b=void 0!==N&&N,z=e.title,j=e.isExpanded,H=void 0!==j&&j,w=e.testId,M=void 0===w?"":w,B=e.handleExpanderClick,C=d(),S=C.hoverRef,V=C.isHovered,y=o(),I=c(m["expander-list-link"],m["expander-list-link--".concat(g)],(t(r={},m["expander-list-link--closed"],!H),t(r,m["expander-list-link--large"],b),r)),O=c(m["expander-list-link__main-content"],x?m["expander-list-link__main-content--padding"]:"");return n.createElement("li",{className:L,ref:a},n.createElement("button",{id:v,onClick:B,"data-testid":M,className:I,ref:S},k&&n.createElement("span",{className:m["expander-list-link__icon"]},n.cloneElement(k,{size:y===s.Xs?i.XSmall:i.Small,isHovered:V})),n.createElement("span",{className:m["expander-list-link__title"]},z),n.createElement("span",{className:m["expander-list-link__chevron"]},n.createElement(l,{size:i.XSmall,svgIcon:H?p:u,isHovered:V}))),H?n.createElement("div",{className:O},f):null)}));var f=n.forwardRef((function(i,l){var d=i.children,o=i.childPadding,s=void 0===o||o,p=i.large,u=i.isOpen,f=void 0!==u&&u,E=i.color,x=i.className,h=void 0===x?"":x,g=i.accordion,_=void 0!==g&&g,L=i.topBorder,k=void 0===L||L,N=i.bottomBorder,b=void 0===N||N,z=a({}),j=e(z,2),H=j[0],w=j[1],M=a(),B=e(M,2),C=B[0],S=B[1],V=n.Children.count(d),y=c(m["expander-list"],h);function I(e){var n,a=(null===(n=e.currentTarget)||void 0===n?void 0:n.id)||function(e,t){var n=(e.path||e.composedPath&&e.composedPath()).find((function(e){return e.tagName===t}));return n?n.id:""}(e,"BUTTON");f||(w((function(e){return _?t({},a,!e[a]):Object.assign(Object.assign({},e),t({},a,!e[a]))})),S(e.currentTarget))}return r((function(){var e,t,n,a,r;!_||!C||(e=C.getBoundingClientRect(),t=e.top,n=e.left,a=e.bottom,r=e.right,t>=0&&n>=0&&a<=(window.innerHeight||document.documentElement.clientHeight)&&r<=(window.innerWidth||document.documentElement.clientWidth))||C.scrollIntoView()}),[_,C]),n.createElement("ul",{className:y,ref:l},n.Children.map(d,(function(e,a){if(e.type===v){var r=f||H["expander-".concat(a)],i=function(e){var n;return c(m["expander-list__item"],(t(n={},m["expander-list__item--top"],0===e&&k),t(n,m["expander-list__item--no-bottom"],e===V-1&&!b),n))}(a);return n.cloneElement(e,{id:"expander-".concat(a),key:"expander-".concat(a),isExpanded:r,padding:s,color:E,large:p,"aria-expanded":r,className:i,handleExpanderClick:I})}return e})))}));f.Expander=v,v.displayName="ExpanderList.Expander";export default f;
 //# sourceMappingURL=index.js.map

package/components/ExpanderList/styles.module.scss

@@ -116,7 +116,7 @@
     line-height: $lineheight-size-lg;
   }
 
-  &__link-content {
+  &__title {
     color: $black;
     display: flex;
     align-items: center;
@@ -128,6 +128,19 @@
     }
   }
 
+  &__icon {
+    display: flex;
+    align-items: center;
+    margin-right: getSpacer(xs);
+  }
+
+  &__chevron {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    padding-left: getSpacer(xs);
+  }
+
   &__main-content {
     padding: 0;
 
@@ -139,13 +152,4 @@
       }
     }
   }
-
-  &__icon-container {
-    &--hasmargin {
-      margin-right: getSpacer(xs);
-    }
-  }
-  &__icon {
-    vertical-align: middle;
-  }
 }

package/components/ExpanderList/styles.module.scss.d.ts

@@ -4,11 +4,11 @@ export type Styles = {
   'expander-list__item--no-bottom': string;
   'expander-list__item--top': string;
   'expander-list-link': string;
+  'expander-list-link__chevron': string;
   'expander-list-link__icon': string;
-  'expander-list-link__icon-container--hasmargin': string;
-  'expander-list-link__link-content': string;
   'expander-list-link__main-content': string;
   'expander-list-link__main-content--padding': string;
+  'expander-list-link__title': string;
   'expander-list-link--banana': string;
   'expander-list-link--blueberry': string;
   'expander-list-link--cherry': string;

package/components/FormExample/FormExample.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { FormVariant } from '../FormGroup/FormGroup';
+interface FormExampleProps {
+    exampleType: FormExampleVariants;
+    variant?: FormVariant;
+}
+export declare enum FormExampleVariants {
+    formgroup = "formgroup",
+    checkbox = "checkbox"
+}
+export declare const FormExample: React.ForwardRefExoticComponent<FormExampleProps & React.RefAttributes<HTMLElement>>;
+export default FormExample;
+//# sourceMappingURL=FormExample.d.ts.map

package/components/FormExample/FormExample.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormExample.d.ts","sourceRoot":"","sources":["../../../src/components/FormExample/FormExample.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAkB,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIhE,UAAU,gBAAgB;IACxB,WAAW,EAAE,mBAAmB,CAAC;IACjC,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,oBAAY,mBAAmB;IAC7B,SAAS,cAAc;IACvB,QAAQ,aAAa;CACtB;AAED,eAAO,MAAM,WAAW,sFA6DtB,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/components/FormExample/componentdata.json

@@ -0,0 +1,63 @@
+{
+  "props": {
+    "exampleType": {
+      "defaultValue": null,
+      "description": "",
+      "name": "exampleType",
+      "parent": {
+        "fileName": "designsystem/src/components/FormExample/FormExample.tsx",
+        "name": "FormExampleProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/components/FormExample/FormExample.tsx",
+          "name": "FormExampleProps"
+        }
+      ],
+      "required": true,
+      "type": {
+        "name": "enum",
+        "raw": "FormExampleVariants",
+        "value": [
+          {
+            "value": "\"formgroup\""
+          },
+          {
+            "value": "\"checkbox\""
+          }
+        ]
+      }
+    },
+    "variant": {
+      "defaultValue": null,
+      "description": "",
+      "name": "variant",
+      "parent": {
+        "fileName": "designsystem/src/components/FormExample/FormExample.tsx",
+        "name": "FormExampleProps"
+      },
+      "declarations": [
+        {
+          "fileName": "designsystem/src/components/FormExample/FormExample.tsx",
+          "name": "FormExampleProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "\"normal\" | \"bigform\" | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"normal\""
+          },
+          {
+            "value": "\"bigform\""
+          }
+        ]
+      }
+    }
+  }
+}

package/components/FormExample/index.d.ts

@@ -0,0 +1,3 @@
+import FormExample from './FormExample';
+export default FormExample;
+//# sourceMappingURL=index.d.ts.map

package/components/FormExample/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormExample/index.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,eAAe,WAAW,CAAC"}