etudes 1.2.0 → 2.0.0

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 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"]}
+{"version":3,"file":"RangeSlider.js","sourceRoot":"/","sources":["RangeSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport isEqual from 'fast-deep-equal'\nimport React, { forwardRef, HTMLAttributes, PropsWithChildren, useEffect, useRef, useState } from 'react'\nimport useDragEffect from './hooks/useDragEffect'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\ntype Range = [number, number]\n\nexport type RangeSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n  areLabelsVisible?: boolean\n  decimalPlaces?: number\n  knobPadding?: number\n  max: number\n  min: number\n  orientation?: Orientation\n  range?: Range\n  steps?: number\n  onRangeChange?: (range: Range) => void\n}>\n\nexport default forwardRef<HTMLDivElement, RangeSliderProps>(({\n  children,\n  className,\n  areLabelsVisible = true,\n  decimalPlaces = 2,\n  knobPadding = 20,\n  max: maxValue,\n  min: minValue,\n  orientation = 'vertical',\n  range: externalRange,\n  steps = -1,\n  onRangeChange,\n  ...props\n}, ref) => {\n  const getPositionByValue = (value: number) => (value - minValue) / (maxValue - minValue)\n  const getPositionByDisplacement = (displacement: number) => displacement / (orientation === 'horizontal' ? size.width : size.height)\n  const getValueByPosition = (position: number) => position * (maxValue - minValue) + minValue\n  const getValueByDisplacement = (displacement: number) => getValueByPosition(getPositionByDisplacement(displacement))\n  const getDisplacementByPosition = (position: number) => position * (orientation === 'horizontal' ? size.width : size.height)\n  const getDisplacementByValue = (value: number) => getDisplacementByPosition(getPositionByValue(value))\n\n  const getClosestSteppedValue = (value: number) => {\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  const bodyRef = useRef<HTMLDivElement>(null)\n  const startKnobRef = useRef<HTMLDivElement>(null)\n  const endKnobRef = useRef<HTMLDivElement>(null)\n\n  const [size] = useResizeEffect(bodyRef)\n\n  const [range, setRange] = useState<Range>(externalRange ?? [minValue, maxValue])\n\n  const { isDragging: [isDraggingStartKnob], isReleasing: [isReleasingStartKnob], value: [startValue, setStartValue] } = useDragEffect(startKnobRef, {\n    initialValue: externalRange?.[0] ?? minValue,\n    transform: (value: number, dx: number, dy: number) => {\n      const delta = orientation === 'horizontal' ? dx : dy\n      const dMin = getDisplacementByValue(minValue)\n      const dMax = getDisplacementByValue(range[1])\n      const dCurr = getDisplacementByValue(value) + delta\n\n      return getValueByDisplacement(Math.max(dMin, Math.min(dMax, dCurr)))\n    },\n  }, [minValue, orientation, size, range[1]])\n\n  const { isDragging: [isDraggingEndKnob], isReleasing: [isReleasingEndKnob], value: [endValue, setEndValue] } = useDragEffect(endKnobRef, {\n    initialValue: externalRange?.[1] ?? maxValue,\n    transform: (value: number, dx: number, dy: number) => {\n      const delta = orientation === 'horizontal' ? dx : dy\n      const dMin = getDisplacementByValue(range[0])\n      const dMax = getDisplacementByValue(maxValue)\n      const dCurr = getDisplacementByValue(value) + delta\n\n      return getValueByDisplacement(Math.max(dMin, Math.min(dMax, dCurr)))\n    },\n  }, [maxValue, orientation, size, range[0]])\n\n  const breakpoints = [minValue, ...[...Array(steps)].map((v, i) => minValue + (i + 1) * (maxValue - minValue) / (1 + steps)), maxValue]\n  const [start, end] = range.map(getDisplacementByValue)\n  const highlightLength = end - start\n\n  useEffect(() => {\n    if (range[0] === startValue) return\n    setRange([startValue, range[1]])\n    onRangeChange?.(range)\n  }, [startValue])\n\n  useEffect(() => {\n    if (range[1] === endValue) return\n    setRange([range[0], endValue])\n    onRangeChange?.(range)\n  }, [endValue])\n\n  useEffect(() => {\n    if (isDraggingStartKnob || isDraggingEndKnob || isEqual(externalRange, range)) return\n    setRange(externalRange ?? [minValue, maxValue])\n  }, [externalRange])\n\n  useEffect(() => {\n    if (steps < 0) return\n    setStartValue(getClosestSteppedValue(startValue))\n  }, [isReleasingStartKnob])\n\n  useEffect(() => {\n    if (steps < 0 || !isReleasingEndKnob) return\n    setEndValue(getClosestSteppedValue(endValue))\n  }, [isReleasingEndKnob])\n\n  const components = asComponentDict(children, {\n    gutter: RangeSliderGutter,\n    highlight: RangeSliderHighlight,\n    knob: RangeSliderKnob,\n    label: RangeSliderLabel,\n  })\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames(orientation),\n    gutter: classNames(orientation),\n    highlight: classNames(orientation),\n    knob: classNames(orientation),\n    label: classNames(orientation),\n  })\n\n  const fixedStyles = asStyleDict({\n    body: {\n      height: '100%',\n      width: '100%',\n    },\n    gutter: {\n      display: 'block',\n      top: '0',\n      left: '0',\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n    },\n    highlight: {\n      height: '100%',\n      left: '0',\n      position: 'absolute',\n      top: '0',\n      ...orientation === 'horizontal' ? {\n        width: `${highlightLength}px`,\n        transform: `translate3d(${start}px, 0, 0)`,\n      } : {\n        height: `${highlightLength}px`,\n        transform: `translate3d(0, ${start}px, 0)`,\n      },\n    },\n    knob: {\n      bottom: '0',\n      left: '0',\n      margin: 'auto',\n      position: 'absolute',\n      right: '0',\n      top: '0',\n      touchAction: 'none',\n      zIndex: '1',\n    },\n    knobHitbox: {\n      background: 'transparent',\n      height: `calc(100% + ${knobPadding * 2}px)`,\n      left: `-${knobPadding}px`,\n      padding: `${knobPadding}px`,\n      position: 'absolute',\n      top: `-${knobPadding}px`,\n      width: `calc(100% + ${knobPadding * 2}px)`,\n    },\n    label: {\n      pointerEvents: 'none',\n      position: 'relative',\n      userSelect: 'none',\n    },\n  })\n\n  const defaultStyles = asStyleDict({\n    gutter: {\n      background: 'rgba(255, 255, 255, .2)',\n    },\n    highlight: {\n      background: '#fff',\n      transitionDuration: '100ms',\n      transitionProperty: (isReleasingStartKnob ? !isReleasingEndKnob : isReleasingEndKnob) ? 'opacity, width, transform' : 'opacity',\n      transitionTimingFunction: 'ease-out',\n    },\n    knob: {\n      alignItems: 'center',\n      background: '#fff',\n      borderRadius: '10px',\n      boxSizing: 'border-box',\n      display: 'flex',\n      height: '20px',\n      justifyContent: 'center',\n      transitionDuration: '100ms',\n      transitionTimingFunction: 'ease-out',\n      width: '20px',\n    },\n    label: {\n      background: 'transparent',\n      color: '#fff',\n      textAlign: 'center',\n      transitionDuration: '100ms',\n      transitionTimingFunction: 'ease-out',\n      ...orientation === 'horizontal' ? {\n        top: 'calc(100% + 10px)',\n      } : {\n        left: 'calc(100% + 10px)',\n      },\n    },\n  })\n\n  return (\n    <div {...props} ref={ref} className={classNames(className, fixedClassNames.root)}>\n      <div ref={bodyRef} style={fixedStyles.body}>\n        {cloneStyledElement(components.gutter ?? <RangeSliderGutter style={defaultStyles.gutter}/>, {\n          className: classNames(fixedClassNames.gutter),\n          style: styles(fixedStyles.gutter),\n        })}\n        {cloneStyledElement(components.highlight ?? <RangeSliderHighlight style={defaultStyles.highlight}/>, {\n          className: classNames(fixedClassNames.highlight),\n          style: styles(fixedStyles.highlight),\n        })}\n        {cloneStyledElement(components.knob ?? <RangeSliderKnob style={styles(defaultStyles.knob, {\n          transitionProperty: isReleasingStartKnob ? 'opacity, transform' : 'opacity',\n        })}/>, {\n          ref: startKnobRef,\n          disabled: isEqual([startValue, endValue], [maxValue, maxValue]),\n          className: classNames(fixedClassNames.knob, {\n            dragging: isDraggingStartKnob,\n            releasing: isReleasingStartKnob,\n          }),\n          style: styles(fixedStyles.knob, {\n            pointerEvents: isEqual([startValue, endValue], [minValue, minValue]) ? 'none' : 'auto',\n          }, orientation === 'horizontal' ? {\n            marginLeft: `${start}px`,\n          } : {\n            marginTop: `${start}px`,\n          }),\n        }, <div style={fixedStyles.knobHitbox}/>, areLabelsVisible &&\n          cloneStyledElement(components.label ?? <RangeSliderLabel style={styles(defaultStyles.label, {\n            transitionProperty: isReleasingStartKnob ? 'opacity, transform' : 'opacity',\n          })}/>, {\n            className: classNames(fixedClassNames.label, {\n              dragging: isDraggingStartKnob || isDraggingEndKnob,\n              releasing: isReleasingStartKnob || isReleasingEndKnob,\n            }),\n            style: styles(fixedStyles.label),\n          }, Number(startValue.toFixed(decimalPlaces)).toLocaleString())\n        )}\n        {cloneStyledElement(components.knob ?? <RangeSliderKnob style={styles(defaultStyles.knob, {\n          transitionProperty: isReleasingEndKnob ? 'opacity, transform' : 'opacity',\n        })}/>, {\n          ref: endKnobRef,\n          disabled: isEqual([startValue, endValue], [maxValue, maxValue]),\n          className: classNames(fixedClassNames.knob, {\n            dragging: isDraggingEndKnob,\n            releasing: isDraggingEndKnob,\n          }),\n          style: styles(fixedStyles.knob, {\n            pointerEvents: isEqual([startValue, endValue], [maxValue, maxValue]) ? 'none' : 'auto',\n          }, orientation === 'horizontal' ? {\n            marginLeft: `${end}px`,\n          } : {\n            marginTop: `${end}px`,\n          }),\n        }, <div style={fixedStyles.knobHitbox}/>, areLabelsVisible &&\n          cloneStyledElement(components.label ?? <RangeSliderLabel style={styles(defaultStyles.label, {\n            transitionProperty: isReleasingEndKnob ? 'opacity, transform' : 'opacity',\n          })}/>, {\n            className: classNames(fixedClassNames.label, {\n              dragging: isDraggingEndKnob,\n              releasing: isReleasingEndKnob,\n            }),\n            style: styles(fixedStyles.label),\n          }, Number(endValue.toFixed(decimalPlaces)).toLocaleString())\n        )}\n      </div>\n    </div>\n  )\n})\n\nexport const RangeSliderGutter = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const RangeSliderLabel = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const RangeSliderHighlight = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const RangeSliderKnob = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ ...props }, ref) => <div {...props} ref={ref}/>)\n"]}

