etudes 0.42.0 → 0.46.0

package/lib/Dropdown.d.ts

@@ -11,15 +11,15 @@ export declare type ButtonCSSProps = Readonly<{
 /**
  * Type constraint of the data passed to each item in the component.
  */
-export declare type DataProps<T = Record<string, never>> = T & {
+export declare type DataProps<T = Record<string, any>> = T & {
     label?: string;
 };
 /**
  * Interface defining the props of the item component type to be provided to the
  * component. The data type is generic.
  */
-export declare type ItemComponentProps<T = Record<string, never>> = ListItemComponentProps<DataProps<T>>;
-export interface Props<T = Record<string, never>> {
+export declare type ItemComponentProps<T = Record<string, any>> = ListItemComponentProps<DataProps<T>>;
+export declare type Props<T = Record<string, any>> = {
     /**
      * Class attribute to the root element.
      */
@@ -98,7 +98,7 @@ export interface Props<T = Record<string, never>> {
      * Additional CSS to be provided to the dropdown button.
      */
     buttonCSS?: ExtendedCSSFunction<ButtonCSSProps>;
-}
+};
 export interface State {
     /**
      * Index of the currently selected item. Any value less than 0 indicates that
@@ -115,7 +115,7 @@ export interface State {
  * supports both horizontal and vertical orientations. Provide data and item
  * component type to this component to automatically generate menu items.
  */
-export default class Dropdown<T = Record<string, never>> extends PureComponent<Props<T>, State> {
+export default class Dropdown<T = Record<string, any>> extends PureComponent<Props<T>, State> {
     nodeRefs: {
         root: React.RefObject<HTMLDivElement>;
     };

package/lib/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"/","sources":["Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ComponentType, createRef, PureComponent } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css, CSSProperties } from 'styled-components'\nimport List, { ItemComponentProps as ListItemComponentProps } from './List'\nimport { ExtendedCSSFunction, ExtendedCSSProps, Orientation } from './types'\n\nexport type ButtonCSSProps = Readonly<{\n  borderColor: string\n  borderThickness: number\n  isActive: boolean\n}>\n\n/**\n * Type constraint of the data passed to each item in the component.\n */\nexport type DataProps<T = Record<string, never>> = T & {\n  label?: string\n}\n\n/**\n * Interface defining the props of the item component type to be provided to the\n * component. The data type is generic.\n */\nexport type ItemComponentProps<T = Record<string, never>> = ListItemComponentProps<DataProps<T>>\n\nexport interface Props<T = Record<string, never>> {\n  /**\n   * Class attribute to the root element.\n   */\n  className?: string\n\n  /**\n   * Inline style attribute to the element.\n   */\n  style?: CSSProperties\n\n  /**\n   * Data of every item in the component. This is used to generate individual\n   * menu items. Data type is generic.\n   */\n  data: DataProps<T>[]\n\n  /**\n   * Indicates if the component is inverted (i.e. \"dropup\" instead of dropdown).\n   * Supports all orientations.\n   */\n  isInverted?: boolean\n\n  /**\n   * Indicates if items can be toggled, i.e. they can be deselected if selected\n   * again.\n   */\n  isTogglable?: boolean\n\n  /**\n   * Thickness of the border (in pixels) of every item and the dropdown button\n   * itself. 0 indicates no borders.\n   */\n  borderThickness?: number\n\n  /**\n   * The index of the default selected item.\n   */\n  defaultSelectedItemIndex?: number\n\n  /**\n   * Length (in pixels) of each item. This does not apply to the dropdown button\n   * itself. Length refers to the height in vertical orientation and width in\n   * horizontal orientation.\n   */\n  itemLength?: number\n\n  /**\n   * Padding (in pixels) of each item.\n   */\n  itemPadding?: number\n\n  /**\n   * Maximum number of items that are viside when the component expands. When a\n   * value greater than or equal to 0 is specified, only that number of items\n   * will be visible at a time, and a scrollbar will appear to scroll to\n   * remaining items. Any value less than 0 indicates that all items will be\n   * visible when the component expands.\n   */\n  maxVisibleItems?: number\n\n  /**\n   * Orientation of the component.\n   */\n  orientation?: Orientation\n\n  /**\n   * Color of the border of every item and the dropdown button itself.\n   */\n  borderColor?: string\n\n  /**\n   * The label to appear on the dropdown button when no items are selected.\n   */\n  defaultLabel?: string\n\n  /**\n   * SVG markup to be put in the dropdown button as the expand icon.\n   */\n  expandIconSvg?: string\n\n  /**\n   * React component type to be used for generating items inside the component.\n   */\n  itemComponentType: ComponentType<ItemComponentProps<T>>\n\n  /**\n   * Handler invoked whenever the selected index changes.\n   */\n  onIndexChange?: (index: number) => void\n\n  /**\n   * Additional CSS to be provided to the dropdown button.\n   */\n  buttonCSS?: ExtendedCSSFunction<ButtonCSSProps>\n}\n\nexport interface State {\n  /**\n   * Index of the currently selected item. Any value less than 0 indicates that\n   * no item is selected.\n   */\n  selectedItemIndex: number\n\n  /**\n   * Indicates if the dropdown menu is collapsed.\n   */\n  isCollapsed: boolean\n}\n\n/**\n * A dropdown menu component that is invertible (i.e. can \"dropup\" instead) and\n * supports both horizontal and vertical orientations. Provide data and item\n * component type to this component to automatically generate menu items.\n */\nexport default class Dropdown<T = Record<string, never>> extends PureComponent<Props<T>, State> {\n  nodeRefs = {\n    root: createRef<HTMLDivElement>(),\n  }\n\n  constructor(props: Props<T>) {\n    super(props)\n\n    this.state = {\n      selectedItemIndex: this.props.defaultSelectedItemIndex ?? -1,\n      isCollapsed: true,\n    }\n  }\n\n  get rect(): Rect {\n    return Rect.from(this.nodeRefs.root.current) ?? new Rect()\n  }\n\n  componentDidMount() {\n    window.addEventListener('click', this.onClickOutside)\n    this.props.onIndexChange?.(this.state.selectedItemIndex)\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener('click', this.onClickOutside)\n  }\n\n  componentDidUpdate(prevProps: Props<T>, prevState: State) {\n    if (prevState.selectedItemIndex !== this.state.selectedItemIndex) {\n      this.props.onIndexChange?.(this.state.selectedItemIndex)\n    }\n\n    if (prevProps.orientation !== this.props.orientation) {\n      this.forceUpdate()\n    }\n  }\n\n  render() {\n    const borderColor = this.props.borderColor ?? '#000'\n    const borderThickness = this.props.borderThickness ?? 1\n    const orientation = this.props.orientation ?? 'vertical'\n    const itemLength = this.props.itemLength ?? (orientation === 'vertical' ? this.rect.height : this.rect.width)\n    const maxVisibleItems = this.props.maxVisibleItems ?? -1\n    const isTogglable = this.props.isTogglable ?? true\n    const itemPadding = this.props.itemPadding ?? 0\n    const numItems = this.props.data.length\n    const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n    const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n\n    return (\n      <StyledRoot\n        className={this.props.className}\n        orientation={orientation}\n        isInverted={this.props.isInverted ?? false}\n        ref={this.nodeRefs.root}\n        style={this.props.style ?? {}}\n      >\n        <StyledToggle\n          borderColor={borderColor}\n          borderThickness={borderThickness}\n          extendedCSS={this.props.buttonCSS ?? (() => css``)}\n          isActive={!this.state.isCollapsed}\n          onClick={() => this.toggle()}\n        >\n          <label>\n            {this.state.selectedItemIndex === -1 ? (this.props.defaultLabel ?? 'Select') : this.props.data[this.state.selectedItemIndex].label}\n          </label>\n          {this.props.expandIconSvg && <span dangerouslySetInnerHTML={{ __html: this.props.expandIconSvg }}/>}\n        </StyledToggle>\n        <StyledItemList\n          borderColor={borderColor}\n          borderThickness={borderThickness}\n          data={this.props.data}\n          defaultSelectedIndex={this.props.defaultSelectedItemIndex ?? -1}\n          isInverted={this.props.isInverted ?? false}\n          isTogglable={isTogglable}\n          itemComponentType={this.props.itemComponentType as any} // HACK: Generic types cannot be inferred by props, so this is the only way.\n          itemPadding={itemPadding}\n          onDeselectAt={idx => this.selectItemAt(-1)}\n          onSelectAt={idx => this.selectItemAt(idx)}\n          orientation={orientation}\n          shouldStaySelected={true}\n          itemStyle={orientation === 'vertical' ? {\n            height: `${itemLength}px`,\n          } : {\n            width: `${itemLength}px`,\n          }}\n          style={orientation === 'vertical' ? {\n            height: this.state.isCollapsed ? '0px' : `${menuLength}px`,\n            overflowY: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),\n          } : {\n            width: this.state.isCollapsed ? '0px' : `${menuLength}px`,\n            overflowX: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),\n          }}\n        />\n      </StyledRoot>\n    )\n  }\n\n  /**\n   * Indicates if the item at the specified index is selected.\n   *\n   * @param index - The index of the item.\n   *\n   * @returns `true` if the item at the specified index is selected, `false`\n   *          otherwise.\n   */\n  isItemSelectedAt(index: number) {\n    return (this.state.selectedItemIndex === index)\n  }\n\n  /**\n   * Selects the item at the specified index.\n   *\n   * @param index - The index of the item to select.\n   */\n  selectItemAt(index: number) {\n    this.setState({\n      selectedItemIndex: index,\n      isCollapsed: true,\n    })\n  }\n\n  /**\n   * Expands the menu, revealing its items.\n   */\n  expand() {\n    if (!this.state.isCollapsed) return\n    this.setState({ isCollapsed: false })\n  }\n\n  /**\n   * Collapses the menu, concealing its items.\n   */\n  collapse() {\n    if (this.state.isCollapsed) return\n    this.setState({ isCollapsed: true })\n  }\n\n  /**\n   * Toggles the visibility of the menu.\n   */\n  toggle() {\n    if (this.state.isCollapsed) {\n      this.expand()\n    }\n    else {\n      this.collapse()\n    }\n  }\n\n  /**\n   * Handler invoked when click input is detected outside of the root element\n   * of the component.\n   *\n   * @param event - The MouseEvent passed to the handler.\n   */\n  private onClickOutside = (event: MouseEvent) => {\n    if (this.state.isCollapsed) return\n    if (!(event.target instanceof Node)) return\n\n    let isOutside = true\n    let node = event.target\n\n    while (node) {\n      if (node === this.nodeRefs.root.current) {\n        isOutside = false\n        break\n      }\n\n      if (!node.parentNode) break\n\n      node = node.parentNode\n    }\n\n    if (!isOutside) return\n\n    this.collapse()\n  }\n}\n\nconst StyledItemList = styled(List)<{\n  isInverted: boolean\n  itemPadding: number\n  borderThickness: number\n  orientation: Orientation\n}>`\n  position: absolute;\n\n  ::-webkit-scrollbar {}\n  ::-webkit-scrollbar-track {}\n  ::-webkit-scrollbar-thumb {}\n  ::-webkit-scrollbar-hover {}\n\n  ${props => props.orientation === 'vertical' ? css`\n    transition: height 100ms ease-out;\n    will-change: height;\n\n    ${props.isInverted ? css`\n      margin-bottom: ${props.itemPadding - props.borderThickness}px;\n      bottom: 100%;\n    ` : css`\n      top: 100%;\n      margin-top: ${props.itemPadding - props.borderThickness}px;\n    `}\n  ` : css`\n    transition: width 100ms ease-out;\n    will-change: width;\n\n    ${props.isInverted ? css`\n      margin-right: ${props.itemPadding - props.borderThickness}px;\n      right: 100%;\n    ` : css`\n      left: 100%;\n      margin-left: ${props.itemPadding - props.borderThickness}px;\n    `}\n  `}\n`\n\nconst StyledToggle = styled.button<ButtonCSSProps & ExtendedCSSProps<ButtonCSSProps>>`\n  > span {\n    height: 15px;\n    width: 15px;\n  }\n\n  > label {\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    letter-spacing: inherit;\n    line-height: inherit;\n  }\n\n  ${props => props.extendedCSS(props)}\n\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  color: #000;\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  justify-content: space-between;\n  left: 0;\n  margin: 0;\n  outline: none;\n  padding: 0 10px;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: 1;\n\n  ${props => props.borderThickness > 0 && css`\n    border: ${props.borderThickness}px solid ${props.borderColor};\n  `}\n\n  > span {\n    box-sizing: border-box;\n    display: block;\n    transform-origin: center;\n\n    svg {\n      height: 100%;\n      width: auto;\n    }\n  }\n`\n\nconst StyledRoot = styled.div<{\n  isInverted: boolean\n  orientation: Orientation\n}>`\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: flex-start;\n  padding: 0;\n  overflow: visible;\n  position: relative;\n\n  ${props => props.orientation === 'vertical' ? css`\n    flex-direction: ${props.isInverted ? 'column-reverse' : 'column'};\n    height: 50px;\n    width: 200px;\n  ` : css`\n    flex-direction: ${props.isInverted ? 'row-reverse' : 'row'};\n    height: 200px;\n    width: 50px;\n  `}\n`\n"]}
+{"version":3,"file":"Dropdown.js","sourceRoot":"/","sources":["Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ComponentType, createRef, PureComponent } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css, CSSProperties } from 'styled-components'\nimport List, { ItemComponentProps as ListItemComponentProps } from './List'\nimport { ExtendedCSSFunction, ExtendedCSSProps, Orientation } from './types'\n\nexport type ButtonCSSProps = Readonly<{\n  borderColor: string\n  borderThickness: number\n  isActive: boolean\n}>\n\n/**\n * Type constraint of the data passed to each item in the component.\n */\nexport type DataProps<T = Record<string, any>> = T & {\n  label?: string\n}\n\n/**\n * Interface defining the props of the item component type to be provided to the\n * component. The data type is generic.\n */\nexport type ItemComponentProps<T = Record<string, any>> = ListItemComponentProps<DataProps<T>>\n\nexport type Props<T = Record<string, any>> = {\n  /**\n   * Class attribute to the root element.\n   */\n  className?: string\n\n  /**\n   * Inline style attribute to the element.\n   */\n  style?: CSSProperties\n\n  /**\n   * Data of every item in the component. This is used to generate individual\n   * menu items. Data type is generic.\n   */\n  data: DataProps<T>[]\n\n  /**\n   * Indicates if the component is inverted (i.e. \"dropup\" instead of dropdown).\n   * Supports all orientations.\n   */\n  isInverted?: boolean\n\n  /**\n   * Indicates if items can be toggled, i.e. they can be deselected if selected\n   * again.\n   */\n  isTogglable?: boolean\n\n  /**\n   * Thickness of the border (in pixels) of every item and the dropdown button\n   * itself. 0 indicates no borders.\n   */\n  borderThickness?: number\n\n  /**\n   * The index of the default selected item.\n   */\n  defaultSelectedItemIndex?: number\n\n  /**\n   * Length (in pixels) of each item. This does not apply to the dropdown button\n   * itself. Length refers to the height in vertical orientation and width in\n   * horizontal orientation.\n   */\n  itemLength?: number\n\n  /**\n   * Padding (in pixels) of each item.\n   */\n  itemPadding?: number\n\n  /**\n   * Maximum number of items that are viside when the component expands. When a\n   * value greater than or equal to 0 is specified, only that number of items\n   * will be visible at a time, and a scrollbar will appear to scroll to\n   * remaining items. Any value less than 0 indicates that all items will be\n   * visible when the component expands.\n   */\n  maxVisibleItems?: number\n\n  /**\n   * Orientation of the component.\n   */\n  orientation?: Orientation\n\n  /**\n   * Color of the border of every item and the dropdown button itself.\n   */\n  borderColor?: string\n\n  /**\n   * The label to appear on the dropdown button when no items are selected.\n   */\n  defaultLabel?: string\n\n  /**\n   * SVG markup to be put in the dropdown button as the expand icon.\n   */\n  expandIconSvg?: string\n\n  /**\n   * React component type to be used for generating items inside the component.\n   */\n  itemComponentType: ComponentType<ItemComponentProps<T>>\n\n  /**\n   * Handler invoked whenever the selected index changes.\n   */\n  onIndexChange?: (index: number) => void\n\n  /**\n   * Additional CSS to be provided to the dropdown button.\n   */\n  buttonCSS?: ExtendedCSSFunction<ButtonCSSProps>\n}\n\nexport interface State {\n  /**\n   * Index of the currently selected item. Any value less than 0 indicates that\n   * no item is selected.\n   */\n  selectedItemIndex: number\n\n  /**\n   * Indicates if the dropdown menu is collapsed.\n   */\n  isCollapsed: boolean\n}\n\n/**\n * A dropdown menu component that is invertible (i.e. can \"dropup\" instead) and\n * supports both horizontal and vertical orientations. Provide data and item\n * component type to this component to automatically generate menu items.\n */\nexport default class Dropdown<T = Record<string, any>> extends PureComponent<Props<T>, State> {\n  nodeRefs = {\n    root: createRef<HTMLDivElement>(),\n  }\n\n  constructor(props: Props<T>) {\n    super(props)\n\n    this.state = {\n      selectedItemIndex: this.props.defaultSelectedItemIndex ?? -1,\n      isCollapsed: true,\n    }\n  }\n\n  get rect(): Rect {\n    return Rect.from(this.nodeRefs.root.current) ?? new Rect()\n  }\n\n  componentDidMount() {\n    window.addEventListener('click', this.onClickOutside)\n    this.props.onIndexChange?.(this.state.selectedItemIndex)\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener('click', this.onClickOutside)\n  }\n\n  componentDidUpdate(prevProps: Props<T>, prevState: State) {\n    if (prevState.selectedItemIndex !== this.state.selectedItemIndex) {\n      this.props.onIndexChange?.(this.state.selectedItemIndex)\n    }\n\n    if (prevProps.orientation !== this.props.orientation) {\n      this.forceUpdate()\n    }\n  }\n\n  render() {\n    const borderColor = this.props.borderColor ?? '#000'\n    const borderThickness = this.props.borderThickness ?? 1\n    const orientation = this.props.orientation ?? 'vertical'\n    const itemLength = this.props.itemLength ?? (orientation === 'vertical' ? this.rect.height : this.rect.width)\n    const maxVisibleItems = this.props.maxVisibleItems ?? -1\n    const isTogglable = this.props.isTogglable ?? true\n    const itemPadding = this.props.itemPadding ?? 0\n    const numItems = this.props.data.length\n    const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n    const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n\n    return (\n      <StyledRoot\n        className={this.props.className}\n        orientation={orientation}\n        isInverted={this.props.isInverted ?? false}\n        ref={this.nodeRefs.root}\n        style={this.props.style ?? {}}\n      >\n        <StyledToggle\n          borderColor={borderColor}\n          borderThickness={borderThickness}\n          extendedCSS={this.props.buttonCSS ?? (() => css``)}\n          isActive={!this.state.isCollapsed}\n          onClick={() => this.toggle()}\n        >\n          <label>\n            {this.state.selectedItemIndex === -1 ? (this.props.defaultLabel ?? 'Select') : this.props.data[this.state.selectedItemIndex].label}\n          </label>\n          {this.props.expandIconSvg && <span dangerouslySetInnerHTML={{ __html: this.props.expandIconSvg }}/>}\n        </StyledToggle>\n        <StyledItemList\n          borderColor={borderColor}\n          borderThickness={borderThickness}\n          data={this.props.data}\n          defaultSelectedIndex={this.props.defaultSelectedItemIndex ?? -1}\n          isInverted={this.props.isInverted ?? false}\n          isTogglable={isTogglable}\n          itemComponentType={this.props.itemComponentType as any} // HACK: Generic types cannot be inferred by props, so this is the only way.\n          itemPadding={itemPadding}\n          onDeselectAt={idx => this.selectItemAt(-1)}\n          onSelectAt={idx => this.selectItemAt(idx)}\n          orientation={orientation}\n          shouldStaySelected={true}\n          itemStyle={orientation === 'vertical' ? {\n            height: `${itemLength}px`,\n          } : {\n            width: `${itemLength}px`,\n          }}\n          style={orientation === 'vertical' ? {\n            height: this.state.isCollapsed ? '0px' : `${menuLength}px`,\n            overflowY: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),\n          } : {\n            width: this.state.isCollapsed ? '0px' : `${menuLength}px`,\n            overflowX: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),\n          }}\n        />\n      </StyledRoot>\n    )\n  }\n\n  /**\n   * Indicates if the item at the specified index is selected.\n   *\n   * @param index - The index of the item.\n   *\n   * @returns `true` if the item at the specified index is selected, `false`\n   *          otherwise.\n   */\n  isItemSelectedAt(index: number) {\n    return (this.state.selectedItemIndex === index)\n  }\n\n  /**\n   * Selects the item at the specified index.\n   *\n   * @param index - The index of the item to select.\n   */\n  selectItemAt(index: number) {\n    this.setState({\n      selectedItemIndex: index,\n      isCollapsed: true,\n    })\n  }\n\n  /**\n   * Expands the menu, revealing its items.\n   */\n  expand() {\n    if (!this.state.isCollapsed) return\n    this.setState({ isCollapsed: false })\n  }\n\n  /**\n   * Collapses the menu, concealing its items.\n   */\n  collapse() {\n    if (this.state.isCollapsed) return\n    this.setState({ isCollapsed: true })\n  }\n\n  /**\n   * Toggles the visibility of the menu.\n   */\n  toggle() {\n    if (this.state.isCollapsed) {\n      this.expand()\n    }\n    else {\n      this.collapse()\n    }\n  }\n\n  /**\n   * Handler invoked when click input is detected outside of the root element\n   * of the component.\n   *\n   * @param event - The MouseEvent passed to the handler.\n   */\n  private onClickOutside = (event: MouseEvent) => {\n    if (this.state.isCollapsed) return\n    if (!(event.target instanceof Node)) return\n\n    let isOutside = true\n    let node = event.target\n\n    while (node) {\n      if (node === this.nodeRefs.root.current) {\n        isOutside = false\n        break\n      }\n\n      if (!node.parentNode) break\n\n      node = node.parentNode\n    }\n\n    if (!isOutside) return\n\n    this.collapse()\n  }\n}\n\nconst StyledItemList = styled(List)<{\n  isInverted: boolean\n  itemPadding: number\n  borderThickness: number\n  orientation: Orientation\n}>`\n  position: absolute;\n\n  ::-webkit-scrollbar {}\n  ::-webkit-scrollbar-track {}\n  ::-webkit-scrollbar-thumb {}\n  ::-webkit-scrollbar-hover {}\n\n  ${props => props.orientation === 'vertical' ? css`\n    transition: height 100ms ease-out;\n    will-change: height;\n\n    ${props.isInverted ? css`\n      margin-bottom: ${props.itemPadding - props.borderThickness}px;\n      bottom: 100%;\n    ` : css`\n      top: 100%;\n      margin-top: ${props.itemPadding - props.borderThickness}px;\n    `}\n  ` : css`\n    transition: width 100ms ease-out;\n    will-change: width;\n\n    ${props.isInverted ? css`\n      margin-right: ${props.itemPadding - props.borderThickness}px;\n      right: 100%;\n    ` : css`\n      left: 100%;\n      margin-left: ${props.itemPadding - props.borderThickness}px;\n    `}\n  `}\n`\n\nconst StyledToggle = styled.button<ButtonCSSProps & ExtendedCSSProps<ButtonCSSProps>>`\n  > span {\n    height: 15px;\n    width: 15px;\n  }\n\n  > label {\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    letter-spacing: inherit;\n    line-height: inherit;\n  }\n\n  ${props => props.extendedCSS(props)}\n\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  color: #000;\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  justify-content: space-between;\n  left: 0;\n  margin: 0;\n  outline: none;\n  padding: 0 10px;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: 1;\n\n  ${props => props.borderThickness > 0 && css`\n    border: ${props.borderThickness}px solid ${props.borderColor};\n  `}\n\n  > span {\n    box-sizing: border-box;\n    display: block;\n    transform-origin: center;\n\n    svg {\n      height: 100%;\n      width: auto;\n    }\n  }\n`\n\nconst StyledRoot = styled.div<{\n  isInverted: boolean\n  orientation: Orientation\n}>`\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: flex-start;\n  padding: 0;\n  overflow: visible;\n  position: relative;\n\n  ${props => props.orientation === 'vertical' ? css`\n    flex-direction: ${props.isInverted ? 'column-reverse' : 'column'};\n    height: 50px;\n    width: 200px;\n  ` : css`\n    flex-direction: ${props.isInverted ? 'row-reverse' : 'row'};\n    height: 200px;\n    width: 50px;\n  `}\n`\n"]}

package/lib/ExtractChildren.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export default function ExtractChildren({ children, ...props }: PropsWithChildren<HTMLAttributes<HTMLElement>>): JSX.Element;

package/lib/ExtractChildren.js

@@ -0,0 +1,54 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+function ExtractChildren(_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (react_1.default.createElement(react_1.default.Fragment, null, react_1.Children.map(children, function (child) {
+        if ((0, react_1.isValidElement)(child))
+            return (0, react_1.cloneElement)(child, __assign({}, props));
+        return child;
+    })));
+}
+exports.default = ExtractChildren;
+//# sourceMappingURL=ExtractChildren.js.map

package/lib/ExtractChildren.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExtractChildren.js","sourceRoot":"/","sources":["ExtractChildren.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAwG;AAExG,SAAwB,eAAe,CAAC,EAAsE;IAApE,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IAC1D,OAAO,CACL,8DACG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAA,KAAK;QAC3B,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC;YAAE,OAAO,IAAA,oBAAY,EAAC,KAAK,eAAO,KAAK,EAAG,CAAA;QACnE,OAAO,KAAK,CAAA;IACd,CAAC,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AATD,kCASC","sourcesContent":["import React, { Children, cloneElement, HTMLAttributes, isValidElement, PropsWithChildren } from 'react'\n\nexport default function ExtractChildren({ children, ...props }: PropsWithChildren<HTMLAttributes<HTMLElement>>) {\n  return (\n    <>\n      {Children.map(children, child => {\n        if (isValidElement(child)) return cloneElement(child, { ...props })\n        return child\n      })}\n    </>\n  )\n}\n"]}

package/lib/Panorama.d.ts

@@ -14,7 +14,7 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
     /**
      * The source URL of the image.
      */
-    src: string;
+    src?: string;
     /**
      * A decimal percentage of the component width indicating where 0° should be, i.e. if `zeroAnchor`
      * is `0`, the `angle` would be 0° when the left edge of the image is at the left edge of the

package/lib/Panorama.js

@@ -148,6 +148,6 @@ function Panorama(_a) {
 }
 exports.default = Panorama;
 var StyledImageContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-repeat: repeat;\n  background-size: auto 100%;\n  height: 100%;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n"], ["\n  background-repeat: repeat;\n  background-size: auto 100%;\n  height: 100%;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])));
-var StyledRoot = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 0 0 auto;\n  justify-content: center;\n  padding: 0;\n  position: relative;\n  touch-action: none;\n\n  > div {\n    height: 100%;\n    left: 0;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 0 0 auto;\n  justify-content: center;\n  padding: 0;\n  position: relative;\n  touch-action: none;\n\n  > div {\n    height: 100%;\n    left: 0;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n"])));
+var StyledRoot = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 0 0 auto;\n  height: 100%;\n  justify-content: center;\n  padding: 0;\n  position: relative;\n  touch-action: none;\n  width: 100%;\n\n  > div {\n    height: 100%;\n    left: 0;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 0 0 auto;\n  height: 100%;\n  justify-content: center;\n  padding: 0;\n  position: relative;\n  touch-action: none;\n  width: 100%;\n\n  > div {\n    height: 100%;\n    left: 0;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n"])));
 var templateObject_1, templateObject_2;
 //# sourceMappingURL=Panorama.js.map

package/lib/Panorama.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panorama.js","sourceRoot":"/","sources":["Panorama.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes, useEffect, useRef, useState } from 'react'\nimport { Size } from 'spase'\nimport styled from 'styled-components'\nimport useDragEffect from './hooks/useDragEffect'\nimport useLoadImageEffect from './hooks/useLoadImageEffect'\nimport useResizeEffect from './hooks/useResizeEffect'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The current angle in degrees, 0.0 - 360.0, inclusive. When angle is 0 or 360, the left bound of\n   * the image is at the center of the component.\n   */\n  angle?: number\n\n  /**\n   * The panning speed. This is a multiplier to the number of pixels dragged, i.e. when set to 1,\n   * the image will shift the same amount of pixels that were dragged.\n   */\n  speed?: number\n\n  /**\n   * The source URL of the image.\n   */\n  src: string\n\n  /**\n   * A decimal percentage of the component width indicating where 0° should be, i.e. if `zeroAnchor`\n   * is `0`, the `angle` would be 0° when the left edge of the image is at the left edge of the\n   * component.\n   */\n  zeroAnchor?: number\n\n  /**\n   * Handler invoked when the positionchanges. This can either be invoked from the `angle` prop\n   * being changed or from the image being dragged.\n   *\n   * @param position - The current position.\n   * @param isDragging - Specifies if the position change is due to dragging.\n   */\n  onPositionChange?: (position: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when the angle changes. This can either be invoked from the `angle` prop being\n   * changed or from the image being dragged. When `angle` is being double-binded, ensure that the\n   * value is only being set by this handler when `isDragging` is `true` to avoid potential update\n   * overflow.\n   *\n   * @param angle - The current angle.\n   * @param isDragging - Specifies if the angle change is due to dragging.\n   */\n  onAngleChange?: (angle: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when dragging starts.\n   */\n  onDragStart?: () => void\n\n  /**\n   * Handler invoked when dragging ends.\n   */\n  onDragEnd?: () => void\n\n  /**\n   * Handler invoked when the image begins loading.\n   */\n  onImageLoadStart?: () => void\n\n  /**\n   * Handler invoked when the image is done loading.\n   *\n   * @param imageElement - The loaded image element.\n   */\n  onImageLoadComplete?: (imageElement: HTMLImageElement) => void\n\n  /**\n   * Handler invoked when there is an error loading the image.\n   */\n  onImageLoadError?: () => void\n\n  /**\n   * Handler invoked when the image size changes. This is the actual size of the loaded image. When\n   * no images are loaded yet, the size is `undefined`.\n   *\n   * @param size - The actual size of the loaded iamge. If no images are loaded yet, the size is\n   *               `undefined`.\n   */\n  onImageSizeChange?: (size?: Size) => void\n\n  /**\n   * Handler invoked when the size of this component changes.\n   *\n   * @param size - The size of this component.\n   */\n  onResize?: (size: Size) => void\n}\n\nfunction getFilledImageSize(originalSize: Size, sizeToFill: Size): Size {\n  const { width: originalWidth, height: originalHeight } = originalSize\n  const { height: filledHeignt } = sizeToFill\n\n  if (originalHeight <= 0) return new Size()\n\n  const aspectRatio = filledHeignt / originalHeight\n  const filledWidth = aspectRatio * originalWidth\n\n  return new Size([filledWidth, filledHeignt])\n}\n\nfunction getDisplacementFromAngle(angle: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n  const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n  const { width: componentWidth } = componentSize\n  const offset = componentWidth*zeroAnchor\n  return (angle / 360) * imageWidth - offset\n}\n\nfunction getAngleFromDisplacement(displacement: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n  const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n  const { width: componentWidth } = componentSize\n  const offset = componentWidth*zeroAnchor\n\n  let angle = ((displacement + offset) % imageWidth) / imageWidth*360\n  while (angle < 0) angle += 360\n  return angle\n}\n\n/**\n * A component containing a pannable 360° panorama image. The angle supports two-way binding.\n */\nexport default function Panorama({\n  angle: externalAngle = 0,\n  speed = 1,\n  src,\n  zeroAnchor = 0,\n  onAngleChange,\n  onPositionChange,\n  onDragStart,\n  onDragEnd,\n  onImageLoadStart,\n  onImageLoadComplete,\n  onImageLoadError,\n  onImageSizeChange,\n  onResize,\n  ...props\n}: Props) {\n  function transform(currentDisplacement: number, dx: number, dy: number): number {\n    const newDisplacement = currentDisplacement - (dx * speed)\n    return newDisplacement\n  }\n\n  const rootRef = useRef<HTMLDivElement>(null)\n\n  const [size] = useResizeEffect(rootRef, { onResize })\n  const [angle, setAngle] = useState(externalAngle)\n\n  const { isLoading: [isLoading], imageSize: [imageSize] } = useLoadImageEffect(src, {\n    onImageLoadComplete,\n    onImageLoadError,\n    onImageSizeChange,\n  })\n\n  const { isDragging: [isDragging], value: [displacement, setDisplacement] } = useDragEffect(rootRef, {\n    initialValue: 0,\n    transform,\n    onDragStart,\n    onDragEnd,\n  })\n\n  useEffect(() => {\n    if (isDragging || isLoading || !imageSize) return\n\n    const newDisplacement = getDisplacementFromAngle(externalAngle, imageSize, size, zeroAnchor)\n\n    if (newDisplacement !== displacement) {\n      setDisplacement(newDisplacement)\n    }\n\n    if (externalAngle !== angle) {\n      setAngle(externalAngle)\n    }\n  }, [externalAngle, isLoading, imageSize, size, zeroAnchor])\n\n  useEffect(() => {\n    if (!isDragging || !imageSize) return\n\n    const newAngle = getAngleFromDisplacement(displacement, imageSize, size, zeroAnchor)\n\n    if (angle !== newAngle) {\n      setAngle(newAngle)\n    }\n  }, [displacement, imageSize, size, zeroAnchor])\n\n  useEffect(() => {\n    onAngleChange?.(angle, isDragging)\n    onPositionChange?.(angle / 360, isDragging)\n  }, [angle])\n\n  return (\n    <StyledRoot ref={rootRef} {...props}>\n      <StyledImageContainer\n        style={{\n          backgroundImage: `url(${src})`,\n          backgroundPositionX: `${-displacement}px`,\n        }}\n      />\n    </StyledRoot>\n  )\n}\n\nconst StyledImageContainer = styled.div`\n  background-repeat: repeat;\n  background-size: auto 100%;\n  height: 100%;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n`\n\nconst StyledRoot = styled.div`\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 0 0 auto;\n  justify-content: center;\n  padding: 0;\n  position: relative;\n  touch-action: none;\n\n  > div {\n    height: 100%;\n    left: 0;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n`\n"]}
+{"version":3,"file":"Panorama.js","sourceRoot":"/","sources":["Panorama.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes, useEffect, useRef, useState } from 'react'\nimport { Size } from 'spase'\nimport styled from 'styled-components'\nimport useDragEffect from './hooks/useDragEffect'\nimport useLoadImageEffect from './hooks/useLoadImageEffect'\nimport useResizeEffect from './hooks/useResizeEffect'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The current angle in degrees, 0.0 - 360.0, inclusive. When angle is 0 or 360, the left bound of\n   * the image is at the center of the component.\n   */\n  angle?: number\n\n  /**\n   * The panning speed. This is a multiplier to the number of pixels dragged, i.e. when set to 1,\n   * the image will shift the same amount of pixels that were dragged.\n   */\n  speed?: number\n\n  /**\n   * The source URL of the image.\n   */\n  src?: string\n\n  /**\n   * A decimal percentage of the component width indicating where 0° should be, i.e. if `zeroAnchor`\n   * is `0`, the `angle` would be 0° when the left edge of the image is at the left edge of the\n   * component.\n   */\n  zeroAnchor?: number\n\n  /**\n   * Handler invoked when the positionchanges. This can either be invoked from the `angle` prop\n   * being changed or from the image being dragged.\n   *\n   * @param position - The current position.\n   * @param isDragging - Specifies if the position change is due to dragging.\n   */\n  onPositionChange?: (position: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when the angle changes. This can either be invoked from the `angle` prop being\n   * changed or from the image being dragged. When `angle` is being double-binded, ensure that the\n   * value is only being set by this handler when `isDragging` is `true` to avoid potential update\n   * overflow.\n   *\n   * @param angle - The current angle.\n   * @param isDragging - Specifies if the angle change is due to dragging.\n   */\n  onAngleChange?: (angle: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when dragging starts.\n   */\n  onDragStart?: () => void\n\n  /**\n   * Handler invoked when dragging ends.\n   */\n  onDragEnd?: () => void\n\n  /**\n   * Handler invoked when the image begins loading.\n   */\n  onImageLoadStart?: () => void\n\n  /**\n   * Handler invoked when the image is done loading.\n   *\n   * @param imageElement - The loaded image element.\n   */\n  onImageLoadComplete?: (imageElement: HTMLImageElement) => void\n\n  /**\n   * Handler invoked when there is an error loading the image.\n   */\n  onImageLoadError?: () => void\n\n  /**\n   * Handler invoked when the image size changes. This is the actual size of the loaded image. When\n   * no images are loaded yet, the size is `undefined`.\n   *\n   * @param size - The actual size of the loaded iamge. If no images are loaded yet, the size is\n   *               `undefined`.\n   */\n  onImageSizeChange?: (size?: Size) => void\n\n  /**\n   * Handler invoked when the size of this component changes.\n   *\n   * @param size - The size of this component.\n   */\n  onResize?: (size: Size) => void\n}\n\nfunction getFilledImageSize(originalSize: Size, sizeToFill: Size): Size {\n  const { width: originalWidth, height: originalHeight } = originalSize\n  const { height: filledHeignt } = sizeToFill\n\n  if (originalHeight <= 0) return new Size()\n\n  const aspectRatio = filledHeignt / originalHeight\n  const filledWidth = aspectRatio * originalWidth\n\n  return new Size([filledWidth, filledHeignt])\n}\n\nfunction getDisplacementFromAngle(angle: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n  const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n  const { width: componentWidth } = componentSize\n  const offset = componentWidth*zeroAnchor\n  return (angle / 360) * imageWidth - offset\n}\n\nfunction getAngleFromDisplacement(displacement: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n  const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n  const { width: componentWidth } = componentSize\n  const offset = componentWidth*zeroAnchor\n\n  let angle = ((displacement + offset) % imageWidth) / imageWidth*360\n  while (angle < 0) angle += 360\n  return angle\n}\n\n/**\n * A component containing a pannable 360° panorama image. The angle supports two-way binding.\n */\nexport default function Panorama({\n  angle: externalAngle = 0,\n  speed = 1,\n  src,\n  zeroAnchor = 0,\n  onAngleChange,\n  onPositionChange,\n  onDragStart,\n  onDragEnd,\n  onImageLoadStart,\n  onImageLoadComplete,\n  onImageLoadError,\n  onImageSizeChange,\n  onResize,\n  ...props\n}: Props) {\n  function transform(currentDisplacement: number, dx: number, dy: number): number {\n    const newDisplacement = currentDisplacement - (dx * speed)\n    return newDisplacement\n  }\n\n  const rootRef = useRef<HTMLDivElement>(null)\n\n  const [size] = useResizeEffect(rootRef, { onResize })\n  const [angle, setAngle] = useState(externalAngle)\n\n  const { isLoading: [isLoading], imageSize: [imageSize] } = useLoadImageEffect(src, {\n    onImageLoadComplete,\n    onImageLoadError,\n    onImageSizeChange,\n  })\n\n  const { isDragging: [isDragging], value: [displacement, setDisplacement] } = useDragEffect(rootRef, {\n    initialValue: 0,\n    transform,\n    onDragStart,\n    onDragEnd,\n  })\n\n  useEffect(() => {\n    if (isDragging || isLoading || !imageSize) return\n\n    const newDisplacement = getDisplacementFromAngle(externalAngle, imageSize, size, zeroAnchor)\n\n    if (newDisplacement !== displacement) {\n      setDisplacement(newDisplacement)\n    }\n\n    if (externalAngle !== angle) {\n      setAngle(externalAngle)\n    }\n  }, [externalAngle, isLoading, imageSize, size, zeroAnchor])\n\n  useEffect(() => {\n    if (!isDragging || !imageSize) return\n\n    const newAngle = getAngleFromDisplacement(displacement, imageSize, size, zeroAnchor)\n\n    if (angle !== newAngle) {\n      setAngle(newAngle)\n    }\n  }, [displacement, imageSize, size, zeroAnchor])\n\n  useEffect(() => {\n    onAngleChange?.(angle, isDragging)\n    onPositionChange?.(angle / 360, isDragging)\n  }, [angle])\n\n  return (\n    <StyledRoot ref={rootRef} {...props}>\n      <StyledImageContainer\n        style={{\n          backgroundImage: `url(${src})`,\n          backgroundPositionX: `${-displacement}px`,\n        }}\n      />\n    </StyledRoot>\n  )\n}\n\nconst StyledImageContainer = styled.div`\n  background-repeat: repeat;\n  background-size: auto 100%;\n  height: 100%;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n`\n\nconst StyledRoot = styled.div`\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 0 0 auto;\n  height: 100%;\n  justify-content: center;\n  padding: 0;\n  position: relative;\n  touch-action: none;\n  width: 100%;\n\n  > div {\n    height: 100%;\n    left: 0;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n`\n"]}

package/lib/PanoramaSlider.js

@@ -121,6 +121,6 @@ var StyledTrack = styled_components_1.default.div(templateObject_2 || (templateO
 var StyledTrackContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: block;\n  height: 100%;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  width: 100%;\n\n  > div {\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: flex-start;\n    left: 0;\n    overflow: visible;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n"], ["\n  box-sizing: border-box;\n  display: block;\n  height: 100%;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  width: 100%;\n\n  > div {\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: flex-start;\n    left: 0;\n    overflow: visible;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n"])));
 var StyledIndicator = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: #fff;\n  border-radius: 2px;\n  bottom: -10px;\n  box-sizing: border-box;\n  display: block;\n  height: 2px;\n  left: 0;\n  margin: 0 auto;\n  opacity: 0;\n  right: 0;\n  transition: opacity .3s ease-out;\n\n  &.dragging {\n    opacity: 1;\n  }\n\n  ", "\n"], ["\n  background: #fff;\n  border-radius: 2px;\n  bottom: -10px;\n  box-sizing: border-box;\n  display: block;\n  height: 2px;\n  left: 0;\n  margin: 0 auto;\n  opacity: 0;\n  right: 0;\n  transition: opacity .3s ease-out;\n\n  &.dragging {\n    opacity: 1;\n  }\n\n  ", "\n"])), function (props) { return props.css; });
 var StyledPanorama = (0, styled_components_1.default)(Panorama_1.default)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) { return props.css; });
-var StyledRoot = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: block;\n  flex: 0 0 auto;\n"], ["\n  box-sizing: border-box;\n  display: block;\n  flex: 0 0 auto;\n"])));
+var StyledRoot = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: block;\n  flex: 0 0 auto;\n  height: 100%;\n  width: 100%;\n"], ["\n  box-sizing: border-box;\n  display: block;\n  flex: 0 0 auto;\n  height: 100%;\n  width: 100%;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
 //# sourceMappingURL=PanoramaSlider.js.map

package/lib/PanoramaSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanoramaSlider.js","sourceRoot":"/","sources":["PanoramaSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport _ from 'lodash'\nimport React, { HTMLAttributes, useRef, useState } from 'react'\nimport { Size } from 'spase'\nimport styled, { CSSProp } from 'styled-components'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport Panorama, { Props as PanoramaProps } from './Panorama'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & PanoramaProps & {\n  /**\n   * Field-of-view (0.0 - 360.0 degrees, inclusive) that represents the size of the reticle. 360\n   * indicates the reticle covers the entire image. If this is unspecified, the component will\n   * attempt to automatically calculate the FOV using the `viewportSize` prop.\n   */\n  fov?: number\n\n  /**\n   * Specifies which length (width or height) should be automatically calculated. The counterpart\n   * must be known (if `width` is specified here, the component's height must be known, i.e. it is\n   * specified in the CSS). Defaults to `width`.\n   */\n  autoDimension?: 'width' | 'height'\n\n  /**\n   * Size of the viewport that this component is controlling. A viewport can be thought of as a DOM\n   * element containing an aspect-filled image. This is used to automatically calculate the FOV if\n   * `fov` prop is not specified. If it is, this prop is ignored.\n   */\n  viewportSize?: Size\n\n  /**\n   * Additional CSS to be provided to the internal panorama component.\n   */\n  cssPanorama?: CSSProp<any>\n\n  /**\n   * Additional CSS to be provided to the reticle.\n   */\n  cssReticle?: CSSProp<any>\n\n  /**\n   * Additional CSS to be provided to the track.\n   */\n  cssTrack?: CSSProp<any>\n\n  /**\n   * Additional CSS to be provided to the indicator.\n   */\n  cssIndicator?: CSSProp<any>\n}\n\nexport default function PanoramaSlider({\n  fov,\n  autoDimension = 'width',\n  viewportSize,\n  cssPanorama,\n  cssReticle,\n  cssTrack,\n  cssIndicator,\n  angle = 0,\n  speed = 1,\n  src,\n  zeroAnchor = 0,\n  onAngleChange,\n  onPositionChange,\n  onDragStart,\n  onDragEnd,\n  onImageLoadStart,\n  onImageLoadComplete,\n  onImageLoadError,\n  onImageSizeChange,\n  onResize,\n  style,\n  ...props\n}: Props) {\n  function getImageAspectRatio(): number {\n    if (!imageSize) return 0\n    const { width, height } = imageSize\n    if (height === 0) return 0\n    return width / height\n  }\n\n  function getReticleWidth(): number {\n    const angle = _.clamp(fov ?? (viewportSize ? (viewportSize.width / (viewportSize.height * aspectRatio)) * 360 : 0), 0, 360)\n    return size.width * (angle / 360)\n  }\n\n  function getAdjustedZeroAnchor() {\n    if (size.width <= 0) return zeroAnchor\n\n    return ((size.width - reticleWidth) * 0.5 + (zeroAnchor * reticleWidth)) / size.width\n  }\n\n  const rootRef = useRef<HTMLDivElement>(null)\n\n  const [imageSize, setImageSize] = useState<Size | undefined>(undefined)\n  const [isDragging, setIsDragging] = useState(false)\n  const [size] = useResizeEffect(rootRef, { onResize })\n\n  const aspectRatio = getImageAspectRatio()\n  const reticleWidth = getReticleWidth()\n  const adjustedZeroAnchor = getAdjustedZeroAnchor()\n\n  return (\n    <StyledRoot ref={rootRef} style={{\n      ...style,\n      ...autoDimension === 'width' ? {\n        width: `${size.height * aspectRatio}px`,\n      } : {\n        height: `${size.width / aspectRatio}px`,\n      },\n    }} {...props}>\n      <StyledPanorama\n        angle={angle}\n        css={cssPanorama}\n        onAngleChange={onAngleChange}\n        onDragEnd={() => {\n          setIsDragging(false)\n          onDragEnd?.()\n        }}\n        onDragStart={() => {\n          setIsDragging(true)\n          onDragStart?.()\n        }}\n        onImageLoadComplete={onImageLoadComplete}\n        onImageLoadError={onImageLoadError}\n        onImageLoadStart={onImageLoadStart}\n        onImageSizeChange={size => setImageSize(size)}\n        onPositionChange={onPositionChange}\n        speed={speed}\n        src={src}\n        style={{ height: '100%', width: '100%' }}\n        zeroAnchor={adjustedZeroAnchor}\n      />\n      <StyledTrackContainer>\n        <div>\n          <StyledTrack className={classNames({ dragging: isDragging })} css={cssTrack}/>\n          <StyledReticle className={classNames({ dragging: isDragging })} css={cssReticle} style={{ width: `${reticleWidth}px` }}/>\n          <StyledTrack className={classNames({ dragging: isDragging })} css={cssTrack}/>\n        </div>\n      </StyledTrackContainer>\n      <StyledIndicator className={classNames({ dragging: isDragging })} style={{ width: `${reticleWidth}px` }} css={cssIndicator}/>\n    </StyledRoot>\n  )\n}\n\nconst StyledReticle = styled.div`\n  background: rgba(0, 0, 0, .3);\n  flex: 0 0 auto;\n  height: 100%;\n  transition-duration: 100ms;\n  transition-property: background;\n  transition-timing-function: ease-out;\n\n  &.dragging {\n    background: rgba(0, 0, 0, 0);\n  }\n\n  ${props => props.css}\n  `\n\nconst StyledTrack = styled.div`\n  background: rgba(0, 0, 0, .7);\n  display: block;\n  flex: 1 0 auto;\n  height: 100%;\n  pointer-events: none;\n\n  ${props => props.css}\n`\n\nconst StyledTrackContainer = styled.div`\n  box-sizing: border-box;\n  display: block;\n  height: 100%;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  width: 100%;\n\n  > div {\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: flex-start;\n    left: 0;\n    overflow: visible;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n`\n\nconst StyledIndicator = styled.div`\n  background: #fff;\n  border-radius: 2px;\n  bottom: -10px;\n  box-sizing: border-box;\n  display: block;\n  height: 2px;\n  left: 0;\n  margin: 0 auto;\n  opacity: 0;\n  right: 0;\n  transition: opacity .3s ease-out;\n\n  &.dragging {\n    opacity: 1;\n  }\n\n  ${props => props.css}\n`\n\nconst StyledPanorama = styled(Panorama)`\n  ${(props: any) => props.css}\n`\n\nconst StyledRoot = styled.div`\n  box-sizing: border-box;\n  display: block;\n  flex: 0 0 auto;\n`\n"]}
+{"version":3,"file":"PanoramaSlider.js","sourceRoot":"/","sources":["PanoramaSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport _ from 'lodash'\nimport React, { HTMLAttributes, useRef, useState } from 'react'\nimport { Size } from 'spase'\nimport styled, { CSSProp } from 'styled-components'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport Panorama, { Props as PanoramaProps } from './Panorama'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & PanoramaProps & {\n  /**\n   * Field-of-view (0.0 - 360.0 degrees, inclusive) that represents the size of the reticle. 360\n   * indicates the reticle covers the entire image. If this is unspecified, the component will\n   * attempt to automatically calculate the FOV using the `viewportSize` prop.\n   */\n  fov?: number\n\n  /**\n   * Specifies which length (width or height) should be automatically calculated. The counterpart\n   * must be known (if `width` is specified here, the component's height must be known, i.e. it is\n   * specified in the CSS). Defaults to `width`.\n   */\n  autoDimension?: 'width' | 'height'\n\n  /**\n   * Size of the viewport that this component is controlling. A viewport can be thought of as a DOM\n   * element containing an aspect-filled image. This is used to automatically calculate the FOV if\n   * `fov` prop is not specified. If it is, this prop is ignored.\n   */\n  viewportSize?: Size\n\n  /**\n   * Additional CSS to be provided to the internal panorama component.\n   */\n  cssPanorama?: CSSProp<any>\n\n  /**\n   * Additional CSS to be provided to the reticle.\n   */\n  cssReticle?: CSSProp<any>\n\n  /**\n   * Additional CSS to be provided to the track.\n   */\n  cssTrack?: CSSProp<any>\n\n  /**\n   * Additional CSS to be provided to the indicator.\n   */\n  cssIndicator?: CSSProp<any>\n}\n\nexport default function PanoramaSlider({\n  fov,\n  autoDimension = 'width',\n  viewportSize,\n  cssPanorama,\n  cssReticle,\n  cssTrack,\n  cssIndicator,\n  angle = 0,\n  speed = 1,\n  src,\n  zeroAnchor = 0,\n  onAngleChange,\n  onPositionChange,\n  onDragStart,\n  onDragEnd,\n  onImageLoadStart,\n  onImageLoadComplete,\n  onImageLoadError,\n  onImageSizeChange,\n  onResize,\n  style,\n  ...props\n}: Props) {\n  function getImageAspectRatio(): number {\n    if (!imageSize) return 0\n    const { width, height } = imageSize\n    if (height === 0) return 0\n    return width / height\n  }\n\n  function getReticleWidth(): number {\n    const angle = _.clamp(fov ?? (viewportSize ? (viewportSize.width / (viewportSize.height * aspectRatio)) * 360 : 0), 0, 360)\n    return size.width * (angle / 360)\n  }\n\n  function getAdjustedZeroAnchor() {\n    if (size.width <= 0) return zeroAnchor\n\n    return ((size.width - reticleWidth) * 0.5 + (zeroAnchor * reticleWidth)) / size.width\n  }\n\n  const rootRef = useRef<HTMLDivElement>(null)\n\n  const [imageSize, setImageSize] = useState<Size | undefined>(undefined)\n  const [isDragging, setIsDragging] = useState(false)\n  const [size] = useResizeEffect(rootRef, { onResize })\n\n  const aspectRatio = getImageAspectRatio()\n  const reticleWidth = getReticleWidth()\n  const adjustedZeroAnchor = getAdjustedZeroAnchor()\n\n  return (\n    <StyledRoot ref={rootRef} style={{\n      ...style,\n      ...autoDimension === 'width' ? {\n        width: `${size.height * aspectRatio}px`,\n      } : {\n        height: `${size.width / aspectRatio}px`,\n      },\n    }} {...props}>\n      <StyledPanorama\n        angle={angle}\n        css={cssPanorama}\n        onAngleChange={onAngleChange}\n        onDragEnd={() => {\n          setIsDragging(false)\n          onDragEnd?.()\n        }}\n        onDragStart={() => {\n          setIsDragging(true)\n          onDragStart?.()\n        }}\n        onImageLoadComplete={onImageLoadComplete}\n        onImageLoadError={onImageLoadError}\n        onImageLoadStart={onImageLoadStart}\n        onImageSizeChange={size => setImageSize(size)}\n        onPositionChange={onPositionChange}\n        speed={speed}\n        src={src}\n        style={{ height: '100%', width: '100%' }}\n        zeroAnchor={adjustedZeroAnchor}\n      />\n      <StyledTrackContainer>\n        <div>\n          <StyledTrack className={classNames({ dragging: isDragging })} css={cssTrack}/>\n          <StyledReticle className={classNames({ dragging: isDragging })} css={cssReticle} style={{ width: `${reticleWidth}px` }}/>\n          <StyledTrack className={classNames({ dragging: isDragging })} css={cssTrack}/>\n        </div>\n      </StyledTrackContainer>\n      <StyledIndicator className={classNames({ dragging: isDragging })} style={{ width: `${reticleWidth}px` }} css={cssIndicator}/>\n    </StyledRoot>\n  )\n}\n\nconst StyledReticle = styled.div`\n  background: rgba(0, 0, 0, .3);\n  flex: 0 0 auto;\n  height: 100%;\n  transition-duration: 100ms;\n  transition-property: background;\n  transition-timing-function: ease-out;\n\n  &.dragging {\n    background: rgba(0, 0, 0, 0);\n  }\n\n  ${props => props.css}\n  `\n\nconst StyledTrack = styled.div`\n  background: rgba(0, 0, 0, .7);\n  display: block;\n  flex: 1 0 auto;\n  height: 100%;\n  pointer-events: none;\n\n  ${props => props.css}\n`\n\nconst StyledTrackContainer = styled.div`\n  box-sizing: border-box;\n  display: block;\n  height: 100%;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  width: 100%;\n\n  > div {\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: flex-start;\n    left: 0;\n    overflow: visible;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n`\n\nconst StyledIndicator = styled.div`\n  background: #fff;\n  border-radius: 2px;\n  bottom: -10px;\n  box-sizing: border-box;\n  display: block;\n  height: 2px;\n  left: 0;\n  margin: 0 auto;\n  opacity: 0;\n  right: 0;\n  transition: opacity .3s ease-out;\n\n  &.dragging {\n    opacity: 1;\n  }\n\n  ${props => props.css}\n`\n\nconst StyledPanorama = styled(Panorama)`\n  ${(props: any) => props.css}\n`\n\nconst StyledRoot = styled.div`\n  box-sizing: border-box;\n  display: block;\n  flex: 0 0 auto;\n  height: 100%;\n  width: 100%;\n`\n"]}

package/lib/RangeSlider.d.ts

@@ -9,7 +9,6 @@ export declare type KnobCSSProps = Readonly<{
     isReleasing: boolean;
     isDisabled: boolean;
 }>;
-export declare type GutterCSSProps = Readonly<{}>;
 export declare type LabelCSSProps = Readonly<{
     knobRadius: number;
     orientation: Orientation;

package/lib/RangeSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.js","sourceRoot":"/","sources":["RangeSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import interact from 'interactjs'\nimport React, { createRef, CSSProperties, PureComponent } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css } from 'styled-components'\nimport { ExtendedCSSFunction, ExtendedCSSProps, Orientation, Range } from './types'\n\nexport type KnobCSSProps = Readonly<{\n  radius: number\n  tintColor: string\n  hitboxPadding: number\n  isDragging: boolean\n  isReleasing: boolean\n  isDisabled: boolean\n}>\n\nexport type GutterCSSProps = Readonly<{\n}>\n\nexport type LabelCSSProps = Readonly<{\n  knobRadius: number\n  orientation: Orientation\n  isDragging: boolean\n  isReleasing: boolean\n}>\n\nexport type HighlightCSSProps = Readonly<{\n  tintColor: string\n  isDragging: boolean\n  isReleasing: boolean\n}>\n\nexport interface Props {\n  className?: string\n  style: CSSProperties\n  defaultRange?: Range\n  areLabelsVisible: boolean\n  decimalPlaces: number\n  hitboxPadding: number\n  knobRadius: number\n  max: number\n  min: number\n  steps: number\n  orientation: Orientation\n  tintColor: string\n  onRangeChange: (range: Range) => void\n  cssKnob: ExtendedCSSFunction<KnobCSSProps>\n  cssHighlight: ExtendedCSSFunction<HighlightCSSProps>\n  cssLabel: ExtendedCSSFunction<LabelCSSProps>\n  cssGutter: ExtendedCSSFunction\n}\n\nexport interface State {\n  range: Range\n  isDraggingStartingKnob: boolean\n  isReleasingStartingKnob: boolean\n  isDraggingEndingKnob: boolean\n  isReleasingEndingKnob: boolean\n}\n\nexport default class RangeSlider extends PureComponent<Props, State> {\n  static defaultProps = {\n    style: {},\n    areLabelsVisible: true,\n    decimalPlaces: 2,\n    hitboxPadding: 20,\n    knobRadius: 10,\n    steps: -1,\n    tintColor: '#fff',\n    orientation: 'vertical',\n    onRangeChange: () => {},\n    cssGutter: () => css``,\n    cssHighlight: () => css``,\n    cssKnob: () => css``,\n    cssLabel: () => css``,\n  }\n\n  nodeRefs = {\n    root: createRef<HTMLDivElement>(),\n    knobA: createRef<HTMLDivElement>(),\n    knobB: createRef<HTMLDivElement>(),\n  }\n\n  constructor(props: Props) {\n    super(props)\n\n    this.state = {\n      range: props.defaultRange ?? [props.min, props.max],\n      isDraggingStartingKnob: false,\n      isReleasingStartingKnob: false,\n      isDraggingEndingKnob: false,\n      isReleasingEndingKnob: false,\n    }\n  }\n\n  get rect(): Rect {\n    return Rect.from(this.nodeRefs.root.current) ?? new Rect()\n  }\n\n  get highlightLength(): number {\n    const [valA, valB] = this.state.range\n    const a = this.getDisplacementByValue(valA)\n    const b = this.getDisplacementByValue(valB)\n    return (b - a)\n  }\n\n  get breakpoints(): readonly number[] {\n    const { min, max, steps } = this.props\n    const breakpoints = [min]\n\n    for (let i = 0; i < steps; i++) {\n      breakpoints.push(min + (i + 1) * (max - min) / (1 + steps))\n    }\n\n    breakpoints.push(max)\n\n    return breakpoints\n  }\n\n  componentDidMount() {\n    this.reconfigureInteractivityIfNeeded()\n\n    if (this.props.steps < 0) {\n      this.props.onRangeChange(this.state.range)\n    }\n    else {\n      this.snapToClosestBreakpoint()\n    }\n\n    this.forceUpdate()\n  }\n\n  componentDidUpdate(prevProps: Props, prevState: State) {\n    if (!this.areRangesEqual(prevState.range, this.state.range)) {\n      this.props.onRangeChange(this.state.range)\n    }\n\n    if (prevProps.orientation !== this.props.orientation) {\n      this.forceUpdate()\n    }\n\n    this.reconfigureInteractivityIfNeeded()\n  }\n\n  render() {\n    return (\n      <StyledRoot\n        className={this.props.className}\n        orientation={this.props.orientation}\n        ref={this.nodeRefs.root}\n        style={this.props.style}\n      >\n        <StyledGutter\n          extendedCSS={this.props.cssGutter}\n        />\n        <StyledKnob\n          ref={this.nodeRefs.knobA}\n          radius={this.props.knobRadius}\n          tintColor={this.props.tintColor}\n          hitboxPadding={this.props.hitboxPadding}\n          isDragging={this.state.isDraggingStartingKnob}\n          isReleasing={this.state.isReleasingStartingKnob}\n          isDisabled={(this.state.range[1] === this.props.min) && (this.state.range[0] === this.props.min)}\n          style={this.props.orientation === 'horizontal' ? {\n            marginLeft: `${this.getDisplacementByValue(this.state.range[0])}px`,\n          } : {\n            marginTop: `${this.getDisplacementByValue(this.state.range[0])}px`,\n          }}\n          extendedCSS={this.props.cssKnob}\n        />\n        {this.props.areLabelsVisible && (\n          <StyledLabel\n            knobRadius={this.props.knobRadius}\n            orientation={this.props.orientation}\n            isDragging={this.state.isDraggingStartingKnob}\n            isReleasing={this.state.isReleasingStartingKnob}\n            style={this.props.orientation === 'horizontal' ? {\n              transform: `translate3d(calc(-50% + ${this.getDisplacementByValue(this.state.range[0])}px), 0, 0)`,\n            } : {\n              transform: `translate3d(0, calc(-50% + ${this.getDisplacementByValue(this.state.range[0])}px), 0)`,\n            }}\n            extendedCSS={this.props.cssLabel}\n          >\n            {Number(this.state.range[0].toFixed(this.props.decimalPlaces)).toLocaleString()}\n          </StyledLabel>\n        )}\n        <StyledHighlight\n          tintColor={this.props.tintColor}\n          isDragging={this.state.isDraggingStartingKnob || this.state.isDraggingEndingKnob}\n          isReleasing={this.state.isReleasingStartingKnob || this.state.isReleasingEndingKnob}\n          style={this.props.orientation === 'horizontal' ? {\n            width: `${this.highlightLength}px`,\n            transform: `translate3d(${this.getDisplacementByValue(this.state.range[0])}px, 0, 0)`,\n          } : {\n            height: `${this.highlightLength}px`,\n            transform: `translate3d(0, ${this.getDisplacementByValue(this.state.range[0])}px, 0)`,\n          }}\n          extendedCSS={this.props.cssHighlight}\n        />\n        <StyledKnob\n          ref={this.nodeRefs.knobB}\n          radius={this.props.knobRadius}\n          tintColor={this.props.tintColor}\n          hitboxPadding={this.props.hitboxPadding}\n          isDragging={this.state.isDraggingEndingKnob}\n          isReleasing={this.state.isReleasingEndingKnob}\n          isDisabled={(this.state.range[1] === this.props.max) && (this.state.range[0] === this.props.max)}\n          style={this.props.orientation === 'horizontal' ? {\n            marginLeft: `${this.getDisplacementByValue(this.state.range[1])}px`,\n          } : {\n            marginTop: `${this.getDisplacementByValue(this.state.range[1])}px`,\n          }}\n          extendedCSS={this.props.cssKnob}\n        />\n        {this.props.areLabelsVisible && (\n          <StyledLabel\n            knobRadius={this.props.knobRadius}\n            orientation={this.props.orientation}\n            isDragging={this.state.isDraggingStartingKnob || this.state.isDraggingEndingKnob}\n            isReleasing={this.state.isReleasingStartingKnob || this.state.isReleasingEndingKnob}\n            style={this.props.orientation === 'horizontal' ? {\n              transform: `translate3d(calc(-50% + ${this.getDisplacementByValue(this.state.range[1])}px), 0, 0)`,\n            } : {\n              transform: `translate3d(0, calc(-50% + ${this.getDisplacementByValue(this.state.range[1])}px), 0)`,\n            }}\n            extendedCSS={this.props.cssLabel}\n          >\n            {Number(this.state.range[1].toFixed(this.props.decimalPlaces)).toLocaleString()}\n          </StyledLabel>\n        )}\n      </StyledRoot>\n    )\n  }\n\n  private reconfigureInteractivityIfNeeded() {\n    const knobANode = this.nodeRefs.knobA.current\n    const knobBNode = this.nodeRefs.knobB.current\n\n    if (knobANode && !interact.isSet(knobANode)) {\n      interact(knobANode).draggable({\n        inertia: true,\n        onstart: () => this.onKnobADragStart(),\n        onmove: ({ dx, dy }) => this.onKnobADragMove(this.props.orientation === 'horizontal' ? dx : dy),\n        onend: () => this.onKnobADragEnd(),\n      })\n    }\n\n    if (knobBNode && !interact.isSet(knobBNode)) {\n      interact(knobBNode).draggable({\n        inertia: true,\n        onstart: () => this.onKnobBDragStart(),\n        onmove: ({ dx, dy }) => this.onKnobBDragMove(this.props.orientation === 'horizontal' ? dx : dy),\n        onend: () => this.onKnobBDragEnd(),\n      })\n    }\n  }\n\n  private snapToClosestBreakpoint() {\n    if (this.props.steps < 0) return\n\n    this.setState({\n      range: [this.getClosestSteppedValueOfValue(this.state.range[0]), this.getClosestSteppedValueOfValue(this.state.range[1])],\n    })\n  }\n\n  private areRangesEqual(range1: Range, range2: Range): boolean {\n    if (!range1) return false\n    if (!range2) return false\n    if (range1[0] !== range2[0]) return false\n    if (range1[1] !== range2[1]) return false\n    return true\n  }\n\n  private getPositionByValue(value: number): number {\n    const { min, max } = this.props\n    return (value - min) / (max - min)\n  }\n\n  private getDisplacementByPosition(position: number): number {\n    if (this.props.orientation === 'horizontal') {\n      return position * this.rect.width\n    }\n    else {\n      return position * this.rect.height\n    }\n  }\n\n  private getDisplacementByValue(value: number): number {\n    const position = this.getPositionByValue(value)\n    return this.getDisplacementByPosition(position)\n  }\n\n  private getPositionByDisplacement(displacement: number): number {\n    if (this.props.orientation === 'horizontal') {\n      return displacement / this.rect.width\n    }\n    else {\n      return displacement / this.rect.height\n    }\n  }\n\n  private getValueByPosition(position: number): number {\n    const { min, max } = this.props\n    return (position * (max - min)) + min\n  }\n\n  private getClosestSteppedValueOfValue(value: number): number {\n    const breakpoints = this.breakpoints\n    const n = breakpoints.length\n    let idx = 0\n    let diff = Infinity\n\n    for (let i = 0; i < n; i++) {\n      const t = breakpoints[i]\n      const d = Math.abs(value - t)\n\n      if (d < diff) {\n        diff = d\n        idx = i\n      }\n    }\n\n    return breakpoints[idx]\n  }\n\n  private onKnobADragStart() {\n    this.setState({\n      isDraggingStartingKnob: true,\n      isReleasingStartingKnob: false,\n      isDraggingEndingKnob: false,\n      isReleasingEndingKnob: false,\n    })\n  }\n\n  private onKnobADragEnd() {\n    this.setState({\n      isDraggingStartingKnob: false,\n      isReleasingStartingKnob: true,\n      isDraggingEndingKnob: false,\n      isReleasingEndingKnob: false,\n    })\n\n    this.snapToClosestBreakpoint()\n  }\n\n  private onKnobADragMove(delta: number) {\n    const [valA, valB] = this.state.range\n    const min = this.getDisplacementByValue(this.props.min)\n    const max = this.getDisplacementByValue(valB)\n    const curr = this.getDisplacementByValue(valA)\n    const next = Math.max(min, Math.min(max, curr + delta))\n    const nextPos = this.getPositionByDisplacement(next)\n    const nextVal = this.getValueByPosition(nextPos)\n\n    this.setState({\n      isDraggingStartingKnob: true,\n      isReleasingStartingKnob: false,\n      isDraggingEndingKnob: false,\n      isReleasingEndingKnob: false,\n      range: [nextVal, valB],\n    })\n  }\n\n  private onKnobBDragStart() {\n    this.setState({\n      isDraggingStartingKnob: false,\n      isReleasingStartingKnob: false,\n      isDraggingEndingKnob: true,\n      isReleasingEndingKnob: false,\n    })\n  }\n\n  private onKnobBDragEnd() {\n    this.setState({\n      isDraggingStartingKnob: false,\n      isReleasingStartingKnob: false,\n      isDraggingEndingKnob: false,\n      isReleasingEndingKnob: true,\n    })\n\n    this.snapToClosestBreakpoint()\n  }\n\n  private onKnobBDragMove(delta: number) {\n    const [valA, valB] = this.state.range\n    const min = this.getDisplacementByValue(valA)\n    const max = this.getDisplacementByValue(this.props.max)\n    const curr = this.getDisplacementByValue(valB)\n    const next = Math.max(min, Math.min(max, curr + delta))\n    const nextPos = this.getPositionByDisplacement(next)\n    const nextVal = this.getValueByPosition(nextPos)\n\n    this.setState({\n      isDraggingStartingKnob: false,\n      isReleasingStartingKnob: false,\n      isDraggingEndingKnob: true,\n      isReleasingEndingKnob: false,\n      range: [valA, nextVal],\n    })\n  }\n}\n\nconst StyledHighlight = styled.div<HighlightCSSProps & ExtendedCSSProps<HighlightCSSProps>>`\n  top: 0;\n  left: 0;\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  background: ${props => props.tintColor};\n  transition-property: ${props => props.isReleasing ? 'opacity, width, transform' : 'opacity'};\n  transition-duration: 100ms;\n  transition-timing-function: ease-out;\n  will-change: opacity, width, transform;\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledLabel = styled.span<LabelCSSProps & ExtendedCSSProps<LabelCSSProps>>`\n  background: transparent;\n  color: #fff;\n  left: ${props => props.orientation === 'horizontal' ? '0' : `${props.knobRadius}px`};\n  padding: 10px;\n  pointer-events: none;\n  position: absolute;\n  text-align: center;\n  top: ${props => props.orientation === 'horizontal' ? `${props.knobRadius}px` : '0'};\n  transition-duration: 100ms;\n  transition-property: ${props => props.isReleasing ? 'opacity, transform' : 'opacity'};\n  transition-timing-function: ease-out;\n  user-select: none;\n  will-change: opacity, transform;\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledKnob = styled.div<KnobCSSProps & ExtendedCSSProps<KnobCSSProps>>`\n  background: transparent;\n  box-sizing: border-box;\n  display: block;\n  height: ${props => (props.radius + props.hitboxPadding) * 2}px;\n  left: ${props => -props.radius - props.hitboxPadding}px;\n  padding: ${props => props.hitboxPadding}px;\n  pointer-events: ${props => props.isDisabled ? 'none' : 'auto'};\n  position: absolute;\n  top: ${props => -props.radius - props.hitboxPadding}px;\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: ${props => props.isReleasing ? 'background, opacity, margin, transform' : 'background, opacity, transform'};\n  transition-timing-function: ease-out;\n  width: ${props => (props.radius + props.hitboxPadding) * 2}px;\n  will-change: opacity, transform, margin, background;\n  z-index: 1;\n\n  &::after {\n    content: '';\n    border-radius: 100%;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    margin: auto;\n    position: absolute;\n    width: ${props => props.radius * 2}px;\n    height: ${props => props.radius * 2}px;\n    background: ${props => props.tintColor};\n  }\n\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledGutter = styled.div<GutterCSSProps & ExtendedCSSProps<GutterCSSProps>>`\n  display: block;\n  top: 0;\n  left: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background: rgba(255, 255, 255, .2);\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledRoot = styled.div<{\n  orientation: Orientation\n}>`\n  display: flex;\n  flex: 0 0 auto;\n  height: ${props => props.orientation === 'horizontal' ? '2px' : '300px'};\n  position: relative;\n  width: ${props => props.orientation === 'horizontal' ? '300px' : '2px'};\n`\n"]}
+{"version":3,"file":"RangeSlider.js","sourceRoot":"/","sources":["RangeSlider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAiC;AACjC,6CAAsE;AACtE,+BAA4B;AAC5B,qEAA+C;AAqD/C;IAAyC,+BAA2B;IAuBlE,qBAAY,KAAY;;QAAxB,YACE,kBAAM,KAAK,CAAC,SASb;QAhBD,cAAQ,GAAG;YACT,IAAI,EAAE,IAAA,iBAAS,GAAkB;YACjC,KAAK,EAAE,IAAA,iBAAS,GAAkB;YAClC,KAAK,EAAE,IAAA,iBAAS,GAAkB;SACnC,CAAA;QAKC,KAAI,CAAC,KAAK,GAAG;YACX,KAAK,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC;YACnD,sBAAsB,EAAE,KAAK;YAC7B,uBAAuB,EAAE,KAAK;YAC9B,oBAAoB,EAAE,KAAK;YAC3B,qBAAqB,EAAE,KAAK;SAC7B,CAAA;;IACH,CAAC;IAED,sBAAI,6BAAI;aAAR;;YACE,OAAO,MAAA,YAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,mCAAI,IAAI,YAAI,EAAE,CAAA;QAC5D,CAAC;;;OAAA;IAED,sBAAI,wCAAe;aAAnB;YACQ,IAAA,KAAA,OAAe,IAAI,CAAC,KAAK,CAAC,KAAK,IAAA,EAA9B,IAAI,QAAA,EAAE,IAAI,QAAoB,CAAA;YACrC,IAAM,CAAC,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAA;YAC3C,IAAM,CAAC,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAA;YAC3C,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;QAChB,CAAC;;;OAAA;IAED,sBAAI,oCAAW;aAAf;YACQ,IAAA,KAAsB,IAAI,CAAC,KAAK,EAA9B,GAAG,SAAA,EAAE,GAAG,SAAA,EAAE,KAAK,WAAe,CAAA;YACtC,IAAM,WAAW,GAAG,CAAC,GAAG,CAAC,CAAA;YAEzB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE;gBAC9B,WAAW,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAA;aAC5D;YAED,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;YAErB,OAAO,WAAW,CAAA;QACpB,CAAC;;;OAAA;IAED,uCAAiB,GAAjB;QACE,IAAI,CAAC,gCAAgC,EAAE,CAAA;QAEvC,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,EAAE;YACxB,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;SAC3C;aACI;YACH,IAAI,CAAC,uBAAuB,EAAE,CAAA;SAC/B;QAED,IAAI,CAAC,WAAW,EAAE,CAAA;IACpB,CAAC;IAED,wCAAkB,GAAlB,UAAmB,SAAgB,EAAE,SAAgB;QACnD,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;YAC3D,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;SAC3C;QAED,IAAI,SAAS,CAAC,WAAW,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE;YACpD,IAAI,CAAC,WAAW,EAAE,CAAA;SACnB;QAED,IAAI,CAAC,gCAAgC,EAAE,CAAA;IACzC,CAAC;IAED,4BAAM,GAAN;QACE,OAAO,CACL,8BAAC,UAAU,IACT,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EACnC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAEvB,8BAAC,YAAY,IACX,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,GACjC;YACF,8BAAC,UAAU,IACT,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,EACxB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAC7B,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EACvC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,sBAAsB,EAC7C,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,uBAAuB,EAC/C,UAAU,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAChG,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC;oBAC/C,UAAU,EAAE,UAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAI;iBACpE,CAAC,CAAC,CAAC;oBACF,SAAS,EAAE,UAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAI;iBACnE,EACD,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAC/B;YACD,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,CAC9B,8BAAC,WAAW,IACV,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EACjC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EACnC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,sBAAsB,EAC7C,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,uBAAuB,EAC/C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC;oBAC/C,SAAS,EAAE,kCAA2B,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,eAAY;iBACnG,CAAC,CAAC,CAAC;oBACF,SAAS,EAAE,qCAA8B,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,YAAS;iBACnG,EACD,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,IAE/B,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,EAAE,CACnE,CACf;YACD,8BAAC,eAAe,IACd,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,sBAAsB,IAAI,IAAI,CAAC,KAAK,CAAC,oBAAoB,EAChF,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,uBAAuB,IAAI,IAAI,CAAC,KAAK,CAAC,qBAAqB,EACnF,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC;oBAC/C,KAAK,EAAE,UAAG,IAAI,CAAC,eAAe,OAAI;oBAClC,SAAS,EAAE,sBAAe,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,cAAW;iBACtF,CAAC,CAAC,CAAC;oBACF,MAAM,EAAE,UAAG,IAAI,CAAC,eAAe,OAAI;oBACnC,SAAS,EAAE,yBAAkB,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAQ;iBACtF,EACD,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,GACpC;YACF,8BAAC,UAAU,IACT,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,EACxB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAC7B,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EACvC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,oBAAoB,EAC3C,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,qBAAqB,EAC7C,UAAU,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAChG,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC;oBAC/C,UAAU,EAAE,UAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAI;iBACpE,CAAC,CAAC,CAAC;oBACF,SAAS,EAAE,UAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAI;iBACnE,EACD,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAC/B;YACD,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,CAC9B,8BAAC,WAAW,IACV,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EACjC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EACnC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,sBAAsB,IAAI,IAAI,CAAC,KAAK,CAAC,oBAAoB,EAChF,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,uBAAuB,IAAI,IAAI,CAAC,KAAK,CAAC,qBAAqB,EACnF,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC;oBAC/C,SAAS,EAAE,kCAA2B,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,eAAY;iBACnG,CAAC,CAAC,CAAC;oBACF,SAAS,EAAE,qCAA8B,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,YAAS;iBACnG,EACD,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,IAE/B,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,EAAE,CACnE,CACf,CACU,CACd,CAAA;IACH,CAAC;IAEO,sDAAgC,GAAxC;QAAA,iBAqBC;QApBC,IAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAA;QAC7C,IAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAA;QAE7C,IAAI,SAAS,IAAI,CAAC,oBAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE;YAC3C,IAAA,oBAAQ,EAAC,SAAS,CAAC,CAAC,SAAS,CAAC;gBAC5B,OAAO,EAAE,IAAI;gBACb,OAAO,EAAE,cAAM,OAAA,KAAI,CAAC,gBAAgB,EAAE,EAAvB,CAAuB;gBACtC,MAAM,EAAE,UAAC,EAAU;wBAAR,EAAE,QAAA,EAAE,EAAE,QAAA;oBAAO,OAAA,KAAI,CAAC,eAAe,CAAC,KAAI,CAAC,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;gBAAvE,CAAuE;gBAC/F,KAAK,EAAE,cAAM,OAAA,KAAI,CAAC,cAAc,EAAE,EAArB,CAAqB;aACnC,CAAC,CAAA;SACH;QAED,IAAI,SAAS,IAAI,CAAC,oBAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE;YAC3C,IAAA,oBAAQ,EAAC,SAAS,CAAC,CAAC,SAAS,CAAC;gBAC5B,OAAO,EAAE,IAAI;gBACb,OAAO,EAAE,cAAM,OAAA,KAAI,CAAC,gBAAgB,EAAE,EAAvB,CAAuB;gBACtC,MAAM,EAAE,UAAC,EAAU;wBAAR,EAAE,QAAA,EAAE,EAAE,QAAA;oBAAO,OAAA,KAAI,CAAC,eAAe,CAAC,KAAI,CAAC,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;gBAAvE,CAAuE;gBAC/F,KAAK,EAAE,cAAM,OAAA,KAAI,CAAC,cAAc,EAAE,EAArB,CAAqB;aACnC,CAAC,CAAA;SACH;IACH,CAAC;IAEO,6CAAuB,GAA/B;QACE,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC;YAAE,OAAM;QAEhC,IAAI,CAAC,QAAQ,CAAC;YACZ,KAAK,EAAE,CAAC,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;SAC1H,CAAC,CAAA;IACJ,CAAC;IAEO,oCAAc,GAAtB,UAAuB,MAAa,EAAE,MAAa;QACjD,IAAI,CAAC,MAAM;YAAE,OAAO,KAAK,CAAA;QACzB,IAAI,CAAC,MAAM;YAAE,OAAO,KAAK,CAAA;QACzB,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC;YAAE,OAAO,KAAK,CAAA;QACzC,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC;YAAE,OAAO,KAAK,CAAA;QACzC,OAAO,IAAI,CAAA;IACb,CAAC;IAEO,wCAAkB,GAA1B,UAA2B,KAAa;QAChC,IAAA,KAAe,IAAI,CAAC,KAAK,EAAvB,GAAG,SAAA,EAAE,GAAG,SAAe,CAAA;QAC/B,OAAO,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAA;IACpC,CAAC;IAEO,+CAAyB,GAAjC,UAAkC,QAAgB;QAChD,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,YAAY,EAAE;YAC3C,OAAO,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAA;SAClC;aACI;YACH,OAAO,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAA;SACnC;IACH,CAAC;IAEO,4CAAsB,GAA9B,UAA+B,KAAa;QAC1C,IAAM,QAAQ,GAAG,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAA;QAC/C,OAAO,IAAI,CAAC,yBAAyB,CAAC,QAAQ,CAAC,CAAA;IACjD,CAAC;IAEO,+CAAyB,GAAjC,UAAkC,YAAoB;QACpD,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,YAAY,EAAE;YAC3C,OAAO,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAA;SACtC;aACI;YACH,OAAO,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAA;SACvC;IACH,CAAC;IAEO,wCAAkB,GAA1B,UAA2B,QAAgB;QACnC,IAAA,KAAe,IAAI,CAAC,KAAK,EAAvB,GAAG,SAAA,EAAE,GAAG,SAAe,CAAA;QAC/B,OAAO,CAAC,QAAQ,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAA;IACvC,CAAC;IAEO,mDAA6B,GAArC,UAAsC,KAAa;QACjD,IAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAA;QACpC,IAAM,CAAC,GAAG,WAAW,CAAC,MAAM,CAAA;QAC5B,IAAI,GAAG,GAAG,CAAC,CAAA;QACX,IAAI,IAAI,GAAG,QAAQ,CAAA;QAEnB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;YAC1B,IAAM,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAAA;YACxB,IAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAA;YAE7B,IAAI,CAAC,GAAG,IAAI,EAAE;gBACZ,IAAI,GAAG,CAAC,CAAA;gBACR,GAAG,GAAG,CAAC,CAAA;aACR;SACF;QAED,OAAO,WAAW,CAAC,GAAG,CAAC,CAAA;IACzB,CAAC;IAEO,sCAAgB,GAAxB;QACE,IAAI,CAAC,QAAQ,CAAC;YACZ,sBAAsB,EAAE,IAAI;YAC5B,uBAAuB,EAAE,KAAK;YAC9B,oBAAoB,EAAE,KAAK;YAC3B,qBAAqB,EAAE,KAAK;SAC7B,CAAC,CAAA;IACJ,CAAC;IAEO,oCAAc,GAAtB;QACE,IAAI,CAAC,QAAQ,CAAC;YACZ,sBAAsB,EAAE,KAAK;YAC7B,uBAAuB,EAAE,IAAI;YAC7B,oBAAoB,EAAE,KAAK;YAC3B,qBAAqB,EAAE,KAAK;SAC7B,CAAC,CAAA;QAEF,IAAI,CAAC,uBAAuB,EAAE,CAAA;IAChC,CAAC;IAEO,qCAAe,GAAvB,UAAwB,KAAa;QAC7B,IAAA,KAAA,OAAe,IAAI,CAAC,KAAK,CAAC,KAAK,IAAA,EAA9B,IAAI,QAAA,EAAE,IAAI,QAAoB,CAAA;QACrC,IAAM,GAAG,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QACvD,IAAM,GAAG,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAA;QAC7C,IAAM,IAAI,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAA;QAC9C,IAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,GAAG,KAAK,CAAC,CAAC,CAAA;QACvD,IAAM,OAAO,GAAG,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAA;QACpD,IAAM,OAAO,GAAG,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAA;QAEhD,IAAI,CAAC,QAAQ,CAAC;YACZ,sBAAsB,EAAE,IAAI;YAC5B,uBAAuB,EAAE,KAAK;YAC9B,oBAAoB,EAAE,KAAK;YAC3B,qBAAqB,EAAE,KAAK;YAC5B,KAAK,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC;SACvB,CAAC,CAAA;IACJ,CAAC;IAEO,sCAAgB,GAAxB;QACE,IAAI,CAAC,QAAQ,CAAC;YACZ,sBAAsB,EAAE,KAAK;YAC7B,uBAAuB,EAAE,KAAK;YAC9B,oBAAoB,EAAE,IAAI;YAC1B,qBAAqB,EAAE,KAAK;SAC7B,CAAC,CAAA;IACJ,CAAC;IAEO,oCAAc,GAAtB;QACE,IAAI,CAAC,QAAQ,CAAC;YACZ,sBAAsB,EAAE,KAAK;YAC7B,uBAAuB,EAAE,KAAK;YAC9B,oBAAoB,EAAE,KAAK;YAC3B,qBAAqB,EAAE,IAAI;SAC5B,CAAC,CAAA;QAEF,IAAI,CAAC,uBAAuB,EAAE,CAAA;IAChC,CAAC;IAEO,qCAAe,GAAvB,UAAwB,KAAa;QAC7B,IAAA,KAAA,OAAe,IAAI,CAAC,KAAK,CAAC,KAAK,IAAA,EAA9B,IAAI,QAAA,EAAE,IAAI,QAAoB,CAAA;QACrC,IAAM,GAAG,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAA;QAC7C,IAAM,GAAG,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QACvD,IAAM,IAAI,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAAA;QAC9C,IAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,GAAG,KAAK,CAAC,CAAC,CAAA;QACvD,IAAM,OAAO,GAAG,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAA;QACpD,IAAM,OAAO,GAAG,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAA;QAEhD,IAAI,CAAC,QAAQ,CAAC;YACZ,sBAAsB,EAAE,KAAK;YAC7B,uBAAuB,EAAE,KAAK;YAC9B,oBAAoB,EAAE,IAAI;YAC1B,qBAAqB,EAAE,KAAK;YAC5B,KAAK,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC;SACvB,CAAC,CAAA;IACJ,CAAC;IAlVM,wBAAY,GAAG;QACpB,KAAK,EAAE,EAAE;QACT,gBAAgB,EAAE,IAAI;QACtB,aAAa,EAAE,CAAC;QAChB,aAAa,EAAE,EAAE;QACjB,UAAU,EAAE,EAAE;QACd,KAAK,EAAE,CAAC,CAAC;QACT,SAAS,EAAE,MAAM;QACjB,WAAW,EAAE,UAAU;QACvB,aAAa,EAAE,cAAO,CAAC;QACvB,SAAS,EAAE,cAAM,WAAA,uBAAG,sEAAA,EAAE,MAAL,CAAK;QACtB,YAAY,EAAE,cAAM,WAAA,uBAAG,sEAAA,EAAE,MAAL,CAAK;QACzB,OAAO,EAAE,cAAM,WAAA,uBAAG,sEAAA,EAAE,MAAL,CAAK;QACpB,QAAQ,EAAE,cAAM,WAAA,uBAAG,sEAAA,EAAE,MAAL,CAAK;KACtB,CAAA;IAqUH,kBAAC;CAAA,AApVD,CAAyC,qBAAa,GAoVrD;kBApVoB,WAAW;AAsVhC,IAAM,eAAe,GAAG,2BAAM,CAAC,GAAG,oUAAyD,iGAM3E,EAAwB,4BACf,EAAoE,0HAIzF,EAAiC,IACpC,KANe,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,SAAS,EAAf,CAAe,EACf,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,SAAS,EAA3D,CAA2D,EAIzF,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,EAAxB,CAAwB,CACpC,CAAA;AAED,IAAM,WAAW,GAAG,2BAAM,CAAC,IAAI,iZAAiD,wDAGtE,EAA2E,qGAK5E,EAA2E,2DAE3D,EAA6D,0GAIlF,EAAiC,IACpC,KAZS,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,UAAG,KAAK,CAAC,UAAU,OAAI,EAAlE,CAAkE,EAK5E,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,UAAG,KAAK,CAAC,UAAU,OAAI,CAAC,CAAC,CAAC,GAAG,EAAlE,CAAkE,EAE3D,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS,EAApD,CAAoD,EAIlF,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,EAAxB,CAAwB,CACpC,CAAA;AAED,IAAM,UAAU,GAAG,2BAAM,CAAC,GAAG,gtBAA+C,wFAIhE,EAAiD,eACnD,EAA4C,kBACzC,EAA4B,yBACrB,EAA2C,mCAEtD,EAA4C,oFAG5B,EAAwG,uDAEtH,EAAiD,2PAa/C,EAAyB,mBACxB,EAAyB,uBACrB,EAAwB,cAGtC,EAAiC,IACpC,KA7BW,UAAA,KAAK,IAAI,OAAA,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,EAAxC,CAAwC,EACnD,UAAA,KAAK,IAAI,OAAA,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,aAAa,EAAnC,CAAmC,EACzC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,aAAa,EAAnB,CAAmB,EACrB,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAlC,CAAkC,EAEtD,UAAA,KAAK,IAAI,OAAA,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,aAAa,EAAnC,CAAmC,EAG5B,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,wCAAwC,CAAC,CAAC,CAAC,gCAAgC,EAA/F,CAA+F,EAEtH,UAAA,KAAK,IAAI,OAAA,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,EAAxC,CAAwC,EAa/C,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,MAAM,GAAG,CAAC,EAAhB,CAAgB,EACxB,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,MAAM,GAAG,CAAC,EAAhB,CAAgB,EACrB,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,SAAS,EAAf,CAAe,EAGtC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,EAAxB,CAAwB,CACpC,CAAA;AAED,IAAM,YAAY,GAAG,2BAAM,CAAC,GAAG,yNAAuB,gJAQlD,EAAiC,IACpC,KADG,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,EAAxB,CAAwB,CACpC,CAAA;AAED,IAAM,UAAU,GAAG,2BAAM,CAAC,GAAG,oKAE3B,mDAGU,EAA6D,qCAE9D,EAA6D,KACvE,KAHW,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAApD,CAAoD,EAE9D,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAApD,CAAoD,CACvE,CAAA","sourcesContent":["import interact from 'interactjs'\nimport React, { createRef, CSSProperties, PureComponent } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css } from 'styled-components'\nimport { ExtendedCSSFunction, ExtendedCSSProps, Orientation, Range } from './types'\n\nexport type KnobCSSProps = Readonly<{\n  radius: number\n  tintColor: string\n  hitboxPadding: number\n  isDragging: boolean\n  isReleasing: boolean\n  isDisabled: boolean\n}>\n\nexport type LabelCSSProps = Readonly<{\n  knobRadius: number\n  orientation: Orientation\n  isDragging: boolean\n  isReleasing: boolean\n}>\n\nexport type HighlightCSSProps = Readonly<{\n  tintColor: string\n  isDragging: boolean\n  isReleasing: boolean\n}>\n\nexport interface Props {\n  className?: string\n  style: CSSProperties\n  defaultRange?: Range\n  areLabelsVisible: boolean\n  decimalPlaces: number\n  hitboxPadding: number\n  knobRadius: number\n  max: number\n  min: number\n  steps: number\n  orientation: Orientation\n  tintColor: string\n  onRangeChange: (range: Range) => void\n  cssKnob: ExtendedCSSFunction<KnobCSSProps>\n  cssHighlight: ExtendedCSSFunction<HighlightCSSProps>\n  cssLabel: ExtendedCSSFunction<LabelCSSProps>\n  cssGutter: ExtendedCSSFunction\n}\n\nexport interface State {\n  range: Range\n  isDraggingStartingKnob: boolean\n  isReleasingStartingKnob: boolean\n  isDraggingEndingKnob: boolean\n  isReleasingEndingKnob: boolean\n}\n\nexport default class RangeSlider extends PureComponent<Props, State> {\n  static defaultProps = {\n    style: {},\n    areLabelsVisible: true,\n    decimalPlaces: 2,\n    hitboxPadding: 20,\n    knobRadius: 10,\n    steps: -1,\n    tintColor: '#fff',\n    orientation: 'vertical',\n    onRangeChange: () => {},\n    cssGutter: () => css``,\n    cssHighlight: () => css``,\n    cssKnob: () => css``,\n    cssLabel: () => css``,\n  }\n\n  nodeRefs = {\n    root: createRef<HTMLDivElement>(),\n    knobA: createRef<HTMLDivElement>(),\n    knobB: createRef<HTMLDivElement>(),\n  }\n\n  constructor(props: Props) {\n    super(props)\n\n    this.state = {\n      range: props.defaultRange ?? [props.min, props.max],\n      isDraggingStartingKnob: false,\n      isReleasingStartingKnob: false,\n      isDraggingEndingKnob: false,\n      isReleasingEndingKnob: false,\n    }\n  }\n\n  get rect(): Rect {\n    return Rect.from(this.nodeRefs.root.current) ?? new Rect()\n  }\n\n  get highlightLength(): number {\n    const [valA, valB] = this.state.range\n    const a = this.getDisplacementByValue(valA)\n    const b = this.getDisplacementByValue(valB)\n    return (b - a)\n  }\n\n  get breakpoints(): readonly number[] {\n    const { min, max, steps } = this.props\n    const breakpoints = [min]\n\n    for (let i = 0; i < steps; i++) {\n      breakpoints.push(min + (i + 1) * (max - min) / (1 + steps))\n    }\n\n    breakpoints.push(max)\n\n    return breakpoints\n  }\n\n  componentDidMount() {\n    this.reconfigureInteractivityIfNeeded()\n\n    if (this.props.steps < 0) {\n      this.props.onRangeChange(this.state.range)\n    }\n    else {\n      this.snapToClosestBreakpoint()\n    }\n\n    this.forceUpdate()\n  }\n\n  componentDidUpdate(prevProps: Props, prevState: State) {\n    if (!this.areRangesEqual(prevState.range, this.state.range)) {\n      this.props.onRangeChange(this.state.range)\n    }\n\n    if (prevProps.orientation !== this.props.orientation) {\n      this.forceUpdate()\n    }\n\n    this.reconfigureInteractivityIfNeeded()\n  }\n\n  render() {\n    return (\n      <StyledRoot\n        className={this.props.className}\n        orientation={this.props.orientation}\n        ref={this.nodeRefs.root}\n        style={this.props.style}\n      >\n        <StyledGutter\n          extendedCSS={this.props.cssGutter}\n        />\n        <StyledKnob\n          ref={this.nodeRefs.knobA}\n          radius={this.props.knobRadius}\n          tintColor={this.props.tintColor}\n          hitboxPadding={this.props.hitboxPadding}\n          isDragging={this.state.isDraggingStartingKnob}\n          isReleasing={this.state.isReleasingStartingKnob}\n          isDisabled={(this.state.range[1] === this.props.min) && (this.state.range[0] === this.props.min)}\n          style={this.props.orientation === 'horizontal' ? {\n            marginLeft: `${this.getDisplacementByValue(this.state.range[0])}px`,\n          } : {\n            marginTop: `${this.getDisplacementByValue(this.state.range[0])}px`,\n          }}\n          extendedCSS={this.props.cssKnob}\n        />\n        {this.props.areLabelsVisible && (\n          <StyledLabel\n            knobRadius={this.props.knobRadius}\n            orientation={this.props.orientation}\n            isDragging={this.state.isDraggingStartingKnob}\n            isReleasing={this.state.isReleasingStartingKnob}\n            style={this.props.orientation === 'horizontal' ? {\n              transform: `translate3d(calc(-50% + ${this.getDisplacementByValue(this.state.range[0])}px), 0, 0)`,\n            } : {\n              transform: `translate3d(0, calc(-50% + ${this.getDisplacementByValue(this.state.range[0])}px), 0)`,\n            }}\n            extendedCSS={this.props.cssLabel}\n          >\n            {Number(this.state.range[0].toFixed(this.props.decimalPlaces)).toLocaleString()}\n          </StyledLabel>\n        )}\n        <StyledHighlight\n          tintColor={this.props.tintColor}\n          isDragging={this.state.isDraggingStartingKnob || this.state.isDraggingEndingKnob}\n          isReleasing={this.state.isReleasingStartingKnob || this.state.isReleasingEndingKnob}\n          style={this.props.orientation === 'horizontal' ? {\n            width: `${this.highlightLength}px`,\n            transform: `translate3d(${this.getDisplacementByValue(this.state.range[0])}px, 0, 0)`,\n          } : {\n            height: `${this.highlightLength}px`,\n            transform: `translate3d(0, ${this.getDisplacementByValue(this.state.range[0])}px, 0)`,\n          }}\n          extendedCSS={this.props.cssHighlight}\n        />\n        <StyledKnob\n          ref={this.nodeRefs.knobB}\n          radius={this.props.knobRadius}\n          tintColor={this.props.tintColor}\n          hitboxPadding={this.props.hitboxPadding}\n          isDragging={this.state.isDraggingEndingKnob}\n          isReleasing={this.state.isReleasingEndingKnob}\n          isDisabled={(this.state.range[1] === this.props.max) && (this.state.range[0] === this.props.max)}\n          style={this.props.orientation === 'horizontal' ? {\n            marginLeft: `${this.getDisplacementByValue(this.state.range[1])}px`,\n          } : {\n            marginTop: `${this.getDisplacementByValue(this.state.range[1])}px`,\n          }}\n          extendedCSS={this.props.cssKnob}\n        />\n        {this.props.areLabelsVisible && (\n          <StyledLabel\n            knobRadius={this.props.knobRadius}\n            orientation={this.props.orientation}\n            isDragging={this.state.isDraggingStartingKnob || this.state.isDraggingEndingKnob}\n            isReleasing={this.state.isReleasingStartingKnob || this.state.isReleasingEndingKnob}\n            style={this.props.orientation === 'horizontal' ? {\n              transform: `translate3d(calc(-50% + ${this.getDisplacementByValue(this.state.range[1])}px), 0, 0)`,\n            } : {\n              transform: `translate3d(0, calc(-50% + ${this.getDisplacementByValue(this.state.range[1])}px), 0)`,\n            }}\n            extendedCSS={this.props.cssLabel}\n          >\n            {Number(this.state.range[1].toFixed(this.props.decimalPlaces)).toLocaleString()}\n          </StyledLabel>\n        )}\n      </StyledRoot>\n    )\n  }\n\n  private reconfigureInteractivityIfNeeded() {\n    const knobANode = this.nodeRefs.knobA.current\n    const knobBNode = this.nodeRefs.knobB.current\n\n    if (knobANode && !interact.isSet(knobANode)) {\n      interact(knobANode).draggable({\n        inertia: true,\n        onstart: () => this.onKnobADragStart(),\n        onmove: ({ dx, dy }) => this.onKnobADragMove(this.props.orientation === 'horizontal' ? dx : dy),\n        onend: () => this.onKnobADragEnd(),\n      })\n    }\n\n    if (knobBNode && !interact.isSet(knobBNode)) {\n      interact(knobBNode).draggable({\n        inertia: true,\n        onstart: () => this.onKnobBDragStart(),\n        onmove: ({ dx, dy }) => this.onKnobBDragMove(this.props.orientation === 'horizontal' ? dx : dy),\n        onend: () => this.onKnobBDragEnd(),\n      })\n    }\n  }\n\n  private snapToClosestBreakpoint() {\n    if (this.props.steps < 0) return\n\n    this.setState({\n      range: [this.getClosestSteppedValueOfValue(this.state.range[0]), this.getClosestSteppedValueOfValue(this.state.range[1])],\n    })\n  }\n\n  private areRangesEqual(range1: Range, range2: Range): boolean {\n    if (!range1) return false\n    if (!range2) return false\n    if (range1[0] !== range2[0]) return false\n    if (range1[1] !== range2[1]) return false\n    return true\n  }\n\n  private getPositionByValue(value: number): number {\n    const { min, max } = this.props\n    return (value - min) / (max - min)\n  }\n\n  private getDisplacementByPosition(position: number): number {\n    if (this.props.orientation === 'horizontal') {\n      return position * this.rect.width\n    }\n    else {\n      return position * this.rect.height\n    }\n  }\n\n  private getDisplacementByValue(value: number): number {\n    const position = this.getPositionByValue(value)\n    return this.getDisplacementByPosition(position)\n  }\n\n  private getPositionByDisplacement(displacement: number): number {\n    if (this.props.orientation === 'horizontal') {\n      return displacement / this.rect.width\n    }\n    else {\n      return displacement / this.rect.height\n    }\n  }\n\n  private getValueByPosition(position: number): number {\n    const { min, max } = this.props\n    return (position * (max - min)) + min\n  }\n\n  private getClosestSteppedValueOfValue(value: number): number {\n    const breakpoints = this.breakpoints\n    const n = breakpoints.length\n    let idx = 0\n    let diff = Infinity\n\n    for (let i = 0; i < n; i++) {\n      const t = breakpoints[i]\n      const d = Math.abs(value - t)\n\n      if (d < diff) {\n        diff = d\n        idx = i\n      }\n    }\n\n    return breakpoints[idx]\n  }\n\n  private onKnobADragStart() {\n    this.setState({\n      isDraggingStartingKnob: true,\n      isReleasingStartingKnob: false,\n      isDraggingEndingKnob: false,\n      isReleasingEndingKnob: false,\n    })\n  }\n\n  private onKnobADragEnd() {\n    this.setState({\n      isDraggingStartingKnob: false,\n      isReleasingStartingKnob: true,\n      isDraggingEndingKnob: false,\n      isReleasingEndingKnob: false,\n    })\n\n    this.snapToClosestBreakpoint()\n  }\n\n  private onKnobADragMove(delta: number) {\n    const [valA, valB] = this.state.range\n    const min = this.getDisplacementByValue(this.props.min)\n    const max = this.getDisplacementByValue(valB)\n    const curr = this.getDisplacementByValue(valA)\n    const next = Math.max(min, Math.min(max, curr + delta))\n    const nextPos = this.getPositionByDisplacement(next)\n    const nextVal = this.getValueByPosition(nextPos)\n\n    this.setState({\n      isDraggingStartingKnob: true,\n      isReleasingStartingKnob: false,\n      isDraggingEndingKnob: false,\n      isReleasingEndingKnob: false,\n      range: [nextVal, valB],\n    })\n  }\n\n  private onKnobBDragStart() {\n    this.setState({\n      isDraggingStartingKnob: false,\n      isReleasingStartingKnob: false,\n      isDraggingEndingKnob: true,\n      isReleasingEndingKnob: false,\n    })\n  }\n\n  private onKnobBDragEnd() {\n    this.setState({\n      isDraggingStartingKnob: false,\n      isReleasingStartingKnob: false,\n      isDraggingEndingKnob: false,\n      isReleasingEndingKnob: true,\n    })\n\n    this.snapToClosestBreakpoint()\n  }\n\n  private onKnobBDragMove(delta: number) {\n    const [valA, valB] = this.state.range\n    const min = this.getDisplacementByValue(valA)\n    const max = this.getDisplacementByValue(this.props.max)\n    const curr = this.getDisplacementByValue(valB)\n    const next = Math.max(min, Math.min(max, curr + delta))\n    const nextPos = this.getPositionByDisplacement(next)\n    const nextVal = this.getValueByPosition(nextPos)\n\n    this.setState({\n      isDraggingStartingKnob: false,\n      isReleasingStartingKnob: false,\n      isDraggingEndingKnob: true,\n      isReleasingEndingKnob: false,\n      range: [valA, nextVal],\n    })\n  }\n}\n\nconst StyledHighlight = styled.div<HighlightCSSProps & ExtendedCSSProps<HighlightCSSProps>>`\n  top: 0;\n  left: 0;\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  background: ${props => props.tintColor};\n  transition-property: ${props => props.isReleasing ? 'opacity, width, transform' : 'opacity'};\n  transition-duration: 100ms;\n  transition-timing-function: ease-out;\n  will-change: opacity, width, transform;\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledLabel = styled.span<LabelCSSProps & ExtendedCSSProps<LabelCSSProps>>`\n  background: transparent;\n  color: #fff;\n  left: ${props => props.orientation === 'horizontal' ? '0' : `${props.knobRadius}px`};\n  padding: 10px;\n  pointer-events: none;\n  position: absolute;\n  text-align: center;\n  top: ${props => props.orientation === 'horizontal' ? `${props.knobRadius}px` : '0'};\n  transition-duration: 100ms;\n  transition-property: ${props => props.isReleasing ? 'opacity, transform' : 'opacity'};\n  transition-timing-function: ease-out;\n  user-select: none;\n  will-change: opacity, transform;\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledKnob = styled.div<KnobCSSProps & ExtendedCSSProps<KnobCSSProps>>`\n  background: transparent;\n  box-sizing: border-box;\n  display: block;\n  height: ${props => (props.radius + props.hitboxPadding) * 2}px;\n  left: ${props => -props.radius - props.hitboxPadding}px;\n  padding: ${props => props.hitboxPadding}px;\n  pointer-events: ${props => props.isDisabled ? 'none' : 'auto'};\n  position: absolute;\n  top: ${props => -props.radius - props.hitboxPadding}px;\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: ${props => props.isReleasing ? 'background, opacity, margin, transform' : 'background, opacity, transform'};\n  transition-timing-function: ease-out;\n  width: ${props => (props.radius + props.hitboxPadding) * 2}px;\n  will-change: opacity, transform, margin, background;\n  z-index: 1;\n\n  &::after {\n    content: '';\n    border-radius: 100%;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    margin: auto;\n    position: absolute;\n    width: ${props => props.radius * 2}px;\n    height: ${props => props.radius * 2}px;\n    background: ${props => props.tintColor};\n  }\n\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledGutter = styled.div<ExtendedCSSProps<any>>`\n  display: block;\n  top: 0;\n  left: 0;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background: rgba(255, 255, 255, .2);\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledRoot = styled.div<{\n  orientation: Orientation\n}>`\n  display: flex;\n  flex: 0 0 auto;\n  height: ${props => props.orientation === 'horizontal' ? '2px' : '300px'};\n  position: relative;\n  width: ${props => props.orientation === 'horizontal' ? '300px' : '2px'};\n`\n"]}

package/lib/RotatingGallery.js

@@ -89,6 +89,6 @@ function RotatingGallery(_a) {
 }
 exports.default = RotatingGallery;
 var StyledImage = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-repeat: no-repeat;\n  background-size: cover;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n\n  ", "\n\n  &.entering {\n    ", "\n  }\n\n  &.entered {\n    ", "\n  }\n\n  &.exiting {\n    ", "\n  }\n\n  &.exited {\n    ", "\n  }\n"], ["\n  background-repeat: no-repeat;\n  background-size: cover;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n\n  ", "\n\n  &.entering {\n    ", "\n  }\n\n  &.entered {\n    ", "\n  }\n\n  &.exiting {\n    ", "\n  }\n\n  &.exited {\n    ", "\n  }\n"])), function (props) { return props.css; }, function (props) { return props.cssEntering; }, function (props) { return props.cssEntered; }, function (props) { return props.cssExiting; }, function (props) { return props.cssExited; });
-var StyledRoot = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var StyledRoot = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  position: relative;\n  width: 100%;\n"], ["\n  height: 100%;\n  position: relative;\n  width: 100%;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 //# sourceMappingURL=RotatingGallery.js.map

package/lib/RotatingGallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"RotatingGallery.js","sourceRoot":"/","sources":["RotatingGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes, useEffect, useState } from 'react'\nimport { Transition } from 'react-transition-group'\nimport styled, { css, CSSProp } from 'styled-components'\nimport useInterval from './hooks/useInterval'\n\ntype Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Current image index. An error is thrown if the index is invalid (must be between 0 and length\n   * of `srcs` - 1, inclusive). This prop supports two-way binding.\n   */\n  index?: number\n\n  /**\n   * An array of image paths.\n   */\n  srcs?: string[]\n\n  /**\n   * The duration of one rotation in milliseconds (how long one image stays before transitioning to\n   * the next). Specifying `NaN` or a negative number will prevent the component from automatically\n   * rotating.\n   */\n  rotationDuration?: number\n\n  /**\n   * The duration of an image transition in milliseconds.\n   */\n  transitionDuration?: number\n\n  /**\n   * The default CSS of the image container.\n   */\n  cssDefault?: CSSProp<any>\n\n  /**\n   * The CSS of the image container (a `<div>` element containing the image) when the image is\n   * entering into view. This CSS lasts for `transitionDuration` milliseconds.\n   */\n  cssEntering?: CSSProp<any>\n\n  /**\n   * The CSS of the image container (a `<div>` element containing the image) after the image has\n   * entered into view.\n   */\n  cssEntered?: CSSProp<any>\n\n  /**\n   * The CSS of the image container (a `<div>` element containing the image) when the image is\n   * exiting out of view. This CSS lasts for `transitionDuration` milliseconds.\n   */\n  cssExiting?: CSSProp<any>\n\n  /**\n   * The CSS of the image container (a `<div>` element containing the image) after the image has\n   * exited out of view.\n   */\n  cssExited?: CSSProp<any>\n\n  /**\n   * Handler invoked when the image index changes.\n   *\n   * @param index - The current image index.\n   */\n  onIndexChange?: (index: number) => void\n}\n\nexport default function RotatingGallery({\n  index: externalIndex = 0,\n  onIndexChange,\n  rotationDuration,\n  transitionDuration = 500,\n  srcs = [],\n  cssDefault = css`\n    transition-property: opacity;\n    transition-timing-function: ease-out;\n  `,\n  cssEntering = css`\n    opacity: 1;\n  `,\n  cssEntered,\n  cssExiting = css`\n    opacity: 0;\n  `,\n  cssExited,\n  ...props\n}: Props) {\n  const [index, setIndex] = useState(externalIndex)\n\n  useInterval(() => {\n    setIndex((index + 1) % srcs.length)\n  }, rotationDuration)\n\n  useEffect(() => {\n    if (externalIndex === index) return\n    setIndex(externalIndex)\n  }, [externalIndex])\n\n  useEffect(() => {\n    onIndexChange?.(index)\n  }, [index])\n\n  return (\n    <StyledRoot {...props}>\n      {srcs.map((src, idx) => (\n        <Transition key={src} in={idx === index} timeout={transitionDuration}>\n          {state => (\n            <StyledImage\n              className={state}\n              css={cssDefault}\n              cssEntering={cssEntering ?? cssEntered}\n              cssEntered={cssEntered ?? cssEntering}\n              cssExiting={cssExiting ?? cssExited}\n              cssExited={cssExited ?? cssExiting}\n              style={{\n                transitionDuration: `${transitionDuration}ms`,\n                backgroundImage: `url(${src})`,\n              }}\n            />\n          )}\n        </Transition>\n      ))}\n    </StyledRoot>\n  )\n}\n\nconst StyledImage = styled.div<{\n  cssEntering: Props['cssEntering']\n  cssEntered: Props['cssEntered']\n  cssExiting: Props['cssExiting']\n  cssExited: Props['cssExited']\n}>`\n  background-repeat: no-repeat;\n  background-size: cover;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n\n  ${props => props.css}\n\n  &.entering {\n    ${props => props.cssEntering}\n  }\n\n  &.entered {\n    ${props => props.cssEntered}\n  }\n\n  &.exiting {\n    ${props => props.cssExiting}\n  }\n\n  &.exited {\n    ${props => props.cssExited}\n  }\n`\n\nconst StyledRoot = styled.div`\n  position: relative;\n`\n"]}
+{"version":3,"file":"RotatingGallery.js","sourceRoot":"/","sources":["RotatingGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes, useEffect, useState } from 'react'\nimport { Transition } from 'react-transition-group'\nimport styled, { css, CSSProp } from 'styled-components'\nimport useInterval from './hooks/useInterval'\n\ntype Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Current image index. An error is thrown if the index is invalid (must be between 0 and length\n   * of `srcs` - 1, inclusive). This prop supports two-way binding.\n   */\n  index?: number\n\n  /**\n   * An array of image paths.\n   */\n  srcs?: string[]\n\n  /**\n   * The duration of one rotation in milliseconds (how long one image stays before transitioning to\n   * the next). Specifying `NaN` or a negative number will prevent the component from automatically\n   * rotating.\n   */\n  rotationDuration?: number\n\n  /**\n   * The duration of an image transition in milliseconds.\n   */\n  transitionDuration?: number\n\n  /**\n   * The default CSS of the image container.\n   */\n  cssDefault?: CSSProp<any>\n\n  /**\n   * The CSS of the image container (a `<div>` element containing the image) when the image is\n   * entering into view. This CSS lasts for `transitionDuration` milliseconds.\n   */\n  cssEntering?: CSSProp<any>\n\n  /**\n   * The CSS of the image container (a `<div>` element containing the image) after the image has\n   * entered into view.\n   */\n  cssEntered?: CSSProp<any>\n\n  /**\n   * The CSS of the image container (a `<div>` element containing the image) when the image is\n   * exiting out of view. This CSS lasts for `transitionDuration` milliseconds.\n   */\n  cssExiting?: CSSProp<any>\n\n  /**\n   * The CSS of the image container (a `<div>` element containing the image) after the image has\n   * exited out of view.\n   */\n  cssExited?: CSSProp<any>\n\n  /**\n   * Handler invoked when the image index changes.\n   *\n   * @param index - The current image index.\n   */\n  onIndexChange?: (index: number) => void\n}\n\nexport default function RotatingGallery({\n  index: externalIndex = 0,\n  onIndexChange,\n  rotationDuration,\n  transitionDuration = 500,\n  srcs = [],\n  cssDefault = css`\n    transition-property: opacity;\n    transition-timing-function: ease-out;\n  `,\n  cssEntering = css`\n    opacity: 1;\n  `,\n  cssEntered,\n  cssExiting = css`\n    opacity: 0;\n  `,\n  cssExited,\n  ...props\n}: Props) {\n  const [index, setIndex] = useState(externalIndex)\n\n  useInterval(() => {\n    setIndex((index + 1) % srcs.length)\n  }, rotationDuration)\n\n  useEffect(() => {\n    if (externalIndex === index) return\n    setIndex(externalIndex)\n  }, [externalIndex])\n\n  useEffect(() => {\n    onIndexChange?.(index)\n  }, [index])\n\n  return (\n    <StyledRoot {...props}>\n      {srcs.map((src, idx) => (\n        <Transition key={src} in={idx === index} timeout={transitionDuration}>\n          {state => (\n            <StyledImage\n              className={state}\n              css={cssDefault}\n              cssEntering={cssEntering ?? cssEntered}\n              cssEntered={cssEntered ?? cssEntering}\n              cssExiting={cssExiting ?? cssExited}\n              cssExited={cssExited ?? cssExiting}\n              style={{\n                transitionDuration: `${transitionDuration}ms`,\n                backgroundImage: `url(${src})`,\n              }}\n            />\n          )}\n        </Transition>\n      ))}\n    </StyledRoot>\n  )\n}\n\nconst StyledImage = styled.div<{\n  cssEntering: Props['cssEntering']\n  cssEntered: Props['cssEntered']\n  cssExiting: Props['cssExiting']\n  cssExited: Props['cssExited']\n}>`\n  background-repeat: no-repeat;\n  background-size: cover;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n\n  ${props => props.css}\n\n  &.entering {\n    ${props => props.cssEntering}\n  }\n\n  &.entered {\n    ${props => props.cssEntered}\n  }\n\n  &.exiting {\n    ${props => props.cssExiting}\n  }\n\n  &.exited {\n    ${props => props.cssExited}\n  }\n`\n\nconst StyledRoot = styled.div`\n  height: 100%;\n  position: relative;\n  width: 100%;\n`\n"]}

package/lib/Slider.d.ts

@@ -7,6 +7,10 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
      * being the start.
      */
     isInverted?: boolean;
+    /**
+     * Specifies if the track is clickable to set the position of the knob.
+     */
+    isTrackInteractive?: boolean;
     /**
      * Indicates if position change events are dispatched only when dragging ends. When disabled,
      * aforementioned events are fired repeatedly while dragging.
@@ -61,19 +65,19 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
     /**
      * Custom CSS provided to the track before the knob.
      */
-    cssStartingTrack?: CSSProp<any>;
+    cssStartingTrack?: CSSProp;
     /**
      * Custom CSS provided to the track after the knob.
      */
-    cssEndingTrack?: CSSProp<any>;
+    cssEndingTrack?: CSSProp;
     /**
      * Custom CSS provided to the knob.
      */
-    cssKnob?: CSSProp<any>;
+    cssKnob?: CSSProp;
     /**
      * Custom CSS provided to the label inside the knob.
      */
-    cssLabel?: CSSProp<any>;
+    cssLabel?: CSSProp;
 };
 /**
  * A slider component supporting both horizontal and vertical orientations whose sliding position (a
@@ -83,4 +87,4 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
  * rules, the width and height of the knob are set via props (`knobWidth` and `knobHeight`,
  * respectively). The size of the knob does not impact the size of the slider.
  */
-export default function Slider({ isInverted, onlyDispatchesOnDragEnd, trackPadding, knobHeight, knobWidth, orientation, position: externalPosition, labelProvider, onDragEnd, onDragStart, onPositionChange, cssStartingTrack, cssEndingTrack, cssKnob, cssLabel, ...props }: Props): JSX.Element;
+export default function Slider({ isInverted, isTrackInteractive, onlyDispatchesOnDragEnd, trackPadding, knobHeight, knobWidth, orientation, position: externalPosition, labelProvider, onDragEnd, onDragStart, onPositionChange, cssStartingTrack, cssEndingTrack, cssKnob, cssLabel, ...props }: Props): JSX.Element;