intelicoreact 2.0.17 → 2.0.19

package/dist/es/Atomic/FormElements/RangeSlider2/RangeSlider2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeSlider2.js","names":[],"sources":["../../../../../src/Atomic/FormElements/RangeSlider2/RangeSlider2.tsx"],"sourcesContent":["import type {\n  MouseEvent as ReactMouseEvent,\n  TouchEvent as ReactTouchEvent,\n} from 'react';\nimport type { IRangeItem, IRangeSlider2Props, ITriggerItem } from './RangeSlider2.interface';\n\nimport cn from 'classnames';\nimport React, {\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { ChevronLeft, ChevronRight, Plus, X } from 'react-feather';\n\nimport useIsMobile from '../../../Functions/useIsMobile/useIsMobile';\nimport { compare } from '../../../Functions/utils';\n\nimport { EAssignSide, ECollision, EPointValueType } from './RangeSlider2.interface';\nimport './RangeSlider2.scss';\n\nconst COMPONENT_CLASS = 'range-slider2';\n\nconst RangeSlider2: React.FC<IRangeSlider2Props> = ({\n  min = 300,\n  max = 850,\n  minRange = 50,\n  dividersRange = 50,\n  pointValueType = EPointValueType.From,\n  precision = 0,\n  step = 5,\n  className,\n  value = [],\n  onChange = () => { },\n  transformDataOnConcat = () => ({ data: [], value: 0 }),\n}) => {\n  const { isMobile } = useIsMobile();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const addTriggerRef = useRef<HTMLDivElement>(null);\n\n  // ==================== STATE ==================== //\n\n  const [protectedValue, setProtectedValue] = useState<IRangeItem[]>([]);\n  const [ranges, setRanges] = useState<IRangeItem[]>(value);\n  const [triggers, setTriggers] = useState<ITriggerItem[]>([]);\n\n  const [trackWidth, setTrackWidth] = useState(0);\n  const [trackPosition, setTrackPosition] = useState(0);\n  const [mouseTrackPosition, setMouseTrackPosition] = useState(0);\n\n  const [movingTrigger, setMovingTrigger] = useState<HTMLElement | null>(null);\n  const [movingTriggerIndex, setMovingTriggerIndex] = useState<number | null>(null);\n  const [movingController, setMovingController] = useState<AbortController | null>(null);\n  const [movingTriggerData, setMovingTriggerData] = useState<ITriggerItem | null>(null);\n  const [isTriggerMoved, setIsTriggerMoved] = useState(false);\n\n  const [isMouseOverTrigger, setIsMouseOverTrigger] = useState(false);\n  const [isMouseOverTrack, setIsMouseOverTrack] = useState(false);\n\n  const [pointsPerPx, setPointsPerPx] = useState(0);\n\n  const [addTriggerFixedScore, setAddTriggerFixedScore] = useState<number | null>(null);\n  const [addTriggerFixedRange, setAddTriggerFixedRange] = useState<IRangeItem | null>(null);\n  const [isAddTriggerFixed, setIsAddTriggerFixed] = useState(false);\n  const [assignValueToRange, setAssignValueToRange] = useState<EAssignSide>(EAssignSide.Left);\n\n  const setMouseOverTrigger = (): void => setIsMouseOverTrigger(true);\n  const setMouseLeaveTrigger = (): void => setIsMouseOverTrigger(false);\n  const setMouseOverTrack = (): void => setIsMouseOverTrack(true);\n  const setMouseLeaveTrack = (): void => setIsMouseOverTrack(false);\n\n  const isTriggerMoving = (triggerIndex: number): boolean => triggerIndex === movingTriggerIndex;\n  const countPointsPerPx = (width: number): number => {\n    return (max - min) / width;\n  };\n\n  const fixAddTrigger = (score: number | null, inRange: IRangeItem): void => {\n    if (score !== null) {\n      setAddTriggerFixedScore(score);\n      setAddTriggerFixedRange(inRange);\n      setIsAddTriggerFixed(true);\n    }\n  };\n  const unfixAddTrigger = (e?: any): void => {\n    e?.stopPropagation();\n    e?.preventDefault();\n\n    setAddTriggerFixedScore(null);\n    setAddTriggerFixedRange(null);\n    setIsAddTriggerFixed(false);\n    setAssignValueToRange(EAssignSide.Left);\n  };\n\n  const prepareValue = (value: number | string): number => {\n    return Number.parseInt((Number.parseFloat(value.toString()) * 10 ** precision).toString(), 10) / 10 ** precision;\n  };\n  const addRange = ({ from, to, label, value, data = [], id }: IRangeItem): void =>\n    setRanges((ranges) => {\n      if (!id) {\n        id = (ranges?.length + 1) * -1;\n      }\n\n      return [\n        ...ranges,\n        {\n          id,\n          from,\n          to,\n          label,\n          data,\n          value: Number.isInteger(value) ? value : 0,\n        },\n      ].sort((a, b) => a.from - b.from);\n    });\n  const updateRange = ({ from, to, label, value, data, id }: IRangeItem): void =>\n    setRanges((ranges) => {\n      const newRanges = [...ranges];\n      const range = newRanges?.find(({ id: rangeId }) => rangeId === id);\n\n      if (range) {\n        range.from = from ?? range?.from;\n        range.to = to ?? range?.to;\n        range.label = label ?? range?.label;\n        range.value\n          = value !== undefined\n            ? Number.isInteger(value)\n              ? value\n              : 0\n            : range?.value;\n        range.data = data !== undefined ? data : range?.data;\n      }\n\n      return newRanges;\n    });\n  const splitRange = (score: number): void => {\n    const range = ranges?.find(\n      ({ from, to }) => from + minRange <= score + 1 && score <= to - minRange,\n    );\n    if (!range) return;\n\n    const { value = 0, label, data = [] } = addTriggerFixedRange || {};\n    addRange({\n      value: assignValueToRange === EAssignSide.Right ? value : 0,\n      data: assignValueToRange === EAssignSide.Right ? data : undefined,\n      label,\n      from: score + 1,\n      to: range?.to,\n      id: null,\n    });\n    updateRange({\n      ...range,\n      value: assignValueToRange === EAssignSide.Left ? value : 0,\n      data: assignValueToRange === EAssignSide.Left ? data : undefined,\n      label,\n      to: score,\n    });\n\n    if (isAddTriggerFixed) unfixAddTrigger();\n  };\n  const removeRange = (id?: number | null): void =>\n    setRanges(ranges => ranges?.filter(range => range?.id !== id));\n  const concatRanges = (score: number): void => {\n    const [left, right] = ranges?.filter(\n      ({ from, to }) => from === score + 1 || score === to,\n    );\n    const { data, value } = transformDataOnConcat(left, right);\n\n    updateRange({ from: left?.from, to: right?.to, id: left?.id, data, value });\n    removeRange(right?.id);\n  };\n  const clearRanges = (): void => setRanges([]);\n\n  const addTrigger = (\n    value: number | null,\n    { isFixed = false, isHidden = false } = {},\n    { withRange = true } = {},\n    index = triggers.length,\n  ): void =>\n    setTriggers((state) => {\n      if (value === null) return state;\n\n      if (withRange) splitRange(value);\n\n      const newState = [...state];\n      const id = state?.length\n        ? Math.max(...state?.map(({ id }) => id)) + 1\n        : 0;\n\n      newState.splice(index, 0, { id, value, isFixed, isHidden });\n      return newState.sort((a, b) => (a.value < b.value ? -1 : 1));\n    });\n  const updateTrigger = (index: number, value: number): void =>\n    setTriggers((state) => {\n      const newState = [...state];\n      newState[index] = { ...newState[index], value };\n      return newState;\n    });\n  const removeTrigger = (index: number): void =>\n    setTriggers((state) => {\n      concatRanges(state[index]?.value);\n\n      const newState = [...state];\n      newState.splice(index, 1);\n      return newState;\n    });\n  const clearTriggers = (): void => setTriggers([]);\n  const getTriggerByScore = (score: number | null): ITriggerItem | undefined => {\n    if (score === null) return undefined;\n\n    return triggers?.find(({ value: triggerScore }) => triggerScore === score);\n  };\n  const updateRangesByTrigger = (trigger: ITriggerItem): void => {\n    const newValue = triggers?.find(({ id }) => id === trigger?.id)?.value ?? 0;\n    const oldValue = trigger?.value;\n\n    const leftRange = ranges?.find(range => range?.to === oldValue);\n    const rightRange = ranges?.find(range => range?.from === oldValue + 1);\n\n    if (leftRange && rightRange) {\n      updateRange({ from: leftRange?.from, to: newValue, id: leftRange?.id });\n      updateRange({\n        from: newValue + 1,\n        to: rightRange?.to,\n        id: rightRange?.id,\n      });\n    }\n  };\n  const resetMovingTrigger = (): void => {\n    setTimeout(() => {\n      setMovingTrigger(null);\n      setMovingTriggerIndex(null);\n    }, 1);\n  };\n\n  const getTrackXByScore = (score: number | null): number => {\n    if (score === null) return 0;\n\n    return (score - min) / pointsPerPx;\n  };\n  const getScoreByX = (x: number): number => {\n    let points = (x - trackPosition) * pointsPerPx + min;\n    points -= points % step;\n\n    if (points < min) points = min;\n    if (points > max) points = max;\n\n    return points - 1;\n  };\n  const getTriggerCollisionDirection = (index: number, points: number): ECollision => {\n    if (index <= 0) return points;\n\n    const [triggerBefore, triggerAfter] = [\n      triggers?.[index - 1]?.value + minRange - 1,\n      triggers?.[index + 1]?.value - minRange - 1,\n    ];\n\n    if (triggerBefore === triggerAfter) return ECollision.Both;\n    else if (points === triggerBefore) return ECollision.Left;\n    else if (points === triggerAfter) return ECollision.Right;\n    else return ECollision.None;\n  };\n  const getTriggerScore = (index: number, points: number): number => {\n    if (index <= 0) return points;\n\n    const [triggerBefore, triggerAfter] = [\n      triggers?.[index - 1]?.value + minRange - 1,\n      triggers?.[index + 1]?.value - minRange - 1,\n    ];\n\n    if (points < triggerBefore) return triggerBefore;\n    else if (points > triggerAfter) return triggerAfter;\n    else return points;\n  };\n  const getRangesList = (): { from: number, to: number }[] => {\n    return triggers\n      .map(({ value }) => value)\n      .sort()\n      .reduce((result: { from: number, to: number }[], score, i, scores) => {\n        if (i !== 0) {\n          result.push({\n            from: scores[i - 1],\n            to: score,\n          });\n        }\n        return result;\n      }, []);\n  };\n  const getAddTriggerScore = (x: number): number | null => {\n    const score = getScoreByX(x);\n\n    let result: number | null = getRangesList()?.reduce((result: number | null, { from, to }: IRangeItem) => {\n      if (to - from + 1 <= 2 * minRange && from <= score && score <= to) {\n        return null;\n      }\n\n      if (from <= score && score <= from + minRange) {\n        return from + minRange - 1;\n      }\n      else if (to - minRange <= score && score <= to) {\n        return to - minRange - 1;\n      }\n      else {\n        return result;\n      }\n    }, score);\n\n    if (!result) {\n      const closestRange = getRangesList()\n        ?.filter(({ from, to }) => to - from + 1 >= 2 * minRange)\n        ?.reduce((result: { from: number; to: number; distance: number } | null, range: IRangeItem) => {\n          const distance: number = Math.abs((range.to + range.from) / 2 - score);\n          if (!result || distance < result?.distance) {\n            return {\n              ...range,\n              distance,\n            };\n          }\n\n          return result;\n        }, null);\n\n      if (closestRange) {\n        if (closestRange?.to < score) result = closestRange?.to - minRange - 1;\n        if (score < closestRange?.from)\n          result = closestRange?.from + minRange - 1;\n      }\n    }\n\n    return result;\n  };\n  const getInRange = (score: number | null): IRangeItem | undefined => {\n    return ranges?.find(({ from, to }) => score !== null && from <= score && score <= to);\n  };\n  const getAddTriggerCollisionDirection = (x: number): number => {\n    const triggerScore = getAddTriggerScore(x);\n    const inRange = getInRange(triggerScore);\n\n    if (!inRange) return 0;\n\n    const { from, to } = inRange;\n    const triggerBefore = from + minRange - 1;\n    const triggerAfter = to - minRange - 1;\n\n    if (triggerBefore === triggerAfter) return ECollision.Both;\n    else if (triggerScore !== null && triggerScore <= triggerBefore) return ECollision.Left;\n    else if (triggerScore !== null && triggerScore >= triggerAfter) return ECollision.Right;\n    else return ECollision.None;\n  };\n  const getAddTriggerPosition = (): number => {\n    return isAddTriggerFixed\n      ? getTrackXByScore(addTriggerFixedScore ?? 0)\n      : mouseTrackPosition;\n  };\n  const getPointValue = (score: number | null): string => {\n    if (score === null) return '';\n\n    switch (pointValueType) {\n      case EPointValueType.From:\n        return `${score + 1}`;\n      case EPointValueType.To:\n        return `${score}`;\n      case EPointValueType.Both:\n      default:\n        return `${score} | ${score + 1}`;\n    }\n  };\n\n  // EVENTS //\n  const onRangeChange = (index: number, value: number, validate = true): void => {\n    if (validate) value = prepareValue(value);\n\n    if (Number.isNaN(value)) value = 0;\n    updateTrigger(index, value);\n  };\n  const onTriggerMouseDown = (e: ReactMouseEvent | ReactTouchEvent, index: number): void => {\n    setMovingTrigger(e.target as HTMLElement);\n    setMovingTriggerIndex(index);\n    setMovingTriggerData({ ...triggers[index] });\n  };\n  const onTriggerMove = (e: ReactTouchEvent | ReactMouseEvent | TouchEvent | MouseEvent): boolean => {\n    if (e?.cancelable) e?.preventDefault();\n    e?.stopPropagation();\n\n    if (!movingTriggerIndex || !movingTrigger) {\n      return false;\n    }\n\n    if (!isTriggerMoved) setIsTriggerMoved(true);\n\n    const touch = 'touches' in e ? e.touches?.[0] : undefined;\n    const x = touch?.clientX ?? ('clientX' in e ? e.clientX : 0);\n    const { width: triggerWidth }\n      = movingTrigger?.getBoundingClientRect() || {};\n\n    if (x < trackPosition || x > trackPosition + trackWidth + triggerWidth)\n      return false;\n\n    const triggerPoints = getTriggerScore(movingTriggerIndex, getScoreByX(x));\n\n    onRangeChange(movingTriggerIndex, triggerPoints);\n\n    return true;\n  };\n\n  useEffect(() => {\n    if (isMobile) {\n      document.addEventListener('touchend', resetMovingTrigger);\n    }\n    else {\n      document.addEventListener('mouseup', resetMovingTrigger);\n    }\n\n    return () => {\n      if (isMobile) {\n        document.removeEventListener('touchend', resetMovingTrigger);\n      }\n      else {\n        document.removeEventListener('mouseup', resetMovingTrigger);\n      }\n    };\n  }, []);\n  // MouseMove Event Controller\n  useEffect(() => {\n    if (!movingTrigger && isTriggerMoved) {\n      movingController?.abort();\n      setIsTriggerMoved(false);\n      setMovingController(null);\n    }\n    else if (movingTrigger && !isTriggerMoved) {\n      setMovingController(new AbortController());\n    }\n\n    const body = document.getElementsByTagName('body')[0];\n    body.classList?.[movingTrigger ? 'add' : 'remove']('moving-cursor');\n  }, [movingTrigger]);\n\n  useEffect(() => {\n    if (movingController) {\n      if (isMobile) {\n        document.addEventListener('touchmove', onTriggerMove, {\n          signal: movingController?.signal,\n        });\n      }\n      else {\n        document.addEventListener('mousemove', onTriggerMove, {\n          signal: movingController?.signal,\n        });\n      }\n    }\n\n    return () => {\n      if (isMobile) {\n        document.removeEventListener('touchmove', onTriggerMove);\n      }\n      else {\n        document.removeEventListener('mousemove', onTriggerMove);\n      }\n    };\n  }, [movingController]);\n  useLayoutEffect(() => {\n    const { width = 0, x = 0 } = trackRef?.current?.getBoundingClientRect() || {};\n\n    setPointsPerPx(countPointsPerPx(width));\n    setTrackWidth(width);\n    setTrackPosition(x);\n  }, [trackRef]);\n  useEffect(() => {\n    onChange(ranges, triggers);\n  }, [ranges]);\n  useEffect(() => {\n    clearRanges();\n    clearTriggers();\n\n    if (protectedValue?.length === 0) {\n      addRange({ from: min, to: max });\n      addTrigger(min, { isFixed: true, isHidden: true });\n      addTrigger(max, { isFixed: true, isHidden: true });\n    }\n    else {\n      protectedValue\n        ?.reduce((result, range) => {\n          addRange({ ...range });\n\n          if (!result.find(score => score === range?.from))\n            // @ts-ignore\n            result.splice(result?.length - 1, 0, range?.from);\n          if (!result.find(score => score === range?.to))\n            // @ts-ignore\n            result.splice(result?.length - 1, 0, range?.to);\n          return result;\n        }, [])\n        ?.sort((a, b) => (a < b ? -1 : 1))\n        ?.filter((item, i, arr) => i === 0 || item - 1 !== arr[i - 1])\n        ?.map((score, i, triggers) => {\n          if (i === 0 || score - 1 !== triggers[i - 1]) {\n            const isExtremum = score === min || score === max;\n\n            addTrigger(\n              score,\n              { isFixed: isExtremum, isHidden: isExtremum },\n              { withRange: false },\n            );\n          }\n\n          return score;\n        });\n    }\n  }, [protectedValue]);\n  useEffect(() => {\n    if (!compare(value, protectedValue)) {\n      setProtectedValue(value);\n    }\n  }, [value]);\n  useEffect(() => {\n    if (!movingTriggerIndex && movingTriggerData) {\n      updateRangesByTrigger({ ...movingTriggerData });\n      setMovingTriggerData(null);\n    }\n  }, [movingTriggerIndex]);\n\n  // RENDER //\n  const renderCollision = ({\n    isCollisionVisible,\n    isLeftCollision,\n    isRightCollision,\n    isBothCollision,\n    className,\n  }: {\n    isCollisionVisible?: boolean;\n    isLeftCollision?: boolean;\n    isRightCollision?: boolean;\n    isBothCollision?: boolean;\n    className?: string;\n  }): JSX.Element => {\n    const pieces = Number.parseInt(((max - min) / minRange).toString(), 10);\n    const { width: trackWidth = 0 }\n        = trackRef?.current?.getBoundingClientRect() ?? {};\n    const collisionWidth = trackWidth / pieces - 4;\n\n    const width = isCollisionVisible\n      ? isBothCollision\n        ? collisionWidth * 2\n        : isLeftCollision || isRightCollision\n          ? collisionWidth\n          : 0\n      : 0;\n\n    return (\n      <div\n        className={cn('collision', className, {\n          'collision--visible': isCollisionVisible,\n          'collision--left': isLeftCollision && !isBothCollision,\n          'collision--right': isRightCollision && !isBothCollision,\n          'collision--both': isBothCollision,\n        })}\n        style={{ width }}\n      />\n    );\n  };\n  const renderAddTrackTriggerSettings = (): JSX.Element => {\n    const { label, value } = addTriggerFixedRange || {};\n    return (\n      <div\n        className={`${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings`}\n      >\n        <div\n          className={`${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-body`}\n        >\n          <div\n            className={`${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-body--assign-left`}\n            onClick={(e) => {\n              e.stopPropagation();\n              setAssignValueToRange(EAssignSide.Left);\n            }}\n            attr-is-active={`${assignValueToRange === EAssignSide.Left}`}\n          >\n            <ChevronLeft />\n          </div>\n          <div\n            className={`${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-body--lenders-count`}\n          >\n            {label}\n            {value}\n          </div>\n          <div\n            className={`${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-body--assign-right`}\n            onClick={(e) => {\n              e.stopPropagation();\n              setAssignValueToRange(EAssignSide.Right);\n            }}\n            attr-is-active={`${assignValueToRange === EAssignSide.Right}`}\n          >\n            <ChevronRight />\n          </div>\n        </div>\n        <div\n          className={`${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-actions`}\n        >\n          <div\n            className={`${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-actions--cancel`}\n            onClick={e => unfixAddTrigger(e)}\n          >\n            Cancel\n          </div>\n          <div\n            className={`${COMPONENT_CLASS}__track__range-triggers--add-trigger__settings-actions--apply`}\n            onClick={(e) => {\n              e.stopPropagation();\n              addTrigger(addTriggerFixedScore);\n            }}\n          >\n            Apply\n          </div>\n        </div>\n      </div>\n    );\n  };\n  const renderAddTrackTrigger = (): JSX.Element | null => {\n    const isNoTriggers = !triggers?.filter(({ isHidden }) => !isHidden).length;\n\n    const x = getAddTriggerPosition();\n    const score = isAddTriggerFixed\n      ? addTriggerFixedScore\n      : isNoTriggers && !isMouseOverTrack\n        ? (min + max) / 2 - 1\n        : getAddTriggerScore(x);\n\n    const triggerCollision = !isAddTriggerFixed\n      ? getAddTriggerCollisionDirection(x)\n      : ECollision.None;\n    const isLeftCollision = triggerCollision === ECollision.Left;\n    const isRightCollision = triggerCollision === ECollision.Right;\n    const isBothCollision = triggerCollision === ECollision.Both;\n    const isCollisionVisible\n        = (isLeftCollision || isRightCollision || isBothCollision)\n          && !(isNoTriggers && !isMouseOverTrack);\n    const left = getTrackXByScore(score);\n    const inRange = getInRange(score);\n\n    const isTriggerWithScoreExists = getTriggerByScore(score);\n\n    if (isTriggerWithScoreExists || movingTrigger || isMouseOverTrigger)\n      return null;\n\n    return (\n      <div\n        className={cn(\n          `${COMPONENT_CLASS}__track__range-triggers--add-trigger`,\n          {\n            [`${COMPONENT_CLASS}__track__range-triggers--add-trigger--fixed`]:\n                isAddTriggerFixed,\n            [`${COMPONENT_CLASS}__track__range-triggers--add-trigger--force-visible`]:\n                isNoTriggers,\n            [`${COMPONENT_CLASS}__track__range-triggers--add-trigger--moved-smoothly`]:\n                isNoTriggers && !isMouseOverTrack,\n          },\n        )}\n        style={{ left: `${left}px` }}\n        onClick={() =>\n          inRange?.value ? fixAddTrigger(score, inRange) : addTrigger(score)}\n      >\n        <div\n          ref={addTriggerRef}\n          className={cn(\n            `${COMPONENT_CLASS}__track__range-triggers--add-trigger__point`,\n            {\n              [`${COMPONENT_CLASS}__track__range-triggers--add-trigger__point--shake`]:\n                  isCollisionVisible,\n            },\n          )}\n          data-point-value={getPointValue(score)}\n        >\n          <Plus />\n        </div>\n        {isAddTriggerFixed && renderAddTrackTriggerSettings()}\n        {renderCollision({\n          isCollisionVisible,\n          isLeftCollision,\n          isRightCollision,\n          isBothCollision,\n        })}\n      </div>\n    );\n  };\n  const renderTrackTrigger = (\n    { value: triggerScore, isFixed, isHidden }: { value: number; isFixed?: boolean; isHidden?: boolean },\n    triggerIndex: number,\n  ): JSX.Element => {\n    const triggerCollision = getTriggerCollisionDirection(\n      triggerIndex,\n      triggerScore,\n    );\n    const isLeftCollision = triggerCollision === ECollision.Left;\n    const isRightCollision = triggerCollision === ECollision.Right;\n    const isBothCollision = triggerCollision === ECollision.Both;\n    const isCurrentTriggerMoving = isTriggerMoving(triggerIndex);\n    const isCollisionVisible\n        = isCurrentTriggerMoving\n          && isTriggerMoved\n          && (isLeftCollision || isRightCollision || isBothCollision);\n    return (\n      <div\n        key={`${COMPONENT_CLASS}__track__range-triggers--trigger-${triggerIndex}`}\n        style={{\n          left: getTrackXByScore(triggerScore).toString().concat('px'),\n        }}\n        className={cn(`${COMPONENT_CLASS}__track__range-triggers--trigger`, {\n          [`${COMPONENT_CLASS}__track__range-triggers--trigger__moving`]:\n              isCurrentTriggerMoving,\n          [`${COMPONENT_CLASS}__track__range-triggers--trigger__fixed`]:\n              isFixed,\n          [`${COMPONENT_CLASS}__track__range-triggers--trigger__hidden`]:\n              isHidden,\n        })}\n        {...(isMobile\n          ? {}\n          : {\n              onMouseOver: setMouseOverTrigger,\n              onMouseLeave: setMouseLeaveTrigger,\n            })}\n      >\n        <div\n          className={cn(\n            `${COMPONENT_CLASS}__track__range-triggers--trigger__point`,\n            {\n              [`${COMPONENT_CLASS}__track__range-triggers--trigger__point--shake`]:\n                  isCollisionVisible,\n            },\n          )}\n          data-point-value={getPointValue(triggerScore)}\n          {...(isMobile\n            ? {\n                onTouchStart: e => onTriggerMouseDown(e, triggerIndex),\n                onTouchEnd: resetMovingTrigger,\n              }\n            : {\n                onMouseDown: e => onTriggerMouseDown(e, triggerIndex),\n                onMouseUp: resetMovingTrigger,\n              })}\n        />\n        <div\n          className={cn(\n            `${COMPONENT_CLASS}__track__range-triggers--trigger__actions`,\n            {\n              [`${COMPONENT_CLASS}__track__range-triggers--trigger__actions--hidden`]:\n                  isCurrentTriggerMoving,\n            },\n          )}\n        >\n          <div\n            className={`${COMPONENT_CLASS}__track__range-triggers--trigger__actions--remove`}\n            onClick={() => removeTrigger(triggerIndex)}\n          >\n            <X />\n          </div>\n        </div>\n        {renderCollision({\n          isCollisionVisible,\n          isLeftCollision,\n          isRightCollision,\n          isBothCollision,\n          className: `${COMPONENT_CLASS}__track__range-triggers--trigger__collision`,\n        })}\n      </div>\n    );\n  };\n  const renderTrackTriggers = (): JSX.Element => {\n    return (\n      <div className={`${COMPONENT_CLASS}__track__range-triggers`}>\n        {triggers?.map(renderTrackTrigger)}\n      </div>\n    );\n  };\n  const renderRangeValue = ({ from, to, label, value }: IRangeItem, rangeIndex: number): JSX.Element | null => {\n    if (!value) return null;\n\n    const left = getTrackXByScore((to + from) / 2);\n\n    return (\n      <div\n        className={cn(`${COMPONENT_CLASS}__track__ranges-value--item`)}\n        style={{ left: `${left}px` }}\n        key={`${COMPONENT_CLASS}__track__ranges-value--item-${rangeIndex}`}\n      >\n        <div\n          className={cn(`${COMPONENT_CLASS}__track__ranges-value--item__label`)}\n        >\n          {label}\n        </div>\n        <div\n          className={cn(`${COMPONENT_CLASS}__track__ranges-value--item__value`)}\n        >\n          {value}\n        </div>\n      </div>\n    );\n  };\n  const renderRangesValue = (): JSX.Element => {\n    return (\n      <div className={cn(`${COMPONENT_CLASS}__track__ranges-value`)}>\n        {ranges?.map((range, i) => renderRangeValue(range, i))}\n      </div>\n    );\n  };\n  const renderTrackDividers = useMemo(() => {\n    const renderTrackDivider = (key = 0): JSX.Element => (\n      <div\n        key={key}\n        className={`${COMPONENT_CLASS}__track__line__dividers--item`}\n      />\n    );\n\n    const dividersCount = Number.parseInt(((max - min) / dividersRange).toString(), 10);\n    const dividers: JSX.Element[] = [];\n\n    for (let i = 0; i < dividersCount; ++i)\n      dividers.push(renderTrackDivider(i));\n\n    return (\n      <div className={`${COMPONENT_CLASS}__track__line__dividers`}>\n        {dividers}\n      </div>\n    );\n  }, [trackRef, minRange, min, max]);\n  const renderTrackLine = (): JSX.Element => {\n    return (\n      <div className={`${COMPONENT_CLASS}__track__line`}>\n        <div className={`${COMPONENT_CLASS}__track__line__extremum--min`}>\n          {min}\n        </div>\n        {renderTrackDividers}\n        <div className={`${COMPONENT_CLASS}__track__line__extremum--max`}>\n          {max}\n        </div>\n      </div>\n    );\n  };\n  const renderTrack = (): JSX.Element => {\n    return (\n      <div\n        className={cn(`${COMPONENT_CLASS}__track`, className)}\n        ref={trackRef}\n      >\n        {renderTrackLine()}\n        {renderAddTrackTrigger()}\n        {renderTrackTriggers()}\n        {renderRangesValue()}\n      </div>\n    );\n  };\n  const render = (): JSX.Element => {\n    return (\n      <div\n        className={COMPONENT_CLASS}\n        onMouseOver={setMouseOverTrack}\n        onMouseLeave={setMouseLeaveTrack}\n        onMouseMove={e => setMouseTrackPosition(e?.clientX)}\n      >\n        {renderTrack()}\n      </div>\n    );\n  };\n\n  return render();\n};\n\nexport default RangeSlider2;\n"],"mappings":"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"}

package/dist/es/Atomic/FormElements/RangeSlider2/RangeSlider2.styles.css

@@ -0,0 +1,360 @@
+@import "https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap";
+@keyframes shake {
+  10%, 90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+  20%, 80% {
+    transform: translate3d(1px, 0, 0);
+  }
+  30%, 50%, 70% {
+    transform: translate3d(-2px, 0, 0);
+  }
+  40%, 60% {
+    transform: translate3d(2px, 0, 0);
+  }
+}
+.range-slider2 {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 100%;
+  margin-top: 16px;
+}
+.range-slider2 .collision, .range-slider2 .range-slider2__track__range-triggers--trigger__collision, .range-slider2 .range-slider2__track__range-triggers--add-trigger__collision {
+  position: absolute;
+  z-index: 1;
+  top: 8px;
+  width: 0;
+  height: 4px;
+  font-size: 0;
+  opacity: 0;
+  border-radius: 5px;
+  background: #f06d8d;
+}
+.range-slider2 .collision--visible {
+  opacity: 1;
+}
+.range-slider2 .collision--left {
+  left: 10px;
+  transform: translateX(-100%);
+}
+.range-slider2 .collision--right {
+  left: 10px;
+}
+.range-slider2 .collision--both {
+  left: 10px;
+  transform: translateX(-50%);
+}
+.range-slider2__track {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 20px;
+}
+.range-slider2__track__line {
+  position: absolute;
+  left: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 4px;
+  border-radius: 4px;
+  background: linear-gradient(270deg, #99c28c 0%, #f06d8d 100.94%);
+}
+.range-slider2__track__line__dividers {
+  display: flex;
+  height: 100%;
+}
+.range-slider2__track__line__dividers--item {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+}
+.range-slider2__track__line__dividers--item:not(:last-child)::after {
+  position: absolute;
+  right: -1px;
+  width: 2px;
+  height: 100%;
+  content: "";
+  background: rgba(255, 255, 255, 0.4);
+}
+.range-slider2__track__line__extremum--min, .range-slider2__track__line__extremum--max {
+  position: absolute;
+  bottom: 0;
+  font-family: "Roboto";
+  font-size: 13px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 20px;
+  color: #1e1e2d;
+  transform: translateY(-22px);
+}
+.range-slider2__track__line__extremum--min {
+  left: 0;
+}
+.range-slider2__track__line__extremum--max {
+  right: 0;
+}
+.range-slider2__track__range-triggers {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.range-slider2__track__range-triggers--add-trigger {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  opacity: 0;
+  transition: opacity 0.3s;
+  transform: translateX(-50%);
+}
+.range-slider2__track__range-triggers--add-trigger--fixed {
+  z-index: 999 !important;
+  opacity: 1 !important;
+}
+.range-slider2__track__range-triggers--add-trigger--force-visible {
+  opacity: 1 !important;
+}
+.range-slider2__track__range-triggers--add-trigger--moved-smoothly {
+  transition: all 0.3s;
+}
+.range-slider2__track__range-triggers--add-trigger__point {
+  position: relative;
+  z-index: 3;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  margin: 0 auto;
+  cursor: pointer;
+  border: 1px solid #6b81dd;
+  border-radius: 50%;
+  background: #f4f6ff;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1019607843);
+  transition: opacity 0.5s;
+}
+.range-slider2__track__range-triggers--add-trigger__point svg {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  color: #6b81dd;
+}
+.range-slider2__track__range-triggers--add-trigger__point:before {
+  position: absolute;
+  top: calc(-100% - 13px);
+  font-family: "Roboto";
+  font-size: 13px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 20px;
+  content: attr(data-point-value);
+  white-space: nowrap;
+  color: #9aa0b9;
+}
+.range-slider2__track__range-triggers--add-trigger__point--shake {
+  animation: shake 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+}
+.range-slider2__track__range-triggers--add-trigger__settings {
+  position: absolute;
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-width: 125px;
+  padding: 2px;
+  border-radius: 3px;
+  background: #ffffff;
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.05);
+  transform: translate(calc(-50% + 10px), 0px);
+}
+.range-slider2__track__range-triggers--add-trigger__settings-body {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 4px;
+}
+.range-slider2__track__range-triggers--add-trigger__settings-body--assign-left, .range-slider2__track__range-triggers--add-trigger__settings-body--assign-right {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  width: 22px;
+  height: 24px;
+  cursor: pointer;
+  border-radius: 3px;
+  background: #f4f6ff;
+}
+.range-slider2__track__range-triggers--add-trigger__settings-body--assign-left[attr-is-active=true], .range-slider2__track__range-triggers--add-trigger__settings-body--assign-right[attr-is-active=true] {
+  border: 1px solid #6b81dd;
+  border-radius: 3px;
+  background: #e2e6f8;
+}
+.range-slider2__track__range-triggers--add-trigger__settings-body--assign-left svg, .range-slider2__track__range-triggers--add-trigger__settings-body--assign-right svg {
+  width: 16px;
+  height: 16px;
+}
+.range-slider2__track__range-triggers--add-trigger__settings-body--lenders-count {
+  font-size: 13px;
+  line-height: 20px;
+  color: #1e1e2d;
+}
+.range-slider2__track__range-triggers--add-trigger__settings-actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+}
+.range-slider2__track__range-triggers--add-trigger__settings-actions--cancel, .range-slider2__track__range-triggers--add-trigger__settings-actions--apply {
+  width: calc(100% - 4px);
+  font-size: 11px;
+  line-height: 20px;
+  cursor: pointer;
+  text-align: center;
+  color: #6b81dd;
+}
+.range-slider2__track__range-triggers--add-trigger__settings-actions--apply {
+  color: #ffffff;
+  border-radius: 3px;
+  background: #6b81dd;
+}
+.range-slider2__track__range-triggers--trigger {
+  position: absolute;
+  z-index: 3;
+  top: 50%;
+  width: 20px;
+  height: 20px;
+  transform: translate(-50%, -50%);
+}
+.range-slider2__track__range-triggers--trigger__moving {
+  z-index: 2;
+}
+.range-slider2__track__range-triggers--trigger__fixed {
+  pointer-events: none;
+}
+.range-slider2__track__range-triggers--trigger__point {
+  position: absolute;
+  z-index: 10;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  cursor: move;
+  border: 1px solid #ffffff;
+  border-radius: 50%;
+  background: #6b81dd;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+}
+.range-slider2__track__range-triggers--trigger__point:before {
+  position: absolute;
+  top: calc(-100% - 13px);
+  left: 9px;
+  width: fit-content;
+  font-family: "Roboto";
+  font-size: 13px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 20px;
+  content: attr(data-point-value);
+  white-space: nowrap;
+  color: #1e1e2d;
+  transform: translateX(-50%);
+}
+.range-slider2__track__range-triggers--trigger__point:after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 50%;
+  height: 50%;
+  content: "";
+  border-radius: 50%;
+  background: #e2e6f8;
+  transform: translate(-50%, -50%);
+}
+.range-slider2__track__range-triggers--trigger__point--shake {
+  animation: shake 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+}
+.range-slider2__track__range-triggers--trigger__actions {
+  position: absolute;
+  z-index: 9;
+  top: 0;
+  left: 0;
+  display: flex;
+  overflow: hidden;
+  justify-content: center;
+  align-items: flex-end;
+  box-sizing: border-box;
+  width: 20px;
+  height: 0;
+  opacity: 0;
+  border: 1px solid #ffffff;
+  border-radius: 16px;
+  background: #fff4f7;
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s;
+}
+.range-slider2__track__range-triggers--trigger__actions--hidden {
+  height: 0 !important;
+}
+.range-slider2__track__range-triggers--trigger__actions--remove {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  color: #f06d8d;
+  transition: margin 0.5s;
+}
+.range-slider2__track__range-triggers--trigger__actions--remove[is-hidden=true] {
+  margin-top: -20px !important;
+}
+.range-slider2__track__range-triggers--trigger__actions--remove svg {
+  width: 16px;
+  height: 16px;
+}
+.range-slider2__track__range-triggers--trigger__hidden .range-slider2__track__range-triggers--trigger__point, .range-slider2__track__range-triggers--trigger__hidden .range-slider2__track__range-triggers--trigger__collision, .range-slider2__track__range-triggers--trigger__hidden .range-slider2__track__range-triggers--trigger__actions {
+  display: none;
+}
+.range-slider2__track__range-triggers--trigger:hover .range-slider2__track__range-triggers--trigger__point {
+  background: #4f68d1;
+}
+.range-slider2__track__range-triggers--trigger:hover .range-slider2__track__range-triggers--trigger__actions {
+  height: 40px;
+  opacity: 1;
+}
+.range-slider2__track__ranges-value {
+  position: absolute;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  transform: translateY(calc(50% + 6px));
+}
+.range-slider2__track__ranges-value--item {
+  position: absolute;
+  display: flex;
+  padding: 2px;
+  font-size: 13px;
+  line-height: 20px;
+  white-space: nowrap;
+  color: #1e1e2d;
+  border-radius: 3px;
+  background: #ffffff;
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.05);
+  transition: left 0.3s;
+  transform: translateX(-50%);
+}
+.range-slider2:hover [class*=add-trigger] {
+  opacity: 1;
+}
+
+.moving-cursor {
+  cursor: move !important;
+}

package/dist/es/Atomic/FormElements/SwitchableRow/SwitchableRow.js

@@ -0,0 +1,29 @@
+import '../../../styles/base.css';
+import Switcher from "../Switcher/Switcher.js";
+import './SwitchableRow.styles.css';/* empty css                   */
+import cn from "classnames";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Atomic/FormElements/SwitchableRow/SwitchableRow.tsx
+var RC_default = "switchable-row";
+var SwitchableRow = (props) => {
+	const { RC = RC_default, className, children, isActive, setIsActive, switcherLabel, isSwitcherLabelBold, testId = RC_default } = props || {};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(RC, className),
+		"data-testid": testId,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn(`${RC}__cell`),
+			children: /* @__PURE__ */ jsx(Switcher, {
+				isActive,
+				onChange: setIsActive,
+				isLabelBold: isSwitcherLabelBold,
+				label: switcherLabel,
+				testId: `${testId}-switcher`
+			})
+		}), children]
+	});
+};
+//#endregion
+export { SwitchableRow as default };
+
+//# sourceMappingURL=SwitchableRow.js.map