package/lib/Repeat.d.ts

@@ -1,10 +1,11 @@
 import { ReactNode } from 'react';
-export declare type Props = {
+export declare type RepeatProps = {
     children?: ReactNode | ((index: number) => ReactNode);
     count?: number;
     render?: (index: number) => ReactNode;
 };
 /**
- * A tag-less component that repeats its children, automatically assigning each a unique key.
+ * A tag-less component that repeats its children, automatically assigning each
+ * a unique key.
  */
-export default function Repeat({ count, children, render, }: Props): JSX.Element;
+export default function Repeat({ count, children, render, }: RepeatProps): JSX.Element;

package/lib/Repeat.js

@@ -50,11 +50,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 /**
- * A tag-less component that repeats its children, automatically assigning each a unique key.
+ * A tag-less component that repeats its children, automatically assigning each
+ * a unique key.
  */
 function Repeat(_a) {
     var _b = _a.count, count = _b === void 0 ? 1 : _b, children = _a.children, render = _a.render;
-    return (react_1.default.createElement(react_1.default.Fragment, null, __spreadArray([], __read(Array(count)), false).map(function (_, i) { return (react_1.default.createElement(react_1.Fragment, { key: "element-".concat(i) }, render ? render(i) : typeof children === 'function' ? children(i) : children)); })));
+    return (react_1.default.createElement(react_1.default.Fragment, null, __spreadArray([], __read(Array(count)), false).map(function (v, i) { return (react_1.default.createElement(react_1.Fragment, { key: "element-".concat(i) }, render ? render(i) : typeof children === 'function' ? children(i) : children)); })));
 }
 exports.default = Repeat;
 //# sourceMappingURL=Repeat.js.map

package/lib/Repeat.js.map

@@ -1 +1 @@
-{"version":3,"file":"Repeat.js","sourceRoot":"/","sources":["Repeat.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAkD;AAQlD;;GAEG;AACH,SAAwB,MAAM,CAAC,EAIvB;QAHN,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EACT,QAAQ,cAAA,EACR,MAAM,YAAA;IAEN,OAAO,CACL,8DACG,yBAAI,KAAK,CAAC,KAAK,CAAC,UAAE,GAAG,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAC/B,8BAAC,gBAAQ,IAAC,GAAG,EAAE,kBAAW,CAAC,CAAE,IAC1B,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CACpE,CACZ,EAJgC,CAIhC,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAdD,yBAcC","sourcesContent":["import React, { Fragment, ReactNode } from 'react'\n\nexport type Props = {\n  children?: ReactNode | ((index: number) => ReactNode)\n  count?: number\n  render?: (index: number) => ReactNode\n}\n\n/**\n * A tag-less component that repeats its children, automatically assigning each a unique key.\n */\nexport default function Repeat({\n  count = 1,\n  children,\n  render,\n}: Props) {\n  return (\n    <>\n      {[...Array(count)].map((_, i) => (\n        <Fragment key={`element-${i}`}>\n          {render ? render(i) : typeof children === 'function' ? children(i) : children}\n        </Fragment>\n      ))}\n    </>\n  )\n}\n"]}
+{"version":3,"file":"Repeat.js","sourceRoot":"/","sources":["Repeat.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAkD;AAQlD;;;GAGG;AACH,SAAwB,MAAM,CAAC,EAIjB;QAHZ,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EACT,QAAQ,cAAA,EACR,MAAM,YAAA;IAEN,OAAO,CACL,8DACG,yBAAI,KAAK,CAAC,KAAK,CAAC,UAAE,GAAG,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAC/B,8BAAC,gBAAQ,IAAC,GAAG,EAAE,kBAAW,CAAC,CAAE,IAC1B,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CACpE,CACZ,EAJgC,CAIhC,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAdD,yBAcC","sourcesContent":["import React, { Fragment, ReactNode } from 'react'\n\nexport type RepeatProps = {\n  children?: ReactNode | ((index: number) => ReactNode)\n  count?: number\n  render?: (index: number) => ReactNode\n}\n\n/**\n * A tag-less component that repeats its children, automatically assigning each\n * a unique key.\n */\nexport default function Repeat({\n  count = 1,\n  children,\n  render,\n}: RepeatProps) {\n  return (\n    <>\n      {[...Array(count)].map((v, i) => (\n        <Fragment key={`element-${i}`}>\n          {render ? render(i) : typeof children === 'function' ? children(i) : children}\n        </Fragment>\n      ))}\n    </>\n  )\n}\n"]}

package/lib/RotatingGallery.d.ts

@@ -1,9 +1,9 @@
-import { HTMLAttributes } from 'react';
-import { CSSProp } from 'styled-components';
-export declare type Props = HTMLAttributes<HTMLDivElement> & {
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+export declare type RotatingGalleryProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
     /**
-     * Current image index. An error is thrown if the index is invalid (must be between 0 and length
-     * of `srcs` - 1, inclusive). This prop supports two-way binding.
+     * Current image index. An error is thrown if the index is invalid (must be
+     * between 0 and length of `srcs` - 1, inclusive). This prop supports two-way
+     * binding.
      */
     index?: number;
     /**
@@ -11,9 +11,9 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
      */
     srcs?: string[];
     /**
-     * The duration of one rotation in milliseconds (how long one image stays before transitioning to
-     * the next). Specifying `NaN` or a negative number will prevent the component from automatically
-     * rotating.
+     * The duration of one rotation in milliseconds (how long one image stays
+     * before transitioning to the next). Specifying `NaN` or a negative number
+     * will prevent the component from automatically rotating.
      */
     rotationDuration?: number;
     /**
@@ -21,45 +21,47 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
      */
     transitionDuration?: number;
     /**
-     * The default CSS of the image container.
+     * Handler invoked when the image index changes.
+     *
+     * @param index - The current image index.
      */
-    cssDefault?: CSSProp<any>;
+    onIndexChange?: (index: number) => void;
+}>;
+/**
+ * A component displaying rotating images.
+ *
+ * @exports RotatingGalleryImage - Component for each rotating image, classes:
+ *                                 `entering`, `entered`, `exiting`, `exited`.
+ */
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     /**
-     * The CSS of the image container (a `<div>` element containing the image) when the image is
-     * entering into view. This CSS lasts for `transitionDuration` milliseconds.
+     * Current image index. An error is thrown if the index is invalid (must be
+     * between 0 and length of `srcs` - 1, inclusive). This prop supports two-way
+     * binding.
      */
-    cssEntering?: CSSProp<any>;
+    index?: number | undefined;
     /**
-     * The CSS of the image container (a `<div>` element containing the image) after the image has
-     * entered into view.
+     * An array of image paths.
      */
-    cssEntered?: CSSProp<any>;
+    srcs?: string[] | undefined;
     /**
-     * The CSS of the image container (a `<div>` element containing the image) when the image is
-     * exiting out of view. This CSS lasts for `transitionDuration` milliseconds.
+     * The duration of one rotation in milliseconds (how long one image stays
+     * before transitioning to the next). Specifying `NaN` or a negative number
+     * will prevent the component from automatically rotating.
      */
-    cssExiting?: CSSProp<any>;
+    rotationDuration?: number | undefined;
     /**
-     * The CSS of the image container (a `<div>` element containing the image) after the image has
-     * exited out of view.
+     * The duration of an image transition in milliseconds.
      */
-    cssExited?: CSSProp<any>;
+    transitionDuration?: number | undefined;
     /**
      * Handler invoked when the image index changes.
      *
      * @param index - The current image index.
      */
-    onIndexChange?: (index: number) => void;
-};
-/**
- * A component displaying rotating images.
- *
- * @exports RotatingGalleryImage - Component for each rotating image.
- */
-export default function RotatingGallery({ index: externalIndex, onIndexChange, rotationDuration, transitionDuration, srcs, cssDefault, cssEntering, cssEntered, cssExiting, cssExited, ...props }: Props): JSX.Element;
-export declare const RotatingGalleryImage: import("styled-components").StyledComponent<"div", any, {
-    cssEntering: Props['cssEntering'];
-    cssEntered: Props['cssEntered'];
-    cssExiting: Props['cssExiting'];
-    cssExited: Props['cssExited'];
-}, never>;
+    onIndexChange?: ((index: number) => void) | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+export declare const RotatingGalleryImage: ({ ...props }: HTMLAttributes<HTMLDivElement>) => JSX.Element;

package/lib/RotatingGallery.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -69,18 +65,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RotatingGalleryImage = void 0;
+var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importStar(require("react"));
 var react_transition_group_1 = require("react-transition-group");
-var styled_components_1 = __importStar(require("styled-components"));
+var Each_1 = __importDefault(require("./Each"));
 var useInterval_1 = __importDefault(require("./hooks/useInterval"));
+var asComponentDict_1 = __importDefault(require("./utils/asComponentDict"));
+var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));
+var cloneStyledElement_1 = __importDefault(require("./utils/cloneStyledElement"));
+var styles_1 = __importDefault(require("./utils/styles"));
 /**
  * A component displaying rotating images.
  *
- * @exports RotatingGalleryImage - Component for each rotating image.
+ * @exports RotatingGalleryImage - Component for each rotating image, classes:
+ *                                 `entering`, `entered`, `exiting`, `exited`.
  */
