@helsenorge/designsystem-react 5.0.0-beta.1 → 5.0.0

package/components/Step/index.js

@@ -1,2 +1,2 @@
-import e from"react";import s from"classnames";import t from"./styles.module.scss";const _=({stepper:n,children:p,backButton:a,forwardButton:l,additionalButtons:m,cancelButton:r})=>e.createElement(e.Fragment,null,n&&e.createElement("div",{className:t.step__stepper},n),e.createElement("div",{className:t.step__content},p),e.createElement("div",{className:t.step__navigation},(a||l)&&e.createElement("div",{className:s(t.step__buttons,t["step__buttons--navigation"])},a&&e.cloneElement(a,{variant:"outline",wrapperClassName:s(t["step__button--back"])}),l&&e.cloneElement(l,{variant:"fill",wrapperClassName:s(t["step__button--forward"])})),m&&e.createElement("div",{className:s(t.step__buttons,t["step__buttons--additional"])},m),r&&e.createElement("div",{className:t.step__buttons},e.cloneElement(r,{variant:"borderless"})))),v=_;export{v as default};
+import t,{useRef as d}from"react";import s from"classnames";import{useSticky as h}from"../../hooks/useSticky.js";import e from"./styles.module.scss";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";const y=({stepper:m,children:f,backButton:n,forwardButton:i,additionalButtons:o,cancelButton:l,stickyButtons:a=!1})=>{const p=d(null),c=d(null),{isOutsideWindow:g,offsetHeight:r,contentWidth:_}=h(p,c,"bottom"),N=a&&g,v=n||i||o||l,E=s(!v&&e["step__content--no-navigation"]),b=s(e.step__navigation,!v&&e["step__navigation--hidden"],a&&e["step__navigation--has-sticky-buttons"],N&&e["step__navigation--is-sticky"]);return t.createElement("div",{className:s(a&&e["step--has-sticky-buttons"])},m&&t.createElement("div",{className:e.step__stepper},m),t.createElement("div",{className:E,ref:p,style:{paddingBottom:a&&r?`${r}px`:void 0}},f),t.createElement("div",{className:b,ref:c,style:{width:a&&_?`${_}px`:void 0}},(n||i)&&t.createElement("div",{className:s(e.step__buttons,e["step__buttons--navigation"])},n&&t.cloneElement(n,{variant:"outline",wrapperClassName:s(e["step__button--back"])}),i&&t.cloneElement(i,{variant:"fill",wrapperClassName:s(e["step__button--forward"])})),o&&t.createElement("div",{className:s(e.step__buttons,e["step__buttons--additional"])},o),l&&t.createElement("div",{className:e.step__buttons},t.cloneElement(l,{variant:"borderless"}))))},w=y;export{w as default};
 //# sourceMappingURL=index.js.map

package/components/Step/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Step/Step.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { ButtonProps } from '../Button';\nimport { StepperProps } from '../Stepper';\n\nimport styles from './styles.module.scss';\n\ninterface StepProps {\n  /** Stepper viser fremdriften */\n  stepper?: React.ReactElement<StepperProps>;\n  /** Innhold i steget */\n  children: React.ReactNode;\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n}\n\nconst Step: React.FC<StepProps> = ({ stepper, children, backButton, forwardButton, additionalButtons, cancelButton }) => {\n  return (\n    <>\n      {stepper && <div className={styles.step__stepper}>{stepper}</div>}\n      <div className={styles.step__content}>{children}</div>\n      <div className={styles.step__navigation}>\n        {(backButton || forwardButton) && (\n          <div className={classNames(styles.step__buttons, styles['step__buttons--navigation'])}>\n            {backButton &&\n              React.cloneElement(backButton, {\n                variant: 'outline',\n                wrapperClassName: classNames(styles['step__button--back']),\n              })}\n            {forwardButton &&\n              React.cloneElement(forwardButton, {\n                variant: 'fill',\n                wrapperClassName: classNames(styles['step__button--forward']),\n              })}\n          </div>\n        )}\n        {additionalButtons && (\n          <div className={classNames(styles.step__buttons, styles['step__buttons--additional'])}>{additionalButtons}</div>\n        )}\n        {cancelButton && (\n          <div className={styles.step__buttons}>\n            {React.cloneElement(cancelButton, {\n              variant: 'borderless',\n            })}\n          </div>\n        )}\n      </div>\n    </>\n  );\n};\n\nexport default Step;\n"],"names":["Step","stepper","children","backButton","forwardButton","additionalButtons","cancelButton","React","styles","classNames","Step$1"],"mappings":"mFAwBA,MAAMA,EAA4B,CAAC,CAAE,QAAAC,EAAS,SAAAC,EAAU,WAAAC,EAAY,cAAAC,EAAe,kBAAAC,EAAmB,aAAAC,qCAG/FL,GAAWM,EAAA,cAAC,MAAI,CAAA,UAAWC,EAAO,eAAgBP,CAAQ,EAC3DM,EAAA,cAAC,OAAI,UAAWC,EAAO,aAAgB,EAAAN,CAAS,EAC/CK,EAAA,cAAA,MAAA,CAAI,UAAWC,EAAO,mBACnBL,GAAcC,IACbG,EAAA,cAAA,MAAA,CAAI,UAAWE,EAAWD,EAAO,cAAeA,EAAO,2BAA2B,CAAC,CAAA,EACjFL,GACCI,EAAM,aAAaJ,EAAY,CAC7B,QAAS,UACT,iBAAkBM,EAAWD,EAAO,oBAAoB,CAAC,CAC1D,CAAA,EACFJ,GACCG,EAAM,aAAaH,EAAe,CAChC,QAAS,OACT,iBAAkBK,EAAWD,EAAO,uBAAuB,CAAC,CAC7D,CAAA,CACL,EAEDH,GACCE,EAAA,cAAC,OAAI,UAAWE,EAAWD,EAAO,cAAeA,EAAO,2BAA2B,CAAC,GAAIH,CAAkB,EAE3GC,GACEC,EAAA,cAAA,MAAA,CAAI,UAAWC,EAAO,aAAA,EACpBD,EAAM,aAAaD,EAAc,CAChC,QAAS,YAAA,CACV,CACH,CAEJ,CACF,EAIJI,EAAeV"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Step/Step.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useSticky } from '../../hooks/useSticky';\nimport { ButtonProps } from '../Button';\nimport { StepperProps } from '../Stepper';\n\nimport styles from './styles.module.scss';\n\ninterface StepProps {\n  /** Stepper viser fremdriften */\n  stepper?: React.ReactElement<StepperProps>;\n  /** Innhold i steget */\n  children: React.ReactNode;\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen dersom innholdet i Step tar mer plass enn vinduet. Default: false  */\n  stickyButtons?: boolean;\n}\n\nconst Step: React.FC<StepProps> = ({\n  stepper,\n  children,\n  backButton,\n  forwardButton,\n  additionalButtons,\n  cancelButton,\n  stickyButtons = false,\n}) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  const navigationRef = useRef<HTMLDivElement>(null);\n  const { isOutsideWindow, offsetHeight, contentWidth } = useSticky(contentRef, navigationRef, 'bottom');\n\n  const isSticky = stickyButtons && isOutsideWindow;\n  const hasNavigation = backButton || forwardButton || additionalButtons || cancelButton;\n\n  const contentClasses = classNames(!hasNavigation && styles['step__content--no-navigation']);\n  const navigationClasses = classNames(\n    styles.step__navigation,\n    !hasNavigation && styles['step__navigation--hidden'],\n    stickyButtons && styles['step__navigation--has-sticky-buttons'],\n    isSticky && styles['step__navigation--is-sticky']\n  );\n\n  return (\n    <div className={classNames(stickyButtons && styles['step--has-sticky-buttons'])}>\n      {stepper && <div className={styles.step__stepper}>{stepper}</div>}\n      <div\n        className={contentClasses}\n        ref={contentRef}\n        style={{ paddingBottom: stickyButtons && offsetHeight ? `${offsetHeight}px` : undefined }}\n      >\n        {children}\n      </div>\n      <div\n        className={navigationClasses}\n        ref={navigationRef}\n        style={{\n          width: stickyButtons && contentWidth ? `${contentWidth}px` : undefined,\n        }}\n      >\n        {(backButton || forwardButton) && (\n          <div className={classNames(styles.step__buttons, styles['step__buttons--navigation'])}>\n            {backButton &&\n              React.cloneElement(backButton, {\n                variant: 'outline',\n                wrapperClassName: classNames(styles['step__button--back']),\n              })}\n            {forwardButton &&\n              React.cloneElement(forwardButton, {\n                variant: 'fill',\n                wrapperClassName: classNames(styles['step__button--forward']),\n              })}\n          </div>\n        )}\n        {additionalButtons && (\n          <div className={classNames(styles.step__buttons, styles['step__buttons--additional'])}>{additionalButtons}</div>\n        )}\n        {cancelButton && (\n          <div className={styles.step__buttons}>\n            {React.cloneElement(cancelButton, {\n              variant: 'borderless',\n            })}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Step;\n"],"names":["Step","stepper","children","backButton","forwardButton","additionalButtons","cancelButton","stickyButtons","contentRef","useRef","navigationRef","isOutsideWindow","offsetHeight","contentWidth","useSticky","isSticky","hasNavigation","contentClasses","classNames","styles","navigationClasses","React","Step$1"],"mappings":"2NA2BA,MAAMA,EAA4B,CAAC,CACjC,QAAAC,EACA,SAAAC,EACA,WAAAC,EACA,cAAAC,EACA,kBAAAC,EACA,aAAAC,EACA,cAAAC,EAAgB,EAClB,IAAM,CACE,MAAAC,EAAaC,EAAuB,IAAI,EACxCC,EAAgBD,EAAuB,IAAI,EAC3C,CAAE,gBAAAE,EAAiB,aAAAC,EAAc,aAAAC,CAAA,EAAiBC,EAAUN,EAAYE,EAAe,QAAQ,EAE/FK,EAAWR,GAAiBI,EAC5BK,EAAgBb,GAAcC,GAAiBC,GAAqBC,EAEpEW,EAAiBC,EAAW,CAACF,GAAiBG,EAAO,8BAA8B,CAAC,EACpFC,EAAoBF,EACxBC,EAAO,iBACP,CAACH,GAAiBG,EAAO,0BAA0B,EACnDZ,GAAiBY,EAAO,sCAAsC,EAC9DJ,GAAYI,EAAO,6BAA6B,CAAA,EAGlD,uBACG,MAAI,CAAA,UAAWD,EAAWX,GAAiBY,EAAO,0BAA0B,CAAC,CAC3E,EAAAlB,mBAAY,MAAI,CAAA,UAAWkB,EAAO,eAAgBlB,CAAQ,EAC3DoB,EAAA,cAAC,MAAA,CACC,UAAWJ,EACX,IAAKT,EACL,MAAO,CAAE,cAAeD,GAAiBK,EAAe,GAAGA,CAAY,KAAO,MAAU,CAAA,EAEvFV,CAEH,EAAAmB,EAAA,cAAC,MAAA,CACC,UAAWD,EACX,IAAKV,EACL,MAAO,CACL,MAAOH,GAAiBM,EAAe,GAAGA,CAAY,KAAO,MAC/D,CAAA,GAEEV,GAAcC,IACbiB,EAAA,cAAA,MAAA,CAAI,UAAWH,EAAWC,EAAO,cAAeA,EAAO,2BAA2B,CAAC,CAAA,EACjFhB,GACCkB,EAAM,aAAalB,EAAY,CAC7B,QAAS,UACT,iBAAkBe,EAAWC,EAAO,oBAAoB,CAAC,CAC1D,CAAA,EACFf,GACCiB,EAAM,aAAajB,EAAe,CAChC,QAAS,OACT,iBAAkBc,EAAWC,EAAO,uBAAuB,CAAC,CAAA,CAC7D,CACL,EAEDd,GACEgB,EAAA,cAAA,MAAA,CAAI,UAAWH,EAAWC,EAAO,cAAeA,EAAO,2BAA2B,CAAC,CAAA,EAAId,CAAkB,EAE3GC,mBACE,MAAI,CAAA,UAAWa,EAAO,aACpB,EAAAE,EAAM,aAAaf,EAAc,CAChC,QAAS,YAAA,CACV,CACH,CAAA,CAGN,CAEJ,EAEAgB,EAAetB"}

