@helsenorge/designsystem-react 2.4.0 → 2.6.0

package/components/Select/styles.module.scss

@@ -0,0 +1,125 @@
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/font-settings.scss';
+
+.select-wrapper {
+  display: flex;
+  flex-direction: column;
+
+  &__label-wrapper {
+    display: inline-flex;
+    align-items: center;
+    line-height: getSpacer(m);
+    font-size: $font-size-sm;
+    font-weight: 600;
+    padding-bottom: getSpacer(xs);
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      line-height: getSpacer(l);
+      font-size: $font-size-md;
+    }
+
+    &--on-dark {
+      color: $white;
+    }
+  }
+
+  &__after-label-children {
+    padding-left: 0.75rem;
+  }
+}
+
+.select-inner-wrapper {
+  // Grid brukes til å kunne plassere custom ikon fritt over select elementet
+  display: inline-grid;
+  background-color: $white;
+  align-items: center;
+  // Andre kolonne her styrer plassering av select ikonet
+  grid-template-columns: 1fr 2.8rem;
+
+  &--transparent {
+    background-color: transparent;
+  }
+
+  &:hover {
+    background: $neutral50;
+  }
+  &--on-blueberry {
+    &:hover {
+      background-color: $blueberry50;
+    }
+  }
+  &--invalid {
+    &:hover {
+      background-color: $cherry50;
+    }
+  }
+  &--disabled {
+    background: $neutral50;
+
+    &:hover {
+      background: $neutral50;
+    }
+  }
+}
+
+.select {
+  /* Pil fjernes for browsere utenom IE */
+  appearance: none;
+
+  height: 2.5rem;
+  align-items: center;
+  background-color: transparent;
+  grid-column: 1 / 3;
+  grid-row: 1;
+  padding-left: getSpacer(xs);
+  border: none;
+  outline: $neutral700 solid 2px;
+  outline-offset: -2px;
+  font-family: inherit;
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
+  border-radius: 0;
+
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    height: 3.125rem;
+    font-size: $font-size-md;
+  }
+
+  &--on-blueberry {
+    outline-color: $blueberry500;
+  }
+  &--invalid {
+    outline-color: $cherry500;
+  }
+
+  :hover > & {
+    outline-width: 3px;
+    outline-offset: -1px;
+  }
+  &:focus {
+    outline: $black solid 4px;
+    outline-offset: -2px;
+  }
+
+  &:disabled {
+    outline: $neutral500 solid 2px;
+    outline-offset: -2px;
+  }
+
+  & > option {
+    background: $white;
+    font-family: inherit;
+    font-size: $font-size-sm;
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      font-size: $font-size-md;
+    }
+  }
+}
+
+.select-arrow {
+  grid-column: 2;
+  grid-row: 1;
+}

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

