@dbcdk/react-components 0.0.95 → 0.0.97

package/dist/components/forms/input/Input.module.css

@@ -1,468 +0,0 @@
-/* Root control group */
-.container {
-  display: inline-flex;
-  align-items: stretch;
-  flex-grow: 1;
-  gap: 0;
-  inline-size: var(--input-width, auto);
-  min-inline-size: var(--input-min-width, 0);
-  max-inline-size: var(--input-max-width, none);
-}
-
-/* When you want it to take available space */
-.fullWidth {
-  display: flex;
-  inline-size: 100%;
-  min-inline-size: 0;
-}
-
-/* The "field" (input + icons + clear) */
-.field {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex: 1 1 auto;
-  height: 100%;
-  min-inline-size: 0;
-  color: var(--color-fg-default);
-  background: var(--color-bg-surface);
-  border: var(--border-width-thin) solid var(--color-border-default);
-  border-radius: var(--border-radius-default);
-  box-sizing: border-box;
-  transition:
-    background-color var(--transition-fast) var(--ease-standard),
-    border-color var(--transition-fast) var(--ease-standard),
-    box-shadow var(--transition-fast) var(--ease-standard),
-    color var(--transition-fast) var(--ease-standard);
-}
-
-/* Actual input */
-.input {
-  flex: 1 1 auto;
-  min-inline-size: 0;
-  inline-size: 100%;
-  box-sizing: border-box;
-  text-overflow: ellipsis;
-  color: var(--color-fg-default);
-  background: transparent;
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-normal);
-  border: none;
-  outline: none;
-  padding-inline: var(--spacing-sm);
-  padding-block: var(--spacing-xs);
-  margin: 0;
-}
-
-.input::placeholder {
-  color: var(--color-fg-subtle) !important;
-}
-
-.input:disabled {
-  background-color: transparent;
-  color: var(--color-disabled-fg);
-  cursor: not-allowed;
-  opacity: 1;
-  box-shadow: none;
-}
-
-/* Button group styling */
-.withButton .field {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-/*
-  When onClear exists, do not keep extra inline-end padding on the input itself.
-  The clear affordance already reserves the needed space via:
-  - the inline clearSlot inside endAdornment, or
-  - the absolute clear button path.
-*/
-.withClear .input {
-  padding-inline-end: 0;
-}
-
-/* When clear is inline with other end adornments, keep the input tight as well. */
-.withInlineClear .input {
-  padding-inline-end: 0;
-}
-
-/* Global focus reset - variants own visible focus treatment */
-.input:focus-visible {
-  outline: none;
-}
-
-/* =========================
-   Variants
-   ========================= */
-
-/* Stronger field chrome for forms/settings */
-.outlined {
-  background-color: var(--color-bg-surface);
-  border-color: var(--color-border-default);
-}
-
-.outlined:hover:not([aria-disabled='true']) {
-  border-color: var(--color-border-strong);
-}
-
-.outlined:focus-within:not([aria-disabled='true']) {
-  border-color: var(--color-border-selected);
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
-}
-
-.surface {
-  background-color: var(--color-bg-surface);
-  border: 1px solid var(--color-border-subtle);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
-}
-
-.surface:hover:not([aria-disabled='true']) {
-  border-color: var(--color-border-default);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-}
-
-.surface:focus-within:not([aria-disabled='true']) {
-  border-color: var(--color-border-selected);
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
-}
-
-/* Old filled/tinted behavior, now renamed subtle */
-.subtle {
-  background-color: var(--color-bg-toolbar);
-  border-color: transparent;
-  box-shadow: inset 0 0 0 1px transparent;
-}
-
-.subtle:hover:not([aria-disabled='true']) {
-  background-color: var(--color-bg-toolbar-hover);
-}
-
-.subtle:focus-within:not([aria-disabled='true']) {
-  border-color: var(--color-border-selected);
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
-}
-
-.embedded {
-  background-color: transparent;
-  border-color: transparent;
-  border-radius: 0;
-  box-shadow: none;
-  padding-block: 0;
-  block-size: 100%;
-}
-
-.embedded:hover:not([aria-disabled='true']),
-.embedded:focus-within:not([aria-disabled='true']) {
-  background-color: transparent;
-  border-color: transparent;
-  box-shadow: none;
-  outline: none;
-}
-
-.standalone {
-  background-color: var(--color-bg-surface);
-  border-color: var(--color-border-subtle);
-  border-radius: var(--border-radius-rounded);
-  box-shadow: var(--shadow-xs), var(--shadow-sm);
-}
-
-.standalone .input {
-  padding-inline: var(--spacing-md);
-}
-
-.standalone:hover:not([aria-disabled='true']) {
-  border-color: var(--color-border-strong);
-  box-shadow: var(--shadow-sm), var(--shadow-md);
-}
-
-.standalone:focus-within:not([aria-disabled='true']) {
-  border-color: var(--color-border-selected);
-  box-shadow:
-    var(--shadow-xs),
-    var(--shadow-md),
-    inset 0 0 0 1px var(--color-border-selected);
-}
-
-/* =========================
-   Modified state
-   ========================= */
-
-.modified {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, var(--color-bg-surface));
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 45%,
-    var(--color-border-default)
-  );
-  border-left-color: var(--color-status-warning-border);
-  border-left-width: 4px;
-}
-
-/* Hover should stay warm, not switch back to the normal border */
-.modified:hover:not([aria-disabled='true']) {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 60%,
-    var(--color-border-default)
-  );
-  border-left-color: var(--color-status-warning-border);
-}
-
-/* Focus should also stay warm and readable */
-.modified:focus-within:not([aria-disabled='true']) {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 75%,
-    var(--color-border-default)
-  );
-  border-left-color: var(--color-status-warning-border);
-  box-shadow: inset 0 0 0 1px
-    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
-}
-
-/* Variant-specific tweaks when modified */
-.surface.modified {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
-}
-
-.surface.modified:hover:not([aria-disabled='true']) {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-}
-
-.surface.modified:focus-within:not([aria-disabled='true']) {
-  box-shadow: inset 0 0 0 1px
-    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
-}
-
-.subtle.modified {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 30%, var(--color-bg-toolbar));
-  border-color: transparent;
-  border-left-color: var(--color-status-warning-border);
-  border-left-width: 4px;
-  box-shadow: none;
-}
-
-.subtle.modified:hover:not([aria-disabled='true']) {
-  background-color: color-mix(
-    in srgb,
-    var(--color-status-warning-bg) 36%,
-    var(--color-bg-toolbar-hover)
-  );
-}
-
-.subtle.modified:focus-within:not([aria-disabled='true']) {
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 75%,
-    var(--color-border-default)
-  );
-  border-left-color: var(--color-status-warning-border);
-  box-shadow: inset 0 0 0 1px
-    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
-}
-
-.standalone.modified {
-  box-shadow: var(--shadow-xs), var(--shadow-md);
-}
-
-.standalone.modified:hover:not([aria-disabled='true']) {
-  box-shadow: var(--shadow-sm), var(--shadow-md);
-}
-
-.standalone.modified:focus-within:not([aria-disabled='true']) {
-  box-shadow:
-    var(--shadow-xs),
-    var(--shadow-md),
-    inset 0 0 0 1px
-      color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
-}
-
-/* Embedded should stay visually light, but can still get the marker */
-.embedded.modified {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 18%, transparent);
-  border-color: transparent;
-  border-left-color: var(--color-status-warning-border);
-  border-left-width: 3px;
-  box-shadow: none;
-}
-
-.embedded.modified:hover:not([aria-disabled='true']),
-.embedded.modified:focus-within:not([aria-disabled='true']) {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, transparent);
-  border-color: transparent;
-  border-left-color: var(--color-status-warning-border);
-  box-shadow: none;
-}
-
-/* Disabled modified state */
-.modified[aria-disabled='true'] {
-  background-color: var(--color-disabled-bg);
-  border-color: var(--color-disabled-border);
-  border-left-color: var(--color-disabled-border);
-  border-left-width: var(--border-width-thin);
-  box-shadow: none;
-}
-
-/* Sizes */
-.xs {
-  block-size: var(--component-size-xs);
-  font-size: var(--font-size-xs);
-}
-
-.input.xs {
-  padding-inline: var(--spacing-xxs);
-}
-
-.sm {
-  block-size: var(--component-size-sm);
-  font-size: var(--font-size-sm);
-}
-
-.sm.embedded,
-.md.embedded,
-.lg.embedded {
-  block-size: 100%;
-}
-
-.md {
-  block-size: var(--component-size-md);
-  font-size: var(--font-size-sm);
-}
-
-.lg {
-  block-size: var(--component-size-lg);
-  font-size: var(--font-size-lg);
-}
-
-/* Leading icon */
-.fieldWithIcon .input {
-  padding-inline-start: calc(var(--spacing-sm) + var(--icon-size-md) + var(--spacing-xs));
-}
-
-.embedded.fieldWithIcon .input {
-  padding-inline-start: calc(var(--spacing-xs) + var(--icon-size-md) + var(--spacing-xs));
-}
-
-.icon {
-  position: absolute;
-  inset-inline-start: var(--spacing-sm);
-  top: 50%;
-  transform: translateY(-50%);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: var(--icon-size-md);
-  block-size: var(--icon-size-md);
-  pointer-events: none;
-  color: var(--color-fg-subtle);
-  transition: color var(--transition-fast) var(--ease-standard);
-}
-
-.embedded .icon {
-  inset-inline-start: var(--spacing-xs);
-}
-
-.field:focus-within .icon {
-  color: var(--color-fg-muted);
-}
-
-.icon svg {
-  inline-size: var(--icon-size-md);
-  block-size: var(--icon-size-md);
-}
-
-/* Trailing label (unit, currency, etc.) */
-.withTrailingLabel .field {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.trailingLabel {
-  display: flex;
-  align-items: center;
-  flex: 0 0 auto;
-  padding-inline: var(--spacing-sm);
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  color: var(--color-fg-muted);
-  background: var(--color-bg-toolbar);
-  border: var(--border-width-thin) solid var(--color-border-default);
-  margin-left: calc(-1 * var(--border-width-thin));
-  border-top-right-radius: var(--border-radius-default);
-  border-bottom-right-radius: var(--border-radius-default);
-  white-space: nowrap;
-  user-select: none;
-  box-sizing: border-box;
-}
-
-.withTrailingLabel:has(.standalone) .trailingLabel {
-  border-top-right-radius: var(--border-radius-rounded);
-  border-bottom-right-radius: var(--border-radius-rounded);
-  border-color: var(--color-border-subtle);
-  background-color: var(--color-bg-surface);
-  box-shadow: var(--shadow-xs), var(--shadow-sm);
-}
-
-/* Trailing action button (outside field) */
-.trailingButton {
-  flex: 0 0 auto;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  border-left: var(--border-width-thin) solid transparent;
-  margin-left: calc(-1 * var(--border-width-thin));
-}
-
-.trailingButton:hover {
-  border-color: var(--color-border-default);
-  z-index: 2;
-}
-
-/* Standalone variant: pill-shaped trailing button to match the field */
-.withButton:has(.standalone) .trailingButton {
-  border-top-right-radius: var(--border-radius-rounded);
-  border-bottom-right-radius: var(--border-radius-rounded);
-  border-left-color: var(--color-border-subtle);
-  border-color: var(--color-border-subtle);
-  background-color: var(--color-bg-surface);
-  box-shadow: var(--shadow-xs), var(--shadow-sm);
-}
-
-.withButton:has(.standalone) .trailingButton:hover {
-  border-color: var(--color-border-strong);
-  box-shadow: var(--shadow-sm), var(--shadow-sm);
-}
-
-/* Date/time picker indicator (WebKit) */
-.input[type='datetime-local']::-webkit-calendar-picker-indicator {
-  filter: invert(0.7);
-}
-
-/* Start and end adornments */
-.startAdornment {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-left: var(--spacing-xs);
-}
-
-.endAdornment {
-  display: flex;
-  align-items: center;
-  flex: 0 0 auto;
-  gap: 2px;
-  margin-inline-start: auto;
-  margin-right: var(--spacing-xxs);
-  color: var(--color-fg-subtle);
-}
-
-.clearSlot {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-inline-size: calc(16px + (var(--spacing-xxs) * 2));
-  min-block-size: calc(16px + (var(--spacing-xxs) * 2));
-}

package/dist/components/forms/input-container/InputContainer.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from './InputContainer.module.css';
-export function InputContainer({ label, htmlFor, error, helpText, helpTextAddition, fullWidth = false, required = false, children, orientation = 'horizontal', labelWidth = '160px', modified = false, }) {
-    const message = error !== null && error !== void 0 ? error : helpText;
-    const messageClass = error ? styles.errorText : styles.helpText;
-    const renderLabel = label && (_jsxs("label", { className: styles.label, htmlFor: htmlFor, children: [label, required && _jsx("span", { className: styles.required, children: " *" })] }));
-    const renderMessageRow = (message || helpTextAddition) && (_jsxs("div", { className: `${messageClass} ${styles.messageRow}`, children: [_jsx("span", { children: message }), helpTextAddition && _jsx("span", { className: styles.helpTextAddition, children: helpTextAddition })] }));
-    if (orientation === 'vertical') {
-        return (_jsxs("div", { "data-modified": modified ? 'true' : undefined, className: `dbc-flex dbc-flex-column dbc-gap-xs ${styles.inputContainer}`, style: { width: fullWidth ? '100%' : undefined }, children: [renderLabel, children, renderMessageRow] }));
-    }
-    return (_jsx("div", { "data-modified": modified ? 'true' : undefined, className: styles.inputContainer, style: {
-            '--label-width': labelWidth,
-            width: fullWidth ? '100%' : undefined,
-        }, children: _jsxs("div", { className: `${styles.horizontal} dbc-flex dbc-flex-column dbc-gap-xs`, children: [_jsxs("div", { className: `${styles.labelContainer} dbc-flex dbc-items-center dbc-gap-xs`, children: [renderLabel, children] }), renderMessageRow] }) }));
-}

package/dist/components/forms/input-container/InputContainer.module.css

@@ -1,56 +0,0 @@
-.horizontal {
-  --gap: var(--spacing-sm);
-}
-
-.labelContainer {
-  gap: var(--gap);
-}
-
-.label {
-  color: var(--color-fg-default);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-}
-
-.horizontal .errorText,
-.horizontal .helpText {
-  margin-left: calc(var(--label-width) + var(--gap));
-}
-
-.helpText {
-  color: var(--color-fg-subtle);
-  font-size: var(--font-size-sm);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.helpTextAddition {
-  color: var(--color-fg-subtle);
-}
-
-.horizontal label {
-  width: var(--label-width);
-}
-
-.errorText {
-  color: var(--color-status-error);
-  font-size: var(--font-size-sm);
-}
-
-.required {
-  color: var(--color-status-error);
-  font-weight: bold;
-}
-
-.messageRow {
-  min-height: 1lh;
-}
-
-/* Optional: keep this only for controls whose own label lives inside children,
-   such as checkbox/radio wrappers. It will not affect Input's top label. */
-.inputContainer[data-modified] label:not(.label) {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 35%, transparent);
-  border-radius: var(--border-radius-default);
-  padding: 2px 6px;
-}

package/dist/components/forms/multi-select/MultiSelect.js

@@ -1,122 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check, Search, Square } from 'lucide-react';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { Button } from '../../../components/button/Button';
-import { Chip } from '../../../components/chip/Chip';
-import { ClearButton } from '../../../components/clear-button/ClearButton';
-import { Input } from '../../../components/forms/input/Input';
-import { Menu } from '../../../components/menu/Menu';
-import { Popover } from '../../../components/popover/Popover';
-import { useListNavigation } from '../../../hooks/useListNavigation';
-export function MultiSelect({ options, selectedValues = [], onChange, placeholder = 'Vælg', children, variant = 'outlined', size = 'md', onClear, dataCy, fullWidth = false, disabled = false, searchable = false, searchPlaceholder = 'Søg', emptyMessage = 'Ingen resultater', }) {
-    const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);
-    const popoverRef = useRef(null);
-    const searchInputRef = useRef(null);
-    const [open, setOpen] = useState(false);
-    const [searchQuery, setSearchQuery] = useState('');
-    const filteredOptions = useMemo(() => {
-        const normalizedQuery = searchQuery.trim().toLocaleLowerCase();
-        if (!normalizedQuery)
-            return options;
-        return options.filter(option => option.label.toLocaleLowerCase().includes(normalizedQuery));
-    }, [options, searchQuery]);
-    const { activeIndex, setActiveIndex, optionRefs, resetActiveIndex, clearTypeahead, handleKeyDown, } = useListNavigation({
-        options: filteredOptions,
-        getLabel: option => option.label,
-        isOpen: open,
-        onOpenChange: setOpen,
-        searchable,
-        searchInputRef,
-        getInitialActiveIndex: items => {
-            const selectedIndex = items.findIndex(option => selectedSet.has(option.value));
-            return selectedIndex >= 0 ? selectedIndex : 0;
-        },
-    });
-    useEffect(() => {
-        var _a;
-        if (!open || !searchable)
-            return;
-        (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [open, searchable]);
-    const toggleValue = (value) => {
-        if (disabled)
-            return;
-        const next = new Set(selectedSet);
-        if (next.has(value))
-            next.delete(value);
-        else
-            next.add(value);
-        onChange(Array.from(next));
-    };
-    const handleCombinedKeyDown = (e) => {
-        var _a;
-        if (searchable && e.target === searchInputRef.current) {
-            switch (e.key) {
-                case 'Enter':
-                    if (filteredOptions[activeIndex]) {
-                        e.preventDefault();
-                        toggleValue(filteredOptions[activeIndex].value);
-                    }
-                    return;
-                case ' ':
-                    if (filteredOptions[activeIndex]) {
-                        e.preventDefault();
-                        toggleValue(filteredOptions[activeIndex].value);
-                    }
-                    return;
-                default:
-                    handleKeyDown(e);
-                    return;
-            }
-        }
-        switch (e.key) {
-            case 'Enter':
-            case ' ': {
-                e.preventDefault();
-                clearTypeahead();
-                if (!open) {
-                    setOpen(true);
-                    return;
-                }
-                const activeOption = filteredOptions[activeIndex];
-                if (activeOption)
-                    toggleValue(activeOption.value);
-                return;
-            }
-            case 'Escape':
-                if (!open)
-                    return;
-                e.preventDefault();
-                (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
-                return;
-            default:
-                handleKeyDown(e);
-        }
-    };
-    return (_jsx(Popover, { ref: popoverRef, open: open, onOpenChange: next => {
-            setOpen(next);
-            if (next) {
-                resetActiveIndex();
-            }
-            else {
-                setSearchQuery('');
-            }
-        }, dataCy: dataCy, fullWidth: fullWidth, autoFocusContent: false, returnFocus: true, trigger: (onClick, icon, isOpen) => (_jsx(Button, { variant: variant, onClick: onClick, onKeyDown: handleCombinedKeyDown, size: size, fullWidth: fullWidth, disabled: disabled, "aria-haspopup": "menu", "aria-expanded": !!isOpen, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [_jsx("span", { children: children !== null && children !== void 0 ? children : placeholder }), selectedValues.length > 0 ? _jsx(Chip, { size: "sm", children: selectedValues.length }) : null] }), _jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [onClear && selectedValues.length > 0 ? _jsx(ClearButton, { onClick: onClear }) : null, _jsx("span", { style: { color: 'var(--color-fg-subtle)', display: 'inline-flex' }, children: icon })] })] }) })), children: _jsxs(Menu, { onKeyDown: handleCombinedKeyDown, children: [searchable ? (_jsx(Menu.Item, { children: _jsx(Input, { ref: searchInputRef, value: searchQuery, onChange: e => setSearchQuery(e.target.value), onKeyDown: handleCombinedKeyDown, placeholder: searchPlaceholder, icon: _jsx(Search, { size: 16 }), fullWidth: true }) })) : null, filteredOptions.map((option, index) => {
-                    const isSelected = selectedSet.has(option.value);
-                    const isActive = index === activeIndex;
-                    return (_jsx(Menu.Item, { active: isActive, children: _jsxs("button", { ref: el => {
-                                if (optionRefs.current) {
-                                    optionRefs.current[index] = el;
-                                }
-                            }, type: "button", role: "menuitemcheckbox", "aria-checked": isSelected, tabIndex: isActive ? 0 : -1, disabled: disabled, onFocus: () => setActiveIndex(index), onClick: () => toggleValue(option.value), children: [_jsx("span", { style: {
-                                        pointerEvents: 'none',
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        color: !isSelected ? 'var(--color-border-strong)' : 'inherit',
-                                    }, children: isSelected ? _jsx(Check, {}) : _jsx(Square, {}) }), option.icon ? (_jsx("span", { style: {
-                                        pointerEvents: 'none',
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                    }, children: option.icon })) : null, _jsx("span", { children: option.label })] }) }, option.value));
-                }), filteredOptions.length === 0 ? _jsx(Menu.Item, { disabled: true, children: emptyMessage }) : null] }) }));
-}

