{"version":3,"sources":["../../src/Select/Select.tsx","../../src/Select/Select.portal.tsx","../../src/utilities/Portal/Portal.tsx","../../src/utilities/Absolute/Absolute.tsx","../../src/utilities/Absolute/Absolute.hooks.ts","../../src/Select/Select.provider.tsx","../../src/utilities/Clay/Clay.tsx","../../src/utilities/Flex/Flex.tsx","../../src/Label/Label.tsx","../../src/Typography/Typography.tsx","../../src/Select/Select.trigger.tsx","../../src/Select/theme/Select.Input.tsx","../../src/Select/theme/Select.tags.tsx","../../src/Select/theme/SelectTheme.css.ts","../../src/Select/hook/useMultiSelect.ts","../../src/Select/hook/useSelect.ts"],"names":["useBoolean","useOutsideClick","useEffect","useLayoutEffect","useRef","useState","isValidElement","createPortal","cloneElement","useAbsolute","to","position","align","setDomRect","callback","x","height","y","width","style","fixedProperty","unFixedProperty","fixedAxisValue","fixedRelativeValue","alignAxisValue","alignRelativeValue","Absolute","children","offsetX","offsetY","autoMinWidth","floatStyle","__spreadProps","__spreadValues","jsx","Portal","container","_a","_b","absoluteProps","__objRest","createContext","useContext","useMemo","SelectStateContext","SelectOpenToggleContext","SelectOffContext","SelectPortalContext","SelectProvider","toggleOpen","isOpen","setOff","closeOnSelect","portalRef","setPortalRef","portalState","useSelectState","useSelectToggle","useSelectOff","useSelectPortal","SelectPortal","sx","ref","portalWidth","setPortalWidth","localOpenState","setLocalOpenState","resizeCallback","vars","forwardRef","Clay","className","_hover","_active","_after","_before","_focus","size","shape","as","native","props","ClayNameSpace","_Flex","Flex","_FlexCenter","FlexCenter","_FlexColumn","FlexColumn","FlexNameSpace","jsxs","_Label","type","text","bold","Typography","Label","classNames","_Typography","semanticToken","variant","colorToken","whiteSpace","numOfLine","textAlign","SelectTrigger","setPortalRf","useCallback","css","multiSelectCSS","selectTagCSS","SelectTags","tags","setValues","onClickTag","tag","tempTags","index","_tag","RemovableTag","onClick","event","SelectInputWrapper","label","labelProps","isDisabled","isTagInput","toggle","SelectInput","value","placeholder","onChange","SelectMultiInput","values","restProps","Select","useMultiSelect","defaultValues","useSelect","defaultValue","setValue"],"mappings":"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","sourcesContent":["import { useBoolean } from \"@imwebme/clay-hooks\";\nimport type { SelectPortalProps } from \"./Select.portal\";\nimport { SelectPortal } from \"./Select.portal\";\nimport { SelectProvider } from \"./Select.provider\";\nimport type { SelectTriggerProps } from \"./Select.trigger\";\nimport { SelectTrigger } from \"./Select.trigger\";\nimport type { SelectProps } from \"./Select.types\";\nimport { SelectInput } from \"./theme\";\nimport type { SelectInputProps, SelectMultiInputProps } from \"./theme/Select.Input\";\nimport { SelectMultiInput } from \"./theme/Select.Input\";\n\nexport const Select = ({ children, closeOnSelect = true }: SelectProps) => {\n  const { value, toggle, setOff } = useBoolean();\n\n  return (\n    <SelectProvider\n      closeOnSelect={closeOnSelect}\n      isOpen={value}\n      toggleOpen={toggle}\n      setOff={setOff}\n    >\n      {children}\n    </SelectProvider>\n  );\n};\n\nSelect.Trigger = (props: SelectTriggerProps) => <SelectTrigger {...props} />;\nSelect.Input = (props: SelectInputProps) => <SelectInput {...props} />;\nSelect.Portal = (props: SelectPortalProps) => <SelectPortal {...props} />;\nSelect.MultiInput = (props: SelectMultiInputProps) => <SelectMultiInput {...props} />;\n","/** @jsxImportSource @emotion/react */\n\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n\nimport { useOutsideClick } from \"@imwebme/clay-hooks\";\nimport type { PropsWithChildren } from \"react\";\nimport { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport type { BaseProps } from \"../types\";\nimport { Portal } from \"../utilities/Portal\";\nimport { useSelectOff, useSelectState } from \"./Select.provider\";\n\nexport type SelectPortalProps = PropsWithChildren<{\n  offsetY?: string;\n  sx?: BaseProps[\"sx\"];\n}>;\n\nexport const SelectPortal = ({ children, offsetY = \"0px\", sx }: SelectPortalProps) => {\n  const { portalRef } = useSelectState();\n  const { isOpen, closeOnSelect } = useSelectState();\n  const ref = useRef<HTMLDivElement>(null);\n  const setOff = useSelectOff();\n  const [portalWidth, setPortalWidth] = useState(0);\n  const [localOpenState, setLocalOpenState] = useState(false);\n\n  useEffect(() => {\n    setTimeout(() => {\n      setLocalOpenState(isOpen);\n    }, 0);\n  }, [isOpen]);\n\n  useOutsideClick({\n    ref: ref.current,\n    callback: () => {\n      setTimeout(() => {\n        setOff();\n      }, 0);\n    },\n    enabled: isOpen,\n  });\n\n  useLayoutEffect(() => {\n    const resizeCallback = () => {\n      if (portalRef) setPortalWidth(portalRef.clientWidth);\n    };\n\n    if (isOpen) window.addEventListener(\"resize\", resizeCallback);\n\n    return () => {\n      if (isOpen) window.removeEventListener(\"resize\", resizeCallback);\n    };\n  }, [isOpen, portalRef]);\n\n  return (\n    <Portal.Absolute\n      to={isOpen ? portalRef : null}\n      position=\"bottom\"\n      align=\"start\"\n      offsetY={`calc(8px + ${offsetY})`}\n      autoMinWidth\n    >\n      <div\n        ref={ref}\n        onClick={() => (closeOnSelect ? setOff() : undefined)}\n        css={{\n          ...sx,\n          transition: \"margin 200ms ease-out\",\n          opacity: localOpenState ? 1 : 0,\n          width: portalWidth || portalRef?.clientWidth,\n          marginTop: localOpenState ? 0 : \"-8px\",\n        }}\n      >\n        {children}\n      </div>\n    </Portal.Absolute>\n  );\n};\n","import { isValidElement } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { AbsoluteProps } from \"../Absolute\";\nimport { Absolute } from \"../Absolute\";\nimport type { PortalProps } from \"./Portal.types\";\n\nexport const Portal = ({ children, container = globalThis?.document?.body }: PortalProps) => {\n  if (!container || !isValidElement(children)) return null;\n\n  return createPortal(children, container);\n};\n\nPortal.Absolute = ({ children, ...absoluteProps }: AbsoluteProps) => (\n  <Portal>\n    <Absolute {...absoluteProps}>{children}</Absolute>\n  </Portal>\n);\n","import { cloneElement, isValidElement } from \"react\";\nimport { useAbsolute } from \"./Absolute.hooks\";\nimport type { AbsoluteProps } from \"./Absolute.types\";\n\n/**\n * children 요소를 `to` props로 전달받은 요소를 기준으로 띄우는 역할입니다.\n *\n * 기본 position 이 `absolute` 로 설정되어 있어, 부모 요소에 영향을 받습니다.\n *\n * 만약 부모 요소와 관계 없이 화면에서 자유롭게 위치를 설정하고 싶다면, `Portal.Absolute` 또는 `Portal`과 함께 사용해주세요\n *\n * > Docs의 예시는 ref가 깨져서 `show code` 용으로만 확인해주시면 됩니다.\n */\nexport const Absolute = ({\n  to,\n  children,\n  position = \"bottom\",\n  align = \"start\",\n  offsetX = \"0px\",\n  offsetY = \"0px\",\n  autoMinWidth = false,\n}: AbsoluteProps) => {\n  const floatStyle = useAbsolute({ to, position, align });\n\n  if (!floatStyle || !isValidElement<HTMLElement>(children)) return null;\n\n  const floated = cloneElement(children, {\n    style: {\n      ...children.props.style,\n      position: \"fixed\",\n      minWidth: autoMinWidth ? \"auto\" : \"max-content\",\n      top: \"0\",\n      left: \"0\",\n      zIndex: \"var(--clay-zIndex-modal)\",\n      transform: `translate(calc(${floatStyle.computedX} + ${offsetX}), calc(${floatStyle.computedY} + ${offsetY}))`,\n    },\n  });\n\n  return floated;\n};\n","import { useEffect, useState } from \"react\";\nimport type { AbsoluteProps } from \"./Absolute.types\";\n\nexport const useAbsolute = ({\n  to,\n  position,\n  align,\n}: Pick<AbsoluteProps, \"align\" | \"position\" | \"to\">): {\n  computedX: string;\n  computedY: string;\n} | null => {\n  const [, setDomRect] = useState<undefined | DOMRect>();\n\n  useEffect(() => {\n    const callback = () => {\n      if (to) setDomRect(to.getBoundingClientRect());\n    };\n\n    window.addEventListener(\"scroll\", callback, { passive: true, capture: false });\n\n    return () => {\n      window.removeEventListener(\"scroll\", callback);\n    };\n  }, [to]);\n\n  if (!to) return null;\n\n  const { x, height, y, width } = to.getBoundingClientRect();\n\n  const style = {\n    computedY: \"\",\n    computedX: \"\",\n  };\n\n  let fixedProperty: \"computedY\" | \"computedX\" = \"computedY\";\n  let unFixedProperty: \"computedY\" | \"computedX\" = \"computedX\";\n  let fixedAxisValue = y;\n  let fixedRelativeValue = height;\n  let alignAxisValue = x;\n  let alignRelativeValue = width;\n\n  if (position === \"left\" || position === \"right\") {\n    fixedProperty = \"computedX\";\n    unFixedProperty = \"computedY\";\n    fixedAxisValue = x;\n    fixedRelativeValue = width;\n    alignAxisValue = y;\n    alignRelativeValue = height;\n  }\n\n  if (position === \"left\" || position === \"top\")\n    style[fixedProperty] = `calc(-100% + ${fixedAxisValue}px)`;\n  else style[fixedProperty] = `${fixedAxisValue + fixedRelativeValue}px`;\n\n  if (align === \"start\") {\n    style[unFixedProperty] = `${alignAxisValue}px`;\n  }\n\n  if (align === \"center\") {\n    style[unFixedProperty] = `calc(${alignAxisValue + alignRelativeValue / 2}px - 50%)`;\n  }\n\n  if (align === \"end\") {\n    style[unFixedProperty] = `calc(${alignAxisValue + alignRelativeValue}px - 100%)`;\n  }\n\n  return style;\n};\n","import type { PropsWithChildren } from \"react\";\nimport { createContext, useContext, useMemo, useState } from \"react\";\nimport type { Nullable, StateSetter } from \"../types\";\n\ntype SelectState = {\n  isOpen: boolean;\n  portalRef: null | HTMLElement;\n  closeOnSelect: boolean;\n};\n\nconst SelectStateContext = createContext<SelectState>({\n  isOpen: false,\n  portalRef: null,\n  closeOnSelect: true,\n});\nconst SelectOpenToggleContext = createContext<VoidFunction>(() => null);\nconst SelectOffContext = createContext<VoidFunction>(() => null);\nconst SelectPortalContext = createContext<StateSetter<Nullable<HTMLElement>>>(() => null);\n\nexport const SelectProvider = ({\n  children,\n  toggleOpen,\n  isOpen,\n  setOff,\n  closeOnSelect,\n}: PropsWithChildren<{\n  isOpen: boolean;\n  closeOnSelect: boolean;\n  toggleOpen: VoidFunction;\n  setOff: VoidFunction;\n}>) => {\n  const [portalRef, setPortalRef] = useState<Nullable<HTMLElement>>(null);\n\n  const portalState = useMemo<SelectState>(\n    () => ({\n      isOpen,\n      portalRef,\n      closeOnSelect,\n    }),\n    [isOpen, portalRef, closeOnSelect],\n  );\n\n  return (\n    <SelectOffContext.Provider value={setOff}>\n      <SelectOpenToggleContext.Provider value={toggleOpen}>\n        <SelectStateContext.Provider value={portalState}>\n          <SelectPortalContext.Provider value={setPortalRef}>\n            {children}\n          </SelectPortalContext.Provider>\n        </SelectStateContext.Provider>\n      </SelectOpenToggleContext.Provider>\n    </SelectOffContext.Provider>\n  );\n};\n\nexport const useSelectState = () => useContext(SelectStateContext);\nexport const useSelectToggle = () => useContext(SelectOpenToggleContext);\nexport const useSelectOff = () => useContext(SelectOffContext);\nexport const useSelectPortal = () => useContext(SelectPortalContext);\n","/** @jsxImportSource @emotion/react */\n\nimport { vars } from \"@imwebme/clay-token\";\nimport type { ComponentPropsWithRef, ElementType, ReactElement } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { ClayProps } from \"./Clay.types\";\n\nexport type ClayComponent = <C extends ElementType = \"div\">(\n  props: ClayProps<C> & {\n    ref?: ComponentPropsWithRef<C>[\"ref\"];\n  },\n) => ReactElement | null;\n\nconst Clay: ClayComponent = forwardRef(\n  <E extends ElementType>(\n    {\n      children,\n      className,\n      _hover,\n      _active,\n      _after,\n      _before,\n      _focus,\n      size,\n      width,\n      height,\n      shape,\n      sx,\n      as,\n      native,\n      ...props\n    }: ClayProps<E>,\n    ref: ComponentPropsWithRef<E>[\"ref\"],\n  ) => {\n    const Element = as || \"div\";\n\n    return (\n      <Element\n        ref={ref}\n        className={className}\n        css={{\n          width: size || width,\n          height: size || height,\n          ...(shape === \"circle\" && {\n            borderRadius: vars.rounded.full,\n          }),\n          \"&:hover\": _hover,\n          \"&:active\": _active,\n          \"&:after\": _after,\n          \"&:before\": _before,\n          \"&:focus\": _focus,\n          ...props,\n          ...sx,\n        }}\n        {...native}\n      >\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst ClayNameSpace = Object.assign(Clay, { displayName: \"Clay\" });\n\nexport { ClayNameSpace as Clay };\n","import type { ComponentPropsWithRef, ElementType } from \"react\";\nimport { forwardRef } from \"react\";\nimport { Clay } from \"../Clay\";\nimport type { ClayComponent, ClayProps } from \"../Clay/Clay.types\";\n\nconst _Flex: ClayComponent = forwardRef(\n  <Element extends ElementType>(\n    props: ClayProps<Element>,\n    ref: ComponentPropsWithRef<Element>[\"ref\"],\n  ) => <Clay ref={ref} display=\"flex\" {...props} />,\n);\n\nconst Flex = Object.assign(_Flex, { displayName: \"Flex\" });\n\nconst _FlexCenter: ClayComponent = forwardRef(\n  <Element extends ElementType>(\n    props: ClayProps<Element>,\n    ref: ComponentPropsWithRef<Element>[\"ref\"],\n  ) => <Flex ref={ref} alignItems=\"center\" justifyContent=\"center\" {...props} />,\n);\n\nconst FlexCenter = Object.assign(_FlexCenter, { displayName: \"Flex.Center\" });\n\nconst _FlexColumn: ClayComponent = forwardRef(\n  <Element extends ElementType>(\n    { as = \"div\" as any, ...props }: ClayProps<Element>,\n    ref: ComponentPropsWithRef<Element>[\"ref\"],\n  ) => <Flex ref={ref} as={as} flexDirection=\"column\" {...props} />,\n);\n\nconst FlexColumn = Object.assign(_FlexColumn, { displayName: \"Flex.Column\" });\n\n/**\n * @deprecated Use `Flex.Column` instead\n */\nexport const Stack = FlexColumn;\n\nconst FlexNameSpace = Object.assign(Flex, { Center: FlexCenter, Column: FlexColumn });\n\nexport { FlexNameSpace as Flex };\n","/** @jsxImportSource @emotion/react */\n\nimport { vars } from \"@imwebme/clay-token\";\nimport type { ElementType, Ref } from \"react\";\nimport { forwardRef } from \"react\";\nimport { Typography } from \"..\";\nimport type { LabelProps } from \"./Label.types\";\n\nconst _Label = <Element extends ElementType>(\n  { type = \"primary\", className, text, bold = true, sx, as, children }: LabelProps<Element>,\n  ref: Ref<HTMLElement>,\n) => {\n  const Element = as || \"label\";\n\n  return (\n    <Element\n      ref={ref as any}\n      className={className}\n      css={{\n        display: \"flex\",\n        gap: vars.spacing[1],\n        alignItems: \"center\",\n        sx,\n      }}\n    >\n      <Typography\n        variant={bold ? \"label-medium-bold\" : \"label-medium\"}\n        colorToken={type === \"primary\" ? \"text\" : \"textSub\"}\n      >\n        {text}\n      </Typography>\n\n      {children}\n    </Element>\n  );\n};\n\nexport const Label = forwardRef(_Label);\n\nLabel.displayName = \"Label\";\n","/** @jsxImportSource @emotion/react */\n\nimport { classNames, vars } from \"@imwebme/clay-token\";\nimport type { ElementType, Ref } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { TypographyProps } from \"./Typography.types\";\n\n/**\n * token은 두 가지 방법으로 넣어줄 수 있습니다. semanticToken, variant\n * 값은 body-medium이 default 입니다.\n */\nconst _Typography = <Element extends ElementType>(\n  {\n    as,\n    semanticToken,\n    variant = \"body-medium\",\n    className = \"\",\n    colorToken = \"text\",\n    children,\n    whiteSpace,\n    numOfLine,\n    sx,\n    textAlign,\n    native,\n  }: TypographyProps<Element>,\n  ref: Ref<HTMLElement>,\n) => {\n  const Element = as || \"p\";\n\n  return (\n    <Element\n      className={`${classNames.typography[semanticToken || variant]} ${className}`}\n      ref={ref as any}\n      css={{\n        color: vars.semantic.color[colorToken],\n        ...(numOfLine && {\n          display: \"-webkit-box\",\n          overflow: \"hidden\",\n          textOverflow: \"ellipsis\",\n          WebkitBoxOrient: \"vertical\",\n          WebkitLineClamp: numOfLine,\n        }),\n        whiteSpace,\n        textAlign,\n        ...sx,\n      }}\n      {...native}\n    >\n      {children}\n    </Element>\n  );\n};\n\nexport const Typography = forwardRef(_Typography);\n\nTypography.displayName = \"Typography\";\n","import type { PropsWithChildren } from \"react\";\nimport { Clay } from \"..\";\nimport { useSelectPortal } from \"./Select.provider\";\n\nexport type SelectTriggerProps = PropsWithChildren;\n\nexport const SelectTrigger = ({ children }: SelectTriggerProps) => {\n  const setPortalRf = useSelectPortal();\n\n  return <Clay ref={setPortalRf}>{children}</Clay>;\n};\n","/** @jsxImportSource @emotion/react */\n\nimport type { CSSObject } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\nimport type { ChangeEventHandler, PropsWithChildren } from \"react\";\nimport type { LabelProps } from \"../..\";\nimport { Clay, Flex, Label, Typography } from \"../..\";\nimport { useSelectPortal, useSelectState, useSelectToggle } from \"../Select.provider\";\nimport { SelectTags } from \"./Select.tags\";\nimport { multiSelectCSS } from \"./SelectTheme.css\";\n\nexport type SelectInputProps = {\n  label?: string;\n  labelProps?: Omit<LabelProps<\"label\">, \"text\">;\n  value?: string;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  placeholder?: string;\n  isDisabled?: boolean;\n  sx?: CSSObject;\n};\n\nexport const SelectInputWrapper = ({\n  label,\n  labelProps,\n  children,\n  isDisabled,\n  isTagInput,\n  sx,\n}: PropsWithChildren<SelectInputProps> & { isTagInput?: boolean }) => {\n  const { isOpen } = useSelectState();\n  const toggle = useSelectToggle();\n  const setPortalRf = useSelectPortal();\n\n  return (\n    <Flex.Column ref={setPortalRf} gap={vars.spacing[15]} sx={sx}>\n      {label && <Label text={label} {...labelProps} />}\n\n      <Flex\n        as=\"button\"\n        alignItems=\"center\"\n        position=\"relative\"\n        css={multiSelectCSS}\n        native={{\n          onClick: () => (isDisabled ? null : toggle()),\n          type: \"button\",\n          disabled: isDisabled,\n        }}\n        overflow=\"hidden\"\n        cursor={isDisabled ? \"not-allowed\" : \"pointer\"}\n        color={vars.semantic.color[isDisabled ? \"textDisabled\" : \"text\"]}\n      >\n        {children}\n\n        <Flex position=\"absolute\" height=\"100%\" right={0}>\n          {isTagInput && (\n            <Clay\n              width=\"8px\"\n              background=\"var(--semantic-gradient-dark-fade-left, linear-gradient(270deg, #FFF 0%, rgba(255, 255, 255, 0.95) 25%, rgba(255, 255, 255, 0.85) 41.02%, rgba(255, 255, 255, 0.78) 50.13%, rgba(255, 255, 255, 0.65) 61.75%, rgba(255, 255, 255, 0.45) 73.87%, rgba(255, 255, 255, 0.25) 86.25%, rgba(255, 255, 255, 0.00) 100%))\"\n            />\n          )}\n\n          <Flex alignItems=\"center\" backgroundColor=\"inherit\" paddingRight={vars.spacing[3]}>\n            {/* ChevronDown */}\n            <svg\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              css={{\n                transform: `rotate(${isOpen ? 180 : 0}deg)`,\n              }}\n            >\n              <path\n                d=\"M6 9L12 15L18 9\"\n                stroke={vars.semantic.color[isDisabled ? \"iconDisabled\" : \"icon\"]}\n                strokeWidth=\"1.2\"\n                vectorEffect=\"non-scaling-stroke\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex.Column>\n  );\n};\n\nexport const SelectInput = ({\n  value,\n  placeholder,\n  label,\n  labelProps,\n  onChange,\n  isDisabled,\n  sx,\n}: SelectInputProps) => {\n  return (\n    <SelectInputWrapper label={label} labelProps={labelProps} isDisabled={isDisabled} sx={sx}>\n      <input\n        readOnly\n        value={value}\n        placeholder={placeholder}\n        disabled={isDisabled}\n        onChange={onChange}\n        css={{\n          width: \"100%\",\n          height: \"100%\",\n          outline: \"none\",\n          cursor: isDisabled ? \"not-allowed\" : \"pointer\",\n          backgroundColor: \"unset\",\n          ...vars.semantic.typography[\"label-medium\"],\n        }}\n      />\n    </SelectInputWrapper>\n  );\n};\n\nexport type SelectMultiInputProps = {\n  values?: string[];\n  setValues?: (values: string[]) => void;\n} & Omit<SelectInputProps, \"value\" | \"onChange\">;\n\nexport const SelectMultiInput = ({\n  values,\n  placeholder,\n  setValues,\n  ...restProps\n}: SelectMultiInputProps) => {\n  return (\n    <SelectInputWrapper {...restProps}>\n      {values && values.length > 0 ? (\n        <SelectTags tags={values} setValues={setValues} />\n      ) : (\n        <Typography colorToken=\"textSub\">{placeholder}</Typography>\n      )}\n    </SelectInputWrapper>\n  );\n};\n","/** @jsxImportSource @emotion/react */\n\nimport { vars } from \"@imwebme/clay-token\";\nimport { useCallback } from \"react\";\nimport { Flex, Typography } from \"../..\";\nimport { selectTagCSS } from \"./SelectTheme.css\";\n\nexport const SelectTags = ({\n  tags,\n  setValues,\n}: {\n  tags: string[];\n  setValues?: (values: string[]) => void;\n}) => {\n  const onClickTag = useCallback(\n    (tag: string) => {\n      const tempTags = [...tags];\n      const index = tempTags.findIndex((_tag) => _tag === tag);\n\n      tempTags.splice(index, 1);\n\n      setValues?.(tempTags);\n    },\n    [setValues, tags],\n  );\n\n  return (\n    <Flex\n      gap={vars.spacing[1]}\n      overflowX=\"scroll\"\n      sx={{\n        \"&::-webkit-scrollbar\": {\n          display: \"none\",\n        },\n      }}\n    >\n      {tags.map((tag) => (\n        <RemovableTag key={tag} tag={tag} onClick={onClickTag} />\n      ))}\n    </Flex>\n  );\n};\n\nconst RemovableTag = ({ tag, onClick }: { tag: string; onClick: (value: string) => void }) => {\n  return (\n    <Flex\n      css={selectTagCSS}\n      native={{\n        onClick: (event) => {\n          event.stopPropagation();\n          onClick(tag);\n        },\n      }}\n    >\n      <Typography variant=\"label-small\" colorToken=\"textSub\">\n        {tag}\n      </Typography>\n\n      {/* X (icon) */}\n      <svg\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className=\"clay-tag-button\"\n        color={vars.semantic.color.iconSub}\n      >\n        <path\n          d=\"M17 7L7 17M7 7L17 17\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.2\"\n          vectorEffect=\"non-scaling-stroke\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    </Flex>\n  );\n};\n","import { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\n\nexport const multiSelectCSS = css({\n  height: \"40px\",\n  padding: `0 ${vars.spacing[3]}`,\n\n  outlineWidth: \"1px\",\n  outlineStyle: \"solid\",\n  outlineOffset: \"-1px\",\n\n  outlineColor: vars.semantic.color.border,\n\n  borderRadius: vars.rounded.medium,\n\n  backgroundColor: vars.semantic.color.surface,\n\n  \"&:not(:has(input:disabled), :disabled):hover\": {\n    outlineColor: vars.semantic.color.borderHover,\n  },\n\n  \"&:not(:has(input:disabled)):focus, &:has(input:focus)\": {\n    outlineColor: vars.semantic.color.focus,\n  },\n\n  \"&:has(input:disabled)\": {\n    backgroundColor: vars.semantic.color.fieldDisabled,\n    outlineColor: \"transparent\",\n  },\n\n  \"&:disabled\": {\n    backgroundColor: vars.semantic.color.fieldDisabled,\n    outlineColor: \"transparent\",\n  },\n});\n\nexport const selectTagCSS = css({\n  flex: \"none\",\n\n  gap: vars.spacing[1],\n  alignItems: \"center\",\n\n  paddingLeft: vars.spacing[2],\n  paddingTop: vars.spacing[15],\n  paddingBottom: vars.spacing[15],\n  paddingRight: vars.spacing[1],\n\n  backgroundColor: vars.semantic.color.surfaceSub,\n\n  borderRadius: vars.rounded.full,\n\n  \"&:hover\": {\n    backgroundColor: vars.semantic.color.actionSecondaryHover,\n\n    \".clay-tag-button\": {\n      color: vars.semantic.color.iconCritical,\n    },\n  },\n\n  \"&:active\": {\n    backgroundColor: vars.semantic.color.actionSecondaryPressed,\n  },\n});\n","import { useState } from \"react\";\n\nexport const useMultiSelect = (defaultValues = []) => {\n  const [values, setValues] = useState<string[]>(defaultValues);\n\n  return {\n    values,\n    setValues,\n  };\n};\n","import { useState } from \"react\";\n\nexport const useSelect = (defaultValue = \"\") => {\n  const [value, setValue] = useState<string>(defaultValue);\n\n  return {\n    value,\n    setValue,\n  };\n};\n"]}