@magiclabs/ui-components 1.18.4 → 1.18.5

package/dist/cjs/components/inputs/dropdown-selector.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-selector.js","sources":["../../../../src/components/inputs/dropdown-selector.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoCaretDown, IcoCaretUp, IcoCheckmark, IcoQuestionCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\n\nexport interface DropdownSelectorProps extends AriaButtonProps {\n  children: ReactNode;\n  onSelect: (value: string) => void;\n  label?: string;\n  tooltipContent?: string;\n  disabled?: boolean;\n  viewMax?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n}\n\nexport interface DropdownOptionProps {\n  value: string;\n  children: string;\n  isFocused?: boolean;\n}\n\ninterface OptionData {\n  value: string;\n  label: string;\n}\n\nexport interface DropdownContextType {\n  selectedOption: OptionData | null;\n  setSelectedOption: (option: OptionData) => void;\n}\n\nconst DropdownContext = createContext<DropdownContextType>({\n  selectedOption: null,\n  setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, children, isFocused }: DropdownOptionProps) => {\n  const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n  const isSelected = selectedOption?.value === value;\n\n  const handleSelectOption = useCallback(() => {\n    setSelectedOption({ value, label: children });\n  }, [setSelectedOption, value, children]);\n\n  return (\n    <HStack\n      px={4}\n      py={1.5}\n      gap={2}\n      bg={isSelected ? 'brand.base' : isFocused ? 'brand.lightest' : ''}\n      _hover={!isSelected ? { bg: 'brand.lightest' } : {}}\n      onClick={handleSelectOption}\n    >\n      <Box w={4}>{isSelected && <IcoCheckmark width={16} height={16} color={token('colors.surface.primary')} />}</Box>\n      <Text size=\"lg\" styles={{ fontWeight: 500, color: token(`colors.${isSelected ? 'surface' : 'text'}.primary`) }}>\n        {children}\n      </Text>\n    </HStack>\n  );\n};\n\nexport const DropdownSelector = ({\n  children,\n  onSelect,\n  label,\n  tooltipContent,\n  disabled,\n  viewMax = 5,\n  ...props\n}: DropdownSelectorProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selectedOption, setSelectedOption] = useState<OptionData | null>(null);\n  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  const maxHeight = viewMax * 2.5 + 1;\n\n  const toggleDropdown = useCallback(() => {\n    setIsOpen(prev => !prev);\n    if (!isOpen) {\n      setFocusedIndex(null);\n      setTimeout(() => dropdownRef.current?.focus());\n    }\n  }, [isOpen]);\n\n  const handleSelect = useCallback(\n    (option: OptionData) => {\n      setSelectedOption(option);\n      onSelect(option.value);\n      setIsOpen(false);\n    },\n    [setSelectedOption],\n  );\n\n  const { buttonProps } = useButton(\n    {\n      ...props,\n      isDisabled: disabled,\n      onPress: toggleDropdown,\n    },\n    buttonRef,\n  );\n\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: event => {\n      if (!isOpen) return;\n\n      let newFocusedIndex = focusedIndex;\n      const childArray = Children.toArray(children);\n\n      switch (event.key) {\n        case 'ArrowUp':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(Children.count(children) - 1);\n          } else {\n            newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'ArrowDown':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(0);\n          } else {\n            newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'Enter':\n          event.preventDefault();\n          buttonRef.current?.focus();\n          if (focusedIndex === null) return;\n          if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n            const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n            if (selectedChild) {\n              setSelectedOption({\n                label: selectedChild.props.children,\n                value: selectedChild.props.value,\n              });\n              onSelect(selectedChild.props.value);\n            }\n          }\n          break;\n        case 'Escape':\n          setIsOpen(false);\n          buttonRef.current?.focus();\n          break;\n        default:\n          break;\n      }\n    },\n  });\n\n  useEffect(() => {\n    const handleClick = (event: MouseEvent) => {\n      if (!dropdownRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n    };\n  }, []);\n\n  return (\n    <DropdownContext.Provider value={{ selectedOption, setSelectedOption: handleSelect }}>\n      <VStack gap={2} w=\"full\" alignItems=\"flex-start\">\n        <HStack gap={2} opacity={disabled ? 0.3 : ''} transition={'all linear 120ms'}>\n          {label && (\n            <Text size=\"sm\" styles={{ fontWeight: 500 }}>\n              {label}\n            </Text>\n          )}\n\n          {tooltipContent && (\n            <Tooltip isDisabled={disabled} content={tooltipContent}>\n              <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n            </Tooltip>\n          )}\n        </HStack>\n\n        <button\n          className={css({\n            w: 'full',\n            h: 'fit-content',\n            borderWidth: 'thin',\n            borderColor: 'neutral.secondary',\n            rounded: 'xl',\n            transition: 'all linear 120ms',\n            position: 'relative',\n            cursor: 'pointer',\n            outlineColor: 'brand.base',\n            outlineStyle: isFocusVisible ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 0.5,\n            _hover: { borderColor: 'neutral.primary' },\n            _disabled: { opacity: 0.3, pointerEvents: 'none' },\n          })}\n          ref={buttonRef}\n          {...mergeProps(buttonProps, focusProps, keyboardProps)}\n        >\n          <HStack w=\"full\" h={12} p={4} justifyContent=\"space-between\">\n            <Text size=\"lg\" styles={{ color: token(`colors.text.${selectedOption?.label ? 'primary' : 'tertiary'}`) }}>\n              {selectedOption?.label ?? 'Select one'}\n            </Text>\n            {isOpen ? (\n              <IcoCaretUp width={18} height={18} color={token('colors.brand.base')} />\n            ) : (\n              <IcoCaretDown width={18} height={18} color={token('colors.brand.base')} />\n            )}\n          </HStack>\n\n          {isOpen && (\n            <Box\n              ref={dropdownRef}\n              tabIndex={-1}\n              py={2}\n              bg=\"surface.primary\"\n              position=\"absolute\"\n              w=\"full\"\n              rounded=\"input\"\n              top={55}\n              boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n              style={{ maxHeight: `${maxHeight}rem` }}\n              overflowY=\"auto\"\n              outline=\"none\"\n              zIndex=\"max\"\n            >\n              {Children.map(children, (child, index) =>\n                cloneElement(child as ReactElement<DropdownOptionProps>, {\n                  isFocused: index === focusedIndex,\n                }),\n              )}\n            </Box>\n          )}\n        </button>\n      </VStack>\n    </DropdownContext.Provider>\n  );\n};\n"],"names":["DropdownContext","createContext","DropdownOption","value","children","isFocused","selectedOption","setSelectedOption","useContext","isSelected","handleSelectOption","useCallback","_jsxs","HStack","_jsx","Box","IcoCheckmark","token","Text","DropdownSelector","onSelect","label","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","Children","selectedChild","_b","useEffect","handleClick","VStack","Tooltip","IcoQuestionCircleFill","css","mergeProps","IcoCaretUp","IcoCaretDown","child","index","cloneElement"],"mappings":"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"}

