@planningcenter/tapestry-react 2.9.2 → 2.10.0-rc.2

package/dist/esm/Radio/Radio.js

@@ -1,139 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useEffect, useState, useRef } from 'react';
-import mitt from 'mitt';
-import Box from '../Box';
-import Icon from '../Icon';
-import StackView from '../StackView';
-import Text from '../Text';
-import VariantProvider from '../VariantProvider';
-import { useThemeValue } from '../system';
-var iconPaths = {
-  fill: 'tapestry.radio0',
-  checked: 'tapestry.radio1'
-};
-var radioEmitter = mitt();
-
-function Radio(_ref) {
-  var checked = _ref.checked,
-      css = _ref.css,
-      disabled = _ref.disabled,
-      id = _ref.id,
-      label = _ref.label,
-      name = _ref.name,
-      _onBlur = _ref.onBlur,
-      _onChange = _ref.onChange,
-      _onFocus = _ref.onFocus,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'xs' : _ref$size,
-      value = _ref.value,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["checked", "css", "disabled", "id", "label", "name", "onBlur", "onChange", "onFocus", "size", "value"]);
-
-  var radioTheme = useThemeValue('radio');
-  var inputRef = useRef();
-
-  var _useState = useState(false),
-      localChecked = _useState[0],
-      setLocalChecked = _useState[1];
-
-  var _useState2 = useState(false),
-      focus = _useState2[0],
-      setFocus = _useState2[1]; // Because radio components are grouped by the name prop we use an event emitter
-  // as a way to toggle the state between each one
-
-
-  useEffect(function () {
-    function handleChange(target) {
-      setLocalChecked(target === inputRef.current);
-    }
-
-    radioEmitter.on(name, handleChange);
-    return function () {
-      radioEmitter.off(name, handleChange);
-    };
-  }, []);
-  return /*#__PURE__*/React.createElement(VariantProvider, {
-    checked: checked === undefined ? localChecked : checked,
-    focus: focus
-  }, /*#__PURE__*/React.createElement(StackView, _extends({
-    as: label ? 'label' : 'span',
-    inline: true,
-    axis: "horizontal",
-    alignment: "center",
-    shrink: 0,
-    opacity: disabled ? 0.5 : undefined,
-    cursor: disabled ? 'not-allowed' : undefined,
-    position: "relative"
-  }, restProps), /*#__PURE__*/React.createElement(Box, {
-    innerRef: inputRef,
-    as: "input",
-    type: "radio",
-    id: id,
-    name: name,
-    checked: checked,
-    value: value,
-    disabled: disabled,
-    onChange: function onChange(event) {
-      radioEmitter.emit(name, event.target);
-      _onChange && _onChange(event);
-    },
-    onFocus: function onFocus(event) {
-      setFocus(true);
-      _onFocus && _onFocus(event);
-    },
-    onBlur: function onBlur(event) {
-      setFocus(false);
-      _onBlur && _onBlur(event);
-    },
-    position: "absolute",
-    top: 0,
-    left: 0,
-    zIndex: 0,
-    opacity: 0
-  }), /*#__PURE__*/React.createElement(Icon, {
-    className: "tapestry-react-Radio-Icon",
-    size: size
-  }, /*#__PURE__*/React.createElement(Icon.Path, {
-    name: iconPaths.fill,
-    fill: radioTheme.fill,
-    stroke: radioTheme.stroke,
-    transform: "scale(1)",
-    transformOrigin: "center center",
-    transition: "all 180ms ease-out",
-    variants: {
-      hover: {
-        transform: 'scale(1.125)'
-      },
-      focus: {
-        transform: 'scale(1.125)',
-        stroke: radioTheme.focusStroke
-      },
-      active: {
-        transform: 'scale(1)'
-      },
-      checked: {
-        fill: radioTheme.checkedFill,
-        stroke: radioTheme.checkedStroke
-      }
-    }
-  }), /*#__PURE__*/React.createElement(Icon.Path, {
-    name: iconPaths.checked,
-    fill: "#fff",
-    transform: "scale(0)",
-    transformOrigin: "center center",
-    transition: "all 180ms ease-out",
-    variants: {
-      checked: {
-        visibility: 'visible',
-        transform: 'scale(1)',
-        transition: 'all 120ms ease-out'
-      }
-    }
-  })), label && /*#__PURE__*/React.createElement(Text, {
-    fontSize: 4,
-    lineHeight: 2.5,
-    marginLeft: 0.5
-  }, label)));
-}
-
-export default Radio;