package/dist/es/Atomic/FormElements/SwitchableRow/SwitchableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchableRow.js","names":[],"sources":["../../../../../src/Atomic/FormElements/SwitchableRow/SwitchableRow.tsx"],"sourcesContent":["import type { ISwitchableRowProps } from './SwitchableRow.interface';\n\nimport cn from 'classnames';\n\nimport React from 'react';\n\nimport Switcher from '../Switcher/Switcher';\nimport './SwitchableRow.scss';\n\nconst RC_default = 'switchable-row';\n\nconst SwitchableRow: React.FC<ISwitchableRowProps> = (props) => {\n  const {\n    RC = RC_default,\n    className,\n    children,\n    isActive,\n    setIsActive,\n    switcherLabel,\n    isSwitcherLabelBold,\n    testId = RC_default,\n  } = props || {};\n\n  return (\n    <div className={cn(RC, className)} data-testid={testId}>\n      <div className={cn(`${RC}__cell`)}>\n        <Switcher\n          isActive={isActive}\n          onChange={setIsActive}\n          isLabelBold={isSwitcherLabelBold}\n          label={switcherLabel}\n          testId={`${testId}-switcher`}\n        />\n      </div>\n      {children}\n    </div>\n  );\n};\n\nexport default SwitchableRow;\n"],"mappings":";;;;;;AASA,IAAM,aAAa;AAEnB,IAAM,iBAAgD,UAAU;CAC9D,MAAM,EACJ,KAAK,YACL,WACA,UACA,UACA,aACA,eACA,qBACA,SAAS,eACP,SAAS,CAAC;CAEd,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,IAAI,SAAS;EAAG,eAAa;YAAhD,CACE,oBAAC,OAAD;GAAK,WAAW,GAAG,GAAG,GAAG,OAAO;aAC9B,oBAAC,UAAD;IACY;IACV,UAAU;IACV,aAAa;IACb,OAAO;IACP,QAAQ,GAAG,OAAO;GACnB,CAAA;EACE,CAAA,GACJ,QACE;;AAET"}

