@qn-pandora/pandora-component 3.0.2 → 3.1.0

package/es/index.d.ts

@@ -2,7 +2,7 @@ export * from '@qn-pandora/pandora-component-icons';
 export { SDK_PREFIX } from './constants/style';
 export { default as Button, IButtonProps } from './components/Button';
 export { default as Card } from './components/Card';
-export { default as Collapse } from './components/Collapse';
+export { default as Collapse, ECollapseType } from './components/Collapse';
 export { default as ConfigProvider } from './components/ConfigProvider';
 export { default as NameLimiter, INameLimiterProps } from './components/NameLimiter';
 export { default as Input, TInputProps } from './components/Input';
@@ -14,6 +14,7 @@ export * from './components/DateTimePicker/constants';
 export * from './components/DateTimePicker/transform';
 export { default as Style } from './components/Style';
 export { default as SolidRadioGroup, ISolidRadioGroupProps, IOption as ISolidRadioGroupOption } from './components/SolidRadioGroup';
+export { default as RadioGroup } from './components/RadioGroup';
 export { default as Menu, IOption as IMenuOption } from './components/Menu';
 export { default as Spin, SpinMode } from './components/Spin';
 export { default as Modal } from './components/Modal';

package/es/index.js

@@ -2,7 +2,7 @@ export * from '@qn-pandora/pandora-component-icons';
 export { SDK_PREFIX } from './constants/style';
 export { default as Button } from './components/Button';
 export { default as Card } from './components/Card';
-export { default as Collapse } from './components/Collapse';
+export { default as Collapse, ECollapseType } from './components/Collapse';
 export { default as ConfigProvider } from './components/ConfigProvider';
 export { default as NameLimiter } from './components/NameLimiter';
 export { default as Input } from './components/Input';
@@ -14,6 +14,7 @@ export * from './components/DateTimePicker/constants';
 export * from './components/DateTimePicker/transform';
 export { default as Style } from './components/Style';
 export { default as SolidRadioGroup } from './components/SolidRadioGroup';
+export { default as RadioGroup } from './components/RadioGroup';
 export { default as Menu } from './components/Menu';
 export { default as Spin, SpinMode } from './components/Spin';
 export { default as Modal } from './components/Modal';

package/es/index.less

@@ -7,6 +7,7 @@
 @import './components/CheckTransformList/style.less';
 @import './components/Checkbox/style.less';
 @import './components/CheckboxList/style.less';
+@import './components/Collapse/style.less';
 @import './components/CollapsiblePanel/style.less';
 @import './components/DateTimePicker/style.less';
 @import './components/Drawer/style.less';
@@ -18,10 +19,10 @@
 @import './components/NameExplainTooltip/style.less';
 @import './components/NameLimiter/style.less';
 @import './components/OptionList/style.less';
+@import './components/RadioGroup/style.less';
 @import './components/RangeInput/style.less';
 @import './components/RemarkName/style.less';
 @import './components/Selector/style.less';
-@import './components/SolidRadioGroup/style.less';
 @import './components/Spin/style.less';
 @import './components/Steps/style.less';
 @import './components/Table/style.less';
@@ -32,8 +33,6 @@
 @import './components/TreeSelector/style.less';
 @import './components/Card/RowExtra/style.less';
 @import './components/Card/SearchInput/style.less';
-@import './components/Collapse/Panel/style.less';
-@import './components/Collapse/stories/style.stories.less';
 @import './components/DateTimePicker/Base/style.less';
 @import './components/DateTimePicker/BaseMobile/style.less';
 @import './components/DateTimePicker/DisplayInput/style.less';
@@ -47,4 +46,5 @@
 @import './components/Timeline/TimelineItem/style.less';
 @import './components/Transfer/List/style.less';
 @import './components/Transfer/ListBody/style.less';
-@import './components/DateTimePicker/BaseMobile/Absolute/style.less';
+@import './components/DateTimePicker/BaseMobile/Absolute/style.less';
+@import './components/DateTimePicker/Collapse/Panel/style.less';