package/dist/esm/Radio/index.js

@@ -1,2 +0,0 @@
-import Radio from './Radio';
-export default Radio;

package/dist/esm/RangeSlider/RangeSlider.js

@@ -1,214 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useRef, useState } from 'react';
-import { clamp, snap } from '@popmotion/popcorn';
-import Box from '../Box';
-import { useMeasure } from '../hooks';
-import { useThemeProps } from '../system';
-
-function RangeSlider(props) {
-  var _props$min = props.min,
-      min = _props$min === void 0 ? 0 : _props$min,
-      _props$max = props.max,
-      max = _props$max === void 0 ? 100 : _props$max,
-      _props$step = props.step,
-      step = _props$step === void 0 ? 1 : _props$step,
-      disabled = props.disabled,
-      value = props.value,
-      onChange = props.onChange,
-      restProps = _objectWithoutPropertiesLoose(props, ["min", "max", "step", "disabled", "value", "onChange"]);
-
-  var _useThemeProps = useThemeProps('rangeSlider', restProps),
-      _useThemeProps$varian = _useThemeProps.variant,
-      variant = _useThemeProps$varian === void 0 ? {} : _useThemeProps$varian,
-      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["variant"]);
-
-  var snapTo = snap(step);
-  var sliderRef = useRef();
-  var trackRef = useRef();
-  var thumbRef = useRef();
-  var startPositionRef = useRef();
-  var currentValueRef = useRef();
-
-  var _useMeasure = useMeasure(),
-      useMeasureRef = _useMeasure[0],
-      useMeasureEffect = _useMeasure[1];
-
-  var _useState = useState(0),
-      sliderSize = _useState[0],
-      setSliderSize = _useState[1];
-
-  var _useState2 = useState(0),
-      thumbSize = _useState2[0],
-      setThumbSize = _useState2[1];
-
-  var upperBound = sliderSize - thumbSize;
-
-  function trimAlignValue(value) {
-    return snapTo(clamp(min, max, value));
-  }
-
-  function getPointerPosition(event) {
-    if (event.touches) {
-      return event.touches[0].pageX;
-    } else {
-      return event.pageX;
-    }
-  }
-
-  function getOffsetFromValue(value) {
-    var range = max - min;
-    var ratio = (value - min) / range;
-    return ratio * upperBound;
-  }
-
-  function getValueFromOffset(offset) {
-    var ratio = offset / upperBound;
-    return ratio * (max - min) + min;
-  }
-
-  function getOffsetFromPosition(position) {
-    var sliderRect = sliderRef.current.getBoundingClientRect();
-    var sliderMin = sliderRect.left;
-    var windowOffset = window.pageXOffset;
-    var sliderStart = windowOffset + sliderMin;
-    var pixelOffset = position - sliderStart - thumbSize / 2;
-    return pixelOffset;
-  }
-
-  function getValueFromPosition(position) {
-    var diffValue = position / (sliderSize - thumbSize) * (max - min);
-    return trimAlignValue(currentValueRef.current + diffValue);
-  }
-
-  function handleThumbKeyDown(event) {
-    if (event.ctrlKey || event.shiftKey || event.altKey) {
-      return;
-    }
-
-    switch (event.key) {
-      case 'ArrowLeft':
-      case 'ArrowDown':
-      case 'Left':
-      case 'Down':
-        event.preventDefault();
-        onChange(trimAlignValue(value - step));
-        break;
-
-      case 'ArrowRight':
-      case 'ArrowUp':
-      case 'Right':
-      case 'Up':
-        event.preventDefault();
-        onChange(trimAlignValue(value + step));
-        break;
-
-      case 'Home':
-        event.preventDefault();
-        onChange(min);
-        break;
-
-      case 'End':
-        event.preventDefault();
-        onChange(max);
-        break;
-
-      default:
-    }
-  }
-
-  function handleTrackPointerDown(event) {
-    var position = getPointerPosition(event);
-    var valueAtPosition = trimAlignValue(getValueFromOffset(getOffsetFromPosition(position)));
-    startPositionRef.current = position;
-    currentValueRef.current = valueAtPosition;
-    document.addEventListener('mousemove', handlePointerMove);
-    document.addEventListener('mouseup', handlePointerUp);
-    document.addEventListener('mouseleave', handlePointerUp);
-    document.addEventListener('touchmove', handlePointerMove);
-    document.addEventListener('touchend', handlePointerUp);
-    document.addEventListener('touchcancel', handlePointerUp);
-    event.preventDefault();
-    thumbRef.current.focus();
-    onChange(valueAtPosition);
-  }
-
-  function handlePointerMove(event) {
-    var position = getPointerPosition(event);
-    var positionDifference = position - startPositionRef.current;
-    var nextValue = getValueFromPosition(positionDifference);
-    event.preventDefault();
-    onChange(nextValue);
-  }
-
-  function handlePointerUp() {
-    document.removeEventListener('mousemove', handlePointerMove);
-    document.removeEventListener('mouseup', handlePointerUp);
-    document.removeEventListener('mouseleave', handlePointerUp);
-    document.removeEventListener('touchmove', handlePointerMove);
-    document.removeEventListener('touchend', handlePointerUp);
-    document.removeEventListener('touchcancel', handlePointerUp);
-  }
-
-  useMeasureRef(sliderRef);
-  useMeasureEffect(function () {
-    var sliderRect = sliderRef.current.getBoundingClientRect();
-    var sliderMin = sliderRect.left;
-    var sliderMax = sliderRect.right;
-    var thumbRect = thumbRef.current.getBoundingClientRect();
-    var thumbSize = thumbRect.width;
-    setSliderSize(Math.abs(sliderMax - sliderMin));
-    setThumbSize(thumbSize);
-  }, []);
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    innerRef: sliderRef,
-    width: "100%",
-    paddingVertical: 0.5,
-    position: "relative",
-    cursor: disabled ? 'not-allowed' : 'pointer',
-    opacity: disabled ? 0.65 : undefined,
-    onMouseDown: disabled ? undefined : handleTrackPointerDown,
-    onTouchStart: disabled ? undefined : handleTrackPointerDown
-  }, themeProps), /*#__PURE__*/React.createElement(Box, _extends({
-    innerRef: trackRef,
-    height: 0.5,
-    radius: 6,
-    overflow: "hidden",
-    backgroundColor: "grey-3",
-    position: "relative"
-  }, variant.track), /*#__PURE__*/React.createElement(Box, _extends({
-    position: "absolute",
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    transformOrigin: "center left",
-    backgroundColor: "primary",
-    style: {
-      transform: "scaleX(" + (1 - (upperBound - getOffsetFromValue(value)) / (sliderSize - thumbSize)) + ")"
-    }
-  }, variant.progress))), /*#__PURE__*/React.createElement(Box, _extends({
-    innerRef: thumbRef,
-    tabIndex: 0,
-    role: "slider",
-    "aria-valuenow": value,
-    "aria-valuemin": min,
-    "aria-valuemax": max,
-    "aria-disabled": disabled,
-    onKeyDown: disabled ? undefined : handleThumbKeyDown,
-    width: 1.5,
-    height: 1.5,
-    radius: "circle",
-    position: "absolute",
-    top: "50%",
-    left: 0,
-    backgroundColor: "grey-1",
-    stroke: "grey-6",
-    strokeWeight: 1,
-    style: {
-      transform: "translate(" + getOffsetFromValue(value) + "px, -50%)"
-    }
-  }, variant.thumb)));
-}
-
-export default RangeSlider;