@@ -0,0 +1,21 @@
+export type Styles = {
+  select: string;
+  'select--invalid': string;
+  'select--on-blueberry': string;
+  'select-arrow': string;
+  'select-inner-wrapper': string;
+  'select-inner-wrapper--disabled': string;
+  'select-inner-wrapper--invalid': string;
+  'select-inner-wrapper--on-blueberry': string;
+  'select-inner-wrapper--transparent': string;
+  'select-wrapper': string;
+  'select-wrapper__after-label-children': string;
+  'select-wrapper__label-wrapper': string;
+  'select-wrapper__label-wrapper--on-dark': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Slider/index.js

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

package/components/Slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Slider/SliderUtils.tsx","../../../src/components/Slider/Slider.tsx"],"sourcesContent":["/** Stopper MouseEvent eller TouchEvent parameter e som sendes inn fra å nå videre.*/\nexport const stopEvent = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): boolean => {\n  if (e.stopPropagation) e.stopPropagation();\n  if (e.preventDefault) e.preventDefault();\n  return false;\n};\n\n/** Henter ut x posisjon til MouseEvent eller TouchEvent e */\nexport const getMousePosition = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): number => {\n  if (isTouchEvent(e)) {\n    const touch: Touch = (e as TouchEvent).touches[0];\n    return touch.pageX;\n  }\n  return (e as MouseEvent).pageX;\n};\n\n/** Returnerer en boolean på om innsendte event e er en TouchEvent */\nexport const isTouchEvent = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): boolean => {\n  if (\n    e.type === 'touchcancel' ||\n    e.type === 'touchend' ||\n    e.type === 'touchenter' ||\n    e.type === 'touchleave' ||\n    e.type === 'touchmove' ||\n    e.type === 'touchstart'\n  ) {\n    return !((e as TouchEvent).touches.length === 0);\n  }\n  return false;\n};\n\n/** Kalkulerer x posisjonen til slideren basert på value som sendes inn,\n *  trackerWidth - bredden til trackeren, sliderWidth - bredden på slideren,\n *  og min og max verdier som er satt på slider komponentet. */\nexport const calculateSliderPositionBasedOnValue = (\n  value: number,\n  trackerWidth: number,\n  sliderWidth: number,\n  min: number,\n  max: number\n): number => {\n  const size: number = max - min;\n  const pixelPerSize: number = (trackerWidth - sliderWidth) / size;\n  return pixelPerSize * value;\n};\n\n/** Kalkulerer verdi basert på sliderPosition som sendes inn,\n *  trackerWidth - bredden til trackeren, sliderWidth - bredden på slideren,\n *  og min og max verdier som er satt på slider komponentet. */\nexport const calculateValueBasedOnSliderPosition = (\n  sliderPosition: number,\n  trackerWidth: number,\n  sliderWidth: number,\n  step: number,\n  min: number,\n  max: number\n): number => {\n  const size: number = max - min;\n  const pixelPerSize: number = (trackerWidth - sliderWidth) / size;\n  const newValue: number = Math.round(sliderPosition / pixelPerSize);\n  return alignValue(newValue, step, max);\n};\n\n/** Kalkulerer modifisert value basert på step parameteret,\n * med hensyn til max verdi til slideren.\n * Med en step på 10 vil da value gå fra 0 til 10 til 20 osv. */\nexport const alignValue = (value: number, step: number, max: number): number => {\n  const valModStep: number = value % step;\n  let alignedValue: number = value - valModStep;\n\n  const possibleMaxValueWithCurrentStep: number = Math.floor(max / step) * step;\n  if (value > possibleMaxValueWithCurrentStep) {\n    const diff: number = max - possibleMaxValueWithCurrentStep;\n    if (value > possibleMaxValueWithCurrentStep + diff / 2) {\n      alignedValue = max;\n    }\n  }\n\n  return Math.round(alignedValue);\n};\n\n/** Kalkulerer ny x posisjon til slider basert på innsendt differanse diff,\n *  nåværende sliderXPos, bredden til tracker - TrackerWidth og bredden til\n *  slider - sliderWidth. */\nexport const calculateChangeOfPosition = (diff: number, trackerWidth: number, sliderWidth: number, sliderXPos: number): number => {\n  let newSliderPos: number = sliderXPos + diff;\n  if (newSliderPos < 0) {\n    newSliderPos = 0;\n  }\n  if (newSliderPos > trackerWidth - sliderWidth) {\n    newSliderPos = trackerWidth - sliderWidth;\n  }\n  return newSliderPos;\n};\n\n/** Kalkulerer posisjon til slider basert på xPos, nåværende sliderELement og\n *  bredden til slider - sliderWidth */\nexport const calculateSliderTranslate = (\n  xPos: number,\n  sliderElement: HTMLDivElement | null,\n  sliderWidth: number,\n  cb: (a: number) => void\n) => {\n  const elementViewportPosition = sliderElement ? sliderElement.getBoundingClientRect() : undefined;\n  const sliderPageXPos = elementViewportPosition ? elementViewportPosition.left : 0;\n  const diff: number = sliderPageXPos ? xPos - (sliderPageXPos + sliderWidth / 2) : 0;\n  cb(diff);\n};\n\n/** Legger til mousemove og mouseup event listeners,\n *  basert på moveMouseEvent og mouseUpEvent eventene */\nexport const addMouseListeners = (moveMouseEvent: (evt: MouseEvent) => void, mouseUpEvent: (evt: MouseEvent) => void): void => {\n  document.addEventListener('mousemove', moveMouseEvent, false);\n  document.addEventListener('mouseup', mouseUpEvent, false);\n};\n\n/** Fjerner mousemove og mouseup event listeners,\n *  basert på moveMouseEvent og mouseUpEvent eventene */\nexport const removeMouseListeners = (moveMouseEvent: (evt: MouseEvent) => void, mouseUpEvent: (evt: MouseEvent) => void): void => {\n  document.removeEventListener('mousemove', moveMouseEvent, false);\n  document.removeEventListener('mouseup', mouseUpEvent, false);\n};\n\n/** Legger til touchmove og touchend event listeners,\n *  basert på moveTouchEvent og touchUpEvent eventene */\nexport const addTouchListeners = (moveTouchEvent: (evt: TouchEvent) => void, touchUpEvent: (evt: TouchEvent) => void): void => {\n  document.addEventListener('touchmove', moveTouchEvent, false);\n  document.addEventListener('touchend', touchUpEvent, false);\n};\n\n/** Fjerner touchmove og touchup event listeners,\n *  basert på moveTouchEvent og touchUpEvent eventene */\nexport const removeTouchListeners = (moveTouchEvent: (evt: TouchEvent) => void, touchUpEvent: (evt: TouchEvent) => void): void => {\n  document.removeEventListener('touchmove', moveTouchEvent, false);\n  document.removeEventListener('touchend', touchUpEvent, false);\n};\n","import React, { useEffect, useState, useRef } from 'react';\nimport classNames from 'classnames';\n\nimport Title from '../Title';\n\nimport {\n  stopEvent,\n  getMousePosition,\n  calculateSliderPositionBasedOnValue,\n  calculateValueBasedOnSliderPosition,\n  calculateChangeOfPosition,\n  calculateSliderTranslate,\n  addMouseListeners,\n  addTouchListeners,\n  removeMouseListeners,\n  removeTouchListeners,\n} from './SliderUtils';\n\nimport SliderStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\n\ninterface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tDecides the number of steps for each movement of the slider. */\n  step?: number;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Slider = React.forwardRef(function SliderForwardedRef(props: SliderProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { title, labelLeft, labelRight, disabled = false, step = 1, onChange, testId } = props;\n  const [value, setValue] = useState(50);\n  const [isMouseDown, setIsMouseDown] = useState(false);\n\n  const [sliderXPos, setSliderXPos] = useState(0);\n  const [sliderTemporaryXPos, setSliderTemporaryXPos] = useState(0);\n  const trackerRef = ref ? (ref as React.RefObject<HTMLDivElement>) : useRef<HTMLDivElement>(null);\n  const sliderRef = useRef<HTMLDivElement>(null);\n  const { width: trackerWidth } = useSize(trackerRef) || { width: 0 };\n  const { width: sliderWidth } = useSize(sliderRef) || { width: 0 };\n  const min = 0;\n  const max = 100;\n\n  const moveMouseEvent = (evt: MouseEvent) => {\n    onMouseMove(evt);\n  };\n  const mouseUpEvent = (evt: MouseEvent) => {\n    onMouseUp(evt);\n  };\n  const moveTouchEvent = (evt: TouchEvent) => {\n    onMouseMove(evt);\n  };\n  const touchUpEvent = (evt: TouchEvent) => {\n    onMouseUp(evt);\n  };\n\n  useEffect(() => {\n    setSliderXPos(calculateSliderPositionBasedOnValue(value, trackerWidth, sliderWidth, min, max));\n  }, [value, trackerWidth, sliderWidth]);\n\n  useEffect(() => {\n    if (isMouseDown) {\n      addMouseListeners(moveMouseEvent, mouseUpEvent);\n      addTouchListeners(moveTouchEvent, touchUpEvent);\n    }\n  }, [isMouseDown]);\n\n  useEffect(() => {\n    if (!disabled && onChange) {\n      onChange(value);\n    }\n  }, [value]);\n\n  const onKeyDown = (evt: React.KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) return;\n    const size: number = max - min;\n    const pixelPerSize: number = (trackerWidth - sliderWidth) / size;\n    if (evt.key === 'ArrowRight' || evt.key === 'ArrowDown') {\n      updateSliderPosition(step * pixelPerSize);\n    }\n    if (evt.key === 'ArrowLeft' || evt.key === 'ArrowUp') {\n      updateSliderPosition(-step * pixelPerSize);\n    }\n  };\n\n  const onMouseOrTouchDown = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): void => {\n    if (disabled) return;\n    const updatedMousePosition: number = getMousePosition(e);\n    calculateSliderTranslate(updatedMousePosition, sliderRef.current, sliderWidth, updateSliderPosition);\n    setIsMouseDown(true);\n    setSliderTemporaryXPos(updatedMousePosition);\n    sliderRef.current?.focus();\n    stopEvent(e);\n  };\n\n  const onMouseUp = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): void => {\n    if (disabled) return;\n    setIsMouseDown(false);\n    removeMouseListeners(moveMouseEvent, mouseUpEvent);\n    removeTouchListeners(moveTouchEvent, touchUpEvent);\n    stopEvent(e);\n  };\n\n  const onMouseMove = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): void => {\n    if (disabled || !isMouseDown) return;\n    const updatedMousePosition: number = getMousePosition(e);\n    const diff: number = updatedMousePosition - sliderTemporaryXPos;\n    updateSliderPosition(diff);\n    stopEvent(e);\n  };\n\n  const updateSliderPosition = (diff: number): void => {\n    if (diff === 0) return;\n    const updatedSliderPos: number = calculateChangeOfPosition(diff, trackerWidth, sliderWidth, sliderXPos);\n    setSliderXPos(updatedSliderPos);\n    setSliderTemporaryXPos(updatedSliderPos + diff);\n    setValue(calculateValueBasedOnSliderPosition(updatedSliderPos, trackerWidth, sliderWidth, step, min, max));\n  };\n\n  return (\n    <div className={SliderStyles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title htmlMarkup={'h3'} margin={1.5} appearance={'title3'}>\n          {title}\n        </Title>\n      )}\n      <div\n        ref={trackerRef}\n        className={classNames(SliderStyles['slider__track-wrapper'], disabled ? SliderStyles['slider__track-wrapper--disabled'] : '')}\n        onMouseDown={onMouseOrTouchDown}\n        onTouchStart={onMouseOrTouchDown}\n        data-testid={'tracker'}\n      >\n        <div className={classNames(SliderStyles.slider__track, disabled ? SliderStyles['slider__track--disabled'] : '')} />\n        <div\n          ref={sliderRef}\n          className={classNames(SliderStyles.slider__trigger, disabled ? SliderStyles['slider__trigger--disabled'] : '')}\n          style={{\n            left: `${sliderXPos}px`,\n          }}\n          onKeyDown={onKeyDown}\n          role={'slider'}\n          aria-valuenow={value}\n          aria-valuemin={min}\n          aria-valuemax={max}\n          aria-label={`${title ? title + ' ' : ''}${labelLeft ? labelLeft + ' ' : ''}${labelRight ? labelRight + ' ' : ''}`}\n          tabIndex={disabled ? -1 : 0}\n        >\n          <div\n            className={classNames(SliderStyles['slider__trigger-inner'], disabled ? SliderStyles['slider__trigger-inner--disabled'] : '')}\n          />\n        </div>\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={SliderStyles.slider__options}>\n          <p className={SliderStyles.slider__text} aria-hidden={true}>\n            {labelLeft}\n          </p>\n          <p className={SliderStyles.slider__text} aria-hidden={true}>\n            {labelRight}\n          </p>\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport default Slider;\n"],"names":["stopEvent","getMousePosition","isTouchEvent","calculateSliderPositionBasedOnValue","value","trackerWidth","sliderWidth","min","max","size","calculateValueBasedOnSliderPosition","sliderPosition","step","pixelPerSize","newValue","alignValue","valModStep","alignedValue","possibleMaxValueWithCurrentStep","diff","calculateChangeOfPosition","sliderXPos","newSliderPos","calculateSliderTranslate","xPos","sliderElement","cb","elementViewportPosition","sliderPageXPos","addMouseListeners","moveMouseEvent","mouseUpEvent","removeMouseListeners","addTouchListeners","moveTouchEvent","touchUpEvent","removeTouchListeners","Slider","React","props","ref","title","labelLeft","labelRight","disabled","onChange","testId","setValue","useState","isMouseDown","setIsMouseDown","setSliderXPos","sliderTemporaryXPos","setSliderTemporaryXPos","trackerRef","useRef","sliderRef","useSize","evt","onMouseMove","onMouseUp","useEffect","onKeyDown","updateSliderPosition","onMouseOrTouchDown","e","updatedMousePosition","_a","updatedSliderPos","SliderStyles","AnalyticsId","Title","classNames"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Slider/SliderUtils.tsx","../../../src/components/Slider/Slider.tsx"],"sourcesContent":["/** Stopper MouseEvent eller TouchEvent parameter e som sendes inn fra å nå videre.*/\nexport const stopEvent = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): boolean => {\n  if (e.stopPropagation) e.stopPropagation();\n  if (e.preventDefault) e.preventDefault();\n  return false;\n};\n\n/** Henter ut x posisjon til MouseEvent eller TouchEvent e */\nexport const getMousePosition = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): number => {\n  if (isTouchEvent(e)) {\n    const touch: Touch = (e as TouchEvent).touches[0];\n    return touch.pageX;\n  }\n  return (e as MouseEvent).pageX;\n};\n\n/** Returnerer en boolean på om innsendte event e er en TouchEvent */\nexport const isTouchEvent = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): boolean => {\n  if (\n    e.type === 'touchcancel' ||\n    e.type === 'touchend' ||\n    e.type === 'touchenter' ||\n    e.type === 'touchleave' ||\n    e.type === 'touchmove' ||\n    e.type === 'touchstart'\n  ) {\n    return !((e as TouchEvent).touches.length === 0);\n  }\n  return false;\n};\n\n/** Kalkulerer x posisjonen til slideren basert på value som sendes inn,\n *  trackerWidth - bredden til trackeren, sliderWidth - bredden på slideren,\n *  og min og max verdier som er satt på slider komponentet. */\nexport const calculateSliderPositionBasedOnValue = (\n  value: number,\n  trackerWidth: number,\n  sliderWidth: number,\n  min: number,\n  max: number\n): number => {\n  const size: number = max - min;\n  const pixelPerSize: number = (trackerWidth - sliderWidth) / size;\n  return pixelPerSize * value;\n};\n\n/** Kalkulerer verdi basert på sliderPosition som sendes inn,\n *  trackerWidth - bredden til trackeren, sliderWidth - bredden på slideren,\n *  og min og max verdier som er satt på slider komponentet. */\nexport const calculateValueBasedOnSliderPosition = (\n  sliderPosition: number,\n  trackerWidth: number,\n  sliderWidth: number,\n  step: number,\n  min: number,\n  max: number\n): number => {\n  const size: number = max - min;\n  const pixelPerSize: number = (trackerWidth - sliderWidth) / size;\n  const newValue: number = Math.round(sliderPosition / pixelPerSize);\n  return alignValue(newValue, step, max);\n};\n\n/** Kalkulerer modifisert value basert på step parameteret,\n * med hensyn til max verdi til slideren.\n * Med en step på 10 vil da value gå fra 0 til 10 til 20 osv. */\nexport const alignValue = (value: number, step: number, max: number): number => {\n  const valModStep: number = value % step;\n  let alignedValue: number = value - valModStep;\n\n  const possibleMaxValueWithCurrentStep: number = Math.floor(max / step) * step;\n  if (value > possibleMaxValueWithCurrentStep) {\n    const diff: number = max - possibleMaxValueWithCurrentStep;\n    if (value > possibleMaxValueWithCurrentStep + diff / 2) {\n      alignedValue = max;\n    }\n  }\n\n  return Math.round(alignedValue);\n};\n\n/** Kalkulerer ny x posisjon til slider basert på innsendt differanse diff,\n *  nåværende sliderXPos, bredden til tracker - TrackerWidth og bredden til\n *  slider - sliderWidth. */\nexport const calculateChangeOfPosition = (diff: number, trackerWidth: number, sliderWidth: number, sliderXPos: number): number => {\n  let newSliderPos: number = sliderXPos + diff;\n  if (newSliderPos < 0) {\n    newSliderPos = 0;\n  }\n  if (newSliderPos > trackerWidth - sliderWidth) {\n    newSliderPos = trackerWidth - sliderWidth;\n  }\n  return newSliderPos;\n};\n\n/** Kalkulerer posisjon til slider basert på xPos, nåværende sliderELement og\n *  bredden til slider - sliderWidth */\nexport const calculateSliderTranslate = (\n  xPos: number,\n  sliderElement: HTMLDivElement | null,\n  sliderWidth: number,\n  cb: (a: number) => void\n) => {\n  const elementViewportPosition = sliderElement ? sliderElement.getBoundingClientRect() : undefined;\n  const sliderPageXPos = elementViewportPosition ? elementViewportPosition.left : 0;\n  const diff: number = sliderPageXPos ? xPos - (sliderPageXPos + sliderWidth / 2) : 0;\n  cb(diff);\n};\n\n/** Legger til mousemove og mouseup event listeners,\n *  basert på moveMouseEvent og mouseUpEvent eventene */\nexport const addMouseListeners = (moveMouseEvent: (evt: MouseEvent) => void, mouseUpEvent: (evt: MouseEvent) => void): void => {\n  document.addEventListener('mousemove', moveMouseEvent, false);\n  document.addEventListener('mouseup', mouseUpEvent, false);\n};\n\n/** Fjerner mousemove og mouseup event listeners,\n *  basert på moveMouseEvent og mouseUpEvent eventene */\nexport const removeMouseListeners = (moveMouseEvent: (evt: MouseEvent) => void, mouseUpEvent: (evt: MouseEvent) => void): void => {\n  document.removeEventListener('mousemove', moveMouseEvent, false);\n  document.removeEventListener('mouseup', mouseUpEvent, false);\n};\n\n/** Legger til touchmove og touchend event listeners,\n *  basert på moveTouchEvent og touchUpEvent eventene */\nexport const addTouchListeners = (moveTouchEvent: (evt: TouchEvent) => void, touchUpEvent: (evt: TouchEvent) => void): void => {\n  document.addEventListener('touchmove', moveTouchEvent, false);\n  document.addEventListener('touchend', touchUpEvent, false);\n};\n\n/** Fjerner touchmove og touchup event listeners,\n *  basert på moveTouchEvent og touchUpEvent eventene */\nexport const removeTouchListeners = (moveTouchEvent: (evt: TouchEvent) => void, touchUpEvent: (evt: TouchEvent) => void): void => {\n  document.removeEventListener('touchmove', moveTouchEvent, false);\n  document.removeEventListener('touchend', touchUpEvent, false);\n};\n","import React, { useEffect, useState, useRef } from 'react';\nimport classNames from 'classnames';\n\nimport Title from '../Title';\n\nimport {\n  stopEvent,\n  getMousePosition,\n  calculateSliderPositionBasedOnValue,\n  calculateValueBasedOnSliderPosition,\n  calculateChangeOfPosition,\n  calculateSliderTranslate,\n  addMouseListeners,\n  addTouchListeners,\n  removeMouseListeners,\n  removeTouchListeners,\n} from './SliderUtils';\n\nimport SliderStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\n\ninterface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tDecides the number of steps for each movement of the slider. */\n  step?: number;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Slider = React.forwardRef(function SliderForwardedRef(props: SliderProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { title, labelLeft, labelRight, disabled = false, step = 1, onChange, testId } = props;\n  const [value, setValue] = useState(50);\n  const [isMouseDown, setIsMouseDown] = useState(false);\n\n  const [sliderXPos, setSliderXPos] = useState(0);\n  const [sliderTemporaryXPos, setSliderTemporaryXPos] = useState(0);\n  const trackerRef = ref ? (ref as React.RefObject<HTMLDivElement>) : useRef<HTMLDivElement>(null);\n  const sliderRef = useRef<HTMLDivElement>(null);\n  const { width: trackerWidth } = useSize(trackerRef) || { width: 0 };\n  const { width: sliderWidth } = useSize(sliderRef) || { width: 0 };\n  const min = 0;\n  const max = 100;\n\n  const moveMouseEvent = (evt: MouseEvent) => {\n    onMouseMove(evt);\n  };\n  const mouseUpEvent = (evt: MouseEvent) => {\n    onMouseUp(evt);\n  };\n  const moveTouchEvent = (evt: TouchEvent) => {\n    onMouseMove(evt);\n  };\n  const touchUpEvent = (evt: TouchEvent) => {\n    onMouseUp(evt);\n  };\n\n  useEffect(() => {\n    setSliderXPos(calculateSliderPositionBasedOnValue(value, trackerWidth, sliderWidth, min, max));\n  }, [value, trackerWidth, sliderWidth]);\n\n  useEffect(() => {\n    if (isMouseDown) {\n      addMouseListeners(moveMouseEvent, mouseUpEvent);\n      addTouchListeners(moveTouchEvent, touchUpEvent);\n    }\n  }, [isMouseDown]);\n\n  useEffect(() => {\n    if (!disabled && onChange) {\n      onChange(value);\n    }\n  }, [value]);\n\n  const onKeyDown = (evt: React.KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) return;\n    const size: number = max - min;\n    const pixelPerSize: number = (trackerWidth - sliderWidth) / size;\n    if (evt.key === 'ArrowRight' || evt.key === 'ArrowDown') {\n      updateSliderPosition(step * pixelPerSize);\n    }\n    if (evt.key === 'ArrowLeft' || evt.key === 'ArrowUp') {\n      updateSliderPosition(-step * pixelPerSize);\n    }\n  };\n\n  const onMouseOrTouchDown = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): void => {\n    if (disabled) return;\n    const updatedMousePosition: number = getMousePosition(e);\n    calculateSliderTranslate(updatedMousePosition, sliderRef.current, sliderWidth, updateSliderPosition);\n    setIsMouseDown(true);\n    setSliderTemporaryXPos(updatedMousePosition);\n    sliderRef.current?.focus();\n    stopEvent(e);\n  };\n\n  const onMouseUp = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): void => {\n    if (disabled) return;\n    setIsMouseDown(false);\n    removeMouseListeners(moveMouseEvent, mouseUpEvent);\n    removeTouchListeners(moveTouchEvent, touchUpEvent);\n    stopEvent(e);\n  };\n\n  const onMouseMove = (e: MouseEvent | React.MouseEvent<{}> | TouchEvent | React.TouchEvent<{}>): void => {\n    if (disabled || !isMouseDown) return;\n    const updatedMousePosition: number = getMousePosition(e);\n    const diff: number = updatedMousePosition - sliderTemporaryXPos;\n    updateSliderPosition(diff);\n    stopEvent(e);\n  };\n\n  const updateSliderPosition = (diff: number): void => {\n    if (diff === 0) return;\n    const updatedSliderPos: number = calculateChangeOfPosition(diff, trackerWidth, sliderWidth, sliderXPos);\n    setSliderXPos(updatedSliderPos);\n    setSliderTemporaryXPos(updatedSliderPos + diff);\n    setValue(calculateValueBasedOnSliderPosition(updatedSliderPos, trackerWidth, sliderWidth, step, min, max));\n  };\n\n  return (\n    <div className={SliderStyles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title htmlMarkup={'h3'} margin={1.5} appearance={'title3'}>\n          {title}\n        </Title>\n      )}\n      <div\n        ref={trackerRef}\n        className={classNames(SliderStyles['slider__track-wrapper'], disabled ? SliderStyles['slider__track-wrapper--disabled'] : '')}\n        onMouseDown={onMouseOrTouchDown}\n        onTouchStart={onMouseOrTouchDown}\n        data-testid={'tracker'}\n      >\n        <div className={classNames(SliderStyles.slider__track, disabled ? SliderStyles['slider__track--disabled'] : '')} />\n        <div\n          ref={sliderRef}\n          className={classNames(SliderStyles.slider__trigger, disabled ? SliderStyles['slider__trigger--disabled'] : '')}\n          style={{\n            left: `${sliderXPos}px`,\n          }}\n          onKeyDown={onKeyDown}\n          role={'slider'}\n          aria-valuenow={value}\n          aria-valuemin={min}\n          aria-valuemax={max}\n          aria-label={`${title ? title + ' ' : ''}${labelLeft ? labelLeft + ' ' : ''}${labelRight ? labelRight + ' ' : ''}`}\n          tabIndex={disabled ? -1 : 0}\n        >\n          <div\n            className={classNames(SliderStyles['slider__trigger-inner'], disabled ? SliderStyles['slider__trigger-inner--disabled'] : '')}\n          />\n        </div>\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={SliderStyles.slider__options}>\n          <p className={SliderStyles.slider__text} aria-hidden={true}>\n            {labelLeft}\n          </p>\n          <p className={SliderStyles.slider__text} aria-hidden={true}>\n            {labelRight}\n          </p>\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport default Slider;\n"],"names":["stopEvent","getMousePosition","isTouchEvent","calculateSliderPositionBasedOnValue","value","trackerWidth","sliderWidth","min","max","size","calculateValueBasedOnSliderPosition","sliderPosition","step","pixelPerSize","newValue","alignValue","valModStep","alignedValue","possibleMaxValueWithCurrentStep","diff","calculateChangeOfPosition","sliderXPos","newSliderPos","calculateSliderTranslate","xPos","sliderElement","cb","elementViewportPosition","sliderPageXPos","addMouseListeners","moveMouseEvent","mouseUpEvent","removeMouseListeners","addTouchListeners","moveTouchEvent","touchUpEvent","removeTouchListeners","Slider","React","props","ref","title","labelLeft","labelRight","disabled","onChange","testId","setValue","useState","isMouseDown","setIsMouseDown","setSliderXPos","sliderTemporaryXPos","setSliderTemporaryXPos","trackerRef","useRef","sliderRef","useSize","evt","onMouseMove","onMouseUp","useEffect","onKeyDown","updateSliderPosition","onMouseOrTouchDown","e","updatedMousePosition","_a","updatedSliderPos","SliderStyles","AnalyticsId","Title","classNames"],"mappings":"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"}