package/es/style/theme.less

@@ -370,3 +370,10 @@
 }
 
 @icon-hover-color: rgba(19, 107, 255, 0.1);
+
+// radio--------------
+// antd覆盖色
+@radio-dot-color: @theme-color;
+@radio-button-color: @heading-color;
+@radio-button-active-color: @theme-color;
+@radio-button-hover-color: @theme-color;

package/es/utils/language.d.ts

@@ -0,0 +1 @@
+export declare function formatString(path: any, locale?: import("antd/es/locale-provider").Locale): any;

package/es/utils/language.js

@@ -0,0 +1,15 @@
+import { get, isString } from 'lodash';
+import zhCN from 'antd/es/locale-provider/zh_CN';
+import { component_zh } from '../constants/language/zh';
+import { component_en } from '../constants/language/en';
+export function formatString(path, locale) {
+    if (locale === void 0) { locale = zhCN; }
+    if (isString(path)) {
+        var message = get(locale === zhCN ? component_zh : component_en, path);
+        if (message && isString(message)) {
+            return message;
+        }
+        return path;
+    }
+    return path;
+}

package/es/utils/languageLocale.d.ts

@@ -0,0 +1 @@
+export declare function languageLocale<T>(prefix: string, obj: T): T;

package/es/utils/languageLocale.js

@@ -0,0 +1,9 @@
+import { flatten, unflatten } from 'flat';
+export function languageLocale(prefix, obj) {
+    var flattenObj = flatten(obj);
+    var result = {};
+    Object.keys(flattenObj).map(function (key) {
+        result[key] = "" + prefix + key;
+    });
+    return unflatten(result);
+}

package/lib/components/CheckTransformList/Item/index.js