package/dist/esm/RangeSlider/index.js

@@ -1,2 +0,0 @@
-import RangeSlider from './RangeSlider';
-export default RangeSlider;

package/dist/esm/ScreenReader/ScreenReader.js

@@ -1,28 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
-import Box from '../Box';
-
-function ScreenReader(props) {
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    css: {
-      width: '1px',
-      height: '1px',
-      padding: 0,
-      margin: '-1px',
-      border: 0,
-      position: 'absolute',
-      clip: 'rect(1px, 1px, 1px, 1px)',
-      overflow: 'hidden',
-      '&:focus-within': {
-        width: 'auto',
-        height: 'auto',
-        margin: 0,
-        clip: 'auto',
-        position: 'static',
-        overflow: 'initial'
-      }
-    }
-  }, props));
-}
-
-export default ScreenReader;

package/dist/esm/ScreenReader/index.js

@@ -1,2 +0,0 @@
-import ScreenReader from './ScreenReader';
-export default ScreenReader;

package/dist/esm/Scrim/Scrim.js

@@ -1,35 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import * as React from 'react';
-import StackView from '../StackView';
-import { useThemeProps } from '../system';
-var Scrim = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
-  var ref = _ref2.ref,
-      restProps = _objectWithoutPropertiesLoose(_ref2, ["ref"]);
-
-  React.useLayoutEffect(function () {
-    document.body.style.overflow = 'hidden';
-    return function () {
-      document.body.style.overflow = '';
-    };
-  }, []);
-
-  var _useThemeProps = useThemeProps('scrim', restProps),
-      _useThemeProps$zIndex = _useThemeProps.zIndex,
-      zIndex = _useThemeProps$zIndex === void 0 ? 10000 : _useThemeProps$zIndex,
-      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["zIndex"]);
-
-  return /*#__PURE__*/React.createElement(StackView, _extends({
-    innerRef: ref,
-    position: "fixed",
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    zIndex: zIndex,
-    overflow: "auto" // @ts-ignore
-    ,
-    backgroundColor: "hsla(0,0%,0%,0.4)"
-  }, themeProps));
-});
-export { Scrim };