package/components/StatusDot/index.js

@@ -1,2 +1,2 @@
-import s from"react";import t from"classnames";import r from"./styles.module.scss";import{IconSize as l,AnalyticsId as _}from"../../constants.js";import{Icon as n}from"../Icons/Icon.js";import v from"../Icons/Undo.js";import{getColor as I}from"../../theme/currys/color.js";import E from"../Icons/Group.js";import N from"../Icons/NoAccess.js";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";var X=(e=>(e.info="info",e.warning="warning",e.alert="alert",e.cancelled="cancelled",e.active="active",e.transparent="transparent",e.recurring="recurring",e.group="group",e.noaccess="noaccess",e))(X||{});const H=s.forwardRef(function(m,C){const{variant:o="info",text:i,className:p}=m,a=o==="recurring"||o==="group"||o==="noaccess",d=o==="cancelled",f=t(r.statusdot,{[r["statusdot--cancelled"]]:d},p),u=t(r.statusdot__dot,[a?r["statusdot__dot--icon"]:r[`statusdot__dot--${o}`]]),g=t(r.statusdot__label,{[r["statusdot__label--icon"]]:a});let c=null;return o==="recurring"?c=s.createElement(n,{size:l.XXSmall,svgIcon:v}):o==="group"?c=s.createElement(n,{size:l.XXSmall,svgIcon:E}):o==="noaccess"&&(c=s.createElement(n,{size:l.XXSmall,svgIcon:N,color:I("cherry",600)})),s.createElement("div",{className:f,"data-analyticsid":_.StatusDot},s.createElement("span",{className:u},c),s.createElement("span",{className:g},i))});export{X as StatusDotVariant,H as default};
+import r from"react";import c from"classnames";import s from"./styles.module.scss";import{IconSize as l,AnalyticsId as _}from"../../constants.js";import{Icon as n}from"../Icons/Icon.js";import v from"../Icons/Undo.js";import{getColor as I}from"../../theme/currys/color.js";import E from"../Icons/Group.js";import N from"../Icons/NoAccess.js";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";var X=(e=>(e.info="info",e.warning="warning",e.alert="alert",e.cancelled="cancelled",e.active="active",e.transparent="transparent",e.recurring="recurring",e.group="group",e.noaccess="noaccess",e))(X||{});const J=r.forwardRef(function(m,C){const{variant:o="info",text:i,className:p}=m,a=o==="recurring"||o==="group"||o==="noaccess",d=o==="cancelled",f=c(s.statusdot,{[s["statusdot--cancelled"]]:d},p),u=c(s.statusdot__dot,[a?s["statusdot__dot--icon"]:s[`statusdot__dot--${o}`]]),g=c(s.statusdot__label,{[s["statusdot__label--icon"]]:a});let t=null;return o==="recurring"?t=r.createElement(n,{size:l.XXSmall,svgIcon:v}):o==="group"?t=r.createElement(n,{size:l.XXSmall,svgIcon:E}):o==="noaccess"&&(t=r.createElement(n,{size:l.XXSmall,svgIcon:N,color:I("cherry",600)})),r.createElement("div",{className:f,"data-analyticsid":_.StatusDot},r.createElement("span",{className:u},t),r.createElement("span",{className:g},i))});export{X as StatusDotVariant,J as default};
 //# sourceMappingURL=index.js.map

package/components/StatusDot/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport statusDotStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\nimport { Icon } from '../Icons/Icon';\nimport Undo from '../Icons/Undo';\nimport { getColor } from '../../theme/currys';\nimport Group from '../Icons/Group';\nimport NoAccess from '../Icons/NoAccess';\nimport { IconSize } from '../..';\n\nexport enum StatusDotVariant {\n  info = 'info',\n  warning = 'warning',\n  alert = 'alert',\n  cancelled = 'cancelled',\n  active = 'active',\n  transparent = 'transparent',\n  recurring = 'recurring',\n  group = 'group',\n  noaccess = 'noaccess',\n}\n\nexport interface StatusDotProps {\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n}\n\nconst Spacer = React.forwardRef(function SpacerForwardedRef(props: StatusDotProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { variant = StatusDotVariant.info, text, className } = props;\n  const hasIcon = variant === StatusDotVariant.recurring || variant === StatusDotVariant.group || variant === StatusDotVariant.noaccess;\n  const isCancelled = variant === StatusDotVariant.cancelled;\n  const statusDotClasses = classNames(statusDotStyles['statusdot'], { [statusDotStyles['statusdot--cancelled']]: isCancelled }, className);\n  const dotClasses = classNames(statusDotStyles['statusdot__dot'], [\n    hasIcon ? statusDotStyles[`statusdot__dot--icon`] : statusDotStyles[`statusdot__dot--${variant}`],\n  ]);\n  const labelClasses = classNames(statusDotStyles['statusdot__label'], { [statusDotStyles[`statusdot__label--icon`]]: hasIcon });\n  let svgIcon: JSX.Element | null = null;\n\n  if (variant === StatusDotVariant.recurring) {\n    svgIcon = <Icon size={IconSize.XXSmall} svgIcon={Undo} />;\n  } else if (variant === StatusDotVariant.group) {\n    svgIcon = <Icon size={IconSize.XXSmall} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    svgIcon = <Icon size={IconSize.XXSmall} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  }\n\n  return (\n    <div className={statusDotClasses} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses}>{svgIcon}</span>\n      <span className={labelClasses}>{text}</span>\n    </div>\n  );\n});\n\nexport default Spacer;\n"],"names":["StatusDotVariant","Spacer","React","props","ref","variant","text","className","hasIcon","isCancelled","statusDotClasses","classNames","statusDotStyles","dotClasses","labelClasses","svgIcon","Icon","IconSize","Undo","Group","NoAccess","getColor","AnalyticsId"],"mappings":"uiBAaY,IAAAA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,QAAU,UACVA,EAAA,MAAQ,QACRA,EAAA,UAAY,YACZA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,UAAY,YACZA,EAAA,MAAQ,QACRA,EAAA,SAAW,WATDA,IAAAA,GAAA,CAAA,CAAA,EAqBZ,MAAMC,EAASC,EAAM,WAAW,SAA4BC,EAAuBC,EAAsC,CACvH,KAAM,CAAE,QAAAC,EAAU,OAAuB,KAAAC,EAAM,UAAAC,GAAcJ,EACvDK,EAAUH,IAAY,aAA8BA,IAAY,SAA0BA,IAAY,WACtGI,EAAcJ,IAAY,YAC1BK,EAAmBC,EAAWC,EAAgB,UAAc,CAAE,CAACA,EAAgB,yBAA0BH,CAAY,EAAGF,CAAS,EACjIM,EAAaF,EAAWC,EAAgB,eAAmB,CAC/DJ,EAAUI,EAAgB,wBAA0BA,EAAgB,mBAAmBP,IAAA,CACxF,EACKS,EAAeH,EAAWC,EAAgB,iBAAqB,CAAE,CAACA,EAAgB,2BAA4BJ,CAAS,CAAA,EAC7H,IAAIO,EAA8B,KAElC,OAAIV,IAAY,YACdU,EAAWb,EAAA,cAAAc,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASC,CAAA,CAAM,EAC9Cb,IAAY,QACrBU,EAAWb,EAAA,cAAAc,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASE,CAAA,CAAO,EAC/Cd,IAAY,aACrBU,EAAWb,EAAA,cAAAc,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASG,EAAU,MAAOC,EAAS,SAAU,GAAG,CAAA,CAAG,GAI1FnB,EAAA,cAAA,MAAA,CAAI,UAAWQ,EAAkB,mBAAkBY,EAAY,SAAA,EAC7DpB,EAAA,cAAA,OAAA,CAAK,UAAWW,CAAa,EAAAE,CAAQ,EACrCb,EAAA,cAAA,OAAA,CAAK,UAAWY,CAAA,EAAeR,CAAK,CACvC,CAEJ,CAAC"}
+{"version":3,"file":"index.js","sources":["../../../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport statusDotStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\nimport { Icon } from '../Icons/Icon';\nimport Undo from '../Icons/Undo';\nimport { getColor } from '../../theme/currys';\nimport Group from '../Icons/Group';\nimport NoAccess from '../Icons/NoAccess';\nimport { IconSize } from '../..';\n\nexport enum StatusDotVariant {\n  info = 'info',\n  warning = 'warning',\n  alert = 'alert',\n  cancelled = 'cancelled',\n  active = 'active',\n  transparent = 'transparent',\n  recurring = 'recurring',\n  group = 'group',\n  noaccess = 'noaccess',\n}\n\nexport interface StatusDotProps {\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n}\n\nconst Spacer = React.forwardRef(function SpacerForwardedRef(props: StatusDotProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { variant = StatusDotVariant.info, text, className } = props;\n  const hasIcon = variant === StatusDotVariant.recurring || variant === StatusDotVariant.group || variant === StatusDotVariant.noaccess;\n  const isCancelled = variant === StatusDotVariant.cancelled;\n  const statusDotClasses = classNames(statusDotStyles['statusdot'], { [statusDotStyles['statusdot--cancelled']]: isCancelled }, className);\n  const dotClasses = classNames(statusDotStyles['statusdot__dot'], [\n    hasIcon ? statusDotStyles[`statusdot__dot--icon`] : statusDotStyles[`statusdot__dot--${variant}`],\n  ]);\n  const labelClasses = classNames(statusDotStyles['statusdot__label'], { [statusDotStyles[`statusdot__label--icon`]]: hasIcon });\n  let svgIcon: JSX.Element | null = null;\n\n  if (variant === StatusDotVariant.recurring) {\n    svgIcon = <Icon size={IconSize.XXSmall} svgIcon={Undo} />;\n  } else if (variant === StatusDotVariant.group) {\n    svgIcon = <Icon size={IconSize.XXSmall} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    svgIcon = <Icon size={IconSize.XXSmall} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  }\n\n  return (\n    <div className={statusDotClasses} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses}>{svgIcon}</span>\n      <span className={labelClasses}>{text}</span>\n    </div>\n  );\n});\n\nexport default Spacer;\n"],"names":["StatusDotVariant","Spacer","React","props","ref","variant","text","className","hasIcon","isCancelled","statusDotClasses","classNames","statusDotStyles","dotClasses","labelClasses","svgIcon","Icon","IconSize","Undo","Group","NoAccess","getColor","AnalyticsId"],"mappings":"0kBAaY,IAAAA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,QAAU,UACVA,EAAA,MAAQ,QACRA,EAAA,UAAY,YACZA,EAAA,OAAS,SACTA,EAAA,YAAc,cACdA,EAAA,UAAY,YACZA,EAAA,MAAQ,QACRA,EAAA,SAAW,WATDA,IAAAA,GAAA,CAAA,CAAA,EAqBZ,MAAMC,EAASC,EAAM,WAAW,SAA4BC,EAAuBC,EAAsC,CACvH,KAAM,CAAE,QAAAC,EAAU,OAAuB,KAAAC,EAAM,UAAAC,GAAcJ,EACvDK,EAAUH,IAAY,aAA8BA,IAAY,SAA0BA,IAAY,WACtGI,EAAcJ,IAAY,YAC1BK,EAAmBC,EAAWC,EAAgB,UAAc,CAAE,CAACA,EAAgB,yBAA0BH,CAAY,EAAGF,CAAS,EACjIM,EAAaF,EAAWC,EAAgB,eAAmB,CAC/DJ,EAAUI,EAAgB,wBAA0BA,EAAgB,mBAAmBP,IAAA,CACxF,EACKS,EAAeH,EAAWC,EAAgB,iBAAqB,CAAE,CAACA,EAAgB,2BAA4BJ,CAAS,CAAA,EAC7H,IAAIO,EAA8B,KAElC,OAAIV,IAAY,YACdU,EAAWb,EAAA,cAAAc,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASC,CAAA,CAAM,EAC9Cb,IAAY,QACrBU,EAAWb,EAAA,cAAAc,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASE,CAAA,CAAO,EAC/Cd,IAAY,aACrBU,EAAWb,EAAA,cAAAc,EAAA,CAAK,KAAMC,EAAS,QAAS,QAASG,EAAU,MAAOC,EAAS,SAAU,GAAG,CAAA,CAAG,GAI1FnB,EAAA,cAAA,MAAA,CAAI,UAAWQ,EAAkB,mBAAkBY,EAAY,SAAA,EAC7DpB,EAAA,cAAA,OAAA,CAAK,UAAWW,CAAa,EAAAE,CAAQ,EACrCb,EAAA,cAAA,OAAA,CAAK,UAAWY,CAAA,EAAeR,CAAK,CACvC,CAEJ,CAAC"}