package/dist/es/Atomic/FormElements/SwitchableRow/SwitchableRow.styles.css

@@ -0,0 +1,14 @@
+.switchable-row {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+.switchable-row__cell {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  box-sizing: border-box;
+  height: 100%;
+}

package/dist/es/Atomic/FormElements/Switcher/Switcher.js

@@ -0,0 +1,36 @@
+import '../../../styles/base.css';
+import Hint from "../../UI/Hint/Hint.js";
+import './Switcher.styles.css';/* empty css              */
+import cn from "classnames";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Atomic/FormElements/Switcher/Switcher.tsx
+var RC = "switcher";
+var Switcher = ({ label, className, isActive, disabled, onChange, isLabelBold, hint, hintSide, testId = "switcher" }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": testId,
+		className: cn(RC, className, { [`${RC}_disabled`]: disabled }),
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"data-testid": `${testId}-button`,
+			className: cn(`${RC}__button`),
+			disabled,
+			onClick: (e) => onChange(!isActive, e),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cn(`${RC}__button-content`, { [`${RC}__button-content_active`]: isActive }),
+				children: /* @__PURE__ */ jsx("div", { className: `${RC}__ball` })
+			}), label && /* @__PURE__ */ jsx("span", {
+				className: cn(`${RC}__label`, { [`${RC}__label_bold`]: isLabelBold }),
+				children: label
+			})]
+		}), hint && /* @__PURE__ */ jsx(Hint, {
+			className: `${RC}__hint`,
+			hint,
+			side: hintSide
+		})]
+	});
+};
+//#endregion
+export { Switcher as default };
+
+//# sourceMappingURL=Switcher.js.map