package/dist/esm/Scrim/index.js

@@ -1,2 +0,0 @@
-export * from './Scrim';
-export { Scrim as default } from './Scrim';

package/dist/esm/Section/Section.js

@@ -1,42 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React from 'react';
-import Heading from '../Heading';
-import Toolbar from '../Toolbar';
-import StackView from '../StackView';
-import { useThemeProps } from '../system';
-
-function Section(_ref) {
-  var _ref$actions = _ref.actions,
-      actions = _ref$actions === void 0 ? [] : _ref$actions,
-      children = _ref.children,
-      count = _ref.count,
-      helpContent = _ref.helpContent,
-      onStatusClearRequest = _ref.onStatusClearRequest,
-      status = _ref.status,
-      title = _ref.title,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["actions", "children", "count", "helpContent", "onStatusClearRequest", "status", "title"]);
-
-  var _useThemeProps = useThemeProps('section', restProps),
-      countColor = _useThemeProps.countColor,
-      headingProps = _useThemeProps.headingProps,
-      toolbarProps = _useThemeProps.toolbarProps,
-      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["countColor", "headingProps", "toolbarProps"]);
-
-  return /*#__PURE__*/React.createElement(StackView, _extends({
-    as: "section"
-  }, themeProps), /*#__PURE__*/React.createElement(Toolbar, _extends({
-    title: /*#__PURE__*/React.createElement(Heading, _extends({
-      level: 3
-    }, headingProps), title),
-    helpContent: helpContent,
-    actions: actions,
-    count: count,
-    countColor: countColor,
-    status: status,
-    onStatusClearRequest: onStatusClearRequest,
-    marginBottom: 2
-  }, toolbarProps)), children);
-}
-
-export default Section;