-function RotatingGallery(_a) {
-    var _b = _a.index, externalIndex = _b === void 0 ? 0 : _b, onIndexChange = _a.onIndexChange, rotationDuration = _a.rotationDuration, _c = _a.transitionDuration, transitionDuration = _c === void 0 ? 500 : _c, _d = _a.srcs, srcs = _d === void 0 ? [] : _d, _e = _a.cssDefault, cssDefault = _e === void 0 ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    transition-property: opacity;\n    transition-timing-function: ease-out;\n  "], ["\n    transition-property: opacity;\n    transition-timing-function: ease-out;\n  "]))) : _e, _f = _a.cssEntering, cssEntering = _f === void 0 ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    opacity: 1;\n  "], ["\n    opacity: 1;\n  "]))) : _f, cssEntered = _a.cssEntered, _g = _a.cssExiting, cssExiting = _g === void 0 ? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    opacity: 0;\n  "], ["\n    opacity: 0;\n  "]))) : _g, cssExited = _a.cssExited, props = __rest(_a, ["index", "onIndexChange", "rotationDuration", "transitionDuration", "srcs", "cssDefault", "cssEntering", "cssEntered", "cssExiting", "cssExited"]);
-    var _h = __read((0, react_1.useState)(externalIndex), 2), index = _h[0], setIndex = _h[1];
+exports.default = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, _b = _a.index, externalIndex = _b === void 0 ? 0 : _b, rotationDuration = _a.rotationDuration, _c = _a.srcs, srcs = _c === void 0 ? [] : _c, _d = _a.transitionDuration, transitionDuration = _d === void 0 ? 500 : _d, onIndexChange = _a.onIndexChange, props = __rest(_a, ["children", "index", "rotationDuration", "srcs", "transitionDuration", "onIndexChange"]);
+    var _e = __read((0, react_1.useState)(externalIndex), 2), index = _e[0], setIndex = _e[1];
     (0, useInterval_1.default)(function () {
         setIndex((index + 1) % srcs.length);
     }, rotationDuration, undefined, [index]);
