{"ast":null,"code":"var __jsx = React.createElement;\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { em, textLightColor } from '~/utils/style';\nimport RangeSlider from '~/components/RangeSlider';\nimport styled from 'styled-components';\nimport { useTranslation } from '~/utils/i18n';\nconst Label = styled.div.withConfig({\n  displayName: \"StepSlider__Label\",\n  componentId: \"u5jksn-0\"\n})([\"color:\", \";font-size:\", \";margin-bottom:\", \";\"], textLightColor, em(12), em(5));\nconst FullWidthRangeSlider = styled(RangeSlider).withConfig({\n  displayName: \"StepSlider__FullWidthRangeSlider\",\n  componentId: \"u5jksn-1\"\n})([\"width:100%;\"]);\n\nconst StepSlider = ({\n  onChange,\n  onChangeComplete,\n  value,\n  steps\n}) => {\n  var _steps$step;\n\n  const {\n    t\n  } = useTranslation('samples');\n  const {\n    0: step,\n    1: setStep\n  } = useState(value);\n  useEffect(() => setStep(value), [value]);\n  const changeStep = useCallback(num => {\n    setStep(num);\n    onChange === null || onChange === void 0 ? void 0 : onChange(num);\n  }, [onChange]);\n  return __jsx(React.Fragment, null, __jsx(Label, null, `${t('step')}: ${(_steps$step = steps[step]) !== null && _steps$step !== void 0 ? _steps$step : '...'}`), __jsx(FullWidthRangeSlider, {\n    min: 0,\n    max: steps.length ? steps.length - 1 : 0,\n    step: 1,\n    value: step,\n    onChange: changeStep,\n    onChangeComplete: onChangeComplete\n  }));\n};\n\nexport default StepSlider;","map":null,"metadata":{},"sourceType":"module"}