@jenesei-software/jenesei-kit-react 1.0.0

package/build/component.styles-Bn6ylF83.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.styles-Bn6ylF83.js","sources":["../src/components/select/component.tsx","../src/components/select/component.styles.ts"],"sourcesContent":["import { useVirtualizer } from '@tanstack/react-virtual'\nimport { AnimatePresence } from 'framer-motion'\nimport moment from 'moment'\nimport React, { FC, FocusEventHandler, ReactNode, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport { Button } from '@local/components/button'\nimport { InputChildrenProps } from '@local/components/input'\nimport { ListLanguage, MapThemeList } from '@local/consts'\nimport { ErrorMessage, addErrorProps } from '@local/styles/error'\nimport { IThemeGenreInput, IThemeSize, KEY_SIZE_DATA } from '@local/theme'\n\nimport {\n  DropdownErase,\n  DropdownFooter,\n  DropdownList,\n  DropdownListParent,\n  DropdownOption,\n  DropdownOptionIcon,\n  DropdownOptionLayout,\n  DropdownSelectAll,\n  ISelectItem,\n  ISelectLanguageOption,\n  ISelectMapThemeOption,\n  SelectDateProps,\n  SelectInputIcon,\n  SelectLanguageProps,\n  SelectMapThemeProps,\n  SelectProps,\n  SelectStyledInput,\n  SelectWrapper,\n  SelectYearProps\n} from '.'\n\nconst DEFAULT_MAX_VIEW = 5\nconst DEFAULT_MIN_VIEW = 5\nconst DEFAULT_OVERSCAN = 1\nconst DEFAULT_LABEL_EMPTY_OPTION = 'No options'\n\nexport const Select = <T extends object & ISelectItem>(props: SelectProps<T>) => {\n  const [isOpen, setIsOpen] = useState(false)\n  const [isAnimating, setIsAnimating] = useState(false)\n  const [isAll, setIsAll] = useState(props?.footer?.selectAll?.defaultValue ?? false)\n  const refInput = useRef<HTMLInputElement>(null)\n  const parentListRef = useRef<HTMLDivElement>(null)\n  const wrapperRef = useRef<HTMLDivElement>(null)\n\n  const maxViewLength = useMemo(() => props.maxView ?? DEFAULT_MAX_VIEW, [props.maxView])\n  const minViewLength = useMemo(() => props.minView ?? DEFAULT_MIN_VIEW, [props.minView])\n  const optionsLength = useMemo(() => props.option.length, [props.option.length])\n  const isFooter: boolean = useMemo(() => !!props?.footer, [props.footer])\n  const isErase: boolean = useMemo(() => !!props?.footer?.erase, [props.footer])\n  const isSelectAll: boolean = useMemo(() => !!props?.footer?.selectAll, [props.footer])\n  const sizeHeight = useMemo(() => KEY_SIZE_DATA[props.size].height, [props.size])\n  const height = useMemo(\n    () =>\n      sizeHeight *\n        (optionsLength < maxViewLength\n          ? optionsLength < minViewLength\n            ? minViewLength\n            : optionsLength\n          : maxViewLength) +\n      (isFooter ? sizeHeight : 0),\n    [sizeHeight, optionsLength, maxViewLength, minViewLength, isFooter]\n  )\n\n  const radius = useMemo(() => KEY_SIZE_DATA[props.size].radius, [props.size])\n\n  const isSelectedItem = useCallback(\n    (option: T): boolean => {\n      return isAll || (props.value ?? []).includes(option)\n    },\n    [isAll, props.value]\n  )\n\n  const handleEraseOnClick = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      event.preventDefault()\n      event.stopPropagation()\n      if (props.footer?.erase?.onCLick) {\n        props.footer.erase.onCLick()\n      } else {\n        props.onChange([])\n      }\n      setIsAll(false)\n    },\n    [props]\n  )\n\n  const handleSelectAllOnClick = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      event.preventDefault()\n      event.stopPropagation()\n      if (props?.inputProps?.value !== '') {\n        return props.onChange(props.option)\n      }\n      if (isAll) {\n        setIsAll(false)\n        props.onChange(props.option)\n      } else {\n        if (props.footer?.selectAll?.onCLick) {\n          props.footer?.selectAll?.onCLick()\n        } else {\n          setIsAll(true)\n        }\n      }\n    },\n    [isAll, props]\n  )\n\n  const handleOnBlurEasy = useCallback(() => {\n    setIsOpen(false)\n    wrapperRef?.current?.blur()\n    refInput?.current?.blur()\n  }, [])\n\n  const handleOnBlur: FocusEventHandler<HTMLInputElement> = useCallback(\n    event => {\n      if (props?.isDisabled) return\n      if (event.relatedTarget && parentListRef.current?.contains(event.relatedTarget as Node)) return\n      if (props.onBlur && event) props.onBlur(event)\n      handleOnBlurEasy()\n    },\n    [handleOnBlurEasy, props]\n  )\n\n  const handleOptionOnClick = useCallback(\n    (option: T) => {\n      if (props.isOnClickOptionClose) {\n        handleOnBlurEasy()\n      }\n      if (props.isMulti) {\n        if (isAll) {\n          const index = props.option.findIndex(selectedItems => selectedItems.value === option.value)\n          const newValue = [...props.option.slice(0, index), ...props.option.slice(index + 1)]\n          props.onChange(newValue)\n        } else {\n          const index = props.value.findIndex(selectedItems => selectedItems.value === option.value)\n\n          if (index === -1 && (!props.maxView || props.value.length < props.maxView)) {\n            const newValues = [...(props.value ?? []), option]\n            props.onChange(newValues)\n\n            if (newValues.length == props.option.length) {\n              return setIsAll(true)\n            }\n          } else if (index !== -1) {\n            const newValue = [...props.value.slice(0, index), ...props.value.slice(index + 1)]\n            props.onChange(newValue)\n          }\n        }\n      } else {\n        props.onChange([option])\n      }\n\n      return setIsAll(false)\n    },\n    [handleOnBlurEasy, isAll, props]\n  )\n\n  const handleListOptionOpenEffect = useCallback(() => {\n    setIsAnimating(false)\n    setIsOpen(true)\n  }, [])\n\n  const handleOnOpen = useCallback(() => {\n    setIsAnimating(false)\n    setIsOpen(true)\n  }, [])\n\n  const handleOnFocusEasy = useCallback(() => {\n    if (isAnimating) return\n    if (isOpen) return\n\n    setIsAnimating(true)\n\n    handleOnOpen()\n  }, [handleOnOpen, isAnimating, isOpen])\n\n  const handleOnFocus: FocusEventHandler<HTMLInputElement> = useCallback(\n    event => {\n      if (props?.isDisabled) return\n      if (props.onFocus) props.onFocus(event)\n      handleOnFocusEasy()\n    },\n    [handleOnFocusEasy, props]\n  )\n\n  useEffect(() => {\n    if (isOpen) handleOnOpen()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [height])\n\n  const handleMouseDown = useCallback((event: MouseEvent) => {\n    if (parentListRef.current && parentListRef.current.contains(event.target as Node)) {\n      event.preventDefault()\n    }\n  }, [])\n\n  useEffect(() => {\n    document.addEventListener('mousedown', handleMouseDown)\n    return () => {\n      document.removeEventListener('mousedown', handleMouseDown)\n    }\n  }, [handleMouseDown])\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        parentListRef.current &&\n        refInput.current &&\n        !parentListRef.current.contains(event.target as Node) &&\n        !refInput.current.contains(event.target as Node)\n      ) {\n        handleOnBlurEasy()\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside)\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [handleOnBlurEasy])\n\n  useEffect(() => {\n    if (isOpen) {\n      handleListOptionOpenEffect()\n    }\n  }, [handleListOptionOpenEffect, isOpen, props.option])\n\n  const listVirtualizer = useVirtualizer({\n    count: optionsLength,\n    estimateSize: props.getEstimateSize ? props.getEstimateSize : () => sizeHeight,\n    getScrollElement: () => parentListRef.current,\n    overscan: DEFAULT_OVERSCAN,\n    paddingEnd: isFooter ? sizeHeight : 0\n  })\n\n  const handleFetchNextPage = useCallback(\n    (containerRefElement?: HTMLDivElement | null) => {\n      if (containerRefElement) {\n        const { scrollHeight, scrollTop, clientHeight } = containerRefElement\n        if (scrollHeight - scrollTop - clientHeight < height && !props.isFetching && props.fetchNextPage) {\n          props.fetchNextPage()\n        }\n      }\n    },\n    [height, props]\n  )\n\n  return (\n    <>\n      <SelectWrapper\n        $size={props.size}\n        $genre={props.genre}\n        $sx={props.sx}\n        // tabIndex={0}\n        $radius={radius}\n        $isDisabled={props?.isDisabled}\n        $parentListHeight={isOpen ? height : 0}\n        onFocus={handleOnFocus}\n        onBlur={handleOnBlur}\n        ref={wrapperRef}\n        animate={{\n          zIndex: isOpen ? '10' : 'auto',\n          '--after-height': isOpen ? `${height + 1}px` : `0px`\n        }}\n        transition={{ duration: 0.2 }}\n      >\n        <SelectStyledInput\n          tabIndex={0}\n          id={props.id}\n          name={props.name}\n          $genre={props.genre}\n          $size={props.size}\n          placeholder={props.placeholder}\n          $error={props?.error}\n          $isLoading={props?.inputProps?.isLoading}\n          $isNiceNumber={props?.inputProps?.isNiceNumber}\n          $postfixChildren={props?.inputProps?.postfixChildren}\n          $prefixChildren={props.inputProps?.prefixChildren}\n          $isBold={props?.inputProps?.isBold}\n          $isCenter={props?.inputProps?.isCenter}\n          $sx={props?.inputProps?.sx}\n          disabled={props?.isDisabled}\n          $isDisabled={props?.isDisabled}\n          readOnly={props?.inputProps?.isReadOnly}\n          required={props?.inputProps?.isRequired}\n          defaultValue={props?.inputProps?.defaultValue}\n          value={props?.inputProps?.value ?? ''}\n          type={props?.inputProps?.type}\n          onChange={event => props?.inputProps?.onChange && props?.inputProps?.onChange(event.target.value)}\n          onBlur={props?.inputProps?.onBlur}\n          onFocus={props?.inputProps?.onFocus}\n          onClick={handleOnFocusEasy}\n          animate={{\n            borderBottomLeftRadius: isOpen ? `0px` : `${radius}px`,\n            borderBottomRightRadius: isOpen ? `0px` : `${radius}px`\n          }}\n          transition={{ duration: 0.2 }}\n          ref={refInput}\n        />\n        {props.isShowSelectInputIcon && (\n          <SelectInputIcon\n            size={props.size}\n            type=\"id\"\n            name=\"Select\"\n            $genre={props.genre}\n            $checked={isOpen}\n            $size={props.size}\n            tabIndex={-1}\n          />\n        )}\n        <AnimatePresence>\n          {isOpen ? (\n            <DropdownListParent\n              ref={parentListRef}\n              $genre={props.genre}\n              $isShowScroll={optionsLength > maxViewLength}\n              $isFooter={isFooter}\n              $size={props.size}\n              onScroll={e => handleFetchNextPage(e.target as HTMLDivElement)}\n              initial={{ opacity: 0, height: 0 }}\n              animate={{\n                height: `${height + 1}px`,\n                display: 'flex',\n                opacity: 1,\n                zIndex: '1'\n              }}\n              exit={{\n                height: '0px',\n                display: 'none',\n                opacity: 0,\n                zIndex: 'auto'\n              }}\n              transition={{ duration: 0.2 }}\n              style={{\n                maxHeight: `${height + 1}px`\n              }}\n            >\n              <DropdownList\n                style={{\n                  height: `${listVirtualizer.getTotalSize()}px`,\n                  minHeight: `${height}px`\n                }}\n              >\n                {!props.isEmptyOption ? (\n                  listVirtualizer.getVirtualItems().map(virtualRow => {\n                    const item = props.option[virtualRow.index]\n                    const checked = isSelectedItem(item)\n                    return (\n                      <ContainerDropdownOption\n                        checked={checked}\n                        onClick={() => handleOptionOnClick(item)}\n                        key={virtualRow.index}\n                        virtualRowSize={virtualRow.size}\n                        virtualRowStart={virtualRow.start}\n                        label={item.label}\n                        genre={props.genre}\n                        size={props.size}\n                        isShowDropdownOptionIcon={props.isShowDropdownOptionIcon}\n                        {...props.optionProps}\n                      />\n                    )\n                  })\n                ) : (\n                  <ContainerDropdownOption\n                    isNotShowHoverStyle\n                    checked={false}\n                    onClick={() => {}}\n                    key={0}\n                    virtualRowSize={props?.getEstimateSize?.(0) ?? sizeHeight}\n                    virtualRowStart={0}\n                    label={props.labelEmptyOption ?? DEFAULT_LABEL_EMPTY_OPTION}\n                    genre={props.genre}\n                    size={props.size}\n                    {...props.optionProps}\n                    isShowDropdownOptionIcon={props.isShowDropdownOptionIcon}\n                  />\n                )}\n                {isFooter && (\n                  <DropdownFooter $isErase={isErase} $isSelectAll={isSelectAll} $genre={props.genre} $size={props.size}>\n                    {props.footer!.selectAll && (\n                      <DropdownSelectAll>\n                        <Button\n                          isFullSize\n                          genre={props.genre}\n                          onClick={handleSelectAllOnClick}\n                          size={'medium'}\n                          isHiddenBorder\n                        >\n                          {props.footer!.selectAll.label}\n                        </Button>\n                      </DropdownSelectAll>\n                    )}\n                    {props.footer!.erase && (\n                      <DropdownErase>\n                        <Button\n                          isFullSize\n                          genre={props.genre}\n                          onClick={handleEraseOnClick}\n                          size={'medium'}\n                          isHiddenBorder\n                        >\n                          {props.footer!.erase.label}\n                        </Button>\n                      </DropdownErase>\n                    )}\n                  </DropdownFooter>\n                )}\n              </DropdownList>\n            </DropdownListParent>\n          ) : null}\n        </AnimatePresence>\n      </SelectWrapper>\n      {props?.error ? <ErrorMessage {...props.error} size={props?.error.size ?? props.size} /> : null}\n    </>\n  )\n}\n\nconst ContainerDropdownOptionComponent = (\n  params: addErrorProps & {\n    genre: keyof IThemeGenreInput\n    size: IThemeSize\n    onClick: () => void\n    isLoading?: boolean\n    isNotShowHoverStyle?: boolean\n    isShowDropdownOptionIcon?: boolean\n    isBold?: boolean\n    isCenter?: boolean\n    postfixChildren?: InputChildrenProps\n    prefixChildren?: InputChildrenProps\n    checked: boolean\n    virtualRowSize: number\n    virtualRowStart: number\n    label: ReactNode\n  }\n) => {\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLLIElement>) => {\n    if (event.key === 'Enter') {\n      params.onClick()\n    }\n  }\n  return (\n    <DropdownOption\n      tabIndex={0}\n      onClick={params.onClick}\n      onKeyDown={handleKeyDown}\n      $error={params.error}\n      $isCenter={params.isCenter}\n      $isNotShowHoverStyle={params.isNotShowHoverStyle}\n      $isLoading={params.isLoading}\n      $postfixChildren={params.postfixChildren}\n      $prefixChildren={params.prefixChildren}\n      $genre={params.genre}\n      $size={params.size}\n      $isBold={params.isBold}\n      $checked={params.checked}\n      style={{\n        height: `${params.virtualRowSize}px`,\n        transform: `translateY(${params.virtualRowStart}px)`\n      }}\n    >\n      <div style={{ position: 'relative', display: 'contents' }} tabIndex={-1} aria-hidden=\"true\" aria-readonly=\"true\">\n        {params.label}\n        {params.isShowDropdownOptionIcon && (\n          <DropdownOptionIcon\n            tabIndex={-1}\n            size={params.size}\n            type=\"checkbox\"\n            name=\"Arrow\"\n            $genre={params.genre}\n            $checked={params.checked}\n            $size={params.size}\n          />\n        )}\n        <DropdownOptionLayout\n          $isNotShowHoverStyle={params.isNotShowHoverStyle}\n          $genre={params.genre}\n          $size={params.size}\n          $isBold={params.isBold}\n          $checked={params.checked}\n        />\n      </div>\n    </DropdownOption>\n  )\n}\n\nexport const ContainerDropdownOption = memo(ContainerDropdownOptionComponent)\n\nexport const SelectLanguage: FC<SelectLanguageProps> = props => {\n  const option = ListLanguage\n\n  const [viewOption, setViewOption] = useState<ISelectLanguageOption[]>(option)\n  const [query, setQuery] = useState<string>('')\n  const [isEmptyOption, setIsEmptyOption] = useState<boolean>(false)\n\n  const handleSelectChange = (option: ISelectLanguageOption[]) => {\n    props.onChange(option[0]?.value.toString())\n    setQuery('')\n  }\n  const handleQueryChange = useCallback(\n    (value: string) => {\n      setQuery(value)\n      props.onChange('')\n      if (value === '') {\n        setIsEmptyOption(option.length === 0)\n        setViewOption(option)\n      } else {\n        const filteredOptions = option.filter(option =>\n          Object.values(option).some(field => field?.toString().toLowerCase().includes(value.toLowerCase()))\n        )\n        setViewOption(filteredOptions)\n        setIsEmptyOption(filteredOptions.length === 0)\n      }\n    },\n    [option, props]\n  )\n\n  const [value, setValue] = useState<ISelectLanguageOption | undefined>(option.find(e => e.value === props.value))\n  useEffect(() => {\n    if (value?.value !== props.value) setValue(option.find(e => e.value === props.value))\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [option, props.value])\n\n  return (\n    <Select<ISelectLanguageOption>\n      {...props}\n      option={viewOption}\n      isEmptyOption={isEmptyOption}\n      minView={1}\n      maxView={8}\n      isOnClickOptionClose\n      value={value ? [value] : []}\n      onChange={handleSelectChange}\n      inputProps={{\n        ...props.inputProps,\n        variety: 'standard',\n        isReadOnly: true,\n        value: (value?.placeholder as string) ?? query,\n        onChange: handleQueryChange\n      }}\n    />\n  )\n}\n\nexport const SelectMonth: FC<SelectDateProps> = props => {\n  const { value, onChange, startDate, endDate, monthsLocale, isShortLabel } = props\n\n  const year = moment(value).utc().year()\n\n  const months = useMemo(() => {\n    return monthsLocale.map(monthItem => {\n      const monthIndex = moment().month(monthItem.value).month()\n\n      const monthMoment = moment.utc().year(year).month(monthIndex).startOf('month')\n      const isDisabled =\n        (startDate && monthMoment.isBefore(moment.utc(startDate), 'month')) ||\n        (endDate && monthMoment.isAfter(moment.utc(endDate), 'month'))\n\n      return {\n        value: monthMoment.valueOf(),\n        label: isShortLabel ? monthItem.localeShort : monthItem.localeLong,\n        placeholder: isShortLabel ? monthItem.localeShort : monthItem.localeLong,\n        search: `${monthItem.localeLong.toLowerCase()}, ${monthIndex + 1}`,\n        isDisabled,\n        monthValue: monthItem.value\n      }\n    })\n  }, [monthsLocale, year, startDate, endDate, isShortLabel])\n\n  const handleSelectChange = (option: ISelectLanguageOption[]) => {\n    const selectedValue = Number(option[0]?.value)\n\n    const selectedMonthValue = moment(option[0]?.value).utc().month()\n\n    const currentMoment = moment(value).utc()\n    const currentYear = currentMoment.year()\n    const currentDay = currentMoment.date()\n\n    const newValue = moment().utc().year(currentYear).month(selectedMonthValue).date(currentDay).startOf('day')\n\n    if (newValue.isValid()) {\n      onChange(newValue.valueOf())\n    } else {\n      onChange(selectedValue)\n    }\n  }\n\n  const selectedMonth = useMemo(() => {\n    return months.find(\n      month =>\n        moment(value).utc().isSameOrAfter(moment(month.value).startOf('month')) &&\n        moment(value).utc().isBefore(moment(month.value).endOf('month'))\n    )\n  }, [months, value])\n\n  return (\n    <Select<ISelectLanguageOption>\n      {...props}\n      option={months.filter(e => !e.isDisabled)}\n      minView={1}\n      maxView={5}\n      isOnClickOptionClose\n      value={selectedMonth ? [selectedMonth] : []}\n      onChange={handleSelectChange}\n      inputProps={{\n        ...props.inputProps,\n        isCenter: true,\n        variety: 'standard',\n        value: selectedMonth?.placeholder ?? props.placeholder,\n        isReadOnly: true\n      }}\n    />\n  )\n}\n\nexport const SelectYear: FC<SelectYearProps> = props => {\n  const { value, onChange, startDate, endDate, sortOrder = 'desc' } = props\n\n  const startYear = moment(startDate).utc().year()\n  const endYear = moment(endDate).utc().year()\n\n  const years = useMemo(() => {\n    const yearArray = Array.from({ length: endYear - startYear + 1 }, (_, index) => {\n      const year = startYear + index\n      return {\n        value: moment().year(year).utc().startOf('year').valueOf(),\n        label: moment().year(year).utc().format('YYYY'),\n        placeholder: moment().year(year).utc().format('YYYY'),\n        search: `${moment().year(year).utc().format('YYYY').toLowerCase()}`\n      }\n    })\n\n    return sortOrder === 'asc'\n      ? yearArray.sort((a, b) => a.value - b.value)\n      : yearArray.sort((a, b) => b.value - a.value)\n  }, [endYear, startYear, sortOrder])\n\n  const handleSelectChange = (option: ISelectLanguageOption[]) => {\n    const selectedValue = Number(option[0]?.value)\n\n    const selectedYearValue = moment(option[0]?.value).utc().year()\n\n    const currentMoment = moment(value).utc()\n    const currentMonth = currentMoment.month()\n    const currentDay = currentMoment.date()\n\n    const newValue = moment().utc().year(selectedYearValue).month(currentMonth).date(currentDay).startOf('day')\n\n    if (newValue.isValid()) {\n      onChange(newValue.valueOf())\n    } else {\n      onChange(selectedValue)\n    }\n  }\n\n  const selectedYear = useMemo(() => {\n    return years.find(\n      year =>\n        moment(value).utc().isSameOrAfter(moment(year.value)) &&\n        moment(value).utc().isBefore(moment(year.value).endOf('year'))\n    )\n  }, [years, value])\n  return (\n    <Select<ISelectLanguageOption>\n      {...props}\n      option={years}\n      minView={1}\n      maxView={5}\n      isOnClickOptionClose\n      value={selectedYear ? [selectedYear] : []}\n      onChange={handleSelectChange}\n      optionProps={{\n        isCenter: true,\n        variety: 'standard',\n        ...props.optionProps\n      }}\n      inputProps={{\n        ...props.inputProps,\n        isCenter: true,\n        isNiceNumber: true,\n        variety: 'standard',\n        value: selectedYear?.placeholder ?? props.placeholder,\n        isReadOnly: true\n      }}\n    />\n  )\n}\n\nexport const SelectMapTheme: FC<SelectMapThemeProps> = props => {\n  const options = useMemo(() => MapThemeList, [])\n  const optionsNormalize = useMemo(\n    () => MapThemeList.map(e => ({ label: e.name, value: e.name, placeholder: e.name })),\n    []\n  )\n\n  const [viewOption, setViewOption] = useState<ISelectMapThemeOption[]>(optionsNormalize)\n  const [query, setQuery] = useState<string>('')\n  const [isEmptyOption, setIsEmptyOption] = useState<boolean>(false)\n\n  const handleSelectChange = (option: ISelectMapThemeOption[]) => {\n    const findOption = options.find(e => e.name === option[0].value)\n    if (findOption) {\n      props.onChange(findOption)\n    } else {\n      props.onChange(null)\n    }\n    setQuery('')\n  }\n  const handleQueryChange = useCallback(\n    (value: string) => {\n      setQuery(value)\n      props.onChange(null)\n      if (value === '') {\n        setIsEmptyOption(optionsNormalize.length === 0)\n        setViewOption(optionsNormalize)\n      } else {\n        const filteredOptions = optionsNormalize.filter(option =>\n          Object.values(option).some(field => field?.toString().toLowerCase().includes(value.toLowerCase()))\n        )\n        setViewOption(filteredOptions)\n        setIsEmptyOption(filteredOptions.length === 0)\n      }\n    },\n    [optionsNormalize, props]\n  )\n\n  const [value, setValue] = useState<ISelectMapThemeOption | undefined>(\n    optionsNormalize.find(e => e.value === props.value.name)\n  )\n  useEffect(() => {\n    if (value?.value !== props.value.name) setValue(optionsNormalize.find(e => e.value === props.value.name))\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [options, props.value])\n\n  return (\n    <Select<ISelectMapThemeOption>\n      {...props}\n      option={viewOption}\n      isEmptyOption={isEmptyOption}\n      minView={1}\n      maxView={8}\n      isOnClickOptionClose\n      value={value ? [value] : []}\n      onChange={handleSelectChange}\n      inputProps={{\n        ...props.inputProps,\n        variety: 'standard',\n        isReadOnly: true,\n        value: (value?.placeholder as string) ?? query,\n        onChange: handleQueryChange\n      }}\n    />\n  )\n}\n","import { motion } from 'framer-motion'\nimport styled, { css } from 'styled-components'\n\nimport { StyledInputCSS, StyledMotionInput } from '@local/components/input'\nimport { addBorder, addRemoveOutline, addRemoveScrollbar, addTransition } from '@local/styles/add'\nimport { addSX } from '@local/styles/sx'\nimport { IThemeSizePropertyDefault } from '@local/theme'\nimport { KEY_SIZE_DATA } from '@local/theme/theme'\n\nimport {\n  DropdownOptionIconProps,\n  SelectStyledFooterProps,\n  SelectStyledInputProps,\n  SelectStyledListProps,\n  SelectStyledOptionProps,\n  SelectWrapperProps\n} from '.'\nimport { Icon } from '../icon'\n\nexport const SelectWrapper = styled(motion.div)<SelectWrapperProps>`\n  width: 100%;\n  position: relative;\n  height: fit-content;\n  ${props =>\n    !props.$isDisabled &&\n    css`\n      &:focus-within {\n        &:after {\n          content: '';\n          position: absolute;\n          top: -1px;\n          left: -1px;\n          bottom: -1px;\n          right: -1px;\n          outline: 2px ${props.theme.states.focus} solid;\n          outline-offset: 1px;\n          border-radius: ${`${props.$radius + 1}px`};\n          pointer-events: none;\n          height: calc(100% + var(--after-height) + 2px);\n        }\n      }\n    `}\n\n  outline: none !important;\n\n  &:focus-visible {\n    outline: none !important;\n  }\n  ${addSX};\n`\n\nexport const DropdownListParentSize = css<SelectStyledListProps>`\n  ${props => props.$size && DropdownListParentSizeConstructor(KEY_SIZE_DATA[props.$size])};\n`\nexport const DropdownListParentSizeConstructor = (props: IThemeSizePropertyDefault) => css`\n  border-radius: 0px 0px ${props.radius}px ${props.radius}px;\n`\n\nexport const DropdownListParent = styled(motion.div)<SelectStyledListProps>`\n  outline: none;\n  display: none;\n\n  height: 0px;\n  width: 100%;\n\n  position: absolute;\n\n  overflow: hidden;\n  overflow-y: auto;\n\n  margin: 0;\n  padding: 0;\n\n  background: ${props => props.theme.colors.input[props.$genre].background.rest};\n  border: solid 1px ${props => props.theme.colors.input[props.$genre].border.rest};\n  border-top: 0px !important;\n  ${DropdownListParentSize};\n  ${props => !props.$isShowScroll && addRemoveScrollbar};\n`\n\nexport const DropdownList = styled.ul`\n  list-style: none;\n\n  position: relative;\n\n  display: flex;\n  flex-direction: column;\n\n  width: 100%;\n\n  transform: translateZ(0);\n`\n\nexport const DropdownOption = styled.li<SelectStyledOptionProps>`\n  ${StyledInputCSS};\n  width: 100%;\n  border: 0px;\n  display: flex;\n  align-items: center;\n  border-radius: 0;\n  opacity: 1;\n  ${addRemoveOutline};\n  ${addBorder};\n  &:last-child {\n    border-radius: 0px 0px ${props => KEY_SIZE_DATA[props.$size].radius}px\n      ${props => KEY_SIZE_DATA[props.$size].radius}px;\n  }\n  cursor: pointer;\n  position: absolute;\n  top: 0;\n  left: 0;\n`\n\nexport const DropdownOptionHoverAndCheckedSize = css<SelectStyledOptionProps>`\n  ${props => DropdownOptionHoverAndCheckedSizeConstructor(KEY_SIZE_DATA[props.$size])};\n`\nexport const DropdownOptionHoverAndCheckedSizeConstructor = (props: IThemeSizePropertyDefault) => css`\n  width: calc(100% - ${props.padding - 6}px);\n  height: calc(100% - ${props.padding - 4}px);\n  border-radius: ${props.radius}px;\n`\n\nexport const DropdownOptionLayout = styled.div<SelectStyledOptionProps>`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  left: 0;\n  right: 0;\n  ${DropdownOptionHoverAndCheckedSize};\n  border-style: solid;\n  border-width: 1px;\n  border-color: transparent;\n\n  ${addTransition};\n\n  ${props =>\n    !props.$isNotShowHoverStyle &&\n    css`\n      &:hover {\n        background: ${props.theme.colors.select[props.$genre].background.select};\n        color: ${props.theme.colors.select[props.$genre].color.select};\n      }\n    `}\n  ${props =>\n    props.$checked &&\n    css`\n      background: ${props.theme.colors.select[props.$genre].background.select};\n      border-color: ${props.theme.colors.select[props.$genre].border.select};\n      color: ${props.theme.colors.select[props.$genre].color.select};\n    `}\n`\n\nconst DropdownOptionIconSize = css<DropdownOptionIconProps>`\n  ${props => DropdownOptionIconSizeConstructor(KEY_SIZE_DATA[props.$size])};\n`\nconst DropdownOptionIconSizeConstructor = (props: IThemeSizePropertyDefault) => css`\n  right: ${props.padding - 6}px;\n  height: ${props.height}px;\n`\n\nexport const DropdownOptionIcon = styled(Icon)<DropdownOptionIconProps>`\n  position: absolute;\n  right: 0;\n  height: 100%;\n  align-items: center;\n  ${DropdownOptionIconSize};\n  color: ${props =>\n    props.$checked\n      ? props.theme.colors.select[props.$genre].border.select\n      : props.theme.colors.input[props.$genre].border.rest};\n`\n\nexport const SelectInputIcon = styled(Icon)<DropdownOptionIconProps>`\n  position: absolute;\n  user-select: none;\n  pointer-events: none;\n  right: 0;\n  top: 0;\n  align-items: center;\n  ${DropdownOptionIconSize};\n  color: ${props =>\n    props.$checked\n      ? props.theme.colors.select[props.$genre].border.select\n      : props.theme.colors.input[props.$genre].border.rest};\n`\nexport const DropdownFooter = styled.li<SelectStyledFooterProps>`\n  ${StyledInputCSS};\n  display: flex;\n  align-items: center;\n  border-radius: 0;\n  opacity: 1;\n  border: 0px;\n  cursor: pointer;\n  position: sticky;\n  bottom: 0;\n  padding: 0px;\n  flex-shrink: 0;\n  margin-top: auto;\n`\n\nexport const DropdownErase = styled.div`\n  margin-left: auto;\n  height: 100%;\n`\n\nexport const DropdownSelectAll = styled.div`\n  margin-right: auto;\n  height: 100%;\n`\n\nexport const SelectStyledInput = styled(StyledMotionInput)<SelectStyledInputProps>`\n  ${addRemoveOutline};\n  ${addSX};\n`\n"],"names":["_a","_b","_c","_e","_d","jsxs","Fragment","jsx","option","value"],"mappings":"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"}

package/build/component.styles-BsZIuwWJ.cjs

@@ -0,0 +1,140 @@
+"use strict";const e=require("framer-motion"),t=require("react-number-format"),o=require("styled-components"),r=require("./component-C52VCES6.cjs"),i=require("./style-Dm74EPGE.cjs"),n=require("./style-CtGd1JVB.cjs"),s=require("./style-fRZ6xrVp.cjs"),l=require("./theme.global-D6XU05Et.cjs"),c=o.div`
+  width: max-content;
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  ${e=>e.$isWidthAsHeight?o.css`
+          width: ${l.KEY_SIZE_DATA[e.$size].height}px;
+          min-width: ${l.KEY_SIZE_DATA[e.$size].height}px;
+          & input {
+            text-align: center;
+          }
+        `:null};
+  ${s.addSX};
+`,$=o.css`
+  &::placeholder,
+  &::-webkit-input-placeholder {
+    ${e=>r.getFontSizeStyles(16,e.$isBold?500:400,e.theme.font.family,e.theme.font.lineHeight)};
+    color: ${e=>e.theme.colors.input[e.$genre].color.placeholder};
+    opacity: 1;
+  }
+  &:-ms-input-placeholder {
+    ${e=>r.getFontSizeStyles(16,e.$isBold?500:400,e.theme.font.family,e.theme.font.lineHeight)};
+    color: ${e=>e.theme.colors.input[e.$genre].color.placeholder};
+    opacity: 1;
+  }
+`,d=o.css`
+  &::placeholder,
+  &::-webkit-input-placeholder {
+    ${e=>r.getFontSizeStyles(16,e.$isBold?500:400,"Roboto Mono",e.theme.font.lineHeight)};
+    color: ${e=>e.theme.colors.input[e.$genre].color.placeholder};
+    opacity: 1;
+    ${i.addNiceNumber};
+    background: transparent;
+  }
+  &:-ms-input-placeholder {
+    ${e=>r.getFontSizeStyles(16,e.$isBold?500:400,"Roboto Mono",e.theme.font.lineHeight)};
+    color: ${e=>e.theme.colors.input[e.$genre].color.placeholder};
+    opacity: 1;
+    ${i.addNiceNumber};
+    background: transparent;
+  }
+`,p=o.css`
+  ${e=>o.css`
+    background: ${e.theme.colors.input[e.$genre].background.rest};
+    border-color: ${e.theme.colors.input[e.$genre].border.rest};
+    color: ${e.theme.colors.input[e.$genre].color.rest};
+    &:active {
+      background: ${e.theme.colors.input[e.$genre].background.rest};
+      border-color: ${e.theme.colors.input[e.$genre].border.rest};
+      color: ${e.theme.colors.input[e.$genre].color.rest};
+    }
+    ${!e.$isNotShowHoverStyle&&o.css`
+      &:hover {
+        background: ${e.theme.colors.input[e.$genre].background.hover};
+        border-color: ${e.theme.colors.input[e.$genre].border.hover};
+        color: ${e.theme.colors.input[e.$genre].color.hover};
+      }
+    `}
+    &:focus-visible {
+      background: ${e.theme.colors.input[e.$genre].background.rest};
+      border-color: ${e.theme.colors.input[e.$genre].border.rest};
+      color: ${e.theme.colors.input[e.$genre].color.rest};
+    }
+  `};
+`,h=o.css`
+  ${e=>a(l.KEY_SIZE_DATA[e.$size])};
+`,a=e=>o.css`
+  padding: 0px ${e.padding}px;
+  height: ${e.height}px;
+  min-height: ${e.height}px;
+  max-height: ${e.height}px;
+  border-radius: ${e.radius}px;
+`,u=o.css`
+  opacity: ${e=>e.$isDisabled?.5:1};
+`,g=o.css`
+  ${e=>e.$isInputEffect&&o.css`
+      box-shadow: ${e.theme.effects.input};
+    `}
+`,m=o.css`
+  resize: none;
+  overflow: hidden;
+  width: 100%;
+  border: 1px solid;
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  ${e=>r.getFontSizeStyles(16,e.$isBold?500:400,e.theme.font.family,e.theme.font.lineHeight)};
+
+  ${h};
+  ${p};
+  ${$};
+  ${u};
+  ${g};
+  ${i.addOutline};
+  ${i.addTransition};
+  ${n.addError};
+
+  ${e=>e.$isNiceNumber&&o.css`
+      ${i.addNiceNumber};
+    `};
+  ${e=>e.$isCenter&&o.css`
+      text-align: center;
+      justify-content: center;
+    `};
+
+  ${e=>e.$prefixChildren&&o.css`
+      padding-left: ${`calc(${e.$prefixChildren.width} + ${e.$prefixChildren.right} + ${e.$prefixChildren.left})`};
+    `};
+
+  ${e=>e.$postfixChildren&&o.css`
+      padding-right: ${`calc(${e.$postfixChildren.width} + ${e.$postfixChildren.right} + ${e.$postfixChildren.left})`};
+    `};
+`,f=o.input`
+  ${m};
+`,x=o(e.motion.input)`
+  ${m};
+`,b=o(t.PatternFormat)`
+  ${m};
+`,y=o(t.NumericFormat)`
+  ${m};
+`,S=o.div`
+  position: absolute;
+  display: flex;
+  left: ${e=>e.$left};
+  width: ${e=>e.$width};
+  opacity: ${e=>e.$isDisabled?.5:1};
+  height: 100%;
+  ${i.addTransition};
+`,w=o.div`
+  position: absolute;
+  display: flex;
+  right: ${e=>e.$right};
+  width: ${e=>e.$width};
+  opacity: ${e=>e.$isDisabled?.5:1};
+  height: 100%;
+  ${i.addTransition};
+`;exports.InputIsInputEffect=g,exports.InputPlaceholder=$,exports.InputPlaceholderNiceNumber=d,exports.InputPostfixChildren=w,exports.InputPrefixChildren=S,exports.InputSize=h,exports.InputSizeConstructor=a,exports.StyledInput=f,exports.StyledInputCSS=m,exports.StyledInputNumeric=y,exports.StyledInputPattern=b,exports.StyledInputWrapper=c,exports.StyledMotionInput=x;
+//# sourceMappingURL=component.styles-BsZIuwWJ.cjs.map

package/build/component.styles-BsZIuwWJ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.styles-BsZIuwWJ.cjs","sources":["../src/components/input/component.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion'\nimport { NumericFormat, PatternFormat } from 'react-number-format'\nimport styled, { css } from 'styled-components'\n\nimport { getFontSizeStyles } from '@local/components/typography'\nimport { addNiceNumber, addOutline, addTransition } from '@local/styles/add'\nimport { addError } from '@local/styles/error'\nimport { addSX } from '@local/styles/sx'\nimport { IThemeSizePropertyDefault, KEY_SIZE_DATA } from '@local/theme'\n\nimport { StyledInputChildrenProps, StyledInputProps, StyledInputWrapperProps } from '.'\n\n/****************************************** Wrapper *************************************************/\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n  width: max-content;\n  position: relative;\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  ${props =>\n    props.$isWidthAsHeight\n      ? css`\n          width: ${KEY_SIZE_DATA[props.$size].height}px;\n          min-width: ${KEY_SIZE_DATA[props.$size].height}px;\n          & input {\n            text-align: center;\n          }\n        `\n      : null};\n  ${addSX};\n`\n\n/****************************************** Placeholder *************************************************/\nexport const InputPlaceholder = css<StyledInputProps>`\n  &::placeholder,\n  &::-webkit-input-placeholder {\n    ${props => getFontSizeStyles(16, props.$isBold ? 500 : 400, props.theme.font.family, props.theme.font.lineHeight)};\n    color: ${props => props.theme.colors.input[props.$genre].color.placeholder};\n    opacity: 1;\n  }\n  &:-ms-input-placeholder {\n    ${props => getFontSizeStyles(16, props.$isBold ? 500 : 400, props.theme.font.family, props.theme.font.lineHeight)};\n    color: ${props => props.theme.colors.input[props.$genre].color.placeholder};\n    opacity: 1;\n  }\n`\nexport const InputPlaceholderNiceNumber = css<StyledInputProps>`\n  &::placeholder,\n  &::-webkit-input-placeholder {\n    ${props => getFontSizeStyles(16, props.$isBold ? 500 : 400, 'Roboto Mono', props.theme.font.lineHeight)};\n    color: ${props => props.theme.colors.input[props.$genre].color.placeholder};\n    opacity: 1;\n    ${addNiceNumber};\n    background: transparent;\n  }\n  &:-ms-input-placeholder {\n    ${props => getFontSizeStyles(16, props.$isBold ? 500 : 400, 'Roboto Mono', props.theme.font.lineHeight)};\n    color: ${props => props.theme.colors.input[props.$genre].color.placeholder};\n    opacity: 1;\n    ${addNiceNumber};\n    background: transparent;\n  }\n`\n\n/****************************************** Genre *************************************************/\nconst InputGenre = css<StyledInputProps>`\n  ${props => css`\n    background: ${props.theme.colors.input[props.$genre].background.rest};\n    border-color: ${props.theme.colors.input[props.$genre].border.rest};\n    color: ${props.theme.colors.input[props.$genre].color.rest};\n    &:active {\n      background: ${props.theme.colors.input[props.$genre].background.rest};\n      border-color: ${props.theme.colors.input[props.$genre].border.rest};\n      color: ${props.theme.colors.input[props.$genre].color.rest};\n    }\n    ${!props.$isNotShowHoverStyle &&\n    css`\n      &:hover {\n        background: ${props.theme.colors.input[props.$genre].background.hover};\n        border-color: ${props.theme.colors.input[props.$genre].border.hover};\n        color: ${props.theme.colors.input[props.$genre].color.hover};\n      }\n    `}\n    &:focus-visible {\n      background: ${props.theme.colors.input[props.$genre].background.rest};\n      border-color: ${props.theme.colors.input[props.$genre].border.rest};\n      color: ${props.theme.colors.input[props.$genre].color.rest};\n    }\n  `};\n`\n\n/****************************************** Size *************************************************/\nexport const InputSize = css<StyledInputProps>`\n  ${props => InputSizeConstructor(KEY_SIZE_DATA[props.$size])};\n`\nexport const InputSizeConstructor = (props: IThemeSizePropertyDefault) => css`\n  padding: 0px ${props.padding}px;\n  height: ${props.height}px;\n  min-height: ${props.height}px;\n  max-height: ${props.height}px;\n  border-radius: ${props.radius}px;\n`\n\n/****************************************** Hidden *************************************************/\nconst InputHidden = css<StyledInputProps>`\n  opacity: ${props => (props.$isDisabled ? 0.5 : 1)};\n`\n/****************************************** is isInputEffect *************************************************/\nexport const InputIsInputEffect = css<Pick<StyledInputProps, '$isInputEffect'>>`\n  ${props =>\n    props.$isInputEffect &&\n    css`\n      box-shadow: ${props.theme.effects.input};\n    `}\n`\n\n/****************************************** Default *************************************************/\nexport const StyledInputCSS = css<StyledInputProps>`\n  resize: none;\n  overflow: hidden;\n  width: 100%;\n  border: 1px solid;\n\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  ${props => getFontSizeStyles(16, props.$isBold ? 500 : 400, props.theme.font.family, props.theme.font.lineHeight)};\n\n  ${InputSize};\n  ${InputGenre};\n  ${InputPlaceholder};\n  ${InputHidden};\n  ${InputIsInputEffect};\n  ${addOutline};\n  ${addTransition};\n  ${addError};\n\n  ${props =>\n    props.$isNiceNumber &&\n    css`\n      ${addNiceNumber};\n    `};\n  ${props =>\n    props.$isCenter &&\n    css`\n      text-align: center;\n      justify-content: center;\n    `};\n\n  ${props =>\n    props.$prefixChildren &&\n    css`\n      padding-left: ${`calc(${props.$prefixChildren.width} + ${props.$prefixChildren.right} + ${props.$prefixChildren.left})`};\n    `};\n\n  ${props =>\n    props.$postfixChildren &&\n    css`\n      padding-right: ${`calc(${props.$postfixChildren.width} + ${props.$postfixChildren.right} + ${props.$postfixChildren.left})`};\n    `};\n`\n\nexport const StyledInput = styled.input<StyledInputProps>`\n  ${StyledInputCSS};\n`\n\nexport const StyledMotionInput = styled(motion.input)<StyledInputProps>`\n  ${StyledInputCSS};\n`\n\nexport const StyledInputPattern = styled(PatternFormat)<StyledInputProps>`\n  ${StyledInputCSS};\n`\nexport const StyledInputNumeric = styled(NumericFormat)<StyledInputProps>`\n  ${StyledInputCSS};\n`\n\n/****************************************** Children *************************************************/\nexport const InputPrefixChildren = styled.div<StyledInputChildrenProps>`\n  position: absolute;\n  display: flex;\n  left: ${props => props.$left};\n  width: ${props => props.$width};\n  opacity: ${props => (props.$isDisabled ? 0.5 : 1)};\n  height: 100%;\n  ${addTransition};\n`\n\nexport const InputPostfixChildren = styled.div<StyledInputChildrenProps>`\n  position: absolute;\n  display: flex;\n  right: ${props => props.$right};\n  width: ${props => props.$width};\n  opacity: ${props => (props.$isDisabled ? 0.5 : 1)};\n  height: 100%;\n  ${addTransition};\n`\n"],"names":["StyledInputWrapper","styled","div","props","$isWidthAsHeight","css","KEY_SIZE_DATA","$size","height","addSX","InputPlaceholder","getFontSizeStyles","$isBold","theme","font","family","lineHeight","colors","input","$genre","color","placeholder","InputPlaceholderNiceNumber","addNiceNumber","InputGenre","background","rest","border","$isNotShowHoverStyle","hover","InputSize","InputSizeConstructor","padding","radius","InputHidden","$isDisabled","InputIsInputEffect","$isInputEffect","effects","StyledInputCSS","addOutline","addTransition","addError","$isNiceNumber","$isCenter","$prefixChildren","width","right","left","$postfixChildren","StyledInput","StyledMotionInput","motion","StyledInputPattern","PatternFormat","StyledInputNumeric","NumericFormat","InputPrefixChildren","$left","$width","InputPostfixChildren","$right"],"mappings":"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"}

package/build/component.styles-C6LohBfF.js

@@ -0,0 +1,81 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
+import { useCallback } from "react";
+import { b as Stack } from "./component-jPZYT5iL.js";
+import styled, { css } from "styled-components";
+import { I as Icon } from "./component.styles-BapdQNhL.js";
+import { b as addTransition } from "./style-CEGJOjRW.js";
+const Accordion = (props) => {
+  const onClickSummary = useCallback(() => {
+    if (props.onClickSummary) props.onClickSummary();
+  }, [props]);
+  const onClickIcon = useCallback(
+    (event) => {
+      if (props.onClickIcon) {
+        event.stopPropagation();
+        props.onClickIcon();
+      }
+    },
+    [props]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Stack, { ...props.wrapperProps, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionWrapper, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionSummary, { onClick: onClickSummary, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionSummaryContent, { $isAccordionIcon: props.isAccordionIcon, children: props.accordionSummary }),
+      props.isAccordionIcon && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        AccordionStyledIcon,
+        {
+          $expanded: props.expanded,
+          onClick: onClickIcon,
+          name: "Arrow1",
+          primaryColor: "black100",
+          type: "id",
+          size: "large"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionDetails, { $expanded: props.expanded, children: props.accordionDetails })
+  ] }) });
+};
+const AccordionWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+const AccordionSummary = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  user-select: none;
+`;
+const AccordionSummaryContent = styled.div`
+  width: 100%;
+
+  ${(props) => props.$isAccordionIcon && css`
+      width: calc(100% - 26px);
+    `}
+`;
+const AccordionDetails = styled.div`
+  max-height: ${(props) => props.$expanded ? "9999px" : "0"};
+  height: ${(props) => props.$expanded ? "100%" : "0"};
+  opacity: ${(props) => props.$expanded ? 1 : 0};
+  overflow: hidden;
+  ${addTransition};
+`;
+const AccordionStyledIcon = styled(Icon)`
+  padding: 4px;
+  box-sizing: content-box;
+  cursor: pointer;
+  ${(props) => props.$expanded ? css`
+          transform: rotate(180deg);
+        ` : css`
+          transform: rotate(0deg);
+        `}
+`;
+export {
+  Accordion as A,
+  AccordionWrapper as a,
+  AccordionSummary as b,
+  AccordionSummaryContent as c,
+  AccordionDetails as d,
+  AccordionStyledIcon as e
+};
+//# sourceMappingURL=component.styles-C6LohBfF.js.map

package/build/component.styles-C6LohBfF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.styles-C6LohBfF.js","sources":["../src/components/accordion/component.tsx","../src/components/accordion/component.styles.ts"],"sourcesContent":["import React, { FC, useCallback } from 'react'\n\nimport { Stack } from '@local/components/stack'\n\nimport {\n  AccordionDetails,\n  AccordionProps,\n  AccordionStyledIcon,\n  AccordionSummary,\n  AccordionSummaryContent,\n  AccordionWrapper\n} from '.'\n\nexport const Accordion: FC<AccordionProps> = props => {\n  const onClickSummary = useCallback(() => {\n    if (props.onClickSummary) props.onClickSummary()\n  }, [props])\n\n  const onClickIcon = useCallback(\n    (event: React.MouseEvent<SVGSVGElement>) => {\n      if (props.onClickIcon) {\n        event.stopPropagation()\n\n        props.onClickIcon()\n      }\n    },\n    [props]\n  )\n\n  return (\n    <Stack {...props.wrapperProps}>\n      <AccordionWrapper>\n        <AccordionSummary onClick={onClickSummary}>\n          <AccordionSummaryContent $isAccordionIcon={props.isAccordionIcon}>\n            {props.accordionSummary}\n          </AccordionSummaryContent>\n          {props.isAccordionIcon && (\n            <AccordionStyledIcon\n              $expanded={props.expanded}\n              onClick={onClickIcon}\n              name=\"Arrow1\"\n              primaryColor=\"black100\"\n              type=\"id\"\n              size=\"large\"\n            />\n          )}\n        </AccordionSummary>\n        <AccordionDetails $expanded={props.expanded}>{props.accordionDetails}</AccordionDetails>\n      </AccordionWrapper>\n    </Stack>\n  )\n}\n","import styled, { css } from 'styled-components'\n\nimport { Icon } from '@local/components/icon'\nimport { addTransition } from '@local/styles/add'\n\nimport { AccordionDetailsProps, AccordionStyledIconProps, AccordionSummaryContentProps } from '.'\n\nexport const AccordionWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n`\nexport const AccordionSummary = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  user-select: none;\n`\nexport const AccordionSummaryContent = styled.div<AccordionSummaryContentProps>`\n  width: 100%;\n\n  ${props =>\n    props.$isAccordionIcon &&\n    css`\n      width: calc(100% - 26px);\n    `}\n`\nexport const AccordionDetails = styled.div<AccordionDetailsProps>`\n  max-height: ${props => (props.$expanded ? '9999px' : '0')};\n  height: ${props => (props.$expanded ? '100%' : '0')};\n  opacity: ${props => (props.$expanded ? 1 : 0)};\n  overflow: hidden;\n  ${addTransition};\n`\nexport const AccordionStyledIcon = styled(Icon)<AccordionStyledIconProps>`\n  padding: 4px;\n  box-sizing: content-box;\n  cursor: pointer;\n  ${props =>\n    props.$expanded\n      ? css`\n          transform: rotate(180deg);\n        `\n      : css`\n          transform: rotate(0deg);\n        `}\n`\n"],"names":["jsxs","jsx"],"mappings":";;;;;;AAaO,MAAM,YAAgC,CAAA,UAAS;AACpD,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,MAAM,eAAgB,OAAM,eAAA;AAAA,EAAe,GAC9C,CAAC,KAAK,CAAC;AAEV,QAAM,cAAc;AAAA,IAClB,CAAC,UAA2C;AAC1C,UAAI,MAAM,aAAa;AACrB,cAAM,gBAAA;AAEN,cAAM,YAAA;AAAA,MAAY;AAAA,IACpB;AAAA,IAEF,CAAC,KAAK;AAAA,EAAA;AAGR,+CACG,OAAA,EAAO,GAAG,MAAM,cACf,iDAAC,kBAAA,EACC,UAAA;AAAA,IAAAA,kCAAAA,KAAC,kBAAA,EAAiB,SAAS,gBACzB,UAAA;AAAA,MAAAC,sCAAC,yBAAA,EAAwB,kBAAkB,MAAM,iBAC9C,gBAAM,kBACT;AAAA,MACC,MAAM,mBACLA,kCAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,MAAM;AAAA,UACjB,SAAS;AAAA,UACT,MAAK;AAAA,UACL,cAAa;AAAA,UACb,MAAK;AAAA,UACL,MAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACP,GAEJ;AAAA,0CACC,kBAAA,EAAiB,WAAW,MAAM,UAAW,gBAAM,iBAAA,CAAiB;AAAA,EAAA,EAAA,CACvE,EAAA,CACF;AAEJ;AC5CO,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAKhC,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAMhC,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA,IAG1C,CAAA,UACA,MAAM,oBACN;AAAA;AAAA,KAEC;AAAA;AAEE,MAAM,mBAAmB,OAAO;AAAA,gBACvB,CAAA,UAAU,MAAM,YAAY,WAAW,GAAI;AAAA,YAC/C,CAAA,UAAU,MAAM,YAAY,SAAS,GAAI;AAAA,aACxC,CAAA,UAAU,MAAM,YAAY,IAAI,CAAE;AAAA;AAAA,IAE3C,aAAa;AAAA;AAEV,MAAM,sBAAsB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA,IAI1C,CAAA,UACA,MAAM,YACF;AAAA;AAAA,YAGA;AAAA;AAAA,SAEC;AAAA;"}

package/build/component.styles-CEBh8X5q.js

@@ -0,0 +1,20 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
+import styled from "styled-components";
+import { a as addSX } from "./style-plT9Ah7t.js";
+const Separator = (props) => {
+  const color = props.color || "grayMonica";
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SeparatorWrapper, { $radius: props.radius, $color: color, $sx: props.sx, $type: props.type });
+};
+const DEFAULT_SEPARATOR_SIZE = "1px";
+const SeparatorWrapper = styled.div`
+  height: ${(props) => props.$type === "horizontal" ? DEFAULT_SEPARATOR_SIZE : "100%"};
+  width: ${(props) => props.$type === "vertical" ? DEFAULT_SEPARATOR_SIZE : "100%"};
+  background: ${(props) => props.$color && props.theme.palette[props.$color]};
+  border-radius: ${(props) => props.$radius || "0px"};
+  ${addSX};
+`;
+export {
+  Separator as S,
+  SeparatorWrapper as a
+};
+//# sourceMappingURL=component.styles-CEBh8X5q.js.map

package/build/component.styles-CEBh8X5q.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.styles-CEBh8X5q.js","sources":["../src/components/separator/component.tsx","../src/components/separator/component.styles.tsx"],"sourcesContent":["import { FC } from 'react'\n\nimport { IThemePaletteKeys } from '@local/theme/theme.interface'\n\nimport { SeparatorProps, SeparatorWrapper } from '.'\n\nexport const Separator: FC<SeparatorProps> = props => {\n  const color: IThemePaletteKeys = props.color || 'grayMonica'\n  return <SeparatorWrapper $radius={props.radius} $color={color} $sx={props.sx} $type={props.type} />\n}\n","import styled from 'styled-components'\n\nimport { addSX } from '@local/styles/sx'\n\nimport { SeparatorWrapperProps } from '.'\n\nconst DEFAULT_SEPARATOR_SIZE = '1px'\n\nexport const SeparatorWrapper = styled.div<SeparatorWrapperProps>`\n  height: ${props => (props.$type === 'horizontal' ? DEFAULT_SEPARATOR_SIZE : '100%')};\n  width: ${props => (props.$type === 'vertical' ? DEFAULT_SEPARATOR_SIZE : '100%')};\n  background: ${props => props.$color && props.theme.palette[props.$color]};\n  border-radius: ${props => props.$radius || '0px'};\n  ${addSX};\n`\n"],"names":["jsx"],"mappings":";;;AAMO,MAAM,YAAgC,CAAA,UAAS;AACpD,QAAM,QAA2B,MAAM,SAAS;AAChD,SAAOA,kCAAAA,IAAC,kBAAA,EAAiB,SAAS,MAAM,QAAQ,QAAQ,OAAO,KAAK,MAAM,IAAI,OAAO,MAAM,KAAA,CAAM;AACnG;ACHA,MAAM,yBAAyB;AAExB,MAAM,mBAAmB,OAAO;AAAA,YAC3B,CAAA,UAAU,MAAM,UAAU,eAAe,yBAAyB,MAAO;AAAA,WAC1E,CAAA,UAAU,MAAM,UAAU,aAAa,yBAAyB,MAAO;AAAA,gBAClE,CAAA,UAAS,MAAM,UAAU,MAAM,MAAM,QAAQ,MAAM,MAAM,CAAC;AAAA,mBACvD,CAAA,UAAS,MAAM,WAAW,KAAK;AAAA,IAC9C,KAAK;AAAA;"}

package/build/component.styles-CPsxMKVK.cjs

@@ -0,0 +1,73 @@
+"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),r=require("framer-motion"),o=require("styled-components"),t=require("./style-Dm74EPGE.cjs"),s=require("./style-CtGd1JVB.cjs"),i=require("./theme.global-D6XU05Et.cjs"),n={type:"spring",stiffness:700,damping:30},c=o.css`
+  ${e=>g(i.KEY_SIZE_DATA_TOGGLE[e.$size])};
+`,g=e=>o.css`
+  height: ${e.height}px;
+  width: ${e.width}px;
+  padding: ${e.padding}px;
+  border-radius: 100px;
+`,l=o.css`
+  ${e=>a(i.KEY_SIZE_DATA_TOGGLE[e.$size])};
+`,a=e=>o.css`
+  height: ${e.thumb}px;
+  width: ${e.thumb}px;
+  border-radius: 100px;
+`,$=o(r.motion.div)`
+  ${c};
+
+  cursor: pointer;
+  border: 1px solid transparent;
+
+  display: flex;
+  align-items: center;
+
+  ${t.addTransition};
+
+  &:focus-visible {
+    outline: 1px solid ${e=>e.theme.states.focus};
+  }
+  ${e=>e.$isDisabled?o.css`
+          opacity: 0.5;
+        `:o.css`
+          opacity: 1;
+        `};
+
+  ${e=>e.$value?o.css`
+          background: ${e.theme.colors.toggle[e.$genre].active.rest.track};
+          border-color: ${e.theme.colors.toggle[e.$genre].active.rest.border};
+          justify-content: flex-end;
+          &:hover {
+            background: ${e.theme.colors.toggle[e.$genre].active.hover.track};
+            border-color: ${e.theme.colors.toggle[e.$genre].active.hover.border};
+          }
+        `:o.css`
+          background: ${e.theme.colors.toggle[e.$genre].unActive.rest.track};
+          border-color: ${e.theme.colors.toggle[e.$genre].unActive.rest.border};
+          justify-content: flex-start;
+          &:hover {
+            background: ${e.theme.colors.toggle[e.$genre].unActive.hover.track};
+            border-color: ${e.theme.colors.toggle[e.$genre].unActive.hover.border};
+          }
+        `};
+
+  ${s.addError};
+`,h=o(r.motion.div)`
+  ${l};
+  ${t.addTransition};
+
+  ${e=>e.$value?o.css`
+          background: ${e.theme.colors.toggle[e.$genre].active.rest.thumb};
+          box-shadow: ${e.theme.colors.toggle[e.$genre].active.rest.thumbBoxShadow};
+          &:hover {
+            background: ${e.theme.colors.toggle[e.$genre].active.hover.thumb};
+            box-shadow: ${e.theme.colors.toggle[e.$genre].active.hover.thumbBoxShadow};
+          }
+        `:o.css`
+          background: ${e.theme.colors.toggle[e.$genre].unActive.rest.thumb};
+          box-shadow: ${e.theme.colors.toggle[e.$genre].unActive.rest.thumbBoxShadow};
+          &:hover {
+            background: ${e.theme.colors.toggle[e.$genre].unActive.hover.thumb};
+            box-shadow: ${e.theme.colors.toggle[e.$genre].unActive.hover.thumbBoxShadow};
+          }
+        `}
+`;exports.Toggle=o=>e.jsxRuntimeExports.jsx(r.AnimatePresence,{children:e.jsxRuntimeExports.jsx($,{$genre:o.genre,$isDisabled:o.isDisabled,$value:o.value,$size:o.size,$error:o.error,tabIndex:0,onClick:()=>o.onChange&&o.onChange(!o.value),children:e.jsxRuntimeExports.jsx(h,{layout:!0,transition:n,$genre:o.genre,$isDisabled:o.isDisabled,$value:o.value,$size:o.size,$error:o.error})})}),exports.ToggleCenter=h,exports.ToggleWrapper=$;
+//# sourceMappingURL=component.styles-CPsxMKVK.cjs.map

package/build/component.styles-CPsxMKVK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.styles-CPsxMKVK.cjs","sources":["../src/components/toggle/component.tsx","../src/components/toggle/component.styles.ts"],"sourcesContent":["import { AnimatePresence } from 'framer-motion'\n\nimport { ToggleCenter, ToggleProps, ToggleWrapper } from '.'\n\nexport const Toggle = (props: ToggleProps) => {\n  return (\n    <AnimatePresence>\n      <ToggleWrapper\n        $genre={props.genre}\n        $isDisabled={props.isDisabled}\n        $value={props.value}\n        $size={props.size}\n        $error={props.error}\n        tabIndex={0}\n        onClick={() => props.onChange && props.onChange(!props.value)}\n      >\n        <ToggleCenter\n          layout\n          transition={spring}\n          $genre={props.genre}\n          $isDisabled={props.isDisabled}\n          $value={props.value}\n          $size={props.size}\n          $error={props.error}\n        />\n      </ToggleWrapper>\n    </AnimatePresence>\n  )\n}\nconst spring = {\n  type: 'spring',\n  stiffness: 700,\n  damping: 30\n}\n","import { motion } from 'framer-motion'\nimport styled, { css } from 'styled-components'\n\nimport { addTransition } from '@local/styles/add'\nimport { addError } from '@local/styles/error'\nimport { IThemeSizePropertyToggle, KEY_SIZE_DATA_TOGGLE } from '@local/theme'\n\nimport { StyledToggleProps } from '.'\n\n/****************************************** Size *************************************************/\nconst ToggleWrapperSize = css<StyledToggleProps>`\n  ${props => ToggleWrapperSizeConstructor(KEY_SIZE_DATA_TOGGLE[props.$size])};\n`\nconst ToggleWrapperSizeConstructor = (props: IThemeSizePropertyToggle) => css`\n  height: ${props.height}px;\n  width: ${props.width}px;\n  padding: ${props.padding}px;\n  border-radius: 100px;\n`\n\nconst ToggleCenterSize = css<StyledToggleProps>`\n  ${props => ToggleCenterSizeConstructor(KEY_SIZE_DATA_TOGGLE[props.$size])};\n`\nconst ToggleCenterSizeConstructor = (props: IThemeSizePropertyToggle) => css`\n  height: ${props.thumb}px;\n  width: ${props.thumb}px;\n  border-radius: 100px;\n`\n\n/****************************************** Standard *************************************************/\nexport const ToggleWrapper = styled(motion.div)<StyledToggleProps>`\n  ${ToggleWrapperSize};\n\n  cursor: pointer;\n  border: 1px solid transparent;\n\n  display: flex;\n  align-items: center;\n\n  ${addTransition};\n\n  &:focus-visible {\n    outline: 1px solid ${props => props.theme.states.focus};\n  }\n  ${props =>\n    props.$isDisabled\n      ? css`\n          opacity: 0.5;\n        `\n      : css`\n          opacity: 1;\n        `};\n\n  ${props =>\n    props.$value\n      ? css`\n          background: ${props.theme.colors.toggle[props.$genre].active.rest.track};\n          border-color: ${props.theme.colors.toggle[props.$genre].active.rest.border};\n          justify-content: flex-end;\n          &:hover {\n            background: ${props.theme.colors.toggle[props.$genre].active.hover.track};\n            border-color: ${props.theme.colors.toggle[props.$genre].active.hover.border};\n          }\n        `\n      : css`\n          background: ${props.theme.colors.toggle[props.$genre].unActive.rest.track};\n          border-color: ${props.theme.colors.toggle[props.$genre].unActive.rest.border};\n          justify-content: flex-start;\n          &:hover {\n            background: ${props.theme.colors.toggle[props.$genre].unActive.hover.track};\n            border-color: ${props.theme.colors.toggle[props.$genre].unActive.hover.border};\n          }\n        `};\n\n  ${addError};\n`\n\nexport const ToggleCenter = styled(motion.div)<StyledToggleProps>`\n  ${ToggleCenterSize};\n  ${addTransition};\n\n  ${props =>\n    props.$value\n      ? css`\n          background: ${props.theme.colors.toggle[props.$genre].active.rest.thumb};\n          box-shadow: ${props.theme.colors.toggle[props.$genre].active.rest.thumbBoxShadow};\n          &:hover {\n            background: ${props.theme.colors.toggle[props.$genre].active.hover.thumb};\n            box-shadow: ${props.theme.colors.toggle[props.$genre].active.hover.thumbBoxShadow};\n          }\n        `\n      : css`\n          background: ${props.theme.colors.toggle[props.$genre].unActive.rest.thumb};\n          box-shadow: ${props.theme.colors.toggle[props.$genre].unActive.rest.thumbBoxShadow};\n          &:hover {\n            background: ${props.theme.colors.toggle[props.$genre].unActive.hover.thumb};\n            box-shadow: ${props.theme.colors.toggle[props.$genre].unActive.hover.thumbBoxShadow};\n          }\n        `}\n`\n"],"names":["spring","type","stiffness","damping","ToggleWrapperSize","css","ToggleWrapperSizeConstructor","KEY_SIZE_DATA_TOGGLE","props","$size","height","width","padding","ToggleCenterSize","ToggleCenterSizeConstructor","thumb","ToggleWrapper","styled","motion","div","addTransition","theme","states","focus","$isDisabled","$value","colors","toggle","$genre","active","rest","track","border","hover","unActive","addError","ToggleCenter","thumbBoxShadow","AnimatePresence","children","jsx","genre","isDisabled","value","size","$error","error","tabIndex","onClick","onChange","layout","transition"],"mappings":"kOA6BMA,EAAS,CACbC,KAAM,SACNC,UAAW,IACXC,QAAS,ICtBLC,EAAoBC,EAAAA,GAAAA;OACbC,EAA6BC,EAAAA,qBAAqBC,EAAMC;EAE/DH,EAAgCE,GAAoCH,EAAAA,GAAAA;YAC9DG,EAAME;WACPF,EAAMG;aACJH,EAAMI;;EAIbC,EAAmBR,EAAAA,GAAAA;OACZS,EAA4BP,EAAAA,qBAAqBC,EAAMC;EAE9DK,EAA+BN,GAAoCH,EAAAA,GAAAA;YAC7DG,EAAMO;WACPP,EAAMO;;EAKJC,EAAgBC,EAAOC,EAAAA,OAAOC,IAAG;IAC1Cf;;;;;;;;IAQAgB;;;yBAGqBZ,GAASA,EAAMa,MAAMC,OAAOC;;IAEjDf,GACAA,EAAMgB,YACFnB,EAAAA,GAAAA;;UAGAA,EAAAA,GAAAA;;;;IAIJG,GACAA,EAAMiB,OACFpB,EAAAA,GAAAA;wBACgBG,EAAMa,MAAMK,OAAOC,OAAOnB,EAAMoB,QAAQC,OAAOC,KAAKC;0BAClDvB,EAAMa,MAAMK,OAAOC,OAAOnB,EAAMoB,QAAQC,OAAOC,KAAKE;;;0BAGpDxB,EAAMa,MAAMK,OAAOC,OAAOnB,EAAMoB,QAAQC,OAAOI,MAAMF;4BACnDvB,EAAMa,MAAMK,OAAOC,OAAOnB,EAAMoB,QAAQC,OAAOI,MAAMD;;UAGzE3B,EAAAA,GAAAA;wBACgBG,EAAMa,MAAMK,OAAOC,OAAOnB,EAAMoB,QAAQM,SAASJ,KAAKC;0BACpDvB,EAAMa,MAAMK,OAAOC,OAAOnB,EAAMoB,QAAQM,SAASJ,KAAKE;;;0BAGtDxB,EAAMa,MAAMK,OAAOC,OAAOnB,EAAMoB,QAAQM,SAASD,MAAMF;4BACrDvB,EAAMa,MAAMK,OAAOC,OAAOnB,EAAMoB,QAAQM,SAASD,MAAMD;;;;IAI/EG;EAGSC,EAAenB,EAAOC,EAAAA,OAAOC,IAAG;IACzCN;IACAO;;IAEAZ,GACAA,EAAMiB,OACFpB,EAAAA,GAAAA;wBACgBG,EAAMa,MAAMK,OAAOC,OAAOnB,EAAMoB,QAAQC,OAAOC,KAAKf;wBACpDP,EAAMa,MAAMK,OAAOC,OAAOnB,EAAMoB,QAAQC,OAAOC,KAAKO;;0BAElD7B,EAAMa,MAAMK,OAAOC,OAAOnB,EAAMoB,QAAQC,OAAOI,MAAMlB;0BACrDP,EAAMa,MAAMK,OAAOC,OAAOnB,EAAMoB,QAAQC,OAAOI,MAAMI;;UAGvEhC,EAAAA,GAAAA;wBACgBG,EAAMa,MAAMK,OAAOC,OAAOnB,EAAMoB,QAAQM,SAASJ,KAAKf;wBACtDP,EAAMa,MAAMK,OAAOC,OAAOnB,EAAMoB,QAAQM,SAASJ,KAAKO;;0BAEpD7B,EAAMa,MAAMK,OAAOC,OAAOnB,EAAMoB,QAAQM,SAASD,MAAMlB;0BACvDP,EAAMa,MAAMK,OAAOC,OAAOnB,EAAMoB,QAAQM,SAASD,MAAMI;;;iBD5F1D7B,2BAElB8B,EAAAA,gBAAA,CACCC,WAAAC,kBAAAA,IAACxB,EAAA,CACCY,OAAQpB,EAAMiC,MACdjB,YAAahB,EAAMkC,WACnBjB,OAAQjB,EAAMmC,MACdlC,MAAOD,EAAMoC,KACbC,OAAQrC,EAAMsC,MACdC,SAAU,EACVC,QAAS,IAAMxC,EAAMyC,UAAYzC,EAAMyC,UAAUzC,EAAMmC,OAEvDJ,WAAAC,kBAAAA,IAACJ,EAAA,CACCc,QAAM,EACNC,WAAYnD,EACZ4B,OAAQpB,EAAMiC,MACdjB,YAAahB,EAAMkC,WACnBjB,OAAQjB,EAAMmC,MACdlC,MAAOD,EAAMoC,KACbC,OAAQrC,EAAMsC"}

package/build/component.styles-CTo5NC52.js

@@ -0,0 +1,71 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
+import { useCallback } from "react";
+import { C as Checkbox } from "./component.styles-DOPCUXcr.js";
+import styled, { css } from "styled-components";
+import { g as getFontSizeStyles } from "./component-C2JFFh-k.js";
+import { a as addSX } from "./style-plT9Ah7t.js";
+import { K as KEY_SIZE_DATA } from "./theme.global-bN9HlSWE.js";
+const CheckboxGroup = (props) => {
+  const createMarkup = (html) => ({ __html: html });
+  const handleCheckboxChange = useCallback(
+    (item) => {
+      const isSelected = props.value.some((selectedItem) => selectedItem[props.valueField] === item[props.valueField]);
+      const updatedSelectedItems = isSelected ? props.value.filter((selectedItem) => selectedItem[props.valueField] !== item[props.valueField]) : props.multiple ? [...props.value, item] : [item];
+      if (props.onChange) props.onChange(updatedSelectedItems);
+    },
+    [props]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(CheckboxGroupWrapper, { className: props.className, $sx: props.sx, $size: props.size, children: props.options.map((e, index) => {
+    const isChecked = props.value.some((selectedItem) => selectedItem[props.valueField] === e[props.valueField]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(CheckboxGroupItem, { onClick: () => !props.isClickOnlyIcon && handleCheckboxChange(e), children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Checkbox,
+        {
+          genre: props.checkboxGenre,
+          isHiddenBorder: props.checkboxIsHiddenBorder,
+          view: props.checkBoxView,
+          sx: props.checkboxSX,
+          size: props.size,
+          checked: isChecked,
+          children: props.labelField && (e == null ? void 0 : e[props.labelField]) !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(CheckboxGroupLabel, { dangerouslySetInnerHTML: createMarkup(e[props.labelField]) })
+        }
+      ),
+      props.childrenField && (e == null ? void 0 : e[props.childrenField]) !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(CheckboxChildren, { children: e[props.childrenField] })
+    ] }, index);
+  }) });
+};
+const CheckboxGroupSize = css`
+  ${(props) => CheckboxGroupSizeConstructor(KEY_SIZE_DATA[props.$size])};
+`;
+const CheckboxGroupSizeConstructor = (props) => css`
+  gap: ${props.padding - 2}px;
+  ${(params) => getFontSizeStyles(props.font, 700, params.theme.font.family)};
+`;
+const CheckboxGroupWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  ${CheckboxGroupSize};
+  ${addSX};
+`;
+const CheckboxGroupItem = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+const CheckboxGroupLabel = styled.div`
+  user-select: none;
+`;
+const CheckboxChildren = styled.div`
+  user-select: none;
+`;
+export {
+  CheckboxGroup as C,
+  CheckboxGroupSize as a,
+  CheckboxGroupSizeConstructor as b,
+  CheckboxGroupWrapper as c,
+  CheckboxGroupItem as d,
+  CheckboxGroupLabel as e,
+  CheckboxChildren as f
+};
+//# sourceMappingURL=component.styles-CTo5NC52.js.map

