@cashub/ui-elv 1.0.1 → 1.0.3

package/chart/BarChart.js

@@ -8,8 +8,10 @@ var _react = require("react");
 var _styledComponents = require("styled-components");
 var _reactChartjs = require("react-chartjs-2");
 var _customTooltip = _interopRequireDefault(require("./utils/customTooltip"));
+var _customTooltipLifecyclePlugin = _interopRequireDefault(require("./utils/customTooltipLifecyclePlugin"));
 var _padEmptyChartBar = _interopRequireDefault(require("./utils/padEmptyChartBar"));
 var _yAxisTopTitlePlugin = _interopRequireDefault(require("./utils/yAxisTopTitlePlugin"));
+var _xAxisLabelTooltipPlugin = _interopRequireDefault(require("./utils/xAxisLabelTooltipPlugin"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const BarChart = _ref => {
@@ -39,7 +41,8 @@ const BarChart = _ref => {
       showLegend: options.showLegend === undefined ? false : options.showLegend,
       rotateLabel: options.rotateLabel === undefined ? true : options.rotateLabel,
       yAxisTopTitle: yAxisTopTitle ? yAxisTopTitle : '',
-      tooltipLabelPostfix: tooltips.labelPostfix || ''
+      tooltipLabelPostfix: tooltips.labelPostfix || '',
+      showFullLabelOnHover: options.showFullLabelOnHover === undefined ? false : options.showFullLabelOnHover
     };
   }, [options]);
   const defaultOptions = (0, _react.useMemo)(() => {
@@ -96,6 +99,9 @@ const BarChart = _ref => {
         },
         yAxisTopTitle: {
           title: customOptions.yAxisTopTitle
+        },
+        xAxisLabelTooltip: {
+          enabled: customOptions.showFullLabelOnHover
         }
       },
       scales: {
@@ -141,7 +147,7 @@ const BarChart = _ref => {
     height: height,
     data: data,
     options: defaultOptions,
-    plugins: [_padEmptyChartBar.default, _yAxisTopTitlePlugin.default],
+    plugins: [_padEmptyChartBar.default, _yAxisTopTitlePlugin.default, _xAxisLabelTooltipPlugin.default, _customTooltipLifecyclePlugin.default],
     ...props
   });
 };

package/chart/DoughnutChart.js

@@ -10,6 +10,7 @@ var _reactChartjs = require("react-chartjs-2");
 var _lodash = _interopRequireDefault(require("lodash.uniqueid"));
 var _htmlLegendPlugin = _interopRequireDefault(require("./utils/htmlLegendPlugin"));
 var _customTooltip = _interopRequireDefault(require("./utils/customTooltip"));
+var _customTooltipLifecyclePlugin = _interopRequireDefault(require("./utils/customTooltipLifecyclePlugin"));
 var _centerTextPlugin = _interopRequireDefault(require("./utils/centerTextPlugin"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -83,7 +84,7 @@ const DoughnutChart = _ref => {
         height: height,
         data: data,
         options: defaultOptions,
-        plugins: [_htmlLegendPlugin.default, _centerTextPlugin.default],
+        plugins: [_htmlLegendPlugin.default, _centerTextPlugin.default, _customTooltipLifecyclePlugin.default],
         ...props
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(LegendWrapper, {

package/chart/LineChart.js

@@ -8,6 +8,7 @@ var _react = require("react");
 var _styledComponents = require("styled-components");
 var _reactChartjs = require("react-chartjs-2");
 var _customTooltip = _interopRequireDefault(require("./utils/customTooltip"));
+var _customTooltipLifecyclePlugin = _interopRequireDefault(require("./utils/customTooltipLifecyclePlugin"));
 var _yAxisTopTitlePlugin = _interopRequireDefault(require("./utils/yAxisTopTitlePlugin"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -139,7 +140,7 @@ const LineChart = _ref => {
     height: height,
     data: data,
     options: defaultOptions,
-    plugins: [_yAxisTopTitlePlugin.default],
+    plugins: [_yAxisTopTitlePlugin.default, _customTooltipLifecyclePlugin.default],
     ...props
   });
 };

package/chart/utils/customTooltip.js

@@ -4,18 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _tooltipElement = require("./tooltipElement");
 const customTooltip = theme => {
   // optimize: render in react way
   return function (context) {
     // Tooltip Element
-    let tooltipEl = document.getElementById('chartjs-tooltip');
-
-    // Create element on first render
-    if (!tooltipEl) {
-      tooltipEl = document.createElement('div');
-      tooltipEl.id = 'chartjs-tooltip';
+    const tooltipEl = (0, _tooltipElement.getOrCreateTooltipEl)(_tooltipElement.CUSTOM_TOOLTIP_ID);
+    if (!tooltipEl.querySelector('table')) {
       tooltipEl.innerHTML = '<table></table>';
-      document.body.appendChild(tooltipEl);
     }
 
     // Hide tooltip, if no tooltip or no data

package/chart/utils/customTooltipLifecyclePlugin.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _tooltipElement = require("./tooltipElement");
+// customTooltip.js renders #chartjs-tooltip outside React's tree (appended to
+// document.body), so it needs an explicit hook to hide it when the chart's
+// container resizes or the chart instance is destroyed - otherwise the last
+// rendered tooltip is left floating, detached from the (moved/gone) chart.
+const customTooltipLifecyclePlugin = {
+  id: 'customTooltipLifecycle',
+  resize() {
+    (0, _tooltipElement.hideTooltipEl)(_tooltipElement.CUSTOM_TOOLTIP_ID);
+  },
+  afterDestroy() {
+    (0, _tooltipElement.hideTooltipEl)(_tooltipElement.CUSTOM_TOOLTIP_ID);
+  }
+};
+var _default = exports.default = customTooltipLifecyclePlugin;

package/chart/utils/tooltipElement.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hideTooltipEl = exports.getOrCreateTooltipEl = exports.CUSTOM_TOOLTIP_ID = exports.AXIS_TOOLTIP_ID = void 0;
+const CUSTOM_TOOLTIP_ID = exports.CUSTOM_TOOLTIP_ID = 'chartjs-tooltip';
+const AXIS_TOOLTIP_ID = exports.AXIS_TOOLTIP_ID = 'chartjs-axis-tooltip';
+const getOrCreateTooltipEl = id => {
+  let tooltipEl = document.getElementById(id);
+  if (!tooltipEl) {
+    tooltipEl = document.createElement('div');
+    tooltipEl.id = id;
+    document.body.appendChild(tooltipEl);
+  }
+  return tooltipEl;
+};
+exports.getOrCreateTooltipEl = getOrCreateTooltipEl;
+const hideTooltipEl = id => {
+  const tooltipEl = document.getElementById(id);
+  if (tooltipEl) {
+    tooltipEl.style.display = 'none';
+  }
+};
+exports.hideTooltipEl = hideTooltipEl;

package/chart/utils/xAxisLabelTooltipPlugin.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _tooltipElement = require("./tooltipElement");
+const hideTooltip = () => (0, _tooltipElement.hideTooltipEl)(_tooltipElement.AXIS_TOOLTIP_ID);
+const getTooltipEl = () => {
+  const tooltipEl = (0, _tooltipElement.getOrCreateTooltipEl)(_tooltipElement.AXIS_TOOLTIP_ID);
+  tooltipEl.style.position = 'absolute';
+  tooltipEl.style.pointerEvents = 'none';
+  tooltipEl.style.zIndex = 80;
+  tooltipEl.style.maxWidth = '50vw';
+  tooltipEl.style.wordBreak = 'break-word';
+  tooltipEl.style.whiteSpace = 'nowrap';
+  tooltipEl.style.textAlign = 'left';
+  tooltipEl.style.border = '1px solid var(--border-color)';
+  tooltipEl.style.color = 'var(--font-on-background)';
+  tooltipEl.style.background = 'var(--color-background2)';
+  tooltipEl.style.boxShadow = 'var(--box-shadow)';
+  tooltipEl.style.borderRadius = 'calc(var(--border-radius) / 2)';
+  tooltipEl.style.padding = 'var(--spacing-xs)';
+  tooltipEl.style.fontSize = 'var(--font-body1)';
+  return tooltipEl;
+};
+
+// approximate hit-box per rendered tick: stable public getPixelForTick() + chartArea,
+// not Chart.js's private _labelItems/_computeLabelItems (undocumented, version-fragile).
+//
+// Ticks are matched via xScale.ticks (the array Chart.js actually renders) rather than
+// chart.data.labels directly, because ticks.autoSkip (on by default) drops entries when
+// labels don't all fit - exactly the case this feature targets. Each rendered tick's
+// `.value` is the original index into chart.data.labels, which getPixelForTick(i) does
+// NOT return (it returns a pixel, and its `i` argument is a position in the possibly-
+// skipped ticks array, not a label index) - so the original label index must be read
+// back off ticks[i].value, not off the loop counter.
+const findHoveredTickIndex = (chart, x, y) => {
+  const xScale = chart.scales.x;
+  if (!xScale) {
+    return -1;
+  }
+  const {
+    ticks
+  } = xScale;
+  if (!ticks || ticks.length === 0) {
+    return -1;
+  }
+  const {
+    chartArea
+  } = chart;
+  if (y < chartArea.bottom || y > xScale.bottom || x < chartArea.left || x > chartArea.right) {
+    return -1;
+  }
+  const halfStep = ticks.length > 1 ? Math.abs(xScale.getPixelForTick(1) - xScale.getPixelForTick(0)) / 2 : (xScale.right - xScale.left) / 2;
+  for (let i = 0; i < ticks.length; i += 1) {
+    const tickPixel = xScale.getPixelForTick(i);
+    if (tickPixel !== null && Math.abs(x - tickPixel) <= halfStep) {
+      return ticks[i].value;
+    }
+  }
+  return -1;
+};
+const xAxisLabelTooltipPlugin = {
+  id: 'xAxisLabelTooltip',
+  afterEvent(chart, args) {
+    const config = chart.config.options.plugins.xAxisLabelTooltip;
+    if (!config || !config.enabled) {
+      hideTooltip();
+      return;
+    }
+    const {
+      event
+    } = args;
+    if (event.type === 'mouseout') {
+      hideTooltip();
+      return;
+    }
+    if (event.type !== 'mousemove') {
+      return;
+    }
+    const index = findHoveredTickIndex(chart, event.x, event.y);
+    const label = index === -1 ? undefined : chart.data.labels[index];
+    if (typeof label !== 'string' || !label) {
+      hideTooltip();
+      return;
+    }
+    const tooltipEl = getTooltipEl();
+    tooltipEl.textContent = label;
+    tooltipEl.style.display = 'block';
+    const canvasRect = chart.canvas.getBoundingClientRect();
+    // index here is the original label index (see findHoveredTickIndex), so the pixel
+    // must come from getPixelForValue(index), not getPixelForTick(index) - the latter
+    // expects a position in the (possibly autoSkip-reduced) ticks array, not a label index.
+    const tickX = chart.scales.x.getPixelForValue(index);
+    tooltipEl.style.transform = 'translateX(-50%)';
+    tooltipEl.style.left = `${canvasRect.left + window.pageXOffset + tickX}px`;
+    tooltipEl.style.top = `${canvasRect.top + window.pageYOffset + chart.chartArea.bottom + 8}px`;
+  },
+  resize() {
+    hideTooltip();
+  },
+  afterDestroy() {
+    hideTooltip();
+  }
+};
+var _default = exports.default = xAxisLabelTooltipPlugin;

package/datetimePicker/index.js

@@ -3,34 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "DatePicker", {
-  enumerable: true,
-  get: function () {
-    return _DatePicker.default;
-  }
-});
-Object.defineProperty(exports, "DatePickerV2", {
-  enumerable: true,
-  get: function () {
-    return _DatePickerV.default;
-  }
-});
-Object.defineProperty(exports, "DatetimePicker", {
-  enumerable: true,
-  get: function () {
-    return _DatetimePicker.default;
-  }
-});
-Object.defineProperty(exports, "DatetimePickerV2", {
-  enumerable: true,
-  get: function () {
-    return _DatetimePickerV.default;
-  }
-});
 Object.defineProperty(exports, "DatetimePickerV3", {
   enumerable: true,
   get: function () {
-    return _DatetimePickerV2.default;
+    return _DatetimePickerV.default;
   }
 });
 Object.defineProperty(exports, "TimeInput", {
@@ -39,12 +15,6 @@ Object.defineProperty(exports, "TimeInput", {
     return _TimeInput.default;
   }
 });
-Object.defineProperty(exports, "TimePicker", {
-  enumerable: true,
-  get: function () {
-    return _TimePicker.default;
-  }
-});
 Object.defineProperty(exports, "TimePickerStyle", {
   enumerable: true,
   get: function () {
@@ -57,13 +27,8 @@ Object.defineProperty(exports, "TimePickerV2", {
     return _TimePickerV.default;
   }
 });
-var _DatePicker = _interopRequireDefault(require("./DatePicker"));
-var _DatePickerV = _interopRequireDefault(require("./DatePickerV2"));
-var _DatetimePicker = _interopRequireDefault(require("./DatetimePicker"));
-var _DatetimePickerV = _interopRequireDefault(require("./DatetimePickerV2"));
-var _DatetimePickerV2 = _interopRequireDefault(require("./DatetimePickerV3"));
+var _DatetimePickerV = _interopRequireDefault(require("./DatetimePickerV3"));
 var _TimeInput = _interopRequireDefault(require("./TimeInput"));
-var _TimePicker = _interopRequireDefault(require("./TimePicker"));
 var _TimePickerV = _interopRequireDefault(require("./TimePickerV2"));
 var _TimePickerStyle = _interopRequireDefault(require("./TimePickerStyle"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/esm/Tab/Tab.js

@@ -0,0 +1,21 @@
+import TabContext from './subComponent/TabContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Tab = _ref => {
+  let {
+    children,
+    selected,
+    onChange,
+    mode = 'view',
+    onTitleChange
+  } = _ref;
+  return /*#__PURE__*/_jsx(TabContext.Provider, {
+    value: {
+      selected,
+      onChange,
+      mode,
+      onTitleChange
+    },
+    children: children
+  });
+};
+export default Tab;

package/esm/Tab/TabList.js

@@ -0,0 +1,160 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+import styled from 'styled-components';
+import { FaAngleLeft, FaAngleRight } from 'react-icons/fa/index.esm';
+import { Button } from '../button';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const MAX_MOVE_PIXEL = 300;
+const TabList = _ref => {
+  let {
+    children,
+    wrap = true,
+    ...props
+  } = _ref;
+  const wrapperRef = useRef(null);
+  const [exceedContainerWidth, setExceedContainerWidth] = useState(false);
+  const [hasPrevious, setHasPrevious] = useState(false);
+  const [hasNext, setHasNext] = useState(false);
+  const checkExceedContainerWidth = useCallback(() => {
+    if (wrapperRef.current) {
+      const {
+        offsetWidth,
+        scrollWidth
+      } = wrapperRef.current;
+      let {
+        marginLeft
+      } = getComputedStyle(wrapperRef.current);
+      const currentMarginLeft = Math.abs(parseInt(marginLeft));
+      setHasPrevious(currentMarginLeft > 0);
+      setHasNext(scrollWidth - offsetWidth > 0);
+      setExceedContainerWidth(scrollWidth > offsetWidth - currentMarginLeft);
+    }
+  }, []);
+  const handleResize = useCallback(() => {
+    checkExceedContainerWidth();
+  }, []);
+  const handleTransitionend = useCallback(event => {
+    // only allow margin-left transition event
+    if (event && event.propertyName !== 'margin-left') {
+      return;
+    }
+    checkExceedContainerWidth();
+  }, []);
+  const getMovePixel = offsetWidth => {
+    // move 1/3 pixel as default
+    const defaultMovePixel = Math.ceil(offsetWidth / 3);
+    return defaultMovePixel > MAX_MOVE_PIXEL ? MAX_MOVE_PIXEL : defaultMovePixel;
+  };
+  const updateScrollPosition = marginLeft => {
+    wrapperRef.current.style.marginLeft = marginLeft;
+  };
+  const handlePrevious = () => {
+    const {
+      offsetWidth
+    } = wrapperRef.current;
+    const {
+      marginLeft
+    } = getComputedStyle(wrapperRef.current);
+    const currentMarginLeft = Math.abs(parseInt(marginLeft));
+    const availableMovePixel = currentMarginLeft;
+    const movePixel = getMovePixel(offsetWidth - currentMarginLeft);
+    if (movePixel > availableMovePixel) {
+      // exceed edge, so move to edge only
+      updateScrollPosition('0px');
+    } else {
+      updateScrollPosition(`-${currentMarginLeft - movePixel}px`);
+    }
+  };
+  const handleNext = () => {
+    const {
+      offsetWidth,
+      scrollWidth
+    } = wrapperRef.current;
+    const {
+      marginLeft
+    } = getComputedStyle(wrapperRef.current);
+    const currentMarginLeft = Math.abs(parseInt(marginLeft));
+    const availableMovePixel = scrollWidth - offsetWidth;
+    const movePixel = getMovePixel(offsetWidth - currentMarginLeft);
+    if (movePixel > availableMovePixel) {
+      // exceed edge, so move to edge only
+      updateScrollPosition(`-${currentMarginLeft + availableMovePixel}px`);
+    } else {
+      updateScrollPosition(`-${currentMarginLeft + movePixel}px`);
+    }
+  };
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [wrap, children]);
+  useEffect(() => {
+    if (wrapperRef.current) {
+      wrapperRef.current.addEventListener('transitionend', handleTransitionend);
+    }
+  }, [wrap]);
+  return /*#__PURE__*/_jsx(Container, {
+    role: "tablist",
+    $wrap: wrap,
+    ...props,
+    children: wrap ? children : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(TabWrapper, {
+        ref: wrapperRef,
+        children: children
+      }), exceedContainerWidth && /*#__PURE__*/_jsxs(Paginate, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          "aria-label": "Previous",
+          reverse: true,
+          onClick: handlePrevious,
+          iconOnly: true,
+          disabled: !hasPrevious,
+          children: /*#__PURE__*/_jsx(FaAngleLeft, {})
+        }), /*#__PURE__*/_jsx(Button, {
+          "aria-label": "Next",
+          reverse: true,
+          onClick: handleNext,
+          iconOnly: true,
+          disabled: !hasNext,
+          children: /*#__PURE__*/_jsx(FaAngleRight, {})
+        })]
+      })]
+    })
+  });
+};
+const Container = styled.div`
+  position: relative;
+  border-bottom: var(--border-width) solid var(--border-color);
+  margin-bottom: var(--spacing);
+
+  ${_ref2 => {
+  let {
+    $wrap
+  } = _ref2;
+  return !$wrap && 'white-space: nowrap;';
+}}
+
+  ${_ref3 => {
+  let {
+    noMargin
+  } = _ref3;
+  return noMargin && 'margin-bottom: 0;';
+}}
+`;
+const TabWrapper = styled.div`
+  margin-right: calc(1rem * 2 + 10px * 4 + var(--spacing-xs) * 2);
+  overflow: hidden;
+  margin-left: 0;
+  transition: margin-left 0.3s;
+`;
+const Paginate = styled.div`
+  display: flex;
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  > :not(:last-child) {
+    margin-right: var(--spacing-xs);
+  }
+`;
+export default TabList;

package/esm/Tab/TabPanel.js

@@ -0,0 +1,42 @@
+import { useContext, useEffect, useState, useMemo } from 'react';
+import styled from 'styled-components';
+import TabContext from './subComponent/TabContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+const TabPanel = _ref => {
+  let {
+    children,
+    name,
+    ...props
+  } = _ref;
+  const {
+    selected
+  } = useContext(TabContext);
+  const [rendered, setRendered] = useState(false);
+  const tabContent = useMemo(() => {
+    if (rendered) {
+      return children;
+    }
+    return null;
+  }, [rendered, children]);
+  useEffect(() => {
+    if (name === selected) {
+      setRendered(true);
+    }
+  }, [selected, name]);
+  return /*#__PURE__*/_jsx(Panel, {
+    role: "tabpanel",
+    $display: selected === name,
+    ...props,
+    children: tabContent
+  });
+};
+const Panel = styled.div`
+  display: ${_ref2 => {
+  let {
+    $display
+  } = _ref2;
+  return $display ? 'block' : 'none';
+}};
+  position: relative;
+`;
+export default TabPanel;

package/esm/Tab/TabTab.js

@@ -0,0 +1,98 @@
+import { useContext, useState, useCallback } from 'react';
+import { KEY_CODE } from '@cashub/utils';
+import styled from 'styled-components';
+import TabContext from './subComponent/TabContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+const TabTab = _ref => {
+  let {
+    children,
+    name,
+    title,
+    onClick,
+    ...props
+  } = _ref;
+  const {
+    selected,
+    onChange,
+    mode,
+    onTitleChange
+  } = useContext(TabContext);
+  const [isModify, setIsModify] = useState(false);
+  const [currentTitle, setCurrentTitle] = useState(title);
+  const handleClick = useCallback(() => {
+    if (selected !== name) {
+      onChange(name);
+    }
+    if (onClick && typeof onClick === 'function') {
+      onClick();
+    }
+  }, [name, selected, onChange, onClick]);
+  const handleDoubleClick = () => {
+    if (mode !== 'modify') return;
+    setIsModify(true);
+  };
+  const handleBlur = () => {
+    onTitleChange(name, currentTitle);
+    setIsModify(false);
+  };
+  const handleKeyUp = event => {
+    const key = event.keyCode;
+    if (key === KEY_CODE.ENTER) {
+      onTitleChange(name, currentTitle);
+      setIsModify(false);
+    }
+  };
+  return isModify ? /*#__PURE__*/_jsx(InputTab, {
+    role: "tab",
+    type: "text",
+    value: currentTitle,
+    onChange: event => {
+      setCurrentTitle(event.target.value);
+    },
+    onBlur: handleBlur,
+    onKeyUp: handleKeyUp,
+    autoFocus: true
+  }) : /*#__PURE__*/_jsx(ButtonTab, {
+    role: "tab",
+    onClick: handleClick,
+    onDoubleClick: handleDoubleClick,
+    active: selected === name,
+    ...props,
+    children: children
+  });
+};
+const Tab = styled.div`
+  background: transparent;
+  padding: 10px var(--spacing-s);
+  border: none;
+  border-bottom: 4px solid transparent;
+`;
+const ButtonTab = styled(Tab).attrs({
+  as: 'button'
+})`
+  color: var(--font-on-mute);
+  transition: color 0.3s, border 0.3s;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--font-on-background);
+  }
+
+  ${_ref2 => {
+  let {
+    active
+  } = _ref2;
+  return active && `
+      border-color: var(--color-primary);
+      color: var(--font-on-background);
+    `;
+}}
+`;
+const InputTab = styled(Tab).attrs({
+  as: 'input'
+})`
+  color: var(--font-on-background);
+  border-color: var(--color-primary);
+  outline: none;
+`;
+export default TabTab;

package/esm/Tab/index.js

@@ -0,0 +1,23 @@
+import Tab from './Tab';
+import TabList from './TabList';
+import TabTab from './TabTab';
+import TabPanel from './TabPanel';
+import TabListV2 from './subComponent/TabListV2';
+import TabTabV2 from './subComponent/TabTabV2';
+import TabPanelV2 from './subComponent/TabPanelV2';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default Object.assign(Tab, {
+  List: TabList,
+  Tab: TabTab,
+  Panel: TabPanel
+});
+const TabV2Base = props => {
+  return /*#__PURE__*/_jsx(Tab, {
+    ...props
+  });
+};
+export const TabV2 = Object.assign(TabV2Base, {
+  List: TabListV2,
+  Tab: TabTabV2,
+  Panel: TabPanelV2
+});

package/esm/Tab/subComponent/TabContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+const TabContext = /*#__PURE__*/createContext(null);
+export default TabContext;

package/esm/Tab/subComponent/TabListV2.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import { jsx as _jsx } from "react/jsx-runtime";
+const TabListV2 = _ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(Container, {
+    role: "tablist",
+    ...props,
+    children: children
+  });
+};
+const Container = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`;
+export default TabListV2;