@helsenorge/designsystem-react 14.10.0 → 14.11.1

package/lib/scss/_visual-form.scss

@@ -0,0 +1,357 @@
+@use 'sass:map';
+@use 'breakpoints' as breakpoints;
+@use 'font-mixins' as fonts;
+
+// Wrapper layout shared by VisualCheckboxCloud and VisualRadioCloud
+@mixin visual-form-cloud {
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--core-space-4xs) var(--core-space-xs);
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    gap: var(--core-space-m) var(--core-space-s);
+  }
+}
+
+// Pill-style input shared by VisualCheckboxCloud/Checkbox and VisualRadioCloud/Radio
+@mixin visual-form-pill(
+  $pill-padding-mobile: var(--core-space-3xs) var(--core-space-m),
+  $checked-pill-padding-md: var(--core-space-3xs) var(--core-space-m) var(--core-space-3xs) 1.25rem
+) {
+  position: relative;
+  display: inline-flex;
+  align-items: stretch;
+  min-height: 2.75rem;
+  padding: 0.313rem 0;
+  cursor: pointer;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    padding: 0;
+  }
+
+  &__input {
+    // Hides input while making sure screen reader outline wraps the entire component
+    cursor: pointer;
+    position: absolute;
+    z-index: 0;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    outline: none;
+    appearance: none;
+  }
+
+  &__pill {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--core-space-2xs);
+    box-sizing: border-box;
+    min-height: var(--core-space-l);
+    padding: $pill-padding-mobile;
+    border-radius: 100px;
+    background-color: var(--color-action-background-ondark);
+    border: 1px solid var(--color-action-border-onlight);
+    color: var(--color-base-text-onlight);
+
+    @include fonts.title6;
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      min-height: var(--core-space-xl);
+      padding: var(--core-space-3xs) var(--core-space-l);
+    }
+  }
+
+  &:hover &__pill {
+    background-color: var(--color-action-background-ondark-hover);
+    border-color: var(--color-action-border-onlight-hover);
+  }
+
+  &:active &__pill {
+    background-color: var(--color-action-background-ondark-selected);
+    border-color: var(--color-action-border-onlight-hover);
+  }
+
+  &--checked &__pill,
+  &:has(input:checked) &__pill {
+    background-color: var(--color-action-background-onlight);
+    color: var(--color-action-text-ondark);
+    border-color: var(--color-action-background-onlight);
+    padding: var(--core-space-3xs) var(--core-space-s);
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      padding: $checked-pill-padding-md;
+    }
+  }
+
+  &--checked:hover &__pill,
+  &:has(input:checked):hover &__pill {
+    background-color: var(--color-action-graphics-onlight-hover);
+    border-color: var(--color-action-graphics-onlight-hover);
+  }
+
+  &--checked:active &__pill,
+  &:has(input:checked):active &__pill {
+    background-color: var(--color-action-background-onlight-active);
+    border-color: var(--color-action-background-onlight-active);
+  }
+
+  &--invalid &__pill {
+    background-color: var(--color-action-background-ondark);
+    border-color: var(--color-destructive-border-normal);
+  }
+
+  &--invalid:hover &__pill {
+    background-color: var(--color-destructive-background-normal);
+    border-color: var(--color-destructive-border-normal);
+  }
+
+  &--invalid:active &__pill {
+    background-color: var(--color-destructive-background-emphasized);
+    border-color: var(--color-destructive-border-normal);
+  }
+
+  &--invalid#{&}--checked &__pill,
+  &--invalid:has(input:checked) &__pill {
+    background-color: var(--color-destructive-graphics-normal);
+    border-color: var(--color-destructive-graphics-normal);
+  }
+
+  &--invalid#{&}--checked:hover &__pill,
+  &--invalid:has(input:checked):hover &__pill {
+    background-color: var(--color-destructive-graphics-hover);
+    border-color: var(--color-destructive-graphics-hover);
+  }
+
+  &--invalid#{&}--checked:active &__pill,
+  &--invalid:has(input:checked):active &__pill {
+    background-color: var(--color-destructive-graphics-emphasized-onlight);
+    border-color: var(--color-destructive-graphics-emphasized-onlight);
+  }
+
+  &__input:focus-visible + &__pill {
+    outline: 3px solid var(--color-action-border-onlight-focus);
+    border-color: var(--color-action-border-ondark);
+  }
+
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      fill: var(--color-action-graphics-ondark);
+    }
+  }
+
+  &__label {
+    text-box: trim-both cap alphabetic;
+  }
+}
+
+// Grid layout shared by VisualCheckboxGroup and VisualRadioGroup.
+@mixin visual-form-group {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
+  gap: var(--core-space-xs);
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    gap: 0.75rem var(--core-space-xs, 0.75rem);
+  }
+
+  &--variant-line {
+    grid-template-columns: 1fr;
+  }
+}
+
+// Styling shared by VisualCheckbox and VisualRadio
+@mixin visual-form-card {
+  display: flex;
+  position: relative;
+  cursor: pointer;
+  width: 100%;
+
+  &--variant-line {
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    min-height: 6rem;
+    min-width: 15.125rem;
+  }
+
+  &--variant-rectangle {
+    flex-direction: column;
+    align-items: center;
+    min-height: 12.625rem;
+    min-width: 8.75rem;
+    height: 100%;
+  }
+
+  &__input {
+    // Hides input while making sure screen reader outline wraps the entire component
+    cursor: pointer;
+    position: absolute;
+    z-index: 0;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    outline: none;
+    appearance: none;
+  }
+
+  &__frame {
+    position: relative;
+    width: 100%;
+    z-index: 1;
+    display: inline-flex;
+    border-radius: 4px;
+    background: var(--color-action-background-ondark);
+    border: 2px solid var(--color-action-border-onlight);
+    color: var(--color-base-text-onlight);
+  }
+
+  &--variant-line &__frame {
+    margin-left: -2.87rem;
+    gap: var(--core-space-2xs);
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    min-height: 4.63rem;
+    min-width: 12.25rem;
+    padding: var(--core-space-s) var(--core-space-m) var(--core-space-s) var(--core-space-2xl);
+  }
+
+  &--variant-rectangle &__frame {
+    margin-top: -4.37rem;
+    flex: 1;
+    gap: var(--core-space-xs);
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    text-align: center;
+    min-width: 8.75rem;
+    min-height: 10.25rem;
+    padding: var(--core-space-3xl) var(--core-space-xs) var(--core-space-m) var(--core-space-xs);
+  }
+
+  &__visual-content {
+    position: relative;
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border-radius: 100%;
+    background: var(--color-action-background-ondark);
+    border: 2px solid var(--color-action-border-ondark);
+
+    > * {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &--variant-line &__visual-content {
+    min-width: var(--core-space-4xl);
+    min-height: var(--core-space-4xl);
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      min-width: var(--core-space-5xl);
+      min-height: var(--core-space-5xl);
+    }
+  }
+
+  &--variant-rectangle &__visual-content {
+    flex-shrink: 0;
+    width: calc(100% - 2rem);
+    min-width: 6.75rem;
+    max-width: 13rem;
+  }
+
+  &--checked &__frame,
+  &:has(input:checked) &__frame {
+    background: var(--color-action-background-onlight);
+    color: var(--color-action-text-ondark);
+    border-color: var(--color-action-background-onlight);
+  }
+
+  &--invalid &__frame {
+    background: var(--color-action-background-ondark);
+    border-color: var(--core-color-cherry-500);
+  }
+
+  &:hover &__frame {
+    background: var(--core-color-neutral-50);
+    border-color: var(--color-action-border-onlight-hover);
+  }
+
+  &:active &__frame {
+    background: var(--core-color-neutral-100);
+    border-color: var(--color-action-border-onlight-hover);
+  }
+
+  &--checked:hover &__frame,
+  &:has(input:checked):hover &__frame {
+    background: var(--color-action-background-onlight-hover);
+  }
+
+  &--checked:active &__frame,
+  &:has(input:checked):active &__frame {
+    background: var(--color-action-background-onlight-active);
+    border-color: var(--color-action-background-onlight-active);
+  }
+
+  &--invalid:hover &__frame {
+    background: var(--core-color-cherry-50);
+    border-color: var(--core-color-cherry-500);
+  }
+
+  &--invalid:active &__frame {
+    background: var(--core-color-cherry-100);
+    border-color: var(--core-color-cherry-500);
+  }
+
+  &--invalid#{&}--checked &__frame,
+  &--invalid:has(input:checked) &__frame {
+    background: var(--core-color-cherry-50);
+    color: var(--color-base-text-onlight);
+    border-color: var(--core-color-cherry-500);
+  }
+
+  &--invalid#{&}--checked:hover &__frame,
+  &--invalid:has(input:checked):hover &__frame {
+    background: var(--core-color-cherry-100);
+    border-color: var(--core-color-cherry-500);
+  }
+
+  &--invalid#{&}--checked:active &__frame,
+  &--invalid:has(input:checked):active &__frame {
+    background: var(--core-color-cherry-200);
+    border-color: var(--core-color-cherry-500);
+  }
+
+  &__input:focus-visible + &__frame {
+    outline: 4px solid var(--color-action-border-onlight-focus);
+    border-color: var(--color-action-border-ondark);
+  }
+
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      fill: var(--color-action-graphics-ondark);
+    }
+  }
+
+  &__label {
+    flex: 1;
+    min-width: 0;
+    overflow-wrap: anywhere;
+
+    @include fonts.label-subdued;
+  }
+}

