@pingux/astro 2.155.0-alpha.0 → 2.155.0-alpha.1

package/lib/cjs/types/searchNav.d.ts

@@ -0,0 +1,49 @@
+import { Dispatch, Key, MutableRefObject, SetStateAction } from 'react';
+import { BoxProps } from './box';
+import { ButtonProps } from './button';
+import { MenuProps } from './menu';
+import { PopoverMenuProps } from './popoverMenu';
+import { TabProps } from './tab';
+import { TextProps } from './text';
+type GenericItemType = {
+    text: string;
+    key: Key;
+};
+type StandardCallback = (key: Key) => void;
+type KeySetter = Dispatch<SetStateAction<Key>>;
+type CallbackOrSetter = StandardCallback | KeySetter;
+export interface MoreItemsPopoverProps {
+    buttonRef: MutableRefObject<HTMLButtonElement | null>;
+    items: GenericItemType[];
+    moreButtonText?: string;
+    onOpenChange?: (isOpen: boolean) => void;
+    popoverButtonProps?: ButtonProps;
+    popoverMenuProps?: MenuProps;
+    popoverProps?: PopoverMenuProps;
+    setSelectedKey: (key: Key) => void;
+    tabProps?: TabProps;
+}
+export interface SearchNavTabProps {
+    className?: string;
+    item: GenericItemType;
+    labelProps?: TextProps;
+    selectedKey?: Key;
+    setSelectedKey: (key: Key) => void;
+    tabProps?: TabProps;
+}
+export interface SearchNavProps {
+    defaultSelectedKey?: Key;
+    items: GenericItemType[];
+    labelProps?: TextProps;
+    moreButtonText?: string;
+    onSelectionChange?: (key?: Key | null) => void;
+    popoverButtonProps?: ButtonProps;
+    popoverMenuProps?: MenuProps;
+    popoverProps?: PopoverMenuProps;
+    rowProps?: BoxProps;
+    selectedKey?: Key;
+    setSelectedKey?: CallbackOrSetter;
+    onOpenChange?: (isOpen: boolean) => void;
+    tabProps?: TabProps;
+}
+export {};

package/lib/cjs/types/searchNav.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/Button/Buttons.styles.js

@@ -9,7 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-import { text as textVariants } from '../Text/Text.styles';
+import { searchNavTabLabel, text as textVariants } from '../Text/Text.styles';
 export var base = _objectSpread({
   cursor: 'pointer',
   height: '37px',
@@ -280,6 +280,21 @@ var exampleText = _objectSpread(_objectSpread({}, base), {}, {
 var paginationMenu = _objectSpread(_objectSpread({}, link), {}, {
   fontWeight: 0
 });
+var tabLabelButton = _objectSpread(_objectSpread({}, searchNavTabLabel), {}, {
+  backgroundColor: 'transparent',
+  mb: '10px',
+  p: '0px',
+  borderImage: 'none',
+  display: 'inline-flex',
+  alignItems: 'center',
+  '&.is-hovered': {
+    color: 'active',
+    cursor: 'pointer'
+  },
+  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+    borderRadius: '4px'
+  })
+});
 export default {
   colorBlock: colorBlock,
   colorBlockPrimary: colorBlockPrimary,
@@ -306,5 +321,6 @@ export default {
   quiet: quiet,
   success: success,
   withIcon: withIcon,
-  filter: filter
+  filter: filter,
+  searchNavTabLabel: tabLabelButton
 };

package/lib/components/SearchNav/MoreItemsPopover.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { useEffect, useState } from 'react';
+import DownIcon from '@pingux/mdi-react/ChevronDownIcon';
+import UpIcon from '@pingux/mdi-react/ChevronUpIcon';
+import { Box, Button, Icon, Item, Menu, PopoverMenu } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var MoreItemsPopover = function MoreItemsPopover(props) {
+  var buttonRef = props.buttonRef,
+    items = props.items,
+    moreButtonText = props.moreButtonText,
+    onOpenChange = props.onOpenChange,
+    popoverButtonProps = props.popoverButtonProps,
+    popoverMenuProps = props.popoverMenuProps,
+    popoverProps = props.popoverProps,
+    setSelectedKey = props.setSelectedKey,
+    tabProps = props.tabProps;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  useEffect(function () {
+    if (onOpenChange) {
+      onOpenChange(isOpen);
+    }
+  }, [isOpen]);
+  return ___EmotionJSX(Box, _extends({
+    role: "listitem",
+    variant: "searchNav.tab",
+    isRow: true,
+    alignItems: "center",
+    ml: "sm"
+  }, tabProps), ___EmotionJSX(PopoverMenu, _extends({}, popoverProps, {
+    isOpen: isOpen,
+    onOpenChange: setIsOpen
+  }), ___EmotionJSX(Button, _extends({
+    tabIndex: 0,
+    variant: "searchNavTabLabel",
+    ref: buttonRef
+  }, popoverButtonProps), moreButtonText, ___EmotionJSX(Icon, {
+    icon: isOpen ? UpIcon : DownIcon,
+    ml: "2px",
+    mt: "2px",
+    size: 13,
+    title: {
+      name: 'Add Circle Icon'
+    }
+  })), ___EmotionJSX(Menu, _extends({
+    onAction: function onAction(e) {
+      setSelectedKey(e);
+    }
+  }, popoverMenuProps), _mapInstanceProperty(items).call(items, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.key,
+      textValue: item.text
+    }, item.text);
+  }))));
+};
+export default MoreItemsPopover;