package/components/Table/TableExpandedRow/index.js

@@ -1,2 +1,2 @@
-import"../../../TableExpandedRow.js";import{T as q,T as v}from"../../../TableExpandedRow.js";import"react";import"classnames";import"../styles.module.scss";import"../../../Button.js";import"../../../constants.js";import"../../../uuid.js";import"../../../theme/currys/color.js";import"../../../theme/index.js";import"../../../theme/palette.js";import"../../../theme/spacers.js";import"../../../theme/grid.js";import"../../Icons/Icon.js";import"../../../hooks/useUuid.js";import"../../../hooks/useHover.js";import"../../../hooks/useIcons.js";import"../../../hooks/useBreakpoint.js";import"../../Button/styles.module.scss";import"../../Icons/ArrowRight.js";import"../../../hooks/useSize.js";import"../../../debounce.js";import"../../Icons/ChevronUp.js";export{q as TableExpandedRow,v as default};
+import"../../../TableExpandedRow.js";import{T as v,T as y}from"../../../TableExpandedRow.js";import"react";import"classnames";import"../styles.module.scss";import"../../../Button.js";import"../../../constants.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"../../Icons/Icon.js";import"../../../hooks/useUuid.js";import"../../../uuid.js";import"../../../hooks/useHover.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"../../Icons/ChevronUp.js";export{v as TableExpandedRow,y as default};
 //# sourceMappingURL=index.js.map

package/components/Table/TableExpanderCell/index.js

@@ -1,2 +1,2 @@
-import"../../../TableExpanderCell.js";import{T as w,T as y}from"../../../TableExpanderCell.js";import"react";import"classnames";import"../styles.module.scss";import"../../Icons/Icon.js";import"../../../constants.js";import"../../../hooks/useUuid.js";import"../../../uuid.js";import"../../../Button.js";import"../../../theme/currys/color.js";import"../../../theme/index.js";import"../../../theme/palette.js";import"../../../theme/spacers.js";import"../../../theme/grid.js";import"../../../hooks/useHover.js";import"../../../hooks/useIcons.js";import"../../../hooks/useBreakpoint.js";import"../../Button/styles.module.scss";import"../../Icons/ArrowRight.js";import"../../../hooks/useSize.js";import"../../../debounce.js";import"../../Icons/ChevronDown.js";import"../../Icons/ChevronUp.js";export{w as TableExpanderCell,y as default};
+import"../../../TableExpanderCell.js";import{T as y,T as z}from"../../../TableExpanderCell.js";import"react";import"classnames";import"../styles.module.scss";import"../../Icons/Icon.js";import"../../../constants.js";import"../../../hooks/useUuid.js";import"../../../uuid.js";import"../../../utils/environment.js";import"../../../Button.js";import"../../../theme/currys/color.js";import"../../../theme/index.js";import"../../../theme/palette.js";import"../../../theme/spacers.js";import"../../../theme/grid.js";import"../../../hooks/useHover.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"../../Icons/ChevronDown.js";import"../../Icons/ChevronUp.js";export{y as TableExpanderCell,z as default};
 //# sourceMappingURL=index.js.map

package/components/Table/TableHeadCell/index.js

@@ -1,2 +1,2 @@
-import"../../../TableHeadCell.js";import{S as b,T as C,T as H}from"../../../TableHeadCell.js";import"react";import"classnames";import"../styles.module.scss";import"../../Icons/Icon.js";import"../../../constants.js";import"../../../hooks/useUuid.js";import"../../../uuid.js";import"../../Icons/ArrowUp.js";import"../../Icons/ArrowDown.js";export{b as SortDirection,C as TableHeadCell,H as default};
+import"../../../TableHeadCell.js";import{S as C,T as H,T as S}from"../../../TableHeadCell.js";import"react";import"classnames";import"../styles.module.scss";import"../../Icons/Icon.js";import"../../../constants.js";import"../../../hooks/useUuid.js";import"../../../uuid.js";import"../../../utils/environment.js";import"../../Icons/ArrowUp.js";import"../../Icons/ArrowDown.js";export{C as SortDirection,H as TableHeadCell,S as default};
 //# sourceMappingURL=index.js.map

package/components/Table/TableRow/index.js

@@ -1,2 +1,2 @@
-import"../../../TableRow.js";import{T as y,T as z}from"../../../TableRow.js";import"react";import"classnames";import"../styles.module.scss";import"../../../Button.js";import"../../../constants.js";import"../../../uuid.js";import"../../../theme/currys/color.js";import"../../../theme/index.js";import"../../../theme/palette.js";import"../../../theme/spacers.js";import"../../../theme/grid.js";import"../../Icons/Icon.js";import"../../../hooks/useUuid.js";import"../../../hooks/useHover.js";import"../../../hooks/useIcons.js";import"../../../hooks/useBreakpoint.js";import"../../Button/styles.module.scss";import"../../Icons/ArrowRight.js";import"../../../hooks/useSize.js";import"../../../debounce.js";import"../../Icons/ChevronUp.js";import"../../Icons/ChevronDown.js";export{y as TableRow,z as default};
+import"../../../TableRow.js";import{T as z,T as A}from"../../../TableRow.js";import"react";import"classnames";import"../styles.module.scss";import"../../../Button.js";import"../../../constants.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"../../Icons/Icon.js";import"../../../hooks/useUuid.js";import"../../../uuid.js";import"../../../hooks/useHover.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"../../Icons/ChevronUp.js";import"../../Icons/ChevronDown.js";export{z as TableRow,A as default};
 //# sourceMappingURL=index.js.map

package/components/Table/index.js

@@ -1,2 +1,2 @@
-import r,{useRef as b}from"react";import n from"classnames";import e from"./styles.module.scss";import{AnalyticsId as f}from"../../constants.js";import{H as T}from"../../HorizontalScroll.js";import{useSize as d}from"../../hooks/useSize.js";import{T as X}from"../../TableBody.js";import{T as Z,a as _}from"../../TableCell.js";import{T as V}from"../../TableExpandedRow.js";import{T as to}from"../../TableExpanderCell.js";import{H as eo,T as ao}from"../../TableHead.js";import{S as mo,T as io}from"../../TableHeadCell.js";import{T as so}from"../../TableRow.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../HorizontalScroll/styles.module.scss";import"../../debounce.js";import"../../Button.js";import"../../uuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../Icons/ChevronUp.js";import"../Icons/ChevronDown.js";import"../Icons/ArrowUp.js";import"../Icons/ArrowDown.js";var x=(o=>(o.horizontalscroll="horizontalscroll",o.block="block",o))(x||{});const P=function({id:a,testId:l,className:m,children:i,smallViewportVariant:p="horizontalscroll"}){const t=b(null),{width:s=0}=d(t)||{},c=n(e.table,{[e["table--collapse2col"]]:p==="block"},m);return r.createElement(T,{childWidth:s},r.createElement("table",{className:c,id:a,"data-testid":l,"data-analyticsid":f.Table,ref:t},i))};export{eo as HeaderCategory,x as SmallViewportVariant,mo as SortDirection,P as Table,X as TableBody,Z as TableCell,V as TableExpandedRow,to as TableExpanderCell,ao as TableHead,io as TableHeadCell,so as TableRow,_ as TextAlign,P as default};
+import r,{useRef as b}from"react";import n from"classnames";import e from"./styles.module.scss";import{AnalyticsId as f}from"../../constants.js";import{H as T}from"../../HorizontalScroll.js";import{useSize as d}from"../../hooks/useSize.js";import{T as Y}from"../../TableBody.js";import{T as _,a as $}from"../../TableCell.js";import{T as oo}from"../../TableExpandedRow.js";import{T as ro}from"../../TableExpanderCell.js";import{H as ao,T as lo}from"../../TableHead.js";import{S as io,T as po}from"../../TableHeadCell.js";import{T as co}from"../../TableRow.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../HorizontalScroll/styles.module.scss";import"../../utils/debounce.js";import"../../Button.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"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../Icons/ChevronUp.js";import"../Icons/ChevronDown.js";import"../Icons/ArrowUp.js";import"../Icons/ArrowDown.js";var x=(o=>(o.horizontalscroll="horizontalscroll",o.block="block",o))(x||{});const Q=function({id:a,testId:l,className:m,children:i,smallViewportVariant:p="horizontalscroll"}){const t=b(null),{width:s=0}=d(t)||{},c=n(e.table,{[e["table--collapse2col"]]:p==="block"},m);return r.createElement(T,{childWidth:s},r.createElement("table",{className:c,id:a,"data-testid":l,"data-analyticsid":f.Table,ref:t},i))};export{ao as HeaderCategory,x as SmallViewportVariant,io as SortDirection,Q as Table,Y as TableBody,_ as TableCell,oo as TableExpandedRow,ro as TableExpanderCell,lo as TableHead,po as TableHeadCell,co as TableRow,$ as TextAlign,Q as default};
 //# sourceMappingURL=index.js.map

