@lobehub/ui 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 LobeHub
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,144 @@
+<a name="readme-top"></a>
+
+<div align="center">
+  
+<img width="160" src="https://raw.githubusercontent.com/lobehub/.github/main/profile/Logo.webp">
+
+<h1>Lobe UI</h1>
+
+Lobe UI is an open-source UI component library for building chatbot web apps
+  
+[Changelog](./CHANGELOG.md) · [Report Bug][issues-url] · [Request Feature][issues-url]
+  
+<!-- SHIELD GROUP -->
+
+[![release][release-shield]][release-url]
+[![releaseDate][release-date-shield]][release-date-url]
+[![ciTest][ci-test-shield]][ci-test-url]
+[![ciRelease][ci-release-shield]][ci-release-url]
+<br/>
+[![contributors][contributors-shield]][contributors-url]
+[![forks][forks-shield]][forks-url]
+[![stargazers][stargazers-shield]][stargazers-url]
+[![issues][issues-shield]][issues-url]
+  
+![](https://github.com/othneildrew/Best-README-Template/raw/master/images/screenshot.png)
+
+</div>
+
+## 📦 Installation
+
+To install Lobe Commit, run the following command:
+
+```bash
+pnpm add @lobehub/ui
+```
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## ⌨️ Local Development
+
+You can use Gitpod for online development:
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)][gitpod-url]
+
+Or clone it for local development:
+
+```bash
+$ git clone https://github.com/lobehub/lobe-ui.git
+$ cd lobe-ui
+$ pnpm install
+$ pnpm start
+```
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+
+## 🤝 Contributing
+
+<!-- CONTRIBUTION GROUP -->
+
+> 📊 Total: <kbd>**3**</kbd>
+
+<a href="https://github.com/canisminor1990" title="canisminor1990">
+  <img src="https://avatars.githubusercontent.com/u/17870709?v=4" width="50" />
+</a>
+<a href="https://github.com/actions-user" title="actions-user">
+  <img src="https://avatars.githubusercontent.com/u/65916846?v=4" width="50" />
+</a>
+<a href="https://github.com/apps/dependabot" title="dependabot[bot]">
+  <img src="https://avatars.githubusercontent.com/in/29110?v=4" width="50" />
+</a>
+
+<!-- CONTRIBUTION END -->
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+---
+#### 📝 License
+
+Copyright © 2023 [LobeHub][profile-url]. <br />
+This project is [MIT](./LICENSE) licensed. 
+
+
+<!-- LINK GROUP -->
+
+[profile-url]: https://github.com/lobehub
+[issues-url]: https://github.com/lobehub/lobe-ui/issues/new/choose
+[gitpod-url]: https://gitpod.io/#https://github.com/lobehub/lobe-ui
+
+<!-- SHIELD LINK GROUP -->
+
+[back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square
+
+<!-- release -->
+
+[release-shield]: https://img.shields.io/npm/v/@lobehub/ui?label=%F0%9F%A4%AF%20NPM
+[release-url]: https://www.npmjs.com/package/@lobehub/ui
+
+<!-- releaseDate -->
+
+[release-date-shield]: https://img.shields.io/github/release-date/lobehub/lobe-ui?style=flat
+[release-date-url]: https://github.com/lobehub/lobe-ui/releases
+
+<!-- ciTest -->
+
+[ci-test-shield]: https://github.com/lobehub/lobe-ui/workflows/Test%20CI/badge.svg
+[ci-test-url]: https://github.com/lobehub/lobe-ui/actions?query=workflow%3ATest%20CI
+
+<!-- ciRelease -->
+
+[ci-release-shield]: https://github.com/lobehub/lobe-ui/workflows/Release%20CI/badge.svg
+[ci-release-url]: https://github.com/lobehub/lobe-ui/actions?query=workflow%3ARelease%20CI
+
+<!-- contributors -->
+
+[contributors-shield]: https://img.shields.io/github/contributors/lobehub/lobe-ui.svg?style=flat
+[contributors-url]: https://github.com/lobehub/lobe-ui/graphs/contributors
+
+<!-- forks -->
+
+[forks-shield]: https://img.shields.io/github/forks/lobehub/lobe-ui.svg?style=flat
+[forks-url]: https://github.com/lobehub/lobe-ui/network/members
+
+<!-- stargazers -->
+
+[stargazers-shield]: https://img.shields.io/github/stars/lobehub/lobe-ui.svg?style=flat
+[stargazers-url]: https://github.com/lobehub/lobe-ui/stargazers
+
+<!-- issues -->
+
+[issues-shield]: https://img.shields.io/github/issues/lobehub/lobe-ui.svg?style=flat
+[issues-url]: https://img.shields.io/github/issues/lobehub/lobe-ui.svg?style=flat

package/es/ActionIcon/index.d.ts

@@ -0,0 +1,15 @@
+import { DivProps } from "../types";
+import { LucideIcon } from 'lucide-react';
+import React from 'react';
+export interface ActionIconProps extends DivProps {
+    active?: boolean;
+    size?: 'large' | 'normal' | 'small' | {
+        blockSize: number;
+        fontSize: number;
+        strokeWidth: number;
+        borderRadius: number;
+    };
+    icon: LucideIcon;
+}
+declare const _default: React.NamedExoticComponent<ActionIconProps>;
+export default _default;

package/es/ActionIcon/index.js

@@ -0,0 +1,84 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _excluded = ["active", "icon", "size", "style"];
+var _templateObject;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React from 'react';
+import styled from 'styled-components';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Block = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n\n  color: ", ";\n\n  background: ", ";\n\n  transition: all 0.2s ", ";\n\n  &:hover {\n    background: ", ";\n  }\n\n  &:active {\n    color: ", ";\n    background: ", ";\n  }\n"])), function (_ref) {
+  var active = _ref.active,
+    theme = _ref.theme;
+  return active ? theme.colorText : theme.colorTextQuaternary;
+}, function (_ref2) {
+  var active = _ref2.active,
+    theme = _ref2.theme;
+  return active ? theme.colorFill : 'transparent';
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.motionEaseOut;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.colorFillTertiary;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.colorText;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.colorFill;
+});
+var ActionIcon = function ActionIcon(_ref7) {
+  var active = _ref7.active,
+    icon = _ref7.icon,
+    _ref7$size = _ref7.size,
+    size = _ref7$size === void 0 ? 'normal' : _ref7$size,
+    style = _ref7.style,
+    props = _objectWithoutProperties(_ref7, _excluded);
+  var blockSize;
+  var fontSize;
+  var strokeWidth;
+  var borderRadius;
+  var Icon = icon;
+  switch (size) {
+    case 'large':
+      blockSize = 44;
+      fontSize = 24;
+      strokeWidth = 2;
+      borderRadius = 8;
+      break;
+    case 'normal':
+      blockSize = 36;
+      fontSize = 24;
+      strokeWidth = 2;
+      borderRadius = 5;
+      break;
+    case 'small':
+      blockSize = 28;
+      fontSize = 20;
+      strokeWidth = 1.5;
+      borderRadius = 5;
+      break;
+    default:
+      blockSize = (size === null || size === void 0 ? void 0 : size.blockSize) || 36;
+      fontSize = (size === null || size === void 0 ? void 0 : size.fontSize) || 24;
+      strokeWidth = (size === null || size === void 0 ? void 0 : size.strokeWidth) || 2;
+      borderRadius = (size === null || size === void 0 ? void 0 : size.borderRadius) || 5;
+      break;
+  }
+  return /*#__PURE__*/_jsx(Block, _objectSpread(_objectSpread({
+    active: active,
+    style: _objectSpread({
+      width: blockSize,
+      height: blockSize,
+      borderRadius: borderRadius
+    }, style)
+  }, props), {}, {
+    children: /*#__PURE__*/_jsx(Icon, {
+      size: fontSize,
+      strokeWidth: strokeWidth
+    })
+  }));
+};
+export default /*#__PURE__*/React.memo(ActionIcon);