package/lib/components/SearchNav/SearchNav.chromatic.stories.js

@@ -0,0 +1,86 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import React, { useState } from 'react';
+import { Box, SearchNav, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only Search Nav Responsive'
+};
+var items = [{
+  text: 'Overview',
+  key: 'Overview',
+  children: ___EmotionJSX(Text, null, "Overview")
+}, {
+  text: 'Configuration',
+  key: 'Configuration',
+  children: ___EmotionJSX(Text, null, "Configuration")
+}, {
+  text: 'Resources',
+  key: 'Resources',
+  children: ___EmotionJSX(Text, null, "Resources")
+}, {
+  text: 'Policies',
+  key: 'Policies',
+  children: ___EmotionJSX(Text, null, "Policies")
+}, {
+  text: 'Attribute Mappings',
+  key: 'Attribute Mappings',
+  children: ___EmotionJSX(Text, null, "Attribute body")
+}, {
+  text: 'Access',
+  key: 'Access',
+  children: ___EmotionJSX(Text, null, "Access")
+}, {
+  text: 'Integration',
+  key: 'Integration',
+  children: ___EmotionJSX(Text, null, "Integration")
+}];
+export var Default = function Default() {
+  var _items$find, _items$find2, _items$find3;
+  var _useState = useState('Access'),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedKey = _useState2[0],
+    setSelectedKey = _useState2[1];
+  var setSelectedKeyCallback = function setSelectedKeyCallback(e) {
+    setSelectedKey(e);
+  };
+  return ___EmotionJSX(Box, {
+    gap: "md"
+  }, ___EmotionJSX(Box, {
+    maxWidth: "600px"
+  }, ___EmotionJSX(SearchNav, {
+    items: items,
+    selectedKey: selectedKey,
+    setSelectedKey: function setSelectedKey(e) {
+      return setSelectedKeyCallback(e);
+    }
+  }), ___EmotionJSX(Box, {
+    p: "sm"
+  }, (_items$find = _findInstanceProperty(items).call(items, function (item) {
+    return item.key === selectedKey;
+  })) === null || _items$find === void 0 ? void 0 : _items$find.children)), ___EmotionJSX(Box, {
+    maxWidth: "400px"
+  }, ___EmotionJSX(SearchNav, {
+    items: items,
+    selectedKey: selectedKey,
+    setSelectedKey: function setSelectedKey(e) {
+      return setSelectedKeyCallback(e);
+    }
+  }), ___EmotionJSX(Box, {
+    p: "sm"
+  }, (_items$find2 = _findInstanceProperty(items).call(items, function (item) {
+    return item.key === selectedKey;
+  })) === null || _items$find2 === void 0 ? void 0 : _items$find2.children)), ___EmotionJSX(Box, {
+    maxWidth: "200px"
+  }, ___EmotionJSX(SearchNav, {
+    items: items,
+    selectedKey: selectedKey,
+    setSelectedKey: function setSelectedKey(e) {
+      return setSelectedKeyCallback(e);
+    }
+  }), ___EmotionJSX(Box, {
+    p: "sm"
+  }, (_items$find3 = _findInstanceProperty(items).call(items, function (item) {
+    return item.key === selectedKey;
+  })) === null || _items$find3 === void 0 ? void 0 : _items$find3.children)));
+};