package/components/Table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport classNames from 'classnames';\n\nimport tableStyles from './styles.module.scss';\n\nimport { AnalyticsId } from '../../constants';\nimport HorizontalScroll from '../HorizontalScroll';\nimport { useSize } from '../../hooks/useSize';\n\nexport enum SmallViewportVariant {\n  /**\n   * Show horizontal scrollbar when table is too big for the screen\n   */\n  horizontalscroll = 'horizontalscroll',\n  /**\n   * Collapse to two columns on small screens\n   */\n  block = 'block',\n}\n\nexport interface Props {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Type of table view om small devices */\n  smallViewportVariant?: SmallViewportVariant;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n}\n\nexport const Table = function Table({\n  id,\n  testId,\n  className,\n  children,\n  smallViewportVariant = SmallViewportVariant.horizontalscroll,\n}: Props) {\n  const tableRef = useRef<HTMLTableElement>(null);\n  const { width: tableWidth = 0 } = useSize(tableRef) || {};\n  const tableClass = classNames(\n    tableStyles['table'],\n    { [tableStyles['table--collapse2col']]: smallViewportVariant === SmallViewportVariant.block },\n    className\n  );\n\n  return (\n    <HorizontalScroll childWidth={tableWidth}>\n      <table className={tableClass} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Table} ref={tableRef}>\n        {children}\n      </table>\n    </HorizontalScroll>\n  );\n};\n\nexport default Table;\n"],"names":["SmallViewportVariant","Table","id","testId","className","children","smallViewportVariant","tableRef","useRef","tableWidth","useSize","tableClass","classNames","tableStyles","React","HorizontalScroll","AnalyticsId"],"mappings":"4uCASY,IAAAA,GAAAA,IAIVA,EAAA,iBAAmB,mBAInBA,EAAA,MAAQ,QAREA,IAAAA,GAAA,CAAA,CAAA,EAwBC,MAAAC,EAAQ,SAAe,CAClC,GAAAC,EACA,OAAAC,EACA,UAAAC,EACA,SAAAC,EACA,qBAAAC,EAAuB,kBACzB,EAAU,CACF,MAAAC,EAAWC,EAAyB,IAAI,EACxC,CAAE,MAAOC,EAAa,GAAMC,EAAQH,CAAQ,GAAK,GACjDI,EAAaC,EACjBC,EAAY,MACZ,CAAE,CAACA,EAAY,wBAAyBP,IAAyB,OAA2B,EAC5FF,CAAA,EAGF,OACGU,EAAA,cAAAC,EAAA,CAAiB,WAAYN,CAAA,EAC3BK,EAAA,cAAA,QAAA,CAAM,UAAWH,EAAY,GAAAT,EAAQ,cAAaC,EAAQ,mBAAkBa,EAAY,MAAO,IAAKT,CAAA,EAClGF,CACH,CACF,CAEJ"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport classNames from 'classnames';\n\nimport tableStyles from './styles.module.scss';\n\nimport { AnalyticsId } from '../../constants';\nimport HorizontalScroll from '../HorizontalScroll';\nimport { useSize } from '../../hooks/useSize';\n\nexport enum SmallViewportVariant {\n  /**\n   * Show horizontal scrollbar when table is too big for the screen\n   */\n  horizontalscroll = 'horizontalscroll',\n  /**\n   * Collapse to two columns on small screens\n   */\n  block = 'block',\n}\n\nexport interface Props {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Type of table view om small devices */\n  smallViewportVariant?: SmallViewportVariant;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n}\n\nexport const Table = function Table({\n  id,\n  testId,\n  className,\n  children,\n  smallViewportVariant = SmallViewportVariant.horizontalscroll,\n}: Props) {\n  const tableRef = useRef<HTMLTableElement>(null);\n  const { width: tableWidth = 0 } = useSize(tableRef) || {};\n  const tableClass = classNames(\n    tableStyles['table'],\n    { [tableStyles['table--collapse2col']]: smallViewportVariant === SmallViewportVariant.block },\n    className\n  );\n\n  return (\n    <HorizontalScroll childWidth={tableWidth}>\n      <table className={tableClass} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Table} ref={tableRef}>\n        {children}\n      </table>\n    </HorizontalScroll>\n  );\n};\n\nexport default Table;\n"],"names":["SmallViewportVariant","Table","id","testId","className","children","smallViewportVariant","tableRef","useRef","tableWidth","useSize","tableClass","classNames","tableStyles","React","HorizontalScroll","AnalyticsId"],"mappings":"sxCASY,IAAAA,GAAAA,IAIVA,EAAA,iBAAmB,mBAInBA,EAAA,MAAQ,QAREA,IAAAA,GAAA,CAAA,CAAA,EAwBC,MAAAC,EAAQ,SAAe,CAClC,GAAAC,EACA,OAAAC,EACA,UAAAC,EACA,SAAAC,EACA,qBAAAC,EAAuB,kBACzB,EAAU,CACF,MAAAC,EAAWC,EAAyB,IAAI,EACxC,CAAE,MAAOC,EAAa,GAAMC,EAAQH,CAAQ,GAAK,GACjDI,EAAaC,EACjBC,EAAY,MACZ,CAAE,CAACA,EAAY,wBAAyBP,IAAyB,OAA2B,EAC5FF,CAAA,EAGF,OACGU,EAAA,cAAAC,EAAA,CAAiB,WAAYN,CAAA,EAC3BK,EAAA,cAAA,QAAA,CAAM,UAAWH,EAAY,GAAAT,EAAQ,cAAaC,EAAQ,mBAAkBa,EAAY,MAAO,IAAKT,CAAA,EAClGF,CACH,CACF,CAEJ"}

package/components/Tag/index.js

@@ -1,2 +1,2 @@
-import n from"react";import u from"classnames";import{Icon as g}from"../Icons/Icon.js";import{AnalyticsId as p,IconSize as v}from"../../constants.js";import{palette as f}from"../../theme/palette.js";import e from"./styles.module.scss";import{useHover as I}from"../../hooks/useHover.js";import y from"../Icons/Undo.js";import b from"../Icons/X.js";import"../../hooks/useUuid.js";import"../../uuid.js";var E=(t=>(t.medium="medium",t.large="large",t))(E||{}),X=(t=>(t.remove="remove",t.undo="undo",t))(X||{}),z=(t=>(t.normal="normal",t.oncolor="oncolor",t.emphasised="emphasised",t))(z||{});const C=t=>{const{children:s,size:m,color:r,variant:a,action:o,onClick:c,testId:i}=t,{hoverRef:l,isHovered:d}=I(),$=u(e.tag,e[`tag--${m}`],e[`tag--${o}`],e["tag--has-action"],o==="remove"&&[e[`tag--${r}`],e[`tag--${a}`]]),h=()=>{switch(o){case"remove":return b;case"undo":return y}};return n.createElement("button",{className:$,onClick:c,ref:l,type:"button","data-testid":i,"data-analyticsid":p.Tag},s,n.createElement(g,{svgIcon:h(),size:v.XXSmall,color:f[`${o==="undo"?"blueberry":r}800`],isHovered:d}))},q=t=>{const{children:s,size:m="medium",color:r="blueberry",svgIcon:a,variant:o="normal",action:c,onClick:i,testId:l}=t,d=u(e.tag,e[`tag--${m}`],e[`tag--${r}`],e[`tag--${o}`],{[e["tag--has-icon"]]:a});return c&&i?n.createElement(C,{size:m,color:r,variant:o,action:c,onClick:i,testId:l},s):n.createElement("span",{className:d,"data-testid":l,"data-analyticsid":p.Tag},a&&n.createElement(g,{svgIcon:a,size:v.XXSmall,color:f[`${r}800`],className:e.tag__icon}),s)};export{X as TagAction,E as TagSize,z as TagVariant,q as default};
+import n from"react";import u from"classnames";import{Icon as g}from"../Icons/Icon.js";import{AnalyticsId as p,IconSize as v}from"../../constants.js";import{palette as f}from"../../theme/palette.js";import e from"./styles.module.scss";import{useHover as I}from"../../hooks/useHover.js";import y from"../Icons/Undo.js";import b from"../Icons/X.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";var E=(t=>(t.medium="medium",t.large="large",t))(E||{}),X=(t=>(t.remove="remove",t.undo="undo",t))(X||{}),z=(t=>(t.normal="normal",t.oncolor="oncolor",t.emphasised="emphasised",t))(z||{});const C=t=>{const{children:s,size:m,color:r,variant:a,action:o,onClick:c,testId:i}=t,{hoverRef:l,isHovered:d}=I(),$=u(e.tag,e[`tag--${m}`],e[`tag--${o}`],e["tag--has-action"],o==="remove"&&[e[`tag--${r}`],e[`tag--${a}`]]),h=()=>{switch(o){case"remove":return b;case"undo":return y}};return n.createElement("button",{className:$,onClick:c,ref:l,type:"button","data-testid":i,"data-analyticsid":p.Tag},s,n.createElement(g,{svgIcon:h(),size:v.XXSmall,color:f[`${o==="undo"?"blueberry":r}800`],isHovered:d}))},B=t=>{const{children:s,size:m="medium",color:r="blueberry",svgIcon:a,variant:o="normal",action:c,onClick:i,testId:l}=t,d=u(e.tag,e[`tag--${m}`],e[`tag--${r}`],e[`tag--${o}`],{[e["tag--has-icon"]]:a});return c&&i?n.createElement(C,{size:m,color:r,variant:o,action:c,onClick:i,testId:l},s):n.createElement("span",{className:d,"data-testid":l,"data-analyticsid":p.Tag},a&&n.createElement(g,{svgIcon:a,size:v.XXSmall,color:f[`${r}800`],className:e.tag__icon}),s)};export{X as TagAction,E as TagSize,z as TagVariant,B as default};
 //# sourceMappingURL=index.js.map

