@perses-dev/dashboards 0.7.1 → 0.8.1

package/dist/cjs/context/TemplateVariableProvider.js

@@ -0,0 +1,216 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TemplateVariableProvider = exports.useTemplateVariableStore = exports.useTemplateVariableDefinitions = exports.useTemplateVariableActions = exports.useTemplateVariable = exports.useTemplateVariableValues = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+const react_1 = require("react");
+const zustand_1 = require("zustand");
+const immer_1 = require("zustand/middleware/immer");
+const middleware_1 = require("zustand/middleware");
+const plugin_system_1 = require("@perses-dev/plugin-system");
+const core_1 = require("@perses-dev/core");
+const TemplateVariableStoreContext = (0, react_1.createContext)(undefined);
+function useTemplateVariableStoreCtx() {
+    const context = (0, react_1.useContext)(TemplateVariableStoreContext);
+    if (!context) {
+        throw new Error('TemplateVariableStoreContext not initialized');
+    }
+    return context;
+}
+function useTemplateVariableValues(variableNames) {
+    const store = useTemplateVariableStoreCtx();
+    const state = (0, zustand_1.useStore)(store, (s) => {
+        const names = variableNames !== null && variableNames !== void 0 ? variableNames : Object.keys(s.variableState);
+        const vars = {};
+        names.forEach((name) => {
+            const varState = s.variableState[name];
+            if (!varState) {
+                return;
+            }
+            vars[name] = varState;
+        });
+        return vars;
+    }, (left, right) => {
+        return JSON.stringify(left) === JSON.stringify(right);
+    });
+    return state;
+}
+exports.useTemplateVariableValues = useTemplateVariableValues;
+function useTemplateVariable(name) {
+    const store = useTemplateVariableStoreCtx();
+    return (0, zustand_1.useStore)(store, (s) => {
+        const variableState = s.variableState[name];
+        const definition = s.variableDefinitions.find((v) => v.name === name);
+        return {
+            state: variableState,
+            definition,
+        };
+    });
+}
+exports.useTemplateVariable = useTemplateVariable;
+function useTemplateVariableActions() {
+    const store = useTemplateVariableStoreCtx();
+    return (0, zustand_1.useStore)(store, (s) => {
+        return {
+            setVariableValue: s.setVariableValue,
+            loadTemplateVariable: s.loadTemplateVariable,
+        };
+    });
+}
+exports.useTemplateVariableActions = useTemplateVariableActions;
+function useTemplateVariableDefinitions() {
+    const store = useTemplateVariableStoreCtx();
+    return (0, zustand_1.useStore)(store, (s) => s.variableDefinitions);
+}
+exports.useTemplateVariableDefinitions = useTemplateVariableDefinitions;
+function useTemplateVariableStore() {
+    const store = useTemplateVariableStoreCtx();
+    return (0, zustand_1.useStore)(store);
+}
+exports.useTemplateVariableStore = useTemplateVariableStore;
+function PluginProvider({ children }) {
+    const values = useTemplateVariableValues();
+    return (0, jsx_runtime_1.jsx)(plugin_system_1.TemplateVariableContext.Provider, { value: { state: values }, children: children });
+}
+function createTemplateVariableSrvStore({ initialVariableDefinitions = [] }) {
+    const store = (0, zustand_1.createStore)()((0, middleware_1.devtools)((0, immer_1.immer)((set, get) => ({
+        variableState: hydrateTemplateVariableStates(initialVariableDefinitions),
+        variableDefinitions: initialVariableDefinitions,
+        // Actions
+        loadTemplateVariable: async (name) => {
+            const def = get().variableDefinitions.find((v) => v.name === name);
+            if (!def) {
+                // Can't find the variable definition
+                return;
+            }
+            set((state) => {
+                const varState = state.variableState[name];
+                if (varState) {
+                    varState.loading = true;
+                }
+            });
+            // Replace with loader
+            const { data: values } = await loadTemplateVariables();
+            if (def.options.allowAllValue) {
+                values.unshift(getAllOption());
+            }
+            set((state) => {
+                const varState = state.variableState[name];
+                if (varState) {
+                    varState.options = values;
+                    varState.loading = false;
+                }
+            });
+            return;
+        },
+        setVariableValue: (name, value) => set((state) => {
+            let val = value;
+            const varState = state.variableState[name];
+            if (!varState) {
+                return;
+            }
+            // Make sure there is only one all value
+            if (Array.isArray(val) && val.includes(core_1.DEFAULT_ALL_VALUE)) {
+                if (val.at(-1) === core_1.DEFAULT_ALL_VALUE) {
+                    val = [core_1.DEFAULT_ALL_VALUE];
+                }
+                else {
+                    val = val.filter((v) => v !== core_1.DEFAULT_ALL_VALUE);
+                }
+            }
+            varState.value = val;
+        }),
+    }))));
+    return store;
+}
+function TemplateVariableProvider({ children, initialVariableDefinitions = [], }) {
+    const store = createTemplateVariableSrvStore({ initialVariableDefinitions });
+    return ((0, jsx_runtime_1.jsx)(TemplateVariableStoreContext.Provider, { value: store, children: (0, jsx_runtime_1.jsx)(PluginProvider, { children: children }) }));
+}
+exports.TemplateVariableProvider = TemplateVariableProvider;
+/** Helpers */
+async function loadTemplateVariables() {
+    // @TODO: Replace with plugin call
+    // simluate sleep for 2 seconds
+    // random time between 1 and 3 seconds
+    const sleepTime = Math.floor(Math.random() * 10000) + 1000;
+    await new Promise((resolve) => setTimeout(resolve, sleepTime));
+    return {
+        data: [
+            'a',
+            'b',
+            'c',
+            'd',
+            'e',
+            'f',
+            'g',
+            'h',
+            'i',
+            'j',
+            'k',
+            'l',
+            'm',
+            'n',
+            'o',
+            'p',
+            'q',
+            'r',
+            's',
+            't',
+            'u',
+            'v',
+            'w',
+            'x',
+            'y',
+            'z',
+        ].map((v) => ({ label: v, value: v })),
+    };
+}
+function getAllOption() {
+    return { label: 'All', value: core_1.DEFAULT_ALL_VALUE };
+}
+function hydrateTemplateVariableState(definition) {
+    var _a, _b;
+    const v = definition;
+    const varState = {
+        value: null,
+        loading: false,
+    };
+    switch (v.kind) {
+        case 'TextVariable':
+            varState.value = v.options.value;
+            break;
+        case 'ListVariable':
+            varState.options = [];
+            if (v.options.allowAllValue) {
+                varState.options.unshift({ label: 'All', value: core_1.DEFAULT_ALL_VALUE });
+            }
+            if (varState.options.length > 0 && !varState.value) {
+                const firstOptionValue = (_b = (_a = varState.options[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null;
+                if (firstOptionValue !== null) {
+                    varState.value = v.options.allowMultiple ? [firstOptionValue] : firstOptionValue;
+                }
+            }
+        default:
+            break;
+    }
+    return varState;
+}
+function hydrateTemplateVariableStates(definitions) {
+    const state = {};
+    definitions.forEach((v) => {
+        state[v.name] = hydrateTemplateVariableState(v);
+    });
+    return state;
+}

package/dist/cjs/context/TimeRangeProvider.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeRangeProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+const react_1 = require("react");
+const date_fns_1 = require("date-fns");
+const core_1 = require("@perses-dev/core");
+const plugin_system_1 = require("@perses-dev/plugin-system");
+/**
+ * Provider implementation that supplies the time range state at runtime.
+ */
+function TimeRangeProvider(props) {
+    const { initialTimeRange, children, onTimeRangeChange } = props;
+    const { queryString, setQueryString } = (0, plugin_system_1.useQueryString)();
+    const defaultTimeRange = (0, core_1.isRelativeTimeRange)(initialTimeRange)
+        ? (0, core_1.toAbsoluteTimeRange)(initialTimeRange)
+        : initialTimeRange;
+    const [timeRange, setActiveTimeRange] = (0, react_1.useState)(defaultTimeRange);
+    const setTimeRange = (0, react_1.useCallback)((value) => {
+        if (onTimeRangeChange !== undefined) {
+            // optional callback to override default behavior
+            onTimeRangeChange(value);
+            return;
+        }
+        if ((0, core_1.isRelativeTimeRange)(value)) {
+            if (setQueryString) {
+                queryString.set('start', value.pastDuration);
+                // end not required for relative time but may have been set by AbsoluteTimePicker or zoom
+                queryString.delete('end');
+                setQueryString(queryString);
+            }
+            else {
+                setActiveTimeRange((0, core_1.toAbsoluteTimeRange)(value));
+            }
+            return;
+        }
+        // allows app to specify whether query params should be source of truth for active time range
+        if (setQueryString) {
+            // Absolute URL example) ?start=1663707045000&end=1663713330000
+            // currently set from ViewDashboard initial queryString, AbsoluteTimePicker, or LineChart panel onDataZoom
+            const startUnixMs = (0, date_fns_1.getUnixTime)(value.start) * 1000;
+            const endUnixMs = (0, date_fns_1.getUnixTime)(value.end) * 1000;
+            queryString.set('start', startUnixMs.toString());
+            queryString.set('end', endUnixMs.toString());
+            setQueryString(queryString);
+        }
+        else {
+            setActiveTimeRange(value);
+        }
+    }, [queryString, setQueryString, onTimeRangeChange]);
+    const ctx = (0, react_1.useMemo)(() => ({ timeRange, setTimeRange }), [timeRange, setTimeRange]);
+    return (0, jsx_runtime_1.jsx)(plugin_system_1.TimeRangeContext.Provider, { value: ctx, children: children });
+}
+exports.TimeRangeProvider = TimeRangeProvider;

package/dist/cjs/context/index.js

@@ -1,5 +1,5 @@
 "use strict";
-// Copyright 2021 The Perses Authors
+// Copyright 2022 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -26,6 +26,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./TemplateVariablesProvider"), exports);
-__exportStar(require("./TimeRangeStateProvider"), exports);
+__exportStar(require("./DashboardAppSlice"), exports);
+__exportStar(require("./LayoutsSlice"), exports);
+__exportStar(require("./TemplateVariableProvider"), exports);
 __exportStar(require("./DashboardProvider"), exports);
+__exportStar(require("./TimeRangeProvider"), exports);
+__exportStar(require("./QueryStringProvider"), exports);

package/dist/cjs/css/styles.js

@@ -12,173 +12,177 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    '&.react-grid-layout': {
-        position: 'relative',
-        transition: 'height 200ms ease',
-    },
-    '&.react-grid-item': {
-        transition: 'all 200ms ease',
-        transitionProperty: 'left, top',
-    },
-    '&.react-grid-item img': {
-        pointerEvents: 'none',
-        userSelect: 'none',
-    },
-    '&.react-grid-item.cssTransforms': {
-        transitionProperty: 'transform',
-    },
-    '&.react-grid-item.resizing': {
-        zIndex: 1,
-        willChange: 'width, height',
-    },
-    '&.react-grid-item.react-draggable-dragging': {
-        transition: 'none',
-        zIndex: 3,
-        willChange: 'transform',
-    },
-    '&.react-grid-item.dropping': {
-        visibility: 'hidden',
-    },
-    '&.react-grid-item.react-grid-placeholder': {
-        background: 'red',
-        opacity: 0.2,
-        transitionDuration: '100ms',
-        zIndex: 2,
-        userSelect: 'none',
-        '-webkit-user-select': 'none',
-        '-moz-user-select': 'none',
-        '-ms-user-select': 'none',
-        '-o-user-select': 'none',
-    },
-    '&.react-grid-item > .react-resizable-handle': {
-        position: 'absolute',
-        width: '20px',
-        height: '20px',
-    },
-    '&.react-grid-item > .react-resizable-handle::after': {
-        content: '""',
-        position: 'absolute',
-        right: '3px',
-        bottom: '3px',
-        width: '5px',
-        height: '5px',
-        borderRight: '2px solid rgba(0, 0, 0, 0.4)',
-        borderBottom: '2px solid rgba(0, 0, 0, 0.4)',
-    },
-    '&.react-resizable-hide > .react-resizable-handle': {
-        display: 'none',
-    },
-    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {
-        bottom: '0',
-        left: '0',
-        cursor: 'sw-resize',
-        transform: 'rotate(90deg)',
-    },
-    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
-        bottom: '0',
-        right: '0',
-        cursor: 'se-resize',
-    },
-    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {
-        top: '0',
-        left: '0',
-        cursor: 'nw-resize',
-        transform: 'rotate(180deg)',
-    },
-    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-ne': {
-        top: '0',
-        right: '0',
-        cursor: 'ne-resize',
-        transform: 'rotate(270deg)',
-    },
-    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-w, &.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
-        top: '50%',
-        marginTop: '-10px',
-        cursor: 'ew-resize',
-    },
-    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-w': {
-        left: '0',
-        transform: 'rotate(135deg)',
-    },
-    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
-        right: '0',
-        transform: 'rotate(315deg)',
-    },
-    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-n, &.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
-        left: '50%',
-        marginLeft: '-10px',
-        cursor: 'ns-resize',
-    },
-    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-n': {
-        top: '0',
-        transform: 'rotate(225deg)',
-    },
-    '&.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
-        bottom: '0',
-        transform: 'rotate(45deg)',
-    },
-    '&.react-resizable': {
-        position: 'relative',
-    },
-    '&.react-resizable-handle': {
-        position: 'absolute',
-        width: '20px',
-        height: '20px',
-        backgroundRepeat: 'no-repeat',
-        backgroundOrigin: 'content-box',
-        boxSizing: 'border-box',
-        backgroundImage: `url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')`,
-        backgroundPosition: 'bottom right',
-        padding: '0 3px 3px 0',
-    },
-    '&.react-resizable-handle-sw': {
-        bottom: '0',
-        left: '0',
-        cursor: 'sw-resize',
-        transform: 'rotate(90deg)',
-    },
-    '&.react-resizable-handle-se': {
-        bottom: '0',
-        right: '0',
-        cursor: 'se-resize',
-    },
-    '&.react-resizable-handle-nw': {
-        top: '0',
-        left: '0',
-        cursor: 'nw-resize',
-        transform: 'rotate(180deg)',
-    },
-    '&.react-resizable-handle-ne': {
-        top: '0',
-        right: '0',
-        cursor: 'ne-resize',
-        transform: 'rotate(270deg)',
-    },
-    '&.react-resizable-handle-w, .react-resizable-handle-e': {
-        top: '50%',
-        marginTop: '-10px',
-        cursor: 'ew-resize',
-    },
-    '&.react-resizable-handle-w': {
-        left: '0',
-        transform: 'rotate(135deg)',
-    },
-    '&.react-resizable-handle-e': {
-        right: '0',
-        transform: 'rotate(315deg)',
-    },
-    '&.react-resizable-handle-n, .react-resizable-handle-s': {
-        left: '50%',
-        marginLeft: '-10px',
-        cursor: 'ns-resize',
-    },
-    '&.react-resizable-handle-n': {
-        top: '0',
-        transform: 'rotate(225deg)',
-    },
-    '&.react-resizable-handle-s': {
-        bottom: '0',
-        transform: 'rotate(45deg)',
-    },
+exports.styles = void 0;
+const styles = (theme) => {
+    return {
+        '&.react-grid-layout': {
+            position: 'relative',
+            transition: 'height 200ms ease',
+        },
+        '&.react-grid-item': {
+            transition: 'all 200ms ease',
+            transitionProperty: 'left, top',
+        },
+        '&.react-grid-item img': {
+            pointerEvents: 'none',
+            userSelect: 'none',
+        },
+        '&.react-grid-item.cssTransforms': {
+            transitionProperty: 'transform',
+        },
+        '&.react-grid-item.resizing': {
+            zIndex: 1,
+            willChange: 'width, height',
+        },
+        '&.react-grid-item.react-draggable-dragging': {
+            transition: 'none',
+            zIndex: 3,
+            willChange: 'transform',
+        },
+        '&.react-grid-item.dropping': {
+            visibility: 'hidden',
+        },
+        '&.react-grid-item.react-grid-placeholder': {
+            background: theme.palette.primary.main,
+            opacity: 0.2,
+            transitionDuration: '100ms',
+            zIndex: 2,
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
+            MozUserSelect: 'none',
+            msUserSelect: 'none',
+            OUserSelect: 'none',
+        },
+        '&.react-grid-item > .react-resizable-handle': {
+            position: 'absolute',
+            width: '20px',
+            height: '20px',
+        },
+        '&.react-grid-item > .react-resizable-handle::after': {
+            content: '""',
+            position: 'absolute',
+            right: '3px',
+            bottom: '3px',
+            width: '5px',
+            height: '5px',
+            borderRight: '2px solid rgba(0, 0, 0, 0.4)',
+            borderBottom: '2px solid rgba(0, 0, 0, 0.4)',
+        },
+        '&.react-resizable-hide > .react-resizable-handle': {
+            display: 'none',
+        },
+        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {
+            bottom: '0',
+            left: '0',
+            cursor: 'sw-resize',
+            transform: 'rotate(90deg)',
+        },
+        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
+            bottom: '0',
+            right: '0',
+            cursor: 'se-resize',
+        },
+        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {
+            top: '0',
+            left: '0',
+            cursor: 'nw-resize',
+            transform: 'rotate(180deg)',
+        },
+        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-ne': {
+            top: '0',
+            right: '0',
+            cursor: 'ne-resize',
+            transform: 'rotate(270deg)',
+        },
+        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-w, &.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
+            top: '50%',
+            marginTop: '-10px',
+            cursor: 'ew-resize',
+        },
+        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-w': {
+            left: '0',
+            transform: 'rotate(135deg)',
+        },
+        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
+            right: '0',
+            transform: 'rotate(315deg)',
+        },
+        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-n, &.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
+            left: '50%',
+            marginLeft: '-10px',
+            cursor: 'ns-resize',
+        },
+        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-n': {
+            top: '0',
+            transform: 'rotate(225deg)',
+        },
+        '&.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
+            bottom: '0',
+            transform: 'rotate(45deg)',
+        },
+        '&.react-resizable': {
+            position: 'relative',
+        },
+        '&.react-resizable-handle': {
+            position: 'absolute',
+            width: '20px',
+            height: '20px',
+            backgroundRepeat: 'no-repeat',
+            backgroundOrigin: 'content-box',
+            boxSizing: 'border-box',
+            backgroundImage: `url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')`,
+            backgroundPosition: 'bottom right',
+            padding: '0 3px 3px 0',
+        },
+        '&.react-resizable-handle-sw': {
+            bottom: '0',
+            left: '0',
+            cursor: 'sw-resize',
+            transform: 'rotate(90deg)',
+        },
+        '&.react-resizable-handle-se': {
+            bottom: '0',
+            right: '0',
+            cursor: 'se-resize',
+        },
+        '&.react-resizable-handle-nw': {
+            top: '0',
+            left: '0',
+            cursor: 'nw-resize',
+            transform: 'rotate(180deg)',
+        },
+        '&.react-resizable-handle-ne': {
+            top: '0',
+            right: '0',
+            cursor: 'ne-resize',
+            transform: 'rotate(270deg)',
+        },
+        '&.react-resizable-handle-w, .react-resizable-handle-e': {
+            top: '50%',
+            marginTop: '-10px',
+            cursor: 'ew-resize',
+        },
+        '&.react-resizable-handle-w': {
+            left: '0',
+            transform: 'rotate(135deg)',
+        },
+        '&.react-resizable-handle-e': {
+            right: '0',
+            transform: 'rotate(315deg)',
+        },
+        '&.react-resizable-handle-n, .react-resizable-handle-s': {
+            left: '50%',
+            marginLeft: '-10px',
+            cursor: 'ns-resize',
+        },
+        '&.react-resizable-handle-n': {
+            top: '0',
+            transform: 'rotate(225deg)',
+        },
+        '&.react-resizable-handle-s': {
+            bottom: '0',
+            transform: 'rotate(45deg)',
+        },
+    };
 };
+exports.styles = styles;