package/dist/esm/Section/index.js

@@ -1,2 +0,0 @@
-import Section from './Section';
-export default Section;

package/dist/esm/SegmentedControl/SegmentedControl.js

@@ -1,105 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState, useEffect } from 'react';
-import Button from '../Button';
-import InputBox from '../Input/InputBox';
-import { navigateSize } from '../system';
-import { useThemeProps } from '../system';
-
-function SegmentedControl(props, ref) {
-  var getActiveIndex = useCallback(function (props) {
-    return props.activeSegment === undefined ? 0 : props.segments.indexOf(props.activeSegment);
-  });
-  var inputBoxRef = useRef(null);
-
-  var _useThemeProps = useThemeProps('segmentedControl', props),
-      activeSegment = _useThemeProps.activeSegment,
-      _useThemeProps$color = _useThemeProps.color,
-      color = _useThemeProps$color === void 0 ? 'primary' : _useThemeProps$color,
-      disabled = _useThemeProps.disabled,
-      onChange = _useThemeProps.onChange,
-      segments = _useThemeProps.segments,
-      _useThemeProps$segmen = _useThemeProps.segmentBasis,
-      segmentBasis = _useThemeProps$segmen === void 0 ? 'auto' : _useThemeProps$segmen,
-      _useThemeProps$size = _useThemeProps.size,
-      size = _useThemeProps$size === void 0 ? 'md' : _useThemeProps$size,
-      restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["activeSegment", "color", "disabled", "onChange", "segments", "segmentBasis", "size"]);
-
-  var _useState = useState(getActiveIndex(props)),
-      activeIndex = _useState[0],
-      setActiveIndex = _useState[1];
-
-  var handleKeyDown = useCallback(function (event) {
-    if (onChange && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
-      var amountToMove = event.key === 'ArrowLeft' ? -1 : 1;
-      var nextIndex = activeIndex + amountToMove;
-      event.preventDefault();
-      changeSegment(nextIndex);
-    }
-  });
-  var changeSegment = useCallback(function (index) {
-    var nextSegment = segments[index];
-
-    if (nextSegment) {
-      if (activeSegment === undefined) {
-        setActiveIndex(index);
-      }
-
-      if (onChange) {
-        onChange(nextSegment.title || nextSegment);
-      }
-
-      focus(index);
-    }
-  });
-  var focus = useCallback(function (index) {
-    return inputBoxRef.current.focus(index);
-  });
-  var blur = useCallback(function () {
-    return inputBoxRef.current.blur();
-  });
-  useImperativeHandle(ref, function () {
-    return {
-      focus: focus,
-      blur: blur
-    };
-  });
-  useEffect(function () {
-    var newActiveIndex = getActiveIndex(props);
-
-    if (activeIndex !== newActiveIndex) {
-      setActiveIndex(newActiveIndex);
-    }
-  }, [activeSegment]);
-  return /*#__PURE__*/React.createElement(InputBox, _extends({
-    ref: inputBoxRef,
-    size: size,
-    includeSpacing: true,
-    evenPadding: true,
-    role: "group",
-    cursor: "initial",
-    disabled: disabled
-  }, restProps), segments.map(function (segment, segmentIndex) {
-    var title = segment.title,
-        restSegmentProps = _objectWithoutPropertiesLoose(segment, ["title"]);
-
-    var buttonProps = title ? restSegmentProps : {};
-    return /*#__PURE__*/React.createElement(Button, _extends({
-      key: segmentIndex,
-      grow: 1,
-      size: navigateSize(size, -1),
-      basis: segmentBasis,
-      theme: segmentIndex === activeIndex ? color : undefined,
-      variant: segmentIndex === activeIndex ? 'fill' : 'naked',
-      title: title || segment,
-      disabled: disabled,
-      onKeyDown: handleKeyDown,
-      onClick: function onClick() {
-        return segmentIndex !== activeIndex && changeSegment(segmentIndex);
-      }
-    }, buttonProps));
-  }));
-}
-
-SegmentedControl = /*#__PURE__*/forwardRef(SegmentedControl);
-export default SegmentedControl;

