npm - @helsenorge/designsystem-react - Versions diffs - 14.0.0-beta.2 → 14.0.0-beta.3 - Mend

@helsenorge/designsystem-react 14.0.0-beta.2 → 14.0.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1090) hide show

package/lib/Slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.js","names":["Slider: React.FC<SliderProps>","handleKeyDown: React.KeyboardEventHandler<HTMLDivElement>","handleTrackClick: React.MouseEventHandler<HTMLDivElement>","handlePointerDown: React.PointerEventHandler<HTMLDivElement>"],"sources":["../src/components/Slider/Slider.tsx","../src/components/Slider/index.ts"],"sourcesContent":["import { useEffect, useState, useRef, useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport ErrorWrapper from '../ErrorWrapper';\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 extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' \| 'name' \| 'onChange' \| 'onBlur'> {\n /** Activates Error style for the input /\n error?: boolean;\n /* Error text to show above the component /\n errorText?: string;\n /* Error text id /\n errorTextId?: string;\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 /* 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 /* Ref passed to component /\n ref?: React.Ref<HTMLInputElement \| null>;\n}\n\nexport const Slider: React.FC<SliderProps> = props => {\n const {\n title,\n ariaLabel,\n error,\n errorText,\n errorTextId: errorTextIdProp,\n errorWrapperClassName,\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 ref,\n ...rest\n } = props;\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 errorTextId = useIdWithFallback(errorTextIdProp);\n const baseId = useId();\n const titleId = 'title-' + baseId;\n const labelLeftId = 'label-' + baseId;\n const labelRightId = 'label-right-' + baseId;\n const trackRef = useRef<HTMLDivElement>(null);\n const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n const mergedRefs = mergeRefs([ref, refObject]);\n\n const { width: trackWidth } = useSize(trackRef) \|\| { width: 0 };\n const largeStep = maxValue / 10;\n const invalid = !!errorText \|\| !!error;\n\n useEffect(() => {\n const handlePointerUp = (): void => {\n setIsMoving(false);\n };\n\n document.addEventListener('pointerup', handlePointerUp);\n\n return (): void => {\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 (): void => {\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 (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 refObject.current?.focus();\n };\n\n const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n if (disabled) return;\n\n handleTrackClick(e);\n setIsMoving(true);\n handleSelected();\n\n e.preventDefault();\n e.stopPropagation();\n\n refObject.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 useEffect(() => {\n if (selectedState && onChange) {\n onChange({\n target: {\n name: props.name,\n value: valueState,\n },\n } as unknown as React.ChangeEvent<HTMLInputElement>);\n }\n }, [valueState, selectedState]);\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 <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n <input\n aria-valuetext={getAriaValueText()}\n className={styles['sr-only-slider']}\n disabled={disabled}\n min={minValue}\n max={maxValue}\n onChange={onChange}\n onKeyDown={handleKeyDown}\n value={valueState}\n ref={mergedRefs}\n type=\"range\"\n {...rest}\n {...ariaLabelAttributes}\n />\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 {/* Slider streken er klikkbar med mus/touch /}\n <div\n ref={trackRef}\n className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n onPointerDown={handlePointerDown}\n >\n <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n <div\n className={classNames(styles.slider__marker, {\n [styles['slider__marker--disabled']]: disabled,\n [styles['slider__marker--selected']]: selectedState,\n [styles['slider__marker--invalid']]: invalid,\n [styles['slider__marker--focused']]: !disabled && isFocused,\n })}\n style={{\n left: `${markerXPos}px`,\n }}\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 </ErrorWrapper>\n );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n","import Slider from './Slider';\nexport from './Slider';\nexport default Slider;\n"],"mappings":";;;;;;;;;;;;AAiBA,IAAM,sBAAsB,SAAiB,KAAa,QAAmD;CAC3G,MAAM,CAAC,OAAO,YAAY,SAAS,QAAQ;CAE3C,MAAM,gBAAgB,aAA2B;AAC/C,MAAI,WAAW,IACb,UAAS,IAAI;WACJ,WAAW,IACpB,UAAS,IAAI;MAEb,UAAS,SAAS;;AAItB,iBAAgB;AACd,eAAa,QAAQ;IACpB,CAAC,KAAK,IAAI,CAAC;AAEd,QAAO,CAAC,OAAO,aAAa;;AA4C9B,MAAaA,UAAgC,UAAS;CACpD,MAAM,EACJ,OACA,WACA,OACA,WACA,aAAa,iBACb,uBACA,WACA,YACA,WAAW,OACX,UACA,OACA,OAAO,GACP,WAAW,GACX,WAAW,QAAQ,MAAM,SAAS,IAAI,KACtC,WAAW,MACX,QACA,OACA,KACA,GAAG,SACD;CAEJ,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,CAAC,eAAe,oBAAoB,SAAS,OAAO,UAAU,cAAc,WAAW,KAAK;CAClG,MAAM,CAAC,YAAY,iBAAiB,mBAClC,OAAO,UAAU,eAAe,WAAW,YAAY,IAAI,WAAW,OACtE,UACA,SACD;CAED,MAAM,cAAc,kBAAkB,gBAAgB;CACtD,MAAM,SAAS,OAAO;CACtB,MAAM,UAAU,WAAW;CAC3B,MAAM,cAAc,WAAW;CAC/B,MAAM,eAAe,iBAAiB;CACtC,MAAM,WAAW,OAAuB,KAAK;CAC7C,MAAM,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,IAAI,GAAG,MAAM,KAAK;CACzG,MAAM,aAAa,UAAU,CAAC,KAAK,UAAU,CAAC;CAE9C,MAAM,EAAE,OAAO,eAAe,QAAQ,SAAS,IAAI,EAAE,OAAO,GAAG;CAC/D,MAAM,YAAY,WAAW;CAC7B,MAAM,UAAU,CAAC,CAAC,aAAa,CAAC,CAAC;AAEjC,iBAAgB;EACd,MAAM,wBAA8B;AAClC,eAAY,MAAM;;AAGpB,WAAS,iBAAiB,aAAa,gBAAgB;AAEvD,eAAmB;AACjB,YAAS,oBAAoB,aAAa,gBAAgB;;IAE3D,EAAE,CAAC;CAEN,MAAM,iCAAiC,mBAAmC;EAOxE,IAAI,WAHwB,kBAHN,SAAS,SAAS,uBAAuB,CAAC,KAAK,MAGP,cAC3C,WAAW,YAEgB;AAG9C,YADkB,KAAK,MAAM,UAAQ,KAAK,GACtB;AACpB,YAAQ,KAAK,IAAI,UAAU,KAAK,IAAI,UAAU,QAAM,CAAC;AAErD,SAAO;;AAGT,iBAAgB;EACd,MAAM,qBAAqB,MAA0B;AACnD,OAAI,CAAC,YAAY,SAEf,eADiB,8BAA8B,EAAE,QAAQ,CAClC;;AAI3B,WAAS,iBAAiB,eAAe,kBAAkB;AAE3D,eAAmB;AACjB,YAAS,oBAAoB,eAAe,kBAAkB;;IAE/D,CAAC,SAAS,CAAC;AAEd,iBAAgB;AACd,MAAI,UAAU,cAAc,OAAO,UAAU,aAAa;AACxD,mBAAgB;AAChB,iBAAc,MAAM;;IAErB,CAAC,MAAM,CAAC;AAEX,iBAAgB;AACd,MAAI,OAAO,UAAU,eAAe,aAAa,cAC/C,kBAAiB,SAAS;IAE3B,CAAC,SAAS,CAAC;CAEd,MAAM,uBAA6B;AACjC,MAAI,kBAAkB,MACpB,kBAAiB,KAAK;;CAI1B,MAAMC,iBAA4D,MAAK;AACrE,MAAI,SAAU;EAEd,IAAI,OAAO;AAEX,UAAQ,EAAE,KAAV;GACE,KAAK;GACL,KAAK;AACH,kBAAc,aAAa,KAAK;AAChC,WAAO;AACP;GACF,KAAK;AACH,kBAAc,aAAa,UAAU;AACrC,WAAO;AACP;GACF,KAAK;GACL,KAAK;AACH,kBAAc,aAAa,KAAK;AAChC,WAAO;AACP;GACF,KAAK;AACH,kBAAc,aAAa,UAAU;AACrC,WAAO;AACP;GACF,KAAK;AACH,kBAAc,SAAS;AACvB,WAAO;AACP;GACF,KAAK;AACH,kBAAc,SAAS;AACvB,WAAO;AACP;GACF,QACE;;AAGJ,MAAI,MAAM;AACR,mBAAgB;AAChB,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;;;CAIvB,MAAMC,oBAA4D,MAAK;AACrE,MAAI,SAAU;AAGd,gBADiB,8BAA8B,EAAE,QAAQ,CAClC;AACvB,YAAU,SAAS,OAAO;;CAG5B,MAAMC,qBAA+D,MAAK;AACxE,MAAI,SAAU;AAEd,mBAAiB,EAAE;AACnB,cAAY,KAAK;AACjB,kBAAgB;AAEhB,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AAEnB,YAAU,SAAS,OAAO;;CAG5B,MAAM,aAAa,aAAa,WAAY,cAAc,WAAW,aAAc,aAAa,YAAY;CAE5G,MAAM,yBAA6C;EACjD,MAAM,YAAY,QAAQ,KAAK,OAAO,aAAa,YAAY,KAAK,GAAG;AAEvE,MAAI,SAAS,cAAc,QAAQ,aAAa,KAAK,YAAY,MAAM,QAAQ;GAC7E,MAAM,SAAO,MAAM;GACnB,MAAM,YAAY,OAAK;GACvB,MAAM,QAAQ,OAAO,OAAK,UAAU,cAAc,OAAK,MAAM,UAAU,GAAG,KAAA;AAE1E,UAAO,aAAa,QAAQ,GAAG,UAAU,GAAG,UAAU,aAAa;;;CAMvE,MAAM,2BAA+C;AACnD,MAAI,SAAS,aAAa,WACxB,QAAO;GAAC;GAAS;GAAa;GAAa,CAAC,KAAK,IAAI;AAEvD,MAAI,SAAS,UACX,QAAO,CAAC,SAAS,YAAY,CAAC,KAAK,IAAI;AAEzC,MAAI,SAAS,WACX,QAAO,CAAC,SAAS,aAAa,CAAC,KAAK,IAAI;AAE1C,MAAI,MACF,QAAO;;CAIX,MAAM,sBAAsB,uBAAuB;EACjD,OAAO;EACP,IAAI,oBAAoB;EACxB,QAAQ;EACT,CAAC;CAEF,MAAM,uBAAuB,OAAe,gBAA0C;AACpF,SAAO,EAAE,MAAM,GAAI,SAAS,cAAc,KAAM,IAAI,IAAI;;AAG1D,iBAAgB;AACd,MAAI,iBAAiB,SACnB,UAAS,EACP,QAAQ;GACN,MAAM,MAAM;GACZ,OAAO;GACR,EACF,CAAmD;IAErD,CAAC,YAAY,cAAc,CAAC;CAE/B,MAAM,sBAAuC;AAC3C,SACE,oBAAC,OAAA;GAAI,WAAW,OAAO;aACpB,OAAO,KAAK,QAAM,UAAU;AAC3B,WACE,OAAK,gBACH,oBAAC,OAAA;KACC,eAAa;KAEb,WAAW,OAAO;KAClB,OAAO,oBAAoB,OAAO,MAAM,OAAO;eAE9C,OAAK;OAJD,UAAU,MAKX;KAGV;IACE;;CAIV,MAAM,oBAAqC;AACzC,SAAO,OAAO,KAAK,OAAO,UAAU;AAClC,UAAO,oBAAC,OAAA;IAAyB,WAAW,OAAO;IAAwB,OAAO,oBAAoB,OAAO,MAAM,OAAO;MAAzG,SAAS,MAAoG;IAC9H;;CAGJ,MAAM,yBAA0C;AAC9C,SACE,oBAAC,OAAA;GAAI,WAAW,OAAO;aACpB,OAAO,KAAK,QAAM,UAAU;AAC3B,WACE,OAAO,OAAK,UAAU,eACpB,oBAAC,OAAA;KACC,eAAa;KAEb,WAAW,OAAO;KAClB,OAAO,oBAAoB,OAAO,MAAM,OAAO;eAE9C,OAAK;OAJD,UAAU,MAKX;KAGV;IACE;;AAIV,QACE,qBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;aACjF,oBAAC,SAAA;GACC,kBAAgB,kBAAkB;GAClC,WAAW,OAAO;GACR;GACV,KAAK;GACL,KAAK;GACK;GACV,WAAW;GACX,OAAO;GACP,KAAK;GACL,MAAK;GACL,GAAI;GACJ,GAAI;IACJ,EACF,qBAAC,OAAA;GAAI,WAAW,OAAO;GAAQ,eAAa;GAAQ,oBAAkB,YAAY;;IAC/E,SACC,oBAAC,eAAA;KAAM,WAAW,OAAO;KAAkB,YAAY;KAAM,QAAQ;KAAG,YAAY;KAAU,IAAI;eAC/F;MACK;IAEV,qBAAC,OAAA;KAAI,WAAW,OAAO;;MACpB,eAAe;MAEhB,qBAAC,OAAA;OACC,KAAK;OACL,WAAW,GAAW,OAAO,0BAA0B,YAAY,OAAO,mCAAmC;OAC7G,eAAe;kBAEf,oBAAC,OAAA;QAAI,WAAW,GAAW,OAAO,eAAe,YAAY,OAAO,2BAA2B;kBAAG,aAAa;SAAO,EACtH,oBAAC,OAAA;QACC,WAAW,GAAW,OAAO,gBAAgB;UAC1C,OAAO,8BAA8B;UACrC,OAAO,8BAA8B;UACrC,OAAO,6BAA6B;UACpC,OAAO,6BAA6B,CAAC,YAAY;SACnD,CAAC;QACF,OAAO,EACL,MAAM,GAAG,WAAW,KACrB;SACD,CAAA;QACE;MACL,kBAAkB;;MACf;KACJ,aAAa,eACb,qBAAC,QAAA;KAAK,WAAW,OAAO;gBACtB,oBAAC,QAAA;MAAK,IAAI;gBAAc;OAAiB,EACzC,oBAAC,QAAA;MAAK,IAAI;gBAAe;OAAkB,CAAA;MACtC;;IAEL,CAAA;GACO;;AAInB,OAAO,cAAc;AClZrB,IAAA,mBDoZe"}
1	+ {"version":3,"file":"Slider.js","names":["Slider: React.FC<SliderProps>","handleKeyDown: React.KeyboardEventHandler<HTMLDivElement>","handleTrackClick: React.MouseEventHandler<HTMLDivElement>","handlePointerDown: React.PointerEventHandler<HTMLDivElement>"],"sources":["../src/components/Slider/Slider.tsx","../src/components/Slider/index.ts"],"sourcesContent":["import { useEffect, useState, useRef, useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport ErrorWrapper from '../ErrorWrapper';\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 extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' \| 'name' \| 'onChange' \| 'onBlur'> {\n /** Activates Error style for the input /\n error?: boolean;\n /* Error text to show above the component /\n errorText?: string;\n /* Error text id /\n errorTextId?: string;\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 /* 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 /* Ref passed to component /\n ref?: React.Ref<HTMLInputElement \| null>;\n}\n\nexport const Slider: React.FC<SliderProps> = props => {\n const {\n title,\n ariaLabel,\n error,\n errorText,\n errorTextId: errorTextIdProp,\n errorWrapperClassName,\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 ref,\n ...rest\n } = props;\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 errorTextId = useIdWithFallback(errorTextIdProp);\n const baseId = useId();\n const titleId = 'title-' + baseId;\n const labelLeftId = 'label-' + baseId;\n const labelRightId = 'label-right-' + baseId;\n const trackRef = useRef<HTMLDivElement>(null);\n const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n const mergedRefs = mergeRefs([ref, refObject]);\n\n const { width: trackWidth } = useSize(trackRef) \|\| { width: 0 };\n const largeStep = maxValue / 10;\n const invalid = !!errorText \|\| !!error;\n\n useEffect(() => {\n const handlePointerUp = (): void => {\n setIsMoving(false);\n };\n\n document.addEventListener('pointerup', handlePointerUp);\n\n return (): void => {\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 (): void => {\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 (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 refObject.current?.focus();\n };\n\n const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n if (disabled) return;\n\n handleTrackClick(e);\n setIsMoving(true);\n handleSelected();\n\n e.preventDefault();\n e.stopPropagation();\n\n refObject.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 useEffect(() => {\n if (selectedState && onChange) {\n onChange({\n target: {\n name: props.name,\n value: valueState,\n },\n } as unknown as React.ChangeEvent<HTMLInputElement>);\n }\n }, [valueState, selectedState]);\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 <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n <input\n aria-valuetext={getAriaValueText()}\n className={styles['sr-only-slider']}\n disabled={disabled}\n min={minValue}\n max={maxValue}\n onChange={onChange}\n onKeyDown={handleKeyDown}\n value={valueState}\n ref={mergedRefs}\n type=\"range\"\n {...rest}\n {...ariaLabelAttributes}\n />\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 {/* Slider streken er klikkbar med mus/touch /}\n <div\n ref={trackRef}\n className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n onPointerDown={handlePointerDown}\n >\n <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n <div\n className={classNames(styles.slider__marker, {\n [styles['slider__marker--disabled']]: disabled,\n [styles['slider__marker--selected']]: selectedState,\n [styles['slider__marker--invalid']]: invalid,\n [styles['slider__marker--focused']]: !disabled && isFocused,\n })}\n style={{\n left: `${markerXPos}px`,\n }}\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 </ErrorWrapper>\n );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n","import Slider from './Slider';\nexport from './Slider';\nexport default Slider;\n"],"mappings":";;;;;;;;;;;;AAiBA,IAAM,sBAAsB,SAAiB,KAAa,QAAmD;CAC3G,MAAM,CAAC,OAAO,YAAY,SAAS,QAAQ;CAE3C,MAAM,gBAAgB,aAA2B;AAC/C,MAAI,WAAW,IACb,UAAS,IAAI;WACJ,WAAW,IACpB,UAAS,IAAI;MAEb,UAAS,SAAS;;AAItB,iBAAgB;AACd,eAAa,QAAQ;IACpB,CAAC,KAAK,IAAI,CAAC;AAEd,QAAO,CAAC,OAAO,aAAa;;AA4C9B,MAAaA,UAAgC,UAAS;CACpD,MAAM,EACJ,OACA,WACA,OACA,WACA,aAAa,iBACb,uBACA,WACA,YACA,WAAW,OACX,UACA,OACA,OAAO,GACP,WAAW,GACX,WAAW,QAAQ,MAAM,SAAS,IAAI,KACtC,WAAW,MACX,QACA,OACA,KACA,GAAG,SACD;CAEJ,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,CAAC,eAAe,oBAAoB,SAAS,OAAO,UAAU,cAAc,WAAW,KAAK;CAClG,MAAM,CAAC,YAAY,iBAAiB,mBAClC,OAAO,UAAU,eAAe,WAAW,YAAY,IAAI,WAAW,OACtE,UACA,SACD;CAED,MAAM,cAAc,kBAAkB,gBAAgB;CACtD,MAAM,SAAS,OAAO;CACtB,MAAM,UAAU,WAAW;CAC3B,MAAM,cAAc,WAAW;CAC/B,MAAM,eAAe,iBAAiB;CACtC,MAAM,WAAW,OAAuB,KAAK;CAC7C,MAAM,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,IAAI,GAAG,MAAM,KAAK;CACzG,MAAM,aAAa,UAAU,CAAC,KAAK,UAAU,CAAC;CAE9C,MAAM,EAAE,OAAO,eAAe,QAAQ,SAAS,IAAI,EAAE,OAAO,GAAG;CAC/D,MAAM,YAAY,WAAW;CAC7B,MAAM,UAAU,CAAC,CAAC,aAAa,CAAC,CAAC;AAEjC,iBAAgB;EACd,MAAM,wBAA8B;AAClC,eAAY,MAAM;;AAGpB,WAAS,iBAAiB,aAAa,gBAAgB;AAEvD,eAAmB;AACjB,YAAS,oBAAoB,aAAa,gBAAgB;;IAE3D,EAAE,CAAC;CAEN,MAAM,iCAAiC,mBAAmC;EAOxE,IAAI,WAHwB,kBAHN,SAAS,SAAS,uBAAuB,CAAC,KAAK,MAGP,cAC3C,WAAW,YAEgB;AAG9C,YADkB,KAAK,MAAM,UAAQ,KAAK,GACtB;AACpB,YAAQ,KAAK,IAAI,UAAU,KAAK,IAAI,UAAU,QAAM,CAAC;AAErD,SAAO;;AAGT,iBAAgB;EACd,MAAM,qBAAqB,MAA0B;AACnD,OAAI,CAAC,YAAY,SAEf,eADiB,8BAA8B,EAAE,QAAQ,CAClC;;AAI3B,WAAS,iBAAiB,eAAe,kBAAkB;AAE3D,eAAmB;AACjB,YAAS,oBAAoB,eAAe,kBAAkB;;IAE/D,CAAC,SAAS,CAAC;AAEd,iBAAgB;AACd,MAAI,UAAU,cAAc,OAAO,UAAU,aAAa;AACxD,mBAAgB;AAChB,iBAAc,MAAM;;IAErB,CAAC,MAAM,CAAC;AAEX,iBAAgB;AACd,MAAI,OAAO,UAAU,eAAe,aAAa,cAC/C,kBAAiB,SAAS;IAE3B,CAAC,SAAS,CAAC;CAEd,MAAM,uBAA6B;AACjC,MAAI,kBAAkB,MACpB,kBAAiB,KAAK;;CAI1B,MAAMC,iBAA4D,MAAK;AACrE,MAAI,SAAU;EAEd,IAAI,OAAO;AAEX,UAAQ,EAAE,KAAV;GACE,KAAK;GACL,KAAK;AACH,kBAAc,aAAa,KAAK;AAChC,WAAO;AACP;GACF,KAAK;AACH,kBAAc,aAAa,UAAU;AACrC,WAAO;AACP;GACF,KAAK;GACL,KAAK;AACH,kBAAc,aAAa,KAAK;AAChC,WAAO;AACP;GACF,KAAK;AACH,kBAAc,aAAa,UAAU;AACrC,WAAO;AACP;GACF,KAAK;AACH,kBAAc,SAAS;AACvB,WAAO;AACP;GACF,KAAK;AACH,kBAAc,SAAS;AACvB,WAAO;AACP;GACF,QACE;;AAGJ,MAAI,MAAM;AACR,mBAAgB;AAChB,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;;;CAIvB,MAAMC,oBAA4D,MAAK;AACrE,MAAI,SAAU;AAGd,gBADiB,8BAA8B,EAAE,QAAQ,CAClC;AACvB,YAAU,SAAS,OAAO;;CAG5B,MAAMC,qBAA+D,MAAK;AACxE,MAAI,SAAU;AAEd,mBAAiB,EAAE;AACnB,cAAY,KAAK;AACjB,kBAAgB;AAEhB,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AAEnB,YAAU,SAAS,OAAO;;CAG5B,MAAM,aAAa,aAAa,WAAY,cAAc,WAAW,aAAc,aAAa,YAAY;CAE5G,MAAM,yBAA6C;EACjD,MAAM,YAAY,QAAQ,KAAK,OAAO,aAAa,YAAY,KAAK,GAAG;AAEvE,MAAI,SAAS,cAAc,QAAQ,aAAa,KAAK,YAAY,MAAM,QAAQ;GAC7E,MAAM,SAAO,MAAM;GACnB,MAAM,YAAY,OAAK;GACvB,MAAM,QAAQ,OAAO,OAAK,UAAU,cAAc,OAAK,MAAM,UAAU,GAAG,KAAA;AAE1E,UAAO,aAAa,QAAQ,GAAG,UAAU,GAAG,UAAU,aAAa;;;CAMvE,MAAM,2BAA+C;AACnD,MAAI,SAAS,aAAa,WACxB,QAAO;GAAC;GAAS;GAAa;GAAa,CAAC,KAAK,IAAI;AAEvD,MAAI,SAAS,UACX,QAAO,CAAC,SAAS,YAAY,CAAC,KAAK,IAAI;AAEzC,MAAI,SAAS,WACX,QAAO,CAAC,SAAS,aAAa,CAAC,KAAK,IAAI;AAE1C,MAAI,MACF,QAAO;;CAIX,MAAM,sBAAsB,uBAAuB;EACjD,OAAO;EACP,IAAI,oBAAoB;EACxB,QAAQ;EACT,CAAC;CAEF,MAAM,uBAAuB,OAAe,gBAA0C;AACpF,SAAO,EAAE,MAAM,GAAI,SAAS,cAAc,KAAM,IAAI,IAAI;;AAG1D,iBAAgB;AACd,MAAI,iBAAiB,SACnB,UAAS,EACP,QAAQ;GACN,MAAM,MAAM;GACZ,OAAO;GACR,EACF,CAAmD;IAErD,CAAC,YAAY,cAAc,CAAC;CAE/B,MAAM,sBAAuC;AAC3C,SACE,oBAAC,OAAA;GAAI,WAAW,OAAO;aACpB,OAAO,KAAK,QAAM,UAAU;AAC3B,WACE,OAAK,gBACH,oBAAC,OAAA;KACC,eAAa;KAEb,WAAW,OAAO;KAClB,OAAO,oBAAoB,OAAO,MAAM,OAAO;eAE9C,OAAK;OAJD,UAAU,MAKX;KAGV;IACE;;CAIV,MAAM,oBAAqC;AACzC,SAAO,OAAO,KAAK,OAAO,UAAU;AAClC,UAAO,oBAAC,OAAA;IAAyB,WAAW,OAAO;IAAwB,OAAO,oBAAoB,OAAO,MAAM,OAAO;MAAzG,SAAS,MAAoG;IAC9H;;CAGJ,MAAM,yBAA0C;AAC9C,SACE,oBAAC,OAAA;GAAI,WAAW,OAAO;aACpB,OAAO,KAAK,QAAM,UAAU;AAC3B,WACE,OAAO,OAAK,UAAU,eACpB,oBAAC,OAAA;KACC,eAAa;KAEb,WAAW,OAAO;KAClB,OAAO,oBAAoB,OAAO,MAAM,OAAO;eAE9C,OAAK;OAJD,UAAU,MAKX;KAGV;IACE;;AAIV,QACE,qBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;aACjF,oBAAC,SAAA;GACC,kBAAgB,kBAAkB;GAClC,WAAW,OAAO;GACR;GACV,KAAK;GACL,KAAK;GACK;GACV,WAAW;GACX,OAAO;GACP,KAAK;GACL,MAAK;GACL,GAAI;GACJ,GAAI;IACJ,EACF,qBAAC,OAAA;GAAI,WAAW,OAAO;GAAQ,eAAa;GAAQ,oBAAkB,YAAY;;IAC/E,SACC,oBAAC,eAAA;KAAM,WAAW,OAAO;KAAkB,YAAY;KAAM,QAAQ;KAAG,YAAY;KAAU,IAAI;eAC/F;MACK;IAEV,qBAAC,OAAA;KAAI,WAAW,OAAO;;MACpB,eAAe;MAEhB,qBAAC,OAAA;OACC,KAAK;OACL,WAAW,WAAW,OAAO,0BAA0B,YAAY,OAAO,mCAAmC;OAC7G,eAAe;kBAEf,oBAAC,OAAA;QAAI,WAAW,WAAW,OAAO,eAAe,YAAY,OAAO,2BAA2B;kBAAG,aAAa;SAAO,EACtH,oBAAC,OAAA;QACC,WAAW,WAAW,OAAO,gBAAgB;UAC1C,OAAO,8BAA8B;UACrC,OAAO,8BAA8B;UACrC,OAAO,6BAA6B;UACpC,OAAO,6BAA6B,CAAC,YAAY;SACnD,CAAC;QACF,OAAO,EACL,MAAM,GAAG,WAAW,KACrB;SACD,CAAA;QACE;MACL,kBAAkB;;MACf;KACJ,aAAa,eACb,qBAAC,QAAA;KAAK,WAAW,OAAO;gBACtB,oBAAC,QAAA;MAAK,IAAI;gBAAc;OAAiB,EACzC,oBAAC,QAAA;MAAK,IAAI;gBAAe;OAAkB,CAAA;MACtC;;IAEL,CAAA;GACO;;AAInB,OAAO,cAAc;AClZrB,IAAA,mBDoZe"}

package/lib/Spacer.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { n as AnalyticsId } from "./constants2.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import spacerStyles from "./components/Spacer/styles.module.scss";
 var Spacer = (props) => {
 	const { size = "s", className, testId, ref } = props;
 	return /* @__PURE__ */ jsx("span", {
-		className: cn(spacerStyles.spacer, {
+		className: classNames(spacerStyles.spacer, {
 			[spacerStyles["spacer--4xs"]]: size === "4xs",
 			[spacerStyles["spacer--3xs"]]: size === "3xs",
 			[spacerStyles["spacer--2xs"]]: size === "2xs",

package/lib/Spacer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Spacer.js","names":["Spacer: React.FC<SpacerProps>"],"sources":["../src/components/Spacer/Spacer.tsx","../src/components/Spacer/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { SpacerSizes } from './../../theme/spacers';\n\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 /* Ref passed to the component /\n ref?: React.Ref<HTMLElement \| null>;\n}\n\nconst Spacer: React.FC<SpacerProps> = (props: SpacerProps) => {\n const { size = 's', className, testId, ref } = 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","import Spacer from './Spacer';\nexport from './Spacer';\nexport default Spacer;\n"],"mappings":";;;;AAmBA,IAAMA,UAAiC,UAAuB;CAC5D,MAAM,EAAE,OAAO,KAAK,WAAW,QAAQ,QAAQ;AAqB/C,QAAO,oBAAC,QAAA;EAAK,WApBS,~~GACpB~~,aAAa,QACb;IACG,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,gBAAgB,SAAS;IACtC,aAAa,eAAe,SAAS;IACrC,aAAa,eAAe,SAAS;IACrC,aAAa,eAAe,SAAS;IACrC,aAAa,gBAAgB,SAAS;IACtC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;GACzC,EACD,UACD;EAE2C;EAAK,eAAa;EAAQ,oBAAkB,YAAY;GAAe;;ACvCrH,IAAA,mBD0Ce"}
1	+ {"version":3,"file":"Spacer.js","names":["Spacer: React.FC<SpacerProps>"],"sources":["../src/components/Spacer/Spacer.tsx","../src/components/Spacer/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { SpacerSizes } from './../../theme/spacers';\n\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 /* Ref passed to the component /\n ref?: React.Ref<HTMLElement \| null>;\n}\n\nconst Spacer: React.FC<SpacerProps> = (props: SpacerProps) => {\n const { size = 's', className, testId, ref } = 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","import Spacer from './Spacer';\nexport from './Spacer';\nexport default Spacer;\n"],"mappings":";;;;AAmBA,IAAMA,UAAiC,UAAuB;CAC5D,MAAM,EAAE,OAAO,KAAK,WAAW,QAAQ,QAAQ;AAqB/C,QAAO,oBAAC,QAAA;EAAK,WApBS,WACpB,aAAa,QACb;IACG,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,gBAAgB,SAAS;IACtC,aAAa,eAAe,SAAS;IACrC,aAAa,eAAe,SAAS;IACrC,aAAa,eAAe,SAAS;IACrC,aAAa,gBAAgB,SAAS;IACtC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;IACvC,aAAa,iBAAiB,SAAS;GACzC,EACD,UACD;EAE2C;EAAK,eAAa;EAAQ,oBAAkB,YAAY;GAAe;;ACvCrH,IAAA,mBD0Ce"}

package/lib/StatusDot.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { a as IconSize, n as AnalyticsId, r as FormOnColor } from "./constants2.js";
 import { t as getColor } from "./color.js";
 import { n as LazyIcon } from "./LazyIcon.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/StatusDot/styles.module.scss";
 let StatusDotOnColor = /* @__PURE__ */ function(StatusDotOnColor$1) {
@@ -36,7 +36,7 @@ var StatusDotIcon = ({ onColor, variant = "info" }) => {
 		color: onColor === StatusDotOnColor.ondark ? getColor("white") : getColor("black"),
 		size: IconSize.XXSmall,
 		onColor,
-		className: cn({
+		className: classNames({
 			[styles[`statusdot__dot--${variant}`]]: typeof variant !== "undefined",
 			[styles["statusdot__dot--on-dark"]]: onColor === StatusDotOnColor.ondark
 		})
@@ -123,8 +123,8 @@ var StatusDotIcon = ({ onColor, variant = "info" }) => {
 };
 var StatusDot = (props) => {
 	const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId, ref } = props;
-	const statusDotClasses = cn(styles["statusdot"], className);
-	const labelClasses = cn(styles["statusdot__label"], { [styles["statusdot__label--on-dark"]]: onColor === StatusDotOnColor.ondark });
+	const statusDotClasses = classNames(styles["statusdot"], className);
+	const labelClasses = classNames(styles["statusdot__label"], { [styles["statusdot__label--on-dark"]]: onColor === StatusDotOnColor.ondark });
 	return /* @__PURE__ */ jsxs("span", {
 		id,
 		ref,

package/lib/StatusDot.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StatusDot.js","names":["StatusDotIcon: React.FC<StatusDotIconProps>","StatusDot: React.FC<StatusDotProps>"],"sources":["../src/components/StatusDot/constants.ts","../src/components/StatusDot/StatusDot.tsx","../src/components/StatusDot/index.ts"],"sourcesContent":["import { FormOnColor } from '../../constants';\n\nexport enum StatusDotOnColor {\n onwhite = FormOnColor.onwhite,\n ondark = FormOnColor.ondark,\n}\n\nexport enum StatusDotVariant {\n success = 'success',\n inprocess = 'inprocess',\n exception = 'exception',\n unknown = 'unknown',\n inspected = 'inspected',\n cancelled = 'cancelled',\n alert = 'alert',\n transparent = 'transparent',\n info = 'info',\n group = 'group',\n recurring = 'recurring',\n noaccess = 'noaccess',\n draft = 'draft',\n hidden = 'hidden',\n login = 'login',\n attachment = 'attachment',\n active = 'active',\n pending = 'pending',\n inactive = 'inactive',\n}\n","import classNames from 'classnames';\n\nimport { StatusDotOnColor, StatusDotVariant } from './constants';\nimport { IconSize } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { LazyIcon } from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface StatusDotIconProps {\n /** Defines the color of the icon /\n onColor?: keyof typeof StatusDotOnColor;\n /* The variant defines style formatting and what icon to use /\n variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ onColor, variant = 'info' }) => {\n const color = onColor === StatusDotOnColor.ondark ? getColor('white') : getColor('black');\n const iconProps = {\n color,\n size: IconSize.XXSmall,\n onColor,\n className: classNames({\n [styles[`statusdot__dot--${variant}`]]: typeof variant !== 'undefined',\n [styles['statusdot__dot--on-dark']]: onColor === StatusDotOnColor.ondark,\n }),\n };\n\n switch (variant) {\n case StatusDotVariant.success:\n return <LazyIcon {...iconProps} iconName={'DotSuccess'} />;\n case StatusDotVariant.inprocess:\n return <LazyIcon {...iconProps} iconName={'DotHalfDisc'} />;\n case StatusDotVariant.exception:\n return <LazyIcon {...iconProps} iconName={'DotWarningTriangle'} />;\n case StatusDotVariant.unknown:\n return <LazyIcon {...iconProps} iconName={'DotQuestionMark'} />;\n case StatusDotVariant.inspected:\n return <LazyIcon {...iconProps} iconName={'DotLookingGlass'} />;\n case StatusDotVariant.cancelled:\n return <LazyIcon {...iconProps} iconName={'DotCancelled'} />;\n case StatusDotVariant.alert:\n return <LazyIcon {...iconProps} iconName={'DotAlert'} />;\n case StatusDotVariant.transparent:\n return <LazyIcon {...iconProps} iconName={'DotTransparent'} />;\n case StatusDotVariant.info:\n return <LazyIcon {...iconProps} iconName={'DotInfo'} />;\n case StatusDotVariant.group:\n return <LazyIcon {...iconProps} iconName={'Group'} />;\n case StatusDotVariant.recurring:\n return <LazyIcon {...iconProps} iconName={'Change'} />;\n case StatusDotVariant.noaccess:\n return <LazyIcon {...iconProps} iconName={'NoAccess'} />;\n case StatusDotVariant.draft:\n return <LazyIcon {...iconProps} iconName={'Pencil'} />;\n case StatusDotVariant.hidden:\n return <LazyIcon {...iconProps} iconName={'NoEye'} />;\n case StatusDotVariant.login:\n return <LazyIcon {...iconProps} iconName={'Login'} />;\n case StatusDotVariant.attachment:\n return <LazyIcon {...iconProps} iconName={'Attachment'} />;\n case StatusDotVariant.active:\n return <LazyIcon {...iconProps} iconName={'DotActive'} />;\n case StatusDotVariant.pending:\n return <LazyIcon {...iconProps} iconName={'DotPending'} />;\n case StatusDotVariant.inactive:\n return <LazyIcon {...iconProps} iconName={'DotInactive'} />;\n }\n\n return null;\n};\n\nexport interface StatusDotProps {\n /* id that is placed on the wrapper /\n id?: string;\n /* Defines the color mode, onwhite, ondark etc. /\n onColor?: keyof typeof StatusDotOnColor;\n /* Visual variants for the statusdot /\n variant?: keyof typeof StatusDotVariant;\n /* Text placed to the right of the statusdot /\n text: string;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Ref passed to the root element /\n ref?: React.Ref<HTMLElement \| null>;\n}\n\nexport type StatusDotType = typeof StatusDot;\nconst StatusDot: React.FC<StatusDotProps> = (props: StatusDotProps) => {\n const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId, ref } = props;\n const statusDotClasses = classNames(styles['statusdot'], className);\n const labelClasses = classNames(styles['statusdot__label'], {\n [styles['statusdot__label--on-dark']]: onColor === StatusDotOnColor.ondark,\n });\n\n return (\n <span id={id} ref={ref} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n <span className={styles['statusdot__dot']} data-testid={testId + '-dot'}>\n <StatusDotIcon onColor={onColor} variant={variant} />\n </span>\n <span className={labelClasses}>{text}</span>\n </span>\n );\n};\n\nexport default StatusDot;\n","import StatusDot from './StatusDot';\nexport { StatusDotOnColor, StatusDotVariant } from './constants';\nexport from './StatusDot';\nexport default StatusDot;\n"],"mappings":";;;;;;AAEA,IAAY,mBAAA,yBAAA,oBAAL;AACL,oBAAA,mBAAA,aAAU,YAAY,WAAA;AACtB,oBAAA,mBAAA,YAAS,YAAY,UAAA;;;AAGvB,IAAY,mBAAA,yBAAA,oBAAL;AACL,oBAAA,aAAA;AACA,oBAAA,eAAA;AACA,oBAAA,eAAA;AACA,oBAAA,aAAA;AACA,oBAAA,eAAA;AACA,oBAAA,eAAA;AACA,oBAAA,WAAA;AACA,oBAAA,iBAAA;AACA,oBAAA,UAAA;AACA,oBAAA,WAAA;AACA,oBAAA,eAAA;AACA,oBAAA,cAAA;AACA,oBAAA,WAAA;AACA,oBAAA,YAAA;AACA,oBAAA,WAAA;AACA,oBAAA,gBAAA;AACA,oBAAA,YAAA;AACA,oBAAA,aAAA;AACA,oBAAA,cAAA;;;ACTF,IAAMA,iBAA+C,EAAE,SAAS,UAAU,aAAa;CAErF,MAAM,YAAY;EAChB,OAFY,YAAY,iBAAiB,SAAS,SAAS,QAAQ,GAAG,SAAS,QAAQ;EAGvF,MAAM,SAAS;EACf;EACA,WAAW,~~GAAW~~;IACnB,OAAO,mBAAmB,aAAa,OAAO,YAAY;IAC1D,OAAO,6BAA6B,YAAY,iBAAiB;GACnE,CAAC;EACH;AAED,SAAQ,SAAR;EACE,KAAK,iBAAiB,QACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAgB;EAC5D,KAAK,iBAAiB,UACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAiB;EAC7D,KAAK,iBAAiB,UACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAwB;EACpE,KAAK,iBAAiB,QACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAqB;EACjE,KAAK,iBAAiB,UACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAqB;EACjE,KAAK,iBAAiB,UACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAkB;EAC9D,KAAK,iBAAiB,MACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAc;EAC1D,KAAK,iBAAiB,YACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAoB;EAChE,KAAK,iBAAiB,KACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAa;EACzD,KAAK,iBAAiB,MACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAW;EACvD,KAAK,iBAAiB,UACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAY;EACxD,KAAK,iBAAiB,SACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAc;EAC1D,KAAK,iBAAiB,MACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAY;EACxD,KAAK,iBAAiB,OACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAW;EACvD,KAAK,iBAAiB,MACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAW;EACvD,KAAK,iBAAiB,WACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAgB;EAC5D,KAAK,iBAAiB,OACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAe;EAC3D,KAAK,iBAAiB,QACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAgB;EAC5D,KAAK,iBAAiB,SACpB,QAAO,oBAAC,UAAA;GAAS,GAAI;GAAW,UAAU;IAAiB;;AAG/D,QAAO;;AAqBT,IAAMC,aAAuC,UAA0B;CACrE,MAAM,EAAE,IAAI,UAAU,iBAAiB,SAAS,UAAU,iBAAiB,MAAM,MAAM,WAAW,QAAQ,QAAQ;CAClH,MAAM,mBAAmB,~~GAAW~~,OAAO,cAAc,UAAU;CACnE,MAAM,eAAe,~~GAAW~~,OAAO,qBAAqB,GACzD,OAAO,+BAA+B,YAAY,iBAAiB,QACrE,CAAC;AAEF,QACE,qBAAC,QAAA;EAAS;EAAS;EAAK,WAAW;EAAkB,eAAa;EAAQ,oBAAkB,YAAY;aACtG,oBAAC,QAAA;GAAK,WAAW,OAAO;GAAmB,eAAa,SAAS;aAC/D,oBAAC,eAAA;IAAuB;IAAkB;KAAW;IAChD,EACP,oBAAC,QAAA;GAAK,WAAW;aAAe;IAAY,CAAA;GACvC;;ACrGX,IAAA,sBDyGe"}
1	+ {"version":3,"file":"StatusDot.js","names":["StatusDotIcon: React.FC<StatusDotIconProps>","StatusDot: React.FC<StatusDotProps>"],"sources":["../src/components/StatusDot/constants.ts","../src/components/StatusDot/StatusDot.tsx","../src/components/StatusDot/index.ts"],"sourcesContent":["import { FormOnColor } from '../../constants';\n\nexport enum StatusDotOnColor {\n onwhite = FormOnColor.onwhite,\n ondark = FormOnColor.ondark,\n}\n\nexport enum StatusDotVariant {\n success = 'success',\n inprocess = 'inprocess',\n exception = 'exception',\n unknown = 'unknown',\n inspected = 'inspected',\n cancelled = 'cancelled',\n alert = 'alert',\n transparent = 'transparent',\n info = 'info',\n group = 'group',\n recurring = 'recurring',\n noaccess = 'noaccess',\n draft = 'draft',\n hidden = 'hidden',\n login = 'login',\n attachment = 'attachment',\n active = 'active',\n pending = 'pending',\n inactive = 'inactive',\n}\n","import classNames from 'classnames';\n\nimport { StatusDotOnColor, StatusDotVariant } from './constants';\nimport { IconSize } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { LazyIcon } from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface StatusDotIconProps {\n /** Defines the color of the icon /\n onColor?: keyof typeof StatusDotOnColor;\n /* The variant defines style formatting and what icon to use /\n variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ onColor, variant = 'info' }) => {\n const color = onColor === StatusDotOnColor.ondark ? getColor('white') : getColor('black');\n const iconProps = {\n color,\n size: IconSize.XXSmall,\n onColor,\n className: classNames({\n [styles[`statusdot__dot--${variant}`]]: typeof variant !== 'undefined',\n [styles['statusdot__dot--on-dark']]: onColor === StatusDotOnColor.ondark,\n }),\n };\n\n switch (variant) {\n case StatusDotVariant.success:\n return <LazyIcon {...iconProps} iconName={'DotSuccess'} />;\n case StatusDotVariant.inprocess:\n return <LazyIcon {...iconProps} iconName={'DotHalfDisc'} />;\n case StatusDotVariant.exception:\n return <LazyIcon {...iconProps} iconName={'DotWarningTriangle'} />;\n case StatusDotVariant.unknown:\n return <LazyIcon {...iconProps} iconName={'DotQuestionMark'} />;\n case StatusDotVariant.inspected:\n return <LazyIcon {...iconProps} iconName={'DotLookingGlass'} />;\n case StatusDotVariant.cancelled:\n return <LazyIcon {...iconProps} iconName={'DotCancelled'} />;\n case StatusDotVariant.alert:\n return <LazyIcon {...iconProps} iconName={'DotAlert'} />;\n case StatusDotVariant.transparent:\n return <LazyIcon {...iconProps} iconName={'DotTransparent'} />;\n case StatusDotVariant.info:\n return <LazyIcon {...iconProps} iconName={'DotInfo'} />;\n case StatusDotVariant.group:\n return <LazyIcon {...iconProps} iconName={'Group'} />;\n case StatusDotVariant.recurring:\n return <LazyIcon {...iconProps} iconName={'Change'} />;\n case StatusDotVariant.noaccess:\n return <LazyIcon {...iconProps} iconName={'NoAccess'} />;\n case StatusDotVariant.draft:\n return <LazyIcon {...iconProps} iconName={'Pencil'} />;\n case StatusDotVariant.hidden:\n return <LazyIcon {...iconProps} iconName={'NoEye'} />;\n case StatusDotVariant.login:\n return <LazyIcon {...iconProps} iconName={'Login'} />;\n case StatusDotVariant.attachment:\n return <LazyIcon {...iconProps} iconName={'Attachment'} />;\n case StatusDotVariant.active:\n return <LazyIcon {...iconProps} iconName={'DotActive'} />;\n case StatusDotVariant.pending:\n return <LazyIcon {...iconProps} iconName={'DotPending'} />;\n case StatusDotVariant.inactive:\n return <LazyIcon {...iconProps} iconName={'DotInactive'} />;\n }\n\n return null;\n};\n\nexport interface StatusDotProps {\n /* id that is placed on the wrapper /\n id?: string;\n /* Defines the color mode, onwhite, ondark etc. /\n onColor?: keyof typeof StatusDotOnColor;\n /* Visual variants for the statusdot /\n variant?: keyof typeof StatusDotVariant;\n /* Text placed to the right of the statusdot /\n text: string;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Ref passed to the root element /\n ref?: React.Ref<HTMLElement \| null>;\n}\n\nexport type StatusDotType = typeof StatusDot;\nconst StatusDot: React.FC<StatusDotProps> = (props: StatusDotProps) => {\n const { id, onColor = StatusDotOnColor.onwhite, variant = StatusDotVariant.info, text, className, testId, ref } = props;\n const statusDotClasses = classNames(styles['statusdot'], className);\n const labelClasses = classNames(styles['statusdot__label'], {\n [styles['statusdot__label--on-dark']]: onColor === StatusDotOnColor.ondark,\n });\n\n return (\n <span id={id} ref={ref} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n <span className={styles['statusdot__dot']} data-testid={testId + '-dot'}>\n <StatusDotIcon onColor={onColor} variant={variant} />\n </span>\n <span className={labelClasses}>{text}</span>\n </span>\n );\n};\n\nexport default StatusDot;\n","import StatusDot from './StatusDot';\nexport { StatusDotOnColor, StatusDotVariant } from './constants';\nexport from './StatusDot';\nexport default StatusDot;\n"],"mappings":"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"}

package/lib/StatusDotList.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import { r as StatusDotVariant, t as StatusDot_default } from "./StatusDot.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/ElementHeader/StatusDotList/styles.module.scss";
 const StatusDotList = (props) => {
 	const { additionalText, children, className = "", testId, stacking = "horizontal", hiddenForChild = false, topStatusDot, bottomStatusDot } = props;
 	return /* @__PURE__ */ jsxs("span", {
 		"data-testid": testId,
-		className: cn(styles["statusdotlist"], className),
+		className: classNames(styles["statusdotlist"], className),
 		children: [
 			topStatusDot,
 			hiddenForChild && /* @__PURE__ */ jsx(StatusDot_default, {

package/lib/StatusDotList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StatusDotList.js","names":["StatusDotList: React.FC<StatusDotListProps>"],"sources":["../src/components/ElementHeader/StatusDotList/StatusDotList.tsx","../src/components/ElementHeader/StatusDotList/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { StatusDotProps } from '../../StatusDot';\n\nimport StatusDot, { StatusDotVariant } from '../../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type StatusDotListType = typeof StatusDotList;\n\nexport interface StatusDotListProps {\n /** Additional text to the bottom statusdot /\n additionalText?: string;\n /* StatusDot that is under the others and outside the stacking /\n bottomStatusDot?: React.ReactElement<StatusDotProps>;\n /* Stacking of the statusdots /\n stacking?: 'vertical' \| 'horizontal';\n /* StatusDots as children /\n children?: React.ReactNode;\n /* Adds custom classes /\n className?: string;\n /* Show a hidden for child statusdot over the other /\n hiddenForChild?: boolean;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* StatusDot that is over the others and outside the stacking /\n topStatusDot?: React.ReactElement<StatusDotProps>;\n}\n\nexport const StatusDotList: React.FC<StatusDotListProps> = props => {\n const {\n additionalText,\n children,\n className = '',\n testId,\n stacking = 'horizontal',\n hiddenForChild = false,\n topStatusDot,\n bottomStatusDot,\n } = props;\n\n return (\n <span data-testid={testId} className={cn(styles['statusdotlist'], className)}>\n {topStatusDot}\n {/ @todo: legg til tekst i SOT /}\n {hiddenForChild && <StatusDot variant={StatusDotVariant.hidden} text=\"Skjult for barnet\" />}\n <span data-stacking={stacking} className={styles['statusdotlist__children']}>\n {children}\n </span>\n {bottomStatusDot}\n {additionalText && <span className={styles['statusdotlist__additional-text']}>{additionalText}</span>}\n </span>\n );\n};\n\nexport default StatusDotList;\n","import StatusDotList from './StatusDotList';\nexport from './StatusDotList';\nexport default StatusDotList;\n"],"mappings":";;;;AA6BA,MAAaA,iBAA8C,UAAS;CAClE,MAAM,EACJ,gBACA,UACA,YAAY,IACZ,QACA,WAAW,cACX,iBAAiB,OACjB,cACA,oBACE;AAEJ,QACE,qBAAC,QAAA;EAAK,eAAa;EAAQ,WAAW,~~GAAG~~,OAAO,kBAAkB,UAAU;;GACzE;GAEA,kBAAkB,oBAAC,mBAAA;IAAU,SAAS,iBAAiB;IAAQ,MAAK;KAAsB;GAC3F,oBAAC,QAAA;IAAK,iBAAe;IAAU,WAAW,OAAO;IAC9C;KACI;GACN;GACA,kBAAkB,oBAAC,QAAA;IAAK,WAAW,OAAO;cAAoC;KAAsB;;GAChG;;ACjDX,IAAA,0BDqDe"}
1	+ {"version":3,"file":"StatusDotList.js","names":["StatusDotList: React.FC<StatusDotListProps>"],"sources":["../src/components/ElementHeader/StatusDotList/StatusDotList.tsx","../src/components/ElementHeader/StatusDotList/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { StatusDotProps } from '../../StatusDot';\n\nimport StatusDot, { StatusDotVariant } from '../../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type StatusDotListType = typeof StatusDotList;\n\nexport interface StatusDotListProps {\n /** Additional text to the bottom statusdot /\n additionalText?: string;\n /* StatusDot that is under the others and outside the stacking /\n bottomStatusDot?: React.ReactElement<StatusDotProps>;\n /* Stacking of the statusdots /\n stacking?: 'vertical' \| 'horizontal';\n /* StatusDots as children /\n children?: React.ReactNode;\n /* Adds custom classes /\n className?: string;\n /* Show a hidden for child statusdot over the other /\n hiddenForChild?: boolean;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* StatusDot that is over the others and outside the stacking /\n topStatusDot?: React.ReactElement<StatusDotProps>;\n}\n\nexport const StatusDotList: React.FC<StatusDotListProps> = props => {\n const {\n additionalText,\n children,\n className = '',\n testId,\n stacking = 'horizontal',\n hiddenForChild = false,\n topStatusDot,\n bottomStatusDot,\n } = props;\n\n return (\n <span data-testid={testId} className={cn(styles['statusdotlist'], className)}>\n {topStatusDot}\n {/ @todo: legg til tekst i SOT /}\n {hiddenForChild && <StatusDot variant={StatusDotVariant.hidden} text=\"Skjult for barnet\" />}\n <span data-stacking={stacking} className={styles['statusdotlist__children']}>\n {children}\n </span>\n {bottomStatusDot}\n {additionalText && <span className={styles['statusdotlist__additional-text']}>{additionalText}</span>}\n </span>\n );\n};\n\nexport default StatusDotList;\n","import StatusDotList from './StatusDotList';\nexport from './StatusDotList';\nexport default StatusDotList;\n"],"mappings":";;;;AA6BA,MAAaA,iBAA8C,UAAS;CAClE,MAAM,EACJ,gBACA,UACA,YAAY,IACZ,QACA,WAAW,cACX,iBAAiB,OACjB,cACA,oBACE;AAEJ,QACE,qBAAC,QAAA;EAAK,eAAa;EAAQ,WAAW,WAAG,OAAO,kBAAkB,UAAU;;GACzE;GAEA,kBAAkB,oBAAC,mBAAA;IAAU,SAAS,iBAAiB;IAAQ,MAAK;KAAsB;GAC3F,oBAAC,QAAA;IAAK,iBAAe;IAAU,WAAW,OAAO;IAC9C;KACI;GACN;GACA,kBAAkB,oBAAC,QAAA;IAAK,WAAW,OAAO;cAAoC;KAAsB;;GAChG;;ACjDX,IAAA,0BDqDe"}

package/lib/StepButtons.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { n as AnalyticsId } from "./constants2.js";
-import cn from "classnames";
+import classNames from "classnames";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/StepButtons/styles.module.scss";
 const StepButtons = (props) => {
 	const { backButton, forwardButton, additionalButtons, cancelButton, sticky = false, testId } = props;
-	const navigationClasses = cn(styles.stepbuttons, sticky && styles["stepbuttons--has-sticky-buttons"]);
+	const navigationClasses = classNames(styles.stepbuttons, sticky && styles["stepbuttons--has-sticky-buttons"]);
 	if (backButton || forwardButton || additionalButtons || cancelButton) return /* @__PURE__ */ jsxs("div", {
 		className: navigationClasses,
 		"data-testid": testId,
@@ -15,14 +15,14 @@ const StepButtons = (props) => {
 				className: styles.stepbuttons__buttons,
 				children: [backButton && React.cloneElement(backButton, {
 					variant: "outline",
-					wrapperClassName: cn(styles["stepbuttons__button--back"])
+					wrapperClassName: classNames(styles["stepbuttons__button--back"])
 				}), forwardButton && React.cloneElement(forwardButton, {
 					variant: "fill",
-					wrapperClassName: cn(styles["stepbuttons__button--forward"])
+					wrapperClassName: classNames(styles["stepbuttons__button--forward"])
 				})]
 			}),
 			additionalButtons && /* @__PURE__ */ jsx("div", {
-				className: cn(styles.stepbuttons__buttons, styles["stepbuttons__buttons--additional"]),
+				className: classNames(styles.stepbuttons__buttons, styles["stepbuttons__buttons--additional"]),
 				children: additionalButtons
 			}),
 			cancelButton && /* @__PURE__ */ jsx("div", {

package/lib/StepButtons.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StepButtons.js","names":["StepButtons: React.FC<StepButtonsProps>"],"sources":["../src/components/StepButtons/StepButtons.tsx","../src/components/StepButtons/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ButtonProps } from '../Button';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface StepButtonsProps {\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. Default: false /\n sticky?: boolean;\n /* Sets the data-testid attribute. /\n testId?: string;\n}\n\nexport const StepButtons: React.FC<StepButtonsProps> = props => {\n const { backButton, forwardButton, additionalButtons, cancelButton, sticky = false, testId } = props;\n\n const navigationClasses = classNames(styles.stepbuttons, sticky && styles['stepbuttons--has-sticky-buttons']);\n\n if (backButton \|\| forwardButton \|\| additionalButtons \|\| cancelButton) {\n return (\n <div className={navigationClasses} data-testid={testId} data-analyticsid={AnalyticsId.StepButtons}>\n {(backButton \|\| forwardButton) && (\n <div className={styles.stepbuttons__buttons}>\n {backButton &&\n React.cloneElement(backButton, {\n variant: 'outline',\n wrapperClassName: classNames(styles['stepbuttons__button--back']),\n })}\n {forwardButton &&\n React.cloneElement(forwardButton, {\n variant: 'fill',\n wrapperClassName: classNames(styles['stepbuttons__button--forward']),\n })}\n </div>\n )}\n {additionalButtons && (\n <div className={classNames(styles.stepbuttons__buttons, styles['stepbuttons__buttons--additional'])}>{additionalButtons}</div>\n )}\n {cancelButton && (\n <div className={styles.stepbuttons__buttons}>\n {React.cloneElement(cancelButton, {\n variant: 'borderless',\n })}\n </div>\n )}\n </div>\n );\n }\n return null;\n};\n\nexport default StepButtons;\n","import StepButtons from './StepButtons';\nexport from './StepButtons';\nexport default StepButtons;\n"],"mappings":";;;;;AAyBA,MAAaA,eAA0C,UAAS;CAC9D,MAAM,EAAE,YAAY,eAAe,mBAAmB,cAAc,SAAS,OAAO,WAAW;CAE/F,MAAM,oBAAoB,~~GAAW~~,OAAO,aAAa,UAAU,OAAO,mCAAmC;AAE7G,KAAI,cAAc,iBAAiB,qBAAqB,aACtD,QACE,qBAAC,OAAA;EAAI,WAAW;EAAmB,eAAa;EAAQ,oBAAkB,YAAY;;IAClF,cAAc,kBACd,qBAAC,OAAA;IAAI,WAAW,OAAO;eACpB,cACC,MAAM,aAAa,YAAY;KAC7B,SAAS;KACT,kBAAkB,~~GAAW~~,OAAO,6BAA6B;KAClE,CAAC,EACH,iBACC,MAAM,aAAa,eAAe;KAChC,SAAS;KACT,kBAAkB,~~GAAW~~,OAAO,gCAAgC;KACrE,CAAC,CAAA;KACA;GAEP,qBACC,oBAAC,OAAA;IAAI,WAAW,~~GAAW~~,OAAO,sBAAsB,OAAO,oCAAoC;cAAG;KAAwB;GAE/H,gBACC,oBAAC,OAAA;IAAI,WAAW,OAAO;cACpB,MAAM,aAAa,cAAc,EAChC,SAAS,cACV,CAAC;KACE;;GAEJ;AAGV,QAAO;;AC1DT,IAAA,wBD6De"}
1	+ {"version":3,"file":"StepButtons.js","names":["StepButtons: React.FC<StepButtonsProps>"],"sources":["../src/components/StepButtons/StepButtons.tsx","../src/components/StepButtons/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ButtonProps } from '../Button';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface StepButtonsProps {\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. Default: false /\n sticky?: boolean;\n /* Sets the data-testid attribute. /\n testId?: string;\n}\n\nexport const StepButtons: React.FC<StepButtonsProps> = props => {\n const { backButton, forwardButton, additionalButtons, cancelButton, sticky = false, testId } = props;\n\n const navigationClasses = classNames(styles.stepbuttons, sticky && styles['stepbuttons--has-sticky-buttons']);\n\n if (backButton \|\| forwardButton \|\| additionalButtons \|\| cancelButton) {\n return (\n <div className={navigationClasses} data-testid={testId} data-analyticsid={AnalyticsId.StepButtons}>\n {(backButton \|\| forwardButton) && (\n <div className={styles.stepbuttons__buttons}>\n {backButton &&\n React.cloneElement(backButton, {\n variant: 'outline',\n wrapperClassName: classNames(styles['stepbuttons__button--back']),\n })}\n {forwardButton &&\n React.cloneElement(forwardButton, {\n variant: 'fill',\n wrapperClassName: classNames(styles['stepbuttons__button--forward']),\n })}\n </div>\n )}\n {additionalButtons && (\n <div className={classNames(styles.stepbuttons__buttons, styles['stepbuttons__buttons--additional'])}>{additionalButtons}</div>\n )}\n {cancelButton && (\n <div className={styles.stepbuttons__buttons}>\n {React.cloneElement(cancelButton, {\n variant: 'borderless',\n })}\n </div>\n )}\n </div>\n );\n }\n return null;\n};\n\nexport default StepButtons;\n","import StepButtons from './StepButtons';\nexport from './StepButtons';\nexport default StepButtons;\n"],"mappings":";;;;;AAyBA,MAAaA,eAA0C,UAAS;CAC9D,MAAM,EAAE,YAAY,eAAe,mBAAmB,cAAc,SAAS,OAAO,WAAW;CAE/F,MAAM,oBAAoB,WAAW,OAAO,aAAa,UAAU,OAAO,mCAAmC;AAE7G,KAAI,cAAc,iBAAiB,qBAAqB,aACtD,QACE,qBAAC,OAAA;EAAI,WAAW;EAAmB,eAAa;EAAQ,oBAAkB,YAAY;;IAClF,cAAc,kBACd,qBAAC,OAAA;IAAI,WAAW,OAAO;eACpB,cACC,MAAM,aAAa,YAAY;KAC7B,SAAS;KACT,kBAAkB,WAAW,OAAO,6BAA6B;KAClE,CAAC,EACH,iBACC,MAAM,aAAa,eAAe;KAChC,SAAS;KACT,kBAAkB,WAAW,OAAO,gCAAgC;KACrE,CAAC,CAAA;KACA;GAEP,qBACC,oBAAC,OAAA;IAAI,WAAW,WAAW,OAAO,sBAAsB,OAAO,oCAAoC;cAAG;KAAwB;GAE/H,gBACC,oBAAC,OAAA;IAAI,WAAW,OAAO;cACpB,MAAM,aAAa,cAAc,EAChC,SAAS,cACV,CAAC;KACE;;GAEJ;AAGV,QAAO;;AC1DT,IAAA,wBD6De"}

package/lib/TabList.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { t as useIsVisible } from "./useIsVisible.js";
 import { t as ChevronLeft_default } from "./ChevronLeft.js";
 import { t as ChevronRight_default } from "./ChevronRight.js";
 import { t as useRovingFocus } from "./useRovingFocus.js";
-import cn from "classnames";
+import classNames from "classnames";
 import React, { useEffect, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Tabs/TabList/styles.module.scss";
@@ -48,7 +48,7 @@ var TabItem = (props) => {
 		props.onTabListClick(props.index);
 		scrollToTab(props.index);
 	};
-	const tabButtonClasses = cn(styles["tab-list__tab"], styles[`tab-list__tab--${props.color}`], {
+	const tabButtonClasses = classNames(styles["tab-list__tab"], styles[`tab-list__tab--${props.color}`], {
 		[styles["tab-list__tab--selected"]]: isSelected,
 		[styles["tab-list__tab--not-selected"]]: !isSelected
 	});
@@ -96,7 +96,7 @@ var TabList = (props) => {
 	const listRef = useRef(null);
 	const tabRefs = useRef(React.Children.map(children, () => React.createRef()) || []);
 	useRovingFocus(onTabListClick, tabRefs, listRef, true);
-	const tablistClasses = cn(styles["tab-list"], styles[`tab-list--${onColor}`]);
+	const tablistClasses = classNames(styles["tab-list"], styles[`tab-list--${onColor}`]);
 	const getBackgroundColor = (onColor$1) => {
 		switch (onColor$1) {
 			case "onwhite": return "var(--color-base-background-white)";
@@ -139,14 +139,14 @@ var TabList = (props) => {
 		className: styles["tab-list-wrapper"],
 		children: [
 			shouldShowFadeStart() && /* @__PURE__ */ jsxs("div", {
-				className: cn(styles["tab-list__start-wrapper"]),
+				className: classNames(styles["tab-list__start-wrapper"]),
 				children: [/* @__PURE__ */ jsx(TabChevron_default, {
 					onClick: () => scrollInList("left"),
 					direction: "left",
 					backgroundColor: `${getBackgroundColor(onColor)}`,
 					ariaLabel: ariaLabelLeftButton
 				}), /* @__PURE__ */ jsx("div", {
-					className: cn(styles["tab-list__fade-start"]),
+					className: classNames(styles["tab-list__fade-start"]),
 					style: { backgroundColor: `${getBackgroundColor(onColor)}` }
 				})]
 			}),
@@ -169,9 +169,9 @@ var TabList = (props) => {
 				})
 			}),
 			shouldShowFadeEnd() && /* @__PURE__ */ jsxs("div", {
-				className: cn(styles["tab-list__end-wrapper"]),
+				className: classNames(styles["tab-list__end-wrapper"]),
 				children: [/* @__PURE__ */ jsx("div", {
-					className: cn(styles["tab-list__fade-end"]),
+					className: classNames(styles["tab-list__fade-end"]),
 					style: { backgroundColor: `${getBackgroundColor(onColor)}` }
 				}), /* @__PURE__ */ jsx(TabChevron_default, {
 					onClick: () => scrollInList("right"),
@@ -180,7 +180,7 @@ var TabList = (props) => {
 					ariaLabel: ariaLabelRightButton
 				})]
 			}),
-			/* @__PURE__ */ jsx("div", { className: cn(styles["tab-list__border"]) })
+			/* @__PURE__ */ jsx("div", { className: classNames(styles["tab-list__border"]) })
 		]
 	});
 };

package/lib/TabList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabList.js","names":["Tab: React.FC<TabProps>","TabChevron: React.FC<TabChevronProps>","TabItem: React.FC<TabItemProps>","TabList: React.FC<TabListProps>"],"sources":["../src/components/Tabs/Tab.tsx","../src/components/Tabs/TabList/TabChevron.tsx","../src/components/Tabs/TabList/TabItem.tsx","../src/components/Tabs/TabList/TabList.tsx","../src/components/Tabs/TabList/index.ts"],"sourcesContent":["import type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nexport interface TabProps {\n /** Sets the tab panel content /\n children?: React.ReactNode;\n /* Optional icon on the tab /\n icon?: SvgIcon \| IconName;\n /* Called when tab is selected /\n onTabClick?: (index: number) => void;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Title on the tab /\n title?: string;\n}\n\nconst Tab: React.FC<TabProps> = props => {\n return <>{props.children ?? null}</>;\n};\n\nexport default Tab;\n","import React from 'react';\n\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../../Icon';\nimport ChevronLeft from '../../Icons/ChevronLeft';\nimport ChevronRight from '../../Icons/ChevronRight';\n\nimport styles from './styles.module.scss';\n\ninterface TabChevronProps {\n direction: 'left' \| 'right';\n onClick: () => void;\n backgroundColor?: string;\n ariaLabel?: string;\n}\n\nconst TabChevron: React.FC<TabChevronProps> = ({ direction, onClick, backgroundColor, ariaLabel }) => {\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n const { isHovered } = usePseudoClasses<HTMLButtonElement \| null>(buttonRef);\n\n return (\n <button\n type=\"button\"\n ref={buttonRef}\n className={styles['tab-list__button']}\n onClick={onClick}\n aria-label={ariaLabel}\n style={{ backgroundColor: backgroundColor }}\n >\n {direction === 'left' ? (\n <Icon color={'var(--color-action-graphics-onlight)'} isHovered={isHovered} svgIcon={ChevronLeft} size={IconSize.XSmall} />\n ) : (\n <Icon color={'var(--color-action-graphics-onlight)'} isHovered={isHovered} svgIcon={ChevronRight} size={IconSize.XSmall} />\n )}\n </button>\n );\n};\n\nexport default TabChevron;\n","import { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { IconName } from '../../Icons/IconNames';\nimport type { TabProps } from '../Tab';\nimport type { TabsColors } from '../Tabs';\n\nimport { palette } from '../../../theme/palette';\nimport Icon, { IconSize } from '../../Icon';\nimport LazyIcon from '../../LazyIcon';\n\nimport styles from './styles.module.scss';\n\ninterface TabItemProps {\n tabProps: TabProps;\n index: number;\n color: TabsColors;\n selectedTab: number;\n tabRefs: React.RefObject<React.RefObject<HTMLButtonElement \| null>[] \| null \| undefined>;\n tabListVisible: boolean;\n onTabListClick: (index: number) => void;\n}\n\nconst TabItem: React.FC<TabItemProps> = props => {\n const isSelected = props.index === props.selectedTab;\n const { title, onTabClick, icon, testId } = props.tabProps;\n const handleClick = (): void => {\n if (onTabClick) onTabClick(props.index);\n props.onTabListClick(props.index);\n scrollToTab(props.index);\n };\n const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${props.color}`], {\n [styles['tab-list__tab--selected']]: isSelected,\n [styles['tab-list__tab--not-selected']]: !isSelected,\n });\n\n const currentRef = props.tabRefs.current && props.tabRefs.current[props.index];\n\n const scrollToTab = (index: number): void => {\n const currentRef = props.tabRefs.current && props.tabRefs.current[index];\n\n if (currentRef?.current?.scrollIntoView) {\n currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'nearest', block: 'nearest' });\n }\n };\n\n const itemRef = useRef<HTMLLIElement>(null);\n\n useEffect(() => {\n if (isSelected && props.tabListVisible) {\n scrollToTab(props.index);\n }\n }, [isSelected]);\n\n return (\n <li role=\"presentation\" ref={itemRef}>\n <button\n role=\"tab\"\n aria-selected={isSelected}\n onClick={handleClick}\n className={tabButtonClasses}\n data-testid={testId}\n ref={currentRef as React.RefObject<HTMLButtonElement>}\n >\n <span className={styles['tab-list__tab__title-and-icon']}>\n {icon &&\n (typeof icon === 'string' ? (\n <LazyIcon\n iconName={icon as IconName}\n size={IconSize.XSmall}\n color={isSelected ? palette[`black`] : palette['blueberry500']}\n />\n ) : (\n <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n ))}\n {title}\n </span>\n </button>\n </li>\n );\n};\n\nexport default TabItem;\n","import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TabProps } from '../Tab';\nimport type { TabsColors, TabsOnColor } from '../Tabs';\n\nimport TabChevron from './TabChevron';\nimport TabItem from './TabItem';\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab from '../Tab';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n children: React.ReactNode;\n onTabListClick: (index: number) => void;\n selectedTab: number;\n color: TabsColors;\n onColor: TabsOnColor;\n ariaLabelRightButton?: string;\n ariaLabelLeftButton?: string;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n const { selectedTab, onTabListClick, children, color, onColor, ariaLabelLeftButton, ariaLabelRightButton } = props;\n\n const listRef = useRef<HTMLUListElement>(null);\n\n const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()) \|\| []);\n useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${onColor}`]);\n\n const getBackgroundColor = (onColor: TabsOnColor): string => {\n switch (onColor) {\n case 'onwhite':\n return 'var(--color-base-background-white)';\n case 'onblueberry':\n return 'var(--color-base-background-blueberry)';\n case 'onneutral':\n return 'var(--color-base-background-neutral)';\n }\n };\n const firstTab = tabRefs.current && tabRefs.current[0];\n const lastTab = tabRefs.current && tabRefs.current[tabRefs.current.length - 1];\n\n const firstTabVisible = useIsVisible(firstTab);\n const lastTabVisible = useIsVisible(lastTab);\n const tabListVisible = useIsVisible(listRef);\n\n const shouldShowFadeStart = (): boolean => {\n return !firstTabVisible;\n };\n\n const shouldShowFadeEnd = (): boolean => {\n return !lastTabVisible;\n };\n\n const scrollInList = (direction: string): void => {\n if (listRef.current) {\n const listWidth = listRef.current.clientWidth;\n const listScrollLeft = listRef.current.scrollLeft;\n const maxScrollLeft = listRef.current.scrollWidth - listWidth;\n\n if (direction === 'right' && !lastTabVisible) {\n const scrollAmount = Math.min(listWidth / 2, maxScrollLeft - listScrollLeft);\n listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n } else if (direction === 'left' && !firstTabVisible) {\n const scrollAmount = -Math.min(listWidth / 2, listScrollLeft);\n listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n }\n }\n };\n\n return (\n <div className={styles['tab-list-wrapper']}>\n {shouldShowFadeStart() && (\n <div className={classNames(styles['tab-list__start-wrapper'])}>\n <TabChevron\n onClick={() => scrollInList('left')}\n direction=\"left\"\n backgroundColor={`${getBackgroundColor(onColor)}`}\n ariaLabel={ariaLabelLeftButton}\n />\n <div\n className={classNames(styles['tab-list__fade-start'])}\n style={{\n backgroundColor: `${getBackgroundColor(onColor)}`,\n }}\n ></div>\n </div>\n )}\n <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n {React.Children.map(children, (child, index) => {\n if (isComponent<TabProps>(child, Tab)) {\n return (\n <TabItem\n tabRefs={tabRefs}\n tabListVisible={tabListVisible}\n key={child.props.title}\n index={index}\n selectedTab={selectedTab}\n onTabListClick={onTabListClick}\n tabProps={child.props}\n color={color}\n />\n );\n }\n return null;\n })}\n </ul>\n {shouldShowFadeEnd() && (\n <div className={classNames(styles['tab-list__end-wrapper'])}>\n <div\n className={classNames(styles['tab-list__fade-end'])}\n style={{\n backgroundColor: `${getBackgroundColor(onColor)}`,\n }}\n ></div>\n <TabChevron\n onClick={() => scrollInList('right')}\n direction=\"right\"\n backgroundColor={`${getBackgroundColor(onColor)}`}\n ariaLabel={ariaLabelRightButton}\n />\n </div>\n )}\n <div className={classNames(styles['tab-list__border'])}></div>\n </div>\n );\n};\n\nexport default TabList;\n","import TabList from './TabList';\nexport from './TabList';\nexport default TabList;\n"],"mappings":"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"}
1	+ {"version":3,"file":"TabList.js","names":["Tab: React.FC<TabProps>","TabChevron: React.FC<TabChevronProps>","TabItem: React.FC<TabItemProps>","TabList: React.FC<TabListProps>"],"sources":["../src/components/Tabs/Tab.tsx","../src/components/Tabs/TabList/TabChevron.tsx","../src/components/Tabs/TabList/TabItem.tsx","../src/components/Tabs/TabList/TabList.tsx","../src/components/Tabs/TabList/index.ts"],"sourcesContent":["import type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nexport interface TabProps {\n /** Sets the tab panel content /\n children?: React.ReactNode;\n /* Optional icon on the tab /\n icon?: SvgIcon \| IconName;\n /* Called when tab is selected /\n onTabClick?: (index: number) => void;\n /* Sets the data-testid attribute. /\n testId?: string;\n /* Title on the tab /\n title?: string;\n}\n\nconst Tab: React.FC<TabProps> = props => {\n return <>{props.children ?? null}</>;\n};\n\nexport default Tab;\n","import React from 'react';\n\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../../Icon';\nimport ChevronLeft from '../../Icons/ChevronLeft';\nimport ChevronRight from '../../Icons/ChevronRight';\n\nimport styles from './styles.module.scss';\n\ninterface TabChevronProps {\n direction: 'left' \| 'right';\n onClick: () => void;\n backgroundColor?: string;\n ariaLabel?: string;\n}\n\nconst TabChevron: React.FC<TabChevronProps> = ({ direction, onClick, backgroundColor, ariaLabel }) => {\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n const { isHovered } = usePseudoClasses<HTMLButtonElement \| null>(buttonRef);\n\n return (\n <button\n type=\"button\"\n ref={buttonRef}\n className={styles['tab-list__button']}\n onClick={onClick}\n aria-label={ariaLabel}\n style={{ backgroundColor: backgroundColor }}\n >\n {direction === 'left' ? (\n <Icon color={'var(--color-action-graphics-onlight)'} isHovered={isHovered} svgIcon={ChevronLeft} size={IconSize.XSmall} />\n ) : (\n <Icon color={'var(--color-action-graphics-onlight)'} isHovered={isHovered} svgIcon={ChevronRight} size={IconSize.XSmall} />\n )}\n </button>\n );\n};\n\nexport default TabChevron;\n","import { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { IconName } from '../../Icons/IconNames';\nimport type { TabProps } from '../Tab';\nimport type { TabsColors } from '../Tabs';\n\nimport { palette } from '../../../theme/palette';\nimport Icon, { IconSize } from '../../Icon';\nimport LazyIcon from '../../LazyIcon';\n\nimport styles from './styles.module.scss';\n\ninterface TabItemProps {\n tabProps: TabProps;\n index: number;\n color: TabsColors;\n selectedTab: number;\n tabRefs: React.RefObject<React.RefObject<HTMLButtonElement \| null>[] \| null \| undefined>;\n tabListVisible: boolean;\n onTabListClick: (index: number) => void;\n}\n\nconst TabItem: React.FC<TabItemProps> = props => {\n const isSelected = props.index === props.selectedTab;\n const { title, onTabClick, icon, testId } = props.tabProps;\n const handleClick = (): void => {\n if (onTabClick) onTabClick(props.index);\n props.onTabListClick(props.index);\n scrollToTab(props.index);\n };\n const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${props.color}`], {\n [styles['tab-list__tab--selected']]: isSelected,\n [styles['tab-list__tab--not-selected']]: !isSelected,\n });\n\n const currentRef = props.tabRefs.current && props.tabRefs.current[props.index];\n\n const scrollToTab = (index: number): void => {\n const currentRef = props.tabRefs.current && props.tabRefs.current[index];\n\n if (currentRef?.current?.scrollIntoView) {\n currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'nearest', block: 'nearest' });\n }\n };\n\n const itemRef = useRef<HTMLLIElement>(null);\n\n useEffect(() => {\n if (isSelected && props.tabListVisible) {\n scrollToTab(props.index);\n }\n }, [isSelected]);\n\n return (\n <li role=\"presentation\" ref={itemRef}>\n <button\n role=\"tab\"\n aria-selected={isSelected}\n onClick={handleClick}\n className={tabButtonClasses}\n data-testid={testId}\n ref={currentRef as React.RefObject<HTMLButtonElement>}\n >\n <span className={styles['tab-list__tab__title-and-icon']}>\n {icon &&\n (typeof icon === 'string' ? (\n <LazyIcon\n iconName={icon as IconName}\n size={IconSize.XSmall}\n color={isSelected ? palette[`black`] : palette['blueberry500']}\n />\n ) : (\n <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n ))}\n {title}\n </span>\n </button>\n </li>\n );\n};\n\nexport default TabItem;\n","import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TabProps } from '../Tab';\nimport type { TabsColors, TabsOnColor } from '../Tabs';\n\nimport TabChevron from './TabChevron';\nimport TabItem from './TabItem';\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab from '../Tab';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n children: React.ReactNode;\n onTabListClick: (index: number) => void;\n selectedTab: number;\n color: TabsColors;\n onColor: TabsOnColor;\n ariaLabelRightButton?: string;\n ariaLabelLeftButton?: string;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n const { selectedTab, onTabListClick, children, color, onColor, ariaLabelLeftButton, ariaLabelRightButton } = props;\n\n const listRef = useRef<HTMLUListElement>(null);\n\n const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()) \|\| []);\n useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${onColor}`]);\n\n const getBackgroundColor = (onColor: TabsOnColor): string => {\n switch (onColor) {\n case 'onwhite':\n return 'var(--color-base-background-white)';\n case 'onblueberry':\n return 'var(--color-base-background-blueberry)';\n case 'onneutral':\n return 'var(--color-base-background-neutral)';\n }\n };\n const firstTab = tabRefs.current && tabRefs.current[0];\n const lastTab = tabRefs.current && tabRefs.current[tabRefs.current.length - 1];\n\n const firstTabVisible = useIsVisible(firstTab);\n const lastTabVisible = useIsVisible(lastTab);\n const tabListVisible = useIsVisible(listRef);\n\n const shouldShowFadeStart = (): boolean => {\n return !firstTabVisible;\n };\n\n const shouldShowFadeEnd = (): boolean => {\n return !lastTabVisible;\n };\n\n const scrollInList = (direction: string): void => {\n if (listRef.current) {\n const listWidth = listRef.current.clientWidth;\n const listScrollLeft = listRef.current.scrollLeft;\n const maxScrollLeft = listRef.current.scrollWidth - listWidth;\n\n if (direction === 'right' && !lastTabVisible) {\n const scrollAmount = Math.min(listWidth / 2, maxScrollLeft - listScrollLeft);\n listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n } else if (direction === 'left' && !firstTabVisible) {\n const scrollAmount = -Math.min(listWidth / 2, listScrollLeft);\n listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n }\n }\n };\n\n return (\n <div className={styles['tab-list-wrapper']}>\n {shouldShowFadeStart() && (\n <div className={classNames(styles['tab-list__start-wrapper'])}>\n <TabChevron\n onClick={() => scrollInList('left')}\n direction=\"left\"\n backgroundColor={`${getBackgroundColor(onColor)}`}\n ariaLabel={ariaLabelLeftButton}\n />\n <div\n className={classNames(styles['tab-list__fade-start'])}\n style={{\n backgroundColor: `${getBackgroundColor(onColor)}`,\n }}\n ></div>\n </div>\n )}\n <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n {React.Children.map(children, (child, index) => {\n if (isComponent<TabProps>(child, Tab)) {\n return (\n <TabItem\n tabRefs={tabRefs}\n tabListVisible={tabListVisible}\n key={child.props.title}\n index={index}\n selectedTab={selectedTab}\n onTabListClick={onTabListClick}\n tabProps={child.props}\n color={color}\n />\n );\n }\n return null;\n })}\n </ul>\n {shouldShowFadeEnd() && (\n <div className={classNames(styles['tab-list__end-wrapper'])}>\n <div\n className={classNames(styles['tab-list__fade-end'])}\n style={{\n backgroundColor: `${getBackgroundColor(onColor)}`,\n }}\n ></div>\n <TabChevron\n onClick={() => scrollInList('right')}\n direction=\"right\"\n backgroundColor={`${getBackgroundColor(onColor)}`}\n ariaLabel={ariaLabelRightButton}\n />\n </div>\n )}\n <div className={classNames(styles['tab-list__border'])}></div>\n </div>\n );\n};\n\nexport default TabList;\n","import TabList from './TabList';\nexport from './TabList';\nexport default TabList;\n"],"mappings":"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"}

package/lib/TabPanel.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/Tabs/TabPanel/styles.module.scss";
 var TabPanel = (props) => {
 	const { children, color = "white", isFirst = false, style, ref } = props;
 	return /* @__PURE__ */ jsx("div", {
 		ref,
-		className: cn(styles["tab-panel"], styles[`tab-panel--${color}`], { [styles["tab-panel--first"]]: isFirst }),
+		className: classNames(styles["tab-panel"], styles[`tab-panel--${color}`], { [styles["tab-panel--first"]]: isFirst }),
 		style,
 		children: /* @__PURE__ */ jsx("div", { children })
 	});

package/lib/TabPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabPanel.js","names":["TabPanel: React.FC<TabPanelProps>"],"sources":["../src/components/Tabs/TabPanel/TabPanel.tsx","../src/components/Tabs/TabPanel/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabPanelProps {\n children?: React.ReactNode;\n color?: TabsColors;\n isFirst?: boolean;\n style?: React.CSSProperties;\n /** Ref passed to the component /\n ref?: React.Ref<HTMLDivElement \| null>;\n}\n\nconst TabPanel: React.FC<TabPanelProps> = props => {\n const { children, color = 'white', isFirst = false, style, ref } = props;\n\n const tabPanelClasses = classNames(styles['tab-panel'], styles[`tab-panel--${color}`], {\n [styles['tab-panel--first']]: isFirst,\n });\n\n return (\n <div ref={ref} className={tabPanelClasses} style={style}>\n <div>{children}</div>\n </div>\n );\n};\n\nTabPanel.displayName = 'TabPanel';\nexport default TabPanel;\n","import TabPanel from './TabPanel';\nexport from './TabPanel';\nexport default TabPanel;\n"],"mappings":";;;AAeA,IAAMA,YAAoC,UAAS;CACjD,MAAM,EAAE,UAAU,QAAQ,SAAS,UAAU,OAAO,OAAO,QAAQ;AAMnE,QACE,oBAAC,OAAA;EAAS;EAAK,WALO,~~GAAW~~,OAAO,cAAc,OAAO,cAAc,UAAU,GACpF,OAAO,sBAAsB,SAC/B,CAAC;EAGkD;YAChD,oBAAC,OAAA,EAAK,UAAA,CAAe;GACjB;;AAIV,SAAS,cAAc;AC3BvB,IAAA,qBD4Be"}
1	+ {"version":3,"file":"TabPanel.js","names":["TabPanel: React.FC<TabPanelProps>"],"sources":["../src/components/Tabs/TabPanel/TabPanel.tsx","../src/components/Tabs/TabPanel/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabPanelProps {\n children?: React.ReactNode;\n color?: TabsColors;\n isFirst?: boolean;\n style?: React.CSSProperties;\n /** Ref passed to the component /\n ref?: React.Ref<HTMLDivElement \| null>;\n}\n\nconst TabPanel: React.FC<TabPanelProps> = props => {\n const { children, color = 'white', isFirst = false, style, ref } = props;\n\n const tabPanelClasses = classNames(styles['tab-panel'], styles[`tab-panel--${color}`], {\n [styles['tab-panel--first']]: isFirst,\n });\n\n return (\n <div ref={ref} className={tabPanelClasses} style={style}>\n <div>{children}</div>\n </div>\n );\n};\n\nTabPanel.displayName = 'TabPanel';\nexport default TabPanel;\n","import TabPanel from './TabPanel';\nexport from './TabPanel';\nexport default TabPanel;\n"],"mappings":";;;AAeA,IAAMA,YAAoC,UAAS;CACjD,MAAM,EAAE,UAAU,QAAQ,SAAS,UAAU,OAAO,OAAO,QAAQ;AAMnE,QACE,oBAAC,OAAA;EAAS;EAAK,WALO,WAAW,OAAO,cAAc,OAAO,cAAc,UAAU,GACpF,OAAO,sBAAsB,SAC/B,CAAC;EAGkD;YAChD,oBAAC,OAAA,EAAK,UAAA,CAAe;GACjB;;AAIV,SAAS,cAAc;AC3BvB,IAAA,qBD4Be"}

package/lib/TableBody.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { n as ModeType } from "./constants4.js";
 import { i as mapChildrenWithMode } from "./utils5.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
-import styles from "./components/Table/styles.module.scss";
+import tableStyles from "./components/Table/styles.module.scss";
 const TableBody = ({ className, children, mode = ModeType.normal, ...rest }) => {
 	return /* @__PURE__ */ jsx("tbody", {
-		className: cn(styles["table-body"], className),
+		className: classNames(tableStyles["table-body"], className),
 		...rest,
 		children: mapChildrenWithMode(children, mode)
 	});

package/lib/TableBody.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableBody.js","names":["TableBody: React.FC<Props>"],"sources":["../src/components/Table/TableBody/TableBody.tsx","../src/components/Table/TableBody/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\nimport { mapChildrenWithMode } from '../utils';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tbody'>, 'style'> {\n /** Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the table body. Use TableRows /\n children?: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n}\n\nexport const TableBody: React.FC<Props> = ({ className, children, mode = ModeType.normal, ...rest }) => {\n const tableBodyClasses = classNames(tableStyles['table-body'], className);\n return (\n <tbody className={tableBodyClasses} {...rest}>\n {mapChildrenWithMode(children, mode)}\n </tbody>\n );\n};\n\nexport default TableBody;\n","import TableBody from './TableBody';\nexport from './TableBody';\nexport default TableBody;\n"],"mappings":";;;;;AAeA,MAAaA,aAA8B,EAAE,WAAW,UAAU,OAAO,SAAS,QAAQ,GAAG,WAAW;AAEtG,QACE,oBAAC,SAAA;EAAM,WAFgB,~~GAAW~~,~~OAAY~~,eAAe,UAAU;EAEnC,GAAI;YACrC,oBAAoB,UAAU,KAAK;GAC9B;;AClBZ,IAAA,sBDsBe"}
1	+ {"version":3,"file":"TableBody.js","names":["TableBody: React.FC<Props>"],"sources":["../src/components/Table/TableBody/TableBody.tsx","../src/components/Table/TableBody/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\nimport { mapChildrenWithMode } from '../utils';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tbody'>, 'style'> {\n /** Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the table body. Use TableRows /\n children?: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n}\n\nexport const TableBody: React.FC<Props> = ({ className, children, mode = ModeType.normal, ...rest }) => {\n const tableBodyClasses = classNames(tableStyles['table-body'], className);\n return (\n <tbody className={tableBodyClasses} {...rest}>\n {mapChildrenWithMode(children, mode)}\n </tbody>\n );\n};\n\nexport default TableBody;\n","import TableBody from './TableBody';\nexport from './TableBody';\nexport default TableBody;\n"],"mappings":";;;;;AAeA,MAAaA,aAA8B,EAAE,WAAW,UAAU,OAAO,SAAS,QAAQ,GAAG,WAAW;AAEtG,QACE,oBAAC,SAAA;EAAM,WAFgB,WAAW,YAAY,eAAe,UAAU;EAEnC,GAAI;YACrC,oBAAoB,UAAU,KAAK;GAC9B;;AClBZ,IAAA,sBDsBe"}

package/lib/TableCell.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { a as TextAlign, n as ModeType } from "./constants4.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
-import styles from "./components/Table/styles.module.scss";
+import tableStyles from "./components/Table/styles.module.scss";
 const TableCell = ({ nowrap = false, textAlign = TextAlign.left, dataLabel, children, className, testId, mode = ModeType.normal, ...rest }) => {
 	return /* @__PURE__ */ jsx("td", {
-		className: cn(styles["table__cell"], { [styles["table__cell--compact"]]: mode === ModeType.compact }, { [styles["table__cell--nowrap"]]: nowrap }, { [styles["table__cell--center"]]: textAlign === "center" }, { [styles["table__cell--right"]]: textAlign === "right" }, className),
+		className: classNames(tableStyles["table__cell"], { [tableStyles["table__cell--compact"]]: mode === ModeType.compact }, { [tableStyles["table__cell--nowrap"]]: nowrap }, { [tableStyles["table__cell--center"]]: textAlign === "center" }, { [tableStyles["table__cell--right"]]: textAlign === "right" }, className),
 		"data-label": dataLabel,
 		"data-testid": testId,
 		...rest,

package/lib/TableCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableCell.js","names":["TableCell: React.FC<Props>"],"sources":["../src/components/Table/TableCell/TableCell.tsx","../src/components/Table/TableCell/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { ModeType, TextAlign } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'td'>, 'style'> {\n /** Label used for small viewport block /\n dataLabel?: string;\n /* text align in cell /\n textAlign?: TextAlign;\n /* nowrap for white space /\n nowrap?: boolean;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the table cell /\n children?: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n /* For test purposes /\n testId?: string;\n}\n\nexport const TableCell: React.FC<Props> = ({\n nowrap = false,\n textAlign = TextAlign.left,\n dataLabel,\n children,\n className,\n testId,\n mode = ModeType.normal,\n ...rest\n}) => {\n const tableCellClass = classNames(\n tableStyles['table__cell'],\n { [tableStyles['table__cell--compact']]: mode === ModeType.compact },\n { [tableStyles['table__cell--nowrap']]: nowrap },\n { [tableStyles['table__cell--center']]: textAlign === 'center' },\n { [tableStyles['table__cell--right']]: textAlign === 'right' },\n className\n );\n\n return (\n <td className={tableCellClass} data-label={dataLabel} data-testid={testId} {...rest}>\n {children}\n </td>\n );\n};\n\nexport default TableCell;\n","import TableCell from './TableCell';\nexport from './TableCell';\nexport default TableCell;\n"],"mappings":";;;;AAsBA,MAAaA,aAA8B,EACzC,SAAS,OACT,YAAY,UAAU,MACtB,WACA,UACA,WACA,QACA,OAAO,SAAS,QAChB,GAAG,WACC;AAUJ,QACE,oBAAC,MAAA;EAAG,WAViB,~~GACrB~~,~~OAAY~~,gBACZ,GAAG,~~OAAY~~,0BAA0B,SAAS,SAAS,SAAS,EACpE,GAAG,~~OAAY~~,yBAAyB,QAAQ,EAChD,GAAG,~~OAAY~~,yBAAyB,cAAc,UAAU,EAChE,GAAG,~~OAAY~~,wBAAwB,cAAc,SAAS,EAC9D,UACD;EAGgC,cAAY;EAAW,eAAa;EAAQ,GAAI;EAC5E;GACE;;AC1CT,IAAA,sBD8Ce"}
1	+ {"version":3,"file":"TableCell.js","names":["TableCell: React.FC<Props>"],"sources":["../src/components/Table/TableCell/TableCell.tsx","../src/components/Table/TableCell/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { ModeType, TextAlign } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'td'>, 'style'> {\n /** Label used for small viewport block /\n dataLabel?: string;\n /* text align in cell /\n textAlign?: TextAlign;\n /* nowrap for white space /\n nowrap?: boolean;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the table cell /\n children?: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n /* For test purposes /\n testId?: string;\n}\n\nexport const TableCell: React.FC<Props> = ({\n nowrap = false,\n textAlign = TextAlign.left,\n dataLabel,\n children,\n className,\n testId,\n mode = ModeType.normal,\n ...rest\n}) => {\n const tableCellClass = classNames(\n tableStyles['table__cell'],\n { [tableStyles['table__cell--compact']]: mode === ModeType.compact },\n { [tableStyles['table__cell--nowrap']]: nowrap },\n { [tableStyles['table__cell--center']]: textAlign === 'center' },\n { [tableStyles['table__cell--right']]: textAlign === 'right' },\n className\n );\n\n return (\n <td className={tableCellClass} data-label={dataLabel} data-testid={testId} {...rest}>\n {children}\n </td>\n );\n};\n\nexport default TableCell;\n","import TableCell from './TableCell';\nexport from './TableCell';\nexport default TableCell;\n"],"mappings":";;;;AAsBA,MAAaA,aAA8B,EACzC,SAAS,OACT,YAAY,UAAU,MACtB,WACA,UACA,WACA,QACA,OAAO,SAAS,QAChB,GAAG,WACC;AAUJ,QACE,oBAAC,MAAA;EAAG,WAViB,WACrB,YAAY,gBACZ,GAAG,YAAY,0BAA0B,SAAS,SAAS,SAAS,EACpE,GAAG,YAAY,yBAAyB,QAAQ,EAChD,GAAG,YAAY,yBAAyB,cAAc,UAAU,EAChE,GAAG,YAAY,wBAAwB,cAAc,SAAS,EAC9D,UACD;EAGgC,cAAY;EAAW,eAAa;EAAQ,GAAI;EAC5E;GACE;;AC1CT,IAAA,sBD8Ce"}

package/lib/TableExpandedRow.js CHANGED Viewed

@@ -2,19 +2,19 @@ import { t as Icon_default } from "./Icon.js";
 import { t as Button_default } from "./Button.js";
 import { t as ChevronUp_default } from "./ChevronUp.js";
 import { n as ModeType } from "./constants4.js";
-import cn from "classnames";
+import classNames from "classnames";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import styles from "./components/Table/styles.module.scss";
+import tableStyles from "./components/Table/styles.module.scss";
 const TableExpandedRow = ({ numberOfColumns, expanded, hideDetailsText, toggleClick, children, className, mode = ModeType.normal, id }) => {
 	return /* @__PURE__ */ jsx("tr", {
-		className: cn(styles["table__expanded-row"], { [styles["table__expanded-row--expanded"]]: expanded }, className),
+		className: classNames(tableStyles["table__expanded-row"], { [tableStyles["table__expanded-row--expanded"]]: expanded }, className),
 		id,
 		children: /* @__PURE__ */ jsx("td", {
 			colSpan: numberOfColumns,
-			className: cn(styles["table__cell"], className, { [styles["table__cell--compact"]]: mode === ModeType.compact }),
+			className: classNames(tableStyles["table__cell"], className, { [tableStyles["table__cell--compact"]]: mode === ModeType.compact }),
 			children: /* @__PURE__ */ jsxs("div", {
-				className: cn(styles["table__expanded-row-container"]),
+				className: classNames(tableStyles["table__expanded-row-container"]),
 				children: [React.Children.map(children, (child) => React.isValidElement(child) && React.cloneElement(child)), /* @__PURE__ */ jsxs(Button_default, {
 					variant: "borderless",
 					onClick: toggleClick,

package/lib/TableExpandedRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableExpandedRow.js","names":[],"sources":["../src/components/Table/TableExpandedRow/TableExpandedRow.tsx","../src/components/Table/TableExpandedRow/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props {\n /** Row is expanded. /\n expanded: boolean;\n /* Number of columns in table. /\n numberOfColumns: number;\n /* Text for hide button. /\n hideDetailsText: string;\n /* When hide button inside expanded row is clicked. /\n toggleClick: () => void;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the expanded row. /\n children: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n /* Row id. For use with aria-controls. /\n id?: string;\n}\n\nexport const TableExpandedRow = ({\n numberOfColumns,\n expanded,\n hideDetailsText,\n toggleClick,\n children,\n className,\n mode = ModeType.normal,\n id,\n}: Props): React.JSX.Element => {\n const tableRowClass = classNames(\n tableStyles['table__expanded-row'],\n { [tableStyles['table__expanded-row--expanded']]: expanded },\n className\n );\n const tableCellClass = classNames(tableStyles['table__cell'], className, {\n [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n });\n\n const containerClass = classNames(tableStyles['table__expanded-row-container']);\n\n return (\n <tr className={tableRowClass} id={id}>\n <td colSpan={numberOfColumns} className={tableCellClass}>\n <div className={containerClass}>\n {React.Children.map(children, child => React.isValidElement(child) && React.cloneElement(child))}\n <Button variant={'borderless'} onClick={toggleClick} aria-expanded={expanded} tabIndex={expanded ? 0 : -1}>\n {hideDetailsText}\n <Icon svgIcon={ChevronUp} />\n </Button>\n </div>\n </td>\n </tr>\n );\n};\n\nexport default TableExpandedRow;\n","import TableExpandedRow from './TableExpandedRow';\nexport from './TableExpandedRow';\nexport default TableExpandedRow;\n"],"mappings":";;;;;;;;AA6BA,MAAa,oBAAoB,EAC/B,iBACA,UACA,iBACA,aACA,UACA,WACA,OAAO,SAAS,QAChB,SAC8B;AAY9B,QACE,oBAAC,MAAA;EAAG,WAZgB,~~GACpB~~,~~OAAY~~,wBACZ,GAAG,~~OAAY~~,mCAAmC,UAAU,EAC5D,UACD;EAQmC;YAChC,oBAAC,MAAA;GAAG,SAAS;GAAiB,WARX,~~GAAW~~,~~OAAY~~,gBAAgB,WAAW,GACtE,~~OAAY~~,0BAA0B,SAAS,SAAS,SAC1D,CAAC;aAOI,qBAAC,OAAA;IAAI,WALY,~~GAAW~~,~~OAAY~~,iCAAiC;eAMtE,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAe,MAAM,IAAI,MAAM,aAAa,MAAM,CAAC,EAChG,qBAAC,gBAAA;KAAO,SAAS;KAAc,SAAS;KAAa,iBAAe;KAAU,UAAU,WAAW,IAAI;gBACpG,iBACD,oBAAC,cAAA,EAAK,SAAS,mBAAA,CAAa,CAAA;MACrB,CAAA;KACL;IACH;GACF;;AC3DT,IAAA,6BD+De"}
1	+ {"version":3,"file":"TableExpandedRow.js","names":[],"sources":["../src/components/Table/TableExpandedRow/TableExpandedRow.tsx","../src/components/Table/TableExpandedRow/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props {\n /** Row is expanded. /\n expanded: boolean;\n /* Number of columns in table. /\n numberOfColumns: number;\n /* Text for hide button. /\n hideDetailsText: string;\n /* When hide button inside expanded row is clicked. /\n toggleClick: () => void;\n /* Adds custom classes to the element. /\n className?: string;\n /* Sets the content of the expanded row. /\n children: React.ReactNode;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n /* Row id. For use with aria-controls. /\n id?: string;\n}\n\nexport const TableExpandedRow = ({\n numberOfColumns,\n expanded,\n hideDetailsText,\n toggleClick,\n children,\n className,\n mode = ModeType.normal,\n id,\n}: Props): React.JSX.Element => {\n const tableRowClass = classNames(\n tableStyles['table__expanded-row'],\n { [tableStyles['table__expanded-row--expanded']]: expanded },\n className\n );\n const tableCellClass = classNames(tableStyles['table__cell'], className, {\n [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n });\n\n const containerClass = classNames(tableStyles['table__expanded-row-container']);\n\n return (\n <tr className={tableRowClass} id={id}>\n <td colSpan={numberOfColumns} className={tableCellClass}>\n <div className={containerClass}>\n {React.Children.map(children, child => React.isValidElement(child) && React.cloneElement(child))}\n <Button variant={'borderless'} onClick={toggleClick} aria-expanded={expanded} tabIndex={expanded ? 0 : -1}>\n {hideDetailsText}\n <Icon svgIcon={ChevronUp} />\n </Button>\n </div>\n </td>\n </tr>\n );\n};\n\nexport default TableExpandedRow;\n","import TableExpandedRow from './TableExpandedRow';\nexport from './TableExpandedRow';\nexport default TableExpandedRow;\n"],"mappings":";;;;;;;;AA6BA,MAAa,oBAAoB,EAC/B,iBACA,UACA,iBACA,aACA,UACA,WACA,OAAO,SAAS,QAChB,SAC8B;AAY9B,QACE,oBAAC,MAAA;EAAG,WAZgB,WACpB,YAAY,wBACZ,GAAG,YAAY,mCAAmC,UAAU,EAC5D,UACD;EAQmC;YAChC,oBAAC,MAAA;GAAG,SAAS;GAAiB,WARX,WAAW,YAAY,gBAAgB,WAAW,GACtE,YAAY,0BAA0B,SAAS,SAAS,SAC1D,CAAC;aAOI,qBAAC,OAAA;IAAI,WALY,WAAW,YAAY,iCAAiC;eAMtE,MAAM,SAAS,IAAI,WAAU,UAAS,MAAM,eAAe,MAAM,IAAI,MAAM,aAAa,MAAM,CAAC,EAChG,qBAAC,gBAAA;KAAO,SAAS;KAAc,SAAS;KAAa,iBAAe;KAAU,UAAU,WAAW,IAAI;gBACpG,iBACD,oBAAC,cAAA,EAAK,SAAS,mBAAA,CAAa,CAAA;MACrB,CAAA;KACL;IACH;GACF;;AC3DT,IAAA,6BD+De"}

package/lib/TableExpanderCell.js CHANGED Viewed

@@ -3,11 +3,11 @@ import { t as Button_default } from "./Button.js";
 import { t as ChevronDown_default } from "./ChevronDown.js";
 import { t as ChevronUp_default } from "./ChevronUp.js";
 import { n as ModeType } from "./constants4.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
-import styles from "./components/Table/styles.module.scss";
+import tableStyles from "./components/Table/styles.module.scss";
 const TableExpanderCell = ({ expandableRowId, hideDetailsText, showDetailsText, expanded, className, mode = ModeType.normal }) => {
-	const tableCellClass = cn(styles["table__cell"], styles["table__cell-expander"], className, { [styles["table__cell--compact"]]: mode === ModeType.compact });
+	const tableCellClass = classNames(tableStyles["table__cell"], tableStyles["table__cell-expander"], className, { [tableStyles["table__cell--compact"]]: mode === ModeType.compact });
 	const icon = expanded ? ChevronUp_default : ChevronDown_default;
 	return /* @__PURE__ */ jsx("td", {
 		className: tableCellClass,

package/lib/TableExpanderCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableExpanderCell.js","names":[],"sources":["../src/components/Table/TableExpanderCell/TableExpanderCell.tsx","../src/components/Table/TableExpanderCell/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props {\n /** Adds custom classes to the element. /\n className?: string;\n /* Row is expanded. /\n expanded: boolean;\n /* Id for expanded row. /\n expandableRowId: string;\n /* Text for hide button used for aria label. /\n hideDetailsText: string;\n /* Text for show button used for aria label. /\n showDetailsText: string;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n}\n\nexport const TableExpanderCell = ({\n expandableRowId,\n hideDetailsText,\n showDetailsText,\n expanded,\n className,\n mode = ModeType.normal,\n}: Props): React.JSX.Element => {\n const tableCellClass = classNames(tableStyles['table__cell'], tableStyles['table__cell-expander'], className, {\n [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n });\n const icon = expanded ? ChevronUp : ChevronDown;\n\n return (\n <td className={tableCellClass}>\n <Button\n variant=\"borderless\"\n aria-expanded={expanded}\n aria-controls={expandableRowId}\n ariaLabel={expanded ? hideDetailsText : showDetailsText}\n >\n <Icon svgIcon={icon} />\n </Button>\n </td>\n );\n};\n\nexport default TableExpanderCell;\n","import TableExpanderCell from './TableExpanderCell';\nexport from './TableExpanderCell';\nexport default TableExpanderCell;\n"],"mappings":";;;;;;;;AAwBA,MAAa,qBAAqB,EAChC,iBACA,iBACA,iBACA,UACA,WACA,OAAO,SAAS,aACc;CAC9B,MAAM,iBAAiB,~~GAAW~~,~~OAAY~~,gBAAgB,~~OAAY~~,yBAAyB,WAAW,GAC3G,~~OAAY~~,0BAA0B,SAAS,SAAS,SAC1D,CAAC;CACF,MAAM,OAAO,WAAW,oBAAY;AAEpC,QACE,oBAAC,MAAA;EAAG,WAAW;YACb,oBAAC,gBAAA;GACC,SAAQ;GACR,iBAAe;GACf,iBAAe;GACf,WAAW,WAAW,kBAAkB;aAExC,oBAAC,cAAA,EAAK,SAAS,MAAA,CAAQ;IAChB;GACN;;AC7CT,IAAA,8BDiDe"}
1	+ {"version":3,"file":"TableExpanderCell.js","names":[],"sources":["../src/components/Table/TableExpanderCell/TableExpanderCell.tsx","../src/components/Table/TableExpanderCell/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\n\nexport interface Props {\n /** Adds custom classes to the element. /\n className?: string;\n /* Row is expanded. /\n expanded: boolean;\n /* Id for expanded row. /\n expandableRowId: string;\n /* Text for hide button used for aria label. /\n hideDetailsText: string;\n /* Text for show button used for aria label. /\n showDetailsText: string;\n /* For display with less space. Discouraged to use together with interactive elements. /\n mode?: ModeType;\n}\n\nexport const TableExpanderCell = ({\n expandableRowId,\n hideDetailsText,\n showDetailsText,\n expanded,\n className,\n mode = ModeType.normal,\n}: Props): React.JSX.Element => {\n const tableCellClass = classNames(tableStyles['table__cell'], tableStyles['table__cell-expander'], className, {\n [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n });\n const icon = expanded ? ChevronUp : ChevronDown;\n\n return (\n <td className={tableCellClass}>\n <Button\n variant=\"borderless\"\n aria-expanded={expanded}\n aria-controls={expandableRowId}\n ariaLabel={expanded ? hideDetailsText : showDetailsText}\n >\n <Icon svgIcon={icon} />\n </Button>\n </td>\n );\n};\n\nexport default TableExpanderCell;\n","import TableExpanderCell from './TableExpanderCell';\nexport from './TableExpanderCell';\nexport default TableExpanderCell;\n"],"mappings":";;;;;;;;AAwBA,MAAa,qBAAqB,EAChC,iBACA,iBACA,iBACA,UACA,WACA,OAAO,SAAS,aACc;CAC9B,MAAM,iBAAiB,WAAW,YAAY,gBAAgB,YAAY,yBAAyB,WAAW,GAC3G,YAAY,0BAA0B,SAAS,SAAS,SAC1D,CAAC;CACF,MAAM,OAAO,WAAW,oBAAY;AAEpC,QACE,oBAAC,MAAA;EAAG,WAAW;YACb,oBAAC,gBAAA;GACC,SAAQ;GACR,iBAAe;GACf,iBAAe;GACf,WAAW,WAAW,kBAAkB;aAExC,oBAAC,cAAA,EAAK,SAAS,MAAA,CAAQ;IAChB;GACN;;AC7CT,IAAA,8BDiDe"}