package/components/Step/styles.module.scss

@@ -6,19 +6,41 @@
 @import '../../scss/screen-reader';
 
 .step {
+  &--has-sticky-buttons {
+    position: relative;
+  }
+
   &__stepper {
     margin-bottom: getSpacer(m);
   }
 
   &__content {
-    margin-bottom: getSpacer(m);
+    &--no-navigation {
+      margin-bottom: getSpacer(m);
+    }
   }
 
   &__navigation {
+    padding-top: getSpacer(m);
+    padding-bottom: getSpacer(s);
     display: flex;
     flex-wrap: wrap;
     column-gap: getSpacer(l);
     row-gap: getSpacer(m);
+
+    &--hidden {
+      display: none;
+    }
+
+    &--has-sticky-buttons {
+      position: absolute;
+      bottom: 0;
+    }
+
+    &--is-sticky {
+      background-color: $white;
+      position: fixed;
+    }
   }
 
   &__buttons {

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

@@ -3,9 +3,13 @@ export type Styles = {
   'step__button--forward': string;
   step__buttons: string;
   'step__buttons--additional': string;
-  step__content: string;
+  'step__content--no-navigation': string;
   step__navigation: string;
+  'step__navigation--has-sticky-buttons': string;
+  'step__navigation--hidden': string;
+  'step__navigation--is-sticky': string;
   step__stepper: string;
+  'step--has-sticky-buttons': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/Stepper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Stepper/utils.ts","../../../src/components/Stepper/Dot.tsx","../../../src/components/Stepper/DotList.tsx","../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["/**\n * Minimum avstand fra markør til prikk\n */\nconst MARKER_DOT_MIN_DISTANCE_PX = 4;\n\n/**\n * Bredde på markør\n */\nconst MARKER_WIDTH_PX = 24;\n\n/**\n * Horisontal padding på stepper\n */\nexport const STEPPER_PADDING_X_PX = 8;\n\n/**\n * Valider at minimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Mimimum-verdi, ikke større enn eller lik maksimum-verdi\n */\nexport const getValidatedMin = (min: number, max: number): number => (min < max ? min : max - 1);\n\n/**\n * Valider at maksimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Maksimum-verdi, ikke mindre enn minimum-verdi\n */\nexport const getValidatedMax = (min: number, max: number): number => (max < min ? min : max);\n\n/**\n * Valider at verdi er innenfor gyldig område\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Verdi, ikke mindre enn 0, ikke mer enn max\n */\nexport const getValidatedValue = (value: number | undefined, min: number, max: number): number => {\n  if (typeof value === 'undefined' || value < min) {\n    return min;\n  }\n\n  return value > max ? max : value;\n};\n\n/**\n * Finn antall prikker det er plass til\n * @param stepperWidth Bredde på stepper\n * @returns Antall prikker\n */\nexport const getMaximumDots = (stepperWidth: number): number => Math.floor(stepperWidth / (MARKER_WIDTH_PX + MARKER_DOT_MIN_DISTANCE_PX));\n\n/**\n * Beregn riktig distance mellom prikker\n * @param stepperWidth Bredde på stepper\n * @param dots Antall prikker som skal vises\n * @returns Distanse mellom prikker\n */\nexport const getDistanceBetweenDots = (stepperWidth: number, dots: number): number => (stepperWidth - MARKER_WIDTH_PX) / (dots - 1);\n\n/**\n * Beregn riktig plassering av markør\n * @param distanceBetweenDots Distanse mellom prikker\n * @param index Nåværende verdi i stepper\n * @returns Plassering til markør fra venstre\n */\nexport const getMarkerPosition = (distanceBetweenDots: number, index: number): number => distanceBetweenDots * index;\n\n/**\n * Lag liste med tillate verdier fra min til maks\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Liste med verdier\n */\nexport const getAllowedValues = (min: number, max: number): number[] => Array.from(Array(max - min + 1), (_, index) => index + min);\n\n/**\n * Valider props som skal brukes til beregning av posisjon m.m.\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Objekt med gyldige verdier\n */\nexport const getValidatedProps = (\n  value: number | undefined,\n  min: number,\n  max: number\n): { validatedValue: number; validatedMin: number; validatedMax: number } => {\n  const validatedMin = getValidatedMin(min, max);\n  const validatedMax = getValidatedMax(validatedMin, max);\n  const validatedValue = getValidatedValue(value, validatedMin, validatedMax);\n\n  return { validatedValue, validatedMin, validatedMax };\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { STEPPER_PADDING_X_PX } from './utils';\n\nimport styles from './styles.module.scss';\n\ninterface DotProps {\n  index?: number;\n  completed: boolean;\n  distanceBetweenDots?: number;\n  position?: 'left' | 'right';\n}\n\nconst Dot: React.FC<DotProps> = ({ index, completed, distanceBetweenDots, position }) => {\n  const classes = classNames(\n    styles.stepper__dot,\n    completed && styles['stepper__dot--completed'],\n    position && styles[`stepper__dot--${position}`]\n  );\n  const positionWithStyle = !position && typeof index !== 'undefined' && typeof distanceBetweenDots !== 'undefined';\n  const style: React.HTMLAttributes<HTMLSpanElement>['style'] = positionWithStyle\n    ? { left: `${index * distanceBetweenDots + STEPPER_PADDING_X_PX}px` }\n    : undefined;\n\n  return <span className={classes} style={style} data-testid=\"dot\" />;\n};\n\nexport default Dot;\n","import React from 'react';\n\nimport Dot from './Dot';\n\ninterface DotListProps {\n  allowedValues: number[];\n  currentValue: number;\n  distanceBetweenDots: number;\n}\n\nconst Dots: React.FC<DotListProps> = ({ allowedValues, currentValue, distanceBetweenDots }) => (\n  <>\n    {allowedValues.map((value, index) => (\n      <Dot index={index} key={value} completed={value < currentValue} distanceBetweenDots={distanceBetweenDots} />\n    ))}\n  </>\n);\n\nexport default Dots;\n","import React, { useRef } from 'react';\n\nimport Dot from './Dot';\nimport DotList from './DotList';\nimport { getMaximumDots, getDistanceBetweenDots, getMarkerPosition, getAllowedValues, getValidatedProps } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport interface StepperProps {\n  /**\n   * Sets aria-label of the stepper. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the stepper. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /**\n   * Current value. Must be between min and max\n   */\n  value?: number;\n  /**\n   * Minimum value\n   */\n  min?: number;\n  /**\n   * Maximum value\n   */\n  max?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Stepper: React.FC<StepperProps> = ({ ariaLabelledById, ariaLabel, value, min = 0, max = 2, testId }) => {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const ref = useRef<HTMLSpanElement>(null);\n  const { width: wrapperWidth = 0 } = useSize(wrapperRef) || {};\n  const { width: stepperWidth = 0 } = useSize(ref) || {};\n\n  const { validatedValue, validatedMin, validatedMax } = getValidatedProps(value, min, max);\n  const allowedValues = getAllowedValues(validatedMin, validatedMax);\n  const index = allowedValues.indexOf(validatedValue);\n  const maximumDots = getMaximumDots(wrapperWidth);\n  const distanceBetweenDots = getDistanceBetweenDots(stepperWidth, allowedValues.length);\n  const markerPosition = getMarkerPosition(distanceBetweenDots, index);\n\n  const showAllDots = allowedValues.length <= maximumDots;\n  const isCompleted = validatedValue === validatedMax;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  return (\n    <div className={styles['stepper-wrapper']} ref={wrapperRef}>\n      <span\n        role=\"progressbar\"\n        {...ariaLabelAttributes}\n        aria-valuenow={validatedValue}\n        aria-valuemin={validatedMin}\n        aria-valuemax={validatedMax}\n        className={styles.stepper}\n        style={{\n          backgroundPositionX: `${isCompleted ? stepperWidth : markerPosition}px`,\n        }}\n        ref={ref}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Stepper}\n      >\n        {showAllDots && <DotList allowedValues={allowedValues} currentValue={validatedValue} distanceBetweenDots={distanceBetweenDots} />}\n        {!showAllDots && (\n          <>\n            <Dot completed={validatedValue > validatedMin} position=\"left\" />\n            <Dot completed={validatedValue === validatedMax} position=\"right\" />\n          </>\n        )}\n        <span className={styles.stepper__marker} style={{ left: `${markerPosition}px` }} />\n      </span>\n      {!showAllDots && <span className={styles.stepper__number}>{`${validatedValue}/${validatedMax}`}</span>}\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["MARKER_DOT_MIN_DISTANCE_PX","MARKER_WIDTH_PX","STEPPER_PADDING_X_PX","getValidatedMin","min","max","getValidatedMax","getValidatedValue","value","getMaximumDots","stepperWidth","getDistanceBetweenDots","dots","getMarkerPosition","distanceBetweenDots","index","getAllowedValues","_","getValidatedProps","validatedMin","validatedMax","Dot","completed","position","classes","classNames","styles","style","Dot$1","Dots","allowedValues","currentValue","React","DotList","Stepper","ariaLabelledById","ariaLabel","testId","wrapperRef","useRef","ref","wrapperWidth","useSize","validatedValue","maximumDots","markerPosition","showAllDots","isCompleted","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","Stepper$1"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Stepper/utils.ts","../../../src/components/Stepper/Dot.tsx","../../../src/components/Stepper/DotList.tsx","../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["/**\n * Minimum avstand fra markør til prikk\n */\nconst MARKER_DOT_MIN_DISTANCE_PX = 4;\n\n/**\n * Bredde på markør\n */\nconst MARKER_WIDTH_PX = 24;\n\n/**\n * Horisontal padding på stepper\n */\nexport const STEPPER_PADDING_X_PX = 8;\n\n/**\n * Valider at minimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Mimimum-verdi, ikke større enn eller lik maksimum-verdi\n */\nexport const getValidatedMin = (min: number, max: number): number => (min < max ? min : max - 1);\n\n/**\n * Valider at maksimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Maksimum-verdi, ikke mindre enn minimum-verdi\n */\nexport const getValidatedMax = (min: number, max: number): number => (max < min ? min : max);\n\n/**\n * Valider at verdi er innenfor gyldig område\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Verdi, ikke mindre enn 0, ikke mer enn max\n */\nexport const getValidatedValue = (value: number | undefined, min: number, max: number): number => {\n  if (typeof value === 'undefined' || value < min) {\n    return min;\n  }\n\n  return value > max ? max : value;\n};\n\n/**\n * Finn antall prikker det er plass til\n * @param stepperWidth Bredde på stepper\n * @returns Antall prikker\n */\nexport const getMaximumDots = (stepperWidth: number): number => Math.floor(stepperWidth / (MARKER_WIDTH_PX + MARKER_DOT_MIN_DISTANCE_PX));\n\n/**\n * Beregn riktig distance mellom prikker\n * @param stepperWidth Bredde på stepper\n * @param dots Antall prikker som skal vises\n * @returns Distanse mellom prikker\n */\nexport const getDistanceBetweenDots = (stepperWidth: number, dots: number): number => (stepperWidth - MARKER_WIDTH_PX) / (dots - 1);\n\n/**\n * Beregn riktig plassering av markør\n * @param distanceBetweenDots Distanse mellom prikker\n * @param index Nåværende verdi i stepper\n * @returns Plassering til markør fra venstre\n */\nexport const getMarkerPosition = (distanceBetweenDots: number, index: number): number => distanceBetweenDots * index;\n\n/**\n * Lag liste med tillate verdier fra min til maks\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Liste med verdier\n */\nexport const getAllowedValues = (min: number, max: number): number[] => Array.from(Array(max - min + 1), (_, index) => index + min);\n\n/**\n * Valider props som skal brukes til beregning av posisjon m.m.\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Objekt med gyldige verdier\n */\nexport const getValidatedProps = (\n  value: number | undefined,\n  min: number,\n  max: number\n): { validatedValue: number; validatedMin: number; validatedMax: number } => {\n  const validatedMin = getValidatedMin(min, max);\n  const validatedMax = getValidatedMax(validatedMin, max);\n  const validatedValue = getValidatedValue(value, validatedMin, validatedMax);\n\n  return { validatedValue, validatedMin, validatedMax };\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { STEPPER_PADDING_X_PX } from './utils';\n\nimport styles from './styles.module.scss';\n\ninterface DotProps {\n  index?: number;\n  completed: boolean;\n  distanceBetweenDots?: number;\n  position?: 'left' | 'right';\n}\n\nconst Dot: React.FC<DotProps> = ({ index, completed, distanceBetweenDots, position }) => {\n  const classes = classNames(\n    styles.stepper__dot,\n    completed && styles['stepper__dot--completed'],\n    position && styles[`stepper__dot--${position}`]\n  );\n  const positionWithStyle = !position && typeof index !== 'undefined' && typeof distanceBetweenDots !== 'undefined';\n  const style: React.HTMLAttributes<HTMLSpanElement>['style'] = positionWithStyle\n    ? { left: `${index * distanceBetweenDots + STEPPER_PADDING_X_PX}px` }\n    : undefined;\n\n  return <span className={classes} style={style} data-testid=\"dot\" />;\n};\n\nexport default Dot;\n","import React from 'react';\n\nimport Dot from './Dot';\n\ninterface DotListProps {\n  allowedValues: number[];\n  currentValue: number;\n  distanceBetweenDots: number;\n}\n\nconst Dots: React.FC<DotListProps> = ({ allowedValues, currentValue, distanceBetweenDots }) => (\n  <>\n    {allowedValues.map((value, index) => (\n      <Dot index={index} key={value} completed={value < currentValue} distanceBetweenDots={distanceBetweenDots} />\n    ))}\n  </>\n);\n\nexport default Dots;\n","import React, { useRef } from 'react';\n\nimport Dot from './Dot';\nimport DotList from './DotList';\nimport { getMaximumDots, getDistanceBetweenDots, getMarkerPosition, getAllowedValues, getValidatedProps } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport interface StepperProps {\n  /**\n   * Sets aria-label of the stepper. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the stepper. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /**\n   * Current value. Must be between min and max\n   */\n  value?: number;\n  /**\n   * Minimum value\n   */\n  min?: number;\n  /**\n   * Maximum value\n   */\n  max?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Stepper: React.FC<StepperProps> = ({ ariaLabelledById, ariaLabel, value, min = 0, max = 2, testId }) => {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const ref = useRef<HTMLSpanElement>(null);\n  const { width: wrapperWidth = 0 } = useSize(wrapperRef) || {};\n  const { width: stepperWidth = 0 } = useSize(ref) || {};\n\n  const { validatedValue, validatedMin, validatedMax } = getValidatedProps(value, min, max);\n  const allowedValues = getAllowedValues(validatedMin, validatedMax);\n  const index = allowedValues.indexOf(validatedValue);\n  const maximumDots = getMaximumDots(wrapperWidth);\n  const distanceBetweenDots = getDistanceBetweenDots(stepperWidth, allowedValues.length);\n  const markerPosition = getMarkerPosition(distanceBetweenDots, index);\n\n  const showAllDots = allowedValues.length <= maximumDots;\n  const isCompleted = validatedValue === validatedMax;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  return (\n    <div className={styles['stepper-wrapper']} ref={wrapperRef}>\n      <span\n        role=\"progressbar\"\n        {...ariaLabelAttributes}\n        aria-valuenow={validatedValue}\n        aria-valuemin={validatedMin}\n        aria-valuemax={validatedMax}\n        className={styles.stepper}\n        style={{\n          backgroundPositionX: `${isCompleted ? stepperWidth : markerPosition}px`,\n        }}\n        ref={ref}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Stepper}\n      >\n        {showAllDots && <DotList allowedValues={allowedValues} currentValue={validatedValue} distanceBetweenDots={distanceBetweenDots} />}\n        {!showAllDots && (\n          <>\n            <Dot completed={validatedValue > validatedMin} position=\"left\" />\n            <Dot completed={validatedValue === validatedMax} position=\"right\" />\n          </>\n        )}\n        <span className={styles.stepper__marker} style={{ left: `${markerPosition}px` }} />\n      </span>\n      {!showAllDots && <span className={styles.stepper__number}>{`${validatedValue}/${validatedMax}`}</span>}\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["MARKER_DOT_MIN_DISTANCE_PX","MARKER_WIDTH_PX","STEPPER_PADDING_X_PX","getValidatedMin","min","max","getValidatedMax","getValidatedValue","value","getMaximumDots","stepperWidth","getDistanceBetweenDots","dots","getMarkerPosition","distanceBetweenDots","index","getAllowedValues","_","getValidatedProps","validatedMin","validatedMax","Dot","completed","position","classes","classNames","styles","style","Dot$1","Dots","allowedValues","currentValue","React","DotList","Stepper","ariaLabelledById","ariaLabel","testId","wrapperRef","useRef","ref","wrapperWidth","useSize","validatedValue","maximumDots","markerPosition","showAllDots","isCompleted","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","Stepper$1"],"mappings":"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"}

package/components/Table/TableExpandedRow/TableExpandedRow.d.ts

@@ -15,7 +15,9 @@ export interface Props {
     children: React.ReactNode;
     /** For display with less space. Discouraged to use together with interactive elements. */
     mode?: ModeType;
+    /** Row id. For use with aria-controls. */
+    id?: string;
 }
-export declare const TableExpandedRow: ({ numberOfColumns, expanded, hideDetailsText, toggleClick, children, className, mode, }: Props) => React.JSX.Element;
+export declare const TableExpandedRow: ({ numberOfColumns, expanded, hideDetailsText, toggleClick, children, className, mode, id, }: Props) => React.JSX.Element;
 export default TableExpandedRow;
 //# sourceMappingURL=TableExpandedRow.d.ts.map

package/components/Table/TableExpandedRow/TableExpandedRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableExpandedRow.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableExpandedRow/TableExpandedRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,MAAM,WAAW,KAAK;IACpB,uBAAuB;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,eAAe,EAAE,MAAM,CAAC;IACxB,4BAA4B;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,uDAAuD;IACvD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0FAA0F;IAC1F,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,4FAQ1B,KAAK,KAAG,SAAS,QA2BnB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"TableExpandedRow.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/TableExpandedRow/TableExpandedRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,MAAM,WAAW,KAAK;IACpB,uBAAuB;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,eAAe,EAAE,MAAM,CAAC;IACxB,4BAA4B;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,uDAAuD;IACvD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0FAA0F;IAC1F,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,0CAA0C;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,gBAAgB,gGAS1B,KAAK,KAAG,SAAS,QA2BnB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/components/Table/TableExpandedRow/componentdata.json

@@ -1 +1 @@
-{"props":{"expanded":{"defaultValue":null,"description":"Row is expanded.","name":"expanded","parent":{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"}],"required":true,"type":{"name":"boolean"}},"numberOfColumns":{"defaultValue":null,"description":"Number of columns in table.","name":"numberOfColumns","parent":{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"}],"required":true,"type":{"name":"number"}},"hideDetailsText":{"defaultValue":null,"description":"Text for hide button.","name":"hideDetailsText","parent":{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"}],"required":true,"type":{"name":"string"}},"toggleClick":{"defaultValue":null,"description":"When hide button inside expanded row is clicked.","name":"toggleClick","parent":{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"}],"required":true,"type":{"name":"() => void"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Sets the content of the expanded row.","name":"children","parent":{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"}],"required":true,"type":{"name":"ReactNode"}},"mode":{"defaultValue":{"value":"ModeType.normal"},"description":"For display with less space. Discouraged to use together with interactive elements.","name":"mode","parent":{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"}],"required":false,"type":{"name":"enum","raw":"ModeType","value":[{"value":"\"compact\"","description":"","fullComment":"","tags":{}},{"value":"\"normal\"","description":"","fullComment":"","tags":{}}]}}}}
+{"props":{"expanded":{"defaultValue":null,"description":"Row is expanded.","name":"expanded","parent":{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"}],"required":true,"type":{"name":"boolean"}},"numberOfColumns":{"defaultValue":null,"description":"Number of columns in table.","name":"numberOfColumns","parent":{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"}],"required":true,"type":{"name":"number"}},"hideDetailsText":{"defaultValue":null,"description":"Text for hide button.","name":"hideDetailsText","parent":{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"}],"required":true,"type":{"name":"string"}},"toggleClick":{"defaultValue":null,"description":"When hide button inside expanded row is clicked.","name":"toggleClick","parent":{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"}],"required":true,"type":{"name":"() => void"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Sets the content of the expanded row.","name":"children","parent":{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"}],"required":true,"type":{"name":"ReactNode"}},"mode":{"defaultValue":{"value":"ModeType.normal"},"description":"For display with less space. Discouraged to use together with interactive elements.","name":"mode","parent":{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"}],"required":false,"type":{"name":"enum","raw":"ModeType","value":[{"value":"\"compact\"","description":"","fullComment":"","tags":{}},{"value":"\"normal\"","description":"","fullComment":"","tags":{}}]}},"id":{"defaultValue":null,"description":"Row id. For use with aria-controls.","name":"id","parent":{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"},"declarations":[{"fileName":"src/components/Table/TableExpandedRow/TableExpandedRow.tsx","name":"Props"}],"required":false,"type":{"name":"string"}}}}

package/components/Table/TableExpandedRow/index.js

@@ -1,2 +1,2 @@
-import{a as p}from"../../../TableExpandedRow.js";import{T as F}from"../../../TableExpandedRow.js";import"react";import"classnames";import"../../../Button.js";import"../../Icons/Icon.js";import"../../../constants.js";import"../../../hooks/useUuid.js";import"../../../uuid.js";import"../../../utils/environment.js";import"../../../hooks/useBreakpoint.js";import"../../../theme/grid.js";import"../../../hooks/useHover.js";import"../../../hooks/useIcons.js";import"../../../hooks/useSize.js";import"../../../utils/debounce.js";import"../../../theme/currys/color.js";import"../../../theme/index.js";import"../../../theme/palette.js";import"../../../theme/spacers.js";import"../../Icons/ArrowRight.js";import"../../Button/styles.module.scss";import"../../Icons/ChevronUp.js";import"../styles.module.scss";import"../../../Table.js";import"../../../hooks/useLayoutEvent.js";import"../../../HorizontalScroll.js";import"../../../hooks/useIsVisible.js";import"../../../hooks/useIntersectionObserver.js";import"../../HorizontalScroll/styles.module.scss";import"../../../utils/device.js";export{F as TableExpandedRow,p as default};
+import{a as p}from"../../../TableExpandedRow.js";import{T as G}from"../../../TableExpandedRow.js";import"react";import"classnames";import"../../../Button.js";import"../../Icons/Icon.js";import"../../../constants.js";import"../../../hooks/useUuid.js";import"../../../uuid.js";import"../../../utils/environment.js";import"../../../hooks/useBreakpoint.js";import"../../../theme/grid.js";import"../../../hooks/useHover.js";import"../../../hooks/usePseudoClasses.js";import"../../../hooks/useIcons.js";import"../../../hooks/useSize.js";import"../../../utils/debounce.js";import"../../../theme/currys/color.js";import"../../../theme/index.js";import"../../../theme/palette.js";import"../../../theme/spacers.js";import"../../Icons/ArrowRight.js";import"../../Button/styles.module.scss";import"../../Icons/ChevronUp.js";import"../styles.module.scss";import"../../../Table.js";import"../../../hooks/useLayoutEvent.js";import"../../../HorizontalScroll.js";import"../../../hooks/useIsVisible.js";import"../../../hooks/useIntersectionObserver.js";import"../../HorizontalScroll/styles.module.scss";import"../../../utils/device.js";export{G as TableExpandedRow,p as default};
 //# sourceMappingURL=index.js.map

package/components/Table/TableExpanderCell/index.js

@@ -1,2 +1,2 @@
-import{a as o}from"../../../TableExpanderCell.js";import{T as H}from"../../../TableExpanderCell.js";import"react";import"classnames";import"../../../Button.js";import"../../Icons/Icon.js";import"../../../constants.js";import"../../../hooks/useUuid.js";import"../../../uuid.js";import"../../../utils/environment.js";import"../../../hooks/useBreakpoint.js";import"../../../theme/grid.js";import"../../../hooks/useHover.js";import"../../../hooks/useIcons.js";import"../../../hooks/useSize.js";import"../../../utils/debounce.js";import"../../../theme/currys/color.js";import"../../../theme/index.js";import"../../../theme/palette.js";import"../../../theme/spacers.js";import"../../Icons/ArrowRight.js";import"../../Button/styles.module.scss";import"../../Icons/ChevronDown.js";import"../../Icons/ChevronUp.js";import"../styles.module.scss";import"../../../Table.js";import"../../../hooks/useLayoutEvent.js";import"../../../HorizontalScroll.js";import"../../../hooks/useIsVisible.js";import"../../../hooks/useIntersectionObserver.js";import"../../HorizontalScroll/styles.module.scss";import"../../../utils/device.js";export{H as TableExpanderCell,o as default};
+import{a as o}from"../../../TableExpanderCell.js";import{T as I}from"../../../TableExpanderCell.js";import"react";import"classnames";import"../../../Button.js";import"../../Icons/Icon.js";import"../../../constants.js";import"../../../hooks/useUuid.js";import"../../../uuid.js";import"../../../utils/environment.js";import"../../../hooks/useBreakpoint.js";import"../../../theme/grid.js";import"../../../hooks/useHover.js";import"../../../hooks/usePseudoClasses.js";import"../../../hooks/useIcons.js";import"../../../hooks/useSize.js";import"../../../utils/debounce.js";import"../../../theme/currys/color.js";import"../../../theme/index.js";import"../../../theme/palette.js";import"../../../theme/spacers.js";import"../../Icons/ArrowRight.js";import"../../Button/styles.module.scss";import"../../Icons/ChevronDown.js";import"../../Icons/ChevronUp.js";import"../styles.module.scss";import"../../../Table.js";import"../../../hooks/useLayoutEvent.js";import"../../../HorizontalScroll.js";import"../../../hooks/useIsVisible.js";import"../../../hooks/useIntersectionObserver.js";import"../../HorizontalScroll/styles.module.scss";import"../../../utils/device.js";export{I as TableExpanderCell,o as default};
 //# sourceMappingURL=index.js.map

package/components/Table/TableRow/index.js

@@ -1,2 +1,2 @@
-import{a as r}from"../../../TableRow.js";import{T as G}from"../../../TableRow.js";import"react";import"classnames";import"../styles.module.scss";import"../../../Table.js";import"../../../constants.js";import"../../../hooks/useBreakpoint.js";import"../../../theme/grid.js";import"../../../hooks/useLayoutEvent.js";import"../../../utils/debounce.js";import"../../../HorizontalScroll.js";import"../../../hooks/useIsVisible.js";import"../../../hooks/useIntersectionObserver.js";import"../../../hooks/useSize.js";import"../../HorizontalScroll/styles.module.scss";import"../../../utils/device.js";import"../../../Button.js";import"../../Icons/Icon.js";import"../../../hooks/useUuid.js";import"../../../uuid.js";import"../../../utils/environment.js";import"../../../hooks/useHover.js";import"../../../hooks/useIcons.js";import"../../../theme/currys/color.js";import"../../../theme/index.js";import"../../../theme/palette.js";import"../../../theme/spacers.js";import"../../Icons/ArrowRight.js";import"../../Button/styles.module.scss";import"../../Icons/ChevronDown.js";import"../../Icons/ChevronUp.js";export{G as TableRow,r as default};
+import{a as r}from"../../../TableRow.js";import{T as H}from"../../../TableRow.js";import"react";import"classnames";import"../styles.module.scss";import"../../../Table.js";import"../../../constants.js";import"../../../hooks/useBreakpoint.js";import"../../../theme/grid.js";import"../../../hooks/useLayoutEvent.js";import"../../../utils/debounce.js";import"../../../HorizontalScroll.js";import"../../../hooks/useIsVisible.js";import"../../../hooks/useIntersectionObserver.js";import"../../../hooks/useSize.js";import"../../HorizontalScroll/styles.module.scss";import"../../../utils/device.js";import"../../../Button.js";import"../../Icons/Icon.js";import"../../../hooks/useUuid.js";import"../../../uuid.js";import"../../../utils/environment.js";import"../../../hooks/useHover.js";import"../../../hooks/usePseudoClasses.js";import"../../../hooks/useIcons.js";import"../../../theme/currys/color.js";import"../../../theme/index.js";import"../../../theme/palette.js";import"../../../theme/spacers.js";import"../../Icons/ArrowRight.js";import"../../Button/styles.module.scss";import"../../Icons/ChevronDown.js";import"../../Icons/ChevronUp.js";export{H as TableRow,r as default};
 //# sourceMappingURL=index.js.map

package/components/Table/index.js

@@ -1,2 +1,2 @@
-import{T as r}from"../../Table.js";import{M as q,R as z,d as F,s as G}from"../../Table.js";import{T as J}from"../../TableBody.js";import{T as L,a as N}from"../../TableCell.js";import{T as P}from"../../TableExpandedRow.js";import{T as U}from"../../TableExpanderCell.js";import{H as X,T as Y}from"../../TableHead.js";import{S as _,T as $}from"../../TableHeadCell.js";import{T as ro}from"../../TableRow.js";import"react";import"classnames";import"../../constants.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../HorizontalScroll.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useSize.js";import"../HorizontalScroll/styles.module.scss";import"./styles.module.scss";import"../../utils/device.js";import"../../Button.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../Icons/ChevronUp.js";import"../Icons/ChevronDown.js";import"../Icons/ArrowDown.js";import"../Icons/ArrowUp.js";export{X as HeaderCategory,q as ModeType,z as ResponsiveTableVariant,_ as SortDirection,r as Table,J as TableBody,L as TableCell,P as TableExpandedRow,U as TableExpanderCell,Y as TableHead,$ as TableHeadCell,ro as TableRow,N as TextAlign,r as default,F as defaultConfig,G as simpleConfig};
+import{T as r}from"../../Table.js";import{M as z,R as F,d as G,s as I}from"../../Table.js";import{T as K}from"../../TableBody.js";import{T as N,a as O}from"../../TableCell.js";import{T as Q}from"../../TableExpandedRow.js";import{T as W}from"../../TableExpanderCell.js";import{H as Y,T as Z}from"../../TableHead.js";import{S as $,T as oo}from"../../TableHeadCell.js";import{T as to}from"../../TableRow.js";import"react";import"classnames";import"../../constants.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../HorizontalScroll.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useSize.js";import"../HorizontalScroll/styles.module.scss";import"./styles.module.scss";import"../../utils/device.js";import"../../Button.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../hooks/useHover.js";import"../../hooks/usePseudoClasses.js";import"../../hooks/useIcons.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../Icons/ChevronUp.js";import"../Icons/ChevronDown.js";import"../Icons/ArrowDown.js";import"../Icons/ArrowUp.js";export{Y as HeaderCategory,z as ModeType,F as ResponsiveTableVariant,$ as SortDirection,r as Table,K as TableBody,N as TableCell,Q as TableExpandedRow,W as TableExpanderCell,Z as TableHead,oo as TableHeadCell,to as TableRow,O as TextAlign,r as default,G as defaultConfig,I as simpleConfig};
 //# sourceMappingURL=index.js.map

package/components/Tag/index.js

@@ -1,2 +1,2 @@
-import n from"react";import u from"classnames";import{AnalyticsId as g,IconSize as p}from"../../constants.js";import{useHover as I}from"../../hooks/useHover.js";import{palette as v}from"../../theme/palette.js";import{Icon as f}from"../Icons/Icon.js";import y from"../Icons/Undo.js";import b from"../Icons/X.js";import e from"./styles.module.scss";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":g.Tag},s,n.createElement(f,{svgIcon:h(),size:p.XXSmall,color:v[`${o==="undo"?"blueberry":r}800`],isHovered:d}))},N=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":g.Tag},a&&n.createElement(f,{svgIcon:a,size:p.XXSmall,color:v[`${r}800`],className:e.tag__icon}),s)},B=N;export{X as TagAction,E as TagSize,z as TagVariant,B as default};
+import n from"react";import u from"classnames";import{AnalyticsId as g,IconSize as p}from"../../constants.js";import{useHover as I}from"../../hooks/useHover.js";import{palette as v}from"../../theme/palette.js";import{Icon as f}from"../Icons/Icon.js";import y from"../Icons/Undo.js";import b from"../Icons/X.js";import e from"./styles.module.scss";import"../../hooks/usePseudoClasses.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":g.Tag},s,n.createElement(f,{svgIcon:h(),size:p.XXSmall,color:v[`${o==="undo"?"blueberry":r}800`],isHovered:d}))},N=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":g.Tag},a&&n.createElement(f,{svgIcon:a,size:p.XXSmall,color:v[`${r}800`],className:e.tag__icon}),s)},D=N;export{X as TagAction,E as TagSize,z as TagVariant,D 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';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { palette, PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\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","Tag$1"],"mappings":"mbAaY,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,GAAM,EACrBW,EAAO,QAAQR,GAAQ,EACvBQ,EAAO,iBAAiB,EACxBR,IAAW,UAAY,CAACQ,EAAO,QAAQV,GAAO,EAAGU,EAAO,QAAQT,GAAS,CAAC,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,KAC9HjB,EACDgB,EAAA,cAACE,EAAA,CACC,QAASL,EAAc,EACvB,KAAMM,EAAS,QACf,MAAOC,EAAQ,GAAGhB,IAAW,OAAS,YAAcF,MAAU,EAC9D,UAAAM,CAAA,CAAA,CAEJ,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,GAAM,EAAGW,EAAO,QAAQV,GAAO,EAAGU,EAAO,QAAQT,GAAS,EAAG,CAC5G,CAACS,EAAO,eAAe,CAAC,EAAGU,CAAA,CAC5B,EAED,OAAIlB,GAAUC,EAEVW,EAAA,cAAClB,GAAU,KAAAG,EAAY,MAAAC,EAAc,QAAAC,EAAkB,OAAAC,EAAgB,QAAAC,EAAkB,OAAAC,GACtFN,CACH,EAKFgB,EAAA,cAAC,OAAK,CAAA,UAAWN,EAAY,cAAaJ,EAAQ,mBAAkBW,EAAY,GAC7E,EAAAK,GAAYN,EAAA,cAAAE,EAAA,CAAK,QAAAI,EAAkB,KAAMH,EAAS,QAAS,MAAOC,EAAQ,GAAGlB,MAAU,EAAG,UAAWU,EAAO,SAAW,CAAA,EACvHZ,CACH,CAEJ,EAEAuB,EAAeF"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { palette, PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\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","Tag$1"],"mappings":"2dAaY,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,CAAI,EAAE,EACrBW,EAAO,QAAQR,CAAM,EAAE,EACvBQ,EAAO,iBAAiB,EACxBR,IAAW,UAAY,CAACQ,EAAO,QAAQV,CAAK,EAAE,EAAGU,EAAO,QAAQT,CAAO,EAAE,CAAC,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,KAC9HjB,EACDgB,EAAA,cAACE,EAAA,CACC,QAASL,EAAc,EACvB,KAAMM,EAAS,QACf,MAAOC,EAAQ,GAAGhB,IAAW,OAAS,YAAcF,CAAK,KAAK,EAC9D,UAAAM,CAAA,CAAA,CAEJ,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,CAAI,EAAE,EAAGW,EAAO,QAAQV,CAAK,EAAE,EAAGU,EAAO,QAAQT,CAAO,EAAE,EAAG,CAC5G,CAACS,EAAO,eAAe,CAAC,EAAGU,CAAA,CAC5B,EAED,OAAIlB,GAAUC,EAEVW,EAAA,cAAClB,GAAU,KAAAG,EAAY,MAAAC,EAAc,QAAAC,EAAkB,OAAAC,EAAgB,QAAAC,EAAkB,OAAAC,GACtFN,CACH,EAKFgB,EAAA,cAAC,OAAK,CAAA,UAAWN,EAAY,cAAaJ,EAAQ,mBAAkBW,EAAY,GAAA,EAC7EK,GAAWN,EAAA,cAACE,EAAK,CAAA,QAAAI,EAAkB,KAAMH,EAAS,QAAS,MAAOC,EAAQ,GAAGlB,CAAK,KAAK,EAAG,UAAWU,EAAO,SAAW,CAAA,EACvHZ,CACH,CAEJ,EAEAuB,EAAeF"}

package/components/Tile/Tile.d.ts

@@ -1,8 +1,6 @@
 import React from 'react';
 import { TitleTags } from './../Title/Title';
-import { HTMLAnchorProps } from '../../constants';
-export type TileTags = 'button' | 'a';
-interface TileProps extends HTMLAnchorProps {
+interface TileProps extends Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick' | 'rel'> {
     /** Adds custom classes to the element. */
     className?: string;
     /**	Sets the icon to be displayed inside the tile. */
@@ -15,10 +13,6 @@ interface TileProps extends HTMLAnchorProps {
     description?: string;
     /** Sets a fixed max and min width for the tile. */
     fixed?: boolean;
-    /** Called when the tile is clicked on. */
-    onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-    /** HTML markup for tile. Default: a */
-    htmlMarkup?: TileTags;
     /** Sets the data-testid attribute. */
     testId?: string;
 }

package/components/Tile/Tile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../src/components/Tile/Tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAe,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAM/D,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,GAAG,CAAC;AAEtC,UAAU,SAAU,SAAQ,eAAe;IACzC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,sDAAsD;IACtD,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAClE,uCAAuC;IACvC,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,cAAc;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,yBAAyB,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACvH,KAAK,EAAE,KAAK,CAAC,yBAAyB,CAAC,cAAc,GAAG,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC;CAClG;AAqBD,eAAO,MAAM,IAAI,cAuDC,CAAC;AAInB,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../src/components/Tile/Tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAQ7C,UAAU,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,KAAK,CAAC;IACpH,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,sDAAsD;IACtD,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,cAAc;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,yBAAyB,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACvH,KAAK,EAAE,KAAK,CAAC,yBAAyB,CAAC,cAAc,GAAG,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC;CAClG;AAuBD,eAAO,MAAM,IAAI,cAmCC,CAAC;AAKnB,eAAe,IAAI,CAAC"}

package/components/Tile/componentdata.json

@@ -1 +1 @@
-{"props":{"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"},"declarations":[{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"}],"required":false,"type":{"name":"string"}},"icon":{"defaultValue":null,"description":"Sets the icon to be displayed inside the tile.","name":"icon","parent":{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"},"declarations":[{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"}],"required":true,"type":{"name":"ReactElement<any, string | JSXElementConstructor<any>>"}},"title":{"defaultValue":null,"description":"Sets the title to be displayed inside the tile.","name":"title","parent":{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"},"declarations":[{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"}],"required":true,"type":{"name":"ReactElement<any, string | JSXElementConstructor<any>>"}},"highlighted":{"defaultValue":null,"description":"Toggles the highlighted style of the tile.","name":"highlighted","parent":{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"},"declarations":[{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"}],"required":false,"type":{"name":"boolean"}},"description":{"defaultValue":null,"description":"Sets the description to be displayed inside the tile.","name":"description","parent":{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"},"declarations":[{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"}],"required":false,"type":{"name":"string"}},"fixed":{"defaultValue":null,"description":"Sets a fixed max and min width for the tile.","name":"fixed","parent":{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"},"declarations":[{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"}],"required":false,"type":{"name":"boolean"}},"onClick":{"defaultValue":null,"description":"Called when the tile is clicked on.","name":"onClick","parent":{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"},"declarations":[{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"}],"required":false,"type":{"name":"((e?: MouseEvent<HTMLElement, MouseEvent>) => void)"}},"htmlMarkup":{"defaultValue":null,"description":"HTML markup for tile. Default: a","name":"htmlMarkup","parent":{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"},"declarations":[{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"}],"required":false,"type":{"name":"enum","raw":"TileTags","value":[{"value":"\"button\""},{"value":"\"a\""}]}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"},"declarations":[{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"}],"required":false,"type":{"name":"string"}},"download":{"defaultValue":null,"description":"","name":"download","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"}],"required":false,"type":{"name":"string"}},"href":{"defaultValue":null,"description":"","name":"href","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"}],"required":false,"type":{"name":"string"}},"hrefLang":{"defaultValue":null,"description":"","name":"hrefLang","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"}],"required":false,"type":{"name":"string"}},"media":{"defaultValue":null,"description":"","name":"media","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"}],"required":false,"type":{"name":"string"}},"ping":{"defaultValue":null,"description":"","name":"ping","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"}],"required":false,"type":{"name":"string"}},"rel":{"defaultValue":null,"description":"","name":"rel","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"}],"required":false,"type":{"name":"enum","raw":"AnchorTarget","value":[{"value":"\"_self\""},{"value":"\"_blank\""},{"value":"\"_parent\""},{"value":"\"_top\""}]}},"target":{"defaultValue":null,"description":"","name":"target","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"}],"required":false,"type":{"name":"string"}},"referrerPolicy":{"defaultValue":null,"description":"","name":"referrerPolicy","parent":{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"},"declarations":[{"fileName":"designsystem/src/constants.ts","name":"HTMLAnchorProps"}],"required":false,"type":{"name":"enum","raw":"\"\" | \"same-origin\" | \"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\"","value":[{"value":"\"\""},{"value":"\"same-origin\""},{"value":"\"no-referrer\""},{"value":"\"no-referrer-when-downgrade\""},{"value":"\"origin\""},{"value":"\"origin-when-cross-origin\""},{"value":"\"strict-origin\""},{"value":"\"strict-origin-when-cross-origin\""},{"value":"\"unsafe-url\""}]}}}}
+{"props":{"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"},"declarations":[{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"}],"required":false,"type":{"name":"string"}},"icon":{"defaultValue":null,"description":"Sets the icon to be displayed inside the tile.","name":"icon","parent":{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"},"declarations":[{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"}],"required":true,"type":{"name":"ReactElement<any, string | JSXElementConstructor<any>>"}},"title":{"defaultValue":null,"description":"Sets the title to be displayed inside the tile.","name":"title","parent":{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"},"declarations":[{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"}],"required":true,"type":{"name":"ReactElement<any, string | JSXElementConstructor<any>>"}},"highlighted":{"defaultValue":null,"description":"Toggles the highlighted style of the tile.","name":"highlighted","parent":{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"},"declarations":[{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"}],"required":false,"type":{"name":"boolean"}},"description":{"defaultValue":null,"description":"Sets the description to be displayed inside the tile.","name":"description","parent":{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"},"declarations":[{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"}],"required":false,"type":{"name":"string"}},"fixed":{"defaultValue":null,"description":"Sets a fixed max and min width for the tile.","name":"fixed","parent":{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"},"declarations":[{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"}],"required":false,"type":{"name":"boolean"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"},"declarations":[{"fileName":"src/components/Tile/Tile.tsx","name":"TileProps"}],"required":false,"type":{"name":"string"}},"href":{"defaultValue":null,"description":"","name":"href","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AnchorHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AnchorHTMLAttributes"}],"required":false,"type":{"name":"string"}},"target":{"defaultValue":null,"description":"","name":"target","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AnchorHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AnchorHTMLAttributes"}],"required":false,"type":{"name":"HTMLAttributeAnchorTarget"}},"onClick":{"defaultValue":null,"description":"","name":"onClick","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"DOMAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"MouseEventHandler<HTMLAnchorElement>"}},"rel":{"defaultValue":null,"description":"","name":"rel","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"}}}}