package/components/Tag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { palette, PaletteNames } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\nimport { useHover } from '../../hooks/useHover';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\nimport { AnalyticsId } from '../../constants';\n\nexport enum TagSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum TagAction {\n  remove = 'remove',\n  undo = 'undo',\n}\n\nexport enum TagVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\n\nexport type TagColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\ninterface TagProps {\n  /** Sets the text of the tag */\n  children: string;\n  /** Sets the size of the tag. Default: small */\n  size?: keyof typeof TagSize;\n  /** Sets the background of the tag. Not used if action is \"undo\". Default: blueberry */\n  color?: TagColors;\n  /** Adds an icon to the tag. Not shown if action is set. */\n  svgIcon?: SvgIcon;\n  /* Changes the appearance of the tag. Not used if action is \"undo\". Default: normal */\n  variant?: keyof typeof TagVariant;\n  /* Makes the tag a clickable button that performs an action. onClick must also be set. */\n  action?: keyof typeof TagAction;\n  /* Called when action is set and the tag is clicked on. action must also be set. */\n  onClick?: () => void;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\ntype ActionTagProps = Required<Pick<TagProps, 'children' | 'size' | 'color' | 'variant' | 'action' | 'onClick'>> & Pick<TagProps, 'testId'>;\n\nconst ActionTag: React.FC<ActionTagProps> = props => {\n  const { children, size, color, variant, action, onClick, testId } = props;\n\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement>();\n\n  const tagClasses = cn(\n    styles.tag,\n    styles[`tag--${size}`],\n    styles[`tag--${action}`],\n    styles['tag--has-action'],\n    action === 'remove' && [styles[`tag--${color}`], styles[`tag--${variant}`]]\n  );\n\n  const getActionIcon = (): SvgIcon => {\n    switch (action) {\n      case 'remove':\n        return X;\n      case 'undo':\n        return Undo;\n    }\n  };\n\n  return (\n    <button className={tagClasses} onClick={onClick} ref={hoverRef} type=\"button\" data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {children}\n      <Icon\n        svgIcon={getActionIcon()}\n        size={IconSize.XXSmall}\n        color={palette[`${action === 'undo' ? 'blueberry' : color}800`]}\n        isHovered={isHovered}\n      />\n    </button>\n  );\n};\n\nconst Tag: React.FC<TagProps> = props => {\n  const { children, size = TagSize.medium, color = 'blueberry', svgIcon, variant = 'normal', action, onClick, testId } = props;\n\n  const tagClasses = cn(styles.tag, styles[`tag--${size}`], styles[`tag--${color}`], styles[`tag--${variant}`], {\n    [styles['tag--has-icon']]: svgIcon,\n  });\n\n  if (action && onClick) {\n    return (\n      <ActionTag size={size} color={color} variant={variant} action={action} onClick={onClick} testId={testId}>\n        {children}\n      </ActionTag>\n    );\n  }\n\n  return (\n    <span className={tagClasses} data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {svgIcon && <Icon svgIcon={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />}\n      {children}\n    </span>\n  );\n};\n\nexport default Tag;\n"],"names":["TagSize","TagAction","TagVariant","ActionTag","props","children","size","color","variant","action","onClick","testId","hoverRef","isHovered","useHover","tagClasses","cn","styles","getActionIcon","X","Undo","React","AnalyticsId","Icon","IconSize","palette","Tag","svgIcon"],"mappings":"gZAYY,IAAAA,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFEA,IAAAA,GAAA,CAAA,CAAA,EAKAC,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,KAAO,OAFGA,IAAAA,GAAA,CAAA,CAAA,EAKAC,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,QAAU,UACVA,EAAA,WAAa,aAHHA,IAAAA,GAAA,CAAA,CAAA,EA6BZ,MAAMC,EAA+CC,GAAA,CAC7C,KAAA,CAAE,SAAAC,EAAU,KAAAC,EAAM,MAAAC,EAAO,QAAAC,EAAS,OAAAC,EAAQ,QAAAC,EAAS,OAAAC,CAAW,EAAAP,EAE9D,CAAE,SAAAQ,EAAU,UAAAC,CAAU,EAAIC,EAA4B,EAEtDC,EAAaC,EACjBC,EAAO,IACPA,EAAO,QAAQX,KACfW,EAAO,QAAQR,KACfQ,EAAO,mBACPR,IAAW,UAAY,CAACQ,EAAO,QAAQV,KAAUU,EAAO,QAAQT,IAAU,CAAA,EAGtEU,EAAgB,IAAe,CACnC,OAAQT,EAAQ,CACd,IAAK,SACI,OAAAU,EACT,IAAK,OACI,OAAAC,CACX,CAAA,EAGF,OACGC,EAAA,cAAA,SAAA,CAAO,UAAWN,EAAY,QAAAL,EAAkB,IAAKE,EAAU,KAAK,SAAS,cAAaD,EAAQ,mBAAkBW,EAAY,GAAA,EAC9HjB,EACAgB,EAAA,cAAAE,EAAA,CACC,QAASL,EAAc,EACvB,KAAMM,EAAS,QACf,MAAOC,EAAQ,GAAGhB,IAAW,OAAS,YAAcF,QACpD,UAAAM,CACF,CAAA,CACF,CAEJ,EAEMa,EAAmCtB,GAAA,CACvC,KAAM,CAAE,SAAAC,EAAU,KAAAC,EAAO,SAAgB,MAAAC,EAAQ,YAAa,QAAAoB,EAAS,QAAAnB,EAAU,SAAU,OAAAC,EAAQ,QAAAC,EAAS,OAAAC,CAAA,EAAWP,EAEjHW,EAAaC,EAAGC,EAAO,IAAKA,EAAO,QAAQX,KAASW,EAAO,QAAQV,KAAUU,EAAO,QAAQT,KAAY,CAC5G,CAACS,EAAO,kBAAmBU,CAAA,CAC5B,EAED,OAAIlB,GAAUC,EAETW,EAAA,cAAAlB,EAAA,CAAU,KAAAG,EAAY,MAAAC,EAAc,QAAAC,EAAkB,OAAAC,EAAgB,QAAAC,EAAkB,OAAAC,CAAA,EACtFN,CACH,EAKDgB,EAAA,cAAA,OAAA,CAAK,UAAWN,EAAY,cAAaJ,EAAQ,mBAAkBW,EAAY,GAAA,EAC7EK,GAAYN,EAAA,cAAAE,EAAA,CAAK,QAAAI,EAAkB,KAAMH,EAAS,QAAS,MAAOC,EAAQ,GAAGlB,QAAa,UAAWU,EAAO,SAAA,CAAW,EACvHZ,CACH,CAEJ"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { palette, PaletteNames } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\nimport { useHover } from '../../hooks/useHover';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\nimport { AnalyticsId } from '../../constants';\n\nexport enum TagSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum TagAction {\n  remove = 'remove',\n  undo = 'undo',\n}\n\nexport enum TagVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\n\nexport type TagColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\ninterface TagProps {\n  /** Sets the text of the tag */\n  children: string;\n  /** Sets the size of the tag. Default: small */\n  size?: keyof typeof TagSize;\n  /** Sets the background of the tag. Not used if action is \"undo\". Default: blueberry */\n  color?: TagColors;\n  /** Adds an icon to the tag. Not shown if action is set. */\n  svgIcon?: SvgIcon;\n  /* Changes the appearance of the tag. Not used if action is \"undo\". Default: normal */\n  variant?: keyof typeof TagVariant;\n  /* Makes the tag a clickable button that performs an action. onClick must also be set. */\n  action?: keyof typeof TagAction;\n  /* Called when action is set and the tag is clicked on. action must also be set. */\n  onClick?: () => void;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\ntype ActionTagProps = Required<Pick<TagProps, 'children' | 'size' | 'color' | 'variant' | 'action' | 'onClick'>> & Pick<TagProps, 'testId'>;\n\nconst ActionTag: React.FC<ActionTagProps> = props => {\n  const { children, size, color, variant, action, onClick, testId } = props;\n\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement>();\n\n  const tagClasses = cn(\n    styles.tag,\n    styles[`tag--${size}`],\n    styles[`tag--${action}`],\n    styles['tag--has-action'],\n    action === 'remove' && [styles[`tag--${color}`], styles[`tag--${variant}`]]\n  );\n\n  const getActionIcon = (): SvgIcon => {\n    switch (action) {\n      case 'remove':\n        return X;\n      case 'undo':\n        return Undo;\n    }\n  };\n\n  return (\n    <button className={tagClasses} onClick={onClick} ref={hoverRef} type=\"button\" data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {children}\n      <Icon\n        svgIcon={getActionIcon()}\n        size={IconSize.XXSmall}\n        color={palette[`${action === 'undo' ? 'blueberry' : color}800`]}\n        isHovered={isHovered}\n      />\n    </button>\n  );\n};\n\nconst Tag: React.FC<TagProps> = props => {\n  const { children, size = TagSize.medium, color = 'blueberry', svgIcon, variant = 'normal', action, onClick, testId } = props;\n\n  const tagClasses = cn(styles.tag, styles[`tag--${size}`], styles[`tag--${color}`], styles[`tag--${variant}`], {\n    [styles['tag--has-icon']]: svgIcon,\n  });\n\n  if (action && onClick) {\n    return (\n      <ActionTag size={size} color={color} variant={variant} action={action} onClick={onClick} testId={testId}>\n        {children}\n      </ActionTag>\n    );\n  }\n\n  return (\n    <span className={tagClasses} data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {svgIcon && <Icon svgIcon={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />}\n      {children}\n    </span>\n  );\n};\n\nexport default Tag;\n"],"names":["TagSize","TagAction","TagVariant","ActionTag","props","children","size","color","variant","action","onClick","testId","hoverRef","isHovered","useHover","tagClasses","cn","styles","getActionIcon","X","Undo","React","AnalyticsId","Icon","IconSize","palette","Tag","svgIcon"],"mappings":"mbAYY,IAAAA,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFEA,IAAAA,GAAA,CAAA,CAAA,EAKAC,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,KAAO,OAFGA,IAAAA,GAAA,CAAA,CAAA,EAKAC,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,QAAU,UACVA,EAAA,WAAa,aAHHA,IAAAA,GAAA,CAAA,CAAA,EA6BZ,MAAMC,EAA+CC,GAAA,CAC7C,KAAA,CAAE,SAAAC,EAAU,KAAAC,EAAM,MAAAC,EAAO,QAAAC,EAAS,OAAAC,EAAQ,QAAAC,EAAS,OAAAC,CAAW,EAAAP,EAE9D,CAAE,SAAAQ,EAAU,UAAAC,CAAU,EAAIC,EAA4B,EAEtDC,EAAaC,EACjBC,EAAO,IACPA,EAAO,QAAQX,KACfW,EAAO,QAAQR,KACfQ,EAAO,mBACPR,IAAW,UAAY,CAACQ,EAAO,QAAQV,KAAUU,EAAO,QAAQT,IAAU,CAAA,EAGtEU,EAAgB,IAAe,CACnC,OAAQT,EAAQ,CACd,IAAK,SACI,OAAAU,EACT,IAAK,OACI,OAAAC,CACX,CAAA,EAGF,OACGC,EAAA,cAAA,SAAA,CAAO,UAAWN,EAAY,QAAAL,EAAkB,IAAKE,EAAU,KAAK,SAAS,cAAaD,EAAQ,mBAAkBW,EAAY,GAAA,EAC9HjB,EACAgB,EAAA,cAAAE,EAAA,CACC,QAASL,EAAc,EACvB,KAAMM,EAAS,QACf,MAAOC,EAAQ,GAAGhB,IAAW,OAAS,YAAcF,QACpD,UAAAM,CACF,CAAA,CACF,CAEJ,EAEMa,EAAmCtB,GAAA,CACvC,KAAM,CAAE,SAAAC,EAAU,KAAAC,EAAO,SAAgB,MAAAC,EAAQ,YAAa,QAAAoB,EAAS,QAAAnB,EAAU,SAAU,OAAAC,EAAQ,QAAAC,EAAS,OAAAC,CAAA,EAAWP,EAEjHW,EAAaC,EAAGC,EAAO,IAAKA,EAAO,QAAQX,KAASW,EAAO,QAAQV,KAAUU,EAAO,QAAQT,KAAY,CAC5G,CAACS,EAAO,kBAAmBU,CAAA,CAC5B,EAED,OAAIlB,GAAUC,EAETW,EAAA,cAAAlB,EAAA,CAAU,KAAAG,EAAY,MAAAC,EAAc,QAAAC,EAAkB,OAAAC,EAAgB,QAAAC,EAAkB,OAAAC,CAAA,EACtFN,CACH,EAKDgB,EAAA,cAAA,OAAA,CAAK,UAAWN,EAAY,cAAaJ,EAAQ,mBAAkBW,EAAY,GAAA,EAC7EK,GAAYN,EAAA,cAAAE,EAAA,CAAK,QAAAI,EAAkB,KAAMH,EAAS,QAAS,MAAOC,EAAQ,GAAGlB,QAAa,UAAWU,EAAO,SAAA,CAAW,EACvHZ,CACH,CAEJ"}

package/components/Textarea/Textarea.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormMode } from '../../constants';
-interface TextareaProps extends Pick<React.InputHTMLAttributes<HTMLTextAreaElement>, 'autoFocus' | 'disabled' | 'name' | 'autoComplete' | 'placeholder' | 'readOnly' | 'required' | 'defaultValue'> {
+interface TextareaProps extends Pick<React.InputHTMLAttributes<HTMLTextAreaElement>, 'autoFocus' | 'disabled' | 'name' | 'autoComplete' | 'placeholder' | 'readOnly' | 'required' | 'defaultValue' | 'onChange'> {
     /** max character limit in textarea  */
     maxCharacters?: number;
     /** The text is displayed in the end of the text-counter */

package/components/Textarea/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAE,QAAQ,EAAe,MAAM,iBAAiB,CAAC;AAKxD,UAAU,aACR,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,EAC9C,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,cAAc,GAAG,aAAa,GAAG,UAAU,GAAG,UAAU,GAAG,cAAc,CAC9G;IACD,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACtC;AAUD,QAAA,MAAM,QAAQ,2FA+IZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAA2C,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAIpF,UAAU,aACR,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,EAC9C,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,cAAc,GAAG,aAAa,GAAG,UAAU,GAAG,UAAU,GAAG,cAAc,GAAG,UAAU,CAC3H;IACD,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACtC;AAUD,QAAA,MAAM,QAAQ,2FAyJZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/components/Textarea/componentdata.json

@@ -1 +1 @@
-{"props":{"maxCharacters":{"defaultValue":null,"description":"max character limit in textarea","name":"maxCharacters","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"number"}},"maxText":{"defaultValue":null,"description":"The text is displayed in the end of the text-counter","name":"maxText","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"string"}},"width":{"defaultValue":null,"description":"Width of textarea in characters (approximate)","name":"width","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"number"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"string"}},"marginBottom":{"defaultValue":null,"description":"If true, the component will have a bottom margin.","name":"marginBottom","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"boolean"}},"transparent":{"defaultValue":null,"description":"If true, the component will be transparent.","name":"transparent","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"boolean"}},"mode":{"defaultValue":null,"description":"Changes the visuals of the textarea","name":"mode","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"enum","raw":"\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"ondark\" | \"oninvalid\"","value":[{"value":"\"onwhite\""},{"value":"\"ongrey\""},{"value":"\"onblueberry\""},{"value":"\"ondark\""},{"value":"\"oninvalid\""}]}},"label":{"defaultValue":null,"description":"Label of the input","name":"label","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"string"}},"textareaId":{"defaultValue":null,"description":"id of the textarea","name":"textareaId","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"string"}},"maxRows":{"defaultValue":null,"description":"max rows","name":"maxRows","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"number"}},"minRows":{"defaultValue":null,"description":"min rows","name":"minRows","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"number"}},"grow":{"defaultValue":null,"description":"auto-grows until maxRows","name":"grow","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"boolean"}},"errorText":{"defaultValue":null,"description":"Error text to show above the component","name":"errorText","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"string"}},"afterLabelChildren":{"defaultValue":null,"description":"Component shown after label","name":"afterLabelChildren","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"ReactNode"}},"belowLabelChildren":{"defaultValue":null,"description":"Component shown under label","name":"belowLabelChildren","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"ReactNode"}},"autoFocus":{"defaultValue":null,"description":"","name":"autoFocus","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"disabled":{"defaultValue":null,"description":"","name":"disabled","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"name":{"defaultValue":null,"description":"","name":"name","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"autoComplete":{"defaultValue":null,"description":"","name":"autoComplete","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"placeholder":{"defaultValue":null,"description":"","name":"placeholder","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"readOnly":{"defaultValue":null,"description":"","name":"readOnly","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"required":{"defaultValue":null,"description":"","name":"required","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"defaultValue":{"defaultValue":null,"description":"","name":"defaultValue","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"}],"required":false,"type":{"name":"string | number | readonly string[]"}}}}
+{"props":{"maxCharacters":{"defaultValue":null,"description":"max character limit in textarea","name":"maxCharacters","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"number"}},"maxText":{"defaultValue":null,"description":"The text is displayed in the end of the text-counter","name":"maxText","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"string"}},"width":{"defaultValue":null,"description":"Width of textarea in characters (approximate)","name":"width","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"number"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"string"}},"marginBottom":{"defaultValue":null,"description":"If true, the component will have a bottom margin.","name":"marginBottom","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"boolean"}},"transparent":{"defaultValue":null,"description":"If true, the component will be transparent.","name":"transparent","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"boolean"}},"mode":{"defaultValue":null,"description":"Changes the visuals of the textarea","name":"mode","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"enum","raw":"\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"ondark\" | \"oninvalid\"","value":[{"value":"\"onwhite\""},{"value":"\"ongrey\""},{"value":"\"onblueberry\""},{"value":"\"ondark\""},{"value":"\"oninvalid\""}]}},"label":{"defaultValue":null,"description":"Label of the input","name":"label","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"string"}},"textareaId":{"defaultValue":null,"description":"id of the textarea","name":"textareaId","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"string"}},"maxRows":{"defaultValue":null,"description":"max rows","name":"maxRows","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"number"}},"minRows":{"defaultValue":null,"description":"min rows","name":"minRows","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"number"}},"grow":{"defaultValue":null,"description":"auto-grows until maxRows","name":"grow","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"boolean"}},"errorText":{"defaultValue":null,"description":"Error text to show above the component","name":"errorText","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"string"}},"afterLabelChildren":{"defaultValue":null,"description":"Component shown after label","name":"afterLabelChildren","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"ReactNode"}},"belowLabelChildren":{"defaultValue":null,"description":"Component shown under label","name":"belowLabelChildren","parent":{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"},"declarations":[{"fileName":"src/components/Textarea/Textarea.tsx","name":"TextareaProps"}],"required":false,"type":{"name":"ReactNode"}},"autoFocus":{"defaultValue":null,"description":"","name":"autoFocus","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"disabled":{"defaultValue":null,"description":"","name":"disabled","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"name":{"defaultValue":null,"description":"","name":"name","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"autoComplete":{"defaultValue":null,"description":"","name":"autoComplete","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"placeholder":{"defaultValue":null,"description":"","name":"placeholder","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"readOnly":{"defaultValue":null,"description":"","name":"readOnly","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"required":{"defaultValue":null,"description":"","name":"required","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"defaultValue":{"defaultValue":null,"description":"","name":"defaultValue","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"}],"required":false,"type":{"name":"string | number | readonly string[]"}},"onChange":{"defaultValue":null,"description":"","name":"onChange","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"ChangeEventHandler<HTMLTextAreaElement>"}}}}