package/build/component.styles-CTo5NC52.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.styles-CTo5NC52.js","sources":["../src/components/checkbox-group/component.tsx","../src/components/checkbox-group/component.styles.ts"],"sourcesContent":["import { ReactNode, useCallback } from 'react'\n\nimport { Checkbox } from '@local/components/checkbox'\n\nimport {\n  CheckboxChildren,\n  CheckboxGroupItem,\n  CheckboxGroupLabel,\n  CheckboxGroupProps,\n  CheckboxGroupWrapper,\n  ICheckboxValue\n} from '.'\n\nexport const CheckboxGroup = <T extends ICheckboxValue>(props: CheckboxGroupProps<T>) => {\n  const createMarkup = (html: string) => ({ __html: html })\n\n  const handleCheckboxChange = useCallback(\n    (item: T) => {\n      const isSelected = props.value.some(selectedItem => selectedItem[props.valueField] === item[props.valueField])\n\n      const updatedSelectedItems = isSelected\n        ? props.value.filter(selectedItem => selectedItem[props.valueField] !== item[props.valueField])\n        : props.multiple\n          ? [...props.value, item]\n          : [item]\n      if (props.onChange) props.onChange(updatedSelectedItems)\n    },\n    [props]\n  )\n  return (\n    <CheckboxGroupWrapper className={props.className} $sx={props.sx} $size={props.size}>\n      {props.options.map((e, index) => {\n        const isChecked = props.value.some(selectedItem => selectedItem[props.valueField] === e[props.valueField])\n        return (\n          <CheckboxGroupItem key={index} onClick={() => !props.isClickOnlyIcon && handleCheckboxChange(e)}>\n            <Checkbox\n              genre={props.checkboxGenre}\n              isHiddenBorder={props.checkboxIsHiddenBorder}\n              view={props.checkBoxView}\n              sx={props.checkboxSX}\n              size={props.size}\n              checked={isChecked}\n            >\n              {props.labelField && e?.[props.labelField] !== undefined && (\n                <CheckboxGroupLabel dangerouslySetInnerHTML={createMarkup(e[props.labelField] as string)} />\n              )}\n            </Checkbox>\n            {props.childrenField && e?.[props.childrenField] !== undefined && (\n              <CheckboxChildren>{e[props.childrenField] as ReactNode}</CheckboxChildren>\n            )}\n          </CheckboxGroupItem>\n        )\n      })}\n    </CheckboxGroupWrapper>\n  )\n}\n","import styled, { css } from 'styled-components'\n\nimport { getFontSizeStyles } from '@local/components/typography'\nimport { addSX } from '@local/styles/sx'\nimport { IThemeSizePropertyDefault, KEY_SIZE_DATA } from '@local/theme'\n\nimport { CheckboxGroupWrapperProps } from '.'\n\n/****************************************** Size *************************************************/\nexport const CheckboxGroupSize = css<CheckboxGroupWrapperProps>`\n  ${props => CheckboxGroupSizeConstructor(KEY_SIZE_DATA[props.$size])};\n`\nexport const CheckboxGroupSizeConstructor = (props: IThemeSizePropertyDefault) => css`\n  gap: ${props.padding - 2}px;\n  ${params => getFontSizeStyles(props.font, 700, params.theme.font.family)};\n`\n\n/****************************************** Default *************************************************/\nexport const CheckboxGroupWrapper = styled.div<CheckboxGroupWrapperProps>`\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  ${CheckboxGroupSize};\n  ${addSX};\n`\n\nexport const CheckboxGroupItem = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`\n\nexport const CheckboxGroupLabel = styled.div`\n  user-select: none;\n`\n\nexport const CheckboxChildren = styled.div`\n  user-select: none;\n`\n"],"names":["jsxs","jsx"],"mappings":";;;;;;;AAaO,MAAM,gBAAgB,CAA2B,UAAiC;AACvF,QAAM,eAAe,CAAC,UAAkB,EAAE,QAAQ,KAAA;AAElD,QAAM,uBAAuB;AAAA,IAC3B,CAAC,SAAY;AACX,YAAM,aAAa,MAAM,MAAM,KAAK,CAAA,iBAAgB,aAAa,MAAM,UAAU,MAAM,KAAK,MAAM,UAAU,CAAC;AAE7G,YAAM,uBAAuB,aACzB,MAAM,MAAM,OAAO,kBAAgB,aAAa,MAAM,UAAU,MAAM,KAAK,MAAM,UAAU,CAAC,IAC5F,MAAM,WACJ,CAAC,GAAG,MAAM,OAAO,IAAI,IACrB,CAAC,IAAI;AACX,UAAI,MAAM,SAAU,OAAM,SAAS,oBAAoB;AAAA,IAAA;AAAA,IAEzD,CAAC,KAAK;AAAA,EAAA;AAER,+CACG,sBAAA,EAAqB,WAAW,MAAM,WAAW,KAAK,MAAM,IAAI,OAAO,MAAM,MAC3E,UAAA,MAAM,QAAQ,IAAI,CAAC,GAAG,UAAU;AAC/B,UAAM,YAAY,MAAM,MAAM,KAAK,CAAA,iBAAgB,aAAa,MAAM,UAAU,MAAM,EAAE,MAAM,UAAU,CAAC;AACzG,WACEA,uCAAC,qBAA8B,SAAS,MAAM,CAAC,MAAM,mBAAmB,qBAAqB,CAAC,GAC5F,UAAA;AAAA,MAAAC,kCAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO,MAAM;AAAA,UACb,gBAAgB,MAAM;AAAA,UACtB,MAAM,MAAM;AAAA,UACZ,IAAI,MAAM;AAAA,UACV,MAAM,MAAM;AAAA,UACZ,SAAS;AAAA,UAER,UAAA,MAAM,eAAc,uBAAI,MAAM,iBAAgB,UAC7CA,kCAAAA,IAAC,oBAAA,EAAmB,yBAAyB,aAAa,EAAE,MAAM,UAAU,CAAW,EAAA,CAAG;AAAA,QAAA;AAAA,MAAA;AAAA,MAG7F,MAAM,kBAAiB,uBAAI,MAAM,oBAAmB,UACnDA,sCAAC,kBAAA,EAAkB,UAAA,EAAE,MAAM,aAAa,EAAA,CAAe;AAAA,IAAA,EAAA,GAdnC,KAgBxB;AAAA,EAAA,CAEH,GACH;AAEJ;AC9CO,MAAM,oBAAoB;AAAA,IAC7B,WAAS,6BAA6B,cAAc,MAAM,KAAK,CAAC,CAAC;AAAA;AAE9D,MAAM,+BAA+B,CAAC,UAAqC;AAAA,SACzE,MAAM,UAAU,CAAC;AAAA,IACtB,CAAA,WAAU,kBAAkB,MAAM,MAAM,KAAK,OAAO,MAAM,KAAK,MAAM,CAAC;AAAA;AAInE,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIvC,iBAAiB;AAAA,IACjB,KAAK;AAAA;AAGF,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMjC,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAIlC,MAAM,mBAAmB,OAAO;AAAA;AAAA;"}