@@ -92,13 +94,41 @@ function RotatingGallery(_a) {
     (0, react_1.useEffect)(function () {
         onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(index);
     }, [index]);
-    return (react_1.default.createElement(StyledRoot, __assign({}, props), srcs.map(function (src, idx) { return (react_1.default.createElement(react_transition_group_1.Transition, { key: src, in: idx === index, timeout: transitionDuration }, function (state) { return (react_1.default.createElement(exports.RotatingGalleryImage, { className: state, css: cssDefault, cssEntering: cssEntering !== null && cssEntering !== void 0 ? cssEntering : cssEntered, cssEntered: cssEntered !== null && cssEntered !== void 0 ? cssEntered : cssEntering, cssExiting: cssExiting !== null && cssExiting !== void 0 ? cssExiting : cssExited, cssExited: cssExited !== null && cssExited !== void 0 ? cssExited : cssExiting, style: {
+    var components = (0, asComponentDict_1.default)(children, {
+        image: exports.RotatingGalleryImage,
+    });
+    var fixedStyles = (0, asStyleDict_1.default)({
+        image: {
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: 'cover',
+            height: '100%',
+            left: '0',
+            position: 'absolute',
+            top: '0',
+            width: '100%',
             transitionDuration: "".concat(transitionDuration, "ms"),
-            backgroundImage: "url(".concat(src, ")"),
-        } })); })); })));
-}
-exports.default = RotatingGallery;
-exports.RotatingGalleryImage = 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  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;
+        },
+    });
+    var defaultStyles = (0, asStyleDict_1.default)({
+        image: {
+            transitionProperty: 'opacity',
+            transitionTimingFunction: 'ease-out',
+        },
+    });
+    return (react_1.default.createElement("div", __assign({}, props, { ref: ref }),
+        react_1.default.createElement(Each_1.default, { in: srcs }, function (src, idx) { return (react_1.default.createElement(react_transition_group_1.Transition, { in: idx === index, timeout: transitionDuration }, function (state) {
+            var _a;
+            return (0, cloneStyledElement_1.default)((_a = components.image) !== null && _a !== void 0 ? _a : react_1.default.createElement(exports.RotatingGalleryImage, { style: (0, styles_1.default)(defaultStyles.image, state === 'entering' && { opacity: '1' }, state === 'exiting' && { opacity: '0' }) }), {
+                className: (0, classnames_1.default)(state),
+                style: (0, styles_1.default)(fixedStyles.image, {
+                    backgroundImage: "url(".concat(src, ")"),
+                }),
+            });
+        })); })));
+});
+var RotatingGalleryImage = function (_a) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement("div", __assign({}, props));
+};
+exports.RotatingGalleryImage = RotatingGalleryImage;
 //# 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\nexport type 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\n/**\n * A component displaying rotating images.\n *\n * @exports RotatingGalleryImage - Component for each rotating image.\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, undefined, [index])\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            <RotatingGalleryImage\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\nexport const RotatingGalleryImage = 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"]}
