@frank-auth/react/dist/cjs/components/ui/select/select.cjs.map

Flexible and customizable React UI components for Frank Authentication

{"version":3,"file":"select.cjs","sources":["../../../../../src/components/ui/select/select.tsx"],"sourcesContent":["import { useTheme } from \"@/theme/context\";\nimport { type StyledProps, getColorVariant } from \"@/theme/styled\";\nimport type { Theme } from \"@/theme/theme\";\nimport { css } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport React, { useState, useRef, useEffect, useImperativeHandle } from \"react\";\n\nexport interface SelectOption {\n\tvalue: string | number;\n\tlabel: string;\n\tisDisabled?: boolean;\n\tstartContent?: React.ReactNode;\n\tendContent?: React.ReactNode;\n\tdescription?: string;\n}\n\nexport interface SelectProps\n\textends Omit<\n\t\tReact.SelectHTMLAttributes<HTMLSelectElement>,\n\t\t\"size\" | \"children\"\n\t> {\n\t/** Select variant */\n\tvariant?: \"flat\" | \"bordered\" | \"underlined\" | \"faded\";\n\t/** Select color theme */\n\tcolor?: \"primary\" | \"secondary\" | \"success\" | \"warning\" | \"danger\";\n\t/** Select size */\n\tsize?: \"sm\" | \"md\" | \"lg\";\n\t/** Select radius */\n\tradius?: \"none\" | \"sm\" | \"md\" | \"lg\" | \"full\";\n\t/** Label text */\n\tlabel?: string;\n\t/** Placeholder text */\n\tplaceholder?: string;\n\t/** Description text */\n\tdescription?: string;\n\t/** Error message */\n\terrorMessage?: string;\n\t/** Invalid state */\n\tisInvalid?: boolean;\n\t/** Disabled state */\n\tisDisabled?: boolean;\n\t/** Required field */\n\tisRequired?: boolean;\n\t/** Full width select */\n\tfullWidth?: boolean;\n\t/** Multiple selection */\n\tisMultiple?: boolean;\n\t/** Options array */\n\toptions?: SelectOption[];\n\t/** Selected value(s) */\n\tselectedKeys?: Set<string | number> | string | number;\n\t/** Default selected value(s) */\n\tdefaultSelectedKeys?: Set<string | number> | string | number;\n\t/** Selection change handler */\n\tonSelectionChange?: (keys: Set<string | number>) => void;\n\t/** Start content (icon) */\n\tstartContent?: React.ReactNode;\n\t/** End content (icon) */\n\tendContent?: React.ReactNode;\n\t/** Custom class name */\n\tclassName?: string;\n\t/** Custom styles */\n\tcss?: any;\n\t/** Label placement */\n\tlabelPlacement?: \"inside\" | \"outside\" | \"outside-left\";\n}\n\ntype StyledSelectProps = StyledProps<SelectProps>;\n\nconst getSelectVariantStyles = (\n\tprops: StyledSelectProps & { isFocused: boolean; isOpen: boolean },\n) => {\n\tconst {\n\t\ttheme,\n\t\tvariant = \"flat\",\n\t\tcolor = \"primary\",\n\t\tisInvalid,\n\t\tisFocused,\n\t\tisDisabled,\n\t\tisOpen,\n\t} = props;\n\tconst baseColor = getColorVariant(theme, color, 500);\n\tconst errorColor = theme.colors.danger[500];\n\n\tconst focusColor = isInvalid ? errorColor : baseColor;\n\n\tswitch (variant) {\n\t\tcase \"flat\":\n\t\t\treturn css`\n        background-color: ${theme.colors.background.secondary};\n        border: 2px solid transparent;\n\n        &:hover:not(:disabled) {\n          background-color: ${theme.colors.background.tertiary};\n        }\n\n        ${\n\t\t\t\t\t(isFocused || isOpen) &&\n\t\t\t\t\tcss`\n          background-color: ${theme.colors.background.primary};\n          border-color: ${focusColor};\n        `\n\t\t\t\t}\n\n        ${\n\t\t\t\t\tisInvalid &&\n\t\t\t\t\tcss`\n          border-color: ${errorColor};\n        `\n\t\t\t\t}\n\n        ${\n\t\t\t\t\tisDisabled &&\n\t\t\t\t\tcss`\n          opacity: 0.5;\n          cursor: not-allowed;\n        `\n\t\t\t\t}\n      `;\n\n\t\tcase \"bordered\":\n\t\t\treturn css`\n        background-color: ${theme.colors.background.primary};\n        border: 2px solid ${theme.colors.border.primary};\n\n        &:hover:not(:disabled) {\n          border-color: ${theme.colors.border.secondary};\n        }\n\n        ${\n\t\t\t\t\t(isFocused || isOpen) &&\n\t\t\t\t\tcss`\n          border-color: ${focusColor};\n        `\n\t\t\t\t}\n\n        ${\n\t\t\t\t\tisInvalid &&\n\t\t\t\t\tcss`\n          border-color: ${errorColor};\n        `\n\t\t\t\t}\n\n        ${\n\t\t\t\t\tisDisabled &&\n\t\t\t\t\tcss`\n          opacity: 0.5;\n          cursor: not-allowed;\n          background-color: ${theme.colors.background.secondary};\n        `\n\t\t\t\t}\n      `;\n\n\t\tcase \"underlined\":\n\t\t\treturn css`\n        background-color: transparent;\n        border: none;\n        border-bottom: 2px solid ${theme.colors.border.primary};\n        border-radius: 0;\n\n        &:hover:not(:disabled) {\n          border-bottom-color: ${theme.colors.border.secondary};\n        }\n\n        ${\n\t\t\t\t\t(isFocused || isOpen) &&\n\t\t\t\t\tcss`\n          border-bottom-color: ${focusColor};\n        `\n\t\t\t\t}\n\n        ${\n\t\t\t\t\tisInvalid &&\n\t\t\t\t\tcss`\n          border-bottom-color: ${errorColor};\n        `\n\t\t\t\t}\n\n        ${\n\t\t\t\t\tisDisabled &&\n\t\t\t\t\tcss`\n          opacity: 0.5;\n          cursor: not-allowed;\n        `\n\t\t\t\t}\n      `;\n\n\t\tcase \"faded\":\n\t\t\treturn css`\n        background-color: ${theme.colors.neutral[100]};\n        border: 2px solid ${theme.colors.neutral[200]};\n\n        &:hover:not(:disabled) {\n          background-color: ${theme.colors.neutral[50]};\n          border-color: ${theme.colors.neutral[300]};\n        }\n\n        ${\n\t\t\t\t\t(isFocused || isOpen) &&\n\t\t\t\t\tcss`\n          background-color: ${theme.colors.background.primary};\n          border-color: ${focusColor};\n        `\n\t\t\t\t}\n\n        ${\n\t\t\t\t\tisInvalid &&\n\t\t\t\t\tcss`\n          border-color: ${errorColor};\n        `\n\t\t\t\t}\n\n        ${\n\t\t\t\t\tisDisabled &&\n\t\t\t\t\tcss`\n          opacity: 0.5;\n          cursor: not-allowed;\n        `\n\t\t\t\t}\n      `;\n\n\t\tdefault:\n\t\t\treturn css``;\n\t}\n};\n\nconst getSelectSizeStyles = (props: StyledSelectProps) => {\n\tconst { theme, size = \"md\" } = props;\n\n\tswitch (size) {\n\t\tcase \"sm\":\n\t\t\treturn css`\n        height: ${theme.spacing[8]};\n        padding: 0 ${theme.spacing[3]};\n        font-size: ${theme.fontSizes.sm};\n      `;\n\t\tcase \"md\":\n\t\t\treturn css`\n        height: ${theme.spacing[10]};\n        padding: 0 ${theme.spacing[4]};\n        font-size: ${theme.fontSizes.base};\n      `;\n\t\tcase \"lg\":\n\t\t\treturn css`\n        height: ${theme.spacing[12]};\n        padding: 0 ${theme.spacing[6]};\n        font-size: ${theme.fontSizes.lg};\n      `;\n\t\tdefault:\n\t\t\treturn css``;\n\t}\n};\n\nconst getSelectRadiusStyles = (props: StyledSelectProps) => {\n\tconst { theme, radius = \"md\", variant } = props;\n\n\tif (variant === \"underlined\") return css``;\n\n\tswitch (radius) {\n\t\tcase \"none\":\n\t\t\treturn css`border-radius: ${theme.borderRadius.none};`;\n\t\tcase \"sm\":\n\t\t\treturn css`border-radius: ${theme.borderRadius.sm};`;\n\t\tcase \"md\":\n\t\t\treturn css`border-radius: ${theme.borderRadius.md};`;\n\t\tcase \"lg\":\n\t\t\treturn css`border-radius: ${theme.borderRadius.lg};`;\n\t\tcase \"full\":\n\t\t\treturn css`border-radius: ${theme.borderRadius.full};`;\n\t\tdefault:\n\t\t\treturn css`border-radius: ${theme.borderRadius.md};`;\n\t}\n};\n\nconst SelectContainer = styled.div<StyledSelectProps & { fullWidth?: boolean }>`\n  display: flex;\n  flex-direction: column;\n  gap: ${(props) => props.theme.spacing[2]};\n  width: ${(props) => (props.fullWidth ? \"100%\" : \"auto\")};\n  position: relative;\n`;\n\nconst SelectWrapper = styled.div<\n\tStyledSelectProps & { isFocused: boolean; isOpen: boolean }\n>`\n  position: relative;\n  display: flex;\n  align-items: center;\n  transition: all ${(props) => props.theme.transitions.normal};\n  width: ${(props) => (props.fullWidth ? \"100%\" : \"auto\")};\n  cursor: ${(props) => (props.isDisabled ? \"not-allowed\" : \"pointer\")};\n\n  ${getSelectVariantStyles}\n  ${getSelectSizeStyles}\n  ${getSelectRadiusStyles}\n\n  ${(props) => props.css}\n`;\n\nconst HiddenSelect = styled.select`\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n  width: 100%;\n  height: 100%;\n`;\n\nconst SelectTrigger = styled.div<StyledSelectProps>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  color: ${(props) => props.theme.colors.text.primary};\n  cursor: inherit;\n`;\n\nconst SelectValue = styled.div<StyledSelectProps & { hasPlaceholder: boolean }>`\n  flex: 1;\n  text-align: left;\n  color: ${(props) =>\n\t\tprops.hasPlaceholder\n\t\t\t? props.theme.colors.text.tertiary\n\t\t\t: props.theme.colors.text.primary};\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nconst ChevronIcon = styled.div<StyledSelectProps & { isOpen: boolean }>`\n  display: flex;\n  align-items: center;\n  margin-left: ${(props) => props.theme.spacing[2]};\n  transform: ${(props) => (props.isOpen ? \"rotate(180deg)\" : \"rotate(0deg)\")};\n  transition: transform ${(props) => props.theme.transitions.fast};\n  color: ${(props) => props.theme.colors.text.secondary};\n`;\n\nconst Dropdown = styled.div<\n\tStyledSelectProps & { isOpen: boolean; size?: \"sm\" | \"md\" | \"lg\" }\n>`\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: ${(props) => props.theme.zIndex.dropdown};\n  background-color: ${(props) => props.theme.colors.background.primary};\n  border: 1px solid ${(props) => props.theme.colors.border.primary};\n  border-radius: ${(props) => props.theme.borderRadius.md};\n  box-shadow: ${(props) => props.theme.shadows.lg};\n  max-height: 200px;\n  overflow-y: auto;\n  margin-top: ${(props) => props.theme.spacing[1]};\n  display: ${(props) => (props.isOpen ? \"block\" : \"none\")};\n`;\n\nconst Option = styled.div<\n\tStyledSelectProps & {\n\t\tisSelected: boolean;\n\t\tisDisabled?: boolean;\n\t\tsize?: \"sm\" | \"md\" | \"lg\";\n\t}\n>`\n  display: flex;\n  align-items: center;\n  gap: ${(props) => props.theme.spacing[2]};\n  padding: ${(props) => {\n\t\tswitch (props.size) {\n\t\t\tcase \"sm\":\n\t\t\t\treturn `${props.theme.spacing[2]} ${props.theme.spacing[3]}`;\n\t\t\tcase \"lg\":\n\t\t\t\treturn `${props.theme.spacing[4]} ${props.theme.spacing[6]}`;\n\t\t\tdefault:\n\t\t\t\treturn `${props.theme.spacing[3]} ${props.theme.spacing[4]}`;\n\t\t}\n\t}};\n  cursor: ${(props) => (props.isDisabled ? \"not-allowed\" : \"pointer\")};\n  transition: background-color ${(props) => props.theme.transitions.fast};\n  font-size: ${(props) => {\n\t\tswitch (props.size) {\n\t\t\tcase \"sm\":\n\t\t\t\treturn props.theme.fontSizes.sm;\n\t\t\tcase \"lg\":\n\t\t\t\treturn props.theme.fontSizes.lg;\n\t\t\tdefault:\n\t\t\t\treturn props.theme.fontSizes.base;\n\t\t}\n\t}};\n\n  ${(props) =>\n\t\tprops.isSelected &&\n\t\tcss`\n    background-color: ${props.theme.colors.primary[50]};\n    color: ${props.theme.colors.primary[700]};\n  `}\n\n  ${(props) =>\n\t\tprops.isDisabled &&\n\t\tcss`\n    opacity: 0.5;\n    pointer-events: none;\n  `}\n\n  &:hover:not(:disabled) {\n    background-color: ${(props) =>\n\t\t\tprops.isSelected\n\t\t\t\t? props.theme.colors.primary[100]\n\t\t\t\t: props.theme.colors.background.secondary};\n  }\n`;\n\nconst OptionContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n`;\n\nconst OptionLabel = styled.div<StyledSelectProps>`\n  font-weight: ${(props) => props.theme.fontWeights.medium};\n`;\n\nconst OptionDescription = styled.div<StyledSelectProps>`\n  font-size: ${(props) => props.theme.fontSizes.sm};\n  color: ${(props) => props.theme.colors.text.secondary};\n  margin-top: ${(props) => props.theme.spacing[1]};\n`;\n\nconst Label = styled.label<\n\tStyledSelectProps & {\n\t\tisRequired?: boolean;\n\t\tsize?: \"sm\" | \"md\" | \"lg\";\n\t}\n>`\n  color: ${(props) => props.theme.colors.text.primary};\n  font-size: ${(props) => {\n\t\tswitch (props.size) {\n\t\t\tcase \"sm\":\n\t\t\t\treturn props.theme.fontSizes.sm;\n\t\t\tcase \"lg\":\n\t\t\t\treturn props.theme.fontSizes.lg;\n\t\t\tdefault:\n\t\t\t\treturn props.theme.fontSizes.base;\n\t\t}\n\t}};\n  font-weight: ${(props) => props.theme.fontWeights.medium};\n\n  ${(props) =>\n\t\tprops.isRequired &&\n\t\tcss`\n    &::after {\n      content: ' *';\n      color: ${props.theme.colors.danger[500]};\n    }\n  `}\n`;\n\nconst HelperText = styled.div<StyledSelectProps & { isError?: boolean }>`\n  font-size: ${(props) => props.theme.fontSizes.sm};\n  color: ${(props) =>\n\t\tprops.isError\n\t\t\t? props.theme.colors.danger[500]\n\t\t\t: props.theme.colors.text.secondary};\n`;\n\nconst ContentWrapper = styled.div<{ position: \"start\" | \"end\"; theme: Theme }>`\n  display: flex;\n  align-items: center;\n  color: ${(props) => props.theme.colors.text.tertiary};\n  ${(props) =>\n\t\tprops.position === \"start\"\n\t\t\t? css`margin-right: ${props.theme.spacing[2]};`\n\t\t\t: css`margin-left: ${props.theme.spacing[2]};`}\n`;\n\nconst ChevronDownIcon = () => (\n\t// biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>\n\t<svg\n\t\twidth=\"16\"\n\t\theight=\"16\"\n\t\tviewBox=\"0 0 24 24\"\n\t\tfill=\"none\"\n\t\tstroke=\"currentColor\"\n\t\tstrokeWidth=\"2\"\n\t>\n\t\t<polyline points=\"6,9 12,15 18,9\" />\n\t</svg>\n);\n\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n\t(\n\t\t{\n\t\t\tvariant = \"flat\",\n\t\t\tcolor = \"primary\",\n\t\t\tsize = \"md\",\n\t\t\tradius = \"md\",\n\t\t\tlabel,\n\t\t\tplaceholder = \"Select an option\",\n\t\t\tdescription,\n\t\t\terrorMessage,\n\t\t\tisInvalid = false,\n\t\t\tisDisabled = false,\n\t\t\tisRequired = false,\n\t\t\tfullWidth = false,\n\t\t\tisMultiple = false,\n\t\t\toptions = [],\n\t\t\tselectedKeys,\n\t\t\tdefaultSelectedKeys,\n\t\t\tonSelectionChange,\n\t\t\tstartContent,\n\t\t\tendContent,\n\t\t\tclassName,\n\t\t\tcss,\n\t\t\tlabelPlacement = \"outside\",\n\t\t\tonChange,\n\t\t\tonFocus,\n\t\t\tonBlur,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst { theme } = useTheme();\n\t\tconst [isFocused, setIsFocused] = useState(false);\n\t\tconst [isOpen, setIsOpen] = useState(false);\n\t\tconst [internalSelected, setInternalSelected] = useState<\n\t\t\tSet<string | number>\n\t\t>(\n\t\t\tnew Set(\n\t\t\t\tdefaultSelectedKeys\n\t\t\t\t\t? typeof defaultSelectedKeys === \"string\" ||\n\t\t\t\t\t\ttypeof defaultSelectedKeys === \"number\"\n\t\t\t\t\t\t? [defaultSelectedKeys]\n\t\t\t\t\t\t: Array.from(defaultSelectedKeys)\n\t\t\t\t\t: [],\n\t\t\t),\n\t\t);\n\n\t\tconst selectRef = useRef<HTMLSelectElement>(null);\n\t\tconst dropdownRef = useRef<HTMLDivElement>(null);\n\n\t\tuseImperativeHandle(ref, () => selectRef.current!);\n\n\t\tconst currentSelected =\n\t\t\tselectedKeys !== undefined\n\t\t\t\t? typeof selectedKeys === \"string\" || typeof selectedKeys === \"number\"\n\t\t\t\t\t? new Set([selectedKeys])\n\t\t\t\t\t: selectedKeys\n\t\t\t\t: internalSelected;\n\n\t\tconst handleToggle = () => {\n\t\t\tif (!isDisabled) {\n\t\t\t\tsetIsOpen(!isOpen);\n\t\t\t}\n\t\t};\n\n\t\tconst handleOptionClick = (optionValue: string | number) => {\n\t\t\tlet newSelected: Set<string | number>;\n\n\t\t\tif (isMultiple) {\n\t\t\t\tnewSelected = new Set(currentSelected);\n\t\t\t\tif (newSelected.has(optionValue)) {\n\t\t\t\t\tnewSelected.delete(optionValue);\n\t\t\t\t} else {\n\t\t\t\t\tnewSelected.add(optionValue);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tnewSelected = new Set([optionValue]);\n\t\t\t\tsetIsOpen(false);\n\t\t\t}\n\n\t\t\tif (selectedKeys === undefined) {\n\t\t\t\tsetInternalSelected(newSelected);\n\t\t\t}\n\n\t\t\tonSelectionChange?.(newSelected);\n\t\t};\n\n\t\tconst handleFocus = (e: React.FocusEvent<HTMLSelectElement>) => {\n\t\t\tsetIsFocused(true);\n\t\t\tonFocus?.(e);\n\t\t};\n\n\t\tconst handleBlur = (e: React.FocusEvent<HTMLSelectElement>) => {\n\t\t\tsetIsFocused(false);\n\t\t\tonBlur?.(e);\n\t\t};\n\n\t\t// Close dropdown when clicking outside\n\t\tuseEffect(() => {\n\t\t\tconst handleClickOutside = (event: MouseEvent) => {\n\t\t\t\tif (\n\t\t\t\t\tdropdownRef.current &&\n\t\t\t\t\t!dropdownRef.current.contains(event.target as Node)\n\t\t\t\t) {\n\t\t\t\t\tsetIsOpen(false);\n\t\t\t\t}\n\t\t\t};\n\n\t\t\tdocument.addEventListener(\"mousedown\", handleClickOutside);\n\t\t\treturn () =>\n\t\t\t\tdocument.removeEventListener(\"mousedown\", handleClickOutside);\n\t\t}, []);\n\n\t\tconst selectProps = {\n\t\t\tvariant,\n\t\t\tcolor,\n\t\t\tsize,\n\t\t\tradius,\n\t\t\tisInvalid: isInvalid || !!errorMessage,\n\t\t\tisDisabled,\n\t\t\tfullWidth,\n\t\t\tisFocused,\n\t\t\tisOpen,\n\t\t\tclassName,\n\t\t\tcss,\n\t\t};\n\n\t\tconst selectedOption = options.find((opt) =>\n\t\t\tcurrentSelected.has(opt.value),\n\t\t);\n\t\tconst selectedText =\n\t\t\tisMultiple && currentSelected.size > 1\n\t\t\t\t? `${currentSelected.size} items selected`\n\t\t\t\t: selectedOption?.label || \"\";\n\n\t\tconst selectElement = (\n\t\t\t<SelectWrapper theme={theme} {...selectProps} ref={dropdownRef}>\n\t\t\t\t{startContent && (\n\t\t\t\t\t<ContentWrapper theme={theme} position=\"start\">\n\t\t\t\t\t\t{startContent}\n\t\t\t\t\t</ContentWrapper>\n\t\t\t\t)}\n\n\t\t\t\t<SelectTrigger theme={theme} onClick={handleToggle}>\n\t\t\t\t\t<SelectValue theme={theme} hasPlaceholder={!selectedText}>\n\t\t\t\t\t\t{selectedText || placeholder}\n\t\t\t\t\t</SelectValue>\n\n\t\t\t\t\t<ChevronIcon theme={theme} isOpen={isOpen}>\n\t\t\t\t\t\t{endContent || <ChevronDownIcon />}\n\t\t\t\t\t</ChevronIcon>\n\t\t\t\t</SelectTrigger>\n\n\t\t\t\t<Dropdown theme={theme} isOpen={isOpen} size={size}>\n\t\t\t\t\t{options.map((option) => (\n\t\t\t\t\t\t<Option\n\t\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\t\tkey={option.value}\n\t\t\t\t\t\t\tisSelected={currentSelected.has(option.value)}\n\t\t\t\t\t\t\tisDisabled={option.isDisabled}\n\t\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t!option.isDisabled && handleOptionClick(option.value)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{option.startContent}\n\t\t\t\t\t\t\t<OptionContent>\n\t\t\t\t\t\t\t\t<OptionLabel theme={theme}>{option.label}</OptionLabel>\n\t\t\t\t\t\t\t\t{option.description && (\n\t\t\t\t\t\t\t\t\t<OptionDescription theme={theme}>\n\t\t\t\t\t\t\t\t\t\t{option.description}\n\t\t\t\t\t\t\t\t\t</OptionDescription>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</OptionContent>\n\t\t\t\t\t\t\t{option.endContent}\n\t\t\t\t\t\t</Option>\n\t\t\t\t\t))}\n\t\t\t\t</Dropdown>\n\n\t\t\t\t<HiddenSelect\n\t\t\t\t\tref={selectRef}\n\t\t\t\t\tmultiple={isMultiple}\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\tvalue={Array.from(currentSelected)}\n\t\t\t\t\tonChange={onChange}\n\t\t\t\t\tonFocus={handleFocus}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{options.map((option) => (\n\t\t\t\t\t\t<option\n\t\t\t\t\t\t\tkey={option.value}\n\t\t\t\t\t\t\tvalue={option.value}\n\t\t\t\t\t\t\tdisabled={option.isDisabled}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t))}\n\t\t\t\t</HiddenSelect>\n\t\t\t</SelectWrapper>\n\t\t);\n\n\t\tif (!label && !description && !errorMessage) {\n\t\t\treturn selectElement;\n\t\t}\n\n\t\treturn (\n\t\t\t<SelectContainer theme={theme} fullWidth={fullWidth}>\n\t\t\t\t{label && labelPlacement === \"outside\" && (\n\t\t\t\t\t<Label theme={theme} isRequired={isRequired} size={size}>\n\t\t\t\t\t\t{label}\n\t\t\t\t\t</Label>\n\t\t\t\t)}\n\t\t\t\t{selectElement}\n\t\t\t\t{(description || errorMessage) && (\n\t\t\t\t\t<HelperText theme={theme} isError={!!errorMessage}>\n\t\t\t\t\t\t{errorMessage || description}\n\t\t\t\t\t</HelperText>\n\t\t\t\t)}\n\t\t\t</SelectContainer>\n\t\t);\n\t},\n);\n\nSelect.displayName = \"Select\";\n"],"names":["getSelectVariantStyles","props","theme","variant","color","isInvalid","isFocused","isDisabled","isOpen","baseColor","getColorVariant","errorColor","focusColor","css","getSelectSizeStyles","size","getSelectRadiusStyles","radius","SelectContainer","styled","SelectWrapper","HiddenSelect","SelectTrigger","SelectValue","ChevronIcon","Dropdown","Option","OptionContent","OptionLabel","OptionDescription","Label","HelperText","ContentWrapper","ChevronDownIcon","jsx","Select","React","label","placeholder","description","errorMessage","isRequired","fullWidth","isMultiple","options","selectedKeys","defaultSelectedKeys","onSelectionChange","startContent","endContent","className","labelPlacement","onChange","onFocus","onBlur","ref","useTheme","setIsFocused","useState","setIsOpen","internalSelected","setInternalSelected","selectRef","useRef","dropdownRef","useImperativeHandle","currentSelected","handleToggle","handleOptionClick","optionValue","newSelected","handleFocus","e","handleBlur","useEffect","handleClickOutside","event","selectProps","selectedOption","opt","selectedText","selectElement","jsxs","option"],"mappings":"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"}