package/lib/components/SearchNav/SearchNav.js

@@ -0,0 +1,203 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["defaultSelectedKey", "items", "labelProps", "moreButtonText", "onSelectionChange", "onOpenChange", "popoverButtonProps", "popoverMenuProps", "popoverProps", "rowProps", "selectedKey", "setSelectedKey", "tabProps"];
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
+import { useLocalOrForwardRef } from '../../hooks';
+import useProgressiveState from '../../hooks/useProgressiveState';
+import { Box, Text } from '../../index';
+import MoreItemsPopover from './MoreItemsPopover';
+import SearchNavTab from './SearchNavTab';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var TAB_MARGIN_WIDTH = 10; // Example constant value
+var MORE_BUTTON_WIDTH = 60;
+
+/**
+ * 1. Measures the width of all items based on their refs.
+ */
+export var measureItemWidths = function measureItemWidths(items, measurementRefs) {
+  var widths = {};
+  for (var i = 0; i < items.length; i += 1) {
+    var item = items[i];
+    var itemRef = measurementRefs.current[item.key];
+    if (itemRef) {
+      widths[item.key] = itemRef.offsetWidth;
+    }
+  }
+  return widths;
+};
+
+/**
+ * 2. Calculates the number of visible items based on available container width
+ * and item widths.
+ */
+
+export var calculateVisibleCount = function calculateVisibleCount(containerWidth, moreButtonWidth, orderedItems, itemWidths) {
+  var totalItemsWidth = 0;
+  var visibleCount = 0;
+  for (var i = 0; i < orderedItems.length; i += 1) {
+    var item = orderedItems[i];
+    var itemWidth = itemWidths[item.key] + TAB_MARGIN_WIDTH;
+    if (itemWidth) {
+      var itemsRemaining = orderedItems.length - (visibleCount + 1);
+      // Only require space for 'more' button if there are items that will be hidden
+      var requiredSpaceForMoreButton = itemsRemaining > 0 ? moreButtonWidth : 0;
+      var widthNeeded = totalItemsWidth + itemWidth + requiredSpaceForMoreButton;
+      if (widthNeeded > containerWidth) {
+        break;
+      }
+      totalItemsWidth += itemWidth;
+      visibleCount += 1;
+    }
+  }
+  return visibleCount;
+};
+var SearchNav = /*#__PURE__*/forwardRef(function (props, ref) {
+  var defaultSelectedKey = props.defaultSelectedKey,
+    items = props.items,
+    labelProps = props.labelProps,
+    _props$moreButtonText = props.moreButtonText,
+    moreButtonText = _props$moreButtonText === void 0 ? 'More' : _props$moreButtonText,
+    onSelectionChange = props.onSelectionChange,
+    onOpenChange = props.onOpenChange,
+    popoverButtonProps = props.popoverButtonProps,
+    popoverMenuProps = props.popoverMenuProps,
+    popoverProps = props.popoverProps,
+    rowProps = props.rowProps,
+    selectedKeyProp = props.selectedKey,
+    setSelectedKeyProp = props.setSelectedKey,
+    tabProps = props.tabProps,
+    others = _objectWithoutProperties(props, _excluded);
+  var _useProgressiveState = useProgressiveState(selectedKeyProp, defaultSelectedKey),
+    _useProgressiveState2 = _slicedToArray(_useProgressiveState, 2),
+    selectedKey = _useProgressiveState2[0],
+    setSelectedKey = _useProgressiveState2[1];
+  var _useState = useState(_Array$from(items)),
+    _useState2 = _slicedToArray(_useState, 2),
+    orderedItems = _useState2[0],
+    setOrderedItems = _useState2[1];
+  var buttonRef = useRef(null);
+  var measurementRefs = useRef({});
+  var tabListRef = useLocalOrForwardRef(ref);
+  var _useState3 = useState(items.length),
+    _useState4 = _slicedToArray(_useState3, 2),
+    numVisibleItems = _useState4[0],
+    setNumVisibleItems = _useState4[1];
+  useEffect(function () {
+    setOrderedItems(items);
+  }, [items]);
+  var calculateVisibleItems = function calculateVisibleItems() {
+    var _buttonRef$current;
+    if (!tabListRef.current) return;
+
+    // Step 1: Measure (updates itemWidths ref in parent scope if needed, or returns new object)
+    var currentItemWidths = measureItemWidths(items, measurementRefs);
+    var containerWidth = tabListRef.current.offsetWidth;
+    var moreButtonWidth = ((_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.offsetWidth) || MORE_BUTTON_WIDTH;
+
+    // Step 2: Calculate visible count (pure logic)
+    var visibleCount = calculateVisibleCount(containerWidth, moreButtonWidth, orderedItems, currentItemWidths);
+
+    // Step 3: Update state
+    setNumVisibleItems(visibleCount);
+  };
+  useResizeObserver({
+    ref: tabListRef,
+    onResize: calculateVisibleItems
+  });
+  var visibleItems = useMemo(function () {
+    return _sliceInstanceProperty(orderedItems).call(orderedItems, 0, numVisibleItems);
+  }, [orderedItems, numVisibleItems]);
+  var hiddenItems = useMemo(function () {
+    return _sliceInstanceProperty(orderedItems).call(orderedItems, numVisibleItems);
+  }, [orderedItems, numVisibleItems]);
+  useEffect(function () {
+    if (onSelectionChange) {
+      onSelectionChange(selectedKey);
+    }
+  }, [selectedKey]);
+  useLayoutEffect(function () {
+    calculateVisibleItems();
+  }, [items]);
+  var reorderTabs = function reorderTabs() {
+    var selectedIndex = _findIndexInstanceProperty(orderedItems).call(orderedItems, function (item) {
+      return item.key === selectedKey;
+    });
+    var isSelectedHidden = selectedIndex >= numVisibleItems;
+    if (isSelectedHidden && selectedIndex !== -1 && numVisibleItems > 0) {
+      var _context;
+      var newOrderedItems = _concatInstanceProperty(_context = []).call(_context, orderedItems);
+      var selectedItem = newOrderedItems[selectedIndex];
+      var displacedItem = newOrderedItems[numVisibleItems - 1];
+      newOrderedItems[numVisibleItems - 1] = selectedItem;
+      newOrderedItems[selectedIndex] = displacedItem;
+      setOrderedItems(newOrderedItems);
+    }
+  };
+  useEffect(function () {
+    reorderTabs();
+  }, [selectedKey, numVisibleItems]);
+  var handleSelection = function handleSelection(key) {
+    setSelectedKey(key);
+    if (setSelectedKeyProp) {
+      setSelectedKeyProp(key);
+    }
+  };
+  return ___EmotionJSX(Box, {
+    maxWidth: "100%",
+    role: "navigation"
+  }, ___EmotionJSX(Box, _extends({
+    role: "list",
+    isRow: true,
+    ref: tabListRef,
+    alignItems: "center",
+    variant: "searchNav.list"
+  }, others, rowProps), _mapInstanceProperty(visibleItems).call(visibleItems, function (item) {
+    return ___EmotionJSX(SearchNavTab, {
+      key: item.key,
+      item: item,
+      selectedKey: selectedKey,
+      setSelectedKey: handleSelection,
+      tabProps: tabProps,
+      labelProps: labelProps
+    });
+  }), hiddenItems.length > 0 && ___EmotionJSX(MoreItemsPopover, {
+    onOpenChange: onOpenChange,
+    items: hiddenItems,
+    setSelectedKey: handleSelection,
+    buttonRef: buttonRef,
+    tabProps: tabProps,
+    popoverProps: popoverProps,
+    popoverButtonProps: popoverButtonProps,
+    popoverMenuProps: popoverMenuProps,
+    moreButtonText: moreButtonText
+  })), ___EmotionJSX(Box
+  // Off-screen positioning to allow measurement without affecting layout
+  , {
+    sx: {
+      position: 'absolute',
+      top: 0,
+      left: '-9999px',
+      overflow: 'hidden'
+    }
+  }, _mapInstanceProperty(items).call(items, function (item) {
+    return ___EmotionJSX(Box, {
+      sx: {
+        maxWidth: 'fit-content'
+      },
+      key: "".concat(item.key, "-box")
+    }, ___EmotionJSX(Text, {
+      key: "hidden-".concat(item.key),
+      ref: function ref(el) {
+        measurementRefs.current[item.key] = el;
+      }
+    }, item.text));
+  })));
+});
+export default SearchNav;

package/lib/components/SearchNav/SearchNav.stories.js

@@ -0,0 +1,61 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import React, { useState } from 'react';
+import { Box, Text } from '../../index';
+import SearchNav from './SearchNav';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Components/SearchNav'
+};
+var items = [{
+  text: 'Overview',
+  key: 'Overview',
+  children: ___EmotionJSX(Text, null, "Overview")
+}, {
+  text: 'Configuration',
+  key: 'Configuration',
+  children: ___EmotionJSX(Text, null, "Configuration")
+}, {
+  text: 'Resources',
+  key: 'Resources',
+  children: ___EmotionJSX(Text, null, "Resources")
+}, {
+  text: 'Policies',
+  key: 'Policies',
+  children: ___EmotionJSX(Text, null, "Policies")
+}, {
+  text: 'Attribute Mappings',
+  key: 'Attribute Mappings',
+  children: ___EmotionJSX(Text, null, "Attribute body")
+}, {
+  text: 'Access',
+  key: 'Access',
+  children: ___EmotionJSX(Text, null, "Access")
+}, {
+  text: 'Integration',
+  key: 'Integration',
+  children: ___EmotionJSX(Text, null, "Integration")
+}];
+export var Default = function Default() {
+  var _items$find;
+  var _useState = useState('Policies'),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedKey = _useState2[0],
+    setSelectedKey = _useState2[1];
+  var setSelectedKeyCallback = function setSelectedKeyCallback(e) {
+    setSelectedKey(e);
+  };
+  return ___EmotionJSX(Box, {
+    maxWidth: "600px"
+  }, ___EmotionJSX(SearchNav, {
+    items: items,
+    selectedKey: selectedKey,
+    setSelectedKey: function setSelectedKey(e) {
+      return setSelectedKeyCallback(e);
+    }
+  }), ___EmotionJSX(Box, {
+    p: "sm"
+  }, (_items$find = _findInstanceProperty(items).call(items, function (item) {
+    return item.key === selectedKey;
+  })) === null || _items$find === void 0 ? void 0 : _items$find.children));
+};

package/lib/components/SearchNav/SearchNav.styles.js

@@ -0,0 +1,43 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { defaultFocus } from '../Button/Buttons.styles';
+var tab = {
+  pt: 'md',
+  cursor: 'pointer',
+  alignItems: 'center',
+  display: 'inline-flex',
+  borderBottom: '2px solid transparent',
+  outline: 'none',
+  marginBottom: '-1px',
+  position: 'relative',
+  zIndex: '2',
+  '&.is-focused': {
+    '& > span': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+      borderRadius: '4px'
+    })
+  },
+  '&.is-disabled': {
+    cursor: 'default'
+  },
+  '&.is-selected': {
+    borderBottomWidth: '2px',
+    borderBottomColor: 'active'
+  }
+};
+var list = {
+  borderBottom: '1px solid',
+  borderBottomColor: 'border.hairline'
+};
+export default {
+  tab: tab,
+  list: list
+};