+{"version":3,"file":"RotatingGallery.js","sourceRoot":"/","sources":["RotatingGallery.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,6CAAiG;AACjG,iEAAmD;AACnD,gDAAyB;AACzB,oEAA6C;AAC7C,4EAAqD;AACrD,oEAA6C;AAC7C,kFAA2D;AAC3D,0DAAmC;AAmCnC;;;;;GAKG;AACH,kBAAe,IAAA,kBAAU,EAAuC,UAAC,EAQhE,EAAE,GAAG;IAPJ,IAAA,QAAQ,cAAA,EACR,aAAwB,EAAjB,aAAa,mBAAG,CAAC,KAAA,EACxB,gBAAgB,sBAAA,EAChB,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,0BAAwB,EAAxB,kBAAkB,mBAAG,GAAG,KAAA,EACxB,aAAa,mBAAA,EACV,KAAK,cAPuD,wFAQhE,CADS;IAEF,IAAA,KAAA,OAAoB,IAAA,gBAAQ,EAAC,aAAa,CAAC,IAAA,EAA1C,KAAK,QAAA,EAAE,QAAQ,QAA2B,CAAA;IAEjD,IAAA,qBAAW,EAAC;QACV,QAAQ,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAA;IACrC,CAAC,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAExC,IAAA,iBAAS,EAAC;QACR,IAAI,aAAa,KAAK,KAAK;YAAE,OAAM;QACnC,QAAQ,CAAC,aAAa,CAAC,CAAA;IACzB,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,IAAA,iBAAS,EAAC;QACR,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,KAAK,CAAC,CAAA;IACxB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,IAAM,UAAU,GAAG,IAAA,yBAAe,EAAC,QAAQ,EAAE;QAC3C,KAAK,EAAE,4BAAoB;KAC5B,CAAC,CAAA;IAEF,IAAM,WAAW,GAAG,IAAA,qBAAW,EAAC;QAC9B,KAAK,EAAE;YACL,gBAAgB,EAAE,WAAW;YAC7B,cAAc,EAAE,OAAO;YACvB,MAAM,EAAE,MAAM;YACd,IAAI,EAAE,GAAG;YACT,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,GAAG;YACR,KAAK,EAAE,MAAM;YACb,kBAAkB,EAAE,UAAG,kBAAkB,OAAI;SAC9C;KACF,CAAC,CAAA;IAEF,IAAM,aAAa,GAAG,IAAA,qBAAW,EAAC;QAChC,KAAK,EAAE;YACL,kBAAkB,EAAE,SAAS;YAC7B,wBAAwB,EAAE,UAAU;SACrC;KACF,CAAC,CAAA;IAEF,OAAO,CACL,kDAAS,KAAK,IAAE,GAAG,EAAE,GAAG;QACtB,8BAAC,cAAI,IAAC,EAAE,EAAE,IAAI,IACX,UAAC,GAAG,EAAE,GAAG,IAAK,OAAA,CACb,8BAAC,mCAAU,IAAC,EAAE,EAAE,GAAG,KAAK,KAAK,EAAE,OAAO,EAAE,kBAAkB,IACvD,UAAA,KAAK;;YAAI,OAAA,IAAA,4BAAkB,EAAC,MAAA,UAAU,CAAC,KAAK,mCAAI,8BAAC,4BAAoB,IAAC,KAAK,EAAE,IAAA,gBAAM,EAClF,aAAa,CAAC,KAAK,EACnB,KAAK,KAAK,UAAU,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,EACxC,KAAK,KAAK,SAAS,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CACxC,GAAG,EAAE;gBACJ,SAAS,EAAE,IAAA,oBAAU,EAAC,KAAK,CAAC;gBAC5B,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,KAAK,EAAE;oBAC/B,eAAe,EAAE,cAAO,GAAG,MAAG;iBAC/B,CAAC;aACH,CAAC,CAAA;SAAA,CACS,CACd,EAbc,CAad,CACI,CACH,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEK,IAAM,oBAAoB,GAAG,UAAC,EAA4C;QAAvC,KAAK,cAAV,EAAY,CAAF;IAAuC,OAAA,kDAAS,KAAK,EAAG,CAAA;CAAA,CAAA;AAA1F,QAAA,oBAAoB,wBAAsE","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, HTMLAttributes, PropsWithChildren, useEffect, useState } from 'react'\nimport { Transition } from 'react-transition-group'\nimport Each from './Each'\nimport useInterval from './hooks/useInterval'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type RotatingGalleryProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n  /**\n   * Current image index. An error is thrown if the index is invalid (must be\n   * between 0 and length of `srcs` - 1, inclusive). This prop supports two-way\n   * 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\n   * before transitioning to the next). Specifying `NaN` or a negative number\n   * will prevent the component from automatically rotating.\n   */\n  rotationDuration?: number\n\n  /**\n   * The duration of an image transition in milliseconds.\n   */\n  transitionDuration?: number\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\n/**\n * A component displaying rotating images.\n *\n * @exports RotatingGalleryImage - Component for each rotating image, classes:\n *                                 `entering`, `entered`, `exiting`, `exited`.\n */\nexport default forwardRef<HTMLDivElement, RotatingGalleryProps>(({\n  children,\n  index: externalIndex = 0,\n  rotationDuration,\n  srcs = [],\n  transitionDuration = 500,\n  onIndexChange,\n  ...props\n}, ref) => {\n  const [index, setIndex] = useState(externalIndex)\n\n  useInterval(() => {\n    setIndex((index + 1) % srcs.length)\n  }, rotationDuration, undefined, [index])\n\n  useEffect(() => {\n    if (externalIndex === index) return\n    setIndex(externalIndex)\n  }, [externalIndex])\n\n  useEffect(() => {\n    onIndexChange?.(index)\n  }, [index])\n\n  const components = asComponentDict(children, {\n    image: RotatingGalleryImage,\n  })\n\n  const fixedStyles = asStyleDict({\n    image: {\n      backgroundRepeat: 'no-repeat',\n      backgroundSize: 'cover',\n      height: '100%',\n      left: '0',\n      position: 'absolute',\n      top: '0',\n      width: '100%',\n      transitionDuration: `${transitionDuration}ms`,\n    },\n  })\n\n  const defaultStyles = asStyleDict({\n    image: {\n      transitionProperty: 'opacity',\n      transitionTimingFunction: 'ease-out',\n    },\n  })\n\n  return (\n    <div {...props} ref={ref}>\n      <Each in={srcs}>\n        {(src, idx) => (\n          <Transition in={idx === index} timeout={transitionDuration}>\n            {state => cloneStyledElement(components.image ?? <RotatingGalleryImage style={styles(\n              defaultStyles.image,\n              state === 'entering' && { opacity: '1' },\n              state === 'exiting' && { opacity: '0' },\n            )}/>, {\n              className: classNames(state),\n              style: styles(fixedStyles.image, {\n                backgroundImage: `url(${src})`,\n              }),\n            })}\n          </Transition>\n        )}\n      </Each>\n    </div>\n  )\n})\n\nexport const RotatingGalleryImage = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n"]}