package/components/Textarea/index.js

@@ -1,2 +1,2 @@
-import"../../Textarea.js";import{T as n}from"../../Textarea.js";import"react";import"classnames";import"./styles.module.scss";import"../../constants.js";import"../../uuid.js";import"../../Input.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../Input/styles.module.scss";export{n as default};
+import"../../Textarea.js";import{T as d}from"../../Textarea.js";import"react";import"classnames";import"./styles.module.scss";import"../../constants.js";import"../../uuid.js";import"../../utils/environment.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";export{d as default};
 //# sourceMappingURL=index.js.map

package/components/Tile/index.js

@@ -1,2 +1,2 @@
-import e from"react";import f from"classnames";import{AnalyticsId as T,IconSize as w}from"../../constants.js";import"../Icons/Icon.js";import t from"./styles.module.scss";import{useHover as C}from"../../hooks/useHover.js";import"../../hooks/useUuid.js";import"../../uuid.js";const k=e.forwardRef((l,i)=>{const{children:o,className:s,htmlMarkup:n="span",highlighted:r,compact:c}=l,a=f(t.tile__title,{[t["tile__title--highlighted"]]:r,[t["tile__title--compact"]]:c},s),m=n;return e.createElement(m,{className:a,ref:i},o)}),v=e.forwardRef((l,i)=>{const{icon:o,title:s,className:n="",description:r,fixed:c=!1,highlighted:a=!1,testId:m,htmlMarkup:p="a",...E}=l,{hoverRef:h,isHovered:_}=C(i),d=!r,b=f(t.tile,{[t["tile--fixed"]]:c,[t["tile--compact"]]:d,[t["tile--highlighted"]]:a,[t["tile--button"]]:p==="button"},n),N=f(t["title-wrapper"],{[t["title-wrapper--compact"]]:d}),u=()=>e.createElement(e.Fragment,null,e.createElement("div",{className:N},e.cloneElement(o,{size:w.Medium,isHovered:_,color:a?"white":"black"}),e.cloneElement(s,{highlighted:a,compact:d})),r?e.createElement("p",{className:t.tile__description},r):null),g={className:b,["data-testid"]:m,["data-analyticsid"]:T.Tile,...E};return e.createElement(e.Fragment,null,p==="a"&&e.createElement("a",{ref:h,rel:l.target==="_blank"?"noopener noreferrer":l.rel,...g},u()),p==="button"&&e.createElement("button",{ref:h,type:"button",...g},u()))});v.Title=k;export{v as Tile,v as default};
+import e from"react";import f from"classnames";import{AnalyticsId as T,IconSize as w}from"../../constants.js";import"../Icons/Icon.js";import t from"./styles.module.scss";import{useHover as C}from"../../hooks/useHover.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";const k=e.forwardRef((l,a)=>{const{children:o,className:s,htmlMarkup:n="span",highlighted:r,compact:c}=l,i=f(t.tile__title,{[t["tile__title--highlighted"]]:r,[t["tile__title--compact"]]:c},s),m=n;return e.createElement(m,{className:i,ref:a},o)}),v=e.forwardRef((l,a)=>{const{icon:o,title:s,className:n="",description:r,fixed:c=!1,highlighted:i=!1,testId:m,htmlMarkup:p="a",...E}=l,{hoverRef:h,isHovered:_}=C(a),d=!r,b=f(t.tile,{[t["tile--fixed"]]:c,[t["tile--compact"]]:d,[t["tile--highlighted"]]:i,[t["tile--button"]]:p==="button"},n),N=f(t["title-wrapper"],{[t["title-wrapper--compact"]]:d}),u=()=>e.createElement(e.Fragment,null,e.createElement("div",{className:N},e.cloneElement(o,{size:w.Medium,isHovered:_,color:i?"white":"black"}),e.cloneElement(s,{highlighted:i,compact:d})),r?e.createElement("p",{className:t.tile__description},r):null),g={className:b,["data-testid"]:m,["data-analyticsid"]:T.Tile,...E};return e.createElement(e.Fragment,null,p==="a"&&e.createElement("a",{ref:h,rel:l.target==="_blank"?"noopener noreferrer":l.rel,...g},u()),p==="button"&&e.createElement("button",{ref:h,type:"button",...g},u()))});v.Title=k;export{v as Tile,v as default};
 //# sourceMappingURL=index.js.map