package/dist/es/components/inputs/dropdown-selector.js

@@ -1,2 +0,0 @@
-import{jsxs as p,jsx as t}from"react/jsx-runtime";import"../feedback/callout.js";import{css as z}from"@styled/css";import{HStack as D,Box as W,VStack as L}from"@styled/jsx";import{token as d}from"@styled/tokens";import N from"../icons/ico-caret-down.js";import T from"../icons/ico-caret-up.js";import V from"../icons/ico-checkmark.js";import M from"../icons/ico-question-circle-fill.js";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import E from"../primitives/text.js";import"../primitives/portal.js";import{createContext as U,useContext as Y,useCallback as O,useState as $,useRef as j,Children as m,useEffect as q,cloneElement as G}from"react";import"../../hooks/useToast.js";import"../../recipes/toast.js";import J from"../feedback/tooltip.js";import{useButton as Q,useFocusRing as X,useKeyboard as Z,mergeProps as ee}from"react-aria";const A=U({selectedOption:null,setSelectedOption:()=>{}}),oe=({value:r,children:i,isFocused:f})=>{const{selectedOption:h,setSelectedOption:s}=Y(A),a=h?.value===r,w=O(()=>{s({value:r,label:i})},[s,r,i]);return p(D,{px:4,py:1.5,gap:2,bg:a?"brand.base":f?"brand.lightest":"",_hover:a?{}:{bg:"brand.lightest"},onClick:w,children:[t(W,{w:4,children:a&&t(V,{width:16,height:16,color:d("colors.surface.primary")})}),t(E,{size:"lg",styles:{fontWeight:500,color:d(`colors.${a?"surface":"text"}.primary`)},children:i})]})},te=({children:r,onSelect:i,label:f,tooltipContent:h,disabled:s,viewMax:a=5,...w})=>{var x;const[c,b]=$(!1),[k,S]=$(null),[o,u]=$(null),v=j(null),C=j(null),F=a*2.5+1,B=O(()=>{b(e=>!e),c||(u(null),setTimeout(()=>{var e;return(e=C.current)===null||e===void 0?void 0:e.focus()}))},[c]),H=O(e=>{S(e),i(e.value),b(!1)},[S]),{buttonProps:I}=Q({...w,isDisabled:s,onPress:B},v),{focusProps:R,isFocusVisible:_}=X(),{keyboardProps:K}=Z({onKeyDown:e=>{var l,n;if(!c)return;let y=o;const P=m.toArray(r);switch(e.key){case"ArrowUp":e.preventDefault(),o===null?u(m.count(r)-1):(y=o>0?o-1:m.count(r)-1,u(y));break;case"ArrowDown":e.preventDefault(),o===null?u(0):(y=o<m.count(r)-1?o+1:0,u(y));break;case"Enter":if(e.preventDefault(),(l=v.current)===null||l===void 0||l.focus(),o===null)return;if(o>=0&&o<P.length){const g=P[o];g&&(S({label:g.props.children,value:g.props.value}),i(g.props.value))}break;case"Escape":b(!1),(n=v.current)===null||n===void 0||n.focus();break}}});return q(()=>{const e=l=>{var n;!((n=C.current)===null||n===void 0)&&n.contains(l.target)||b(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),t(A.Provider,{value:{selectedOption:k,setSelectedOption:H},children:p(L,{gap:2,w:"full",alignItems:"flex-start",children:[p(D,{gap:2,opacity:s?.3:"",transition:"all linear 120ms",children:[f&&t(E,{size:"sm",styles:{fontWeight:500},children:f}),h&&t(J,{isDisabled:s,content:h,children:t(M,{className:z({w:4,h:4,color:"neutral.primary"})})})]}),p("button",{className:z({w:"full",h:"fit-content",borderWidth:"thin",borderColor:"neutral.secondary",rounded:"xl",transition:"all linear 120ms",position:"relative",cursor:"pointer",outlineColor:"brand.base",outlineStyle:_?"solid":"none",outlineWidth:"thick",outlineOffset:.5,_hover:{borderColor:"neutral.primary"},_disabled:{opacity:.3,pointerEvents:"none"}}),ref:v,...ee(I,R,K),children:[p(D,{w:"full",h:12,p:4,justifyContent:"space-between",children:[t(E,{size:"lg",styles:{color:d(`colors.text.${k?.label?"primary":"tertiary"}`)},children:(x=k?.label)!==null&&x!==void 0?x:"Select one"}),c?t(T,{width:18,height:18,color:d("colors.brand.base")}):t(N,{width:18,height:18,color:d("colors.brand.base")})]}),c&&t(W,{ref:C,tabIndex:-1,py:2,bg:"surface.primary",position:"absolute",w:"full",rounded:"input",top:55,boxShadow:"4px 8px 20px 0px rgba(0, 0, 0, 0.15)",style:{maxHeight:`${F}rem`},overflowY:"auto",outline:"none",zIndex:"max",children:m.map(r,(e,l)=>G(e,{isFocused:l===o}))})]})]})})};export{oe as DropdownOption,te as DropdownSelector};
-//# sourceMappingURL=dropdown-selector.js.map

package/dist/es/components/inputs/dropdown-selector.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-selector.js","sources":["../../../../src/components/inputs/dropdown-selector.tsx"],"sourcesContent":["import { Tooltip } from '@components/feedback';\nimport { IcoCaretDown, IcoCaretUp, IcoCheckmark, IcoQuestionCircleFill } from '@components/icons';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Box, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing, useKeyboard } from 'react-aria';\n\nexport interface DropdownSelectorProps extends AriaButtonProps {\n  children: ReactNode;\n  onSelect: (value: string) => void;\n  label?: string;\n  tooltipContent?: string;\n  disabled?: boolean;\n  viewMax?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n}\n\nexport interface DropdownOptionProps {\n  value: string;\n  children: string;\n  isFocused?: boolean;\n}\n\ninterface OptionData {\n  value: string;\n  label: string;\n}\n\nexport interface DropdownContextType {\n  selectedOption: OptionData | null;\n  setSelectedOption: (option: OptionData) => void;\n}\n\nconst DropdownContext = createContext<DropdownContextType>({\n  selectedOption: null,\n  setSelectedOption: () => {},\n});\n\nexport const DropdownOption = ({ value, children, isFocused }: DropdownOptionProps) => {\n  const { selectedOption, setSelectedOption } = useContext(DropdownContext);\n  const isSelected = selectedOption?.value === value;\n\n  const handleSelectOption = useCallback(() => {\n    setSelectedOption({ value, label: children });\n  }, [setSelectedOption, value, children]);\n\n  return (\n    <HStack\n      px={4}\n      py={1.5}\n      gap={2}\n      bg={isSelected ? 'brand.base' : isFocused ? 'brand.lightest' : ''}\n      _hover={!isSelected ? { bg: 'brand.lightest' } : {}}\n      onClick={handleSelectOption}\n    >\n      <Box w={4}>{isSelected && <IcoCheckmark width={16} height={16} color={token('colors.surface.primary')} />}</Box>\n      <Text size=\"lg\" styles={{ fontWeight: 500, color: token(`colors.${isSelected ? 'surface' : 'text'}.primary`) }}>\n        {children}\n      </Text>\n    </HStack>\n  );\n};\n\nexport const DropdownSelector = ({\n  children,\n  onSelect,\n  label,\n  tooltipContent,\n  disabled,\n  viewMax = 5,\n  ...props\n}: DropdownSelectorProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selectedOption, setSelectedOption] = useState<OptionData | null>(null);\n  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  const maxHeight = viewMax * 2.5 + 1;\n\n  const toggleDropdown = useCallback(() => {\n    setIsOpen(prev => !prev);\n    if (!isOpen) {\n      setFocusedIndex(null);\n      setTimeout(() => dropdownRef.current?.focus());\n    }\n  }, [isOpen]);\n\n  const handleSelect = useCallback(\n    (option: OptionData) => {\n      setSelectedOption(option);\n      onSelect(option.value);\n      setIsOpen(false);\n    },\n    [setSelectedOption],\n  );\n\n  const { buttonProps } = useButton(\n    {\n      ...props,\n      isDisabled: disabled,\n      onPress: toggleDropdown,\n    },\n    buttonRef,\n  );\n\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  const { keyboardProps } = useKeyboard({\n    onKeyDown: event => {\n      if (!isOpen) return;\n\n      let newFocusedIndex = focusedIndex;\n      const childArray = Children.toArray(children);\n\n      switch (event.key) {\n        case 'ArrowUp':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(Children.count(children) - 1);\n          } else {\n            newFocusedIndex = focusedIndex > 0 ? focusedIndex - 1 : Children.count(children) - 1;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'ArrowDown':\n          event.preventDefault();\n          if (focusedIndex === null) {\n            setFocusedIndex(0);\n          } else {\n            newFocusedIndex = focusedIndex < Children.count(children) - 1 ? focusedIndex + 1 : 0;\n            setFocusedIndex(newFocusedIndex);\n          }\n          break;\n        case 'Enter':\n          event.preventDefault();\n          buttonRef.current?.focus();\n          if (focusedIndex === null) return;\n          if (focusedIndex >= 0 && focusedIndex < childArray.length) {\n            const selectedChild = childArray[focusedIndex] as ReactElement<DropdownOptionProps>;\n            if (selectedChild) {\n              setSelectedOption({\n                label: selectedChild.props.children,\n                value: selectedChild.props.value,\n              });\n              onSelect(selectedChild.props.value);\n            }\n          }\n          break;\n        case 'Escape':\n          setIsOpen(false);\n          buttonRef.current?.focus();\n          break;\n        default:\n          break;\n      }\n    },\n  });\n\n  useEffect(() => {\n    const handleClick = (event: MouseEvent) => {\n      if (!dropdownRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n    };\n  }, []);\n\n  return (\n    <DropdownContext.Provider value={{ selectedOption, setSelectedOption: handleSelect }}>\n      <VStack gap={2} w=\"full\" alignItems=\"flex-start\">\n        <HStack gap={2} opacity={disabled ? 0.3 : ''} transition={'all linear 120ms'}>\n          {label && (\n            <Text size=\"sm\" styles={{ fontWeight: 500 }}>\n              {label}\n            </Text>\n          )}\n\n          {tooltipContent && (\n            <Tooltip isDisabled={disabled} content={tooltipContent}>\n              <IcoQuestionCircleFill className={css({ w: 4, h: 4, color: 'neutral.primary' })} />\n            </Tooltip>\n          )}\n        </HStack>\n\n        <button\n          className={css({\n            w: 'full',\n            h: 'fit-content',\n            borderWidth: 'thin',\n            borderColor: 'neutral.secondary',\n            rounded: 'xl',\n            transition: 'all linear 120ms',\n            position: 'relative',\n            cursor: 'pointer',\n            outlineColor: 'brand.base',\n            outlineStyle: isFocusVisible ? 'solid' : 'none',\n            outlineWidth: 'thick',\n            outlineOffset: 0.5,\n            _hover: { borderColor: 'neutral.primary' },\n            _disabled: { opacity: 0.3, pointerEvents: 'none' },\n          })}\n          ref={buttonRef}\n          {...mergeProps(buttonProps, focusProps, keyboardProps)}\n        >\n          <HStack w=\"full\" h={12} p={4} justifyContent=\"space-between\">\n            <Text size=\"lg\" styles={{ color: token(`colors.text.${selectedOption?.label ? 'primary' : 'tertiary'}`) }}>\n              {selectedOption?.label ?? 'Select one'}\n            </Text>\n            {isOpen ? (\n              <IcoCaretUp width={18} height={18} color={token('colors.brand.base')} />\n            ) : (\n              <IcoCaretDown width={18} height={18} color={token('colors.brand.base')} />\n            )}\n          </HStack>\n\n          {isOpen && (\n            <Box\n              ref={dropdownRef}\n              tabIndex={-1}\n              py={2}\n              bg=\"surface.primary\"\n              position=\"absolute\"\n              w=\"full\"\n              rounded=\"input\"\n              top={55}\n              boxShadow=\"4px 8px 20px 0px rgba(0, 0, 0, 0.15)\"\n              style={{ maxHeight: `${maxHeight}rem` }}\n              overflowY=\"auto\"\n              outline=\"none\"\n              zIndex=\"max\"\n            >\n              {Children.map(children, (child, index) =>\n                cloneElement(child as ReactElement<DropdownOptionProps>, {\n                  isFocused: index === focusedIndex,\n                }),\n              )}\n            </Box>\n          )}\n        </button>\n      </VStack>\n    </DropdownContext.Provider>\n  );\n};\n"],"names":["DropdownContext","createContext","DropdownOption","value","children","isFocused","selectedOption","setSelectedOption","useContext","isSelected","handleSelectOption","useCallback","_jsxs","HStack","_jsx","Box","IcoCheckmark","token","Text","DropdownSelector","onSelect","label","tooltipContent","disabled","viewMax","props","isOpen","setIsOpen","useState","focusedIndex","setFocusedIndex","buttonRef","useRef","dropdownRef","maxHeight","toggleDropdown","prev","_a","handleSelect","option","buttonProps","useButton","focusProps","isFocusVisible","useFocusRing","keyboardProps","useKeyboard","event","newFocusedIndex","childArray","Children","selectedChild","_b","useEffect","handleClick","VStack","Tooltip","IcoQuestionCircleFill","css","mergeProps","IcoCaretUp","IcoCaretDown","child","index","cloneElement"],"mappings":"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"}

package/dist/types/components/inputs/dropdown-selector.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-selector.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdown-selector.tsx"],"names":[],"mappings":"AAMA,OAAO,EAKL,SAAS,EAMV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,eAAe,EAAoD,MAAM,YAAY,CAAC;AAE/F,MAAM,WAAW,qBAAsB,SAAQ,eAAe;IAC5D,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;CAClD;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,cAAc,EAAE,UAAU,GAAG,IAAI,CAAC;IAClC,iBAAiB,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACjD;AAOD,eAAO,MAAM,cAAc,mCAAoC,mBAAmB,4CAuBjF,CAAC;AAEF,eAAO,MAAM,gBAAgB,+EAQ1B,qBAAqB,4CAiLvB,CAAC"}