package/components/Tile/index.js

@@ -1,2 +1,2 @@
-import e from"react";import f from"classnames";import{AnalyticsId as w,IconSize as C}from"../../constants.js";import{useHover as k}from"../../hooks/useHover.js";import"../Icons/Icon.js";import t from"./styles.module.scss";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";const y=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)}),E=e.forwardRef((l,i)=>{const{icon:o,title:s,className:n="",description:r,fixed:c=!1,highlighted:a=!1,testId:m,htmlMarkup:p="a",..._}=l,{hoverRef:h,isHovered:b}=k(i),d=!r,N=f(t.tile,{[t["tile--fixed"]]:c,[t["tile--compact"]]:d,[t["tile--highlighted"]]:a,[t["tile--button"]]:p==="button"},n),T=f(t["title-wrapper"],{[t["title-wrapper--compact"]]:d}),u=()=>e.createElement(e.Fragment,null,e.createElement("span",{className:T},e.cloneElement(o,{size:C.Medium,isHovered:b,color:a?"white":"black"}),e.cloneElement(s,{highlighted:a,compact:d})),r?e.createElement("p",{className:t.tile__description},r):null),g={className:N,["data-testid"]:m,["data-analyticsid"]:w.Tile,..._};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()))});E.Title=y;const S=E;export{E as Tile,S as default};
+import t from"react";import d from"classnames";import{AnalyticsId as C,IconSize as R}from"../../constants.js";import{useHover as k}from"../../hooks/useHover.js";import{mergeRefs as v}from"../../utils/refs.js";import"../Icons/Icon.js";import e from"./styles.module.scss";import"../../hooks/usePseudoClasses.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";const g=t.forwardRef((r,a)=>{const{children:s,className:o,htmlMarkup:c="span",highlighted:i,compact:m}=r,l=d(e.tile__title,{[e["tile__title--highlighted"]]:i,[e["tile__title--compact"]]:m},o),n=c;return t.createElement(n,{className:l,ref:a},s)});g.displayName="Title";const f=t.forwardRef((r,a)=>{const{icon:s,title:o,className:c="",description:i,fixed:m=!1,highlighted:l=!1,testId:n,target:h,rel:N,href:T,onClick:_}=r,{hoverRef:u,isHovered:E}=k(),p=!i,w=d(e.tile,{[e["tile--fixed"]]:m,[e["tile--compact"]]:p,[e["tile--highlighted"]]:l},c),y=d(e["title-wrapper"],{[e["title-wrapper--compact"]]:p});return t.createElement("a",{ref:v([a,u]),href:T,target:h,rel:h==="_blank"?"noopener noreferrer":N,className:w,"data-testid":n,"data-analyticsid":C.Tile,onClick:_},t.createElement("div",{className:y},t.cloneElement(s,{size:R.Medium,isHovered:E,color:l?"white":"black"}),t.cloneElement(o,{highlighted:l,compact:p})),i&&t.createElement("p",{className:e.tile__description},i))});f.displayName="Tile";f.Title=g;const q=f;export{f as Tile,q 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';\n\nimport classNames from 'classnames';\n\nimport { TitleTags } from './../Title/Title';\nimport { AnalyticsId, HTMLAnchorProps } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { IconSize } from '../Icons';\n\nimport tileStyles from './styles.module.scss';\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      <span className={tileTitleWrapperClasses}>\n        {React.cloneElement(icon, { size: IconSize.Medium, isHovered, color: highlighted ? 'white' : 'black' })}\n        {React.cloneElement(title, { highlighted: highlighted, compact: compact })}\n      </span>\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","Tile$1"],"mappings":"sTA8CA,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,0BAA0B,CAAC,EAAGJ,EAC1C,CAACI,EAAW,sBAAsB,CAAC,EAAGH,CACxC,EACAH,CAAA,EAEIO,EAAYN,EAElB,OACGL,EAAA,cAAAW,EAAA,CAAU,UAAWH,EAAc,IAAAN,GACjCC,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,IAAK,GAAGa,CAAc,EAAAjB,EAC3H,CAAE,SAAAkB,EAAU,UAAAC,CAAA,EAAcC,EAC9BnB,CAAA,EAEIK,EAAU,CAACQ,EACXO,EAAcb,EAClBC,EAAW,KACX,CACE,CAACA,EAAW,aAAa,CAAC,EAAGM,EAC7B,CAACN,EAAW,eAAe,CAAC,EAAGH,EAC/B,CAACG,EAAW,mBAAmB,CAAC,EAAGJ,EACnC,CAACI,EAAW,cAAc,CAAC,EAAGL,IAAe,QAC/C,EACAD,CAAA,EAEImB,EAA0Bd,EAAWC,EAAW,eAAe,EAAG,CACtE,CAACA,EAAW,wBAAwB,CAAC,EAAGH,CAAA,CACzC,EAEKiB,EAAgB,IACpBxB,EAAA,cAAAA,EAAA,SAAA,KACGA,EAAA,cAAA,OAAA,CAAK,UAAWuB,CACd,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,kBAAe,IAAE,CAAA,UAAWL,EAAW,mBAAoBK,CAAY,EAAO,IACjF,EAGIW,EAAc,CAClB,UAAWJ,EACX,CAAC,aAAa,EAAGL,EACjB,CAAC,kBAAkB,EAAGU,EAAY,KAClC,GAAGT,CAAA,EAIH,OAAAlB,EAAA,cAAAA,EAAA,SAAA,KACGK,IAAe,KACdL,EAAA,cAAC,IAAA,CACC,IAAKmB,EACL,IAAKlB,EAAM,SAAW,SAAW,sBAAwBA,EAAM,IAC9D,GAAGyB,CAAA,EAEHF,EAAc,CAAA,EAGlBnB,IAAe,UACdL,EAAA,cAAC,SAAO,CAAA,IAAKmB,EAAgD,KAAK,SAAU,GAAGO,CAC5E,EAAAF,EAAA,CACH,CAEJ,CAEJ,CAAC,EAEDZ,EAAK,MAAQb,EAEb,MAAA6B,EAAehB"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tile/Tile.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { TitleTags } from './../Title/Title';\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { mergeRefs } from '../../utils/refs';\nimport { IconSize } from '../Icons';\n\nimport tileStyles from './styles.module.scss';\n\ninterface TileProps extends Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick' | 'rel'> {\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  /** 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\nTitle.displayName = 'Title';\n\nexport const Tile = React.forwardRef<HTMLAnchorElement, TileProps>((props, ref) => {\n  const { icon, title, className = '', description, fixed = false, highlighted = false, testId, target, rel, href, onClick } = props;\n  const { hoverRef, isHovered } = useHover<HTMLAnchorElement>();\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    },\n    className\n  );\n  const tileTitleWrapperClasses = classNames(tileStyles['title-wrapper'], {\n    [tileStyles['title-wrapper--compact']]: compact,\n  });\n\n  return (\n    <a\n      ref={mergeRefs([ref, hoverRef])}\n      href={href}\n      target={target}\n      rel={target === '_blank' ? 'noopener noreferrer' : rel}\n      className={tileClasses}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Tile}\n      onClick={onClick}\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>}\n    </a>\n  );\n}) as TileCompound;\n\nTile.displayName = 'Tile';\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","target","rel","href","onClick","hoverRef","isHovered","useHover","tileClasses","tileTitleWrapperClasses","mergeRefs","AnalyticsId","IconSize","Tile$1"],"mappings":"8YAyCA,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,0BAA0B,CAAC,EAAGJ,EAC1C,CAACI,EAAW,sBAAsB,CAAC,EAAGH,CACxC,EACAH,CAAA,EAEIO,EAAYN,EAElB,OACGL,EAAA,cAAAW,EAAA,CAAU,UAAWH,EAAc,IAAAN,GACjCC,CACH,CAEJ,CAAC,EAEDJ,EAAM,YAAc,QAEb,MAAMa,EAAOZ,EAAM,WAAyC,CAACC,EAAOC,IAAQ,CACjF,KAAM,CAAE,KAAAW,EAAM,MAAAC,EAAO,UAAAV,EAAY,GAAI,YAAAW,EAAa,MAAAC,EAAQ,GAAO,YAAAV,EAAc,GAAO,OAAAW,EAAQ,OAAAC,EAAQ,IAAAC,EAAK,KAAAC,EAAM,QAAAC,CAAY,EAAApB,EACvH,CAAE,SAAAqB,EAAU,UAAAC,CAAU,EAAIC,EAA4B,EACtDjB,EAAU,CAACQ,EACXU,EAAchB,EAClBC,EAAW,KACX,CACE,CAACA,EAAW,aAAa,CAAC,EAAGM,EAC7B,CAACN,EAAW,eAAe,CAAC,EAAGH,EAC/B,CAACG,EAAW,mBAAmB,CAAC,EAAGJ,CACrC,EACAF,CAAA,EAEIsB,EAA0BjB,EAAWC,EAAW,eAAe,EAAG,CACtE,CAACA,EAAW,wBAAwB,CAAC,EAAGH,CAAA,CACzC,EAGC,OAAAP,EAAA,cAAC,IAAA,CACC,IAAK2B,EAAU,CAACzB,EAAKoB,CAAQ,CAAC,EAC9B,KAAAF,EACA,OAAAF,EACA,IAAKA,IAAW,SAAW,sBAAwBC,EACnD,UAAWM,EACX,cAAaR,EACb,mBAAkBW,EAAY,KAC9B,QAAAP,CAAA,EAEArB,EAAA,cAAC,MAAI,CAAA,UAAW0B,CACb,EAAA1B,EAAM,aAAaa,EAAM,CAAE,KAAMgB,EAAS,OAAQ,UAAAN,EAAW,MAAOjB,EAAc,QAAU,OAAQ,CAAC,EACrGN,EAAM,aAAac,EAAO,CAAE,YAAAR,EAA0B,QAAAC,CAAkB,CAAA,CAC3E,EACCQ,GAAgBf,EAAA,cAAA,IAAA,CAAE,UAAWU,EAAW,mBAAoBK,CAAY,CAAA,CAG/E,CAAC,EAEDH,EAAK,YAAc,OACnBA,EAAK,MAAQb,EAEb,MAAA+B,EAAelB"}

package/components/Tile/styles.module.scss

@@ -39,10 +39,6 @@
     border: 1px solid $black;
   }
 
-  &--button {
-    border: none;
-  }
-
   &--fixed {
     min-width: 15rem;
     max-width: 20rem;

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

@@ -4,7 +4,6 @@ export type Styles = {
   tile__title: string;
   'tile__title--compact': string;
   'tile__title--highlighted': string;
-  'tile--button': string;
   'tile--compact': string;
   'tile--fixed': string;
   'tile--highlighted': string;

package/components/Tooltip/index.js

@@ -1,2 +1,2 @@
-import{T as p}from"../../Tooltip.js";import{a as J,b as K}from"../../Tooltip.js";import"react";import"../../TooltipWord.js";import"../../constants.js";import"./TooltipWord/styles.module.scss";import"../../hooks/useDelayedState.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../HelpBubble.js";import"classnames";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../../utils/refs.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../PopOver/styles.module.scss";import"../HelpBubble/styles.module.scss";export{J as Tooltip,K as TooltipOpenProvider,p as default};
+import{T as p}from"../../Tooltip.js";import{a as K,b as L}from"../../Tooltip.js";import"react";import"../../TooltipWord.js";import"../../constants.js";import"./TooltipWord/styles.module.scss";import"../../hooks/useDelayedState.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../HelpBubble.js";import"classnames";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../hooks/usePseudoClasses.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../../utils/refs.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../PopOver/styles.module.scss";import"../HelpBubble/styles.module.scss";export{K as Tooltip,L as TooltipOpenProvider,p as default};
 //# sourceMappingURL=index.js.map

package/components/TooltipExample/index.js

@@ -1,2 +1,2 @@
-import t from"react";import{longLoremText as m}from"../../utils/loremtext.js";import{b as i,T as r}from"../../Tooltip.js";import"../../TooltipWord.js";import"../../constants.js";import"../Tooltip/TooltipWord/styles.module.scss";import"../../hooks/useDelayedState.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../HelpBubble.js";import"classnames";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../../utils/refs.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../PopOver/styles.module.scss";import"../HelpBubble/styles.module.scss";const e=o=>t.createElement(i,null,t.createElement(t.Fragment,null,t.createElement(r,{...o},"Et tooltip her.")," "+m,t.createElement("button",null,"Knapp"),"Dette er ",t.createElement(r,{...o},o.children)," som skal ha nærmere forklaring.",m,t.createElement(r,{...o},"Enda et tooltip her."))),J=e;export{J as default};
+import t from"react";import{longLoremText as m}from"../../utils/loremtext.js";import{b as i,T as r}from"../../Tooltip.js";import"../../TooltipWord.js";import"../../constants.js";import"../Tooltip/TooltipWord/styles.module.scss";import"../../hooks/useDelayedState.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../HelpBubble.js";import"classnames";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../hooks/usePseudoClasses.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../../utils/refs.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../PopOver/styles.module.scss";import"../HelpBubble/styles.module.scss";const e=o=>t.createElement(i,null,t.createElement(t.Fragment,null,t.createElement(r,{...o},"Et tooltip her.")," "+m,t.createElement("button",null,"Knapp"),"Dette er ",t.createElement(r,{...o},o.children)," som skal ha nærmere forklaring.",m,t.createElement(r,{...o},"Enda et tooltip her."))),M=e;export{M as default};
 //# sourceMappingURL=index.js.map

package/components/TooltipExample/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/TooltipExample/TooltipExample.tsx"],"sourcesContent":["import React from 'react';\n\nimport longLoremText from '../../utils/loremtext';\nimport Tooltip, { TooltipProps, TooltipOpenProvider } from '../Tooltip';\n\nconst TooltipExample: React.FC<TooltipProps> = props => {\n  return (\n    <TooltipOpenProvider>\n      <>\n        <Tooltip {...props}>{'Et tooltip her.'}</Tooltip>\n        {' ' + longLoremText}\n        <button>{'Knapp'}</button>\n        {'Dette er '}\n        <Tooltip {...props}>{props.children}</Tooltip>\n        {' som skal ha nærmere forklaring.'}\n        {longLoremText}\n        <Tooltip {...props}>{'Enda et tooltip her.'}</Tooltip>\n      </>\n    </TooltipOpenProvider>\n  );\n};\n\nexport default TooltipExample;\n"],"names":["TooltipExample","props","React","TooltipOpenProvider","Tooltip","longLoremText","TooltipExample$1"],"mappings":"iqCAKA,MAAMA,EAAkDC,GAEnDC,EAAA,cAAAC,EAAA,KAEGD,EAAA,cAAAA,EAAA,SAAA,KAAAA,EAAA,cAACE,EAAS,CAAA,GAAGH,GAAQ,iBAAkB,EACtC,IAAMI,EACPH,EAAA,cAAC,cAAQ,OAAQ,EAChB,YACDA,EAAA,cAACE,EAAS,CAAA,GAAGH,CAAQ,EAAAA,EAAM,QAAS,EACnC,mCACAI,EACDH,EAAA,cAACE,EAAS,CAAA,GAAGH,CAAQ,EAAA,sBAAuB,CAC9C,CACF,EAIJK,EAAeN"}
+{"version":3,"file":"index.js","sources":["../../../src/components/TooltipExample/TooltipExample.tsx"],"sourcesContent":["import React from 'react';\n\nimport longLoremText from '../../utils/loremtext';\nimport Tooltip, { TooltipProps, TooltipOpenProvider } from '../Tooltip';\n\nconst TooltipExample: React.FC<TooltipProps> = props => {\n  return (\n    <TooltipOpenProvider>\n      <>\n        <Tooltip {...props}>{'Et tooltip her.'}</Tooltip>\n        {' ' + longLoremText}\n        <button>{'Knapp'}</button>\n        {'Dette er '}\n        <Tooltip {...props}>{props.children}</Tooltip>\n        {' som skal ha nærmere forklaring.'}\n        {longLoremText}\n        <Tooltip {...props}>{'Enda et tooltip her.'}</Tooltip>\n      </>\n    </TooltipOpenProvider>\n  );\n};\n\nexport default TooltipExample;\n"],"names":["TooltipExample","props","React","TooltipOpenProvider","Tooltip","longLoremText","TooltipExample$1"],"mappings":"ysCAKA,MAAMA,EAAkDC,GAEnDC,EAAA,cAAAC,EAAA,KAEGD,EAAA,cAAAA,EAAA,SAAA,KAAAA,EAAA,cAACE,EAAS,CAAA,GAAGH,GAAQ,iBAAkB,EACtC,IAAMI,EACPH,EAAA,cAAC,cAAQ,OAAQ,EAChB,YACDA,EAAA,cAACE,EAAS,CAAA,GAAGH,CAAQ,EAAAA,EAAM,QAAS,EACnC,mCACAI,EACDH,EAAA,cAACE,EAAS,CAAA,GAAGH,CAAQ,EAAA,sBAAuB,CAC9C,CACF,EAIJK,EAAeN"}

package/components/Trigger/Trigger.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+export type TriggerTags = 'button' | 'span';
 export type TriggerVariant = 'help';
 export type TriggerSize = 'medium' | 'large';
 export type TriggerMode = 'onlight' | 'ondark';
@@ -27,6 +28,14 @@ export interface TriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonE
      * Indicates that the trigger is in use.
      */
     selected?: boolean;
+    /**
+     * Indicates that the trigger is hovered. Used in combination with htmlMarkup=span to force visual hover state.
+     */
+    isHovered?: boolean;
+    /**
+     * Changes the underlying element of the trigger. If set to span, the trigger will be a non-interactive icon. Default: button
+     */
+    htmlMarkup?: TriggerTags;
     /**
      * Classname will be applied to the button element.
      */

package/components/Trigger/Trigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Trigger.d.ts","sourceRoot":"","sources":["../../../src/components/Trigger/Trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC;AAEpC,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/C,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,eAAe,GAAG,eAAe,CAAC;IACrI;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA4BD,QAAA,MAAM,OAAO,wFAmCZ,CAAC;AAIF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Trigger.d.ts","sourceRoot":"","sources":["../../../src/components/Trigger/Trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5C,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC;AAEpC,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/C,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,eAAe,GAAG,eAAe,CAAC;IACrI;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA4BD,QAAA,MAAM,OAAO,wFA2DZ,CAAC;AAIF,eAAe,OAAO,CAAC"}

package/components/Trigger/componentdata.json

@@ -1 +1 @@
-{"props":{"ariaLabel":{"defaultValue":null,"description":"Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!","name":"ariaLabel","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"string"}},"ariaLabelledById":{"defaultValue":null,"description":"Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!","name":"ariaLabelledById","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"string"}},"variant":{"defaultValue":{"value":"help"},"description":"Controls the icon and color. Default: help.","name":"variant","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"enum","raw":"\"help\"","value":[{"value":"\"help\""}]}},"mode":{"defaultValue":{"value":"onlight"},"description":"Changes the design based on the background the trigger is placed on. Default: onlight.","name":"mode","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"enum","raw":"TriggerMode","value":[{"value":"\"onlight\""},{"value":"\"ondark\""}]}},"size":{"defaultValue":{"value":"medium"},"description":"Size of the trigger. Default: medium.","name":"size","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"enum","raw":"TriggerSize","value":[{"value":"\"medium\""},{"value":"\"large\""}]}},"selected":{"defaultValue":{"value":"false"},"description":"Indicates that the trigger is in use.","name":"selected","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"boolean"}},"className":{"defaultValue":null,"description":"Classname will be applied to the button element.","name":"className","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Optional test id.","name":"testId","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"string"}},"onClick":{"defaultValue":null,"description":"","name":"onClick","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"DOMAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"MouseEventHandler<HTMLButtonElement>"}},"aria-haspopup":{"defaultValue":null,"description":"Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.","name":"aria-haspopup","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\""}},"aria-controls":{"defaultValue":null,"description":"Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.","name":"aria-controls","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}}}}
+{"props":{"ariaLabel":{"defaultValue":null,"description":"Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!","name":"ariaLabel","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"string"}},"ariaLabelledById":{"defaultValue":null,"description":"Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!","name":"ariaLabelledById","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"string"}},"variant":{"defaultValue":{"value":"help"},"description":"Controls the icon and color. Default: help.","name":"variant","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"enum","raw":"\"help\"","value":[{"value":"\"help\""}]}},"mode":{"defaultValue":{"value":"onlight"},"description":"Changes the design based on the background the trigger is placed on. Default: onlight.","name":"mode","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"enum","raw":"TriggerMode","value":[{"value":"\"onlight\""},{"value":"\"ondark\""}]}},"size":{"defaultValue":{"value":"medium"},"description":"Size of the trigger. Default: medium.","name":"size","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"enum","raw":"TriggerSize","value":[{"value":"\"medium\""},{"value":"\"large\""}]}},"selected":{"defaultValue":{"value":"false"},"description":"Indicates that the trigger is in use.","name":"selected","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"boolean"}},"isHovered":{"defaultValue":null,"description":"Indicates that the trigger is hovered. Used in combination with htmlMarkup=span to force visual hover state.","name":"isHovered","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"boolean"}},"htmlMarkup":{"defaultValue":{"value":"button"},"description":"Changes the underlying element of the trigger. If set to span, the trigger will be a non-interactive icon. Default: button","name":"htmlMarkup","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"enum","raw":"TriggerTags","value":[{"value":"\"button\""},{"value":"\"span\""}]}},"className":{"defaultValue":null,"description":"Classname will be applied to the button element.","name":"className","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Optional test id.","name":"testId","parent":{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"},"declarations":[{"fileName":"src/components/Trigger/Trigger.tsx","name":"TriggerProps"}],"required":false,"type":{"name":"string"}},"onClick":{"defaultValue":null,"description":"","name":"onClick","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"DOMAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"MouseEventHandler<HTMLButtonElement>"}},"aria-haspopup":{"defaultValue":null,"description":"Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.","name":"aria-haspopup","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"boolean | \"false\" | \"true\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\" | \"dialog\""}},"aria-controls":{"defaultValue":null,"description":"Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.","name":"aria-controls","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}}}}