intelicoreact 2.0.18 → 2.0.20

package/dist/es/Molecular/InputCustomFetch/InputCustomFetch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputCustomFetch.js","names":[],"sources":["../../../../src/Molecular/InputCustomFetch/InputCustomFetch.tsx"],"sourcesContent":["import type { InputCustomFetchProps } from './model/types';\nimport cn from 'classnames';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { AlertTriangle, X } from 'react-feather';\nimport Input from '../../Atomic/FormElements/Input/Input';\nimport Spinner from '../../Atomic/Layout/Spinner/Spinner';\nimport Hint from '../../Atomic/UI/Hint/Hint';\n\nimport useIsMobile from '../../Functions/useIsMobile/useIsMobile';\n\nimport { useDebouncedCallback } from './lib/hooks/useDebouncedCallback';\nimport { useFetchWithAbort } from './lib/hooks/useFetchWithAbort';\nimport { compareValues, getIsValidNumber } from './lib/utils';\n\nimport './InputCustomFetch.scss';\n\nconst RC = 'input-custom-fetch';\nconst DEFAULT_HINT_MESSAGE = 'Please select a valid option from the list';\n\nfunction noop(): void {}\n\nfunction InputCustomFetch<TOption = any, TValue = any>(\n  props: InputCustomFetchProps<TOption, TValue>,\n): JSX.Element {\n  const {\n    label,\n    className = '',\n    isClearable = true,\n    isKeyboardControlled = true,\n    fieldKey = '',\n    testId = '',\n    throttle: throttleTime = 500,\n    loader = '',\n    noItemsMessage = '',\n    error,\n    value = '' as TValue,\n    onChange = noop,\n    onChangeValueTransformer,\n    disabled,\n    isDisabled,\n    noValidate = false,\n    attributesOfNativeInput,\n    optionToValue,\n    valueToSearchString,\n    isValidValue,\n    renderSelectedItem,\n    renderListItem,\n    renderHintMessage,\n  } = props;\n\n  const { isMobile } = useIsMobile();\n\n  // Refs\n  const inputRef = useRef<any>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const listOverlayRef = useRef<HTMLDivElement>(null);\n  const listWrapperRef = useRef<HTMLDivElement>(null);\n  const listHeaderRef = useRef<HTMLDivElement>(null);\n  const previousValueRef = useRef<TValue>(value);\n\n  // State\n  const [isScrollableList] = useState<boolean | null>(null);\n  const [scrollTop] = useState(0);\n\n  const [innerValue, setInnerValue] = useState<TValue>(value);\n  const [tempInnerValue, setTempInnerValue] = useState<TValue | null>(null);\n\n  const [listItems, setListItems] = useState<TOption[]>([]);\n  const [isLoading] = useState(false);\n  const [isListLoading, setIsListLoading] = useState(false);\n\n  const [hightlightedIndex, setHightlightedIndex] = useState<number | null>(null);\n\n  const [isFocused, setIsFocused] = useState(false);\n  const [isListVisible, setIsListVisible] = useState(false);\n\n  // ===================== FETCH LOGIC =====================\n\n  const { fetchWithAbort, abortControllerRef } = useFetchWithAbort(props);\n\n  const execute = useCallback(\n    async (searchQuery: string): Promise<void> => {\n      if (!searchQuery?.length) return;\n\n      setIsListLoading(true);\n      try {\n        const items = await fetchWithAbort(searchQuery);\n        setListItems(items);\n      }\n      catch {\n        setListItems([]);\n      }\n      finally {\n        setIsListLoading(false);\n      }\n    },\n    [fetchWithAbort],\n  );\n\n  const debouncedExecute = useDebouncedCallback(\n    execute,\n    getIsValidNumber(throttleTime) ? throttleTime : 0,\n  );\n\n  const getOptionsList = useCallback(() => {\n    const searchString = valueToSearchString(innerValue);\n    if (!searchString?.length) return;\n\n    debouncedExecute(searchString);\n  }, [innerValue, valueToSearchString, debouncedExecute]);\n\n  // ===================== VALIDATION =====================\n\n  const isWrongValue = useMemo(() => {\n    if (noValidate) return false;\n\n    const searchString = valueToSearchString(innerValue);\n    if (searchString === '') return false;\n\n    if (isValidValue) {\n      return !isValidValue(innerValue);\n    }\n\n    return false;\n  }, [innerValue, noValidate, isValidValue, valueToSearchString]);\n\n  // ===================== HANDLERS =====================\n\n  const setItemAsInnerValue = useCallback(\n    (e: React.MouseEvent | null, item: TOption) => {\n      if (e instanceof Event) {\n        e.preventDefault();\n        e.stopPropagation();\n      }\n\n      setTimeout(() => {\n        const newValue = optionToValue(item);\n        setInnerValue(newValue);\n\n        if (isMobile) {\n          setIsListVisible(false);\n        }\n      }, 0);\n    },\n    [optionToValue, isMobile],\n  );\n\n  const onClearClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      if (!isMobile) {\n        setIsListVisible(false);\n      }\n\n      setInnerValue('' as TValue);\n\n      inputRef?.current?.focus();\n      setTimeout(() => setIsFocused(true), 0);\n    },\n    [isMobile],\n  );\n\n  const onOverlayClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.target === listOverlayRef?.current) {\n        e.stopPropagation();\n        e.preventDefault();\n        setIsListVisible(false);\n        if (tempInnerValue !== null) {\n          setInnerValue(tempInnerValue);\n          onChange(\n            !onChangeValueTransformer || typeof onChangeValueTransformer !== 'function'\n              ? tempInnerValue\n              : onChangeValueTransformer(tempInnerValue),\n          );\n        }\n      }\n    },\n    [tempInnerValue, onChange, onChangeValueTransformer],\n  );\n\n  const onKeyDown = useCallback(\n    (keyCode: number | string): void => {\n      if (!isListVisible || !isKeyboardControlled) return;\n\n      if (keyCode === 13) {\n        // Enter\n        if (hightlightedIndex !== null && listItems[hightlightedIndex]) {\n          setItemAsInnerValue(null, listItems[hightlightedIndex]);\n          setHightlightedIndex(null);\n          inputRef?.current?.blur();\n        }\n      }\n      else {\n        let newHightlightedIndex: number | null = null;\n        const listItemsElements = document.getElementsByClassName(\n          `${RC}__list--item`,\n        );\n\n        const listHeight = listRef?.current?.getBoundingClientRect()?.height || 0;\n        const listScrollTop = listRef?.current?.scrollTop || 0;\n        const lastItemIndex = listItems.length - 1;\n\n        if (keyCode === 40) {\n          // Down\n          if (hightlightedIndex === null || hightlightedIndex === lastItemIndex) {\n            newHightlightedIndex = 0;\n          }\n          else if (hightlightedIndex + 1 < listItems.length) {\n            newHightlightedIndex = hightlightedIndex + 1;\n          }\n        }\n        else if (keyCode === 38) {\n          // Up\n          if (hightlightedIndex === null || hightlightedIndex === 0) {\n            newHightlightedIndex = lastItemIndex;\n          }\n          else if (hightlightedIndex - 1 >= 0) {\n            newHightlightedIndex = hightlightedIndex - 1;\n          }\n        }\n\n        if (newHightlightedIndex !== null) {\n          const newHightlightedElement = listItemsElements[\n            newHightlightedIndex\n          ] as HTMLElement;\n          const newHightlightedElementHeight\n            = newHightlightedElement?.getBoundingClientRect()?.height || 0;\n          const newHightlightedElementTopInList\n            = newHightlightedElement?.offsetTop || 0;\n\n          if (\n            newHightlightedElementTopInList + newHightlightedElementHeight\n            > listScrollTop + listHeight\n          ) {\n            if (\n              Math.abs(\n                newHightlightedElementTopInList\n                + newHightlightedElementHeight\n                - (listScrollTop + listHeight),\n              ) <= newHightlightedElementHeight\n            ) {\n              listRef?.current?.scrollTo(\n                0,\n                listScrollTop + newHightlightedElementHeight,\n              );\n            }\n            else {\n              listRef?.current?.scrollTo(0, newHightlightedElementTopInList);\n            }\n          }\n          else if (newHightlightedElementTopInList < listScrollTop) {\n            if (\n              Math.abs(newHightlightedElementTopInList - listScrollTop)\n              < newHightlightedElementHeight\n            ) {\n              listRef?.current?.scrollTo(\n                0,\n                listScrollTop - newHightlightedElementHeight,\n              );\n            }\n            else {\n              listRef?.current?.scrollTo(0, newHightlightedElementTopInList);\n            }\n          }\n\n          if (!isMobile) setHightlightedIndex(newHightlightedIndex);\n        }\n      }\n    },\n    [\n      isListVisible,\n      isKeyboardControlled,\n      hightlightedIndex,\n      listItems,\n      isMobile,\n      setItemAsInnerValue,\n    ],\n  );\n\n  // ===================== RENDER HELPERS =====================\n\n  const getHintMessage = useCallback((): string => {\n    if (!renderHintMessage || typeof renderHintMessage !== 'function')\n      return DEFAULT_HINT_MESSAGE;\n\n    return renderHintMessage(innerValue);\n  }, [renderHintMessage, innerValue]);\n\n  const getSelectedItemLabel = useCallback(\n    (val: TValue = innerValue): string => {\n      if (!val) return '';\n\n      const searchString = valueToSearchString(val);\n      if (typeof searchString === 'string') return searchString;\n\n      if (typeof renderSelectedItem === 'function') {\n        return renderSelectedItem(val);\n      }\n\n      return String(val);\n    },\n    [innerValue, valueToSearchString, renderSelectedItem],\n  );\n\n  const getListItemLabel = useCallback(\n    (item: TOption): React.ReactNode => {\n      if (!renderListItem || typeof renderListItem !== 'function') {\n        return String(item);\n      }\n\n      return renderListItem(item);\n    },\n    [renderListItem],\n  );\n\n  const setListHeight = useCallback(() => {\n    if (listWrapperRef?.current && listHeaderRef?.current && listRef.current) {\n      const listWrapperHeight\n        = listWrapperRef?.current?.getBoundingClientRect()?.height || 0;\n      const listWrapperStyles = getComputedStyle(listWrapperRef?.current);\n\n      const listHeaderHeight\n        = listHeaderRef?.current?.getBoundingClientRect()?.height || 0;\n\n      const listHeight\n        = listWrapperHeight\n          - listHeaderHeight\n          - Number.parseInt(listWrapperStyles.paddingBottom || '0', 10);\n\n      listRef.current.style.maxHeight = `${listHeight}px`;\n    }\n  }, []);\n\n  const resetListHeight = useCallback(() => {\n    if (listRef.current) {\n      listRef.current.style.maxHeight = `initial`;\n    }\n  }, []);\n\n  // ===================== EFFECTS =====================\n\n  useEffect(() => {\n    if (!compareValues(innerValue, previousValueRef.current)) {\n      const searchString = valueToSearchString(innerValue);\n\n      if (searchString) {\n        onChange(\n          !onChangeValueTransformer || typeof onChangeValueTransformer !== 'function'\n            ? innerValue\n            : onChangeValueTransformer(innerValue),\n        );\n\n        if (!isListVisible) setIsListVisible(true);\n        if (isFocused) getOptionsList();\n      }\n      else {\n        onChange(innerValue);\n      }\n    }\n  }, [innerValue, valueToSearchString, onChange, onChangeValueTransformer, isListVisible, isFocused, getOptionsList]);\n\n  useEffect(() => {\n    if (!isFocused && !isMobile) {\n      setIsListVisible(false);\n      setHightlightedIndex(null);\n    }\n  }, [isFocused, isMobile]);\n\n  useEffect(() => {\n    if (!isListVisible) {\n      setListItems([]);\n      resetListHeight();\n    }\n\n    if (isMobile && isListVisible) {\n      setTempInnerValue(innerValue);\n      setListHeight();\n    }\n  }, [isListVisible, isMobile, innerValue, resetListHeight, setListHeight]);\n\n  useEffect(() => {\n    if (!compareValues(value, innerValue)) {\n      setInnerValue(value);\n    }\n\n    previousValueRef.current = value;\n  }, [value, innerValue]);\n\n  // Cleanup abort controller on unmount\n  useEffect(() => {\n    return () => {\n      if (abortControllerRef.current) {\n        abortControllerRef.current.abort();\n      }\n    };\n  }, [abortControllerRef]);\n\n  // ===================== RENDER COMPONENTS =====================\n\n  const renderSearchableInput = (): JSX.Element => {\n    const inputValue = getSelectedItemLabel();\n\n    return (\n      <div className={cn(`${RC}__input-wrapper`)}>\n        <Input\n          ref={inputRef}\n          testId={`${RC}--input--key-${testId || fieldKey}`}\n          className={cn(`${RC}__input`, className)}\n          value={inputValue}\n          onChange={(val: string) => setInnerValue(val as TValue)}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          onKeyDown={onKeyDown}\n          attributesOfNativeInput={attributesOfNativeInput}\n          disabled={disabled || isDisabled}\n        />\n        {isWrongValue && (\n          <div\n            className={cn(`${RC}__alert`, {\n              [`${RC}__alert--visible`]: !isFocused,\n            })}\n          >\n            <Hint\n              side=\"left\"\n              hint={getHintMessage()}\n              icon={<AlertTriangle />}\n              handleOpenType=\"hover\"\n            />\n          </div>\n        )}\n        {isClearable && (!isWrongValue || isFocused) && !(disabled || isDisabled) && inputValue && (\n          <div\n            className={cn(`${RC}__clear-query`, {\n              [`${RC}__clear-query--input-focused`]: isFocused,\n            })}\n          >\n            <X onClick={onClearClick} />\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  const renderInput = (): JSX.Element => {\n    const inputValue = getSelectedItemLabel(\n      isListVisible ? tempInnerValue || innerValue : innerValue,\n    );\n\n    return (\n      <div className={cn(`${RC}__input-wrapper`)}>\n        <Input\n          testId={`${RC}--input--key-${testId || fieldKey}`}\n          className={cn(`${RC}__input`, className)}\n          value={inputValue}\n          onChange={(val: string) => setInnerValue(val as TValue)}\n          onFocus={(e: any) => {\n            setIsListVisible(true);\n            e?.target?.blur();\n            setTimeout(() => inputRef?.current?.focus(), 200);\n          }}\n          disabled={disabled || isDisabled}\n        />\n      </div>\n    );\n  };\n\n  const renderLoader = (): JSX.Element => {\n    return (\n      <div className={`${RC}__list--loader`}>\n        {loader || 'Loading...'}\n      </div>\n    );\n  };\n\n  const renderList = (): JSX.Element => {\n    const renderListItemComponent = (item: TOption, i: number): JSX.Element => {\n      return (\n        <div\n          key={`${RC}__list-item${i}`}\n          className={cn(`${RC}__list--item`, {\n            [`${RC}__list--item-hightlighted`]: i === hightlightedIndex,\n          })}\n          onMouseDown={e => setItemAsInnerValue(e, item)}\n        >\n          {getListItemLabel(item)}\n        </div>\n      );\n    };\n\n    const renderNoItems = (): JSX.Element => {\n      return (\n        <div className={`${RC}__list--no-items`}>\n          {isMobile && !valueToSearchString(innerValue)?.length\n            ? 'Please begin typing'\n            : noItemsMessage || 'No Items'}\n        </div>\n      );\n    };\n\n    const renderListDesktop = (): JSX.Element => {\n      return (\n        <div className={`${RC}__list-wrapper`} ref={listWrapperRef}>\n          <div className={`${RC}__list`} ref={listRef}>\n            {isListLoading\n              ? renderLoader()\n              : listItems?.length\n                ? listItems?.map(renderListItemComponent)\n                : renderNoItems()}\n          </div>\n        </div>\n      );\n    };\n\n    const renderListMobile = (): JSX.Element => {\n      return (\n        <div\n          className={`${RC}__list-overlay`}\n          ref={listOverlayRef}\n          onClick={onOverlayClick}\n        >\n          <div className={`${RC}__list-wrapper`} ref={listWrapperRef}>\n            {isMobile && (\n              <div\n                ref={listHeaderRef}\n                className={cn(`${RC}__list-header`, {\n                  [`${RC}__list-header-with-shadow`]:\n                    isScrollableList && isMobile,\n                  [`${RC}__list-header-with-shadow-hidden`]: scrollTop === 0,\n                })}\n              >\n                <div className={cn(`${RC}__list-header-row`)}>\n                  <div className={cn(`${RC}__list-label`)}>\n                    {label || 'Select'}\n                  </div>\n                  <div\n                    className={cn(`${RC}__list-close-icon`)}\n                    onClick={() => setIsListVisible(false)}\n                  >\n                    <X onClick={() => setIsListVisible(false)} />\n                  </div>\n                </div>\n                <div className={cn(`${RC}__list-header-row`)}>\n                  {renderSearchableInput()}\n                </div>\n              </div>\n            )}\n            <div className={`${RC}__list`} ref={listRef}>\n              {isListLoading\n                ? renderLoader()\n                : listItems?.length\n                  ? listItems?.map(renderListItemComponent)\n                  : renderNoItems()}\n            </div>\n          </div>\n        </div>\n      );\n    };\n\n    return isMobile ? renderListMobile() : renderListDesktop();\n  };\n\n  return (\n    <div\n      className={cn(RC, {\n        [`${RC}--error`]: error || (isWrongValue && !isFocused),\n        [`${RC}--disabled`]: disabled || isDisabled,\n      })}\n    >\n      {isLoading && <Spinner size=\"small\" />}\n      {isMobile ? renderInput() : renderSearchableInput()}\n      {isListVisible && renderList()}\n    </div>\n  );\n}\n\nexport default InputCustomFetch;\n"],"mappings":"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"}

package/dist/es/Molecular/InputCustomFetch/InputCustomFetch.styles.css

@@ -0,0 +1,358 @@
+/* COLORS*/
+/*GRID*/
+/*FONTS*/
+/*Z-INDEX*/
+/*OTHER*/
+/* THEME COLORS */
+/* COLORS */
+/* GRID */
+/* FONTS */
+:export {
+  primaryColor: #3f51b5;
+  secondaryColor: #f50057;
+  successColor: #4caf50;
+  warningColor: #ff9800;
+  errorColor: #f44336;
+  infoColor: #2196f3;
+  backgroundColor: #ffffff;
+  textColor: #212121;
+  textSecondaryColor: #757575;
+}
+
+.input-custom-fetch {
+  position: relative;
+  width: 100%;
+}
+.input-custom-fetch--error .input__wrap {
+  border-color: #fa564c !important;
+}
+.input-custom-fetch--disabled {
+  pointer-events: none;
+  opacity: 0.6;
+}
+.input-custom-fetch__clear-query {
+  position: absolute;
+  top: 50%;
+  right: 4px;
+  display: flex;
+  visibility: hidden;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+.input-custom-fetch__alert {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  display: flex;
+  visibility: hidden;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+.input-custom-fetch__alert--visible {
+  visibility: visible;
+}
+.input-custom-fetch__alert svg {
+  width: 16px;
+  height: 16px;
+  color: #fa564c;
+}
+.input-custom-fetch__input-wrapper:hover .input-custom-fetch__clear-query, .input-custom-fetch__clear-query--input-focused {
+  visibility: visible;
+}
+.input-custom-fetch__list {
+  position: absolute;
+  z-index: 999;
+  overflow-y: auto;
+  box-sizing: border-box;
+  width: 100%;
+  max-height: 100px;
+  margin-top: 8px;
+  border: 1px solid #e2e5ec;
+  border-radius: 4px;
+  background-color: #fff;
+}
+.input-custom-fetch__list--loader, .input-custom-fetch__list--no-items {
+  position: relative;
+  box-sizing: border-box;
+  padding: 4px 8px;
+}
+.input-custom-fetch__list--loader {
+  opacity: 0.5;
+}
+.input-custom-fetch__list--no-items {
+  opacity: 0.8;
+}
+.input-custom-fetch__list--item {
+  position: relative;
+  box-sizing: border-box;
+  padding: 4px 8px;
+  cursor: pointer;
+}
+.input-custom-fetch__list--item:hover, .input-custom-fetch__list--item-hightlighted {
+  background: #f0f1f4;
+}
+
+@media (max-width: 768px) {
+  .input-custom-fetch__list {
+    position: relative;
+    z-index: 1;
+    overflow-y: auto;
+    box-sizing: border-box;
+    max-height: 100%;
+    margin: 0;
+    padding: 0 16px 40px;
+    border: unset;
+    border-radius: unset;
+    background-color: unset;
+    box-shadow: none;
+  }
+  .input-custom-fetch__list--no-items {
+    font-family: Sarabun;
+    font-size: 16px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 24px;
+    letter-spacing: 0.2px;
+    color: #757f8c;
+  }
+  .input-custom-fetch__list--item {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    gap: 16px;
+    padding: 10px 8px;
+    font-family: Sarabun;
+    font-size: 16px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 24px;
+    letter-spacing: 0.2px;
+    color: var(--Black-black, #171d33);
+    border-radius: 6px;
+  }
+  .input-custom-fetch__list--item:hover {
+    background: none;
+  }
+  .input-custom-fetch__list--item:focus {
+    background: #f0f1f4;
+  }
+  .input-custom-fetch__list--item-custom {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+    padding-right: 32px;
+    font-family: Sarabun;
+    font-size: 14px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.2px;
+    border-bottom: 1px solid rgba(58, 72, 122, 0.15);
+    border-radius: 0;
+  }
+  .input-custom-fetch__list--item-custom svg {
+    position: absolute;
+    top: 50%;
+    right: 8px;
+    width: 16px;
+    height: 16px;
+    color: #a0a4b0;
+    transform: translateY(-50%);
+  }
+  .input-custom-fetch__list--item-custom span {
+    font-family: Sarabun;
+    font-size: 12px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 18px;
+    letter-spacing: 0.2px;
+    color: #757f8c;
+  }
+  .input-custom-fetch__list--with-bottom-shadow::after {
+    position: absolute;
+    z-index: 6;
+    bottom: 0;
+    width: 100%;
+    height: 15px;
+    content: "";
+    opacity: 1;
+    background: linear-gradient(180deg, rgba(212, 218, 230, 0.5) 0%, rgba(212, 218, 230, 0.3) 21.35%, rgba(247, 248, 250, 0) 100%);
+    transition: all 0.2s;
+    transform: rotate(180deg);
+  }
+  .input-custom-fetch__list--with-bottom-shadow-hidden::after {
+    opacity: 0;
+  }
+  .input-custom-fetch__list-overlay {
+    position: fixed;
+    z-index: 999;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100dvw;
+    height: 100dvh;
+    max-height: 100dvh;
+    background: rgba(23, 29, 51, 0.5);
+    animation-name: fadeIn;
+    animation-duration: 0.25s;
+    animation-timing-function: ease;
+    animation-fill-mode: forwards;
+  }
+  .input-custom-fetch__list-wrapper {
+    position: absolute;
+    z-index: 2;
+    top: auto;
+    bottom: 0;
+    box-sizing: border-box;
+    width: calc(100% - 16px);
+    height: 500px;
+    max-height: 500px;
+    margin: 0 8px 8px;
+    padding-bottom: 40px;
+    border-radius: 24px;
+    background: #fff;
+    box-shadow: 0px 24px 50px -10px rgba(0, 0, 0, 0.25);
+    animation-name: slideup;
+    animation-duration: 0.4s;
+  }
+  .input-custom-fetch__list-header {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 16px;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    letter-spacing: 0.1px;
+    color: #3b414b;
+  }
+  .input-custom-fetch__list-header-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: 24px;
+  }
+  .input-custom-fetch__list-header-row:first-child {
+    padding-right: 50px;
+  }
+  .input-custom-fetch__list-header-row .input__wrap {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding-right: 8px;
+    border: 1px solid var(--form-input-border, #e1e8f1);
+    border-radius: 6px;
+    background: var(--black-bg-color, #f8fbff) !important;
+  }
+  .input-custom-fetch__list-header-row .input__wrap input {
+    background: unset !important;
+  }
+  .input-custom-fetch__list-header-row .input__close {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: 24px;
+    min-width: 24px;
+    height: 24px;
+    padding: 4px;
+    border-radius: 2px;
+    background: var(--bg-gray-box, #f0f1f4);
+  }
+  .input-custom-fetch__list-header-row .input__close::before, .input-custom-fetch__list-header-row .input__close::after {
+    top: 50%;
+    height: 12px;
+    border-radius: 8px;
+    background-color: #171d33;
+    transform: translateY(-50%) rotate(45deg);
+  }
+  .input-custom-fetch__list-header-row .input__close::after {
+    transform: translateY(-50%) rotate(-45deg);
+  }
+  .input-custom-fetch__list-header-with-shadow::after {
+    position: absolute;
+    z-index: 10;
+    bottom: -15px;
+    left: 0;
+    width: 100%;
+    height: 15px;
+    content: "";
+    opacity: 1;
+    background: linear-gradient(180deg, rgba(212, 218, 230, 0.5) 0%, rgba(212, 218, 230, 0.3) 21.35%, rgba(247, 248, 250, 0) 100%);
+    transition: all 0.2s;
+  }
+  .input-custom-fetch__list-header-with-shadow-hidden::after {
+    opacity: 0;
+  }
+  .input-custom-fetch__list-header .input-custom-fetch__input-wrapper {
+    width: 100%;
+  }
+  .input-custom-fetch__list-close-icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    width: 50px;
+    height: 50px;
+    padding: 16px;
+  }
+  .input-custom-fetch__list-close-icon svg {
+    width: 16px;
+    height: 16px;
+    color: #a0a4b0;
+  }
+  .input-custom-fetch__input-wrapper {
+    position: relative;
+  }
+  .input-custom-fetch__input-wrapper .input__wrap {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    align-self: stretch;
+    gap: 8px;
+    box-sizing: border-box;
+    height: 40px;
+    padding: 0px 40px 0px 8px;
+    border: 1px solid var(--Form-Input-Border, #e1e8f1);
+    border-radius: 6px;
+    background: var(--Black-BG-color, #f8fbff);
+  }
+  .input-custom-fetch__input-wrapper .input__wrap input {
+    box-sizing: border-box;
+    height: 100%;
+    padding: 8px 0;
+  }
+  .input-custom-fetch__clear-query {
+    right: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    box-sizing: border-box;
+    width: 24px;
+    height: 24px;
+    padding: 4px;
+    border-radius: 2px;
+    background: var(--BG-gray-box, #f0f1f4);
+  }
+}
+@keyframes slideup {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/dist/es/Molecular/InputCustomFetch/lib/hooks/useDebouncedCallback.js

@@ -0,0 +1,27 @@
+import { useCallback, useRef } from "react";
+//#region src/Molecular/InputCustomFetch/lib/hooks/useDebouncedCallback.ts
+/**
+* Хук для создания debounced версии callback-функции
+* Отменяет предыдущий вызов если новый вызов происходит до истечения delay
+*
+* @param callback - Функция для debounce
+* @param delay - Задержка в миллисекундах
+*/
+function useDebouncedCallback(callback, delay) {
+	const timeoutRef = useRef(null);
+	return useCallback(((...args) => {
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		if (delay <= 0) {
+			callback(...args);
+			return;
+		}
+		timeoutRef.current = setTimeout(() => {
+			callback(...args);
+			timeoutRef.current = null;
+		}, delay);
+	}), [callback, delay]);
+}
+//#endregion
+export { useDebouncedCallback };
+
+//# sourceMappingURL=useDebouncedCallback.js.map

package/dist/es/Molecular/InputCustomFetch/lib/hooks/useDebouncedCallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedCallback.js","names":[],"sources":["../../../../../../src/Molecular/InputCustomFetch/lib/hooks/useDebouncedCallback.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\n/**\n * Хук для создания debounced версии callback-функции\n * Отменяет предыдущий вызов если новый вызов происходит до истечения delay\n *\n * @param callback - Функция для debounce\n * @param delay - Задержка в миллисекундах\n */\nexport function useDebouncedCallback<T extends (...args: any[]) => any>(\n  callback: T,\n  delay: number,\n): T {\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n  return useCallback(\n    ((...args: Parameters<T>) => {\n      // Отменяем предыдущий таймер\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n\n      // Если delay = 0, выполняем сразу\n      if (delay <= 0) {\n        callback(...args);\n        return;\n      }\n\n      // Создаём новый таймер\n      timeoutRef.current = setTimeout(() => {\n        callback(...args);\n        timeoutRef.current = null;\n      }, delay);\n    }) as T,\n    [callback, delay],\n  );\n}\n"],"mappings":";;;;;;;;;AASA,SAAgB,qBACd,UACA,OACG;CACH,MAAM,aAAa,OAA8B,IAAI;CAErD,OAAO,cACH,GAAG,SAAwB;EAE3B,IAAI,WAAW,SACb,aAAa,WAAW,OAAO;EAIjC,IAAI,SAAS,GAAG;GACd,SAAS,GAAG,IAAI;GAChB;EACF;EAGA,WAAW,UAAU,iBAAiB;GACpC,SAAS,GAAG,IAAI;GAChB,WAAW,UAAU;EACvB,GAAG,KAAK;CACV,IACA,CAAC,UAAU,KAAK,CAClB;AACF"}

package/dist/es/Molecular/InputCustomFetch/lib/hooks/useFetchWithAbort.js

@@ -0,0 +1,50 @@
+import { isFetchProps } from "../utils.js";
+import { useCallback, useRef } from "react";
+//#region src/Molecular/InputCustomFetch/lib/hooks/useFetchWithAbort.ts
+/**
+* Хук для работы с запросами с возможностью отмены (abort)
+* Поддерживает как кастомную функцию загрузки, так и встроенный HTTP клиент
+*/
+function useFetchWithAbort(props) {
+	const abortControllerRef = useRef(null);
+	return {
+		fetchWithAbort: useCallback(async (searchQuery) => {
+			if (abortControllerRef.current) abortControllerRef.current.abort();
+			abortControllerRef.current = new AbortController();
+			try {
+				if (isFetchProps(props)) {
+					const { fetchEndpoint, fetchMethod = "POST", fetchHeaders = {}, fetchQueryBuilder, fetchBodyBuilder, responseTransformer } = props;
+					let url = fetchEndpoint;
+					if (fetchQueryBuilder && fetchMethod === "GET") {
+						const queryParams = fetchQueryBuilder(searchQuery);
+						url = `${fetchEndpoint}?${new URLSearchParams(queryParams).toString()}`;
+					}
+					const fetchOptions = {
+						method: fetchMethod,
+						headers: {
+							"Content-Type": "application/json",
+							...fetchHeaders
+						},
+						signal: abortControllerRef.current.signal
+					};
+					if (fetchBodyBuilder && fetchMethod === "POST") fetchOptions.body = JSON.stringify(fetchBodyBuilder(searchQuery));
+					const response = await fetch(url, fetchOptions);
+					if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+					return responseTransformer(await response.json());
+				} else {
+					const { getListItems } = props;
+					return await getListItems(searchQuery);
+				}
+			} catch (error) {
+				if (error.name === "AbortError") return [];
+				console.error("Fetch error:", error);
+				throw error;
+			}
+		}, [props]),
+		abortControllerRef
+	};
+}
+//#endregion
+export { useFetchWithAbort };
+
+//# sourceMappingURL=useFetchWithAbort.js.map

package/dist/es/Molecular/InputCustomFetch/lib/hooks/useFetchWithAbort.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetchWithAbort.js","names":[],"sources":["../../../../../../src/Molecular/InputCustomFetch/lib/hooks/useFetchWithAbort.ts"],"sourcesContent":["import type React from 'react';\nimport type { InputCustomFetchProps } from '../../model/types';\n\nimport { useCallback, useRef } from 'react';\n\nimport { isFetchProps } from '../utils';\n\n/**\n * Хук для работы с запросами с возможностью отмены (abort)\n * Поддерживает как кастомную функцию загрузки, так и встроенный HTTP клиент\n */\nexport function useFetchWithAbort<TOption, TValue>(\n  props: InputCustomFetchProps<TOption, TValue>,\n): { fetchWithAbort: (searchQuery: string) => Promise<TOption[]>; abortControllerRef: React.MutableRefObject<AbortController | null> } {\n  const abortControllerRef = useRef<AbortController | null>(null);\n\n  const fetchWithAbort = useCallback(\n    async (searchQuery: string): Promise<TOption[]> => {\n      // Отменяем предыдущий запрос\n      if (abortControllerRef.current) {\n        abortControllerRef.current.abort();\n      }\n\n      // Создаём новый AbortController\n      abortControllerRef.current = new AbortController();\n\n      try {\n        if (isFetchProps(props)) {\n          // Используем встроенный HTTP клиент\n          const {\n            fetchEndpoint,\n            fetchMethod = 'POST',\n            fetchHeaders = {},\n            fetchQueryBuilder,\n            fetchBodyBuilder,\n            responseTransformer,\n          } = props;\n\n          let url = fetchEndpoint;\n\n          // Добавляем query параметры для GET\n          if (fetchQueryBuilder && fetchMethod === 'GET') {\n            const queryParams = fetchQueryBuilder(searchQuery);\n            const searchParams = new URLSearchParams(queryParams);\n            url = `${fetchEndpoint}?${searchParams.toString()}`;\n          }\n\n          const fetchOptions: RequestInit = {\n            method: fetchMethod,\n            headers: {\n              'Content-Type': 'application/json',\n              ...fetchHeaders,\n            },\n            signal: abortControllerRef.current.signal,\n          };\n\n          if (fetchBodyBuilder && fetchMethod === 'POST') {\n            fetchOptions.body = JSON.stringify(fetchBodyBuilder(searchQuery));\n          }\n\n          const response = await fetch(url, fetchOptions);\n\n          if (!response.ok) {\n            throw new Error(`HTTP error! status: ${response.status}`);\n          }\n\n          const data = await response.json();\n          return responseTransformer(data);\n        }\n        else {\n          // Используем кастомную функцию\n          const { getListItems } = props;\n          return await getListItems(searchQuery);\n        }\n      }\n      catch (error) {\n        if ((error as Error).name === 'AbortError') {\n          // Запрос был отменён, это нормально\n          return [];\n        }\n        console.error('Fetch error:', error);\n        throw error;\n      }\n    },\n    [props],\n  );\n\n  return { fetchWithAbort, abortControllerRef };\n}\n"],"mappings":";;;;;;;AAWA,SAAgB,kBACd,OACqI;CACrI,MAAM,qBAAqB,OAA+B,IAAI;CAyE9D,OAAO;EAAE,gBAvEc,YACrB,OAAO,gBAA4C;GAEjD,IAAI,mBAAmB,SACrB,mBAAmB,QAAQ,MAAM;GAInC,mBAAmB,UAAU,IAAI,gBAAgB;GAEjD,IAAI;IACF,IAAI,aAAa,KAAK,GAAG;KAEvB,MAAM,EACJ,eACA,cAAc,QACd,eAAe,CAAC,GAChB,mBACA,kBACA,wBACE;KAEJ,IAAI,MAAM;KAGV,IAAI,qBAAqB,gBAAgB,OAAO;MAC9C,MAAM,cAAc,kBAAkB,WAAW;MAEjD,MAAM,GAAG,cAAc,GAAG,IADD,gBAAgB,WACf,CAAA,CAAa,SAAS;KAClD;KAEA,MAAM,eAA4B;MAChC,QAAQ;MACR,SAAS;OACP,gBAAgB;OAChB,GAAG;MACL;MACA,QAAQ,mBAAmB,QAAQ;KACrC;KAEA,IAAI,oBAAoB,gBAAgB,QACtC,aAAa,OAAO,KAAK,UAAU,iBAAiB,WAAW,CAAC;KAGlE,MAAM,WAAW,MAAM,MAAM,KAAK,YAAY;KAE9C,IAAI,CAAC,SAAS,IACZ,MAAM,IAAI,MAAM,uBAAuB,SAAS,QAAQ;KAI1D,OAAO,oBAAoB,MADR,SAAS,KAAK,CACF;IACjC,OACK;KAEH,MAAM,EAAE,iBAAiB;KACzB,OAAO,MAAM,aAAa,WAAW;IACvC;GACF,SACO,OAAO;IACZ,IAAK,MAAgB,SAAS,cAE5B,OAAO,CAAC;IAEV,QAAQ,MAAM,gBAAgB,KAAK;IACnC,MAAM;GACR;EACF,GACA,CAAC,KAAK,CAGC;EAAgB;CAAmB;AAC9C"}

package/dist/es/Molecular/InputCustomFetch/lib/utils.js

@@ -0,0 +1,24 @@
+import { compare, getIsOnlyAnObject } from "../../../Functions/utils.js";
+//#region src/Molecular/InputCustomFetch/lib/utils.ts
+/**
+* Сравнивает два значения с учетом их типов
+*/
+function compareValues(val1, val2) {
+	return typeof val1 === typeof val2 && (getIsOnlyAnObject(val1) ? compare(val1, val2) : val1 === val2);
+}
+/**
+* Проверяет что значение является валидным числом (не NaN, не null, не undefined)
+*/
+function getIsValidNumber(value) {
+	return Boolean(value) && typeof value === "number" && !Number.isNaN(value);
+}
+/**
+* Type guard для определения типа пропсов (с fetchEndpoint или с getListItems)
+*/
+function isFetchProps(props) {
+	return "fetchEndpoint" in props;
+}
+//#endregion
+export { compareValues, getIsValidNumber, isFetchProps };
+
+//# sourceMappingURL=utils.js.map

package/dist/es/Molecular/InputCustomFetch/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../../../../src/Molecular/InputCustomFetch/lib/utils.ts"],"sourcesContent":["import type { InputCustomFetchProps } from '../model/types';\nimport { compare, getIsOnlyAnObject } from '../../../Functions/utils';\n\n/**\n * Сравнивает два значения с учетом их типов\n */\nexport function compareValues(val1: any, val2: any): boolean {\n  return (\n    typeof val1 === typeof val2\n    && (getIsOnlyAnObject(val1) ? compare(val1, val2) : val1 === val2)\n  );\n}\n\n/**\n * Проверяет что значение является валидным числом (не NaN, не null, не undefined)\n */\nexport function getIsValidNumber(value: any): boolean {\n  return Boolean(value) && typeof value === 'number' && !Number.isNaN(value);\n}\n\n/**\n * Type guard для определения типа пропсов (с fetchEndpoint или с getListItems)\n */\nexport function isFetchProps<TOption, TValue>(\n  props: InputCustomFetchProps<TOption, TValue>,\n): props is import('../model/types').InputCustomFetchPropsWithFetch<TOption, TValue> {\n  return 'fetchEndpoint' in props;\n}\n"],"mappings":";;;;;AAMA,SAAgB,cAAc,MAAW,MAAoB;CAC3D,OACE,OAAO,SAAS,OAAO,SACnB,kBAAkB,IAAI,IAAI,QAAQ,MAAM,IAAI,IAAI,SAAS;AAEjE;;;;AAKA,SAAgB,iBAAiB,OAAqB;CACpD,OAAO,QAAQ,KAAK,KAAK,OAAO,UAAU,YAAY,CAAC,OAAO,MAAM,KAAK;AAC3E;;;;AAKA,SAAgB,aACd,OACmF;CACnF,OAAO,mBAAmB;AAC5B"}

package/dist/es/Molecular/InputPassword/InputPassword.js

@@ -0,0 +1,47 @@
+import '../../styles/base.css';
+import { setCarretToEnd } from "../../Functions/utils.js";
+import Input from "../../Atomic/FormElements/Input/Input.js";
+import './InputPassword.styles.css';/* empty css                   */
+import cn from "classnames";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Eye, EyeOff } from "react-feather";
+//#region src/Molecular/InputPassword/InputPassword.tsx
+function InputPassword({ field = { value: "" }, onChange = () => {}, testId = "input-password" }) {
+	const [showPassword, setSP] = useState(false);
+	const inputWrapper = useRef(null);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": testId,
+		className: "password",
+		ref: inputWrapper,
+		children: [/* @__PURE__ */ jsx(Input, {
+			value: field.value,
+			testId: `inputPassword--input--key-${testId || field.key}`,
+			className: cn("input-fin", field?.key),
+			onChange,
+			type: showPassword ? "text" : "password"
+		}, field.key), /* @__PURE__ */ jsxs("span", {
+			className: "password-eye-holder",
+			"data-testid": "password-eye-holder",
+			onClick: { changeView: () => {
+				const input = inputWrapper?.current?.querySelector("input");
+				if (input instanceof HTMLInputElement) {
+					input?.focus();
+					setCarretToEnd(input);
+					setSP(!showPassword);
+				}
+			} }.changeView,
+			children: [" ", showPassword ? /* @__PURE__ */ jsx(EyeOff, {
+				strokeWidth: 1,
+				className: "password-icon"
+			}) : /* @__PURE__ */ jsx(Eye, {
+				strokeWidth: 1,
+				className: "password-icon"
+			})]
+		})]
+	});
+}
+//#endregion
+export { InputPassword as default };
+
+//# sourceMappingURL=InputPassword.js.map

package/dist/es/Molecular/InputPassword/InputPassword.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputPassword.js","names":[],"sources":["../../../../src/Molecular/InputPassword/InputPassword.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\n\nimport type { IInputPasswordProps } from './InputPassword.interface';\nimport cn from 'classnames';\nimport { useRef, useState } from 'react';\n\nimport { Eye, EyeOff } from 'react-feather';\nimport Input from '../../Atomic/FormElements/Input/Input';\n\nimport { setCarretToEnd } from '../../Functions/utils';\nimport './InputPassword.scss';\n\nfunction InputPassword({ field = { value: '' }, onChange = () => {}, testId = 'input-password' }: IInputPasswordProps): ReactElement {\n  const [showPassword, setSP] = useState(false);\n  const inputWrapper = useRef<HTMLDivElement>(null);\n\n  const handle = {\n    changeView: () => {\n      const input = inputWrapper?.current?.querySelector('input');\n\n      if (input instanceof HTMLInputElement) {\n        input?.focus();\n        setCarretToEnd(input);\n        setSP(!showPassword);\n      }\n    },\n  };\n\n  return (\n    <div data-testid={testId} className=\"password\" ref={inputWrapper}>\n      <Input\n        key={field.key}\n        value={field.value}\n        testId={`inputPassword--input--key-${testId || field.key}`}\n        className={cn('input-fin', field?.key)}\n        onChange={onChange}\n        type={showPassword ? 'text' : 'password'}\n      />\n      <span\n        className=\"password-eye-holder\"\n        data-testid=\"password-eye-holder\"\n        onClick={handle.changeView}\n      >\n        {' '}\n        {showPassword\n          ? (\n              <EyeOff strokeWidth={1} className=\"password-icon\" />\n            )\n          : (\n              <Eye strokeWidth={1} className=\"password-icon\" />\n            )}\n      </span>\n    </div>\n  );\n}\n\nexport default InputPassword;\n"],"mappings":";;;;;;;;AAYA,SAAS,cAAc,EAAE,QAAQ,EAAE,OAAO,GAAG,GAAG,iBAAiB,CAAC,GAAG,SAAS,oBAAuD;CACnI,MAAM,CAAC,cAAc,SAAS,SAAS,KAAK;CAC5C,MAAM,eAAe,OAAuB,IAAI;CAchD,OACE,qBAAC,OAAD;EAAK,eAAa;EAAQ,WAAU;EAAW,KAAK;YAApD,CACE,oBAAC,OAAD;GAEE,OAAO,MAAM;GACb,QAAQ,6BAA6B,UAAU,MAAM;GACrD,WAAW,GAAG,aAAa,OAAO,GAAG;GAC3B;GACV,MAAM,eAAe,SAAS;EAC/B,GANM,MAAM,GAMZ,GACD,qBAAC,QAAD;GACE,WAAU;GACV,eAAY;GACZ,SAAS,EAxBb,kBAAkB;IAChB,MAAM,QAAQ,cAAc,SAAS,cAAc,OAAO;IAE1D,IAAI,iBAAiB,kBAAkB;KACrC,OAAO,MAAM;KACb,eAAe,KAAK;KACpB,MAAM,CAAC,YAAY;IACrB;GACF,EAgBa,EAAO;aAHlB,CAKG,KACA,eAEK,oBAAC,QAAD;IAAQ,aAAa;IAAG,WAAU;GAAiB,CAAA,IAGnD,oBAAC,KAAD;IAAK,aAAa;IAAG,WAAU;GAAiB,CAAA,CAElD;IACH;;AAET"}

package/dist/es/Molecular/InputPassword/InputPassword.styles.css

@@ -0,0 +1,23 @@
+.password {
+  position: relative;
+}
+.password .input-classic__wrap input,
+.password .input__wrap input {
+  padding: 0 38px 0 10px;
+}
+.password-eye-holder {
+  position: absolute;
+  top: 25%;
+  right: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  cursor: pointer;
+  transform: translateY(-25%);
+}
+.password-icon {
+  cursor: pointer;
+  color: #a6aab4;
+}

package/dist/es/_virtual/_rolldown/runtime.js

@@ -1,8 +1,5 @@
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __exportAll = (all, no_symbols) => {
 	let target = {};
 	for (var name in all) __defProp(target, name, {
@@ -12,16 +9,5 @@ var __exportAll = (all, no_symbols) => {
 	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
 	return target;
 };
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 //#endregion
-export { __exportAll, __reExport };
+export { __exportAll };

package/dist/es/charts.js

@@ -1,4 +1,3 @@
-import Chart from "./Atomic/UI/Chart/index.ts";
+import Chart_default from "./Atomic/UI/Chart/index.js";
 import PieChart from "./Atomic/UI/PieChart/PieChart.js";
-export * from "./Atomic/UI/Chart/index.ts";
-export { Chart, PieChart };
+export { Chart_default as Chart, PieChart };

package/dist/es/classes.js

@@ -1,4 +1,4 @@
 import AbortableFetch from "./Classes/AbortableFetch.js";
 import AnimatedHandler from "./Classes/AnimatedHandler.js";
-import RESTAPI from "./Classes/RESTAPI/index.ts";
+import RESTAPI from "./Classes/RESTAPI/index.js";
 export { AbortableFetch, AnimatedHandler, RESTAPI };