package/dist/components/forms/radio-buttons/RadioButton.js

@@ -1,26 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from 'react';
-import styles from './RadioButtons.module.css';
-import { InputContainer } from '../input-container/InputContainer';
-export function RadioButton({ name, value, selectedValue, checked, onChange, disabled, label, variant = 'outlined', size = 'md', containerLabel, error, helpText, orientation = 'horizontal', labelWidth = '160px', fullWidth = false, required = false, noContainer = false, id, 'data-cy': dataCy, }) {
-    const generatedId = useId();
-    const controlId = id !== null && id !== void 0 ? id : `radio-${generatedId}`;
-    const isChecked = selectedValue !== undefined ? selectedValue === value : Boolean(checked);
-    const content = (_jsxs("span", { className: styles.container, "data-cy": dataCy, children: [_jsxs("span", { className: styles.controlWrap, children: [_jsx("input", { id: controlId, className: styles.input, type: "radio", name: name, value: value, checked: isChecked, disabled: disabled, required: required, "aria-invalid": Boolean(error) || undefined, onChange: e => {
-                            if (disabled)
-                                return;
-                            onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value, e);
-                        } }), _jsx("span", { className: [
-                            styles.radio,
-                            isChecked ? styles.checked : '',
-                            disabled ? styles.disabled : '',
-                            styles[variant],
-                            styles[size],
-                        ]
-                            .filter(Boolean)
-                            .join(' '), "aria-hidden": "true", children: _jsx("span", { className: styles.dot }) })] }), label && (_jsx("label", { className: styles.label, htmlFor: controlId, children: label }))] }));
-    if (noContainer || (!containerLabel && !error))
-        return content;
-    return (_jsx(InputContainer, { label: containerLabel, htmlFor: controlId, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: content }));
-}