package/lib/utils3.js

@@ -1,101 +1,13 @@
-import { t as uuid } from "./uuid.js";
-import { i as FormSize, n as AnalyticsId, r as FormOnColor } from "./constants2.js";
-import { t as usePseudoClasses } from "./usePseudoClasses.js";
-import { n as mergeRefs, t as isMutableRefObject } from "./refs.js";
-import { t as useIdWithFallback } from "./useIdWithFallback.js";
-import { t as getAriaDescribedBy } from "./accessibility.js";
-import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
-import { r as renderLabelAsParent, t as getLabelText } from "./utils2.js";
-import classNames from "classnames";
-import { useState } from "react";
-import { jsx } from "react/jsx-runtime";
-import radioButtonStyles from "./components/RadioButton/styles.module.scss";
-const RadioButton = (props) => {
-	const { className, defaultChecked, onChange, disabled, label, inputId = uuid(), onColor = FormOnColor.onwhite, name = inputId, size, errorText, errorTextId: errorTextIdProp, error = !!errorText, errorWrapperClassName, value = getLabelText(label), testId, required, labelClassNames, ref, ...rest } = props;
-	const invalid = error || onColor === FormOnColor.oninvalid;
-	const onDark = onColor === FormOnColor.ondark;
-	const onBlueberry = onColor === FormOnColor.onblueberry;
-	const onCherry = onColor === FormOnColor.oninvalid;
-	const isLarge = size === FormSize.large;
-	const [checked, changeChecked] = useState();
-	const { refObject, isFocused } = usePseudoClasses(isMutableRefObject(ref) ? ref : null);
-	const mergedRefs = mergeRefs([ref, refObject]);
-	const errorTextId = useIdWithFallback(errorTextIdProp);
-	const radioButtonWrapperClasses = classNames(radioButtonStyles["radio-button-wrapper"], {
-		[radioButtonStyles["radio-button-wrapper__large"]]: isLarge,
-		[radioButtonStyles["radio-button-wrapper__large--focused"]]: isLarge && isFocused,
-		[radioButtonStyles["radio-button-wrapper__large--selected"]]: isLarge && checked && isFocused,
-		[radioButtonStyles["radio-button-wrapper__large--invalid"]]: isLarge && onCherry && isFocused,
-		[radioButtonStyles["radio-button-wrapper__large--on-blueberry"]]: isLarge && onBlueberry && isFocused
-	});
-	const radioButtonLabelClasses = classNames(radioButtonStyles["radio-button-label"], {
-		[radioButtonStyles["radio-button-label--disabled"]]: disabled,
-		[radioButtonStyles["radio-button-label--on-dark"]]: onDark,
-		[radioButtonStyles["radio-button-label--invalid"]]: invalid,
-		[radioButtonStyles["radio-button-label__large"]]: isLarge,
-		[radioButtonStyles["radio-button-label__large--focused"]]: isFocused && isLarge,
-		[radioButtonStyles["radio-button-label__large--disabled"]]: isLarge && disabled
-	}, labelClassNames);
-	const radioButtonClasses = classNames(radioButtonStyles["radio-button"], {
-		[radioButtonStyles["radio-button--on-dark"]]: onDark,
-		[radioButtonStyles["radio-button--disabled"]]: disabled,
-		[radioButtonStyles["radio-button--on-blueberry"]]: onBlueberry,
-		[radioButtonStyles["radio-button--invalid"]]: invalid,
-		[radioButtonStyles["radio-button__large"]]: isLarge,
-		[radioButtonStyles["radio-button__large--disabled"]]: isLarge && disabled,
-		[radioButtonStyles["radio-button__large--invalid"]]: isLarge && invalid
-	}, className);
-	const change = (e) => {
-		changeChecked(e.target.checked);
-		if (onChange) onChange(e);
-	};
-	const getLabelContent = () => /* @__PURE__ */ jsx("input", {
-		...rest,
-		id: inputId,
-		name,
-		className: radioButtonClasses,
-		type: "radio",
-		disabled,
-		value,
-		ref: mergedRefs,
-		defaultChecked,
-		"aria-describedby": getAriaDescribedBy(props, errorTextId),
-		required,
-		onChange: (e) => change(e)
-	});
-	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
-		className: errorWrapperClassName,
-		errorText,
-		errorTextId,
-		children: /* @__PURE__ */ jsx("div", {
-			"data-testid": testId,
-			"data-analyticsid": AnalyticsId.RadioButton,
-			className: radioButtonWrapperClasses,
-			children: renderLabelAsParent({
-				label,
-				children: getLabelContent(),
-				inputId,
-				onColor,
-				labelClassName: radioButtonLabelClasses,
-				sublabelWrapperClassName: radioButtonStyles["radiobutton-sublabel-wrapper"],
-				large: isLarge,
-				afterLabelChildrenClassName: radioButtonStyles["radiobutton-afterlabelchildren-wrapper"]
-			})
-		})
-	});
+let ViewBoxSize = /* @__PURE__ */ function(ViewBoxSize$1) {
+	ViewBoxSize$1["Medium"] = "0 0 512 512";
+	ViewBoxSize$1["Small"] = "0 0 200 200";
+	return ViewBoxSize$1;
+}({});
+const getIllustration = ({ size, large, medium, small }) => {
+	if (large && (size >= 512 || !medium && !small)) return large;
+	if (medium && (size >= 201 || !small)) return medium;
+	return small;
 };
