@chayns-components/core 5.0.0-beta.49 → 5.0.0-beta.492

package/lib/components/radio-button/RadioButton.styles.d.ts

@@ -0,0 +1,287 @@
+/// <reference types="react" />
+/// <reference types="react" />
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
+type StyledRadioButtonProps = WithTheme<{
+    $isDisabled: boolean;
+}>;
+export declare const StyledRadioButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledRadioButtonProps>>;
+export declare const StyledRadioButtonWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledRadioButtonCheckBox: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}>>;
+type StyledRadioButtonPseudoCheckBoxProps = WithTheme<{
+    $isChecked: boolean;
+}>;
+export declare const StyledRadioButtonPseudoCheckBox: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledRadioButtonPseudoCheckBoxProps>>;
+type StyledRadioButtonCheckBoxMarkProps = WithTheme<{
+    $isHovered: boolean;
+    $isSelected: boolean;
+}>;
+export declare const StyledRadioButtonCheckBoxMark: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledRadioButtonCheckBoxMarkProps>>;
+export declare const StyledRadioButtonLabel: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}>>;
+export declare const StyledMotionRadioButtonChildren: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<{
+    slot?: string | undefined;
+    title?: string | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "list" | "none" | "both" | "inline" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, never>> & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export {};

package/lib/components/radio-button/RadioButton.styles.js

@@ -0,0 +1,105 @@
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+export const StyledRadioButton = styled.span`
+    display: flex;
+    flex-direction: column;
+
+    user-select: none;
+    width: fit-content;
+    position: relative;
+    cursor: ${_ref => {
+  let {
+    $isDisabled
+  } = _ref;
+  return $isDisabled ? 'default !important' : 'pointer';
+}};
+    opacity: ${_ref2 => {
+  let {
+    $isDisabled
+  } = _ref2;
+  return $isDisabled ? 0.5 : 1;
+}};
+`;
+export const StyledRadioButtonWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    position: relative;
+    gap: 5px;
+`;
+export const StyledRadioButtonCheckBox = styled.input`
+    opacity: 0;
+    height: 15px;
+    width: 15px;
+`;
+export const StyledRadioButtonPseudoCheckBox = styled.div`
+    background-color: ${_ref3 => {
+  let {
+    theme,
+    $isChecked
+  } = _ref3;
+  return $isChecked ? theme['secondary-408'] : theme['secondary-403'];
+}};
+    opacity: 1;
+    border: 1px solid
+        rgba(${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme['409-rgb'];
+}}, 0.5);
+    width: 15px;
+    height: 15px;
+    position: absolute;
+    border-radius: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer !important;
+`;
+export const StyledRadioButtonCheckBoxMark = styled.span`
+    cursor: pointer;
+    background-color: transparent;
+    position: absolute;
+    top: 1px;
+    left: 3.925px;
+    display: inline-block;
+    transform: rotate(35deg);
+    height: 9px;
+    width: 5px;
+    border-bottom: 2px solid white;
+    border-right: 2px solid white;
+    border-top: transparent;
+    border-left: transparent;
+    z-index: 2;
+
+    ${_ref5 => {
+  let {
+    $isHovered,
+    $isSelected
+  } = _ref5;
+  if ($isSelected) {
+    return css`
+                opacity: 1;
+            `;
+  }
+  if ($isHovered) {
+    return css`
+                opacity: 0.5;
+            `;
+  }
+  return css`
+            opacity: 0;
+        `;
+}}
+`;
+export const StyledRadioButtonLabel = styled.p`
+    color: ${_ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.text;
+}};
+`;
+export const StyledMotionRadioButtonChildren = styled(motion.div)`
+    margin-left: 18px;
+`;
+//# sourceMappingURL=RadioButton.styles.js.map

package/lib/components/radio-button/RadioButton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.styles.js","names":["motion","styled","css","StyledRadioButton","span","_ref","$isDisabled","_ref2","StyledRadioButtonWrapper","div","StyledRadioButtonCheckBox","input","StyledRadioButtonPseudoCheckBox","_ref3","theme","$isChecked","_ref4","StyledRadioButtonCheckBoxMark","_ref5","$isHovered","$isSelected","StyledRadioButtonLabel","p","_ref6","text","StyledMotionRadioButtonChildren"],"sources":["../../../src/components/radio-button/RadioButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledRadioButtonProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButton = styled.span<StyledRadioButtonProps>`\n    display: flex;\n    flex-direction: column;\n\n    user-select: none;\n    width: fit-content;\n    position: relative;\n    cursor: ${({ $isDisabled }: StyledRadioButtonProps) =>\n        $isDisabled ? 'default !important' : 'pointer'};\n    opacity: ${({ $isDisabled }: StyledRadioButtonProps) => ($isDisabled ? 0.5 : 1)};\n`;\n\nexport const StyledRadioButtonWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    position: relative;\n    gap: 5px;\n`;\n\ntype StyledRadioButtonCheckBoxProps = WithTheme<unknown>;\n\nexport const StyledRadioButtonCheckBox = styled.input<StyledRadioButtonCheckBoxProps>`\n    opacity: 0;\n    height: 15px;\n    width: 15px;\n`;\n\ntype StyledRadioButtonPseudoCheckBoxProps = WithTheme<{ $isChecked: boolean }>;\n\nexport const StyledRadioButtonPseudoCheckBox = styled.div<StyledRadioButtonPseudoCheckBoxProps>`\n    background-color: ${({ theme, $isChecked }: StyledRadioButtonPseudoCheckBoxProps) =>\n        $isChecked ? theme['secondary-408'] : theme['secondary-403']};\n    opacity: 1;\n    border: 1px solid\n        rgba(${({ theme }: StyledRadioButtonPseudoCheckBoxProps) => theme['409-rgb']}, 0.5);\n    width: 15px;\n    height: 15px;\n    position: absolute;\n    border-radius: 100%;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: pointer !important;\n`;\n\ntype StyledRadioButtonCheckBoxMarkProps = WithTheme<{\n    $isHovered: boolean;\n    $isSelected: boolean;\n}>;\n\nexport const StyledRadioButtonCheckBoxMark = styled.span<StyledRadioButtonCheckBoxMarkProps>`\n    cursor: pointer;\n    background-color: transparent;\n    position: absolute;\n    top: 1px;\n    left: 3.925px;\n    display: inline-block;\n    transform: rotate(35deg);\n    height: 9px;\n    width: 5px;\n    border-bottom: 2px solid white;\n    border-right: 2px solid white;\n    border-top: transparent;\n    border-left: transparent;\n    z-index: 2;\n\n    ${({ $isHovered, $isSelected }) => {\n        if ($isSelected) {\n            return css`\n                opacity: 1;\n            `;\n        }\n\n        if ($isHovered) {\n            return css`\n                opacity: 0.5;\n            `;\n        }\n\n        return css`\n            opacity: 0;\n        `;\n    }}\n`;\n\ntype StyledRadioButtonLabelProps = WithTheme<unknown>;\n\nexport const StyledRadioButtonLabel = styled.p<StyledRadioButtonLabelProps>`\n    color: ${({ theme }: StyledRadioButtonLabelProps) => theme.text};\n`;\n\nexport const StyledMotionRadioButtonChildren = styled(motion.div)`\n    margin-left: 18px;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAK/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,IAA6B;AACrE;AACA;AACA;AACA;AACA;AACA;AACA,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAAoC,CAAC,GAAAD,IAAA;EAAA,OAC9CC,WAAW,GAAG,oBAAoB,GAAG,SAAS;AAAA,CAAC;AACvD,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAoC,CAAC,GAAAC,KAAA;EAAA,OAAMD,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AACpF,CAAC;AAED,OAAO,MAAME,wBAAwB,GAAGP,MAAM,CAACQ,GAAI;AACnD;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,yBAAyB,GAAGT,MAAM,CAACU,KAAsC;AACtF;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,+BAA+B,GAAGX,MAAM,CAACQ,GAA0C;AAChG,wBAAwBI,KAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAiD,CAAC,GAAAF,KAAA;EAAA,OAC5EE,UAAU,GAAGD,KAAK,CAAC,eAAe,CAAC,GAAGA,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AACrE;AACA;AACA,eAAeE,KAAA;EAAA,IAAC;IAAEF;EAA4C,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AACrF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMG,6BAA6B,GAAGhB,MAAM,CAACG,IAAyC;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMc,KAAA,IAAiC;EAAA,IAAhC;IAAEC,UAAU;IAAEC;EAAY,CAAC,GAAAF,KAAA;EAC1B,IAAIE,WAAW,EAAE;IACb,OAAOlB,GAAI;AACvB;AACA,aAAa;EACL;EAEA,IAAIiB,UAAU,EAAE;IACZ,OAAOjB,GAAI;AACvB;AACA,aAAa;EACL;EAEA,OAAOA,GAAI;AACnB;AACA,SAAS;AACL,CAAE;AACN,CAAC;AAID,OAAO,MAAMmB,sBAAsB,GAAGpB,MAAM,CAACqB,CAA+B;AAC5E,aAAaC,KAAA;EAAA,IAAC;IAAET;EAAmC,CAAC,GAAAS,KAAA;EAAA,OAAKT,KAAK,CAACU,IAAI;AAAA,CAAC;AACpE,CAAC;AAED,OAAO,MAAMC,+BAA+B,GAAGxB,MAAM,CAACD,MAAM,CAACS,GAAG,CAAE;AAClE;AACA,CAAC"}

package/lib/components/radio-button/radio-button-group/RadioButtonGroup.d.ts

@@ -0,0 +1,17 @@
+import React, { Dispatch, FC, ReactNode, SetStateAction } from 'react';
+type IUpdateSelectedRadioButtonId = (id: string) => void;
+interface IRadioButtonGroupContext {
+    selectedRadioButtonId: string | undefined;
+    setSelectedRadioButtonId?: Dispatch<SetStateAction<string | undefined>>;
+    updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;
+}
+export declare const RadioButtonGroupContext: React.Context<IRadioButtonGroupContext>;
+export type RadioButtonGroupProps = {
+    /**
+     * The RadioButtons that should be grouped. Radio buttons with the same group are
+     * automatically unchecked when an `RadioButton` of the group is checked.
+     */
+    children: ReactNode;
+};
+declare const RadioButtonGroup: FC<RadioButtonGroupProps>;
+export default RadioButtonGroup;

package/lib/components/radio-button/radio-button-group/RadioButtonGroup.js

@@ -0,0 +1,38 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+export const RadioButtonGroupContext = /*#__PURE__*/React.createContext({
+  selectedRadioButtonId: undefined,
+  setSelectedRadioButtonId: undefined,
+  updateSelectedRadioButtonId: undefined
+});
+RadioButtonGroupContext.displayName = 'RadioButtonGroupContext';
+const RadioButtonGroup = _ref => {
+  let {
+    children
+  } = _ref;
+  const [selectedRadioButtonId, setSelectedRadioButtonId] = useState(undefined);
+  const isInitialRenderRef = useRef(true);
+  const updateSelectedRadioButtonId = useCallback(id => {
+    setSelectedRadioButtonId(currentSelectedRadioButtonId => {
+      if (currentSelectedRadioButtonId === id) {
+        return undefined;
+      }
+      return id;
+    });
+  }, []);
+  useEffect(() => {
+    if (isInitialRenderRef.current) {
+      isInitialRenderRef.current = false;
+    }
+  }, [selectedRadioButtonId]);
+  const providerValue = useMemo(() => ({
+    selectedRadioButtonId,
+    setSelectedRadioButtonId,
+    updateSelectedRadioButtonId
+  }), [selectedRadioButtonId, updateSelectedRadioButtonId]);
+  return /*#__PURE__*/React.createElement(RadioButtonGroupContext.Provider, {
+    value: providerValue
+  }, children);
+};
+RadioButtonGroup.displayName = 'RadioButtonGroup';
+export default RadioButtonGroup;
+//# sourceMappingURL=RadioButtonGroup.js.map

package/lib/components/radio-button/radio-button-group/RadioButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonGroup.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","RadioButtonGroupContext","createContext","selectedRadioButtonId","undefined","setSelectedRadioButtonId","updateSelectedRadioButtonId","displayName","RadioButtonGroup","_ref","children","isInitialRenderRef","id","currentSelectedRadioButtonId","current","providerValue","createElement","Provider","value"],"sources":["../../../../src/components/radio-button/radio-button-group/RadioButtonGroup.tsx"],"sourcesContent":["import React, {\n    Dispatch,\n    FC,\n    ReactNode,\n    SetStateAction,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\n\ntype IUpdateSelectedRadioButtonId = (id: string) => void;\n\ninterface IRadioButtonGroupContext {\n    selectedRadioButtonId: string | undefined;\n    setSelectedRadioButtonId?: Dispatch<SetStateAction<string | undefined>>;\n    updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;\n}\n\nexport const RadioButtonGroupContext = React.createContext<IRadioButtonGroupContext>({\n    selectedRadioButtonId: undefined,\n    setSelectedRadioButtonId: undefined,\n    updateSelectedRadioButtonId: undefined,\n});\n\nRadioButtonGroupContext.displayName = 'RadioButtonGroupContext';\n\nexport type RadioButtonGroupProps = {\n    /**\n     * The RadioButtons that should be grouped. Radio buttons with the same group are\n     * automatically unchecked when an `RadioButton` of the group is checked.\n     */\n    children: ReactNode;\n};\n\nconst RadioButtonGroup: FC<RadioButtonGroupProps> = ({ children }) => {\n    const [selectedRadioButtonId, setSelectedRadioButtonId] =\n        useState<IRadioButtonGroupContext['selectedRadioButtonId']>(undefined);\n\n    const isInitialRenderRef = useRef(true);\n\n    const updateSelectedRadioButtonId = useCallback<IUpdateSelectedRadioButtonId>((id) => {\n        setSelectedRadioButtonId((currentSelectedRadioButtonId) => {\n            if (currentSelectedRadioButtonId === id) {\n                return undefined;\n            }\n\n            return id;\n        });\n    }, []);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        }\n    }, [selectedRadioButtonId]);\n\n    const providerValue = useMemo<IRadioButtonGroupContext>(\n        () => ({\n            selectedRadioButtonId,\n            setSelectedRadioButtonId,\n            updateSelectedRadioButtonId,\n        }),\n        [selectedRadioButtonId, updateSelectedRadioButtonId]\n    );\n\n    return (\n        <RadioButtonGroupContext.Provider value={providerValue}>\n            {children}\n        </RadioButtonGroupContext.Provider>\n    );\n};\n\nRadioButtonGroup.displayName = 'RadioButtonGroup';\n\nexport default RadioButtonGroup;\n"],"mappings":"AAAA,OAAOA,KAAK,IAKRC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AAUd,OAAO,MAAMC,uBAAuB,gBAAGN,KAAK,CAACO,aAAa,CAA2B;EACjFC,qBAAqB,EAAEC,SAAS;EAChCC,wBAAwB,EAAED,SAAS;EACnCE,2BAA2B,EAAEF;AACjC,CAAC,CAAC;AAEFH,uBAAuB,CAACM,WAAW,GAAG,yBAAyB;AAU/D,MAAMC,gBAA2C,GAAGC,IAAA,IAAkB;EAAA,IAAjB;IAAEC;EAAS,CAAC,GAAAD,IAAA;EAC7D,MAAM,CAACN,qBAAqB,EAAEE,wBAAwB,CAAC,GACnDL,QAAQ,CAAoDI,SAAS,CAAC;EAE1E,MAAMO,kBAAkB,GAAGZ,MAAM,CAAC,IAAI,CAAC;EAEvC,MAAMO,2BAA2B,GAAGV,WAAW,CAAgCgB,EAAE,IAAK;IAClFP,wBAAwB,CAAEQ,4BAA4B,IAAK;MACvD,IAAIA,4BAA4B,KAAKD,EAAE,EAAE;QACrC,OAAOR,SAAS;MACpB;MAEA,OAAOQ,EAAE;IACb,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAENf,SAAS,CAAC,MAAM;IACZ,IAAIc,kBAAkB,CAACG,OAAO,EAAE;MAC5BH,kBAAkB,CAACG,OAAO,GAAG,KAAK;IACtC;EACJ,CAAC,EAAE,CAACX,qBAAqB,CAAC,CAAC;EAE3B,MAAMY,aAAa,GAAGjB,OAAO,CACzB,OAAO;IACHK,qBAAqB;IACrBE,wBAAwB;IACxBC;EACJ,CAAC,CAAC,EACF,CAACH,qBAAqB,EAAEG,2BAA2B,CACvD,CAAC;EAED,oBACIX,KAAA,CAAAqB,aAAA,CAACf,uBAAuB,CAACgB,QAAQ;IAACC,KAAK,EAAEH;EAAc,GAClDL,QAC6B,CAAC;AAE3C,CAAC;AAEDF,gBAAgB,CAACD,WAAW,GAAG,kBAAkB;AAEjD,eAAeC,gBAAgB"}

package/lib/components/scroll-view/ScrollView.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties, FC, ReactNode } from 'react';
+export type ScrollViewProps = {
+    /**
+     * The elements that should be shown inside the scrollview
+     */
+    children: ReactNode;
+    /**
+     * The maximum height of the scroll view.
+     */
+    maxHeight: CSSProperties['height'];
+};
+declare const ScrollView: FC<ScrollViewProps>;
+export default ScrollView;

package/lib/components/scroll-view/ScrollView.js

@@ -0,0 +1,19 @@
+import { getDevice } from 'chayns-api';
+import React, { useMemo } from 'react';
+import { StyledScrollView } from './ScrollView.styles';
+const ScrollView = _ref => {
+  let {
+    maxHeight = '300px',
+    children
+  } = _ref;
+  const {
+    browser
+  } = getDevice();
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledScrollView, {
+    $browser: browser?.name,
+    $maxHeight: maxHeight
+  }, children), [browser?.name, children, maxHeight]);
+};
+ScrollView.displayName = 'ScrollView';
+export default ScrollView;
+//# sourceMappingURL=ScrollView.js.map

package/lib/components/scroll-view/ScrollView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollView.js","names":["getDevice","React","useMemo","StyledScrollView","ScrollView","_ref","maxHeight","children","browser","createElement","$browser","name","$maxHeight","displayName"],"sources":["../../../src/components/scroll-view/ScrollView.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { CSSProperties, FC, ReactNode, useMemo } from 'react';\nimport { StyledScrollView } from './ScrollView.styles';\n\nexport type ScrollViewProps = {\n    /**\n     * The elements that should be shown inside the scrollview\n     */\n    children: ReactNode;\n    /**\n     * The maximum height of the scroll view.\n     */\n    maxHeight: CSSProperties['height'];\n};\n\nconst ScrollView: FC<ScrollViewProps> = ({ maxHeight = '300px', children }) => {\n    const { browser } = getDevice();\n\n    return useMemo(\n        () => (\n            <StyledScrollView $browser={browser?.name} $maxHeight={maxHeight}>\n                {children}\n            </StyledScrollView>\n        ),\n        [browser?.name, children, maxHeight],\n    );\n};\n\nScrollView.displayName = 'ScrollView';\n\nexport default ScrollView;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,OAAOC,KAAK,IAAkCC,OAAO,QAAQ,OAAO;AACpE,SAASC,gBAAgB,QAAQ,qBAAqB;AAatD,MAAMC,UAA+B,GAAGC,IAAA,IAAuC;EAAA,IAAtC;IAAEC,SAAS,GAAG,OAAO;IAAEC;EAAS,CAAC,GAAAF,IAAA;EACtE,MAAM;IAAEG;EAAQ,CAAC,GAAGR,SAAS,CAAC,CAAC;EAE/B,OAAOE,OAAO,CACV,mBACID,KAAA,CAAAQ,aAAA,CAACN,gBAAgB;IAACO,QAAQ,EAAEF,OAAO,EAAEG,IAAK;IAACC,UAAU,EAAEN;EAAU,GAC5DC,QACa,CACrB,EACD,CAACC,OAAO,EAAEG,IAAI,EAAEJ,QAAQ,EAAED,SAAS,CACvC,CAAC;AACL,CAAC;AAEDF,UAAU,CAACS,WAAW,GAAG,YAAY;AAErC,eAAeT,UAAU"}

package/lib/components/scroll-view/ScrollView.styles.d.ts

@@ -0,0 +1,9 @@
+import type { Browser } from 'detect-browser';
+import type { CSSProperties } from 'react';
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
+type StyledScrollViewProps = WithTheme<{
+    $maxHeight: CSSProperties['height'];
+    $browser: Browser | 'bot' | null | undefined;
+}>;
+export declare const StyledScrollView: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledScrollViewProps>>;
+export {};

package/lib/components/scroll-view/ScrollView.styles.js

@@ -0,0 +1,41 @@
+import styled, { css } from 'styled-components';
+export const StyledScrollView = styled.div`
+    max-height: ${_ref => {
+  let {
+    $maxHeight
+  } = _ref;
+  return $maxHeight;
+}};
+    overflow-y: scroll;
+
+    // Styles for custom scrollbar
+    ${_ref2 => {
+  let {
+    $browser,
+    theme
+  } = _ref2;
+  return $browser === 'firefox' ? css`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : css`
+                  &::-webkit-scrollbar {
+                      width: 5px;
+                  }
+
+                  &::-webkit-scrollbar-track {
+                      background-color: transparent;
+                  }
+
+                  &::-webkit-scrollbar-button {
+                      background-color: transparent;
+                      height: 5px;
+                  }
+
+                  &::-webkit-scrollbar-thumb {
+                      background-color: rgba(${theme['text-rgb']}, 0.15);
+                      border-radius: 20px;
+                  }
+              `;
+}}
+`;
+//# sourceMappingURL=ScrollView.styles.js.map

package/lib/components/scroll-view/ScrollView.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollView.styles.js","names":["styled","css","StyledScrollView","div","_ref","$maxHeight","_ref2","$browser","theme"],"sources":["../../../src/components/scroll-view/ScrollView.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledScrollViewProps = WithTheme<{\n    $maxHeight: CSSProperties['height'];\n    $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledScrollView = styled.div<StyledScrollViewProps>`\n    max-height: ${({ $maxHeight }) => $maxHeight};\n    overflow-y: scroll;\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledScrollViewProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,gBAAgB,GAAGF,MAAM,CAACG,GAA2B;AAClE,kBAAkBC,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OAAKC,UAAU;AAAA,CAAC;AACjD;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAA6B,CAAC,GAAAF,KAAA;EAAA,OACzCC,QAAQ,KAAK,SAAS,GAChBN,GAAI;AAClB,0CAA0CO,KAAK,CAAC,UAAU,CAAE;AAC5D;AACA,eAAe,GACDP,GAAI;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CO,KAAK,CAAC,UAAU,CAAE;AACjE;AACA;AACA,eAAe;AAAA,CAAC;AAChB,CAAC"}

package/lib/components/search-box/SearchBox.d.ts

@@ -0,0 +1,41 @@
+import { ChangeEventHandler, FC, FocusEventHandler } from 'react';
+import type { ISearchBoxItem } from '../../types/searchBox';
+export type SearchBoxRef = {
+    clear: VoidFunction;
+};
+export type SearchBoxProps = {
+    /**
+     * A list of items that can be searched.
+     */
+    list: ISearchBoxItem[];
+    /**
+     * The placeholder that should be displayed.
+     */
+    placeholder?: string;
+    /**
+     * Function to be executed when the input lost focus.
+     */
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    /**
+     * Function to be executed when the input is changed.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Function to be executed when an item is selected.
+     */
+    onSelect?: (item: ISearchBoxItem) => void;
+    /**
+     * Control the selected item. If you use this prop, make sure to update it when the user selects an item.
+     */
+    selectedId?: string;
+    /**
+     * Whether the full list of items should be displayed if the input is empty.
+     */
+    shouldShowContentOnEmptyInput?: boolean;
+    /**
+     * If true, the images of the items are displayed in a round shape.
+     */
+    shouldShowRoundImage?: boolean;
+};
+declare const SearchBox: FC<SearchBoxProps>;
+export default SearchBox;