@helsenorge/designsystem-react 0.0.3-dev.8 → 1.0.0-alpha-nye-spacers-3

package/components/RadioButton/componentdata.json

@@ -0,0 +1,259 @@
+{
+  "props": {
+    "className": {
+      "defaultValue": null,
+      "description": "Adds custom classes to the element.",
+      "name": "className",
+      "parent": {
+        "fileName": "src/components/RadioButton/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/RadioButton/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "checked": {
+      "defaultValue": null,
+      "description": "Sets checkbox as checked",
+      "name": "checked",
+      "parent": {
+        "fileName": "src/components/RadioButton/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/RadioButton/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "disabled": {
+      "defaultValue": null,
+      "description": "Disables the checkbox",
+      "name": "disabled",
+      "parent": {
+        "fileName": "src/components/RadioButton/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/RadioButton/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/RadioButton/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/RadioButton/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": true,
+      "type": {
+        "name": "string"
+      }
+    },
+    "inputid": {
+      "defaultValue": null,
+      "description": "input id of the checkbox",
+      "name": "inputid",
+      "parent": {
+        "fileName": "src/components/RadioButton/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/RadioButton/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/RadioButton/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/RadioButton/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/RadioButton/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/RadioButton/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "value": {
+      "defaultValue": null,
+      "description": "Return value for the checkbox",
+      "name": "value",
+      "parent": {
+        "fileName": "src/components/RadioButton/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/RadioButton/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/RadioButton/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/RadioButton/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/RadioButton/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/RadioButton/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/RadioButton/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/RadioButton/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "testId": {
+      "defaultValue": null,
+      "description": "Sets the data-testid attribute.",
+      "name": "testId",
+      "parent": {
+        "fileName": "src/components/RadioButton/Checkbox.tsx",
+        "name": "CheckboxProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/RadioButton/Checkbox.tsx",
+          "name": "CheckboxProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    }
+  }
+}

package/components/Slider/Slider.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+interface SliderProps {
+    /**	Sets the title of the slider. */
+    title?: string;
+    /** Adds the left hand label to the element. */
+    labelLeft?: string;
+    /** Adds the right hand label to the element. */
+    labelRight?: string;
+    /**	Decides the number of steps for each movement of the slider. */
+    step?: number;
+    /** Disables the slider element. */
+    disabled?: boolean;
+    /** Function to be called when the value state has changed. */
+    onChange?: (value: number) => void;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLElement>>;
+export default Slider;
+//# sourceMappingURL=Slider.d.ts.map

package/components/Slider/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAqB3D,UAAU,WAAW;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,MAAM,iFA+IjB,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/components/Slider/SliderUtils.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+/** Stopper MouseEvent eller TouchEvent parameter e som sendes inn fra å nå videre.*/
+export declare const stopEvent: (e: MouseEvent | TouchEvent | import("react").MouseEvent<{}, MouseEvent> | import("react").TouchEvent<{}>) => boolean;
+/** Henter ut x posisjon til MouseEvent eller TouchEvent e */
+export declare const getMousePosition: (e: MouseEvent | TouchEvent | import("react").MouseEvent<{}, MouseEvent> | import("react").TouchEvent<{}>) => number;
+/** Henter ut width basert på viewport posisjon til parameter elementet el som sendes inn */
+export declare const getElementWidth: (el: HTMLDivElement | null) => number;
+/** Returnerer en boolean på om innsendte event e er en TouchEvent */
+export declare const isTouchEvent: (e: MouseEvent | TouchEvent | import("react").MouseEvent<{}, MouseEvent> | import("react").TouchEvent<{}>) => boolean;
+/** Kalkulerer x posisjonen til slideren basert på value som sendes inn,
+ *  trackerWidth - bredden til trackeren, sliderWidth - bredden på slideren,
+ *  og min og max verdier som er satt på slider komponentet. */
+export declare const calculateSliderPositionBasedOnValue: (value: number, trackerWidth: number, sliderWidth: number, min: number, max: number) => number;
+/** Kalkulerer verdi basert på sliderPosition som sendes inn,
+ *  trackerWidth - bredden til trackeren, sliderWidth - bredden på slideren,
+ *  og min og max verdier som er satt på slider komponentet. */
+export declare const calculateValueBasedOnSliderPosition: (sliderPosition: number, trackerWidth: number, sliderWidth: number, step: number, min: number, max: number) => number;
+/** Kalkulerer modifisert value basert på step parameteret,
+ * med hensyn til max verdi til slideren.
+ * Med en step på 10 vil da value gå fra 0 til 10 til 20 osv. */
+export declare const alignValue: (value: number, step: number, max: number) => number;
+/** Kalkulerer ny x posisjon til slider basert på innsendt differanse diff,
+ *  nåværende sliderXPos, bredden til tracker - TrackerWidth og bredden til
+ *  slider - sliderWidth. */
+export declare const calculateChangeOfPosition: (diff: number, trackerWidth: number, sliderWidth: number, sliderXPos: number) => number;
+/** Kalkulerer posisjon til slider basert på xPos, nåværende sliderELement og
+ *  bredden til slider - sliderWidth */
+export declare const calculateSliderTranslate: (xPos: number, sliderElement: HTMLDivElement | null, sliderWidth: number, cb: (a: number) => void) => void;
+/** Legger til mousemove og mouseup event listeners,
+ *  basert på moveMouseEvent og mouseUpEvent eventene */
+export declare const addMouseListeners: (moveMouseEvent: (evt: MouseEvent) => void, mouseUpEvent: (evt: MouseEvent) => void) => void;
+/** Fjerner mousemove og mouseup event listeners,
+ *  basert på moveMouseEvent og mouseUpEvent eventene */
+export declare const removeMouseListeners: (moveMouseEvent: (evt: MouseEvent) => void, mouseUpEvent: (evt: MouseEvent) => void) => void;
+/** Legger til touchmove og touchend event listeners,
+ *  basert på moveTouchEvent og touchUpEvent eventene */
+export declare const addTouchListeners: (moveTouchEvent: (evt: TouchEvent) => void, touchUpEvent: (evt: TouchEvent) => void) => void;
+/** Fjerner touchmove og touchup event listeners,
+ *  basert på moveTouchEvent og touchUpEvent eventene */
+export declare const removeTouchListeners: (moveTouchEvent: (evt: TouchEvent) => void, touchUpEvent: (evt: TouchEvent) => void) => void;
+//# sourceMappingURL=SliderUtils.d.ts.map

package/components/Slider/SliderUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderUtils.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/SliderUtils.tsx"],"names":[],"mappings":";AAAA,qFAAqF;AACrF,eAAO,MAAM,SAAS,uHAIrB,CAAC;AAEF,6DAA6D;AAC7D,eAAO,MAAM,gBAAgB,sHAM5B,CAAC;AAEF,4FAA4F;AAC5F,eAAO,MAAM,eAAe,uCAG3B,CAAC;AAEF,qEAAqE;AACrE,eAAO,MAAM,YAAY,uHAYxB,CAAC;AAEF;;+DAE+D;AAC/D,eAAO,MAAM,mCAAmC,gGAU/C,CAAC;AAEF;;+DAE+D;AAC/D,eAAO,MAAM,mCAAmC,uHAY/C,CAAC;AAEF;;gEAEgE;AAChE,eAAO,MAAM,UAAU,sDAatB,CAAC;AAEF;;4BAE4B;AAC5B,eAAO,MAAM,yBAAyB,yFASrC,CAAC;AAEF;uCACuC;AACvC,eAAO,MAAM,wBAAwB,4GAUpC,CAAC;AAEF;wDACwD;AACxD,eAAO,MAAM,iBAAiB,8FAG7B,CAAC;AAEF;wDACwD;AACxD,eAAO,MAAM,oBAAoB,8FAGhC,CAAC;AAEF;wDACwD;AACxD,eAAO,MAAM,iBAAiB,8FAG7B,CAAC;AAEF;wDACwD;AACxD,eAAO,MAAM,oBAAoB,8FAGhC,CAAC"}

package/components/Slider/componentdata.json

@@ -0,0 +1,137 @@
+{
+  "props": {
+    "title": {
+      "defaultValue": null,
+      "description": "Sets the title of the slider.",
+      "name": "title",
+      "parent": {
+        "fileName": "src/components/Slider/Slider.tsx",
+        "name": "SliderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Slider/Slider.tsx",
+          "name": "SliderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "labelLeft": {
+      "defaultValue": null,
+      "description": "Adds the left hand label to the element.",
+      "name": "labelLeft",
+      "parent": {
+        "fileName": "src/components/Slider/Slider.tsx",
+        "name": "SliderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Slider/Slider.tsx",
+          "name": "SliderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "labelRight": {
+      "defaultValue": null,
+      "description": "Adds the right hand label to the element.",
+      "name": "labelRight",
+      "parent": {
+        "fileName": "src/components/Slider/Slider.tsx",
+        "name": "SliderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Slider/Slider.tsx",
+          "name": "SliderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "step": {
+      "defaultValue": null,
+      "description": "Decides the number of steps for each movement of the slider.",
+      "name": "step",
+      "parent": {
+        "fileName": "src/components/Slider/Slider.tsx",
+        "name": "SliderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Slider/Slider.tsx",
+          "name": "SliderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "number"
+      }
+    },
+    "disabled": {
+      "defaultValue": null,
+      "description": "Disables the slider element.",
+      "name": "disabled",
+      "parent": {
+        "fileName": "src/components/Slider/Slider.tsx",
+        "name": "SliderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Slider/Slider.tsx",
+          "name": "SliderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "onChange": {
+      "defaultValue": null,
+      "description": "Function to be called when the value state has changed.",
+      "name": "onChange",
+      "parent": {
+        "fileName": "src/components/Slider/Slider.tsx",
+        "name": "SliderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Slider/Slider.tsx",
+          "name": "SliderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "((value: number) => void)"
+      }
+    },
+    "testId": {
+      "defaultValue": null,
+      "description": "Sets the data-testid attribute.",
+      "name": "testId",
+      "parent": {
+        "fileName": "src/components/Slider/Slider.tsx",
+        "name": "SliderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Slider/Slider.tsx",
+          "name": "SliderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    }
+  }
+}

package/components/Slider/index.d.ts

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

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

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

package/components/Slider/index.js

@@ -0,0 +1,2 @@
+import{_ as e}from"../../_rollupPluginBabelHelpers-d0752906.js";import t,{useState as n,useRef as r,useEffect as o}from"react";import{c as a}from"../../index-9b84fabc.js";import{T as i}from"../../Title-72851d51.js";import c from"./styles.module.scss";import"../Title/styles.module.scss";var u=function(e){return e.stopPropagation&&e.stopPropagation(),e.preventDefault&&e.preventDefault(),!1},l=function(e){return d(e)?e.touches[0].pageX:e.pageX},s=function(e){var t=e?e.getBoundingClientRect():void 0;return t?t.right-t.left:0},d=function(e){return("touchcancel"===e.type||"touchend"===e.type||"touchenter"===e.type||"touchleave"===e.type||"touchmove"===e.type||"touchstart"===e.type)&&!(0===e.touches.length)},m=function(e,t,n){var r=e-e%t,o=Math.floor(n/t)*t;e>o&&(e>o+(n-o)/2&&(r=n));return Math.round(r)},f=t.forwardRef((function(d,f){var v=d.title,p=d.labelLeft,h=d.labelRight,_=d.disabled,g=void 0!==_&&_,E=d.step,y=void 0===E?1:E,b=d.onChange,w=d.testId,k=n(50),L=e(k,2),N=L[0],x=L[1],D=n(!1),M=e(D,2),R=M[0],A=M[1],T=n(0),j=e(T,2),B=j[0],C=j[1],P=n(0),I=e(P,2),X=I[0],H=I[1],K=n(0),S=e(K,2),U=S[0],q=S[1],z=n(0),F=e(z,2),G=F[0],J=F[1],O=f||r(null),Q=r(null),V=function(e){te(e)},W=function(e){ee(e)},Y=function(e){te(e)},Z=function(e){ee(e)};o((function(){var e=s(O.current),t=s(Q.current);q(function(e,t,n,r,o){return(t-n)/(o-r)*e}(N,e,t,0,100)),C(e),H(t)}),[]),o((function(){R&&(function(e,t){document.addEventListener("mousemove",e,!1),document.addEventListener("mouseup",t,!1)}(V,W),function(e,t){document.addEventListener("touchmove",e,!1),document.addEventListener("touchend",t,!1)}(Y,Z))}),[R]),o((function(){!g&&b&&b(N)}),[N]);var $=function(e){var t;if(!g){var n=s(O.current),r=s(Q.current),o=l(e);!function(e,t,n,r){var o=t?t.getBoundingClientRect():void 0,a=o?o.left:0;r(a?e-(a+n/2):0)}(o,Q.current,r,ne),A(!0),J(o),C(n),H(r),null===(t=Q.current)||void 0===t||t.focus(),u(e)}},ee=function(e){g||(A(!1),function(e,t){document.removeEventListener("mousemove",e,!1),document.removeEventListener("mouseup",t,!1)}(V,W),function(e,t){document.removeEventListener("touchmove",e,!1),document.removeEventListener("touchend",t,!1)}(Y,Z),u(e))},te=function(e){if(!g&&R){var t=l(e);ne(t-G),u(e)}},ne=function(e){if(0!==e){var t=function(e,t,n,r){var o=r+e;return o<0&&(o=0),o>t-n&&(o=t-n),o}(e,B,X,U);q(t),J(t+e),x(function(e,t,n,r,o,a){var i=(t-n)/(a-o),c=Math.round(e/i);return m(c,r,a)}(t,B,X,y,0,100))}};return t.createElement("div",{className:c.slider,"data-testid":w},v&&t.createElement(i,{htmlMarkup:"h3",margin:1.5,appearance:"title3"},v),t.createElement("div",{ref:O,className:a(c["slider__track-wrapper"],g?c["slider__track-wrapper--disabled"]:""),onMouseDown:$,onTouchStart:$,"data-testid":"tracker"},t.createElement("div",{className:a(c.slider__track,g?c["slider__track--disabled"]:"")}),t.createElement("div",{ref:Q,className:a(c.slider__trigger,g?c["slider__trigger--disabled"]:""),style:{left:"".concat(U,"px")},onKeyDown:function(e){if(!g){var t=(B-X)/100;"ArrowRight"!==e.key&&"ArrowDown"!==e.key||ne(y*t),"ArrowLeft"!==e.key&&"ArrowUp"!==e.key||ne(-y*t)}},role:"slider","aria-valuenow":N,"aria-valuemin":0,"aria-valuemax":100,"aria-label":"".concat(v?v+" ":"").concat(p?p+" ":"").concat(h?h+" ":""),tabIndex:g?-1:0},t.createElement("div",{className:a(c["slider__trigger-inner"],g?c["slider__trigger-inner--disabled"]:"")}))),(p||h)&&t.createElement("span",{className:c.slider__options},t.createElement("p",{className:c.slider__text,"aria-hidden":!0},p),t.createElement("p",{className:c.slider__text,"aria-hidden":!0},h)))}));export default f;
+//# sourceMappingURL=index.js.map

package/components/Slider/index.js.map

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

package/components/Slider/styles.module.scss

@@ -0,0 +1,85 @@
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+
+.slider {
+  width: 100%;
+  padding: getSpacer(m) 0;
+  position: relative;
+  outline: none !important;
+
+  &__track-wrapper {
+    width: 100%;
+    cursor: pointer;
+
+    &--disabled {
+      cursor: default;
+    }
+  }
+
+  &__track {
+    height: 2px;
+    background-color: $black;
+    width: 100%;
+    position: relative;
+    top: 1rem;
+
+    &--disabled {
+      background-color: $neutral600;
+    }
+  }
+
+  &__trigger {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 2rem;
+    height: 2rem;
+    background-color: $white;
+    border: 0.15rem solid $black;
+    border-radius: 1rem;
+    position: relative;
+    top: -0.05rem;
+    z-index: 9;
+    outline: none;
+    cursor: pointer;
+
+    &--disabled {
+      border-color: $neutral500;
+      cursor: default;
+    }
+  }
+
+  &__trigger-inner {
+    width: 1.25rem;
+    height: 1.25rem;
+    border: 0.1rem solid $black;
+    border-radius: 1rem;
+    background-color: $blueberry600;
+
+    :hover > &,
+    :focus > & {
+      background-color: $blueberry800;
+    }
+
+    &--disabled {
+      border-color: $neutral500;
+      background-color: $neutral200;
+
+      :hover > &,
+      :focus > & {
+        background-color: $neutral200;
+      }
+    }
+  }
+
+  &__options {
+    display: inline-flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &__text {
+    margin: 0;
+  }
+}

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

@@ -0,0 +1,19 @@
+export type Styles = {
+  slider: string;
+  slider__options: string;
+  slider__text: string;
+  slider__track: string;
+  'slider__track--disabled': string;
+  'slider__track-wrapper': string;
+  'slider__track-wrapper--disabled': string;
+  slider__trigger: string;
+  'slider__trigger--disabled': string;
+  'slider__trigger-inner': string;
+  'slider__trigger-inner--disabled': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Spacer/Spacer.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SpacerSizes } from './../../theme/spacers';
+interface SpacerProps {
+    /** Sets the size of the spacer. */
+    size?: SpacerSizes;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare const Spacer: React.ForwardRefExoticComponent<SpacerProps & React.RefAttributes<HTMLElement>>;
+export default Spacer;
+//# sourceMappingURL=Spacer.d.ts.map

package/components/Spacer/Spacer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.d.ts","sourceRoot":"","sources":["../../../src/components/Spacer/Spacer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAIpD,UAAU,WAAW;IACnB,mCAAmC;IACnC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,MAAM,iFAuBV,CAAC;AAEH,eAAe,MAAM,CAAC"}