package/dist/es/Atomic/FormElements/Switcher/Switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switcher.js","names":[],"sources":["../../../../../src/Atomic/FormElements/Switcher/Switcher.tsx"],"sourcesContent":["import type { ISwitcherProps } from './Switcher.interface';\nimport cn from 'classnames';\n\nimport React from 'react';\n\nimport Hint from '../../UI/Hint/Hint';\n\nimport './Switcher.scss';\n\nconst RC = 'switcher';\n\nconst Switcher: React.FC<ISwitcherProps> = ({\n  label,\n  className,\n  isActive,\n  disabled,\n  onChange,\n  isLabelBold,\n  hint,\n  hintSide,\n  testId = 'switcher',\n}) => {\n  return (\n    <div\n      data-testid={testId}\n      className={cn(RC, className, { [`${RC}_disabled`]: disabled })}\n    >\n      <button\n        type=\"button\"\n        data-testid={`${testId}-button`}\n        className={cn(`${RC}__button`)}\n        disabled={disabled}\n        onClick={e => onChange(!isActive, e)}\n      >\n        <div\n          className={cn(`${RC}__button-content`, {\n            [`${RC}__button-content_active`]: isActive,\n          })}\n        >\n          <div className={`${RC}__ball`} />\n        </div>\n        {label && (\n          <span\n            className={cn(`${RC}__label`, {\n              [`${RC}__label_bold`]: isLabelBold,\n            })}\n          >\n            {label}\n          </span>\n        )}\n      </button>\n      {hint && <Hint className={`${RC}__hint`} hint={hint} side={hintSide} />}\n    </div>\n  );\n};\n\nexport default Switcher;\n"],"mappings":";;;;;;AASA,IAAM,KAAK;AAEX,IAAM,YAAsC,EAC1C,OACA,WACA,UACA,UACA,UACA,aACA,MACA,UACA,SAAS,iBACL;CACJ,OACE,qBAAC,OAAD;EACE,eAAa;EACb,WAAW,GAAG,IAAI,WAAW,GAAG,GAAG,GAAG,aAAa,SAAS,CAAC;YAF/D,CAIE,qBAAC,UAAD;GACE,MAAK;GACL,eAAa,GAAG,OAAO;GACvB,WAAW,GAAG,GAAG,GAAG,SAAS;GACnB;GACV,UAAS,MAAK,SAAS,CAAC,UAAU,CAAC;aALrC,CAOE,oBAAC,OAAD;IACE,WAAW,GAAG,GAAG,GAAG,mBAAmB,GACpC,GAAG,GAAG,2BAA2B,SACpC,CAAC;cAED,oBAAC,OAAD,EAAK,WAAW,GAAG,GAAG,QAAU,CAAA;GAC7B,CAAA,GACJ,SACC,oBAAC,QAAD;IACE,WAAW,GAAG,GAAG,GAAG,UAAU,GAC3B,GAAG,GAAG,gBAAgB,YACzB,CAAC;cAEA;GACG,CAAA,CAEF;MACP,QAAQ,oBAAC,MAAD;GAAM,WAAW,GAAG,GAAG;GAAe;GAAM,MAAM;EAAW,CAAA,CACnE;;AAET"}