package/es/DraggablePanel/index.d.ts

@@ -0,0 +1,26 @@
+import type { DivProps } from "../types";
+import type { NumberSize, Size } from 're-resizable';
+import React from 'react';
+import type { Props as RndProps } from 'react-rnd';
+export declare type placementType = 'right' | 'left' | 'top' | 'bottom';
+export interface DraggablePanelProps extends DivProps {
+    pin?: boolean;
+    mode?: 'fixed' | 'float';
+    placement: placementType;
+    minWidth?: number;
+    minHeight?: number;
+    resize?: RndProps['enableResizing'];
+    size?: Partial<Size>;
+    onSizeChange?: (delta: NumberSize, size?: Size) => void;
+    onSizeDragging?: (delta: NumberSize, size?: Size) => void;
+    expandable?: boolean;
+    expand?: boolean;
+    defaultExpand?: boolean;
+    onExpandChange?: (expand: boolean) => void;
+    defaultSize?: Partial<Size>;
+    destroyOnClose?: boolean;
+    showHandlerWhenUnexpand?: boolean;
+    hanlderStyle?: React.CSSProperties;
+}
+declare const _default: React.NamedExoticComponent<DraggablePanelProps>;
+export default _default;

package/es/DraggablePanel/index.js

@@ -0,0 +1,197 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { useHover } from 'ahooks';
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react';
+import { Resizable } from 're-resizable';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Center } from 'react-layout-kit';
+import useControlledState from 'use-merge-value';
+import { useStyle } from "./style";
+import { revesePlacement } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_HEIGHT = 180;
+var DEFAULT_WIDTH = 280;
+var DraggablePanel = function DraggablePanel(_ref) {
+  var _ref$pin = _ref.pin,
+    pin = _ref$pin === void 0 ? 'true' : _ref$pin,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? 'fixed' : _ref$mode,
+    children = _ref.children,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'right' : _ref$placement,
+    resize = _ref.resize,
+    style = _ref.style,
+    size = _ref.size,
+    customizeDefaultSize = _ref.defaultSize,
+    minWidth = _ref.minWidth,
+    minHeight = _ref.minHeight,
+    onSizeChange = _ref.onSizeChange,
+    onSizeDragging = _ref.onSizeDragging,
+    _ref$expandable = _ref.expandable,
+    expandable = _ref$expandable === void 0 ? true : _ref$expandable,
+    expand = _ref.expand,
+    _ref$defaultExpand = _ref.defaultExpand,
+    defaultExpand = _ref$defaultExpand === void 0 ? true : _ref$defaultExpand,
+    onExpandChange = _ref.onExpandChange,
+    className = _ref.className,
+    showHandlerWhenUnexpand = _ref.showHandlerWhenUnexpand,
+    destroyOnClose = _ref.destroyOnClose,
+    hanlderStyle = _ref.hanlderStyle;
+  var ref = useRef(null);
+  var isHovering = useHover(ref);
+  var isVertical = placement === 'top' || placement === 'bottom';
+  var _useStyle = useStyle('draggable-panel'),
+    styles = _useStyle.styles,
+    cx = _useStyle.cx;
+  var _useControlledState = useControlledState(defaultExpand, {
+      value: expand,
+      onChange: onExpandChange
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    isExpand = _useControlledState2[0],
+    setIsExpand = _useControlledState2[1];
+  useEffect(function () {
+    if (pin) return;
+    if (isHovering && !isExpand) {
+      setIsExpand(true);
+    } else if (!isHovering && isExpand) {
+      setIsExpand(false);
+    }
+  }, [pin, isHovering, isExpand]);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    showExpand = _useState2[0],
+    setShowExpand = _useState2[1];
+  var canResizing = resize !== false && isExpand;
+  var resizeHandleClassNames = useMemo(function () {
+    if (!canResizing) return {};
+    return _defineProperty({}, revesePlacement(placement), styles["".concat(revesePlacement(placement), "Handle")]);
+  }, [canResizing, placement]);
+  var resizing = _objectSpread(_defineProperty({
+    top: false,
+    bottom: false,
+    right: false,
+    left: false,
+    topRight: false,
+    bottomRight: false,
+    bottomLeft: false,
+    topLeft: false
+  }, revesePlacement(placement), true), resize);
+  var defaultSize = useMemo(function () {
+    if (isVertical) return _objectSpread({
+      width: '100%',
+      height: DEFAULT_HEIGHT
+    }, customizeDefaultSize);
+    return _objectSpread({
+      width: DEFAULT_WIDTH,
+      height: '100%'
+    }, customizeDefaultSize);
+  }, [isVertical]);
+  var sizeProps = isExpand ? {
+    minWidth: typeof minWidth === 'number' ? Math.max(minWidth, 0) : 280,
+    minHeight: typeof minHeight === 'number' ? Math.max(minHeight, 0) : undefined,
+    defaultSize: defaultSize,
+    size: size
+  } : isVertical ? {
+    minHeight: 0,
+    size: {
+      height: 0
+    }
+  } : {
+    minWidth: 0,
+    size: {
+      width: 0
+    }
+  };
+  var _useMemo = useMemo(function () {
+      switch (placement) {
+        case 'top':
+          return {
+            className: 'Bottom',
+            Arrow: ChevronDown
+          };
+        case 'bottom':
+          return {
+            className: 'Top',
+            Arrow: ChevronUp
+          };
+        case 'right':
+          return {
+            className: 'Left',
+            Arrow: ChevronLeft
+          };
+        case 'left':
+          return {
+            className: 'Right',
+            Arrow: ChevronRight
+          };
+      }
+    }, [styles, placement]),
+    Arrow = _useMemo.Arrow,
+    arrowPlacement = _useMemo.className;
+  var handler =
+  /*#__PURE__*/
+  // @ts-ignore
+  _jsx(Center
+  // @ts-ignore
+  , {
+    className: cx(styles["toggle".concat(arrowPlacement)]),
+    style: {
+      opacity: isExpand ? !pin ? 0 : undefined : showHandlerWhenUnexpand ? 1 : 0
+    },
+    children: /*#__PURE__*/_jsx(Center, {
+      style: hanlderStyle,
+      onClick: function onClick() {
+        setIsExpand(!isExpand);
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        className: styles.handlerIcon,
+        style: {
+          transform: "rotate(".concat(isExpand ? 180 : 0, "deg)")
+        },
+        children: /*#__PURE__*/_jsx(Arrow, {
+          size: 16,
+          strokeWidth: 1.5
+        })
+      })
+    })
+  });
+  var inner =
+  /*#__PURE__*/
+  // @ts-ignore
+  _jsx(Resizable, _objectSpread(_objectSpread({}, sizeProps), {}, {
+    style: style,
+    className: styles.panel,
+    enable: canResizing ? resizing : undefined,
+    handleClasses: resizeHandleClassNames,
+    onResizeStop: function onResizeStop(e, direction, ref, delta) {
+      setShowExpand(true);
+      onSizeChange === null || onSizeChange === void 0 ? void 0 : onSizeChange(delta, {
+        width: ref.style.width,
+        height: ref.style.height
+      });
+    },
+    onResizeStart: function onResizeStart() {
+      setShowExpand(false);
+    },
+    onResize: function onResize(_, direction, ref, delta) {
+      onSizeDragging === null || onSizeDragging === void 0 ? void 0 : onSizeDragging(delta, {
+        width: ref.style.width,
+        height: ref.style.height
+      });
+    },
+    children: children
+  }));
+  return /*#__PURE__*/_jsxs("div", {
+    ref: ref,
+    className: cx(styles.container,
+    // @ts-ignore
+    styles[mode === 'fixed' ? 'fixed' : "".concat(placement, "Float")], className),
+    style: _defineProperty({}, "border".concat(arrowPlacement, "Width"), 1),
+    children: [expandable && showExpand && handler, destroyOnClose ? isExpand && inner : inner]
+  });
+};
+export default /*#__PURE__*/React.memo(DraggablePanel);

package/es/DraggablePanel/style.d.ts

@@ -0,0 +1,18 @@
+export declare const useStyle: (props?: string | undefined) => import("antd-style").ReturnStyles<{
+    container: string;
+    fixed: import("antd-style").SerializedStyles;
+    leftFloat: string;
+    rightFloat: string;
+    topFloat: string;
+    bottomFloat: string;
+    toggleLeft: string;
+    toggleRight: string;
+    toggleTop: string;
+    toggleBottom: string;
+    panel: string;
+    handlerIcon: import("antd-style").SerializedStyles;
+    leftHandle: string;
+    rightHandle: string;
+    topHandle: string;
+    bottomHandle: string;
+}>;

package/es/DraggablePanel/style.js

@@ -0,0 +1,30 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
+import { createStyles, css, cx } from 'antd-style';
+var offset = 16;
+var toggleLength = 40;
+var toggleShort = 16;
+export var useStyle = createStyles(function (_ref, prefix) {
+  var token = _ref.token;
+  var commonHandle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    &::before {\n      content: '';\n      position: absolute;\n      z-index: 50;\n      transition: all 0.2s ", ";\n    }\n\n    &:hover,\n    &:active {\n      &::before {\n        background: ", ";\n      }\n    }\n  "])), token.motionEaseOut, token.colorPrimary);
+  var commonToggle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: 1001;\n    opacity: 0;\n    transition: all 0.2s ", ";\n\n    &:hover {\n      opacity: 1 !important;\n    }\n\n    &:active {\n      opacity: 1 !important;\n    }\n\n    > div {\n      cursor: pointer;\n\n      position: absolute;\n\n      color: ", ";\n\n      background: ", ";\n      border-color: ", ";\n      border-style: solid;\n      border-width: 1px;\n      border-radius: 4px;\n\n      transition: all 0.2s ", ";\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:active {\n        color: ", ";\n        background: ", ";\n      }\n    }\n  "])), token.motionEaseOut, token.colorTextTertiary, token.colorFillTertiary, token.colorBorderSecondary, token.motionEaseOut, token.colorTextSecondary, token.colorFillSecondary, token.colorText, token.colorFill);
+  var float = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: 2000;\n  "])));
+  return {
+    container: cx(prefix, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        flex-shrink: 0;\n        border: 0 solid ", ";\n\n        &:hover {\n          .", "-toggle {\n            opacity: 1;\n          }\n        }\n      "])), token.colorBorderSecondary, prefix)),
+    fixed: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      position: relative;\n    "]))),
+    leftFloat: cx(float, css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        top: 0;\n        bottom: 0;\n        left: 0;\n        height: 100%;\n      "])))),
+    rightFloat: cx(float, css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        top: 0;\n        right: 0;\n        bottom: 0;\n        height: 100%;\n      "])))),
+    topFloat: cx(float, css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        top: 0;\n        right: 0;\n        left: 0;\n        width: 100%;\n      "])))),
+    bottomFloat: cx(float, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        right: 0;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n      "])))),
+    toggleLeft: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-left"), commonToggle, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        left: -", "px;\n        width: ", "px;\n        height: 100%;\n        > div {\n          top: 50%;\n\n          width: ", "px;\n          height: ", "px;\n          margin-top: -20px;\n\n          border-radius: 4px 0 0 4px;\n        }\n      "])), offset, toggleShort, toggleShort, toggleLength)),
+    toggleRight: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-right"), commonToggle, css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        right: -", "px;\n        width: ", "px;\n        height: 100%;\n        > div {\n          top: 50%;\n\n          width: ", "px;\n          height: ", "px;\n          margin-top: -20px;\n\n          border-radius: 0 4px 4px 0;\n        }\n      "])), offset, toggleShort, toggleShort, toggleLength)),
+    toggleTop: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-top"), commonToggle, css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        top: -", "px;\n        width: 100%;\n        height: ", "px;\n\n        > div {\n          left: 50%;\n\n          width: ", "px;\n          height: ", "px;\n          margin-left: -20px;\n\n          border-radius: 4px 4px 0 0;\n        }\n      "])), offset, toggleShort, toggleLength, toggleShort)),
+    toggleBottom: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-bottom"), commonToggle, css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        bottom: -", "px;\n        width: 100%;\n        height: ", "px;\n\n        > div {\n          left: 50%;\n\n          width: ", "px;\n          height: 16px;\n          margin-left: -20px;\n\n          border-radius: 0 0 4px 4px;\n        }\n      "])), offset, toggleShort, toggleLength)),
+    panel: cx("".concat(prefix, "-fixed"), css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        overflow: hidden;\n        background: ", ";\n        transition: all 0.2s ", ";\n      "])), token.colorBgContainer, token.motionEaseOut)),
+    handlerIcon: css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ", ";\n    "])), token.motionEaseOut),
+    leftHandle: cx(css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n        ", ";\n\n        &::before {\n          left: 50%;\n          width: 2px;\n          height: 100%;\n        }\n      "])), commonHandle), "".concat(prefix, "-left-handle")),
+    rightHandle: cx(css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n        ", ";\n        &::before {\n          right: 50%;\n          width: 2px;\n          height: 100%;\n        }\n      "])), commonHandle), "".concat(prefix, "-right-handle")),
+    topHandle: cx("".concat(prefix, "-top-handle"), css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n        ", ";\n\n        &::before {\n          top: 50%;\n          width: 100%;\n          height: 2px;\n        }\n      "])), commonHandle)),
+    bottomHandle: cx("".concat(prefix, "-bottom-handle"), css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n        ", ";\n\n        &::before {\n          bottom: 50%;\n          width: 100%;\n          height: 2px;\n        }\n      "])), commonHandle))
+  };
+});

package/es/DraggablePanel/utils.d.ts

@@ -0,0 +1,2 @@
+import { placementType } from './index';
+export declare const revesePlacement: (placement: placementType) => "left" | "right" | "bottom" | "top";

package/es/DraggablePanel/utils.js

@@ -0,0 +1,12 @@
+export var revesePlacement = function revesePlacement(placement) {
+  switch (placement) {
+    case 'bottom':
+      return 'top';
+    case 'top':
+      return 'bottom';
+    case 'right':
+      return 'left';
+    case 'left':
+      return 'right';
+  }
+};

package/es/Logo/Logo3D.d.ts

@@ -0,0 +1,4 @@
+import { ImgProps } from "../types";
+import React from 'react';
+declare const _default: React.NamedExoticComponent<ImgProps>;
+export default _default;