package/dist/esm/SegmentedControl/index.js

@@ -1,2 +0,0 @@
-import SegmentedControl from './SegmentedControl';
-export default SegmentedControl;

package/dist/esm/SegmentedTabs/SegmentedTabs.js

@@ -1,105 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback, useState, useEffect } from 'react';
-import Text from '../Text';
-import StackView from '../StackView';
-import { useThemeProps } from '../system';
-
-function Tab(_ref) {
-  var isSelected = _ref.isSelected,
-      selectedColor = _ref.selectedColor,
-      onSelect = _ref.onSelect,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["isSelected", "selectedColor", "onSelect"]);
-
-  return /*#__PURE__*/React.createElement(Text, _extends({
-    as: "button",
-    tabIndex: isSelected ? -1 : undefined,
-    position: "relative",
-    fontSize: 4,
-    fontWeight: isSelected ? 600 : undefined,
-    padding: 1,
-    borderBottomWidth: 2,
-    borderBottomColor: isSelected ? selectedColor : 'separatorTertiary',
-    textAlign: "center",
-    userSelect: "none",
-    cursor: isSelected ? undefined : 'pointer',
-    hover: {
-      borderBottomColor: isSelected ? undefined : 'separatorSecondary'
-    },
-    onClick: isSelected ? undefined : onSelect
-  }, restProps));
-}
-
-function SegmentedTabs(props) {
-  var _useThemeProps = useThemeProps('segmentedTabs', props),
-      activeTab = _useThemeProps.activeTab,
-      _useThemeProps$color = _useThemeProps.color,
-      color = _useThemeProps$color === void 0 ? 'primary' : _useThemeProps$color,
-      _useThemeProps$getTab = _useThemeProps.getTabLabel,
-      getTabLabel = _useThemeProps$getTab === void 0 ? function (tab) {
-    return tab;
-  } : _useThemeProps$getTab,
-      onChange = _useThemeProps.onChange,
-      tabs = _useThemeProps.tabs,
-      tabProps = _useThemeProps.tabProps,
-      restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["activeTab", "color", "getTabLabel", "onChange", "tabs", "tabProps"]);
-
-  var getActiveIndex = useCallback(function (_ref2) {
-    var activeTab = _ref2.activeTab,
-        tabs = _ref2.tabs;
-    var index;
-
-    if (typeof activeTab === 'function') {
-      index = tabs.reduce(function (searchIndex, tab, index) {
-        if (activeTab(tab, index)) {
-          searchIndex = index;
-        }
-
-        return searchIndex;
-      }, null);
-    } else {
-      index = activeTab === undefined ? 0 : tabs.indexOf(activeTab);
-    }
-
-    return index;
-  });
-
-  var _useState = useState(getActiveIndex(props)),
-      activeIndex = _useState[0],
-      setActiveIndex = _useState[1];
-
-  var setIndex = useCallback(function (index) {
-    if (activeTab === undefined) {
-      setActiveIndex(index);
-    }
-
-    if (onChange) {
-      onChange(tabs[index]);
-    }
-  });
-  useEffect(function () {
-    var newActiveIndex = getActiveIndex(props);
-
-    if (activeIndex !== newActiveIndex) {
-      setActiveIndex(newActiveIndex);
-    }
-  }, [activeTab]);
-  return /*#__PURE__*/React.createElement(StackView, _extends({
-    role: "group",
-    axis: "horizontal",
-    distribution: "fill",
-    position: "relative"
-  }, restProps), tabs.map(function (tab, index) {
-    return /*#__PURE__*/React.createElement(Tab, _extends({
-      key: index,
-      index: index,
-      isSelected: index === activeIndex,
-      selectedColor: color,
-      onSelect: function onSelect() {
-        return setIndex(index);
-      }
-    }, tabProps), getTabLabel(tab));
-  }));
-}
-
-export default SegmentedTabs;