package/dist/es/Atomic/FormElements/Switcher/Switcher.styles.css

@@ -0,0 +1,83 @@
+/* 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;
+}
+
+.switcher__button {
+  display: inline-flex;
+  align-items: center;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  font-style: inherit;
+  cursor: pointer;
+  color: inherit;
+}
+.switcher_disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.switcher__button-content {
+  box-sizing: border-box;
+  width: 26px;
+  min-width: 26px;
+  height: 16px;
+  padding: 1px;
+  border-radius: 8px;
+  background-color: rgba(166, 172, 177, 0.5);
+}
+.switcher__button-content_active {
+  background-color: #6b81dd;
+}
+.switcher__button-content_active .switcher__ball {
+  transform: translateX(calc(100% - 4px));
+}
+.switcher__ball {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background-color: #fff;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+  transition: transform 0.2s ease;
+}
+.switcher__label {
+  margin-left: 4px;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  font-style: inherit;
+  line-height: 24px;
+  user-select: none;
+  text-align: left;
+  color: inherit;
+}
+.switcher__label_bold {
+  font-weight: 500;
+}
+.switcher__wrap {
+  display: inline-flex;
+  align-items: center;
+}
+.switcher__hint {
+  margin-left: 5px;
+}
+.switcher__hint .hint__button svg {
+  width: 16px;
+  min-width: 16px;
+}

package/dist/es/Atomic/FormElements/Switcher/index.js

@@ -0,0 +1,7 @@
+import Switcher from "./Switcher.js";
+//#region src/Atomic/FormElements/Switcher/index.ts
+var Switcher_default = Switcher;
+//#endregion
+export { Switcher_default as default };
+
+//# sourceMappingURL=index.js.map

package/dist/es/Atomic/FormElements/Switcher/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/Atomic/FormElements/Switcher/index.ts"],"sourcesContent":["import type { ISwitcherProps } from './Switcher.interface';\nimport Switcher from './Switcher';\n\nexport type { ISwitcherProps };\nexport default Switcher;\n"],"mappings":";;AAIA,IAAA,mBAAe"}