package/components/Tile/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport { AnalyticsId, HTMLAnchorProps } from '../../constants';\nimport { TitleTags } from './../Title/Title';\nimport { IconSize } from '../Icons';\n\nimport tileStyles from './styles.module.scss';\nimport { useHover } from '../../hooks/useHover';\n\nexport type TileTags = 'button' | 'a';\n\ninterface TileProps extends HTMLAnchorProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\tSets the icon to be displayed inside the tile. */\n  icon: React.ReactElement;\n  /**\tSets the title to be displayed inside the tile. */\n  title: React.ReactElement;\n  /** Toggles the highlighted style of the tile. */\n  highlighted?: boolean;\n  /** Sets the description to be displayed inside the tile. */\n  description?: string;\n  /** Sets a fixed max and min width for the tile. */\n  fixed?: boolean;\n  /** Called when the tile is clicked on. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** HTML markup for tile. Default: a */\n  htmlMarkup?: TileTags;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface TileTitleProps {\n  children: React.ReactNode;\n  className?: string;\n  htmlMarkup?: TitleTags;\n  highlighted?: boolean;\n  compact?: boolean;\n}\n\nexport interface TileCompound extends React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLAnchorElement>> {\n  Title: React.ForwardRefExoticComponent<TileTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n}\n\nconst Title = React.forwardRef<HTMLHeadingElement, TileTitleProps>((props, ref) => {\n  const { children, className, htmlMarkup = 'span', highlighted, compact } = props;\n  const titleClasses = classNames(\n    tileStyles['tile__title'],\n    {\n      [tileStyles['tile__title--highlighted']]: highlighted,\n      [tileStyles['tile__title--compact']]: compact,\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  return (\n    <CustomTag className={titleClasses} ref={ref}>\n      {children}\n    </CustomTag>\n  );\n});\n\nexport const Tile = React.forwardRef<HTMLAnchorElement | HTMLButtonElement, TileProps>((props, ref) => {\n  const { icon, title, className = '', description, fixed = false, highlighted = false, testId, htmlMarkup = 'a', ...restProps } = props;\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>(\n    ref as React.RefObject<HTMLButtonElement | HTMLAnchorElement>\n  );\n  const compact = !description;\n  const tileClasses = classNames(\n    tileStyles.tile,\n    {\n      [tileStyles['tile--fixed']]: fixed,\n      [tileStyles['tile--compact']]: compact,\n      [tileStyles['tile--highlighted']]: highlighted,\n      [tileStyles['tile--button']]: htmlMarkup === 'button',\n    },\n    className\n  );\n  const tileTitleWrapperClasses = classNames(tileStyles['title-wrapper'], {\n    [tileStyles['title-wrapper--compact']]: compact,\n  });\n\n  const renderContent = () => (\n    <>\n      <div className={tileTitleWrapperClasses}>\n        {React.cloneElement(icon, { size: IconSize.Medium, isHovered, color: highlighted ? 'white' : 'black' })}\n        {React.cloneElement(title, { highlighted: highlighted, compact: compact })}\n      </div>\n      {description ? <p className={tileStyles.tile__description}>{description}</p> : null}\n    </>\n  );\n\n  const commonProps = {\n    className: tileClasses,\n    ['data-testid']: testId,\n    ['data-analyticsid']: AnalyticsId.Tile,\n    ...restProps,\n  };\n\n  return (\n    <>\n      {htmlMarkup === 'a' && (\n        <a\n          ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n          rel={props.target === '_blank' ? 'noopener noreferrer' : props.rel}\n          {...commonProps}\n        >\n          {renderContent()}\n        </a>\n      )}\n      {htmlMarkup === 'button' && (\n        <button ref={hoverRef as React.RefObject<HTMLButtonElement>} type=\"button\" {...commonProps}>\n          {renderContent()}\n        </button>\n      )}\n    </>\n  );\n}) as TileCompound;\n\nTile.Title = Title;\n\nexport default Tile;\n"],"names":["Title","React","props","ref","children","className","htmlMarkup","highlighted","compact","titleClasses","classNames","tileStyles","CustomTag","Tile","icon","title","description","fixed","testId","restProps","hoverRef","isHovered","useHover","tileClasses","tileTitleWrapperClasses","renderContent","IconSize","commonProps","AnalyticsId"],"mappings":"mRA6CA,MAAMA,EAAQC,EAAM,WAA+C,CAACC,EAAOC,IAAQ,CACjF,KAAM,CAAE,SAAAC,EAAU,UAAAC,EAAW,WAAAC,EAAa,OAAQ,YAAAC,EAAa,QAAAC,CAAY,EAAAN,EACrEO,EAAeC,EACnBC,EAAW,YACX,CACE,CAACA,EAAW,6BAA8BJ,EAC1C,CAACI,EAAW,yBAA0BH,CACxC,EACAH,CAAA,EAEIO,EAAYN,EAElB,OACGL,EAAA,cAAAW,EAAA,CAAU,UAAWH,EAAc,IAAAN,CAAA,EACjCC,CACH,CAEJ,CAAC,EAEYS,EAAOZ,EAAM,WAA6D,CAACC,EAAOC,IAAQ,CACrG,KAAM,CAAE,KAAAW,EAAM,MAAAC,EAAO,UAAAV,EAAY,GAAI,YAAAW,EAAa,MAAAC,EAAQ,GAAO,YAAAV,EAAc,GAAO,OAAAW,EAAQ,WAAAZ,EAAa,OAAQa,CAAc,EAAAjB,EAC3H,CAAE,SAAAkB,EAAU,UAAAC,CAAA,EAAcC,EAC9BnB,CAAA,EAEIK,EAAU,CAACQ,EACXO,EAAcb,EAClBC,EAAW,KACX,CACE,CAACA,EAAW,gBAAiBM,EAC7B,CAACN,EAAW,kBAAmBH,EAC/B,CAACG,EAAW,sBAAuBJ,EACnC,CAACI,EAAW,iBAAkBL,IAAe,QAC/C,EACAD,CAAA,EAEImB,EAA0Bd,EAAWC,EAAW,iBAAkB,CACtE,CAACA,EAAW,2BAA4BH,CAAA,CACzC,EAEKiB,EAAgB,IACpBxB,EAAA,cAAAA,EAAA,SAAA,KACGA,EAAA,cAAA,MAAA,CAAI,UAAWuB,CACb,EAAAvB,EAAM,aAAaa,EAAM,CAAE,KAAMY,EAAS,OAAQ,UAAAL,EAAW,MAAOd,EAAc,QAAU,QAAS,EACrGN,EAAM,aAAac,EAAO,CAAE,YAAAR,EAA0B,QAAAC,EAAkB,CAC3E,EACCQ,EAAef,EAAA,cAAA,IAAA,CAAE,UAAWU,EAAW,iBAAA,EAAoBK,CAAY,EAAO,IACjF,EAGIW,EAAc,CAClB,UAAWJ,EACX,CAAC,eAAgBL,EACjB,CAAC,oBAAqBU,EAAY,KAClC,GAAGT,CAAA,EAIH,OAAAlB,EAAA,cAAAA,EAAA,SAAA,KACGK,IAAe,KACbL,EAAA,cAAA,IAAA,CACC,IAAKmB,EACL,IAAKlB,EAAM,SAAW,SAAW,sBAAwBA,EAAM,IAC9D,GAAGyB,CAAA,EAEHF,EACH,CAAA,EAEDnB,IAAe,UACbL,EAAA,cAAA,SAAA,CAAO,IAAKmB,EAAgD,KAAK,SAAU,GAAGO,CAAA,EAC5EF,EACH,CAAA,CAEJ,CAEJ,CAAC,EAEDZ,EAAK,MAAQb"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport { AnalyticsId, HTMLAnchorProps } from '../../constants';\nimport { TitleTags } from './../Title/Title';\nimport { IconSize } from '../Icons';\n\nimport tileStyles from './styles.module.scss';\nimport { useHover } from '../../hooks/useHover';\n\nexport type TileTags = 'button' | 'a';\n\ninterface TileProps extends HTMLAnchorProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\tSets the icon to be displayed inside the tile. */\n  icon: React.ReactElement;\n  /**\tSets the title to be displayed inside the tile. */\n  title: React.ReactElement;\n  /** Toggles the highlighted style of the tile. */\n  highlighted?: boolean;\n  /** Sets the description to be displayed inside the tile. */\n  description?: string;\n  /** Sets a fixed max and min width for the tile. */\n  fixed?: boolean;\n  /** Called when the tile is clicked on. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** HTML markup for tile. Default: a */\n  htmlMarkup?: TileTags;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface TileTitleProps {\n  children: React.ReactNode;\n  className?: string;\n  htmlMarkup?: TitleTags;\n  highlighted?: boolean;\n  compact?: boolean;\n}\n\nexport interface TileCompound extends React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLAnchorElement>> {\n  Title: React.ForwardRefExoticComponent<TileTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n}\n\nconst Title = React.forwardRef<HTMLHeadingElement, TileTitleProps>((props, ref) => {\n  const { children, className, htmlMarkup = 'span', highlighted, compact } = props;\n  const titleClasses = classNames(\n    tileStyles['tile__title'],\n    {\n      [tileStyles['tile__title--highlighted']]: highlighted,\n      [tileStyles['tile__title--compact']]: compact,\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  return (\n    <CustomTag className={titleClasses} ref={ref}>\n      {children}\n    </CustomTag>\n  );\n});\n\nexport const Tile = React.forwardRef<HTMLAnchorElement | HTMLButtonElement, TileProps>((props, ref) => {\n  const { icon, title, className = '', description, fixed = false, highlighted = false, testId, htmlMarkup = 'a', ...restProps } = props;\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>(\n    ref as React.RefObject<HTMLButtonElement | HTMLAnchorElement>\n  );\n  const compact = !description;\n  const tileClasses = classNames(\n    tileStyles.tile,\n    {\n      [tileStyles['tile--fixed']]: fixed,\n      [tileStyles['tile--compact']]: compact,\n      [tileStyles['tile--highlighted']]: highlighted,\n      [tileStyles['tile--button']]: htmlMarkup === 'button',\n    },\n    className\n  );\n  const tileTitleWrapperClasses = classNames(tileStyles['title-wrapper'], {\n    [tileStyles['title-wrapper--compact']]: compact,\n  });\n\n  const renderContent = () => (\n    <>\n      <div className={tileTitleWrapperClasses}>\n        {React.cloneElement(icon, { size: IconSize.Medium, isHovered, color: highlighted ? 'white' : 'black' })}\n        {React.cloneElement(title, { highlighted: highlighted, compact: compact })}\n      </div>\n      {description ? <p className={tileStyles.tile__description}>{description}</p> : null}\n    </>\n  );\n\n  const commonProps = {\n    className: tileClasses,\n    ['data-testid']: testId,\n    ['data-analyticsid']: AnalyticsId.Tile,\n    ...restProps,\n  };\n\n  return (\n    <>\n      {htmlMarkup === 'a' && (\n        <a\n          ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n          rel={props.target === '_blank' ? 'noopener noreferrer' : props.rel}\n          {...commonProps}\n        >\n          {renderContent()}\n        </a>\n      )}\n      {htmlMarkup === 'button' && (\n        <button ref={hoverRef as React.RefObject<HTMLButtonElement>} type=\"button\" {...commonProps}>\n          {renderContent()}\n        </button>\n      )}\n    </>\n  );\n}) as TileCompound;\n\nTile.Title = Title;\n\nexport default Tile;\n"],"names":["Title","React","props","ref","children","className","htmlMarkup","highlighted","compact","titleClasses","classNames","tileStyles","CustomTag","Tile","icon","title","description","fixed","testId","restProps","hoverRef","isHovered","useHover","tileClasses","tileTitleWrapperClasses","renderContent","IconSize","commonProps","AnalyticsId"],"mappings":"sTA6CA,MAAMA,EAAQC,EAAM,WAA+C,CAACC,EAAOC,IAAQ,CACjF,KAAM,CAAE,SAAAC,EAAU,UAAAC,EAAW,WAAAC,EAAa,OAAQ,YAAAC,EAAa,QAAAC,CAAY,EAAAN,EACrEO,EAAeC,EACnBC,EAAW,YACX,CACE,CAACA,EAAW,6BAA8BJ,EAC1C,CAACI,EAAW,yBAA0BH,CACxC,EACAH,CAAA,EAEIO,EAAYN,EAElB,OACGL,EAAA,cAAAW,EAAA,CAAU,UAAWH,EAAc,IAAAN,CAAA,EACjCC,CACH,CAEJ,CAAC,EAEYS,EAAOZ,EAAM,WAA6D,CAACC,EAAOC,IAAQ,CACrG,KAAM,CAAE,KAAAW,EAAM,MAAAC,EAAO,UAAAV,EAAY,GAAI,YAAAW,EAAa,MAAAC,EAAQ,GAAO,YAAAV,EAAc,GAAO,OAAAW,EAAQ,WAAAZ,EAAa,OAAQa,CAAc,EAAAjB,EAC3H,CAAE,SAAAkB,EAAU,UAAAC,CAAA,EAAcC,EAC9BnB,CAAA,EAEIK,EAAU,CAACQ,EACXO,EAAcb,EAClBC,EAAW,KACX,CACE,CAACA,EAAW,gBAAiBM,EAC7B,CAACN,EAAW,kBAAmBH,EAC/B,CAACG,EAAW,sBAAuBJ,EACnC,CAACI,EAAW,iBAAkBL,IAAe,QAC/C,EACAD,CAAA,EAEImB,EAA0Bd,EAAWC,EAAW,iBAAkB,CACtE,CAACA,EAAW,2BAA4BH,CAAA,CACzC,EAEKiB,EAAgB,IACpBxB,EAAA,cAAAA,EAAA,SAAA,KACGA,EAAA,cAAA,MAAA,CAAI,UAAWuB,CACb,EAAAvB,EAAM,aAAaa,EAAM,CAAE,KAAMY,EAAS,OAAQ,UAAAL,EAAW,MAAOd,EAAc,QAAU,QAAS,EACrGN,EAAM,aAAac,EAAO,CAAE,YAAAR,EAA0B,QAAAC,EAAkB,CAC3E,EACCQ,EAAef,EAAA,cAAA,IAAA,CAAE,UAAWU,EAAW,iBAAA,EAAoBK,CAAY,EAAO,IACjF,EAGIW,EAAc,CAClB,UAAWJ,EACX,CAAC,eAAgBL,EACjB,CAAC,oBAAqBU,EAAY,KAClC,GAAGT,CAAA,EAIH,OAAAlB,EAAA,cAAAA,EAAA,SAAA,KACGK,IAAe,KACbL,EAAA,cAAA,IAAA,CACC,IAAKmB,EACL,IAAKlB,EAAM,SAAW,SAAW,sBAAwBA,EAAM,IAC9D,GAAGyB,CAAA,EAEHF,EACH,CAAA,EAEDnB,IAAe,UACbL,EAAA,cAAA,SAAA,CAAO,IAAKmB,EAAgD,KAAK,SAAU,GAAGO,CAAA,EAC5EF,EACH,CAAA,CAEJ,CAEJ,CAAC,EAEDZ,EAAK,MAAQb"}

package/components/Tooltip/Tooltip.d.ts

@@ -1,18 +1,17 @@
-import React, { ReactChild, ReactChildren, ReactNode } from 'react';
+import React from 'react';
 export interface TooltipProps {
-    /**Ordet som skal ha en tilhørende hjelpeblubb */
-    children: ReactNode;
-    /**Teksten som skal vises i hjelpeblubben */
-    description: ReactNode;
-    /**Valgfri test-id */
+    /** Ordet som skal ha en tilhørende tooltip */
+    children: string;
+    /** Teksten som skal vises i tooltip */
+    description: React.ReactNode;
+    /** Valgfri test-id */
     testId?: string;
 }
 export declare const Tooltip: React.FC<TooltipProps>;
-interface ContextProps {
-    children: ReactChild | ReactChildren;
-}
-export declare const useTooltipOpen: () => boolean;
-export declare const useTooltipOpenToggle: () => () => void;
-export declare const TooltipOpenProvider: ({ children }: ContextProps) => JSX.Element;
+export declare type TooltipContext = {
+    currentTooltip?: string;
+    setCurrentTooltip?: (id?: string) => void;
+};
+export declare const TooltipOpenProvider: React.FC;
 export default Tooltip;
 //# sourceMappingURL=Tooltip.d.ts.map

package/components/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA2C,UAAU,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQ7G,MAAM,WAAW,YAAY;IAC3B,iDAAiD;IACjD,QAAQ,EAAE,SAAS,CAAC;IACpB,4CAA4C;IAC5C,WAAW,EAAE,SAAS,CAAC;IACvB,qBAAqB;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAuF1C,CAAC;AAKF,UAAU,YAAY;IACpB,QAAQ,EAAE,UAAU,GAAG,aAAa,CAAC;CACtC;AACD,eAAO,MAAM,cAAc,eAE1B,CAAC;AACF,eAAO,MAAM,oBAAoB,kBAEhC,CAAC;AAEF,eAAO,MAAM,mBAAmB,iBAAkB,YAAY,gBAY7D,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAUvE,MAAM,WAAW,YAAY;IAC3B,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAgF1C,CAAC;AAEF,oBAAY,cAAc,GAAG;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;AAMF,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAIvC,CAAC;AAEF,eAAe,OAAO,CAAC"}