package/lib/SelectableButton.d.ts

@@ -1,6 +1,6 @@
-import { HTMLAttributes, ReactNode } from 'react';
-export declare type Props = Omit<HTMLAttributes<HTMLButtonElement>, 'children'> & {
-    children?: (props: Pick<Props, 'isDeselectable' | 'isDisabled' | 'isSelected' | 'label'>) => ReactNode;
+import React, { HTMLAttributes, ReactNode } from 'react';
+export declare type SelectableButtonProps = Omit<HTMLAttributes<HTMLButtonElement>, 'children'> & {
+    children?: (props: Pick<SelectableButtonProps, 'isDeselectable' | 'isDisabled' | 'isSelected' | 'label'>) => ReactNode;
     isDeselectable?: boolean;
     isDisabled?: boolean;
     isSelected?: boolean;
@@ -8,4 +8,13 @@ export declare type Props = Omit<HTMLAttributes<HTMLButtonElement>, 'children'>
     onDeselect?: () => void;
     onSelect?: () => void;
 };
-export default function SelectableButton({ children, isDeselectable, isDisabled, isSelected: externalIsSelected, label, onDeselect, onSelect, ...props }: Props): JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLButtonElement>, "children"> & {
+    children?: ((props: Pick<SelectableButtonProps, "label" | "isSelected" | "isDeselectable" | "isDisabled">) => React.ReactNode) | undefined;
+    isDeselectable?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    isSelected?: boolean | undefined;
+    label?: string | undefined;
+    onDeselect?: (() => void) | undefined;
+    onSelect?: (() => void) | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/lib/SelectableButton.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -64,13 +60,9 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-function SelectableButton(_a) {
+exports.default = (0, react_1.forwardRef)(function (_a, ref) {
     var _b;
     var children = _a.children, _c = _a.isDeselectable, isDeselectable = _c === void 0 ? false : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isSelected, externalIsSelected = _e === void 0 ? false : _e, label = _a.label, onDeselect = _a.onDeselect, onSelect = _a.onSelect, props = __rest(_a, ["children", "isDeselectable", "isDisabled", "isSelected", "label", "onDeselect", "onSelect"]);
     var _f = __read((0, react_1.useState)(externalIsSelected), 2), isSelected = _f[0], setIsSelected = _f[1];
@@ -91,9 +83,6 @@ function SelectableButton(_a) {
     (0, react_1.useEffect)(function () {
         setIsSelected(externalIsSelected);
     }, [externalIsSelected]);
-    return (react_1.default.createElement(StyledRoot, __assign({}, props, { onClick: function () { return toggleSelection(); }, disabled: isDisabled || (isSelected && !isDeselectable) }), (_b = children === null || children === void 0 ? void 0 : children({ isDeselectable: isDeselectable, isDisabled: isDisabled, isSelected: isSelected, label: label })) !== null && _b !== void 0 ? _b : label));
-}
-exports.default = SelectableButton;
-var StyledRoot = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &[disabled] {\n    pointer-events: none;\n  }\n"], ["\n  &[disabled] {\n    pointer-events: none;\n  }\n"])));
-var templateObject_1;
+    return (react_1.default.createElement("button", __assign({}, props, { ref: ref, onClick: function () { return toggleSelection(); }, disabled: isDisabled || isSelected && !isDeselectable }), (_b = children === null || children === void 0 ? void 0 : children({ isDeselectable: isDeselectable, isDisabled: isDisabled, isSelected: isSelected, label: label })) !== null && _b !== void 0 ? _b : label));
+});
 //# sourceMappingURL=SelectableButton.js.map

package/lib/SelectableButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectableButton.js","sourceRoot":"/","sources":["SelectableButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA6E;AAC7E,wEAAsC;AAYtC,SAAwB,gBAAgB,CAAC,EASjC;;IARN,IAAA,QAAQ,cAAA,EACR,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,kBAAsC,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EACtC,KAAK,WAAA,EACL,UAAU,gBAAA,EACV,QAAQ,cAAA,EACL,KAAK,cAR+B,6FASxC,CADS;IAEF,IAAA,KAAA,OAA8B,IAAA,gBAAQ,EAAC,kBAAkB,CAAC,IAAA,EAAzD,UAAU,QAAA,EAAE,aAAa,QAAgC,CAAA;IAEhE,IAAM,eAAe,GAAG;QACtB,IAAI,UAAU;YAAE,OAAM;QAEtB,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,cAAc;gBAAE,OAAM;YAC3B,aAAa,CAAC,KAAK,CAAC,CAAA;YACpB,UAAU,aAAV,UAAU,uBAAV,UAAU,EAAI,CAAA;SACf;aACI;YACH,aAAa,CAAC,IAAI,CAAC,CAAA;YACnB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAA;SACb;IACH,CAAC,CAAA;IAED,IAAA,iBAAS,EAAC;QACR,aAAa,CAAC,kBAAkB,CAAC,CAAA;IACnC,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAA;IAExB,OAAO,CACL,8BAAC,UAAU,eAAK,KAAK,IAAE,OAAO,EAAE,cAAM,OAAA,eAAe,EAAE,EAAjB,CAAiB,EAAE,QAAQ,EAAE,UAAU,IAAI,CAAC,UAAU,IAAI,CAAC,cAAc,CAAC,KAC7G,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,cAAc,gBAAA,EAAE,UAAU,YAAA,EAAE,UAAU,YAAA,EAAE,KAAK,OAAA,EAAE,CAAC,mCAAI,KAAK,CAC5D,CACd,CAAA;AACH,CAAC;AAnCD,mCAmCC;AAED,IAAM,UAAU,GAAG,2BAAM,CAAC,MAAM,wHAAA,qDAI/B,IAAA,CAAA","sourcesContent":["import React, { HTMLAttributes, ReactNode, useEffect, useState } from 'react'\nimport styled from 'styled-components'\n\nexport type Props = Omit<HTMLAttributes<HTMLButtonElement>, 'children'> & {\n  children?: (props: Pick<Props, 'isDeselectable' | 'isDisabled' | 'isSelected' | 'label'>) => ReactNode\n  isDeselectable?: boolean\n  isDisabled?: boolean\n  isSelected?: boolean\n  label?: string\n  onDeselect?: () => void\n  onSelect?: () => void\n}\n\nexport default function SelectableButton({\n  children,\n  isDeselectable = false,\n  isDisabled = false,\n  isSelected: externalIsSelected = false,\n  label,\n  onDeselect,\n  onSelect,\n  ...props\n}: Props) {\n  const [isSelected, setIsSelected] = useState(externalIsSelected)\n\n  const toggleSelection = () => {\n    if (isDisabled) return\n\n    if (isSelected) {\n      if (!isDeselectable) return\n      setIsSelected(false)\n      onDeselect?.()\n    }\n    else {\n      setIsSelected(true)\n      onSelect?.()\n    }\n  }\n\n  useEffect(() => {\n    setIsSelected(externalIsSelected)\n  }, [externalIsSelected])\n\n  return (\n    <StyledRoot {...props} onClick={() => toggleSelection()} disabled={isDisabled || (isSelected && !isDeselectable)}>\n      {children?.({ isDeselectable, isDisabled, isSelected, label }) ?? label}\n    </StyledRoot>\n  )\n}\n\nconst StyledRoot = styled.button`\n  &[disabled] {\n    pointer-events: none;\n  }\n`\n"]}
+{"version":3,"file":"SelectableButton.js","sourceRoot":"/","sources":["SelectableButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAyF;AAYzF,kBAAe,IAAA,kBAAU,EAA2C,UAAC,EASpE,EAAE,GAAG;;IARJ,IAAA,QAAQ,cAAA,EACR,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,kBAAsC,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EACtC,KAAK,WAAA,EACL,UAAU,gBAAA,EACV,QAAQ,cAAA,EACL,KAAK,cAR2D,6FASpE,CADS;IAEF,IAAA,KAAA,OAA8B,IAAA,gBAAQ,EAAC,kBAAkB,CAAC,IAAA,EAAzD,UAAU,QAAA,EAAE,aAAa,QAAgC,CAAA;IAEhE,IAAM,eAAe,GAAG;QACtB,IAAI,UAAU;YAAE,OAAM;QAEtB,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,cAAc;gBAAE,OAAM;YAC3B,aAAa,CAAC,KAAK,CAAC,CAAA;YACpB,UAAU,aAAV,UAAU,uBAAV,UAAU,EAAI,CAAA;SACf;aACI;YACH,aAAa,CAAC,IAAI,CAAC,CAAA;YACnB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAA;SACb;IACH,CAAC,CAAA;IAED,IAAA,iBAAS,EAAC;QACR,aAAa,CAAC,kBAAkB,CAAC,CAAA;IACnC,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAA;IAExB,OAAO,CACL,qDACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,cAAM,OAAA,eAAe,EAAE,EAAjB,CAAiB,EAAE,QAAQ,EAAE,UAAU,IAAI,UAAU,IAAI,CAAC,cAAc,KAEtF,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,cAAc,gBAAA,EAAE,UAAU,YAAA,EAAE,UAAU,YAAA,EAAE,KAAK,OAAA,EAAE,CAAC,mCAAI,KAAK,CAChE,CACV,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import React, { forwardRef, HTMLAttributes, ReactNode, useEffect, useState } from 'react'\n\nexport type SelectableButtonProps = Omit<HTMLAttributes<HTMLButtonElement>, 'children'> & {\n  children?: (props: Pick<SelectableButtonProps, 'isDeselectable' | 'isDisabled' | 'isSelected' | 'label'>) => ReactNode\n  isDeselectable?: boolean\n  isDisabled?: boolean\n  isSelected?: boolean\n  label?: string\n  onDeselect?: () => void\n  onSelect?: () => void\n}\n\nexport default forwardRef<HTMLButtonElement, SelectableButtonProps>(({\n  children,\n  isDeselectable = false,\n  isDisabled = false,\n  isSelected: externalIsSelected = false,\n  label,\n  onDeselect,\n  onSelect,\n  ...props\n}, ref) => {\n  const [isSelected, setIsSelected] = useState(externalIsSelected)\n\n  const toggleSelection = () => {\n    if (isDisabled) return\n\n    if (isSelected) {\n      if (!isDeselectable) return\n      setIsSelected(false)\n      onDeselect?.()\n    }\n    else {\n      setIsSelected(true)\n      onSelect?.()\n    }\n  }\n\n  useEffect(() => {\n    setIsSelected(externalIsSelected)\n  }, [externalIsSelected])\n\n  return (\n    <button\n      {...props}\n      ref={ref}\n      onClick={() => toggleSelection()} disabled={isDisabled || isSelected && !isDeselectable}\n    >\n      {children?.({ isDeselectable, isDisabled, isSelected, label }) ?? label}\n    </button>\n  )\n})\n"]}