@fluentui/react-slider 9.0.0-alpha.2 → 9.0.0-alpha.6

package/lib/components/Slider/useSliderStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Slider/useSliderStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { createFocusIndicatorStyleRule } from '@fluentui/react-tabster';\nimport type { SliderState } from './Slider.types';\nimport { markClassName } from './useSliderState';\n\nconst thumbClassName = 'ms-Slider-thumb';\nconst trackClassName = 'ms-Slider-track';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: theme => ({\n    position: 'relative',\n    display: 'inline-flex',\n    userSelect: 'none',\n    touchAction: 'none',\n    verticalAlign: 'bottom',\n  }),\n\n  small: {\n    '--slider-thumb-size': '10px',\n    '--slider-rail-size': '2px',\n    '--slider-mark-size': '2px',\n  },\n\n  medium: {\n    '--slider-thumb-size': '20px',\n    '--slider-rail-size': '4px',\n    '--slider-mark-size': '4px',\n  },\n\n  horizontal: theme => ({\n    minWidth: '120px',\n    minHeight: 'var(--slider-thumb-size)',\n    flexDirection: 'column',\n  }),\n\n  vertical: theme => ({\n    transform: 'scaleY(-1)',\n    minWidth: 'var(--slider-thumb-size)',\n    minHeight: '120px',\n    flexDirection: 'row',\n  }),\n\n  enabled: theme => ({\n    cursor: 'grab',\n    ':hover': {\n      '& .ms-Slider-thumb': {\n        background: theme.alias.color.neutral.brandBackgroundHover,\n      },\n      '& .ms-Slider-track': {\n        background: theme.alias.color.neutral.brandBackgroundHover,\n      },\n    },\n    ':active': {\n      cursor: 'grabbing',\n      '& .ms-Slider-thumb': {\n        background: theme.alias.color.neutral.brandBackgroundPressed,\n      },\n      '& .ms-Slider-track': {\n        background: theme.alias.color.neutral.brandBackgroundPressed,\n      },\n    },\n  }),\n\n  disabled: theme => ({\n    cursor: 'not-allowed',\n  }),\n\n  focusIndicator: createFocusIndicatorStyleRule(\n    theme => ({\n      ':after': {\n        content: \"''\",\n        position: 'absolute',\n        top: '-6px',\n        right: '-6px',\n        bottom: '-6px',\n        left: '-6px',\n        boxSizing: 'border-box',\n        border: `1px solid ${theme.alias.color.neutral.neutralForeground1}`,\n        borderRadius: theme.global.borderRadius.medium,\n      },\n    }),\n    { selector: 'focus-within' },\n  ),\n});\n\n/**\n * Styles for the slider wrapper slot\n */\nconst useSliderWrapper = makeStyles({\n  sliderWrapper: theme => ({\n    position: 'absolute',\n    overflow: 'hidden',\n  }),\n\n  horizontal: theme => ({\n    left: '0px',\n    right: '0px',\n    top: '0px',\n    minHeight: 'var(--slider-thumb-size)',\n  }),\n\n  vertical: theme => ({\n    top: '0px',\n    bottom: '0px',\n    left: '0px',\n    minWidth: 'var(--slider-thumb-size)',\n  }),\n});\n\n/**\n * Styles for the rail slot\n */\nconst useRailStyles = makeStyles({\n  rail: theme => ({\n    position: 'absolute',\n    borderRadius: theme.global.borderRadius.xLarge,\n    boxSizing: 'border-box',\n    pointerEvents: 'none',\n  }),\n\n  enabled: theme => ({\n    background: theme.alias.color.neutral.neutralStrokeAccessible,\n  }),\n\n  disabled: theme => ({\n    background: theme.alias.color.neutral.neutralBackgroundDisabled,\n  }),\n\n  horizontal: theme => ({\n    height: 'var(--slider-rail-size)',\n    top: '50%',\n    left: 'calc(var(--slider-thumb-size) * .5)',\n    right: 'calc(var(--slider-thumb-size) * .5)',\n    transform: 'translateY(-50%)',\n  }),\n\n  vertical: theme => ({\n    width: 'var(--slider-rail-size)',\n    left: '50%',\n    top: 'calc(var(--slider-thumb-size) * .5)',\n    bottom: 'calc(var(--slider-thumb-size) * .5)',\n    transform: 'translateX(-50%)',\n  }),\n});\n\n/**\n * Styles for the trackWrapper slot\n */\nconst useTrackWrapperStyles = makeStyles({\n  trackWrapper: theme => ({\n    position: 'absolute',\n  }),\n\n  horizontal: theme => ({\n    top: '50%',\n    left: 'calc(var(--slider-thumb-size) * .5)',\n    right: 'calc(var(--slider-thumb-size) * .5)',\n  }),\n\n  vertical: theme => ({\n    left: '50%',\n    top: 'calc(var(--slider-thumb-size) * .5)',\n    bottom: 'calc(var(--slider-thumb-size) * .5)',\n  }),\n});\n\n/**\n * Styles for the track slot\n */\nconst useTrackStyles = makeStyles({\n  track: theme => ({\n    position: 'absolute',\n    borderRadius: theme.global.borderRadius.xLarge,\n  }),\n\n  horizontal: theme => ({\n    height: 'var(--slider-rail-size)',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    minWidth: 'calc(var(--slider-thumb-size) / 4)',\n  }),\n\n  vertical: theme => ({\n    width: 'var(--slider-rail-size)',\n    left: '50%',\n    transform: 'translateX(-50%)',\n    minHeight: 'calc(var(--slider-thumb-size) / 4)',\n  }),\n\n  enabled: theme => ({\n    background: theme.alias.color.neutral.brandBackground,\n  }),\n\n  disabled: theme => ({\n    background: theme.alias.color.neutral.neutralForegroundDisabled,\n  }),\n});\n\n/**\n * Styles for the mark slot\n */\nconst useMarksWrapperStyles = makeStyles({\n  marksWrapper: theme => ({\n    position: 'relative',\n    display: 'grid',\n    outline: 'none',\n    zIndex: '1',\n    whiteSpace: 'nowrap',\n    [`& .${markClassName}`]: {\n      // TODO: change to theme neutralStrokeOnBrand once it is added\n      background: 'white',\n    },\n\n    '& .ms-Slider-firstMark, .ms-Slider-lastMark': {\n      opacity: '0',\n    },\n  }),\n\n  horizontal: theme => ({\n    marginTop: 'calc(var(--slider-rail-size) + var(--slider-mark-size))',\n    marginLeft: 'calc(var(--slider-thumb-size) / 2)',\n    marginRight: 'calc(var(--slider-thumb-size) / 2)',\n    justifyItems: 'end',\n\n    '& .ms-Slider-markItemContainer': {\n      display: 'flex',\n      flexDirection: 'column',\n      transform: 'translateX(50%)',\n      alignItems: 'center',\n    },\n\n    [`& .${markClassName}`]: {\n      height: '4px',\n      width: '1px',\n    },\n  }),\n\n  vertical: theme => ({\n    marginTop: 'calc(var(--slider-thumb-size) / 2)',\n    marginBottom: 'calc(var(--slider-thumb-size) / 2)',\n    marginLeft: 'calc(var(--slider-rail-size) + var(--slider-mark-size))',\n    justifyItems: 'start',\n\n    '& .ms-Slider-markItemContainer': {\n      display: 'flex',\n      flexDirection: 'row',\n      transform: 'translateY(50%)',\n      alignItems: 'center',\n      maxWidth: '100%',\n      maxHeight: '100%',\n    },\n\n    [`& .${markClassName}`]: {\n      height: '1px',\n      width: 'var(--slider-mark-size)',\n    },\n  }),\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbWrapperStyles = makeStyles({\n  thumbWrapper: theme => ({\n    position: 'absolute',\n    outline: 'none',\n    zIndex: '2',\n  }),\n\n  horizontal: theme => ({\n    left: 'calc(var(--slider-thumb-size) / 2)',\n    right: 'calc(var(--slider-thumb-size) / 2)',\n    top: '50%',\n  }),\n\n  vertical: theme => ({\n    top: 'calc(var(--slider-thumb-size) / 2)',\n    bottom: 'calc(var(--slider-thumb-size) / 2)',\n    left: '50%',\n  }),\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: theme => ({\n    position: 'absolute',\n    width: 'var(--slider-thumb-size)',\n    height: 'var(--slider-thumb-size)',\n    top: '0px',\n    left: '0px',\n    bottom: '0px',\n    right: '0px',\n    outline: 'none',\n    borderRadius: theme.global.borderRadius.circular,\n    boxSizing: 'border-box',\n    boxShadow: `0 0 0 calc(var(--slider-thumb-size) * .2) ${theme.alias.color.neutral.neutralBackground1} inset`,\n    transform: 'translate(-50%, -50%)',\n\n    ':before': {\n      position: 'absolute',\n      top: '0px',\n      left: '0px',\n      bottom: '0px',\n      right: '0px',\n      borderRadius: theme.global.borderRadius.circular,\n      boxSizing: 'border-box',\n      content: \"''\",\n      border: `calc(var(--slider-thumb-size) * .05) solid ${theme.alias.color.neutral.neutralStroke1}`,\n    },\n  }),\n\n  enabled: theme => ({\n    background: theme.alias.color.neutral.brandBackground,\n  }),\n\n  disabled: theme => ({\n    background: theme.alias.color.neutral.neutralForegroundDisabled,\n    border: `calc(var(--slider-thumb-size) * .05) solid ${theme.alias.color.neutral.neutralBackgroundDisabled}`,\n  }),\n\n  horizontal: theme => ({\n    top: '50%',\n  }),\n});\n\n/**\n * Styles for the activeRail slot\n */\nconst useActiveRailStyles = makeStyles({\n  activeRail: theme => ({\n    position: 'absolute',\n  }),\n\n  horizontal: theme => ({\n    left: 'calc(var(--slider-thumb-size) / 2)',\n    right: 'calc(var(--slider-thumb-size) / 2)',\n  }),\n\n  vertical: theme => ({\n    top: 'calc(var(--slider-thumb-size) / 2)',\n    bottom: 'calc(var(--slider-thumb-size) / 2)',\n  }),\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n  input: {\n    opacity: 0,\n    position: 'absolute',\n    padding: 0,\n    margin: 0,\n    width: '100%',\n    height: '100%',\n    touchAction: 'none',\n    pointerEvents: 'none',\n  },\n});\n\n/**\n * Apply styling to the Slider slots based on the state\n */\nexport const useSliderStyles = (state: SliderState): SliderState => {\n  const rootStyles = useRootStyles();\n  const sliderWrapperStyles = useSliderWrapper();\n  const railStyles = useRailStyles();\n  const trackWrapperStyles = useTrackWrapperStyles();\n  const trackStyles = useTrackStyles();\n  const marksWrapperStyles = useMarksWrapperStyles();\n  const thumbWrapperStyles = useThumbWrapperStyles();\n  const thumbStyles = useThumbStyles();\n  const activeRailStyles = useActiveRailStyles();\n  const inputStyles = useInputStyles();\n\n  state.root.className = mergeClasses(\n    rootStyles.root,\n    rootStyles.focusIndicator,\n    rootStyles[state.size!],\n    state.vertical ? rootStyles.vertical : rootStyles.horizontal,\n    state.disabled ? rootStyles.disabled : rootStyles.enabled,\n    rootStyles.focusIndicator,\n    state.root.className,\n  );\n\n  state.sliderWrapper.className = mergeClasses(\n    sliderWrapperStyles.sliderWrapper,\n    state.vertical ? sliderWrapperStyles.vertical : sliderWrapperStyles.horizontal,\n    state.sliderWrapper.className,\n  );\n\n  state.rail.className = mergeClasses(\n    railStyles.rail,\n    state.vertical ? railStyles.vertical : railStyles.horizontal,\n    state.disabled ? railStyles.disabled : railStyles.enabled,\n    state.rail.className,\n  );\n\n  state.sliderWrapper.className = mergeClasses(\n    sliderWrapperStyles.sliderWrapper,\n    state.vertical ? sliderWrapperStyles.vertical : sliderWrapperStyles.horizontal,\n    state.sliderWrapper.className,\n  );\n\n  state.trackWrapper.className = mergeClasses(\n    trackWrapperStyles.trackWrapper,\n    state.vertical ? trackWrapperStyles.vertical : trackWrapperStyles.horizontal,\n    state.trackWrapper.className,\n  );\n\n  state.track.className = mergeClasses(\n    trackClassName,\n    trackStyles.track,\n    state.vertical ? trackStyles.vertical : trackStyles.horizontal,\n    state.disabled ? trackStyles.disabled : trackStyles.enabled,\n    state.track.className,\n  );\n\n  state.marksWrapper.className = mergeClasses(\n    marksWrapperStyles.marksWrapper,\n    state.vertical ? marksWrapperStyles.vertical : marksWrapperStyles.horizontal,\n    state.marksWrapper.className,\n  );\n\n  state.thumbWrapper.className = mergeClasses(\n    thumbWrapperStyles.thumbWrapper,\n    state.vertical ? thumbWrapperStyles.vertical : thumbWrapperStyles.horizontal,\n    state.thumbWrapper.className,\n  );\n\n  state.thumb.className = mergeClasses(\n    thumbClassName,\n    thumbStyles.thumb,\n    !state.vertical && thumbStyles.horizontal,\n    state.disabled ? trackStyles.disabled : trackStyles.enabled,\n    state.thumb.className,\n  );\n\n  state.activeRail.className = mergeClasses(\n    activeRailStyles.activeRail,\n    state.vertical ? activeRailStyles.vertical : activeRailStyles.horizontal,\n    state.activeRail.className,\n  );\n\n  state.input.className = mergeClasses(inputStyles.input, state.input.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Slider/useSliderStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { createFocusIndicatorStyleRule } from '@fluentui/react-tabster';\nimport type { SliderState } from './Slider.types';\nimport { markClassName } from '../../utils/renderMarks';\n\nconst thumbClassName = 'ms-Slider-thumb';\nconst trackClassName = 'ms-Slider-track';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: theme => ({\n    position: 'relative',\n    display: 'inline-flex',\n    userSelect: 'none',\n    touchAction: 'none',\n    verticalAlign: 'bottom',\n  }),\n\n  small: {\n    '--slider-thumb-size': '10px',\n    '--slider-rail-size': '2px',\n    '--slider-mark-size': '2px',\n  },\n\n  medium: {\n    '--slider-thumb-size': '20px',\n    '--slider-rail-size': '4px',\n    '--slider-mark-size': '4px',\n  },\n\n  horizontal: theme => ({\n    minWidth: '120px',\n    minHeight: 'var(--slider-thumb-size)',\n    flexDirection: 'column',\n  }),\n\n  vertical: theme => ({\n    transform: 'scaleY(-1)',\n    minWidth: 'var(--slider-thumb-size)',\n    minHeight: '120px',\n    flexDirection: 'row',\n  }),\n\n  enabled: theme => ({\n    cursor: 'grab',\n    ':hover': {\n      '& .ms-Slider-thumb': {\n        background: theme.alias.color.neutral.brandBackgroundHover,\n      },\n      '& .ms-Slider-track': {\n        background: theme.alias.color.neutral.brandBackgroundHover,\n      },\n    },\n    ':active': {\n      cursor: 'grabbing',\n      '& .ms-Slider-thumb': {\n        background: theme.alias.color.neutral.brandBackgroundPressed,\n      },\n      '& .ms-Slider-track': {\n        background: theme.alias.color.neutral.brandBackgroundPressed,\n      },\n    },\n  }),\n\n  disabled: theme => ({\n    cursor: 'not-allowed',\n  }),\n\n  focusIndicator: createFocusIndicatorStyleRule(\n    theme => ({\n      ':after': {\n        content: \"''\",\n        position: 'absolute',\n        top: '-6px',\n        right: '-6px',\n        bottom: '-6px',\n        left: '-6px',\n        boxSizing: 'border-box',\n        border: `1px solid ${theme.alias.color.neutral.neutralForeground1}`,\n        borderRadius: theme.global.borderRadius.medium,\n      },\n    }),\n    { selector: 'focus-within' },\n  ),\n});\n\n/**\n * Styles for the slider wrapper slot\n */\nconst useSliderWrapper = makeStyles({\n  sliderWrapper: theme => ({\n    position: 'absolute',\n    overflow: 'hidden',\n  }),\n\n  horizontal: theme => ({\n    left: '0px',\n    right: '0px',\n    top: '0px',\n    minHeight: 'var(--slider-thumb-size)',\n  }),\n\n  vertical: theme => ({\n    top: '0px',\n    bottom: '0px',\n    left: '0px',\n    minWidth: 'var(--slider-thumb-size)',\n  }),\n});\n\n/**\n * Styles for the rail slot\n */\nconst useRailStyles = makeStyles({\n  rail: theme => ({\n    position: 'absolute',\n    borderRadius: theme.global.borderRadius.xLarge,\n    boxSizing: 'border-box',\n    pointerEvents: 'none',\n  }),\n\n  enabled: theme => ({\n    background: theme.alias.color.neutral.neutralStrokeAccessible,\n  }),\n\n  disabled: theme => ({\n    background: theme.alias.color.neutral.neutralBackgroundDisabled,\n  }),\n\n  horizontal: theme => ({\n    height: 'var(--slider-rail-size)',\n    top: '50%',\n    left: 'calc(var(--slider-thumb-size) * .5)',\n    right: 'calc(var(--slider-thumb-size) * .5)',\n    transform: 'translateY(-50%)',\n  }),\n\n  vertical: theme => ({\n    width: 'var(--slider-rail-size)',\n    left: '50%',\n    top: 'calc(var(--slider-thumb-size) * .5)',\n    bottom: 'calc(var(--slider-thumb-size) * .5)',\n    transform: 'translateX(-50%)',\n  }),\n});\n\n/**\n * Styles for the trackWrapper slot\n */\nconst useTrackWrapperStyles = makeStyles({\n  trackWrapper: theme => ({\n    position: 'absolute',\n  }),\n\n  horizontal: theme => ({\n    top: '50%',\n    left: 'calc(var(--slider-thumb-size) * .5)',\n    right: 'calc(var(--slider-thumb-size) * .5)',\n  }),\n\n  vertical: theme => ({\n    left: '50%',\n    top: 'calc(var(--slider-thumb-size) * .5)',\n    bottom: 'calc(var(--slider-thumb-size) * .5)',\n  }),\n});\n\n/**\n * Styles for the track slot\n */\nconst useTrackStyles = makeStyles({\n  track: theme => ({\n    position: 'absolute',\n    borderRadius: theme.global.borderRadius.xLarge,\n  }),\n\n  horizontal: theme => ({\n    height: 'var(--slider-rail-size)',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    minWidth: 'calc(var(--slider-thumb-size) / 4)',\n  }),\n\n  vertical: theme => ({\n    width: 'var(--slider-rail-size)',\n    left: '50%',\n    transform: 'translateX(-50%)',\n    minHeight: 'calc(var(--slider-thumb-size) / 4)',\n  }),\n\n  enabled: theme => ({\n    background: theme.alias.color.neutral.brandBackground,\n  }),\n\n  disabled: theme => ({\n    background: theme.alias.color.neutral.neutralForegroundDisabled,\n  }),\n});\n\n/**\n * Styles for the mark slot\n */\nconst useMarksWrapperStyles = makeStyles({\n  marksWrapper: theme => ({\n    position: 'relative',\n    display: 'grid',\n    outline: 'none',\n    zIndex: '1',\n    whiteSpace: 'nowrap',\n    [`& .${markClassName}`]: {\n      background: theme.alias.color.neutral.neutralBackground1,\n    },\n\n    '& .ms-Slider-firstMark, .ms-Slider-lastMark': {\n      opacity: '0',\n    },\n  }),\n\n  horizontal: theme => ({\n    marginTop: 'calc(var(--slider-rail-size) + var(--slider-mark-size))',\n    marginLeft: 'calc(var(--slider-thumb-size) / 2)',\n    marginRight: 'calc(var(--slider-thumb-size) / 2)',\n    justifyItems: 'end',\n\n    '& .ms-Slider-markItemContainer': {\n      display: 'flex',\n      flexDirection: 'column',\n      transform: 'translateX(50%)',\n      alignItems: 'center',\n    },\n\n    [`& .${markClassName}`]: {\n      height: '4px',\n      width: '1px',\n    },\n  }),\n\n  vertical: theme => ({\n    marginTop: 'calc(var(--slider-thumb-size) / 2)',\n    marginBottom: 'calc(var(--slider-thumb-size) / 2)',\n    marginLeft: 'calc(var(--slider-rail-size) + var(--slider-mark-size))',\n    justifyItems: 'start',\n\n    '& .ms-Slider-markItemContainer': {\n      display: 'flex',\n      flexDirection: 'row',\n      transform: 'translateY(50%)',\n      alignItems: 'center',\n      maxWidth: '100%',\n      maxHeight: '100%',\n    },\n\n    [`& .${markClassName}`]: {\n      height: '1px',\n      width: 'var(--slider-mark-size)',\n    },\n  }),\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbWrapperStyles = makeStyles({\n  thumbWrapper: theme => ({\n    position: 'absolute',\n    outline: 'none',\n    zIndex: '2',\n  }),\n\n  horizontal: theme => ({\n    left: 'calc(var(--slider-thumb-size) / 2)',\n    right: 'calc(var(--slider-thumb-size) / 2)',\n    top: '50%',\n  }),\n\n  vertical: theme => ({\n    top: 'calc(var(--slider-thumb-size) / 2)',\n    bottom: 'calc(var(--slider-thumb-size) / 2)',\n    left: '50%',\n  }),\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: theme => ({\n    position: 'absolute',\n    width: 'var(--slider-thumb-size)',\n    height: 'var(--slider-thumb-size)',\n    top: '0px',\n    left: '0px',\n    bottom: '0px',\n    right: '0px',\n    outline: 'none',\n    borderRadius: theme.global.borderRadius.circular,\n    boxSizing: 'border-box',\n    boxShadow: `0 0 0 calc(var(--slider-thumb-size) * .2) ${theme.alias.color.neutral.neutralBackground1} inset`,\n    transform: 'translate(-50%, -50%)',\n\n    ':before': {\n      position: 'absolute',\n      top: '0px',\n      left: '0px',\n      bottom: '0px',\n      right: '0px',\n      borderRadius: theme.global.borderRadius.circular,\n      boxSizing: 'border-box',\n      content: \"''\",\n      border: `calc(var(--slider-thumb-size) * .05) solid ${theme.alias.color.neutral.neutralStroke1}`,\n    },\n  }),\n\n  enabled: theme => ({\n    background: theme.alias.color.neutral.brandBackground,\n  }),\n\n  disabled: theme => ({\n    background: theme.alias.color.neutral.neutralForegroundDisabled,\n    border: `calc(var(--slider-thumb-size) * .05) solid ${theme.alias.color.neutral.neutralBackgroundDisabled}`,\n  }),\n\n  horizontal: theme => ({\n    top: '50%',\n  }),\n});\n\n/**\n * Styles for the activeRail slot\n */\nconst useActiveRailStyles = makeStyles({\n  activeRail: theme => ({\n    position: 'absolute',\n  }),\n\n  horizontal: theme => ({\n    left: 'calc(var(--slider-thumb-size) / 2)',\n    right: 'calc(var(--slider-thumb-size) / 2)',\n  }),\n\n  vertical: theme => ({\n    top: 'calc(var(--slider-thumb-size) / 2)',\n    bottom: 'calc(var(--slider-thumb-size) / 2)',\n  }),\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n  input: {\n    opacity: 0,\n    position: 'absolute',\n    padding: 0,\n    margin: 0,\n    width: '100%',\n    height: '100%',\n    touchAction: 'none',\n    pointerEvents: 'none',\n  },\n});\n\n/**\n * Apply styling to the Slider slots based on the state\n */\nexport const useSliderStyles = (state: SliderState): SliderState => {\n  const rootStyles = useRootStyles();\n  const sliderWrapperStyles = useSliderWrapper();\n  const railStyles = useRailStyles();\n  const trackWrapperStyles = useTrackWrapperStyles();\n  const trackStyles = useTrackStyles();\n  const marksWrapperStyles = useMarksWrapperStyles();\n  const thumbWrapperStyles = useThumbWrapperStyles();\n  const thumbStyles = useThumbStyles();\n  const activeRailStyles = useActiveRailStyles();\n  const inputStyles = useInputStyles();\n\n  state.root.className = mergeClasses(\n    rootStyles.root,\n    rootStyles.focusIndicator,\n    rootStyles[state.size!],\n    state.vertical ? rootStyles.vertical : rootStyles.horizontal,\n    state.disabled ? rootStyles.disabled : rootStyles.enabled,\n    rootStyles.focusIndicator,\n    state.root.className,\n  );\n\n  state.sliderWrapper.className = mergeClasses(\n    sliderWrapperStyles.sliderWrapper,\n    state.vertical ? sliderWrapperStyles.vertical : sliderWrapperStyles.horizontal,\n    state.sliderWrapper.className,\n  );\n\n  state.rail.className = mergeClasses(\n    railStyles.rail,\n    state.vertical ? railStyles.vertical : railStyles.horizontal,\n    state.disabled ? railStyles.disabled : railStyles.enabled,\n    state.rail.className,\n  );\n\n  state.sliderWrapper.className = mergeClasses(\n    sliderWrapperStyles.sliderWrapper,\n    state.vertical ? sliderWrapperStyles.vertical : sliderWrapperStyles.horizontal,\n    state.sliderWrapper.className,\n  );\n\n  state.trackWrapper.className = mergeClasses(\n    trackWrapperStyles.trackWrapper,\n    state.vertical ? trackWrapperStyles.vertical : trackWrapperStyles.horizontal,\n    state.trackWrapper.className,\n  );\n\n  state.track.className = mergeClasses(\n    trackClassName,\n    trackStyles.track,\n    state.vertical ? trackStyles.vertical : trackStyles.horizontal,\n    state.disabled ? trackStyles.disabled : trackStyles.enabled,\n    state.track.className,\n  );\n\n  state.marksWrapper.className = mergeClasses(\n    marksWrapperStyles.marksWrapper,\n    state.vertical ? marksWrapperStyles.vertical : marksWrapperStyles.horizontal,\n    state.marksWrapper.className,\n  );\n\n  state.thumbWrapper.className = mergeClasses(\n    thumbWrapperStyles.thumbWrapper,\n    state.vertical ? thumbWrapperStyles.vertical : thumbWrapperStyles.horizontal,\n    state.thumbWrapper.className,\n  );\n\n  state.thumb.className = mergeClasses(\n    thumbClassName,\n    thumbStyles.thumb,\n    !state.vertical && thumbStyles.horizontal,\n    state.disabled ? trackStyles.disabled : trackStyles.enabled,\n    state.thumb.className,\n  );\n\n  state.activeRail.className = mergeClasses(\n    activeRailStyles.activeRail,\n    state.vertical ? activeRailStyles.vertical : activeRailStyles.horizontal,\n    state.activeRail.className,\n  );\n\n  state.input.className = mergeClasses(inputStyles.input, state.input.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/utils/calculateSteps.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * Calculates the `step` position based off of a `Mouse` or `Touch` event relative to the size of the rail.
+ */
+export declare const calculateSteps: (ev: React.PointerEvent<HTMLDivElement>, railRef: React.RefObject<HTMLDivElement>, min: number, max: number, step: number, vertical: boolean, dir: 'ltr' | 'rtl') => number;

package/lib/utils/calculateSteps.js

@@ -0,0 +1,27 @@
+import { clamp } from './clamp';
+/**
+ * Calculates the `step` position based off of a `Mouse` or `Touch` event relative to the size of the rail.
+ */
+
+export var calculateSteps = function (ev, railRef, min, max, step, vertical, dir) {
+  var _a;
+
+  var currentBounds = (_a = railRef === null || railRef === void 0 ? void 0 : railRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+  var sliderSize = vertical ? currentBounds.height : currentBounds.width;
+  var position;
+
+  if (vertical) {
+    position = currentBounds.bottom;
+  } else if (dir === 'rtl') {
+    position = currentBounds.right;
+  } else {
+    position = currentBounds.left;
+  }
+
+  var totalSteps = (max - min) / step;
+  var stepLength = sliderSize / totalSteps;
+  var thumbPosition = vertical ? ev.clientY : ev.clientX;
+  var distance = dir === 'rtl' || vertical ? position - thumbPosition : thumbPosition - position;
+  return clamp(min + step * (distance / stepLength), min, max);
+};
+//# sourceMappingURL=calculateSteps.js.map

package/lib/utils/calculateSteps.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils/calculateSteps.ts"],"names":[],"mappings":"AACA,SAAS,KAAT,QAAsB,SAAtB;AAEA;;AAEG;;AACH,OAAO,IAAM,cAAc,GAAG,UAC5B,EAD4B,EAE5B,OAF4B,EAG5B,GAH4B,EAI5B,GAJ4B,EAK5B,IAL4B,EAM5B,QAN4B,EAO5B,GAP4B,EAOV;;;AAElB,MAAM,aAAa,GAAA,CAAA,EAAA,GAAG,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,OAAZ,MAAmB,IAAnB,IAAmB,EAAA,KAAA,KAAA,CAAnB,GAAmB,KAAA,CAAnB,GAAmB,EAAA,CAAE,qBAAF,EAAtC;AACA,MAAM,UAAU,GAAG,QAAQ,GAAG,aAAc,CAAC,MAAlB,GAA2B,aAAc,CAAC,KAArE;AACA,MAAI,QAAJ;;AAEA,MAAI,QAAJ,EAAc;AACZ,IAAA,QAAQ,GAAG,aAAc,CAAC,MAA1B;AACD,GAFD,MAEO,IAAI,GAAG,KAAK,KAAZ,EAAmB;AACxB,IAAA,QAAQ,GAAG,aAAc,CAAC,KAA1B;AACD,GAFM,MAEA;AACL,IAAA,QAAQ,GAAG,aAAc,CAAC,IAA1B;AACD;;AAED,MAAM,UAAU,GAAG,CAAC,GAAG,GAAG,GAAP,IAAc,IAAjC;AACA,MAAM,UAAU,GAAG,UAAU,GAAG,UAAhC;AACA,MAAM,aAAa,GAAG,QAAQ,GAAG,EAAE,CAAC,OAAN,GAAgB,EAAE,CAAC,OAAjD;AACA,MAAM,QAAQ,GAAG,GAAG,KAAK,KAAR,IAAiB,QAAjB,GAA4B,QAAQ,GAAG,aAAvC,GAAuD,aAAa,GAAG,QAAxF;AAEA,SAAO,KAAK,CAAC,GAAG,GAAG,IAAI,IAAI,QAAQ,GAAG,UAAf,CAAX,EAAuC,GAAvC,EAA4C,GAA5C,CAAZ;AACD,CA3BM","sourcesContent":["import * as React from 'react';\nimport { clamp } from './clamp';\n\n/**\n * Calculates the `step` position based off of a `Mouse` or `Touch` event relative to the size of the rail.\n */\nexport const calculateSteps = (\n  ev: React.PointerEvent<HTMLDivElement>,\n  railRef: React.RefObject<HTMLDivElement>,\n  min: number,\n  max: number,\n  step: number,\n  vertical: boolean,\n  dir: 'ltr' | 'rtl',\n): number => {\n  const currentBounds = railRef?.current?.getBoundingClientRect();\n  const sliderSize = vertical ? currentBounds!.height : currentBounds!.width;\n  let position;\n\n  if (vertical) {\n    position = currentBounds!.bottom;\n  } else if (dir === 'rtl') {\n    position = currentBounds!.right;\n  } else {\n    position = currentBounds!.left;\n  }\n\n  const totalSteps = (max - min) / step;\n  const stepLength = sliderSize / totalSteps;\n  const thumbPosition = vertical ? ev.clientY : ev.clientX;\n  const distance = dir === 'rtl' || vertical ? position - thumbPosition : thumbPosition - position;\n\n  return clamp(min + step * (distance / stepLength), min, max);\n};\n"],"sourceRoot":"../src/"}

package/lib/utils/clamp.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Clamps `value` to a number between the min and max.
+ *
+ * @param value - the value to be clamped
+ * @param min - the lowest valid value
+ * @param max - the highest valid value
+ */
+export declare const clamp: (value: number, min: number, max: number) => number;

package/lib/utils/clamp.js

@@ -0,0 +1,11 @@
+/**
+ * Clamps `value` to a number between the min and max.
+ *
+ * @param value - the value to be clamped
+ * @param min - the lowest valid value
+ * @param max - the highest valid value
+ */
+export var clamp = function (value, min, max) {
+  return Math.max(min, Math.min(max, value || 0));
+};
+//# sourceMappingURL=clamp.js.map

package/lib/utils/clamp.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils/clamp.ts"],"names":[],"mappings":"AAAA;;;;;;AAMG;AACH,OAAO,IAAM,KAAK,GAAG,UAAC,KAAD,EAAgB,GAAhB,EAA6B,GAA7B,EAAwC;AAAa,SAAA,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,KAAK,IAAjC,CAAc,CAAd,CAAA;AAAwC,CAA3G","sourcesContent":["/**\n * Clamps `value` to a number between the min and max.\n *\n * @param value - the value to be clamped\n * @param min - the lowest valid value\n * @param max - the highest valid value\n */\nexport const clamp = (value: number, min: number, max: number): number => Math.max(min, Math.min(max, value || 0));\n"],"sourceRoot":"../src/"}

package/lib/utils/getKeydownValue.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/**
+ * Determines the incoming value for the Slider based off of a keyboard event.
+ * It automatically flips the key direction if the dir parameter is rtl.
+ */
+export declare const getKeydownValue: (ev: React.KeyboardEvent<HTMLDivElement>, currentValue: number, min: number, max: number, dir: 'ltr' | 'rtl', keyboardStep: number) => number;

package/lib/utils/getKeydownValue.js

@@ -0,0 +1,39 @@
+import { getRTLSafeKey } from './getRTLSafeKey';
+/**
+ * Determines the incoming value for the Slider based off of a keyboard event.
+ * It automatically flips the key direction if the dir parameter is rtl.
+ */
+
+export var getKeydownValue = function (ev, currentValue, min, max, dir, keyboardStep) {
+  var normalizedKey = getRTLSafeKey(ev.key, dir);
+
+  if (ev.shiftKey) {
+    if (normalizedKey === 'ArrowDown' || normalizedKey === 'ArrowLeft') {
+      return currentValue - keyboardStep * 10;
+    } else if (normalizedKey === 'ArrowUp' || normalizedKey === 'ArrowRight') {
+      return currentValue + keyboardStep * 10;
+    }
+  } else if (normalizedKey === 'ArrowDown' || normalizedKey === 'ArrowLeft') {
+    return currentValue - keyboardStep;
+  } else if (normalizedKey === 'ArrowUp' || normalizedKey === 'ArrowRight') {
+    return currentValue + keyboardStep;
+  } else {
+    switch (normalizedKey) {
+      case 'PageDown':
+        return currentValue - keyboardStep * 10;
+        break;
+
+      case 'PageUp':
+        return currentValue + keyboardStep * 10;
+
+      case 'Home':
+        return min;
+
+      case 'End':
+        return max;
+    }
+  }
+
+  return currentValue;
+};
+//# sourceMappingURL=getKeydownValue.js.map

package/lib/utils/getKeydownValue.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils/getKeydownValue.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,QAA8B,iBAA9B;AAEA;;;AAGG;;AACH,OAAO,IAAM,eAAe,GAAG,UAC7B,EAD6B,EAE7B,YAF6B,EAG7B,GAH6B,EAI7B,GAJ6B,EAK7B,GAL6B,EAM7B,YAN6B,EAMT;AAEpB,MAAM,aAAa,GAAG,aAAa,CAAC,EAAE,CAAC,GAAJ,EAAS,GAAT,CAAnC;;AAEA,MAAI,EAAE,CAAC,QAAP,EAAiB;AACf,QAAI,aAAa,KAAK,WAAlB,IAAiC,aAAa,KAAK,WAAvD,EAAoE;AAClE,aAAO,YAAY,GAAG,YAAY,GAAG,EAArC;AACD,KAFD,MAEO,IAAI,aAAa,KAAK,SAAlB,IAA+B,aAAa,KAAK,YAArD,EAAmE;AACxE,aAAO,YAAY,GAAG,YAAY,GAAG,EAArC;AACD;AACF,GAND,MAMO,IAAI,aAAa,KAAK,WAAlB,IAAiC,aAAa,KAAK,WAAvD,EAAoE;AACzE,WAAO,YAAY,GAAG,YAAtB;AACD,GAFM,MAEA,IAAI,aAAa,KAAK,SAAlB,IAA+B,aAAa,KAAK,YAArD,EAAmE;AACxE,WAAO,YAAY,GAAG,YAAtB;AACD,GAFM,MAEA;AACL,YAAQ,aAAR;AACE,WAAK,UAAL;AACE,eAAO,YAAY,GAAG,YAAY,GAAG,EAArC;AACA;;AACF,WAAK,QAAL;AACE,eAAO,YAAY,GAAG,YAAY,GAAG,EAArC;;AACF,WAAK,MAAL;AACE,eAAO,GAAP;;AACF,WAAK,KAAL;AACE,eAAO,GAAP;AATJ;AAWD;;AAED,SAAO,YAAP;AACD,CAnCM","sourcesContent":["import * as React from 'react';\nimport { getRTLSafeKey } from './getRTLSafeKey';\n\n/**\n * Determines the incoming value for the Slider based off of a keyboard event.\n * It automatically flips the key direction if the dir parameter is rtl.\n */\nexport const getKeydownValue = (\n  ev: React.KeyboardEvent<HTMLDivElement>,\n  currentValue: number,\n  min: number,\n  max: number,\n  dir: 'ltr' | 'rtl',\n  keyboardStep: number,\n): number => {\n  const normalizedKey = getRTLSafeKey(ev.key, dir);\n\n  if (ev.shiftKey) {\n    if (normalizedKey === 'ArrowDown' || normalizedKey === 'ArrowLeft') {\n      return currentValue - keyboardStep * 10;\n    } else if (normalizedKey === 'ArrowUp' || normalizedKey === 'ArrowRight') {\n      return currentValue + keyboardStep * 10;\n    }\n  } else if (normalizedKey === 'ArrowDown' || normalizedKey === 'ArrowLeft') {\n    return currentValue - keyboardStep;\n  } else if (normalizedKey === 'ArrowUp' || normalizedKey === 'ArrowRight') {\n    return currentValue + keyboardStep;\n  } else {\n    switch (normalizedKey) {\n      case 'PageDown':\n        return currentValue - keyboardStep * 10;\n        break;\n      case 'PageUp':\n        return currentValue + keyboardStep * 10;\n      case 'Home':\n        return min;\n      case 'End':\n        return max;\n    }\n  }\n\n  return currentValue;\n};\n"],"sourceRoot":"../src/"}

package/lib/utils/getMarkPercent.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Gets the current percentage position for the marks with respect to adjacent marks.
+ * This is used primarily for positioning with CSS grid.
+ *
+ * @param markValues The marks percentage position relative to their individual positions.
+ */
+export declare const getMarkPercent: (markValues: number[]) => string[];

package/lib/utils/getMarkPercent.js

@@ -0,0 +1,23 @@
+/**
+ * Gets the current percentage position for the marks with respect to adjacent marks.
+ * This is used primarily for positioning with CSS grid.
+ *
+ * @param markValues The marks percentage position relative to their individual positions.
+ */
+export var getMarkPercent = function (markValues) {
+  var valueArray = markValues;
+  var result = []; // For CSS grid to work the percents array must be remapped by the previous percent - the current percent
+
+  if (valueArray.length > 0) {
+    result.push(valueArray[0] + '% ');
+    var prevPercent = valueArray[0];
+
+    for (var i = 1; i < valueArray.length; i++) {
+      result.push(valueArray[i] - prevPercent + '% ');
+      prevPercent = valueArray[i];
+    }
+  }
+
+  return result;
+};
+//# sourceMappingURL=getMarkPercent.js.map

package/lib/utils/getMarkPercent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils/getMarkPercent.ts"],"names":[],"mappings":"AAAA;;;;;AAKG;AACH,OAAO,IAAM,cAAc,GAAG,UAAC,UAAD,EAAqB;AACjD,MAAM,UAAU,GAAa,UAA7B;AACA,MAAM,MAAM,GAAa,EAAzB,CAFiD,CAIjD;;AACA,MAAI,UAAU,CAAC,MAAX,GAAoB,CAAxB,EAA2B;AACzB,IAAA,MAAM,CAAC,IAAP,CAAY,UAAU,CAAC,CAAD,CAAV,GAAgB,IAA5B;AACA,QAAI,WAAW,GAAG,UAAU,CAAC,CAAD,CAA5B;;AACA,SAAK,IAAI,CAAC,GAAG,CAAb,EAAgB,CAAC,GAAG,UAAU,CAAC,MAA/B,EAAuC,CAAC,EAAxC,EAA4C;AAC1C,MAAA,MAAM,CAAC,IAAP,CAAY,UAAU,CAAC,CAAD,CAAV,GAAgB,WAAhB,GAA8B,IAA1C;AACA,MAAA,WAAW,GAAG,UAAU,CAAC,CAAD,CAAxB;AACD;AACF;;AAED,SAAO,MAAP;AACD,CAfM","sourcesContent":["/**\n * Gets the current percentage position for the marks with respect to adjacent marks.\n * This is used primarily for positioning with CSS grid.\n *\n * @param markValues The marks percentage position relative to their individual positions.\n */\nexport const getMarkPercent = (markValues: number[]) => {\n  const valueArray: number[] = markValues;\n  const result: string[] = [];\n\n  // For CSS grid to work the percents array must be remapped by the previous percent - the current percent\n  if (valueArray.length > 0) {\n    result.push(valueArray[0] + '% ');\n    let prevPercent = valueArray[0];\n    for (let i = 1; i < valueArray.length; i++) {\n      result.push(valueArray[i] - prevPercent + '% ');\n      prevPercent = valueArray[i];\n    }\n  }\n\n  return result;\n};\n"],"sourceRoot":"../src/"}

package/lib/utils/getMarkValues.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Gets the current percentage position for the marks relative to their individual positions.
+ */
+export declare const getMarkValue: (marks: boolean | number[] | undefined, min: number, max: number, step: number) => number[];

package/lib/utils/getMarkValues.js

@@ -0,0 +1,22 @@
+import { getPercent } from './getPercent';
+/**
+ * Gets the current percentage position for the marks relative to their individual positions.
+ */
+
+export var getMarkValue = function (marks, min, max, step) {
+  var valueArray = []; // 1. We receive a boolean: mark for every step.
+
+  if (typeof marks === 'boolean' && marks === true) {
+    for (var i = 0; i < (max - min) / step + 1; i++) {
+      valueArray.push(getPercent(min + step * i, min, max));
+    }
+  } else if (Array.isArray(marks) && marks.length > 0) {
+    // 2. We receive an array with numbers: mark for every value in array.
+    return marks.map(function (marksItem) {
+      return getPercent(min + marksItem, min, max);
+    });
+  }
+
+  return valueArray;
+};
+//# sourceMappingURL=getMarkValues.js.map

package/lib/utils/getMarkValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils/getMarkValues.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,QAA2B,cAA3B;AAEA;;AAEG;;AACH,OAAO,IAAM,YAAY,GAAG,UAAC,KAAD,EAAwC,GAAxC,EAAqD,GAArD,EAAkE,IAAlE,EAA8E;AACxG,MAAM,UAAU,GAAa,EAA7B,CADwG,CAGxG;;AACA,MAAI,OAAO,KAAP,KAAiB,SAAjB,IAA8B,KAAK,KAAK,IAA5C,EAAkD;AAChD,SAAK,IAAI,CAAC,GAAG,CAAb,EAAgB,CAAC,GAAG,CAAC,GAAG,GAAG,GAAP,IAAc,IAAd,GAAqB,CAAzC,EAA4C,CAAC,EAA7C,EAAiD;AAC/C,MAAA,UAAU,CAAC,IAAX,CAAgB,UAAU,CAAC,GAAG,GAAG,IAAI,GAAG,CAAd,EAAiB,GAAjB,EAAsB,GAAtB,CAA1B;AACD;AACF,GAJD,MAIO,IAAI,KAAK,CAAC,OAAN,CAAc,KAAd,KAAwB,KAAK,CAAC,MAAN,GAAe,CAA3C,EAA8C;AACnD;AACA,WAAO,KAAK,CAAC,GAAN,CAAU,UAAA,SAAA,EAAS;AAAI,aAAA,UAAU,CAAC,GAAG,GAAG,SAAP,EAAkB,GAAlB,EAAV,GAAU,CAAV;AAAqC,KAA5D,CAAP;AACD;;AAED,SAAO,UAAP;AACD,CAdM","sourcesContent":["import { getPercent } from './getPercent';\n\n/**\n * Gets the current percentage position for the marks relative to their individual positions.\n */\nexport const getMarkValue = (marks: boolean | number[] | undefined, min: number, max: number, step: number) => {\n  const valueArray: number[] = [];\n\n  // 1. We receive a boolean: mark for every step.\n  if (typeof marks === 'boolean' && marks === true) {\n    for (let i = 0; i < (max - min) / step + 1; i++) {\n      valueArray.push(getPercent(min + step * i, min, max));\n    }\n  } else if (Array.isArray(marks) && marks.length > 0) {\n    // 2. We receive an array with numbers: mark for every value in array.\n    return marks.map(marksItem => getPercent(min + marksItem, min, max));\n  }\n\n  return valueArray;\n};\n"],"sourceRoot":"../src/"}

package/lib/utils/getPercent.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Gets the current percent of specified value between a min and max
+ *
+ * @param value - the value to find the percent
+ * @param min - the lowest valid value
+ * @param max - the highest valid value
+ */
+export declare const getPercent: (value: number, min: number, max: number) => number;

package/lib/utils/getPercent.js

@@ -0,0 +1,11 @@
+/**
+ * Gets the current percent of specified value between a min and max
+ *
+ * @param value - the value to find the percent
+ * @param min - the lowest valid value
+ * @param max - the highest valid value
+ */
+export var getPercent = function (value, min, max) {
+  return max === min ? 0 : (value - min) / (max - min) * 100;
+};
+//# sourceMappingURL=getPercent.js.map

package/lib/utils/getPercent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils/getPercent.ts"],"names":[],"mappings":"AAAA;;;;;;AAMG;AACH,OAAO,IAAM,UAAU,GAAG,UAAC,KAAD,EAAgB,GAAhB,EAA6B,GAA7B,EAAwC;AAChE,SAAO,GAAG,KAAK,GAAR,GAAc,CAAd,GAAmB,CAAC,KAAK,GAAG,GAAT,KAAiB,GAAG,GAAG,GAAvB,CAAD,GAAgC,GAAzD;AACD,CAFM","sourcesContent":["/**\n * Gets the current percent of specified value between a min and max\n *\n * @param value - the value to find the percent\n * @param min - the lowest valid value\n * @param max - the highest valid value\n */\nexport const getPercent = (value: number, min: number, max: number) => {\n  return max === min ? 0 : ((value - min) / (max - min)) * 100;\n};\n"],"sourceRoot":"../src/"}

package/lib/utils/getRTLSafeKey.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Finds and swaps a provided key for it's right to left format.
+ */
+export declare const getRTLSafeKey: (key: string, dir: 'ltr' | 'rtl') => string;

package/lib/utils/getRTLSafeKey.js

@@ -0,0 +1,21 @@
+/**
+ * Finds and swaps a provided key for it's right to left format.
+ */
+export var getRTLSafeKey = function (key, dir) {
+  if (dir === 'rtl') {
+    switch (key) {
+      case 'ArrowLeft':
+        {
+          return 'ArrowRight';
+        }
+
+      case 'ArrowRight':
+        {
+          return 'ArrowLeft';
+        }
+    }
+  }
+
+  return key;
+};
+//# sourceMappingURL=getRTLSafeKey.js.map

package/lib/utils/getRTLSafeKey.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils/getRTLSafeKey.ts"],"names":[],"mappings":"AAAA;;AAEG;AACH,OAAO,IAAM,aAAa,GAAG,UAAC,GAAD,EAAc,GAAd,EAAgC;AAC3D,MAAI,GAAG,KAAK,KAAZ,EAAmB;AACjB,YAAQ,GAAR;AACE,WAAK,WAAL;AAAkB;AAChB,iBAAO,YAAP;AACD;;AAED,WAAK,YAAL;AAAmB;AACjB,iBAAO,WAAP;AACD;AAPH;AASD;;AAED,SAAO,GAAP;AACD,CAdM","sourcesContent":["/**\n * Finds and swaps a provided key for it's right to left format.\n */\nexport const getRTLSafeKey = (key: string, dir: 'ltr' | 'rtl') => {\n  if (dir === 'rtl') {\n    switch (key) {\n      case 'ArrowLeft': {\n        return 'ArrowRight';\n      }\n\n      case 'ArrowRight': {\n        return 'ArrowLeft';\n      }\n    }\n  }\n\n  return key;\n};\n"],"sourceRoot":"../src/"}

package/lib/utils/index.d.ts

@@ -0,0 +1,9 @@
+export * from './calculateSteps';
+export * from './clamp';
+export * from './getKeydownValue';
+export * from './getMarkPercent';
+export * from './getMarkValues';
+export * from './getPercent';
+export * from './getRTLSafeKey';
+export * from './on';
+export * from './renderMarks';

package/lib/utils/index.js

@@ -0,0 +1,10 @@
+export * from './calculateSteps';
+export * from './clamp';
+export * from './getKeydownValue';
+export * from './getMarkPercent';
+export * from './getMarkValues';
+export * from './getPercent';
+export * from './getRTLSafeKey';
+export * from './on';
+export * from './renderMarks';
+//# sourceMappingURL=index.js.map

package/lib/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,MAAM,CAAC;AACrB,cAAc,eAAe,CAAC","sourcesContent":["export * from './calculateSteps';\nexport * from './clamp';\nexport * from './getKeydownValue';\nexport * from './getMarkPercent';\nexport * from './getMarkValues';\nexport * from './getPercent';\nexport * from './getRTLSafeKey';\nexport * from './on';\nexport * from './renderMarks';\n"]}

package/lib/utils/on.d.ts

@@ -0,0 +1 @@
+export declare const on: (element: Element, eventName: string, callback: (ev: any) => void) => () => void;

package/lib/utils/on.js

@@ -0,0 +1,8 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export var on = function (element, eventName, callback) {
+  element.addEventListener(eventName, callback);
+  return function () {
+    return element.removeEventListener(eventName, callback);
+  };
+};
+//# sourceMappingURL=on.js.map

package/lib/utils/on.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils/on.ts"],"names":[],"mappings":"AAAA;AACA,OAAO,IAAM,EAAE,GAAG,UAAC,OAAD,EAAmB,SAAnB,EAAsC,QAAtC,EAAiE;AACjF,EAAA,OAAO,CAAC,gBAAR,CAAyB,SAAzB,EAAoC,QAApC;AACA,SAAO,YAAA;AAAM,WAAA,OAAO,CAAC,mBAAR,CAA4B,SAA5B,EAAA,QAAA,CAAA;AAAgD,GAA7D;AACD,CAHM","sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const on = (element: Element, eventName: string, callback: (ev: any) => void) => {\n  element.addEventListener(eventName, callback);\n  return () => element.removeEventListener(eventName, callback);\n};\n"],"sourceRoot":"../src/"}

package/lib/utils/renderMarks.d.ts

@@ -0,0 +1,7 @@
+export declare const markClassName = "ms-Slider-mark";
+/**
+ * Renders the marks
+ *
+ * @param markValues The marks percentage position relative to their individual positions.
+ */
+export declare const renderMarks: (markValues: number[]) => JSX.Element[];

package/lib/utils/renderMarks.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { mergeClasses } from '@fluentui/react-make-styles'; // The mark related classNames are needed since they are used in a JSX element that is dynamically generated.
+
+var markContainerClassName = 'ms-Slider-markItemContainer';
+var firstMarkClassName = 'ms-Slider-firstMark';
+var lastMarkClassName = 'ms-Slider-lastMark';
+export var markClassName = 'ms-Slider-mark';
+/**
+ * Renders the marks
+ *
+ * @param markValues The marks percentage position relative to their individual positions.
+ */
+
+export var renderMarks = function (markValues) {
+  return markValues.map(function (value, i) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: markContainerClassName,
+      key: "markItemContainer-" + i
+    }, /*#__PURE__*/React.createElement("div", {
+      className: mergeClasses(markClassName, markValues[i] === 0 && firstMarkClassName || markValues[i] === 100 && lastMarkClassName || ''),
+      key: "mark-" + i
+    }));
+  });
+};
+//# sourceMappingURL=renderMarks.js.map

package/lib/utils/renderMarks.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils/renderMarks.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,YAAT,QAA6B,6BAA7B,C,CAEA;;AACA,IAAM,sBAAsB,GAAG,6BAA/B;AACA,IAAM,kBAAkB,GAAG,qBAA3B;AACA,IAAM,iBAAiB,GAAG,oBAA1B;AACA,OAAO,IAAM,aAAa,GAAG,gBAAtB;AAEP;;;;AAIG;;AACH,OAAO,IAAM,WAAW,GAAG,UAAC,UAAD,EAAqB;AAC9C,SAAA,UAAU,CAAC,GAAX,CAAe,UAAC,KAAD,EAAQ,CAAR,EAAS;AAAK,wBAC3B,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,SAAS,EAAE,sBAAhB;AAAwC,MAAA,GAAG,EAAE,uBAAqB;AAAlE,KAAA,eACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACE,MAAA,SAAS,EAAE,YAAY,CACrB,aADqB,EAEpB,UAAU,CAAC,CAAD,CAAV,KAAkB,CAAlB,IAAuB,kBAAxB,IAAgD,UAAU,CAAC,CAAD,CAAV,KAAkB,GAAlB,IAAyB,iBAAzE,IAA+F,EAF1E,CADzB;AAKE,MAAA,GAAG,EAAE,UAPkB;AAEzB,KAAA,CADF,CAD2B;AAU5B,GAVD,CAAA;AAUE,CAXG","sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@fluentui/react-make-styles';\n\n// The mark related classNames are needed since they are used in a JSX element that is dynamically generated.\nconst markContainerClassName = 'ms-Slider-markItemContainer';\nconst firstMarkClassName = 'ms-Slider-firstMark';\nconst lastMarkClassName = 'ms-Slider-lastMark';\nexport const markClassName = 'ms-Slider-mark';\n\n/**\n * Renders the marks\n *\n * @param markValues The marks percentage position relative to their individual positions.\n */\nexport const renderMarks = (markValues: number[]) =>\n  markValues.map((value, i) => (\n    <div className={markContainerClassName} key={`markItemContainer-${i}`}>\n      <div\n        className={mergeClasses(\n          markClassName,\n          (markValues[i] === 0 && firstMarkClassName) || (markValues[i] === 100 && lastMarkClassName) || '',\n        )}\n        key={`mark-${i}`}\n      />\n    </div>\n  ));\n"],"sourceRoot":"../src/"}

package/lib-amd/components/Slider/Slider.d.ts

@@ -3,4 +3,4 @@ import type { SliderProps } from './Slider.types';
 /**
  * Define a styled Slider, using the `useSlider` hook
  */
-export declare const Slider: React.ForwardRefExoticComponent<Pick<SliderProps, "input" | "slot" | "style" | "title" | "track" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "disabled" | "max" | "min" | "size" | "step" | "value" | "rail" | "sliderWrapper" | "trackWrapper" | "marksWrapper" | "thumbWrapper" | "thumb" | "activeRail" | "as" | "keyboardStep" | "ariaValueText" | "marks" | "vertical" | "origin"> & React.RefAttributes<HTMLElement>>;
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>>;

package/lib-amd/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sourceRoot":"../src/","sources":["components/Slider/Slider.tsx"],"names":[],"mappings":";;;;IAMA;;OAEG;IACU,QAAA,MAAM,GAAG,KAAK,CAAC,UAAU,CAA2B,UAAC,KAAK,EAAE,GAAG;QAC1E,IAAM,KAAK,GAAG,qBAAS,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEpC,iCAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,OAAO,2BAAY,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC,CAAC;IACH,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import * as React from 'react';\nimport { useSlider } from './useSlider';\nimport { renderSlider } from './renderSlider';\nimport { useSliderStyles } from './useSliderStyles';\nimport type { SliderProps } from './Slider.types';\n\n/**\n * Define a styled Slider, using the `useSlider` hook\n */\nexport const Slider = React.forwardRef<HTMLElement, SliderProps>((props, ref) => {\n  const state = useSlider(props, ref);\n\n  useSliderStyles(state);\n\n  return renderSlider(state);\n});\nSlider.displayName = 'Slider';\n"]}
+{"version":3,"file":"Slider.js","sourceRoot":"../src/","sources":["components/Slider/Slider.tsx"],"names":[],"mappings":";;;;IAMA;;OAEG;IACU,QAAA,MAAM,GAAG,KAAK,CAAC,UAAU,CAA8B,UAAC,KAAK,EAAE,GAAG;QAC7E,IAAM,KAAK,GAAG,qBAAS,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEpC,iCAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,OAAO,2BAAY,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC,CAAC;IACH,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import * as React from 'react';\nimport { useSlider } from './useSlider';\nimport { renderSlider } from './renderSlider';\nimport { useSliderStyles } from './useSliderStyles';\nimport type { SliderProps } from './Slider.types';\n\n/**\n * Define a styled Slider, using the `useSlider` hook\n */\nexport const Slider = React.forwardRef<HTMLDivElement, SliderProps>((props, ref) => {\n  const state = useSlider(props, ref);\n\n  useSliderStyles(state);\n\n  return renderSlider(state);\n});\nSlider.displayName = 'Slider';\n"]}

package/lib-amd/components/Slider/index.d.ts

@@ -2,5 +2,5 @@ export * from './Slider';
 export * from './Slider.types';
 export * from './renderSlider';
 export * from './useSlider';
-export { useSliderState } from './useSliderState';
+export * from './useSliderState';
 export * from './useSliderStyles';

package/lib-amd/components/Slider/index.js

@@ -1,12 +1,11 @@
 define(["require", "exports", "tslib", "./Slider", "./Slider.types", "./renderSlider", "./useSlider", "./useSliderState", "./useSliderStyles"], function (require, exports, tslib_1, Slider_1, Slider_types_1, renderSlider_1, useSlider_1, useSliderState_1, useSliderStyles_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useSliderState = void 0;
     tslib_1.__exportStar(Slider_1, exports);
     tslib_1.__exportStar(Slider_types_1, exports);
     tslib_1.__exportStar(renderSlider_1, exports);
     tslib_1.__exportStar(useSlider_1, exports);
-    Object.defineProperty(exports, "useSliderState", { enumerable: true, get: function () { return useSliderState_1.useSliderState; } });
+    tslib_1.__exportStar(useSliderState_1, exports);
     tslib_1.__exportStar(useSliderStyles_1, exports);
 });
 //# sourceMappingURL=index.js.map

package/lib-amd/components/Slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Slider/index.ts"],"names":[],"mappings":";;;;IAAA,wCAAyB;IACzB,8CAA+B;IAC/B,8CAA+B;IAC/B,2CAA4B;IACnB,gHAAA,cAAc,OAAA;IACvB,iDAAkC","sourcesContent":["export * from './Slider';\nexport * from './Slider.types';\nexport * from './renderSlider';\nexport * from './useSlider';\nexport { useSliderState } from './useSliderState';\nexport * from './useSliderStyles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Slider/index.ts"],"names":[],"mappings":";;;IAAA,wCAAyB;IACzB,8CAA+B;IAC/B,8CAA+B;IAC/B,2CAA4B;IAC5B,gDAAiC;IACjC,iDAAkC","sourcesContent":["export * from './Slider';\nexport * from './Slider.types';\nexport * from './renderSlider';\nexport * from './useSlider';\nexport * from './useSliderState';\nexport * from './useSliderStyles';\n"]}

package/lib-amd/components/Slider/useSliderState.d.ts

@@ -1,3 +1,2 @@
 import type { SliderState } from './Slider.types';
-export declare const markClassName = "ms-Slider-mark";
 export declare const useSliderState: (state: SliderState) => SliderState;

package/lib-amd/components/Slider/useSliderState.js

@@ -1,51 +1,7 @@
-define(["require", "exports", "tslib", "react", "@fluentui/react-shared-contexts", "@fluentui/react-utilities", "@fluentui/react-make-styles"], function (require, exports, tslib_1, React, react_shared_contexts_1, react_utilities_1, react_make_styles_1) {
+define(["require", "exports", "tslib", "react", "@fluentui/react-shared-contexts", "@fluentui/react-utilities", "../../utils/index"], function (require, exports, tslib_1, React, react_shared_contexts_1, react_utilities_1, index_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useSliderState = exports.markClassName = void 0;
-    /**
-     * Validates that the `value` is a number and falls between the min and max.
-     *
-     * @param value - the value to be clamped
-     * @param min - the lowest valid value
-     * @param max - the highest valid value
-     */
-    var clamp = function (value, min, max) { return Math.max(min, Math.min(max, value || 0)); };
-    /**
-     * Gets the current percent of specified value between a min and max
-     *
-     * @param value - the value to find the percent
-     * @param min - the lowest valid value
-     * @param max - the highest valid value
-     */
-    var getPercent = function (value, min, max) {
-        return max === min ? 0 : ((value - min) / (max - min)) * 100;
-    };
-    /**
-     * Finds and swaps a provided key for it's right to left format.
-     */
-    var getRTLSafeKey = function (key, dir) {
-        if (dir === 'rtl') {
-            switch (key) {
-                case 'ArrowLeft': {
-                    return 'ArrowRight';
-                }
-                case 'ArrowRight': {
-                    return 'ArrowLeft';
-                }
-            }
-        }
-        return key;
-    };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    var on = function (element, eventName, callback) {
-        element.addEventListener(eventName, callback);
-        return function () { return element.removeEventListener(eventName, callback); };
-    };
-    // The mark related classNames are needed since they are used in a JSX element that is dynamically generated.
-    var markContainerClassName = 'ms-Slider-markItemContainer';
-    exports.markClassName = 'ms-Slider-mark';
-    var firstMarkClassName = 'ms-Slider-firstMark';
-    var lastMarkClassName = 'ms-Slider-lastMark';
+    exports.useSliderState = void 0;
     var useSliderState = function (state) {
         var _a, _b;
         var value = state.value, _c = state.defaultValue, defaultValue = _c === void 0 ? 0 : _c, _d = state.min, min = _d === void 0 ? 0 : _d, _e = state.max, max = _e === void 0 ? 100 : _e, _f = state.step, step = _f === void 0 ? 1 : _f, _g = state.keyboardStep, keyboardStep = _g === void 0 ? state.step || 1 : _g, _h = state.disabled, disabled = _h === void 0 ? false : _h, ariaValueText = state.ariaValueText, onChange = state.onChange, marks = state.marks, _j = state.vertical, vertical = _j === void 0 ? false : _j, origin = state.origin;
@@ -54,8 +10,8 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-shared-contexts
         var _l = react_utilities_1.useBoolean(false), stepAnimation = _l[0], _m = _l[1], showStepAnimation = _m.setTrue, hideStepAnimation = _m.setFalse;
         var _o = React.useState(value ? value : defaultValue), renderedPosition = _o[0], setRenderedPosition = _o[1];
         var _p = react_utilities_1.useControllableState({
-            state: value && clamp(value, min, max),
-            defaultState: clamp(defaultValue, min, max),
+            state: value && index_1.clamp(value, min, max),
+            defaultState: index_1.clamp(defaultValue, min, max),
             initialState: 0,
         }), currentValue = _p[0], setCurrentValue = _p[1];
         var railRef = React.useRef(null);
@@ -65,7 +21,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-shared-contexts
          * Updates the controlled `currentValue` to the new `incomingValue` and clamps it.
          */
         var updateValue = react_utilities_1.useEventCallback(function (incomingValue, ev) {
-            var clampedValue = clamp(incomingValue, min, max);
+            var clampedValue = index_1.clamp(incomingValue, min, max);
             if (clampedValue !== min && clampedValue !== max) {
                 ev.stopPropagation();
                 if (ev.type === 'keydown') {
@@ -79,41 +35,18 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-shared-contexts
          * Updates the controlled `currentValue` and `renderedPosition` of the Slider.
          */
         var updatePosition = React.useCallback(function (incomingValue, ev) {
-            setRenderedPosition(clamp(incomingValue, min, max));
+            setRenderedPosition(index_1.clamp(incomingValue, min, max));
             updateValue(incomingValue, ev);
         }, [max, min, updateValue]);
-        /**
-         * Calculates the `step` position based off of a `Mouse` or `Touch` event.
-         */
-        var calculateSteps = React.useCallback(function (ev) {
-            var _a;
-            var currentBounds = (_a = railRef === null || railRef === void 0 ? void 0 : railRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            var sliderSize = vertical ? currentBounds.height : currentBounds.width;
-            var position;
-            if (vertical) {
-                position = currentBounds.bottom;
-            }
-            else if (dir === 'rtl') {
-                position = currentBounds.right;
-            }
-            else {
-                position = currentBounds.left;
-            }
-            var totalSteps = (max - min) / step;
-            var stepLength = sliderSize / totalSteps;
-            var thumbPosition = vertical ? ev.clientY : ev.clientX;
-            var distance = dir === 'rtl' || vertical ? position - thumbPosition : thumbPosition - position;
-            return distance / stepLength;
-        }, [dir, max, min, step, vertical]);
         var onInputChange = function (ev) {
             updatePosition(Number(ev.target.value), ev);
         };
         var onPointerMove = React.useCallback(function (ev) {
-            var position = min + step * calculateSteps(ev);
+            var position = index_1.calculateSteps(ev, railRef, min, max, step, vertical, dir);
             var currentStepPosition = Math.round(position / step) * step;
-            setRenderedPosition(clamp(position, min, max));
+            setRenderedPosition(position);
             updateValue(currentStepPosition, ev);
-        }, [calculateSteps, max, min, step, updateValue]);
+        }, [dir, max, min, step, updateValue, vertical]);
         var onPointerUp = React.useCallback(function (ev) {
             disposables.current.forEach(function (dispose) { return dispose(); });
             disposables.current = [];
@@ -129,49 +62,18 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-shared-contexts
             (_a = target.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
             hideStepAnimation();
             onPointerDownCallback === null || onPointerDownCallback === void 0 ? void 0 : onPointerDownCallback(ev);
-            disposables.current.push(on(target, 'pointermove', onPointerMove), on(target, 'pointerup', onPointerUp), function () {
+            disposables.current.push(index_1.on(target, 'pointermove', onPointerMove), index_1.on(target, 'pointerup', onPointerUp), function () {
                 var _a;
                 (_a = target.releasePointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
             });
             onPointerMove(ev);
         }, [hideStepAnimation, onPointerDownCallback, onPointerMove, onPointerUp]);
         var onKeyDown = React.useCallback(function (ev) {
-            var normalizedKey = getRTLSafeKey(ev.key, dir);
             hideStepAnimation();
             onKeyDownCallback === null || onKeyDownCallback === void 0 ? void 0 : onKeyDownCallback(ev);
-            if (ev.shiftKey) {
-                if (normalizedKey === 'ArrowDown' || normalizedKey === 'ArrowLeft') {
-                    updatePosition(currentValue - keyboardStep * 10, ev);
-                    return;
-                }
-                else if (normalizedKey === 'ArrowUp' || normalizedKey === 'ArrowRight') {
-                    updatePosition(currentValue + keyboardStep * 10, ev);
-                    return;
-                }
-            }
-            else if (normalizedKey === 'ArrowDown' || normalizedKey === 'ArrowLeft') {
-                updatePosition(currentValue - keyboardStep, ev);
-                return;
-            }
-            else if (normalizedKey === 'ArrowUp' || normalizedKey === 'ArrowRight') {
-                updatePosition(currentValue + keyboardStep, ev);
-                return;
-            }
-            else {
-                switch (normalizedKey) {
-                    case 'PageDown':
-                        updatePosition(currentValue - keyboardStep * 10, ev);
-                        break;
-                    case 'PageUp':
-                        updatePosition(currentValue + keyboardStep * 10, ev);
-                        break;
-                    case 'Home':
-                        updatePosition(min, ev);
-                        break;
-                    case 'End':
-                        updatePosition(max, ev);
-                        break;
-                }
+            var incomingValue = index_1.getKeydownValue(ev, currentValue, min, max, dir, keyboardStep);
+            if (currentValue !== incomingValue) {
+                updatePosition(incomingValue, ev);
             }
         }, [currentValue, dir, hideStepAnimation, keyboardStep, max, min, onKeyDownCallback, updatePosition]);
         var getTrackBorderRadius = function () {
@@ -193,41 +95,12 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-shared-contexts
         });
         // TODO: Awaiting animation time from design spec.
         var animationTime = '0.1s';
-        var valuePercent = getPercent(renderedPosition !== undefined ? renderedPosition : currentValue, min, max);
+        var valuePercent = index_1.getPercent(renderedPosition !== undefined ? renderedPosition : currentValue, min, max);
         var originPercent = React.useMemo(function () {
-            return origin !== undefined ? getPercent(origin, min, max) : 0;
+            return origin !== undefined ? index_1.getPercent(origin, min, max) : 0;
         }, [max, min, origin]);
-        var markValues = React.useMemo(function () {
-            var valueArray = [];
-            // 1. We receive a boolean: mark for every step.
-            if (typeof marks === 'boolean' && marks === true) {
-                for (var i = 0; i < (max - min) / step + 1; i++) {
-                    valueArray.push(getPercent(min + step * i, min, max));
-                }
-            }
-            else if (Array.isArray(marks) && marks.length > 0) {
-                // 2. We receive an array with numbers: mark for every value in array.
-                return marks.map(function (marksItem) { return getPercent(min + marksItem, min, max); });
-            }
-            return valueArray;
-        }, [marks, max, min, step]);
-        /**
-         * Current percentage position for the marks.
-         */
-        var markPercent = React.useMemo(function () {
-            var valueArray = markValues;
-            var result = [];
-            // For CSS grid to work the percents array must be remapped by the previous percent - the current percent
-            if (valueArray.length > 0) {
-                result.push(valueArray[0] + '% ');
-                var prevPercent = valueArray[0];
-                for (var i = 1; i < valueArray.length; i++) {
-                    result.push(valueArray[i] - prevPercent + '% ');
-                    prevPercent = valueArray[i];
-                }
-            }
-            return result;
-        }, [markValues]);
+        var markValues = React.useMemo(function () { return index_1.getMarkValue(marks, min, max, step); }, [marks, max, min, step]);
+        var markPercent = React.useMemo(function () { return index_1.getMarkPercent(markValues); }, [markValues]);
         var thumbWrapperStyles = tslib_1.__assign({ transform: vertical
                 ? "translateY(" + valuePercent + "%)"
                 : "translateX(" + (dir === 'rtl' ? -valuePercent : valuePercent) + "%)", transition: stepAnimation ? "transform ease-in-out " + animationTime : 'none' }, state.thumbWrapper.style);
@@ -246,19 +119,6 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-shared-contexts
             : 'none', _a), state.track.style);
         var marksWrapperStyles = marks
             ? tslib_1.__assign((_b = {}, _b[vertical ? 'gridTemplateRows' : 'gridTemplateColumns'] = markPercent.join(''), _b), state.marksWrapper.style) : {};
-        /**
-         * Renders the marks
-         */
-        var renderMarks = function () {
-            var marksPercent = markPercent;
-            var marksValue = markValues;
-            var marksChildren = [];
-            for (var i = 0; i < marksPercent.length; i++) {
-                marksChildren.push(React.createElement("div", { className: markContainerClassName, key: "markItemContainer-" + i },
-                    React.createElement("div", { className: react_make_styles_1.mergeClasses(exports.markClassName, (marksValue[i] === 0 && firstMarkClassName) || (marksValue[i] === 100 && lastMarkClassName) || ''), key: "mark-" + i })));
-            }
-            return marksChildren;
-        };
         // Root props
         if (!disabled) {
             state.root.onPointerDown = onPointerDown;
@@ -267,8 +127,10 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-shared-contexts
         // Track Props
         state.track.style = trackStyles;
         // Mark props
-        state.marksWrapper.children = marks ? renderMarks() : undefined;
-        state.marksWrapper.style = marksWrapperStyles;
+        if (marks) {
+            state.marksWrapper.children = index_1.renderMarks(markValues);
+            state.marksWrapper.style = marksWrapperStyles;
+        }
         // Thumb Wrapper Props
         state.thumbWrapper.style = thumbWrapperStyles;
         // Active Rail Props