@helsenorge/designsystem-react 6.4.0 → 6.6.0

package/components/RadioButton/RadioButton.stories.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { FormMode, FormSize } from '../../constants';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./RadioButton").RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        label: string;
+        defaultChecked: false;
+        disabled: false;
+        mode: FormMode.onwhite;
+        size: FormSize.medium;
+        name: string;
+        value: string;
+        required: false;
+    };
+    argTypes: {
+        label: {
+            control: string;
+        };
+        defaultChecked: {
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+        mode: {
+            control: string;
+            options: typeof FormMode;
+        };
+        size: {
+            control: string;
+            options: typeof FormSize;
+        };
+        name: {
+            control: string;
+        };
+        value: {
+            control: string;
+        };
+        required: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Large: Story;
+//# sourceMappingURL=RadioButton.stories.d.ts.map

package/components/Select/Select.stories.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Select").SelectProps & React.RefAttributes<HTMLSelectElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        children: React.JSX.Element;
+        label: React.JSX.Element;
+        name: string;
+        onChange: import("@storybook/addon-actions").HandlerFunction;
+        disabled: false;
+        autoComplete: string;
+    };
+    argTypes: {
+        disabled: {
+            control: string;
+        };
+        autoComplete: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const DefaultValue: Story;
+export declare const Disabled: Story;
+export declare const Concepts: Story;
+export declare const Modes: Story;
+export declare const Width: Story;
+//# sourceMappingURL=Select.stories.d.ts.map

package/components/ServiceMessage/ServiceMessage.stories.d.ts

@@ -0,0 +1,71 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.FC<import("./ServiceMessage").ServiceMessageProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        label: string;
+        info: string;
+        extraInfo: string;
+        dismissable: true;
+        expanderOpenFromStart: true;
+        urlTitle: string;
+        url: string;
+        target: "_self";
+        closeBtnText: string;
+        variant: "alert";
+        testId: string;
+    };
+    argTypes: {
+        label: {
+            control: string;
+        };
+        info: {
+            control: string;
+        };
+        extraInfo: {
+            control: string;
+        };
+        dismissable: {
+            control: string;
+        };
+        expanderOpenFromStart: {
+            control: string;
+        };
+        urlTitle: {
+            control: string;
+        };
+        url: {
+            control: string;
+        };
+        target: {
+            control: string;
+            options: string[];
+        };
+        closeBtnText: {
+            control: string;
+        };
+        variant: {
+            control: string;
+            options: string[];
+        };
+        testId: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ReadMore: Story;
+export declare const DismissableWithContent: Story;
+export declare const DismissableLabelOnly: Story;
+export declare const LabelOnly: Story;
+//# sourceMappingURL=ServiceMessage.stories.d.ts.map

package/components/SharingStatus/SharingStatus.stories.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.FC<import("./SharingStatus").SharingStatusProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        children: string;
+    };
+    argTypes: {
+        children: {
+            control: string;
+        };
+        wrapText: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WrapText: Story;
+export declare const DifferentIcons: Story;
+export declare const AllColors: Story;
+//# sourceMappingURL=SharingStatus.stories.d.ts.map

package/components/Slider/Slider.d.ts

@@ -3,7 +3,7 @@ export type SliderStep = {
     label?: number | string;
     emojiUniCode?: string;
 };
-interface SliderProps {
+export interface SliderProps {
     /**	Sets the title of the slider. */
     title?: string;
     /** Adds the left hand label to the element. */

package/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  useEffect(() => {\n    setSafeValue(initial);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\ninterface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */\n  selected?: boolean;\n  /** Sets the steps data for the slider */\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the value of the slider */\n  value?: number;\n}\n\nexport const Slider: React.FC<SliderProps> = ({\n  title,\n  ariaLabel,\n  labelLeft,\n  labelRight,\n  disabled = false,\n  onChange,\n  steps,\n  step = 1,\n  minValue = 0,\n  maxValue = steps ? steps.length - 1 : 100,\n  selected = true,\n  testId,\n  value,\n}) => {\n  const [isMoving, setIsMoving] = useState(false);\n  const [selectedState, setSelectedState] = useState(typeof value === 'undefined' ? selected : true);\n  const [valueState, setValueState] = useSafeNumberValue(\n    typeof value === 'undefined' ? (maxValue - minValue) / 2 + minValue : value,\n    minValue,\n    maxValue\n  );\n\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const markerRef = useRef<HTMLDivElement>(null);\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValueState(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return () => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (value !== valueState && typeof value !== 'undefined') {\n      handleSelected();\n      setValueState(value);\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (!disabled && selectedState && onChange) {\n      onChange(valueState);\n    }\n  }, [valueState, selectedState]);\n\n  useEffect(() => {\n    if (typeof value === 'undefined' && selected !== selectedState) {\n      setSelectedState(selected);\n    }\n  }, [selected]);\n\n  const handleSelected = (): void => {\n    if (selectedState === false) {\n      setSelectedState(true);\n    }\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValueState(valueState - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValueState(valueState - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValueState(valueState + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValueState(valueState + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValueState(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValueState(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      handleSelected();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValueState(newValue);\n    markerRef.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n    handleSelected();\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    markerRef.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (valueState - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((valueState - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPositionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPositionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n          {title}\n        </Title>\n      )}\n      <div className={styles['slider__content-container']}>\n        {renderEmojies()}\n        {/* Komponenten er tilgjengelig for mus/keyboard gjennom bruk av slideren */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div\n          ref={trackRef}\n          className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n          onClick={handleTrackClick}\n          onPointerDown={handlePointerDown}\n        >\n          <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n          <div\n            role={disabled ? undefined : 'slider'}\n            ref={markerRef}\n            className={classNames(styles.slider__marker, {\n              [styles['slider__marker--disabled']]: disabled,\n              [styles['slider__marker--selected']]: selectedState,\n            })}\n            style={{\n              left: `${markerXPos}px`,\n            }}\n            onKeyDown={handleKeyDown}\n            aria-valuenow={valueState}\n            aria-valuetext={getAriaValueText()}\n            aria-valuemin={minValue}\n            aria-valuemax={maxValue}\n            tabIndex={disabled ? undefined : 0}\n            aria-disabled={disabled}\n            {...ariaLabelAttributes}\n          />\n        </div>\n        {renderStepLabels()}\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={styles.slider__options}>\n          <span id={labelLeftId}>{labelLeft}</span>\n          <span id={labelRightId}>{labelRight}</span>\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","setSafeValue","newValue","useEffect","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","steps","step","minValue","maxValue","selected","testId","isMoving","setIsMoving","selectedState","setSelectedState","valueState","setValueState","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","largeStep","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","normalizedPosition","valueRange","handlePointerMove","handleSelected","handleKeyDown","e","flag","handleTrackClick","handlePointerDown","markerXPos","getAriaValueText","stepIndex","emojiCode","label","ariaLabelAttributes","getAriaLabelAttributes","getXPositionStyling","index","stepsLength","renderEmojies","React","styles","renderSteps","_step","renderStepLabels","AnalyticsId","Title","classNames","Slider$1"],"mappings":";;;;;;;;AAYA,MAAMA,KAAqB,CAACC,GAAiBC,GAAaC,MAAmD;AAC3G,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAASL,CAAO,GAEpCM,IAAe,CAACC,MAA2B;AAC/C,IAAIA,IAAWL,IACbE,EAASF,CAAG,IACHK,IAAWN,IACpBG,EAASH,CAAG,IAEZG,EAASG,CAAQ;AAAA,EACnB;AAGF,SAAAC,EAAU,MAAM;AACd,IAAAF,EAAaN,CAAO;AAAA,EAAA,GACnB,CAACC,GAAKC,CAAG,CAAC,GAEN,CAACC,GAAOG,CAAY;AAC7B,GAoCaG,KAAgC,CAAC;AAAA,EAC5C,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAWH,IAAQA,EAAM,SAAS,IAAI;AAAA,EACtC,UAAAI,IAAW;AAAA,EACX,QAAAC;AAAA,EACA,OAAAlB;AACF,MAAM;AACJ,QAAM,CAACmB,GAAUC,CAAW,IAAIlB,EAAS,EAAK,GACxC,CAACmB,GAAeC,CAAgB,IAAIpB,EAAS,OAAOF,IAAU,MAAciB,IAAW,EAAI,GAC3F,CAACM,GAAYC,CAAa,IAAI5B;AAAA,IAClC,OAAOI,IAAU,OAAegB,IAAWD,KAAY,IAAIA,IAAWf;AAAA,IACtEe;AAAA,IACAC;AAAA,EAAA,GAGIS,IAAUC,KACVC,IAAcD,KACdE,IAAeF,KACfG,IAAWC,EAAuB,IAAI,GACtCC,IAAYD,EAAuB,IAAI,GACvC,EAAE,OAAOE,MAAeC,EAAQJ,CAAQ,KAAK,EAAE,OAAO,KACtDK,IAAYlB,IAAW;AAE7B,EAAAX,EAAU,MAAM;AACd,UAAM8B,IAAkB,MAAY;AAClC,MAAAf,EAAY,EAAK;AAAA,IAAA;AAGV,oBAAA,iBAAiB,aAAae,CAAe,GAE/C,MAAM;AACF,eAAA,oBAAoB,aAAaA,CAAe;AAAA,IAAA;AAAA,EAE7D,GAAG,CAAE,CAAA;AAEC,QAAAC,IAAgC,CAACC,MAAmC;;AACxE,UAAMC,MAAgBC,IAAAV,EAAS,YAAT,gBAAAU,EAAkB,wBAAwB,MAAK,GAG/DC,KAAsBH,IAAiBC,KAAiBN,GACxDS,IAAazB,IAAWD;AAE1Bf,QAAAA,IAAQwC,IAAqBC,IAAa1B;AAG9Cf,WAAAA,IADkB,KAAK,MAAMA,IAAQc,CAAI,IACrBA,GACpBd,IAAQ,KAAK,IAAIe,GAAU,KAAK,IAAIC,GAAUhB,CAAK,CAAC,GAE7CA;AAAAA,EAAA;AAGT,EAAAK,EAAU,MAAM;AACR,UAAAqC,IAAoB,CAAC,MAA0B;AAC/C,UAAA,CAAC/B,KAAYQ,GAAU;AACnB,cAAAf,IAAWgC,EAA8B,EAAE,OAAO;AACxD,QAAAZ,EAAcpB,CAAQ;AAAA,MACxB;AAAA,IAAA;AAGO,oBAAA,iBAAiB,eAAesC,CAAiB,GAEnD,MAAM;AACF,eAAA,oBAAoB,eAAeA,CAAiB;AAAA,IAAA;AAAA,EAC/D,GACC,CAACvB,CAAQ,CAAC,GAEbd,EAAU,MAAM;AACd,IAAIL,MAAUuB,KAAc,OAAOvB,IAAU,QAC5B2C,KACfnB,EAAcxB,CAAK;AAAA,EACrB,GACC,CAACA,CAAK,CAAC,GAEVK,EAAU,MAAM;AACV,IAAA,CAACM,KAAYU,KAAiBT,KAChCA,EAASW,CAAU;AAAA,EACrB,GACC,CAACA,GAAYF,CAAa,CAAC,GAE9BhB,EAAU,MAAM;AACd,IAAI,OAAOL,IAAU,OAAeiB,MAAaI,KAC/CC,EAAiBL,CAAQ;AAAA,EAC3B,GACC,CAACA,CAAQ,CAAC;AAEb,QAAM0B,IAAiB,MAAY;AACjC,IAAItB,MAAkB,MACpBC,EAAiB,EAAI;AAAA,EACvB,GAGIsB,IAA4D,CAAKC,MAAA;AACjE,QAAAlC;AAAU;AAEd,QAAImC,IAAO;AAEX,YAAQD,EAAE,KAAK;AAAA,MACb,KAAK;AAAA,MACL,KAAK;AACH,QAAArB,EAAcD,IAAaT,CAAI,GACxBgC,IAAA;AACP;AAAA,MACF,KAAK;AACH,QAAAtB,EAAcD,IAAaW,CAAS,GAC7BY,IAAA;AACP;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AACH,QAAAtB,EAAcD,IAAaT,CAAI,GACxBgC,IAAA;AACP;AAAA,MACF,KAAK;AACH,QAAAtB,EAAcD,IAAaW,CAAS,GAC7BY,IAAA;AACP;AAAA,MACF,KAAK;AACH,QAAAtB,EAAcT,CAAQ,GACf+B,IAAA;AACP;AAAA,MACF,KAAK;AACH,QAAAtB,EAAcR,CAAQ,GACf8B,IAAA;AACP;AAAA,IAGJ;AAEA,IAAIA,MACaH,KACfE,EAAE,eAAe,GACjBA,EAAE,gBAAgB;AAAA,EACpB,GAGIE,IAA4D,CAAKF,MAAA;;AACjE,QAAAlC;AAAU;AAER,UAAAP,IAAWgC,EAA8BS,EAAE,OAAO;AACxD,IAAArB,EAAcpB,CAAQ,IACtBmC,IAAAR,EAAU,YAAV,QAAAQ,EAAmB;AAAA,EAAM,GAGrBS,IAA+D,CAAKH,MAAA;;AACpE,IAAAlC,MAEJS,EAAY,EAAI,GACDuB,KAEfE,EAAE,eAAe,GACjBA,EAAE,gBAAgB,IAElBN,IAAAR,EAAU,YAAV,QAAAQ,EAAmB;AAAA,EAAM,GAGrBU,IAAajC,MAAaD,IAAYiB,KAAchB,IAAWD,MAAcQ,IAAaR,KAAY,GAEtGmC,IAAmB,MAA0B;AACjD,UAAMC,IAAYtC,IAAQ,KAAK,OAAOU,IAAaR,KAAYD,CAAI,IAAI;AAEvE,QAAID,KAASsC,MAAc,QAAQA,KAAa,KAAKA,IAAYtC,EAAM,QAAQ;AACvEC,YAAAA,IAAOD,EAAMsC,CAAS,GACtBC,IAAYtC,EAAK,cACjBuC,IAAQ,OAAOvC,EAAK,QAAU,MAAcA,EAAK,MAAM,aAAa;AAE1E,aAAOsC,KAAaC,IAAQ,GAAGD,CAAS,IAAIC,CAAK,KAAKD,KAAaC;AAAA,IACrE;AAAA,EAEO,GAkBHC,IAAsBC,EAAuB;AAAA,IACjD,OAAO/C;AAAA,IACP,KAjByB,MAA0B;AAC/C,UAAAD,KAASE,KAAaC;AACxB,eAAO,CAACe,GAASE,GAAaC,CAAY,EAAE,KAAK,GAAG;AAEtD,UAAIrB,KAASE;AACX,eAAO,CAACgB,GAASE,CAAW,EAAE,KAAK,GAAG;AAExC,UAAIpB,KAASG;AACX,eAAO,CAACe,GAASG,CAAY,EAAE,KAAK,GAAG;AAEzC,UAAIrB;AACK,eAAAkB;AAAA,IACT,GAKuB;AAAA,IACvB,QAAQ;AAAA,EAAA,CACT,GAEK+B,IAAsB,CAACC,GAAeC,OACnC,EAAE,MAAM,GAAID,KAASC,IAAc,KAAM,GAAG,QAG/CC,IAAgB,MAElBC,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAWC,EAAO,yBAAyB,KAC7ChD,KAAA,gBAAAA,EAAO,IAAI,CAACC,GAAM2C,MAEf3C,EAAK,gBACH8C,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MACb,KAAK,UAAUH;AAAA,MACf,WAAWI,EAAO;AAAA,MAClB,OAAOL,EAAoBC,GAAO5C,EAAM,MAAM;AAAA,IAAA;AAAA,IAE7CC,EAAK;AAAA,EAAA,EAKhB,GAIEgD,IAAc,MACXjD,KAAA,gBAAAA,EAAO,IAAI,CAACkD,GAAON,MAChBG,gBAAAA,EAAA,cAAA,OAAA,EAAI,KAAK,SAASH,GAAO,WAAWI,EAAO,qBAAwB,OAAOL,EAAoBC,GAAO5C,EAAM,MAAM,EAAG,CAAA,IAI1HmD,IAAmB,MAErBJ,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAWC,EAAO,yBAAyB,KAC7ChD,KAAA,gBAAAA,EAAO,IAAI,CAACC,GAAM2C,MAEf,OAAO3C,EAAK,QAAU,OACpB8C,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MACb,KAAK,UAAUH;AAAA,MACf,WAAWI,EAAO;AAAA,MAClB,OAAOL,EAAoBC,GAAO5C,EAAM,MAAM;AAAA,IAAA;AAAA,IAE7CC,EAAK;AAAA,EAAA,EAKhB;AAIJ,SACG8C,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWC,EAAO,QAAQ,eAAa3C,GAAQ,oBAAkB+C,EAAY,UAC/E1D,KACCqD,gBAAAA,EAAA,cAACM,IAAM,EAAA,WAAWL,EAAO,eAAkB,YAAY,MAAM,QAAQ,GAAG,YAAY,UAAU,IAAIpC,EAC/F,GAAAlB,CACH,GAEFqD,gBAAAA,EAAA,cAAC,SAAI,WAAWC,EAAO,2BAA2B,KAC/CF,KAGDC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK/B;AAAA,MACL,WAAWsC,EAAWN,EAAO,uBAAuB,GAAGlD,KAAYkD,EAAO,iCAAiC,CAAC;AAAA,MAC5G,SAASd;AAAA,MACT,eAAeC;AAAA,IAAA;AAAA,IAEdY,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWO,EAAWN,EAAO,eAAelD,KAAYkD,EAAO,yBAAyB,CAAC,EAAI,GAAAC,EAAA,CAAc;AAAA,IAChHF,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAMjD,IAAW,SAAY;AAAA,QAC7B,KAAKoB;AAAA,QACL,WAAWoC,EAAWN,EAAO,gBAAgB;AAAA,UAC3C,CAACA,EAAO,0BAA0B,CAAC,GAAGlD;AAAA,UACtC,CAACkD,EAAO,0BAA0B,CAAC,GAAGxC;AAAA,QAAA,CACvC;AAAA,QACD,OAAO;AAAA,UACL,MAAM,GAAG4B,CAAU;AAAA,QACrB;AAAA,QACA,WAAWL;AAAA,QACX,iBAAerB;AAAA,QACf,kBAAgB2B,EAAiB;AAAA,QACjC,iBAAenC;AAAA,QACf,iBAAeC;AAAA,QACf,UAAUL,IAAW,SAAY;AAAA,QACjC,iBAAeA;AAAA,QACd,GAAG2C;AAAA,MAAA;AAAA,IACN;AAAA,EACF,GACCU,GACH,IACEvD,KAAaC,MACbkD,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAWC,EAAO,gBAAA,mCACrB,QAAK,EAAA,IAAIlC,EAAc,GAAAlB,CAAU,GAClCmD,gBAAAA,EAAA,cAAC,UAAK,IAAIhC,EAAA,GAAelB,CAAW,CACtC,CAEJ;AAEJ,GAEA0D,KAAe9D;"}
+{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  useEffect(() => {\n    setSafeValue(initial);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\nexport interface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */\n  selected?: boolean;\n  /** Sets the steps data for the slider */\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the value of the slider */\n  value?: number;\n}\n\nexport const Slider: React.FC<SliderProps> = ({\n  title,\n  ariaLabel,\n  labelLeft,\n  labelRight,\n  disabled = false,\n  onChange,\n  steps,\n  step = 1,\n  minValue = 0,\n  maxValue = steps ? steps.length - 1 : 100,\n  selected = true,\n  testId,\n  value,\n}) => {\n  const [isMoving, setIsMoving] = useState(false);\n  const [selectedState, setSelectedState] = useState(typeof value === 'undefined' ? selected : true);\n  const [valueState, setValueState] = useSafeNumberValue(\n    typeof value === 'undefined' ? (maxValue - minValue) / 2 + minValue : value,\n    minValue,\n    maxValue\n  );\n\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const markerRef = useRef<HTMLDivElement>(null);\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValueState(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return () => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (value !== valueState && typeof value !== 'undefined') {\n      handleSelected();\n      setValueState(value);\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (!disabled && selectedState && onChange) {\n      onChange(valueState);\n    }\n  }, [valueState, selectedState]);\n\n  useEffect(() => {\n    if (typeof value === 'undefined' && selected !== selectedState) {\n      setSelectedState(selected);\n    }\n  }, [selected]);\n\n  const handleSelected = (): void => {\n    if (selectedState === false) {\n      setSelectedState(true);\n    }\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValueState(valueState - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValueState(valueState - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValueState(valueState + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValueState(valueState + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValueState(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValueState(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      handleSelected();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValueState(newValue);\n    markerRef.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n    handleSelected();\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    markerRef.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (valueState - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((valueState - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPositionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPositionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n          {title}\n        </Title>\n      )}\n      <div className={styles['slider__content-container']}>\n        {renderEmojies()}\n        {/* Komponenten er tilgjengelig for mus/keyboard gjennom bruk av slideren */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div\n          ref={trackRef}\n          className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n          onClick={handleTrackClick}\n          onPointerDown={handlePointerDown}\n        >\n          <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n          <div\n            role={disabled ? undefined : 'slider'}\n            ref={markerRef}\n            className={classNames(styles.slider__marker, {\n              [styles['slider__marker--disabled']]: disabled,\n              [styles['slider__marker--selected']]: selectedState,\n            })}\n            style={{\n              left: `${markerXPos}px`,\n            }}\n            onKeyDown={handleKeyDown}\n            aria-valuenow={valueState}\n            aria-valuetext={getAriaValueText()}\n            aria-valuemin={minValue}\n            aria-valuemax={maxValue}\n            tabIndex={disabled ? undefined : 0}\n            aria-disabled={disabled}\n            {...ariaLabelAttributes}\n          />\n        </div>\n        {renderStepLabels()}\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={styles.slider__options}>\n          <span id={labelLeftId}>{labelLeft}</span>\n          <span id={labelRightId}>{labelRight}</span>\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","setSafeValue","newValue","useEffect","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","steps","step","minValue","maxValue","selected","testId","isMoving","setIsMoving","selectedState","setSelectedState","valueState","setValueState","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","largeStep","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","normalizedPosition","valueRange","handlePointerMove","handleSelected","handleKeyDown","e","flag","handleTrackClick","handlePointerDown","markerXPos","getAriaValueText","stepIndex","emojiCode","label","ariaLabelAttributes","getAriaLabelAttributes","getXPositionStyling","index","stepsLength","renderEmojies","React","styles","renderSteps","_step","renderStepLabels","AnalyticsId","Title","classNames","Slider$1"],"mappings":"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"}

package/components/Slider/Slider.stories.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.FC<import("./Slider").SliderProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        title: string;
+        disabled: false;
+    };
+    argTypes: {
+        title: {
+            control: string;
+        };
+        labelLeft: {
+            control: string;
+        };
+        labelRight: {
+            control: string;
+        };
+        ariaLabel: {
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+        selected: {
+            control: string;
+        };
+        step: {
+            control: string;
+        };
+        value: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const NotSelected: Story;
+export declare const Steps: Story;
+export declare const StepLabel: Story;
+export declare const StepEmoji: Story;
+export declare const CombinedData: Story;
+//# sourceMappingURL=Slider.stories.d.ts.map

package/components/Spacer/Spacer.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SpacerSizes } from './../../theme/spacers';
-interface SpacerProps {
+export interface SpacerProps {
     /** Sets the size of the spacer. */
     size?: SpacerSizes;
     /** Adds custom classes to the element. */

package/components/Spacer/Spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","sources":["../../../src/components/Spacer/Spacer.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { SpacerSizes } from './../../theme/spacers';\nimport { AnalyticsId } from '../../constants';\n\nimport spacerStyles from './styles.module.scss';\n\ninterface SpacerProps {\n  /** Sets the size of the spacer. */\n  size?: SpacerSizes;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Spacer = React.forwardRef(function SpacerForwardedRef(props: SpacerProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { size = 's', className, testId } = props;\n  const spacerClasses = classNames(\n    spacerStyles.spacer,\n    {\n      [spacerStyles['spacer--4xs']]: size === '4xs',\n      [spacerStyles['spacer--3xs']]: size === '3xs',\n      [spacerStyles['spacer--2xs']]: size === '2xs',\n      [spacerStyles['spacer--xs']]: size === 'xs',\n      [spacerStyles['spacer--s']]: size === 's',\n      [spacerStyles['spacer--m']]: size === 'm',\n      [spacerStyles['spacer--l']]: size === 'l',\n      [spacerStyles['spacer--xl']]: size === 'xl',\n      [spacerStyles['spacer--2xl']]: size === '2xl',\n      [spacerStyles['spacer--3xl']]: size === '3xl',\n      [spacerStyles['spacer--4xl']]: size === '4xl',\n      [spacerStyles['spacer--5xl']]: size === '5xl',\n      [spacerStyles['spacer--6xl']]: size === '6xl',\n    },\n    className\n  );\n\n  return <span className={spacerClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Spacer}></span>;\n});\n\nexport default Spacer;\n"],"names":["Spacer","React","props","ref","size","className","testId","spacerClasses","classNames","spacerStyles","AnalyticsId","Spacer$1"],"mappings":";;;;AAkBA,MAAMA,IAASC,EAAM,WAAW,SAA4BC,GAAoBC,GAAsC;AACpH,QAAM,EAAE,MAAAC,IAAO,KAAK,WAAAC,GAAW,QAAAC,MAAWJ,GACpCK,IAAgBC;AAAA,IACpBC,EAAa;AAAA,IACb;AAAA,MACE,CAACA,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,YAAY,CAAC,GAAGL,MAAS;AAAA,MACvC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,YAAY,CAAC,GAAGL,MAAS;AAAA,MACvC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,IAC1C;AAAA,IACAC;AAAA,EAAA;AAGK,SAAAJ,gBAAAA,EAAA,cAAC,UAAK,WAAWM,GAAe,KAAAJ,GAAU,eAAaG,GAAQ,oBAAkBI,EAAY,OAAQ,CAAA;AAC9G,CAAC,GAEDC,IAAeX;"}
+{"version":3,"file":"Spacer.js","sources":["../../../src/components/Spacer/Spacer.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { SpacerSizes } from './../../theme/spacers';\nimport { AnalyticsId } from '../../constants';\n\nimport spacerStyles from './styles.module.scss';\n\nexport interface SpacerProps {\n  /** Sets the size of the spacer. */\n  size?: SpacerSizes;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Spacer = React.forwardRef(function SpacerForwardedRef(props: SpacerProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { size = 's', className, testId } = props;\n  const spacerClasses = classNames(\n    spacerStyles.spacer,\n    {\n      [spacerStyles['spacer--4xs']]: size === '4xs',\n      [spacerStyles['spacer--3xs']]: size === '3xs',\n      [spacerStyles['spacer--2xs']]: size === '2xs',\n      [spacerStyles['spacer--xs']]: size === 'xs',\n      [spacerStyles['spacer--s']]: size === 's',\n      [spacerStyles['spacer--m']]: size === 'm',\n      [spacerStyles['spacer--l']]: size === 'l',\n      [spacerStyles['spacer--xl']]: size === 'xl',\n      [spacerStyles['spacer--2xl']]: size === '2xl',\n      [spacerStyles['spacer--3xl']]: size === '3xl',\n      [spacerStyles['spacer--4xl']]: size === '4xl',\n      [spacerStyles['spacer--5xl']]: size === '5xl',\n      [spacerStyles['spacer--6xl']]: size === '6xl',\n    },\n    className\n  );\n\n  return <span className={spacerClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Spacer}></span>;\n});\n\nexport default Spacer;\n"],"names":["Spacer","React","props","ref","size","className","testId","spacerClasses","classNames","spacerStyles","AnalyticsId","Spacer$1"],"mappings":";;;;AAkBA,MAAMA,IAASC,EAAM,WAAW,SAA4BC,GAAoBC,GAAsC;AACpH,QAAM,EAAE,MAAAC,IAAO,KAAK,WAAAC,GAAW,QAAAC,MAAWJ,GACpCK,IAAgBC;AAAA,IACpBC,EAAa;AAAA,IACb;AAAA,MACE,CAACA,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,YAAY,CAAC,GAAGL,MAAS;AAAA,MACvC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,YAAY,CAAC,GAAGL,MAAS;AAAA,MACvC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,IAC1C;AAAA,IACAC;AAAA,EAAA;AAGK,SAAAJ,gBAAAA,EAAA,cAAC,UAAK,WAAWM,GAAe,KAAAJ,GAAU,eAAaG,GAAQ,oBAAkBI,EAAY,OAAQ,CAAA;AAC9G,CAAC,GAEDC,IAAeX;"}

package/components/Spacer/Spacer.stories.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Spacer").SpacerProps & React.RefAttributes<HTMLElement>>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=Spacer.stories.d.ts.map

package/components/StatusDot/StatusDot.stories.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { StatusDotVariant } from './StatusDot';
+declare const meta: {
+    title: string;
+    component: React.FC<import("./StatusDot").StatusDotProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        variant: StatusDotVariant.info;
+        text: string;
+    };
+    argTypes: {
+        variant: {
+            control: string;
+            options: typeof StatusDotVariant;
+        };
+        text: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=StatusDot.stories.d.ts.map

package/components/Step/Step.stories.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.FC<import("./Step").StepProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        children: string;
+        stickyButtons: false;
+    };
+    argTypes: {
+        stickyButtons: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const StickyButtons: Story;
+export declare const StickyButtonsNoSiblings: Story;
+export declare const NoNavigation: Story;
+export declare const WithStepButtons: Story;
+export declare const AdditionalButtons: Story;
+export declare const Locked: Story;
+//# sourceMappingURL=Step.stories.d.ts.map

package/components/StepButtons/StepButtons.stories.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.FC<import("./StepButtons").StepButtonsProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const AdditionalButtons: Story;
+//# sourceMappingURL=StepButtons.stories.d.ts.map

package/components/Stepper/Stepper.stories.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.FC<import("./Stepper").StepperProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        ariaLabel: string;
+    };
+    argTypes: {
+        ariaLabel: {
+            control: string;
+        };
+        ariaLabelledById: {
+            control: string;
+        };
+        value: {
+            control: string;
+        };
+        min: {
+            control: string;
+        };
+        max: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Dots: Story;
+export declare const Smooth: Story;
+//# sourceMappingURL=Stepper.stories.d.ts.map

package/components/Table/Table.stories.d.ts

@@ -0,0 +1,90 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { ResponsiveTableVariant, Table, HeaderCategory, ModeType } from './';
+type TableWithAndCustomArgs = React.ComponentProps<typeof Table> & {
+    breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    variant: ResponsiveTableVariant;
+    fallbackVariant: ResponsiveTableVariant;
+    headerCategory: HeaderCategory;
+};
+declare const meta: {
+    title: string;
+    component: React.FC<import("./Table").Props>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        breakpoint: "xl";
+        variant: ResponsiveTableVariant.none;
+        fallbackVariant: ResponsiveTableVariant.none;
+        headerCategory: HeaderCategory.normal;
+        mode: ModeType.normal;
+        scrollAriaLabel: string;
+    };
+    argTypes: {
+        breakpoint: {
+            control: string;
+            options: string[];
+        };
+        variant: {
+            control: string;
+            options: typeof ResponsiveTableVariant;
+        };
+        fallbackVariant: {
+            control: string;
+            options: typeof ResponsiveTableVariant;
+        };
+        headerCategory: {
+            control: string;
+            options: typeof HeaderCategory;
+        };
+        mode: {
+            control: string;
+            options: typeof ModeType;
+        };
+        scrollAriaLabel: {
+            control: string;
+        };
+        scrollAriaLabelledById: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<TableWithAndCustomArgs>;
+export declare const Default: Story;
+export declare const Compact: Story;
+export declare const DefaultResponsiveConfig: Story;
+export declare const SimpleResponsiveConfig: Story;
+export declare const SortableAndExpandable: Story;
+export declare const NestedExpandableBlockTables: Story;
+export declare const ExtraData: Story;
+export declare const Irregular: Story;
+export interface Legekontor {
+    Navn: string | JSX.Element;
+    Adresse: string;
+}
+export interface FastlegeAvtale {
+    AntallPlasser: number;
+    LedigePlasser: number;
+    Fastlege: Fastlege;
+    Legekontor: Legekontor;
+    Avtaledato: string;
+    Valgbar: boolean;
+    Fellesliste: boolean;
+    VentelisteTilgjengelig: boolean;
+    AntallPaVenteliste: number;
+}
+export interface Fastlege {
+    Stillingsprosent: string | null;
+    Autorisert: string | null;
+    Fornavn: string;
+    Etternavn: string;
+    Alder: string;
+    Kjonn: string;
+}
+//# sourceMappingURL=Table.stories.d.ts.map

package/components/Tag/Tag.d.ts

@@ -16,7 +16,7 @@ export declare enum TagVariant {
     emphasised = "emphasised"
 }
 export type TagColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;
-interface TagProps {
+export interface TagProps {
     /** Sets the text of the tag */
     children: string;
     /** Sets the size of the tag. Default: small */

package/components/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.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 '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\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 | IconName;\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 &&\n        (typeof svgIcon === 'string' ? (\n          <LazyIcon iconName={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />\n        ) : (\n          <Icon svgIcon={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />\n        ))}\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","Undo","React","AnalyticsId","Icon","IconSize","palette","Tag","svgIcon","LazyIcon","Tag$1"],"mappings":";;;;;;;;;;AAeY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,OAAO,QAFGA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,UAAU,WACVA,EAAA,aAAa,cAHHA,IAAAA,KAAA,CAAA,CAAA;AA6BZ,MAAMC,IAAsC,CAASC,MAAA;AAC7C,QAAA,EAAE,UAAAC,GAAU,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,QAAAC,GAAQ,SAAAC,GAAS,QAAAC,EAAW,IAAAP,GAE9D,EAAE,UAAAQ,GAAU,WAAAC,EAAU,IAAIC,EAA4B,GAEtDC,IAAaC;AAAAA,IACjBC,EAAO;AAAA,IACPA,EAAO,QAAQX,CAAI,EAAE;AAAA,IACrBW,EAAO,QAAQR,CAAM,EAAE;AAAA,IACvBQ,EAAO,iBAAiB;AAAA,IACxBR,MAAW,YAAY,CAACQ,EAAO,QAAQV,CAAK,EAAE,GAAGU,EAAO,QAAQT,CAAO,EAAE,CAAC;AAAA,EAAA,GAGtEU,IAAgB,MAAe;AACnC,YAAQT,GAAQ;AAAA,MACd,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAAU;AAAA,IACX;AAAA,EAAA;AAGF,SACGC,gBAAAA,EAAA,cAAA,UAAA,EAAO,WAAWL,GAAY,SAAAL,GAAkB,KAAKE,GAAU,MAAK,UAAS,eAAaD,GAAQ,oBAAkBU,EAAY,OAC9HhB,GACDe,gBAAAA,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,SAASJ,EAAc;AAAA,MACvB,MAAMK,EAAS;AAAA,MACf,OAAOC,EAAQ,GAAGf,MAAW,SAAS,cAAcF,CAAK,KAAK;AAAA,MAC9D,WAAAM;AAAA,IAAA;AAAA,EAAA,CAEJ;AAEJ,GAEMY,IAA0B,CAASrB,MAAA;AACvC,QAAM,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAgB,OAAAC,IAAQ,aAAa,SAAAmB,GAAS,SAAAlB,IAAU,UAAU,QAAAC,GAAQ,SAAAC,GAAS,QAAAC,EAAA,IAAWP,GAEjHW,IAAaC,EAAGC,EAAO,KAAKA,EAAO,QAAQX,CAAI,EAAE,GAAGW,EAAO,QAAQV,CAAK,EAAE,GAAGU,EAAO,QAAQT,CAAO,EAAE,GAAG;AAAA,IAC5G,CAACS,EAAO,eAAe,CAAC,GAAGS;AAAA,EAAA,CAC5B;AAED,SAAIjB,KAAUC,IAEVU,gBAAAA,EAAA,cAACjB,KAAU,MAAAG,GAAY,OAAAC,GAAc,SAAAC,GAAkB,QAAAC,GAAgB,SAAAC,GAAkB,QAAAC,KACtFN,CACH,IAKFe,gBAAAA,EAAA,cAAC,UAAK,WAAWL,GAAY,eAAaJ,GAAQ,oBAAkBU,EAAY,IAC7E,GAAAK,MACE,OAAOA,KAAY,2CACjBC,GAAS,EAAA,UAAUD,GAAS,MAAMH,EAAS,SAAS,OAAOC,EAAQ,GAAGjB,CAAK,KAAK,GAAG,WAAWU,EAAO,UAAA,CAAW,IAEhHG,gBAAAA,EAAA,cAAAE,GAAA,EAAK,SAAAI,GAAkB,MAAMH,EAAS,SAAS,OAAOC,EAAQ,GAAGjB,CAAK,KAAK,GAAG,WAAWU,EAAO,UAAW,CAAA,IAE/GZ,CACH;AAEJ,GAEAuB,IAAeH;"}
+{"version":3,"file":"Tag.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 '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\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\nexport interface 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 | IconName;\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 &&\n        (typeof svgIcon === 'string' ? (\n          <LazyIcon iconName={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />\n        ) : (\n          <Icon svgIcon={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />\n        ))}\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","Undo","React","AnalyticsId","Icon","IconSize","palette","Tag","svgIcon","LazyIcon","Tag$1"],"mappings":";;;;;;;;;;AAeY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,OAAO,QAFGA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,UAAU,WACVA,EAAA,aAAa,cAHHA,IAAAA,KAAA,CAAA,CAAA;AA6BZ,MAAMC,IAAsC,CAASC,MAAA;AAC7C,QAAA,EAAE,UAAAC,GAAU,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,QAAAC,GAAQ,SAAAC,GAAS,QAAAC,EAAW,IAAAP,GAE9D,EAAE,UAAAQ,GAAU,WAAAC,EAAU,IAAIC,EAA4B,GAEtDC,IAAaC;AAAAA,IACjBC,EAAO;AAAA,IACPA,EAAO,QAAQX,CAAI,EAAE;AAAA,IACrBW,EAAO,QAAQR,CAAM,EAAE;AAAA,IACvBQ,EAAO,iBAAiB;AAAA,IACxBR,MAAW,YAAY,CAACQ,EAAO,QAAQV,CAAK,EAAE,GAAGU,EAAO,QAAQT,CAAO,EAAE,CAAC;AAAA,EAAA,GAGtEU,IAAgB,MAAe;AACnC,YAAQT,GAAQ;AAAA,MACd,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAAU;AAAA,IACX;AAAA,EAAA;AAGF,SACGC,gBAAAA,EAAA,cAAA,UAAA,EAAO,WAAWL,GAAY,SAAAL,GAAkB,KAAKE,GAAU,MAAK,UAAS,eAAaD,GAAQ,oBAAkBU,EAAY,OAC9HhB,GACDe,gBAAAA,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,SAASJ,EAAc;AAAA,MACvB,MAAMK,EAAS;AAAA,MACf,OAAOC,EAAQ,GAAGf,MAAW,SAAS,cAAcF,CAAK,KAAK;AAAA,MAC9D,WAAAM;AAAA,IAAA;AAAA,EAAA,CAEJ;AAEJ,GAEMY,IAA0B,CAASrB,MAAA;AACvC,QAAM,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAgB,OAAAC,IAAQ,aAAa,SAAAmB,GAAS,SAAAlB,IAAU,UAAU,QAAAC,GAAQ,SAAAC,GAAS,QAAAC,EAAA,IAAWP,GAEjHW,IAAaC,EAAGC,EAAO,KAAKA,EAAO,QAAQX,CAAI,EAAE,GAAGW,EAAO,QAAQV,CAAK,EAAE,GAAGU,EAAO,QAAQT,CAAO,EAAE,GAAG;AAAA,IAC5G,CAACS,EAAO,eAAe,CAAC,GAAGS;AAAA,EAAA,CAC5B;AAED,SAAIjB,KAAUC,IAEVU,gBAAAA,EAAA,cAACjB,KAAU,MAAAG,GAAY,OAAAC,GAAc,SAAAC,GAAkB,QAAAC,GAAgB,SAAAC,GAAkB,QAAAC,KACtFN,CACH,IAKFe,gBAAAA,EAAA,cAAC,UAAK,WAAWL,GAAY,eAAaJ,GAAQ,oBAAkBU,EAAY,IAC7E,GAAAK,MACE,OAAOA,KAAY,2CACjBC,GAAS,EAAA,UAAUD,GAAS,MAAMH,EAAS,SAAS,OAAOC,EAAQ,GAAGjB,CAAK,KAAK,GAAG,WAAWU,EAAO,UAAA,CAAW,IAEhHG,gBAAAA,EAAA,cAAAE,GAAA,EAAK,SAAAI,GAAkB,MAAMH,EAAS,SAAS,OAAOC,EAAQ,GAAGjB,CAAK,KAAK,GAAG,WAAWU,EAAO,UAAW,CAAA,IAE/GZ,CACH;AAEJ,GAEAuB,IAAeH;"}