@@ -12,11 +12,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 var antd_1 = require("antd");
+var config_provider_1 = require("antd/es/config-provider");
+var language_1 = require("../../../utils/language");
+var type_1 = require("../../../constants/language/check_transform_list/type");
 var style_1 = require("../../../constants/style");
 var NameLimiter_1 = __importDefault(require("../../../components/NameLimiter"));
 var Search = antd_1.Input.Search;
 function Item(props) {
     var label = props.label, type = props.type, isCheckedAll = props.isCheckedAll, indeterminate = props.indeterminate, onCheckAllChange = props.onCheckAllChange, options = props.options, onCheckboxChange = props.onCheckboxChange, prefix = props.prefix, setPrefix = props.setPrefix;
+    var locale = React.useContext(config_provider_1.ConfigContext).locale;
     var handOnchange = React.useCallback(function (e) {
         var value = e.target.value;
         setPrefix(value);
@@ -24,11 +28,11 @@ function Item(props) {
     return (React.createElement("div", { className: style_1.SDK_PREFIX + "-check-transform" },
         label && (React.createElement("div", { className: style_1.SDK_PREFIX + "-check-transform-header" }, label)),
         React.createElement("div", { className: style_1.SDK_PREFIX + "-check-transform-search" },
-            React.createElement(Search, { placeholder: "\u641C\u7D22", value: prefix, onChange: handOnchange })),
+            React.createElement(Search, { placeholder: language_1.formatString(type_1.CheckTransformListLocale.placeholder, locale), value: prefix, onChange: handOnchange })),
         React.createElement("div", { className: style_1.SDK_PREFIX + "-check-transform-checkBox" },
             type === 'left' && (React.createElement(React.Fragment, null,
-                React.createElement(antd_1.Checkbox, { onChange: onCheckAllChange, checked: isCheckedAll, indeterminate: indeterminate }, "\u5168\u9009"))),
-            type === 'right' && (React.createElement("div", { className: style_1.SDK_PREFIX + "--check-transform-header" }, "\u5DF2\u9009")),
+                React.createElement(antd_1.Checkbox, { onChange: onCheckAllChange, checked: isCheckedAll, indeterminate: indeterminate }, language_1.formatString(type_1.CheckTransformListLocale.select_all, locale)))),
+            type === 'right' && (React.createElement("div", { className: style_1.SDK_PREFIX + "--check-transform-header" }, language_1.formatString(type_1.CheckTransformListLocale.selected))),
             React.createElement("div", { className: style_1.SDK_PREFIX + "-check-transform-checkbox-group" }, options.map(function (item) {
                 return (React.createElement("div", { key: item.value },
                     React.createElement(antd_1.Checkbox, { value: item.value, checked: item.checked, onChange: onCheckboxChange },

package/lib/components/Collapse/Panel/index.d.ts

@@ -1,41 +1,9 @@
-import * as React from 'react';
-interface IPanelProps {
-    /**
-     * 当前panel的key
-     */
-    panelKey?: string;
-    /**
-     * tab的标题
-     */
-    title: string;
-    /**
-     * 当前panel是都激活
-     * @default true
-     */
-    isActive?: boolean;
-    /**
-     * title的样式
-     */
-    titleClassName?: string;
-    /**
-     * content的样式
-     */
-    contentClassName?: string;
-    /**
-     * 容器样式
-     */
-    className?: string;
-    /**
-     * panel折叠状态发生变化
-     */
-    onToggle?: (isActive: boolean, key?: string) => void;
-    /**
-     * 是否禁止toggle
-     */
-    disableToggle?: boolean;
+/// <reference types="react" />
+import { CollapsePanelProps } from 'antd/es/collapse';
+import { ECollapseType } from '../index';
+export interface ICollapsePanelProps extends CollapsePanelProps {
+    children?: any;
+    type?: ECollapseType;
 }
-/**
- * 折叠面板组件封装
- */
-export default function Panel(props: React.PropsWithChildren<IPanelProps>): JSX.Element;
-export {};
+export declare function CollapsePanel(props: ICollapsePanelProps): JSX.Element;
+export default CollapsePanel;

package/lib/components/Collapse/Panel/index.js

@@ -1,19 +1,25 @@
 "use strict";
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
         }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
@@ -26,39 +32,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
+var react_1 = __importStar(require("react"));
+var antd_1 = require("antd");
 var classnames_1 = __importDefault(require("classnames"));
-var compatible_1 = require("@ant-design/compatible");
 var style_1 = require("../../../constants/style");
-var useEffect = React.useEffect, useCallback = React.useCallback, useState = React.useState;
-/**
- * 折叠面板组件封装
- */
-function Panel(props) {
-    var _a, _b;
-    var _c = props.isActive, baseIsActive = _c === void 0 ? true : _c, disableToggle = props.disableToggle, onToggle = props.onToggle, panelKey = props.panelKey, title = props.title, titleClassName = props.titleClassName, className = props.className, contentClassName = props.contentClassName;
-    var _d = __read(useState(baseIsActive || false), 2), isActive = _d[0], setIsActive = _d[1];
-    useEffect(function () {
-        if (baseIsActive !== isActive) {
-            setIsActive(baseIsActive || false);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [baseIsActive]);
-    var onTogglePanel = useCallback(function () {
-        if (disableToggle) {
-            return;
-        }
-        setIsActive(!isActive);
-        if (onToggle) {
-            onToggle(!isActive, panelKey);
+var index_1 = require("../index");
+function CollapsePanel(props) {
+    var type = props.type, header = props.header, key = props.key, children = props.children, className = props.className, others = __rest(props, ["type", "header", "key", "children", "className"]);
+    var newHeader = react_1.useMemo(function () {
+        if (type === index_1.ECollapseType.Primary) {
+            return (react_1.default.createElement("span", null,
+                react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-header-line" }),
+                react_1.default.createElement("span", null, header)));
         }
-    }, [disableToggle, panelKey, isActive, onToggle]);
-    return (React.createElement("div", { className: classnames_1.default(style_1.SDK_PREFIX + "-panel", className), key: panelKey },
-        React.createElement("div", { className: classnames_1.default(titleClassName, (_a = {}, _a[style_1.SDK_PREFIX + "-panel-disable"] = disableToggle, _a), style_1.SDK_PREFIX + "-panel-title"), onClick: onTogglePanel },
-            React.createElement("span", null, title),
-            disableToggle ? null : (React.createElement(compatible_1.Icon, { type: isActive ? 'down' : 'up', className: style_1.SDK_PREFIX + "-panel-icon" }))),
-        React.createElement("div", { className: classnames_1.default(style_1.SDK_PREFIX + "-panel-content", contentClassName, (_b = {},
-                _b[style_1.SDK_PREFIX + "-panel-hidden"] = !isActive,
-                _b)) }, props.children)));
+        return header;
+    }, [header, type]);
+    return (react_1.default.createElement(antd_1.Collapse.Panel, __assign({ className: classnames_1.default(className), header: newHeader, key: key }, others), children));
 }
-exports.default = Panel;
+exports.CollapsePanel = CollapsePanel;
+exports.default = CollapsePanel;

package/lib/components/Collapse/index.d.ts

@@ -1,24 +1,19 @@
-import * as React from 'react';
-interface ICollapseProps {
-    /**
-     * 根节点 class name
-     */
+/// <reference types="react" />
+import { CollapseProps } from 'antd/es/collapse';
+export declare enum ECollapseType {
+    Normal = "normal",
+    Simple = "simple",
+    Primary = "primary",
+    Dashed = "dashed"
+}
+export interface ICollapse extends CollapseProps {
     className?: string;
-    /**
-     * 默认展开的panel的keys
-     */
-    defaultActiveKey?: string[] | 'all' | 'none';
-    /**
-     * 手风琴模式，最多智能打开一个折叠板
-     * @default false
-     */
-    accordion?: boolean;
+    children?: any;
+    type?: ECollapseType;
+    onDelete?: (index: number) => void;
 }
-/**
- * 折叠面板组件封装
- */
-declare function Collapse(props: React.PropsWithChildren<ICollapseProps>): JSX.Element;
-declare namespace Collapse {
-    var Panel: typeof import("./Panel").default;
+export declare function Collapse(props: ICollapse): JSX.Element;
+export declare namespace Collapse {
+    var Panel: typeof import("./Panel").CollapsePanel;
 }
 export default Collapse;

package/lib/components/Collapse/index.js

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
@@ -21,34 +32,50 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
-var lodash_1 = require("lodash");
+var react_1 = __importStar(require("react"));
+var antd_1 = require("antd");
+var icons_1 = require("@ant-design/icons");
+var classnames_1 = __importDefault(require("classnames"));
+var style_1 = require("../../constants/style");
 var Panel_1 = __importDefault(require("./Panel"));
-/**
- * 折叠面板组件封装
- */
+var ECollapseType;
+(function (ECollapseType) {
+    ECollapseType["Normal"] = "normal";
+    ECollapseType["Simple"] = "simple";
+    ECollapseType["Primary"] = "primary";
+    ECollapseType["Dashed"] = "dashed";
+})(ECollapseType = exports.ECollapseType || (exports.ECollapseType = {}));
 function Collapse(props) {
-    var children = props.children, defaultActiveKey = props.defaultActiveKey, className = props.className;
-    var getPanels = React.useCallback(function () {
+    var children = props.children, className = props.className, _a = props.type, type = _a === void 0 ? ECollapseType.Simple : _a, _b = props.expandIconPosition, expandIconPosition = _b === void 0 ? 'left' : _b, onDelete = props.onDelete, others = __rest(props, ["children", "className", "type", "expandIconPosition", "onDelete"]);
+    var position = react_1.useMemo(function () {
+        return type === ECollapseType.Primary ? 'right' : expandIconPosition;
+    }, [expandIconPosition, type]);
+    var showArrow = react_1.useMemo(function () {
+        return type !== ECollapseType.Dashed;
+    }, [type]);
+    var getExtra = react_1.useCallback(function (index) {
+        if (type === ECollapseType.Dashed) {
+            return (react_1.default.createElement(icons_1.DeleteOutlined, { onClick: function () {
+                    if (onDelete) {
+                        onDelete(index);
+                    }
+                } }));
+        }
+        return undefined;
+    }, [type, onDelete]);
+    var getPanels = react_1.default.useCallback(function () {
         var newChildren = [];
-        React.Children.forEach(children, function (child, index) {
+        react_1.default.Children.forEach(children, function (child, index) {
             if (!child) {
                 return;
             }
-            var key = lodash_1.get(child, 'key') || "" + index;
-            var isActive = false;
-            if (defaultActiveKey && typeof defaultActiveKey === 'string') {
-                isActive = defaultActiveKey === 'none' ? false : true;
-            }
-            else {
-                isActive = (defaultActiveKey || []).indexOf(key) > -1;
-            }
-            var props = __assign(__assign({}, child.props), { panelKey: key, isActive: isActive });
-            newChildren.push(React.cloneElement(child, props));
+            var props = __assign(__assign({}, child.props), { showArrow: showArrow, extra: getExtra(index), type: type });
+            newChildren.push(react_1.default.cloneElement(child, props));
         });
         return newChildren;
-    }, [children, defaultActiveKey]);
-    return React.createElement("div", { className: className }, getPanels());
+    }, [children, showArrow, type, getExtra]);
+    return (react_1.default.createElement(antd_1.Collapse, __assign({ className: classnames_1.default(style_1.SDK_PREFIX + "-collapse", [style_1.SDK_PREFIX + "-collapse-" + type], className), expandIconPosition: position }, others), getPanels()));
 }
+exports.Collapse = Collapse;
 Collapse.Panel = Panel_1.default;
 exports.default = Collapse;

package/lib/components/Collapse/style.css

@@ -0,0 +1,210 @@
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.ant-collapse {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  -webkit-font-feature-settings: 'tnum';
+          font-feature-settings: 'tnum';
+  background-color: #fafafa;
+  border: 1px solid #e5e5e5;
+  border-bottom: 0;
+  border-radius: 2px;
+}
+.ant-collapse > .ant-collapse-item {
+  border-bottom: 1px solid #e5e5e5;
+}
+.ant-collapse > .ant-collapse-item:last-child,
+.ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
+  border-radius: 0 0 2px 2px;
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header {
+  position: relative;
+  padding: 12px 16px;
+  color: #333;
+  line-height: 1.5715;
+  cursor: pointer;
+  -webkit-transition: all 0.3s, visibility 0s;
+  transition: all 0.3s, visibility 0s;
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header::before {
+  display: table;
+  content: '';
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow {
+  display: inline-block;
+  margin-right: 12px;
+  font-size: 12px;
+  vertical-align: -1px;
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow svg {
+  -webkit-transition: -webkit-transform 0.24s;
+  transition: -webkit-transform 0.24s;
+  transition: transform 0.24s;
+  transition: transform 0.24s, -webkit-transform 0.24s;
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-extra {
+  float: right;
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header:focus {
+  outline: none;
+}
+.ant-collapse > .ant-collapse-item .ant-collapse-header-collapsible-only {
+  cursor: default;
+}
+.ant-collapse > .ant-collapse-item .ant-collapse-header-collapsible-only .ant-collapse-header-text {
+  cursor: pointer;
+}
+.ant-collapse > .ant-collapse-item.ant-collapse-no-arrow > .ant-collapse-header {
+  padding-left: 12px;
+}
+.ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header {
+  padding: 12px 16px;
+  padding-right: 40px;
+}
+.ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow {
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  left: auto;
+  margin: 0;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+.ant-collapse-content {
+  color: rgba(0, 0, 0, 0.65);
+  background-color: #ffffff;
+  border-top: 1px solid #e5e5e5;
+}
+.ant-collapse-content > .ant-collapse-content-box {
+  padding: 16px;
+}
+.ant-collapse-content-hidden {
+  display: none;
+}
+.ant-collapse-item:last-child > .ant-collapse-content {
+  border-radius: 0 0 2px 2px;
+}
+.ant-collapse-borderless {
+  background-color: #fafafa;
+  border: 0;
+}
+.ant-collapse-borderless > .ant-collapse-item {
+  border-bottom: 1px solid #e5e5e5;
+}
+.ant-collapse-borderless > .ant-collapse-item:last-child,
+.ant-collapse-borderless > .ant-collapse-item:last-child .ant-collapse-header {
+  border-radius: 0;
+}
+.ant-collapse-borderless > .ant-collapse-item > .ant-collapse-content {
+  background-color: transparent;
+  border-top: 0;
+}
+.ant-collapse-borderless > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
+  padding-top: 4px;
+}
+.ant-collapse-ghost {
+  background-color: transparent;
+  border: 0;
+}
+.ant-collapse-ghost > .ant-collapse-item {
+  border-bottom: 0;
+}
+.ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content {
+  background-color: transparent;
+  border-top: 0;
+}
+.ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.ant-collapse .ant-collapse-item-disabled > .ant-collapse-header,
+.ant-collapse .ant-collapse-item-disabled > .ant-collapse-header > .arrow {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}
+.ant-collapse-rtl {
+  direction: rtl;
+}
+.ant-collapse-rtl .ant-collapse > .ant-collapse-item > .ant-collapse-header {
+  padding: 12px 16px;
+  padding-right: 40px;
+}
+.ant-collapse-rtl.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow svg {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+.ant-collapse-rtl.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-extra {
+  float: left;
+}
+.ant-collapse-rtl.ant-collapse > .ant-collapse-item.ant-collapse-no-arrow > .ant-collapse-header {
+  padding-right: 12px;
+  padding-left: 0;
+}
+.ant-btn {
+  padding: 4px 15px;
+}
+.ant-btn-sm {
+  padding: 0 7px;
+}
+.pandora-sdk-collapse-simple {
+  border-width: 0px;
+  color: #333;
+}
+.pandora-sdk-collapse-simple > .ant-collapse-item > .ant-collapse-header {
+  background-color: #ffffff;
+}
+.pandora-sdk-collapse-simple > .ant-collapse-item > .ant-collapse-header > .ant-collapse-arrow {
+  color: #333;
+}
+.pandora-sdk-collapse-simple > .ant-collapse-item > .ant-collapse-content {
+  color: heading-color;
+  border-top-width: 0px;
+}
+.pandora-sdk-collapse-primary,
+.pandora-sdk-collapse-dashed {
+  border: none;
+}
+.pandora-sdk-collapse-primary > .ant-collapse-item {
+  border: none;
+}
+.pandora-sdk-collapse-primary > .ant-collapse-item > .ant-collapse-header {
+  padding: 5px 16px;
+  border-bottom-width: 0px;
+  background-color: #fafafa;
+  font-weight: 500;
+}
+.pandora-sdk-collapse-primary > .ant-collapse-item > .ant-collapse-header .pandora-sdk-header-line {
+  width: 2px;
+  height: 16px;
+  position: absolute;
+  top: 8px;
+  left: 0px;
+  background-color: #2c6dd2;
+}
+.pandora-sdk-collapse-primary > .ant-collapse-item > .ant-collapse-content {
+  border: none;
+}
+.pandora-sdk-collapse-dashed > .ant-collapse-item {
+  border: 1px dashed #d9d9d9;
+  margin-bottom: 12px;
+}
+.pandora-sdk-collapse-dashed > .ant-collapse-item > .ant-collapse-header {
+  background-color: #ffffff;
+}
+.pandora-sdk-collapse-dashed > .ant-collapse-item > .ant-collapse-content {
+  border: none;
+}