@zonos/amino 4.3.0 → 4.3.2

package/components/graph-matrix/GraphMatrix.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-fe391a2e.js"),r=require("react/jsx-runtime"),t=require("react"),i=require("@graphiql/react"),n=require("graphiql");require("graphql");var s=require("../../icons/EyeIcon.js"),a=require("../../icons/EyeOffIcon.js"),o=require("../../styles/constants/theme.js"),l=require("../../utils/hooks/_useGraphiqlExplorer.js"),u=require("../../utils/hooks/_useGraphiqlFetcher.js"),c=require("../../utils/hooks/_useGraphiqlStorage.js"),h=require("styled-components"),p=require("../nested-data-table/NestedDataTable.js"),q=require("../split-panel/SplitPanel.js"),d=require("./_GraphiqlContextWrapper.js"),j=require("./_LoadingIcon.js");function g(e){return e&&e.__esModule?e:{default:e}}require("../../icons/icon-base/_IconBase.js"),require("@graphiql/plugin-explorer"),require("swr"),require("../../utils/_graphiqlFetcher.js"),require("../../utils/handleFetch.js"),require("../../utils/hooks/useSwr.js"),require("lodash/kebabCase"),require("../../utils/hooks/useCurrentShema.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("../button/Button.js"),require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js"),require("../rest-state/RestState.js"),require("../text/Text.js"),require("../nested-data-table/_TableData.js"),require("../../icons/ChevronRightCircleIcon.js"),require("../../utils/flattenRow.js"),require("../../utils/setupNestedData.js"),require("../../utils/truncateText.js"),require("../pivot-table/PivotTable.js"),require("react-data-grid"),require("../../icons/ChevronDownIcon.js"),require("../../icons/ChevronUpIcon.js"),require("../../utils/addIndex.js"),require("../tooltip/Tooltip.js"),require("@mui/material/styles"),require("@mui/material/Tooltip"),require("../stack/VStack.js"),require("../stack/Stack.js"),require("../nested-data-table/_Filter.js"),require("../../icons/FilterIcon.js"),require("../../utils/hooks/useDropdown.js"),require("@floating-ui/react-dom"),require("../select/MultiSelect.js"),require("../checkbox/Checkbox.js"),require("../../icons/CheckmarkIcon.js"),require("../../utils/getTestId.js"),require("../help-text/HelpText.js"),require("../select/_StyledReactSelect.js"),require("react-select"),require("../../icons/CheckCircleIcon.js"),require("../../icons/DoubleChevronIcon.js"),require("../../icons/RemoveCircleIcon.js"),require("../../icons/RemoveIcon.js"),require("@zonos/react-split"),require("../../icons/custom/ZonosLogoIcon.js");var b,m,x,_=g(h),v=_.default.div(b||(b=e.__makeTemplateObject(["\n  height: 100%;\n  .graphiql-tab > .graphiql-tab-button {\n    outline: none;\n  }\n  .docExplorerWrap {\n    /* Built-in plugin height is set to 100% which prevents the plugin bar scrolling */\n    height: auto !important;\n    /* Don't cap explorer width */\n    width: auto !important;\n  }\n  .graphiql-explorer-graphql-arguments {\n    svg {\n      display: inline-block;\n    }\n  }\n\n  .graphiql-explorer-root > div {\n    overflow: auto !important;\n  }\n"],["\n  height: 100%;\n  .graphiql-tab > .graphiql-tab-button {\n    outline: none;\n  }\n  .docExplorerWrap {\n    /* Built-in plugin height is set to 100% which prevents the plugin bar scrolling */\n    height: auto !important;\n    /* Don't cap explorer width */\n    width: auto !important;\n  }\n  .graphiql-explorer-graphql-arguments {\n    svg {\n      display: inline-block;\n    }\n  }\n\n  .graphiql-explorer-root > div {\n    overflow: auto !important;\n  }\n"]))),f=_.default.div(m||(m=e.__makeTemplateObject(["\n  height: 100%;\n"],["\n  height: 100%;\n"]))),k=_.default.div(x||(x=e.__makeTemplateObject(["\n  height: 100vh;\n  overflow: auto;\n  padding: 0 ",";\n  display: flex;\n  flex-direction: column;\n"],["\n  height: 100vh;\n  overflow: auto;\n  padding: 0 ",";\n  display: flex;\n  flex-direction: column;\n"])),o.theme.space12),y=function(o){var h=o.fetcher,g=o.loadingComponent,b=o.onEditQuery,m=o.onEditVariables,x=o.onResultData,_=o.query,y=void 0===_?"":_,S=o.schema,C=o.schemaName,E=o.url,I=o.variables,T=void 0===I?"":I,w=o.customToolbar,F=e.__read(t.useState(null),2),D=F[0],G=F[1],R=e.__read(t.useState(null),2)[1],B=e.__read(t.useState(!1),2),O=B[0],L=B[1],N=e.__read(t.useState("first-time"),1)[0],Q=e.__read(t.useState(!1),2),W=Q[0],A=Q[1],M=e.__read(t.useState(""),2),P=M[0],V=M[1],H=u.useGraphiqlFetcher({cachingKey:N,url:E,query:y,customFetcher:h||null,operationName:P}),z=H.graphiqlFetcher,K=H.resultData,U=H.isLoading,Z=c.useGraphiqlStorage({defaultSchema:C});t.useEffect((function(){L(!!(null==D?void 0:D.isFetching)||U)}),[null==D?void 0:D.isFetching,L,U]),t.useEffect((function(){K&&x&&x(K)}),[x,K]);var J=l.useGraphiqlExplorer({onEdit:b,query:y});if(!S)return r.jsx(r.Fragment,{children:g||r.jsx(j.Loading,{})});var X,Y;return r.jsx(v,{children:r.jsxs(q.SplitPanel,e.__assign({collapseAll:!W},{children:[r.jsx(f,{children:r.jsx(n.GraphiQL,e.__assign({fetcher:z,onEditOperationName:V,onEditQuery:b,onEditVariables:m,plugins:[J],query:y,variables:T,schema:S,toolbar:{additionalContent:r.jsxs(r.Fragment,{children:[r.jsx(i.ToolbarButton,e.__assign({label:W?"Hide table":"Show table",onClick:function(){return A(!W)}},{children:W?r.jsx(a.EyeOffIcon,{color:"gray400"}):r.jsx(s.EyeIcon,{color:"gray400"})})),w]})},storage:Z},{children:r.jsx(d.GraphiqlContextWrapper,e.__assign({setExecutionContext:G,setResponseEditorContext:R},{children:r.jsx(n.GraphiQL.Footer,{})}))}))}),(X=null!==K?K.data:K,Y=X?Object.entries(X):null,Y?r.jsx(k,{children:Y.map((function(t){var i=e.__read(t,2),n=i[0],s=i[1];return Array.isArray(s)||s?r.jsx(p.NestedDataTable,{isFetching:O,tableData:s,title:n},n):null}))}):null)]}))})};y.ToolbarButton=i.ToolbarButton,exports.GraphMatrix=y;
+"use strict";var e=require("../../_tslib-fe391a2e.js"),r=require("react/jsx-runtime"),t=require("react"),i=require("@graphiql/react"),n=require("graphiql");require("graphql");var s=require("../../icons/EyeIcon.js"),a=require("../../icons/EyeOffIcon.js"),o=require("../../styles/constants/theme.js"),l=require("../../utils/hooks/_useGraphiqlExplorer.js"),u=require("../../utils/hooks/_useGraphiqlFetcher.js"),c=require("../../utils/hooks/_useGraphiqlStorage.js"),h=require("styled-components"),p=require("../nested-data-table/NestedDataTable.js"),q=require("../split-panel/SplitPanel.js"),d=require("./_GraphiqlContextWrapper.js"),j=require("./_LoadingIcon.js");function g(e){return e&&e.__esModule?e:{default:e}}require("../../icons/icon-base/_IconBase.js"),require("@graphiql/plugin-explorer"),require("swr"),require("../../utils/_graphiqlFetcher.js"),require("../../utils/handleFetch.js"),require("../../utils/hooks/useSwr.js"),require("lodash/kebabCase"),require("../../utils/hooks/useCurrentShema.js"),require("../../utils/hooks/useStorage.js"),require("../../utils/storage.js"),require("../button/Button.js"),require("../spinner/Spinner.js"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../button/useRipple.js"),require("../rest-state/RestState.js"),require("../text/Text.js"),require("../nested-data-table/_TableData.js"),require("../../icons/ChevronRightCircleIcon.js"),require("../../utils/flattenRow.js"),require("../../utils/setupNestedData.js"),require("../../utils/truncateText.js"),require("../pivot-table/PivotTable.js"),require("react-data-grid"),require("../../icons/ChevronDownIcon.js"),require("../../icons/ChevronUpIcon.js"),require("../../utils/addIndex.js"),require("../tooltip/Tooltip.js"),require("@mui/material/styles"),require("@mui/material/Tooltip"),require("../stack/VStack.js"),require("../stack/Stack.js"),require("../nested-data-table/_Filter.js"),require("../../icons/FilterIcon.js"),require("../../utils/hooks/useDropdown.js"),require("@floating-ui/react-dom"),require("../select/MultiSelect.js"),require("../checkbox/Checkbox.js"),require("../../icons/CheckmarkIcon.js"),require("../../utils/getTestId.js"),require("../help-text/HelpText.js"),require("../select/_StyledReactSelect.js"),require("react-select"),require("../../icons/CheckCircleIcon.js"),require("../../icons/DoubleChevronIcon.js"),require("../../icons/RemoveCircleIcon.js"),require("../../icons/RemoveIcon.js"),require("react-split-it"),require("../../icons/custom/ZonosLogoIcon.js");var b,m,x,_=g(h),v=_.default.div(b||(b=e.__makeTemplateObject(["\n  height: 100%;\n  .graphiql-tab > .graphiql-tab-button {\n    outline: none;\n  }\n  .docExplorerWrap {\n    /* Built-in plugin height is set to 100% which prevents the plugin bar scrolling */\n    height: auto !important;\n    /* Don't cap explorer width */\n    width: auto !important;\n  }\n  .graphiql-explorer-graphql-arguments {\n    svg {\n      display: inline-block;\n    }\n  }\n\n  .graphiql-explorer-root > div {\n    overflow: auto !important;\n  }\n"],["\n  height: 100%;\n  .graphiql-tab > .graphiql-tab-button {\n    outline: none;\n  }\n  .docExplorerWrap {\n    /* Built-in plugin height is set to 100% which prevents the plugin bar scrolling */\n    height: auto !important;\n    /* Don't cap explorer width */\n    width: auto !important;\n  }\n  .graphiql-explorer-graphql-arguments {\n    svg {\n      display: inline-block;\n    }\n  }\n\n  .graphiql-explorer-root > div {\n    overflow: auto !important;\n  }\n"]))),f=_.default.div(m||(m=e.__makeTemplateObject(["\n  height: 100%;\n"],["\n  height: 100%;\n"]))),S=_.default.div(x||(x=e.__makeTemplateObject(["\n  height: 100vh;\n  overflow: auto;\n  padding: 0 ",";\n  display: flex;\n  flex-direction: column;\n"],["\n  height: 100vh;\n  overflow: auto;\n  padding: 0 ",";\n  display: flex;\n  flex-direction: column;\n"])),o.theme.space12),k=function(o){var h=o.fetcher,g=o.loadingComponent,b=o.onEditQuery,m=o.onEditVariables,x=o.onResultData,_=o.query,k=void 0===_?"":_,y=o.schema,C=o.schemaName,E=o.url,I=o.variables,T=void 0===I?"":I,w=o.customToolbar,F=e.__read(t.useState(null),2),D=F[0],G=F[1],R=e.__read(t.useState(null),2)[1],B=e.__read(t.useState(!1),2),O=B[0],L=B[1],N=e.__read(t.useState("first-time"),1)[0],Q=e.__read(t.useState(!1),2),W=Q[0],A=Q[1],M=e.__read(t.useState([1,0]),2),P=M[0],V=M[1],z=e.__read(t.useState(""),2),H=z[0],K=z[1],U=u.useGraphiqlFetcher({cachingKey:N,url:E,query:k,customFetcher:h||null,operationName:H}),Z=U.graphiqlFetcher,J=U.resultData,X=U.isLoading,Y=c.useGraphiqlStorage({defaultSchema:C});t.useEffect((function(){L(!!(null==D?void 0:D.isFetching)||X)}),[null==D?void 0:D.isFetching,L,X]),t.useEffect((function(){J&&x&&x(J)}),[x,J]);var $=l.useGraphiqlExplorer({onEdit:b,query:k});if(!y)return r.jsx(r.Fragment,{children:g||r.jsx(j.Loading,{})});var ee,re;return r.jsx(v,{children:r.jsxs(q.SplitPanel,e.__assign({sizes:P,onSetSizes:V,collapseAll:!W},{children:[r.jsx(f,{children:r.jsx(n.GraphiQL,e.__assign({fetcher:Z,onEditOperationName:K,onEditQuery:b,onEditVariables:m,plugins:[$],query:k,variables:T,schema:y,toolbar:{additionalContent:r.jsxs(r.Fragment,{children:[r.jsx(i.ToolbarButton,e.__assign({label:W?"Hide table":"Show table",onClick:function(){return A(!W)}},{children:W?r.jsx(a.EyeOffIcon,{color:"red600"}):r.jsx(s.EyeIcon,{color:"gray400"})})),w]})},storage:Y},{children:r.jsx(d.GraphiqlContextWrapper,e.__assign({setExecutionContext:G,setResponseEditorContext:R},{children:r.jsx(n.GraphiQL.Footer,{})}))}))}),(ee=null!==J?J.data:J,re=ee?Object.entries(ee):null,re?r.jsx(S,{children:re.map((function(t){var i=e.__read(t,2),n=i[0],s=i[1];return Array.isArray(s)||s?r.jsx(p.NestedDataTable,{isFetching:O,tableData:s,title:n},n):null}))}):null)]}))})};k.ToolbarButton=i.ToolbarButton,exports.GraphMatrix=k;

package/components/split-panel/SplitPanel.d.ts

@@ -1,18 +1,30 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
-import { type SplitProps } from '@zonos/react-split';
-type BaseSplitPaneProps = {
+import { type Dispatch, type SetStateAction } from 'react';
+type IProps = {
+    className?: string;
+    direction?: 'horizontal' | 'vertical';
     /**
-     * @param children
-     * @description The content of the component.
+     * @param minSize The minumum size in css pixel
+     * @default 10
      */
-    children: ReactNode;
+    minSize?: number;
     /**
-     * @param className
-     * @description Override or extend the styles applied to the component.
+     * @param gutterSize The size of the gutter in pixels
+     * @default 10
      */
-    className?: string;
+    gutterSize?: number;
+    children: any;
+    /**
+     * @param sizes The initial sizes of the panes
+     * @default 1 (make sure the sum of all sizes is 1)
+     */
+    sizes?: number[];
+    onSetSizes?: Dispatch<SetStateAction<number[]>>;
     collapseAll?: boolean;
+    lineBar?: boolean;
 };
-type SplitPaneProps = BaseSplitPaneProps & Omit<SplitProps, keyof HTMLAttributes<HTMLDivElement>>;
-export declare const SplitPanel: import("react").MemoExoticComponent<({ children, className, visiable, collapseAll, ...props }: SplitPaneProps) => JSX.Element>;
+/**
+ * Split panel component
+ * @ref https://greggman.github.io/react-split-it/
+ */
+export declare const SplitPanel: ({ className, children, collapseAll, direction, gutterSize, sizes, onSetSizes, ...props }: IProps) => JSX.Element;
 export {};

package/components/split-panel/SplitPanel.js

@@ -1 +1 @@
-"use strict";var n=require("../../_tslib-fe391a2e.js"),e=require("react/jsx-runtime"),s=require("react"),i=require("@zonos/react-split"),t=require("styled-components");function a(n){return n&&n.__esModule?n:{default:n}}var l,r=a(i),_=a(t).default(r.default)(l||(l=n.__makeTemplateObject(["\n  > .w-split-pane[style*='width: 0'] {\n    opacity: 0;\n  }\n  > :last-child {\n    flex: 1;\n  }\n"],["\n  > .w-split-pane[style*='width: 0'] {\n    opacity: 0;\n  }\n  > :last-child {\n    flex: 1;\n  }\n"]))),c=s.memo((function(i){var t=i.children,a=i.className;i.visiable;var l=i.collapseAll,r=n.__rest(i,["children","className","visiable","collapseAll"]),c=s.useMemo((function(){return s.Children.toArray(t)}),[t]),o=n.__read(s.useState([]),2),u=o[0],p=o[1],d=n.__read(s.useState([]),2),h=d[0],g=d[1],f=s.useCallback((function(e){var s=e.collapse,i=e.childrenLength;p(s?function(e){return e.map((function(e,s){var i=0===s?"100%":"0";return e?n.__assign(n.__assign({},e),{width:i}):{width:i}}))}:function(e){return s?e:e.map((function(e,s){var t,a=(null===(t=h[s])||void 0===t?void 0:t.width)||"calc(100% / ".concat(i,")");return e?n.__assign(n.__assign({},e),{width:a,opacity:"1"}):{width:a,opacity:"1"}}))})}),[h]);return s.useEffect((function(){if(c.length>0){var e=c.map((function(e){var i=s.Children.only(e);if(!s.isValidElement(i))return null;var t=i.props.style;return t?n.__assign(n.__assign({},t),{width:t.width}):null}));g(e),p(e)}}),[c,c.length]),s.useEffect((function(){f({collapse:!!l,childrenLength:c.length})}),[l,c.length,f]),e.jsx(_,n.__assign({visiable:!l,className:a},r,{children:c.map((function(e,i){var t,a,r=s.Children.only(e);if(!s.isValidElement(r))return null;var _=r.props.style;return l&&i>0?n.__assign(n.__assign({},r),{props:n.__assign(n.__assign({},r.props),{className:"w-split-pane",style:n.__assign(n.__assign({},_),{width:0,opacity:0})})}):r?n.__assign(n.__assign({},r),{props:n.__assign(n.__assign({},r.props),{className:"w-split-pane",style:n.__assign(n.__assign({},_),{width:null===(t=u[i])||void 0===t?void 0:t.width,opacity:null===(a=u[i])||void 0===a?void 0:a.opacity})})}):null}))}))}));exports.SplitPanel=c;
+"use strict";var e=require("../../_tslib-fe391a2e.js"),r=require("react/jsx-runtime"),i=require("react"),n=require("react-split-it"),t=require("styled-components");function l(e){return e&&e.__esModule?e:{default:e}}var s,a=l(n),u=function(r){var i=r.childrenCount,n=r.sizes;if(0===n.length)return e.__spreadArray([1],e.__read(new Array(i-1).fill(0)),!1);if(n.length!==i){var t=Math.abs(i-n.length);return e.__spreadArray(e.__spreadArray([],e.__read(n),!1),e.__read(new Array(t).fill(1)),!1)}var l=n.reduce((function(e,r){return e+r}),0);return n.map((function(e){return e/l}))},d=l(t).default.div(s||(s=e.__makeTemplateObject(["\n  display: block;\n  width: 100%;\n  height: 100%;\n"],["\n  display: block;\n  width: 100%;\n  height: 100%;\n"])));exports.SplitPanel=function(n){var t=n.className,l=n.children,s=n.collapseAll,c=n.direction,_=n.gutterSize,o=void 0===_?3:_,h=n.sizes,f=void 0===h?[1]:h,p=n.onSetSizes,z=e.__rest(n,["className","children","collapseAll","direction","gutterSize","sizes","onSetSizes"]),y=i.Children.count(l),S=e.__read(i.useState(u({childrenCount:y,sizes:f})),1)[0];return i.useEffect((function(){if(1!==S[0]||s)s?null==p||p(e.__spreadArray([1],e.__read(new Array(y-1).fill(0)),!1)):null==p||p(u({childrenCount:y,sizes:S}));else{var r=1/y;null==p||p(new Array(y).fill(r))}}),[y,s,S,p]),r.jsx(d,e.__assign({className:t},{children:r.jsx(a.default,e.__assign({sizes:u({childrenCount:y,sizes:f}),onSetSizes:p,gutterSize:s?0:o,direction:c},z,{children:l}))}))};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zonos/amino",
-  "version": "4.3.0",
+  "version": "4.3.2",
   "description": "Core UI components for Amino",
   "repository": "git@github.com:Zonos/amino.git",
   "license": "MIT",
@@ -21,7 +21,6 @@
     "@mui/material": "^5.8.5",
     "@radix-ui/react-slider": "^0.1.4",
     "@types/topojson-client": "^3.1.1",
-    "@zonos/react-split": "^5.9.1",
     "d3-geo": "^2.0.2",
     "fuse.js": "^6.6.2",
     "highlight.js": "^11.7.0",
@@ -31,6 +30,7 @@
     "react-dropzone": "^12.0.4",
     "react-select": "^5.7.3",
     "react-simple-maps": "^3.0.0",
+    "react-split-it": "^2.0.0",
     "topojson-client": "^3.1.0",
     "uuid": "^8.3.2"
   },

package/split-react.css

@@ -1,186 +1,44 @@
-.w-split {
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-}
-.w-split-bar {
-  z-index: 10;
-  position: relative;
-  justify-content: center;
+.split-horizontal {
   display: flex;
-  background: #f8f8f9;
-  -webkit-user-select: none;
-  user-select: none;
-}
-.w-split-bar::before,
-.w-split-bar::after {
-  content: '';
-  display: block;
-}
-.w-split-bar.disable {
-  pointer-events: none;
-  cursor: not-allowed !important;
-}
-.w-split-bar:hover:not(.disable) {
-  transition: background-color 0.3s;
-  background: #ecf7ff;
-}
-.w-split.dragging .w-split-pane {
-  position: relative;
-}
-.w-split.dragging .w-split-pane::before {
-  content: '';
-  display: block;
-  position: absolute;
-  height: 100%;
   width: 100%;
-  z-index: 10;
-}
-.w-split > .w-split-pane {
-  -webkit-transform: none;
-  transform: none;
-}
-.w-split:not(.dragging) > .w-split-pane {
-  transition: all 0.3s;
-}
-.w-split-horizontal > .w-split-bar {
-  cursor: col-resize;
-  width: 5px;
-  flex-direction: column;
-  box-shadow: inset 1px 0 0 0 #d5d5d5, 1px 0 0 0 #d5d5d5;
-}
-.w-split-horizontal > .w-split-bar::before,
-.w-split-horizontal > .w-split-bar::after {
-  height: 3px;
-  width: 100%;
-  box-shadow: inset 0 1px 0 0 #d5d5d5, 0 1px 0 0 #d5d5d5;
-}
-.w-split-horizontal > .w-split-bar::before {
-  margin-top: -1px;
-}
-.w-split-horizontal > .w-split-bar::after {
-  margin-top: 3px;
-}
-.w-split-horizontal > .w-split-bar.disable {
-  box-shadow: inset 1px 0 0 0 #e6e6e6, 1px 0 0 0 #eaeaea !important;
+  height: 100%;
 }
-.w-split-vertical {
+.split-vertical {
+  display: flex;
   flex-direction: column;
-}
-.w-split-vertical > .w-split-bar {
-  cursor: row-resize;
-  width: 100%;
-  height: 5px;
-  align-items: center;
-  flex-direction: row;
-  box-shadow: inset 0 1px 0 0 #d5d5d5, 0 1px 0 0 #d5d5d5;
-}
-.w-split-vertical > .w-split-bar.disable {
-  box-shadow: inset 0 1px 0 0 #e6e6e6, 0 1px 0 0 #eaeaea !important;
-}
-.w-split-vertical > .w-split-bar::before,
-.w-split-vertical > .w-split-bar::after {
   height: 100%;
-  width: 3px;
-  box-shadow: inset 1px 0 0 0 #d5d5d5, 1px 0 0 0 #d5d5d5;
-}
-.w-split-vertical > .w-split-bar::before {
-  margin-left: -1px;
-}
-.w-split-vertical > .w-split-bar::after {
-  margin-left: 3px;
-}
-.w-split-large-bar div {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-}
-.w-split-vertical > .w-split-line-bar:hover::before,
-.w-split-horizontal > .w-split-line-bar:hover::before {
-  border-color: #008ef0;
 }
-.w-split-vertical > .w-split-line-bar {
-  height: 1px;
+
+.gutter {
+  flex-shrink: 0;
+  flex-grow: 0;
+  background: var(--amino-gray-200);
 }
-.w-split-vertical > .w-split-line-bar div {
-  cursor: row-resize;
-  width: 100%;
-  height: 8px;
-  margin-top: -2px;
-  margin-bottom: -2px;
-}
-.w-split-vertical > .w-split-line-bar div:hover,
-.w-split-vertical > .w-split-line-bar div:active,
-.w-split-vertical > .w-split-line-bar div:focus {
-  margin-top: -6px;
-  margin-bottom: -6px;
-  height: 6px;
-}
-.w-split-vertical > .w-split-line-bar div:hover::after,
-.w-split-vertical > .w-split-line-bar div:active::after,
-.w-split-vertical > .w-split-line-bar div:focus::after {
-  background-color: #008ef0;
-}
-.w-split-vertical > .w-split-line-bar div::after {
-  height: 1px;
-  width: 100%;
-}
-.w-split-horizontal > .w-split-line-bar {
-  width: 1px;
-}
-.w-split-horizontal > .w-split-line-bar div {
+.gutter-horizontal {
   cursor: col-resize;
-  height: 100%;
-  width: 8px;
-  margin-left: -2px;
-  margin-right: -2px;
 }
-.w-split-horizontal > .w-split-line-bar div:hover,
-.w-split-horizontal > .w-split-line-bar div:active,
-.w-split-horizontal > .w-split-line-bar div:focus {
-  margin-left: -6px;
-  margin-right: -6px;
-  width: 6px;
-}
-.w-split-horizontal > .w-split-line-bar div:hover::after,
-.w-split-horizontal > .w-split-line-bar div:active::after,
-.w-split-horizontal > .w-split-line-bar div:focus::after {
-  background-color: #008ef0;
-}
-.w-split-horizontal > .w-split-line-bar div::after {
-  width: 1px;
-  height: 100%;
+.gutter-vertical {
+  cursor: row-resize;
 }
-.w-split-vertical > .w-split-line-bar,
-.w-split-horizontal > .w-split-line-bar {
-  flex-direction: inherit;
+.gutter:hover {
+  background: var(--amino-blue-300);
 }
-.w-split-vertical > .w-split-line-bar::before,
-.w-split-horizontal > .w-split-line-bar::before {
-  display: none;
+.gutter-dragging:hover {
+  background: var(--amino-blue-400);
 }
-.w-split-vertical > .w-split-line-bar div,
-.w-split-horizontal > .w-split-line-bar div {
+
+.pane {
+  flex-shrink: 1;
+  flex-grow: 1;
+  overflow: auto;
   position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
-.w-split-vertical > .w-split-line-bar div::after,
-.w-split-horizontal > .w-split-line-bar div::after {
-  content: '';
-  display: block;
-  background-color: #d5d5d5;
+.pane:not(.pane-dragging) {
+  transition: 0.3s flex-basis ease;
 }
-.w-split-line-bar {
-  box-shadow: inset 0 0 0 0 !important;
-  background: transparent;
-}
-.w-split-line-bar::before {
-  box-shadow: inset 0 0 0 0 !important;
-}
-.w-split-line-bar::after {
+.pane[style*='flex-basis: 0%'] + .gutter {
   display: none;
 }
+.pane-dragging {
+  overflow: hidden;
+}