@cashub/ui 0.49.0-beta.0 → 0.49.0-beta.2

package/icon/Icon.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = require("styled-components");
+var _image = require("../image");
+var _registry = _interopRequireDefault(require("./registry"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Icon = _ref => {
+  let {
+    src,
+    iconKey,
+    color,
+    size,
+    ...rest
+  } = _ref;
+  const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
+  const override = theme?.useModernIcons && iconKey && _registry.default[iconKey];
+  const IconComponent = override || src;
+  const isComponent = typeof IconComponent === 'function';
+  return isComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    style: {
+      display: 'inline-flex',
+      width: size || '48px',
+      height: size || '48px',
+      color: color || 'var(--color-primary)'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {})
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.ImageFluid, {
+    crossOrigin: "anonymous",
+    src: IconComponent,
+    ...rest
+  });
+};
+var _default = exports.default = Icon;

package/icon/assets/announcement.jsx

@@ -0,0 +1,6 @@
+const AnnouncementIcon = () => (
+  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+    <path d="M446.336 216.618667a32.853333 32.853333 0 0 1 32.853333 32.853333v295.338667h295.381334a32.853333 32.853333 0 0 1 32.554666 28.714666l0.256 4.138667a361.045333 361.045333 0 1 1-361.002666-361.045333z m-32.810667 67.456l-3.541333 0.426666a295.424 295.424 0 0 0 36.352 588.544 295.381333 295.381333 0 0 0 293.205333-258.986666l0.341334-3.584h-293.546667a32.810667 32.810667 0 0 1-32.554667-28.714667l-0.256-4.096v-293.546667zM610.474667 85.333333A328.192 328.192 0 0 1 938.666667 413.525333a32.810667 32.810667 0 0 1-32.853334 32.853334h-295.338666a32.810667 32.810667 0 0 1-32.853334-32.853334V118.186667a32.853333 32.853333 0 0 1 32.853334-32.810667z m32.810666 67.669334v227.712h227.669334l-0.341334-2.816a262.741333 262.741333 0 0 0-224.512-224.512l-2.816-0.426667z" />
+  </svg>
+);
+export default AnnouncementIcon;

package/icon/assets/master-data.jsx

@@ -0,0 +1,7 @@
+const MasterDataIcon = () => (
+  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+    <path d="M933.76 465.066667a53.802667 53.802667 0 0 0-31.658667-41.130667l-75.52-33.28a62.848 62.848 0 0 1-37.248-64.426667l8.917334-82.048a53.76 53.76 0 0 0-19.882667-48.085333 426.624 426.624 0 0 0-110.72-64.085333 53.802667 53.802667 0 0 0-51.498667 6.784L549.290667 187.306667a62.933333 62.933333 0 0 1-74.581334 0l-66.56-48.853334a53.802667 53.802667 0 0 0-51.541333-6.826666A426.581333 426.581333 0 0 0 245.888 195.84a53.845333 53.845333 0 0 0-19.882667 48.085333l8.96 82.048a62.848 62.848 0 0 1-37.290666 64.426667l-75.776 33.578667a53.802667 53.802667 0 0 0-31.658667 41.258666 420.949333 420.949333 0 0 0 0 128 53.802667 53.802667 0 0 0 31.658667 41.002667l75.52 33.322667a62.805333 62.805333 0 0 1 37.248 64.384l-8.917334 82.56a53.845333 53.845333 0 0 0 19.925334 48.085333 425.728 425.728 0 0 0 110.677333 64.128 53.674667 53.674667 0 0 0 51.498667-6.826667l66.730666-48.853333a62.933333 62.933333 0 0 1 74.581334 0l66.730666 48.853333a53.76 53.76 0 0 0 51.498667 6.826667 425.728 425.728 0 0 0 110.677333-64.128 53.76 53.76 0 0 0 20.181334-48.085333l-8.96-82.048a62.848 62.848 0 0 1 37.290666-64.384l75.52-33.834667a53.717333 53.717333 0 0 0 31.658667-41.258667 420.864 420.864 0 0 0 0-128v0.128z m-74.666667 103.850666l-63.701333 28.032a139.904 139.904 0 0 0-82.901333 143.616l7.552 69.205334c-21.333333 15.872-44.458667 29.269333-68.864 39.893333l-56.32-41.216a139.818667 139.818667 0 0 0-165.76 0l-56.277334 41.216a347.178667 347.178667 0 0 1-68.864-39.893333l7.552-69.205334a139.946667 139.946667 0 0 0-82.901333-143.616l-63.701333-28.032a343.338667 343.338667 0 0 1 0-79.658666l63.701333-28.074667A139.946667 139.946667 0 0 0 311.466667 317.568l-7.552-69.162667a347.221333 347.221333 0 0 1 68.864-39.936l56.32 41.216a139.776 139.776 0 0 0 165.76 0l56.277333-41.216c24.405333 10.666667 47.488 24.021333 68.864 39.936l-7.552 69.162667a139.946667 139.946667 0 0 0 82.901333 143.616l63.701334 28.074667a343.466667 343.466667 0 0 1 0 79.658666z" />
+    <path d="M512.042667 386.048a143.061333 143.061333 0 1 0 0 286.122667 143.061333 143.061333 0 0 0 0-286.122667z m0 208.853333a65.792 65.792 0 1 1 0-131.626666 65.792 65.792 0 0 1 0 131.626666z" />
+  </svg>
+);
+export default MasterDataIcon;

package/icon/assets/system-setting.jsx

@@ -0,0 +1,8 @@
+const SystemSettingIcon = () => (
+  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+    <path d="M689.749333 653.952H334.208a35.541333 35.541333 0 0 0 0 71.082667h355.541333a35.541333 35.541333 0 1 0 0-71.082667z" />
+    <path d="M796.416 262.869333h-56.874667L586.666667 115.328A108.458667 108.458667 0 0 0 511.786667 85.333333h-0.298667c-27.904 0-54.698667 10.752-74.88 29.994667L284.416 262.869333H227.541333A142.208 142.208 0 0 0 85.333333 405.077333v391.125334a142.208 142.208 0 0 0 142.208 142.208h568.874667A142.250667 142.250667 0 0 0 938.666667 796.16V405.034667a142.208 142.208 0 0 0-142.250667-142.165334z m-310.058667-96.341333l0.042667 0.042667a35.541333 35.541333 0 0 1 51.2-0.042667l99.925333 96.341333H386.474667l99.882666-96.341333z m381.184 629.632v0.085333a71.082667 71.082667 0 0 1-71.125333 71.04H227.541333a71.125333 71.125333 0 0 1-71.125333-71.125333V405.077333a71.168 71.168 0 0 1 71.125333-71.082666h568.917334c39.253333 0 71.082667 31.829333 71.082666 71.082666v391.082667z" />
+    <path d="M689.749333 476.16H334.165333a35.584 35.584 0 0 0-35.498666 35.584v0.042667c0 19.626667 15.914667 35.541333 35.541333 35.541333h355.584c19.626667 0 35.541333-15.957333 35.541333-35.584v-0.085333a35.498667 35.498667 0 0 0-35.584-35.498667z" />
+  </svg>
+);
+export default SystemSettingIcon;

package/icon/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Icon", {
+  enumerable: true,
+  get: function () {
+    return _Icon.default;
+  }
+});
+var _Icon = _interopRequireDefault(require("./Icon"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/{dist/icon → icon}/registry.js

@@ -34,6 +34,9 @@ var _shieldNoSignal = _interopRequireDefault(require("./assets/shield-no-signal"
 var _battery = _interopRequireDefault(require("./assets/battery"));
 var _folder = _interopRequireDefault(require("./assets/folder"));
 var _heartbeats = _interopRequireDefault(require("./assets/heartbeats"));
+var _announcement = _interopRequireDefault(require("./assets/announcement"));
+var _masterData = _interopRequireDefault(require("./assets/master-data"));
+var _systemSetting = _interopRequireDefault(require("./assets/system-setting"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const iconOverrides = {
   merchant: _merchant.default,
@@ -65,6 +68,9 @@ const iconOverrides = {
   'shield-no-signal': _shieldNoSignal.default,
   battery: _battery.default,
   folder: _folder.default,
-  heartbeats: _heartbeats.default
+  heartbeats: _heartbeats.default,
+  announcement: _announcement.default,
+  'master-data': _masterData.default,
+  'system-setting': _systemSetting.default
 };
 var _default = exports.default = iconOverrides;

package/{dist/iconbox → iconbox}/bgImageRegistry.js

@@ -8,11 +8,13 @@ var _bgEnterprise = _interopRequireDefault(require("./assets/bg-enterprise.png")
 var _bgMerchant = _interopRequireDefault(require("./assets/bg-merchant.png"));
 var _bgTerminal = _interopRequireDefault(require("./assets/bg-terminal.png"));
 var _bgUser = _interopRequireDefault(require("./assets/bg-user.png"));
+var _bgAppManagement = _interopRequireDefault(require("./assets/bg-app-management.png"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const bgImageRegistry = {
   enterprise: _bgEnterprise.default,
   merchant: _bgMerchant.default,
   terminal: _bgTerminal.default,
-  user: _bgUser.default
+  user: _bgUser.default,
+  'app-management': _bgAppManagement.default
 };
 var _default = exports.default = bgImageRegistry;

package/{dist/index.js → index.js}

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   Dropdown: true,
+  Icon: true,
   Tab: true,
   TabV2: true,
   VerticalTab: true
@@ -15,6 +16,12 @@ Object.defineProperty(exports, "Dropdown", {
     return _dropdown.default;
   }
 });
+Object.defineProperty(exports, "Icon", {
+  enumerable: true,
+  get: function () {
+    return _Icon.default;
+  }
+});
 Object.defineProperty(exports, "Tab", {
   enumerable: true,
   get: function () {
@@ -285,6 +292,7 @@ Object.keys(_heading).forEach(function (key) {
     }
   });
 });
+var _Icon = _interopRequireDefault(require("./Icon"));
 var _iconbox = require("./iconbox");
 Object.keys(_iconbox).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/{src/layout → layout}/AsideHeader.jsx

@@ -3,25 +3,21 @@ import headerStyle from '../styles/config/header.style';
 import media from '../styles/mixin/media';
 import Logo from './Logo';
 import MenuIcon from './MenuIcon';
-
-const AsideHeader = ({ theme, logo, hasSidebar, toggleSidebar }) => {
+const AsideHeader = ({ logo, hasSidebar, toggleSidebar }) => {
   return (
     <Brand>
-      {hasSidebar && <MenuIcon theme={theme} toggleSidebar={toggleSidebar} />}
-      {logo && <Logo src={logo} />}
+      {hasSidebar && <MenuIcon toggleSidebar={toggleSidebar} />}
+      {logo && <Logo srcColor={logo.color} srcWhite={logo.white} />}
     </Brand>
   );
 };
-
 const Brand = styled.div`
   display: none;
   height: ${headerStyle.height};
-
   ${media.tablet`
     padding: 0 var(--spacing-xs);
     align-items: center;
     display: flex
   `};
 `;
-
 export default AsideHeader;

package/package.json

@@ -1,64 +1,55 @@
-{
-  "name": "@cashub/ui",
-  "version": "0.49.0-beta.0",
-  "private": false,
-  "author": "CasHUB Team",
-  "description": "CasHUB UI components library",
-  "main": "index.js",
-  "keywords": [
-    "CasHUB"
-  ],
-  "license": "MIT",
-  "scripts": {
-    "release": "npm run clean && npm run build && npm run copy",
-    "build": "node ../../scripts/build.js",
-    "copy": "node ../../scripts/copy-file.js",
-    "test": "node ../../scripts/test.js",
-    "test:coverage": "node ../../scripts/test.js --coverage",
-    "test:dev": "node ../../scripts/test.js --watch",
-    "clean": "rm -rf dist/*"
-  },
-  "dependencies": {
-    "@cashub/hooks": "^0.5.3",
-    "@cashub/utils": "^1.3.2",
-    "@googlemaps/markerclusterer": "^2.5.1",
-    "@googlemaps/react-wrapper": "^1.1.35",
-    "@monaco-editor/react": "^4.6.0",
-    "@popperjs/core": "^2.11.5",
-    "@yaireo/tagify": "^4.12.0",
-    "brace": "^0.11.1",
-    "chart.js": "^3.8.0",
-    "cropperjs": "^1.5.12",
-    "jsoneditor": "^9.8.0",
-    "jsoneditor-react": "^3.1.2",
-    "leaflet": "^1.7.1",
-    "leaflet-draw": "^1.0.4",
-    "lodash.uniqueid": "^4.0.1",
-    "moment": "^2.29.3",
-    "normalize.css": "^8.0.1",
-    "overlapping-marker-spiderfier": "^1.1.4",
-    "qrcode.react": "^3.0.2",
-    "rc-time-picker": "^3.7.3",
-    "react-chartjs-2": "^3.3.0",
-    "react-datepicker": "^4.8.0",
-    "react-helmet-async": "^2.0.3",
-    "react-leaflet": "^3.1.0",
-    "react-leaflet-markercluster": "^3.0.0-rc1",
-    "react-outside-click-handler": "^1.3.0",
-    "react-popper": "^2.3.0",
-    "react-router-dom": "^5.2.0",
-    "react-toastify": "^7.0.4",
-    "react-transition-group": "^4.4.2",
-    "react-window": "^1.8.11",
-    "styled-components": "^5.3.0",
-    "treeflex": "^2.0.1",
-    "xml-formatter": "^3.6.3"
-  },
-  "peerDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "@cashub/ui",
+  "version": "0.49.0-beta.2",
+  "private": false,
+  "author": "CasHUB Team",
+  "description": "CasHUB UI components library",
+  "main": "index.js",
+  "keywords": [
+    "CasHUB"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@cashub/hooks": "^0.5.3",
+    "@cashub/utils": "^1.3.2",
+    "@googlemaps/markerclusterer": "^2.5.1",
+    "@googlemaps/react-wrapper": "^1.1.35",
+    "@monaco-editor/react": "^4.6.0",
+    "@popperjs/core": "^2.11.5",
+    "@yaireo/tagify": "^4.12.0",
+    "brace": "^0.11.1",
+    "chart.js": "^3.8.0",
+    "cropperjs": "^1.5.12",
+    "jsoneditor": "^9.8.0",
+    "jsoneditor-react": "^3.1.2",
+    "leaflet": "^1.7.1",
+    "leaflet-draw": "^1.0.4",
+    "lodash.uniqueid": "^4.0.1",
+    "moment": "^2.29.3",
+    "normalize.css": "^8.0.1",
+    "overlapping-marker-spiderfier": "^1.1.4",
+    "qrcode.react": "^3.0.2",
+    "rc-time-picker": "^3.7.3",
+    "react-chartjs-2": "^3.3.0",
+    "react-datepicker": "^4.8.0",
+    "react-helmet-async": "^2.0.3",
+    "react-leaflet": "^3.1.0",
+    "react-leaflet-markercluster": "^3.0.0-rc1",
+    "react-outside-click-handler": "^1.3.0",
+    "react-popper": "^2.3.0",
+    "react-router-dom": "^5.2.0",
+    "react-toastify": "^7.0.4",
+    "react-transition-group": "^4.4.2",
+    "react-window": "^1.8.11",
+    "styled-components": "^5.3.0",
+    "treeflex": "^2.0.1",
+    "xml-formatter": "^3.6.3"
+  },
+  "peerDependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/{dist/styles → styles}/theme/dark.theme.js

@@ -20,6 +20,7 @@ const colorStyle = {
   bgColor1: '#13142e',
   bgColor2: '#222143',
   bgColor3: '#2d2a5d',
+  bgColor4: '#222143',
   backdropBg: 'rgba(0, 0, 0, 0.75)',
   useLightBrand: true,
   hideMainDecoration: true

package/{dist/styles → styles}/theme/ember.theme.js

@@ -10,8 +10,8 @@ const colorStyle = {
   colorGrey: '#A38A8A',
   colorPrimary: '#D9211E',
   colorSuccess: '#3A86BD',
-  colorWarning: '#EC7084',
-  colorDanger: '#8B1E9E',
+  colorWarning: '#EAB308',
+  colorDanger: '#EC7084',
   colorHover: 'rgba(217, 33, 30, 0.1)',
   colorActive: 'rgba(217, 33, 30, 0.15)',
   scrollBarColor: 'rgba(217, 33, 30, 0.3)',

package/{dist/styles → styles}/theme/light.theme.js

@@ -20,6 +20,7 @@ const colorStyle = {
   bgColor1: '#F0ECFF',
   bgColor2: '#F8F4FF',
   bgColor3: '#E6E1FF',
+  bgColor4: '#F8F4FF',
   backdropBg: 'rgba(0, 0, 0, 0.75)'
 };
 

package/{dist/styles → styles}/theme/white.theme.js

@@ -20,6 +20,7 @@ const colorStyle = {
   bgColor1: '#EEEEEE',
   bgColor2: '#F7F7F7',
   bgColor3: '#FFFFFF',
+  bgColor4: '#F7F7F7',
   backdropBg: 'rgba(0, 0, 0, 0.75)',
   useModernIcons: false,
   useLightBrand: false,

package/dist/layout/AsideHeader.jsx

@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-import headerStyle from '../styles/config/header.style';
-import media from '../styles/mixin/media';
-import Logo from './Logo';
-import MenuIcon from './MenuIcon';
-
-const AsideHeader = ({ theme, logo, hasSidebar, toggleSidebar }) => {
-  return (
-    <Brand>
-      {hasSidebar && <MenuIcon theme={theme} toggleSidebar={toggleSidebar} />}
-      {logo && <Logo src={logo} />}
-    </Brand>
-  );
-};
-
-const Brand = styled.div`
-  display: none;
-  height: ${headerStyle.height};
-
-  ${media.tablet`
-    padding: 0 var(--spacing-xs);
-    align-items: center;
-    display: flex
-  `};
-`;
-
-export default AsideHeader;

package/dist/package.json

@@ -1,55 +0,0 @@
-{
-  "name": "@cashub/ui",
-  "version": "0.48.30",
-  "private": false,
-  "author": "CasHUB Team",
-  "description": "CasHUB UI components library",
-  "main": "index.js",
-  "keywords": [
-    "CasHUB"
-  ],
-  "license": "MIT",
-  "dependencies": {
-    "@cashub/hooks": "^0.5.3",
-    "@cashub/utils": "^1.3.2",
-    "@googlemaps/markerclusterer": "^2.5.1",
-    "@googlemaps/react-wrapper": "^1.1.35",
-    "@monaco-editor/react": "^4.6.0",
-    "@popperjs/core": "^2.11.5",
-    "@yaireo/tagify": "^4.12.0",
-    "brace": "^0.11.1",
-    "chart.js": "^3.8.0",
-    "cropperjs": "^1.5.12",
-    "jsoneditor": "^9.8.0",
-    "jsoneditor-react": "^3.1.2",
-    "leaflet": "^1.7.1",
-    "leaflet-draw": "^1.0.4",
-    "lodash.uniqueid": "^4.0.1",
-    "moment": "^2.29.3",
-    "normalize.css": "^8.0.1",
-    "overlapping-marker-spiderfier": "^1.1.4",
-    "qrcode.react": "^3.0.2",
-    "rc-time-picker": "^3.7.3",
-    "react-chartjs-2": "^3.3.0",
-    "react-datepicker": "^4.8.0",
-    "react-helmet-async": "^2.0.3",
-    "react-leaflet": "^3.1.0",
-    "react-leaflet-markercluster": "^3.0.0-rc1",
-    "react-outside-click-handler": "^1.3.0",
-    "react-popper": "^2.3.0",
-    "react-router-dom": "^5.2.0",
-    "react-toastify": "^7.0.4",
-    "react-transition-group": "^4.4.2",
-    "react-window": "^1.8.11",
-    "styled-components": "^5.3.0",
-    "treeflex": "^2.0.1",
-    "xml-formatter": "^3.6.3"
-  },
-  "peerDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}

package/setupTests.js

@@ -1,9 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
-
-// mock ResizeObserverModule
-import * as ResizeObserverModule from 'resize-observer-polyfill';
-global.ResizeObserver = ResizeObserverModule.default;

package/src/Tab/Tab.js

@@ -1,11 +0,0 @@
-import TabContext from './subComponent/TabContext';
-
-const Tab = ({ children, selected, onChange, mode = 'view', onTitleChange }) => {
-  return (
-    <TabContext.Provider value={{ selected, onChange, mode, onTitleChange }}>
-      {children}
-    </TabContext.Provider>
-  );
-};
-
-export default Tab;

package/src/Tab/TabList.js

@@ -1,159 +0,0 @@
-import { useRef, useState, useCallback, useEffect } from 'react';
-import styled from 'styled-components';
-import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
-import { Button } from '../button';
-
-const MAX_MOVE_PIXEL = 300;
-const TabList = ({ children, wrap = true, ...props }) => {
-  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 (
-    <Container role='tablist' $wrap={wrap} {...props}>
-      {wrap ? (
-        children
-      ) : (
-        <>
-          <TabWrapper ref={wrapperRef}>{children}</TabWrapper>
-
-          {exceedContainerWidth && (
-            <Paginate>
-              <Button
-                aria-label='Previous'
-                reverse
-                onClick={handlePrevious}
-                iconOnly
-                disabled={!hasPrevious}
-              >
-                <FaAngleLeft />
-              </Button>
-              <Button
-                aria-label='Next'
-                reverse
-                onClick={handleNext}
-                iconOnly
-                disabled={!hasNext}
-              >
-                <FaAngleRight />
-              </Button>
-            </Paginate>
-          )}
-        </>
-      )}
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  position: relative;
-  border-bottom: var(--border-width) solid var(--border-color);
-  margin-bottom: var(--spacing);
-
-  ${({ $wrap }) => !$wrap && 'white-space: nowrap;'}
-
-  ${({ noMargin }) => 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/src/Tab/TabPanel.js

@@ -1,35 +0,0 @@
-import { useContext, useEffect, useState, useMemo } from 'react';
-import styled from 'styled-components';
-import TabContext from './subComponent/TabContext';
-
-const TabPanel = ({ children, name, ...props }) => {
-  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 (
-    <Panel role='tabpanel' $display={selected === name} {...props}>
-      {tabContent}
-    </Panel>
-  );
-};
-
-const Panel = styled.div`
-  display: ${({ $display }) => ($display ? 'block' : 'none')};
-  position: relative;
-`;
-
-export default TabPanel;