-RadioButton.displayName = "RadioButton";
-var RadioButton_default = RadioButton;
-const getRadioLabelClasses = (radioId, onColor, large, checkedRadioId) => {
-	const onCherry = onColor === "oninvalid";
-	const checked = radioId === checkedRadioId;
-	return classNames({
-		[radioButtonStyles["radio-button-label__large--on-grey"]]: large && onColor === "ongrey" && !checked,
-		[radioButtonStyles["radio-button-label__large--on-blueberry"]]: onColor === "onblueberry" && !checked && large,
-		[radioButtonStyles["radio-button-label__large--selected"]]: large && checked && !onCherry,
-		[radioButtonStyles["radio-button-label__large--selected-invalid"]]: large && checked && onCherry
-	});
-};
-export { RadioButton as n, RadioButton_default as r, getRadioLabelClasses as t };
+export { getIllustration as n, ViewBoxSize as t };
 
 //# sourceMappingURL=utils3.js.map

package/lib/utils3.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils3.js","names":["RadioButton: React.FC<RadioButtonProps>"],"sources":["../src/components/RadioButton/RadioButton.tsx","../src/components/RadioButton/utils.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label/utils';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the input element */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nexport const RadioButton: React.FC<RadioButtonProps> = props => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    errorTextId: errorTextIdProp,\n    error = !!errorText,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ref,\n    ...rest\n  } = props;\n  const invalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onCherry = onColor === FormOnColor.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>();\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--focused']]: isFocused && isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    if (onChange) onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      {...rest}\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={getAriaDescribedBy(props, errorTextId)}\n      required={required}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n        {renderLabelAsParent({\n          label: label,\n          children: getLabelContent(),\n          inputId: inputId,\n          onColor: onColor as FormOnColor,\n          labelClassName: radioButtonLabelClasses,\n          sublabelWrapperClassName: radioButtonStyles['radiobutton-sublabel-wrapper'],\n          large: isLarge,\n          afterLabelChildrenClassName: radioButtonStyles['radiobutton-afterlabelchildren-wrapper'],\n        })}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n","import classNames from 'classnames';\n\nimport type { FormOnColor } from '../../constants';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport const getRadioLabelClasses = (\n  radioId: string,\n  onColor: FormOnColor,\n  large: boolean,\n  checkedRadioId?: string\n): string | undefined => {\n  const onCherry = onColor === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && onColor === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: onColor === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n"],"mappings":";;;;;;;;;;;;AAgDA,MAAaA,eAA0C,UAAS;CAC9D,MAAM,EACJ,WACA,gBACA,UACA,UACA,OACA,UAAU,MAAM,EAChB,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,aAAa,iBACb,QAAQ,CAAC,CAAC,WACV,uBACA,QAAQ,aAAa,MAAM,EAC3B,QACA,UACA,iBACA,KACA,GAAG,SACD;CACJ,MAAM,UAAU,SAAS,YAAY,YAAY;CACjD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,WAAW,YAAY,YAAY;CACzC,MAAM,UAAU,SAAS,SAAS;CAClC,MAAM,CAAC,SAAS,iBAAiB,UAAmB;CACpD,MAAM,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,IAAI,GAAG,MAAM,KAAK;CACzG,MAAM,aAAa,UAAU,CAAC,KAAK,UAAU,CAAC;CAC9C,MAAM,cAAc,kBAAkB,gBAAgB;CAEtD,MAAM,4BAA4B,WAAW,kBAAkB,yBAAyB;GACrF,kBAAkB,iCAAiC;GACnD,kBAAkB,0CAA0C,WAAW;GACvE,kBAAkB,2CAA2C,WAAW,WAAW;GACnF,kBAAkB,0CAA0C,WAAW,YAAY;GACnF,kBAAkB,+CAA+C,WAAW,eAAe;EAC7F,CAAC;CACF,MAAM,0BAA0B,WAC9B,kBAAkB,uBAClB;GACG,kBAAkB,kCAAkC;GACpD,kBAAkB,iCAAiC;GACnD,kBAAkB,iCAAiC;GACnD,kBAAkB,+BAA+B;GACjD,kBAAkB,wCAAwC,aAAa;GACvE,kBAAkB,yCAAyC,WAAW;EACxE,EACD,gBACD;CACD,MAAM,qBAAqB,WACzB,kBAAkB,iBAClB;GACG,kBAAkB,2BAA2B;GAC7C,kBAAkB,4BAA4B;GAC9C,kBAAkB,gCAAgC;GAClD,kBAAkB,2BAA2B;GAC7C,kBAAkB,yBAAyB;GAC3C,kBAAkB,mCAAmC,WAAW;GAChE,kBAAkB,kCAAkC,WAAW;EACjE,EACD,UACD;CAED,MAAM,UAAU,MAAiD;AAC/D,gBAAc,EAAE,OAAO,QAAQ;AAC/B,MAAI,SAAU,UAAS,EAAE;;CAG3B,MAAM,wBACJ,oBAAC,SAAA;EACC,GAAI;EACJ,IAAI;EACE;EACN,WAAW;EACX,MAAK;EACK;EACH;EACP,KAAK;EACW;EAChB,oBAAkB,mBAAmB,OAAO,YAAY;EAC9C;EACV,WAAW,MAAY,OAAO,EAAE;GAChC;AAGJ,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,oBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAa,WAAW;aAC7E,oBAAoB;IACZ;IACP,UAAU,iBAAiB;IAClB;IACA;IACT,gBAAgB;IAChB,0BAA0B,kBAAkB;IAC5C,OAAO;IACP,6BAA6B,kBAAkB;IAChD,CAAC;IACE;GACO;;AAInB,YAAY,cAAc;AAE1B,IAAA,sBAAe;ACrJf,MAAa,wBACX,SACA,SACA,OACA,mBACuB;CACvB,MAAM,WAAW,YAAY;CAC7B,MAAM,UAAU,YAAY;AAE5B,QAAO,WAAW;GACf,kBAAkB,wCAAwC,SAAS,YAAY,YAAY,CAAC;GAC5F,kBAAkB,6CAA6C,YAAY,iBAAiB,CAAC,WAAW;GACxG,kBAAkB,yCAAyC,SAAS,WAAW,CAAC;GAChF,kBAAkB,iDAAiD,SAAS,WAAW;EACzF,CAAC"}
+{"version":3,"file":"utils3.js","names":[],"sources":["../src/components/Illustration/utils.ts"],"sourcesContent":["export enum ViewBoxSize {\n  Medium = '0 0 512 512',\n  Small = '0 0 200 200',\n}\ninterface IllustrationConfig<T> {\n  size: number;\n  large?: T;\n  medium?: T;\n  small?: T;\n}\n\nexport const getIllustration = <T>({ size, large, medium, small }: IllustrationConfig<T>): T => {\n  if (large && (size >= 512 || (!medium && !small))) {\n    return large;\n  }\n\n  if (medium && (size >= 201 || !small)) {\n    return medium;\n  }\n\n  return small as T;\n};\n"],"mappings":"AAAA,IAAY,cAAA,yBAAA,eAAL;AACL,eAAA,YAAA;AACA,eAAA,WAAA;;;AASF,MAAa,mBAAsB,EAAE,MAAM,OAAO,QAAQ,YAAsC;AAC9F,KAAI,UAAU,QAAQ,OAAQ,CAAC,UAAU,CAAC,OACxC,QAAO;AAGT,KAAI,WAAW,QAAQ,OAAO,CAAC,OAC7B,QAAO;AAGT,QAAO"}

package/lib/utils4.js

@@ -1,13 +1,30 @@
-let ViewBoxSize = /* @__PURE__ */ function(ViewBoxSize$1) {
-	ViewBoxSize$1["Medium"] = "0 0 512 512";
-	ViewBoxSize$1["Small"] = "0 0 200 200";
-	return ViewBoxSize$1;
-}({});
-const getIllustration = ({ size, large, medium, small }) => {
-	if (large && (size >= 512 || !medium && !small)) return large;
-	if (medium && (size >= 201 || !small)) return medium;
-	return small;
-};
-export { getIllustration as n, ViewBoxSize as t };
+import { createContext } from "react";
+let PanelLayout = /* @__PURE__ */ function(PanelLayout$1) {
+	PanelLayout$1["vertical"] = "vertical";
+	PanelLayout$1["horizontal"] = "horizontal";
+	PanelLayout$1["combined"] = "combined";
+	PanelLayout$1["bAsRightCol"] = "bAsRightCol";
+	return PanelLayout$1;
+}({});
+let PanelVariant = /* @__PURE__ */ function(PanelVariant$1) {
+	PanelVariant$1["fill"] = "fill";
+	PanelVariant$1["line"] = "line";
+	PanelVariant$1["outline"] = "outline";
+	return PanelVariant$1;
+}({});
+let PanelStacking = /* @__PURE__ */ function(PanelStacking$1) {
+	PanelStacking$1["default"] = "default";
+	PanelStacking$1["bFirst"] = "bFirst";
+	return PanelStacking$1;
+}({});
+let PanelStatus = /* @__PURE__ */ function(PanelStatus$1) {
+	PanelStatus$1["none"] = "none";
+	PanelStatus$1["new"] = "new";
+	PanelStatus$1["error"] = "error";
+	PanelStatus$1["draft"] = "draft";
+	return PanelStatus$1;
+}({});
+const PanelListContext = createContext(null);
+export { PanelVariant as a, PanelStatus as i, PanelLayout as n, PanelStacking as r, PanelListContext as t };
 
 //# sourceMappingURL=utils4.js.map

package/lib/utils4.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils4.js","names":[],"sources":["../src/components/Illustration/utils.ts"],"sourcesContent":["export enum ViewBoxSize {\n  Medium = '0 0 512 512',\n  Small = '0 0 200 200',\n}\ninterface IllustrationConfig<T> {\n  size: number;\n  large?: T;\n  medium?: T;\n  small?: T;\n}\n\nexport const getIllustration = <T>({ size, large, medium, small }: IllustrationConfig<T>): T => {\n  if (large && (size >= 512 || (!medium && !small))) {\n    return large;\n  }\n\n  if (medium && (size >= 201 || !small)) {\n    return medium;\n  }\n\n  return small as T;\n};\n"],"mappings":"AAAA,IAAY,cAAA,yBAAA,eAAL;AACL,eAAA,YAAA;AACA,eAAA,WAAA;;;AASF,MAAa,mBAAsB,EAAE,MAAM,OAAO,QAAQ,YAAsC;AAC9F,KAAI,UAAU,QAAQ,OAAQ,CAAC,UAAU,CAAC,OACxC,QAAO;AAGT,KAAI,WAAW,QAAQ,OAAO,CAAC,OAC7B,QAAO;AAGT,QAAO"}
+{"version":3,"file":"utils4.js","names":[],"sources":["../src/components/Panel/constants.ts","../src/components/PanelList/utils.tsx"],"sourcesContent":["export enum PanelLayout {\n  vertical = 'vertical',\n  horizontal = 'horizontal',\n  combined = 'combined',\n  bAsRightCol = 'bAsRightCol',\n}\n\nexport enum PanelVariant {\n  fill = 'fill',\n  line = 'line',\n  outline = 'outline',\n}\n\nexport enum PanelStacking {\n  default = 'default',\n  bFirst = 'bFirst',\n}\n\nexport enum PanelStatus {\n  none = 'none',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n","import { createContext } from 'react';\n\nimport type { PanelVariant } from '../Panel/constants';\n\nexport interface PanelListContextValue {\n  variant: PanelVariant;\n  highlightText?: string;\n  applyPanelClassName: (existingClassName?: string) => string;\n}\n\nexport const PanelListContext = createContext<PanelListContextValue | null>(null);\n"],"mappings":";AAAA,IAAY,cAAA,yBAAA,eAAL;AACL,eAAA,cAAA;AACA,eAAA,gBAAA;AACA,eAAA,cAAA;AACA,eAAA,iBAAA;;;AAGF,IAAY,eAAA,yBAAA,gBAAL;AACL,gBAAA,UAAA;AACA,gBAAA,UAAA;AACA,gBAAA,aAAA;;;AAGF,IAAY,gBAAA,yBAAA,iBAAL;AACL,iBAAA,aAAA;AACA,iBAAA,YAAA;;;AAGF,IAAY,cAAA,yBAAA,eAAL;AACL,eAAA,UAAA;AACA,eAAA,SAAA;AACA,eAAA,WAAA;AACA,eAAA,WAAA;;;ACZF,MAAa,mBAAmB,cAA4C,KAAK"}

package/lib/utils5.js

@@ -1,30 +1,60 @@
-import { createContext } from "react";
-let PanelLayout = /* @__PURE__ */ function(PanelLayout$1) {
-	PanelLayout$1["vertical"] = "vertical";
-	PanelLayout$1["horizontal"] = "horizontal";
-	PanelLayout$1["combined"] = "combined";
-	PanelLayout$1["bAsRightCol"] = "bAsRightCol";
-	return PanelLayout$1;
-}({});
-let PanelVariant = /* @__PURE__ */ function(PanelVariant$1) {
-	PanelVariant$1["fill"] = "fill";
-	PanelVariant$1["line"] = "line";
-	PanelVariant$1["outline"] = "outline";
-	return PanelVariant$1;
-}({});
-let PanelStacking = /* @__PURE__ */ function(PanelStacking$1) {
-	PanelStacking$1["default"] = "default";
-	PanelStacking$1["bFirst"] = "bFirst";
-	return PanelStacking$1;
-}({});
-let PanelStatus = /* @__PURE__ */ function(PanelStatus$1) {
-	PanelStatus$1["none"] = "none";
-	PanelStatus$1["new"] = "new";
-	PanelStatus$1["error"] = "error";
-	PanelStatus$1["draft"] = "draft";
-	return PanelStatus$1;
-}({});
-const PanelListContext = createContext(null);
-export { PanelVariant as a, PanelStatus as i, PanelLayout as n, PanelStacking as r, PanelListContext as t };
+import { t as Breakpoint } from "./useBreakpoint.js";
+import { r as ResponsiveTableVariant } from "./constants3.js";
+import { t as isTouchDevice } from "./device.js";
+import React from "react";
+import tableStyles from "./components/Table/styles.module.scss";
+var configUsesCss = (config) => config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;
+var mapConfigToClass = (config) => config.variant === "centeredoverflow" || config.variant === "block" ? tableStyles[`table--${config.variant}-${config.breakpoint}`] : "";
+var sortByBreakpointsDescending = (a, b) => Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];
+var isValidForCurrentBreakpoint = (config, breakpoint) => Breakpoint[config.breakpoint] >= breakpoint;
+var getConfigForBreakpoint = (config, breakpoint) => {
+	if (Array.isArray(config)) {
+		config.sort(sortByBreakpointsDescending);
+		return config.find((x) => isValidForCurrentBreakpoint(x, breakpoint));
+	} else if (config && isValidForCurrentBreakpoint(config, breakpoint)) return config;
+};
+const getCurrentConfig = (config, breakpoint, tableWidth, windowWidth) => {
+	const breakpointConfig = getConfigForBreakpoint(config, breakpoint);
+	const canUseHorizontalScroll = isTouchDevice();
+	const canUseCenteredOverflow = tableWidth <= windowWidth;
+	if (!breakpointConfig) return;
+	if (breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow && !canUseCenteredOverflow && breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll) return {
+		variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.none,
+		breakpoint: breakpointConfig.breakpoint
+	};
+	if (breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow && !canUseCenteredOverflow && breakpointConfig.fallbackVariant !== ResponsiveTableVariant.centeredoverflow) return {
+		variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,
+		breakpoint: breakpointConfig.breakpoint
+	};
+	if (breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll && !canUseHorizontalScroll && breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow) return {
+		variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.none,
+		breakpoint: breakpointConfig.breakpoint
+	};
+	if (breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll && !canUseHorizontalScroll && breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll) return {
+		variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,
+		breakpoint: breakpointConfig.breakpoint
+	};
+	return breakpointConfig;
+};
+const getBreakpointClass = (config) => config && configUsesCss(config) ? mapConfigToClass(config) : void 0;
+const getCenteredOverflowTableStyle = (parentWidth, tableWidth) => {
+	if (parentWidth >= tableWidth) return;
+	return { left: `${(parentWidth - tableWidth) / 2 - 8}px` };
+};
+const mapChildrenWithMode = (children, mode) => React.Children.map(children, (child) => {
+	if (!React.isValidElement(child)) return child;
+	if (child.type === React.Fragment) {
+		const fragmentChildren = child.props.children;
+		const mapped = React.Children.map(fragmentChildren, (gc) => React.isValidElement(gc) ? React.cloneElement(gc, { mode }) : gc);
+		return React.cloneElement(child, void 0, mapped);
+	}
+	return React.cloneElement(child, { mode });
+});
+const omitProps = (obj, keys) => {
+	const clone = { ...obj };
+	for (const k of keys) delete clone[k];
+	return clone;
+};
+export { omitProps as a, mapChildrenWithMode as i, getCenteredOverflowTableStyle as n, getCurrentConfig as r, getBreakpointClass as t };
 
 //# sourceMappingURL=utils5.js.map