@jotforminc/dnd-builder 3.7.1 → 3.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/lib/cjs/components/Panels/LeftPanel/Elements.js +30 -5
- package/lib/cjs/components/Panels/LeftPanel/Elements.js.map +1 -1
- package/lib/cjs/styles/_jfDarkTheme.scss +8 -0
- package/lib/cjs/styles/_jfLightTheme.scss +8 -0
- package/lib/cjs/styles/_jfReportsPanels.scss +19 -0
- package/lib/esm/components/Panels/LeftPanel/Elements.js +30 -5
- package/lib/esm/components/Panels/LeftPanel/Elements.js.map +1 -1
- package/lib/esm/styles/_jfDarkTheme.scss +8 -0
- package/lib/esm/styles/_jfLightTheme.scss +8 -0
- package/lib/esm/styles/_jfReportsPanels.scss +19 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
## [3.7.2](https://github.com/jotform/dnd-builder/compare/v3.7.1...v3.7.2) (2026-04-24)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* sub section support in left panel ([9e15812](https://github.com/jotform/dnd-builder/commit/9e158126e5a6e4e4e85b63501362b28bdbe64885))
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
* duplicate selector fix ([b72b52d](https://github.com/jotform/dnd-builder/commit/b72b52dcbca61f2258e31640b3ec60639992116c))
|
|
16
|
+
|
|
5
17
|
## [3.7.1](https://github.com/jotform/dnd-builder/compare/v3.7.0...v3.7.1) (2026-04-20)
|
|
6
18
|
|
|
7
19
|
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
require('core-js/modules/es.array.concat.js');
|
|
3
4
|
require('core-js/modules/es.array.filter.js');
|
|
4
5
|
require('core-js/modules/es.array.includes.js');
|
|
5
6
|
require('core-js/modules/es.array.map.js');
|
|
@@ -72,6 +73,15 @@ var Elements = function Elements() {
|
|
|
72
73
|
var elementWillBeUsed = React.useMemo(function () {
|
|
73
74
|
return Array.isArray(elements) ? elements : [];
|
|
74
75
|
}, [elements]);
|
|
76
|
+
var flatElements = React.useMemo(function () {
|
|
77
|
+
return elementWillBeUsed.reduce(function (acc, item) {
|
|
78
|
+
if (Array.isArray(item.elements)) {
|
|
79
|
+
return acc.concat(item.elements);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
return acc.concat(item);
|
|
83
|
+
}, []);
|
|
84
|
+
}, [elementWillBeUsed]);
|
|
75
85
|
|
|
76
86
|
var _useState = React.useState(elementWillBeUsed),
|
|
77
87
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -87,11 +97,28 @@ var Elements = function Elements() {
|
|
|
87
97
|
return;
|
|
88
98
|
}
|
|
89
99
|
|
|
90
|
-
var filteredElements =
|
|
100
|
+
var filteredElements = flatElements.filter(function (element) {
|
|
91
101
|
return element.title.toLowerCase().includes(value.toLowerCase());
|
|
92
102
|
});
|
|
93
103
|
setSearchElements(filteredElements);
|
|
94
|
-
}, [elementWillBeUsed]);
|
|
104
|
+
}, [elementWillBeUsed, flatElements]);
|
|
105
|
+
var renderElements = React.useCallback(function (items) {
|
|
106
|
+
return items.map(function (item, index) {
|
|
107
|
+
if (Array.isArray(item.elements)) {
|
|
108
|
+
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
109
|
+
className: "toolItem-subSection",
|
|
110
|
+
children: [/*#__PURE__*/jsxRuntime.jsx("span", {
|
|
111
|
+
className: "toolItem-subSection-title",
|
|
112
|
+
children: item.title
|
|
113
|
+
}), item.elements.map(function (el, elIndex) {
|
|
114
|
+
return /*#__PURE__*/jsxRuntime.jsx(Element, _objectSpread({}, el), elIndex.toString());
|
|
115
|
+
})]
|
|
116
|
+
}, item.section || index);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
return /*#__PURE__*/jsxRuntime.jsx(Element, _objectSpread({}, item), index.toString());
|
|
120
|
+
});
|
|
121
|
+
}, []);
|
|
95
122
|
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
96
123
|
className: "toolItemWrapper f-height d-flex dir-col o-auto p-relative",
|
|
97
124
|
children: [/*#__PURE__*/jsxRuntime.jsx(LeftPanelCloser, {}), /*#__PURE__*/jsxRuntime.jsxs(Section, {
|
|
@@ -103,9 +130,7 @@ var Elements = function Elements() {
|
|
|
103
130
|
onSearch: filterElementsBySearch
|
|
104
131
|
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
105
132
|
className: "toolItem-tabContent",
|
|
106
|
-
children: searchElements.length > 0 ? searchElements.
|
|
107
|
-
return /*#__PURE__*/jsxRuntime.jsx(Element, _objectSpread({}, element), index.toString());
|
|
108
|
-
}) : /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
133
|
+
children: searchElements.length > 0 ? renderElements(searchElements) : /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
109
134
|
className: "no-search-result-text",
|
|
110
135
|
children: NO_RESULT
|
|
111
136
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Elements.js","sources":["../../../../../src/components/Panels/LeftPanel/Elements.js"],"sourcesContent":["import {\n memo,\n useState,\n useMemo,\n useCallback,\n useEffect,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport Section from '../../Builder/Section';\nimport Element from '../../Builder/Element';\nimport { leftPanelConfigPropType } from '../../../constants/propTypes';\nimport LeftPanelCloser from './LeftPanelCloser';\nimport { useBuilderStore } from '../../../contexts/BuilderContext';\nimport Tabs from '../../Builder/Tabs';\nimport { getTabsWithElements } from '../../../utils/functions';\nimport { useTranslatedTexts } from '../../../utils/hooks';\nimport SearchInput from '../../Builder/SearchInput';\nimport { usePropStore } from '../../../contexts/PropContext';\n\nconst Elements = () => {\n const leftPanelConfig = usePropStore(state => state.leftPanelConfig);\n const activeTab = useBuilderStore(state => state.activeTab);\n const { ADD_ELEMENT, NO_RESULT } = useTranslatedTexts();\n\n // Tabs\n const tabDetails = getTabsWithElements(leftPanelConfig);\n const tabs = useMemo(() => {\n return Object.keys(tabDetails);\n }, [tabDetails]);\n\n const {\n elements = {},\n hasSearch = false,\n } = useMemo(() => {\n return tabDetails[tabs[activeTab.left]] || {};\n }, [activeTab.left, tabDetails, tabs]);\n\n const elementWillBeUsed = useMemo(() => {\n return Array.isArray(elements) ? elements : [];\n }, [elements]);\n\n const [searchElements, setSearchElements] = useState(elementWillBeUsed);\n\n useEffect(() => {\n setSearchElements(elementWillBeUsed);\n }, [elementWillBeUsed]);\n\n const filterElementsBySearch = useCallback(value => {\n if (value === '') {\n setSearchElements(elementWillBeUsed);\n return;\n }\n const filteredElements =
|
|
1
|
+
{"version":3,"file":"Elements.js","sources":["../../../../../src/components/Panels/LeftPanel/Elements.js"],"sourcesContent":["import {\n memo,\n useState,\n useMemo,\n useCallback,\n useEffect,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport Section from '../../Builder/Section';\nimport Element from '../../Builder/Element';\nimport { leftPanelConfigPropType } from '../../../constants/propTypes';\nimport LeftPanelCloser from './LeftPanelCloser';\nimport { useBuilderStore } from '../../../contexts/BuilderContext';\nimport Tabs from '../../Builder/Tabs';\nimport { getTabsWithElements } from '../../../utils/functions';\nimport { useTranslatedTexts } from '../../../utils/hooks';\nimport SearchInput from '../../Builder/SearchInput';\nimport { usePropStore } from '../../../contexts/PropContext';\n\nconst Elements = () => {\n const leftPanelConfig = usePropStore(state => state.leftPanelConfig);\n const activeTab = useBuilderStore(state => state.activeTab);\n const { ADD_ELEMENT, NO_RESULT } = useTranslatedTexts();\n\n // Tabs\n const tabDetails = getTabsWithElements(leftPanelConfig);\n const tabs = useMemo(() => {\n return Object.keys(tabDetails);\n }, [tabDetails]);\n\n const {\n elements = {},\n hasSearch = false,\n } = useMemo(() => {\n return tabDetails[tabs[activeTab.left]] || {};\n }, [activeTab.left, tabDetails, tabs]);\n\n const elementWillBeUsed = useMemo(() => {\n return Array.isArray(elements) ? elements : [];\n }, [elements]);\n\n const flatElements = useMemo(() => {\n return elementWillBeUsed.reduce((acc, item) => {\n if (Array.isArray(item.elements)) {\n return acc.concat(item.elements);\n }\n return acc.concat(item);\n }, []);\n }, [elementWillBeUsed]);\n\n const [searchElements, setSearchElements] = useState(elementWillBeUsed);\n\n useEffect(() => {\n setSearchElements(elementWillBeUsed);\n }, [elementWillBeUsed]);\n\n const filterElementsBySearch = useCallback(value => {\n if (value === '') {\n setSearchElements(elementWillBeUsed);\n return;\n }\n const filteredElements = flatElements.filter(element => element.title.toLowerCase().includes(value.toLowerCase()));\n setSearchElements(filteredElements);\n }, [elementWillBeUsed, flatElements]);\n\n const renderElements = useCallback(items => {\n return items.map((item, index) => {\n if (Array.isArray(item.elements)) {\n return (\n <div\n key={item.section || index}\n className=\"toolItem-subSection\"\n >\n <span className=\"toolItem-subSection-title\">{item.title}</span>\n {item.elements.map((el, elIndex) => (\n <Element\n key={elIndex.toString()}\n {...el}\n />\n ))}\n </div>\n );\n }\n return (\n <Element\n key={index.toString()}\n {...item}\n />\n );\n });\n }, []);\n\n return (\n <div className=\"toolItemWrapper f-height d-flex dir-col o-auto p-relative\">\n <LeftPanelCloser />\n <Section\n title={ADD_ELEMENT}\n >\n <Tabs\n panel=\"left\"\n tabs={tabs}\n />\n {hasSearch && (\n <SearchInput onSearch={filterElementsBySearch} />\n )}\n <div className=\"toolItem-tabContent\">\n {searchElements.length > 0 ? renderElements(searchElements) : (\n <div className=\"no-search-result-text\">{NO_RESULT}</div>\n )}\n </div>\n </Section>\n </div>\n );\n};\n\nElements.propTypes = {\n acceptedItems: PropTypes.shape({}),\n leftPanelConfig: leftPanelConfigPropType,\n onAnEventTrigger: PropTypes.func,\n onItemAdd: PropTypes.func,\n};\n\nexport default memo(Elements);\n"],"names":["Elements","leftPanelConfig","usePropStore","state","activeTab","useBuilderStore","useTranslatedTexts","ADD_ELEMENT","NO_RESULT","tabDetails","getTabsWithElements","tabs","useMemo","Object","keys","left","elements","hasSearch","elementWillBeUsed","Array","isArray","flatElements","reduce","acc","item","concat","useState","searchElements","setSearchElements","useEffect","filterElementsBySearch","useCallback","value","filteredElements","filter","element","title","toLowerCase","includes","renderElements","items","map","index","_jsxs","_jsx","el","elIndex","toString","section","length","propTypes","acceptedItems","PropTypes","shape","leftPanelConfigPropType","onAnEventTrigger","func","onItemAdd","memo"],"mappings":"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"}
|
|
@@ -96,6 +96,25 @@
|
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
98
|
|
|
99
|
+
&-subSection {
|
|
100
|
+
display: flex;
|
|
101
|
+
flex-direction: column;
|
|
102
|
+
|
|
103
|
+
&-title {
|
|
104
|
+
display: flex;
|
|
105
|
+
align-items: center;
|
|
106
|
+
justify-content: center;
|
|
107
|
+
height: 36px;
|
|
108
|
+
font-size: 0.875rem;
|
|
109
|
+
font-weight: 400;
|
|
110
|
+
line-height: 20px;
|
|
111
|
+
letter-spacing: -0.084px;
|
|
112
|
+
white-space: nowrap;
|
|
113
|
+
user-select: none;
|
|
114
|
+
pointer-events: none;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
99
118
|
.note {
|
|
100
119
|
opacity: .6;
|
|
101
120
|
font-size: .75rem;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import 'core-js/modules/es.array.concat.js';
|
|
1
2
|
import 'core-js/modules/es.array.filter.js';
|
|
2
3
|
import 'core-js/modules/es.array.includes.js';
|
|
3
4
|
import 'core-js/modules/es.array.map.js';
|
|
@@ -66,6 +67,15 @@ var Elements = function Elements() {
|
|
|
66
67
|
var elementWillBeUsed = useMemo(function () {
|
|
67
68
|
return Array.isArray(elements) ? elements : [];
|
|
68
69
|
}, [elements]);
|
|
70
|
+
var flatElements = useMemo(function () {
|
|
71
|
+
return elementWillBeUsed.reduce(function (acc, item) {
|
|
72
|
+
if (Array.isArray(item.elements)) {
|
|
73
|
+
return acc.concat(item.elements);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
return acc.concat(item);
|
|
77
|
+
}, []);
|
|
78
|
+
}, [elementWillBeUsed]);
|
|
69
79
|
|
|
70
80
|
var _useState = useState(elementWillBeUsed),
|
|
71
81
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -81,11 +91,28 @@ var Elements = function Elements() {
|
|
|
81
91
|
return;
|
|
82
92
|
}
|
|
83
93
|
|
|
84
|
-
var filteredElements =
|
|
94
|
+
var filteredElements = flatElements.filter(function (element) {
|
|
85
95
|
return element.title.toLowerCase().includes(value.toLowerCase());
|
|
86
96
|
});
|
|
87
97
|
setSearchElements(filteredElements);
|
|
88
|
-
}, [elementWillBeUsed]);
|
|
98
|
+
}, [elementWillBeUsed, flatElements]);
|
|
99
|
+
var renderElements = useCallback(function (items) {
|
|
100
|
+
return items.map(function (item, index) {
|
|
101
|
+
if (Array.isArray(item.elements)) {
|
|
102
|
+
return /*#__PURE__*/jsxs("div", {
|
|
103
|
+
className: "toolItem-subSection",
|
|
104
|
+
children: [/*#__PURE__*/jsx("span", {
|
|
105
|
+
className: "toolItem-subSection-title",
|
|
106
|
+
children: item.title
|
|
107
|
+
}), item.elements.map(function (el, elIndex) {
|
|
108
|
+
return /*#__PURE__*/jsx(Element, _objectSpread({}, el), elIndex.toString());
|
|
109
|
+
})]
|
|
110
|
+
}, item.section || index);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
return /*#__PURE__*/jsx(Element, _objectSpread({}, item), index.toString());
|
|
114
|
+
});
|
|
115
|
+
}, []);
|
|
89
116
|
return /*#__PURE__*/jsxs("div", {
|
|
90
117
|
className: "toolItemWrapper f-height d-flex dir-col o-auto p-relative",
|
|
91
118
|
children: [/*#__PURE__*/jsx(LeftPanelToggler, {}), /*#__PURE__*/jsxs(Section, {
|
|
@@ -97,9 +124,7 @@ var Elements = function Elements() {
|
|
|
97
124
|
onSearch: filterElementsBySearch
|
|
98
125
|
}), /*#__PURE__*/jsx("div", {
|
|
99
126
|
className: "toolItem-tabContent",
|
|
100
|
-
children: searchElements.length > 0 ? searchElements
|
|
101
|
-
return /*#__PURE__*/jsx(Element, _objectSpread({}, element), index.toString());
|
|
102
|
-
}) : /*#__PURE__*/jsx("div", {
|
|
127
|
+
children: searchElements.length > 0 ? renderElements(searchElements) : /*#__PURE__*/jsx("div", {
|
|
103
128
|
className: "no-search-result-text",
|
|
104
129
|
children: NO_RESULT
|
|
105
130
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Elements.js","sources":["../../../../../src/components/Panels/LeftPanel/Elements.js"],"sourcesContent":["import {\n memo,\n useState,\n useMemo,\n useCallback,\n useEffect,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport Section from '../../Builder/Section';\nimport Element from '../../Builder/Element';\nimport { leftPanelConfigPropType } from '../../../constants/propTypes';\nimport LeftPanelCloser from './LeftPanelCloser';\nimport { useBuilderStore } from '../../../contexts/BuilderContext';\nimport Tabs from '../../Builder/Tabs';\nimport { getTabsWithElements } from '../../../utils/functions';\nimport { useTranslatedTexts } from '../../../utils/hooks';\nimport SearchInput from '../../Builder/SearchInput';\nimport { usePropStore } from '../../../contexts/PropContext';\n\nconst Elements = () => {\n const leftPanelConfig = usePropStore(state => state.leftPanelConfig);\n const activeTab = useBuilderStore(state => state.activeTab);\n const { ADD_ELEMENT, NO_RESULT } = useTranslatedTexts();\n\n // Tabs\n const tabDetails = getTabsWithElements(leftPanelConfig);\n const tabs = useMemo(() => {\n return Object.keys(tabDetails);\n }, [tabDetails]);\n\n const {\n elements = {},\n hasSearch = false,\n } = useMemo(() => {\n return tabDetails[tabs[activeTab.left]] || {};\n }, [activeTab.left, tabDetails, tabs]);\n\n const elementWillBeUsed = useMemo(() => {\n return Array.isArray(elements) ? elements : [];\n }, [elements]);\n\n const [searchElements, setSearchElements] = useState(elementWillBeUsed);\n\n useEffect(() => {\n setSearchElements(elementWillBeUsed);\n }, [elementWillBeUsed]);\n\n const filterElementsBySearch = useCallback(value => {\n if (value === '') {\n setSearchElements(elementWillBeUsed);\n return;\n }\n const filteredElements =
|
|
1
|
+
{"version":3,"file":"Elements.js","sources":["../../../../../src/components/Panels/LeftPanel/Elements.js"],"sourcesContent":["import {\n memo,\n useState,\n useMemo,\n useCallback,\n useEffect,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport Section from '../../Builder/Section';\nimport Element from '../../Builder/Element';\nimport { leftPanelConfigPropType } from '../../../constants/propTypes';\nimport LeftPanelCloser from './LeftPanelCloser';\nimport { useBuilderStore } from '../../../contexts/BuilderContext';\nimport Tabs from '../../Builder/Tabs';\nimport { getTabsWithElements } from '../../../utils/functions';\nimport { useTranslatedTexts } from '../../../utils/hooks';\nimport SearchInput from '../../Builder/SearchInput';\nimport { usePropStore } from '../../../contexts/PropContext';\n\nconst Elements = () => {\n const leftPanelConfig = usePropStore(state => state.leftPanelConfig);\n const activeTab = useBuilderStore(state => state.activeTab);\n const { ADD_ELEMENT, NO_RESULT } = useTranslatedTexts();\n\n // Tabs\n const tabDetails = getTabsWithElements(leftPanelConfig);\n const tabs = useMemo(() => {\n return Object.keys(tabDetails);\n }, [tabDetails]);\n\n const {\n elements = {},\n hasSearch = false,\n } = useMemo(() => {\n return tabDetails[tabs[activeTab.left]] || {};\n }, [activeTab.left, tabDetails, tabs]);\n\n const elementWillBeUsed = useMemo(() => {\n return Array.isArray(elements) ? elements : [];\n }, [elements]);\n\n const flatElements = useMemo(() => {\n return elementWillBeUsed.reduce((acc, item) => {\n if (Array.isArray(item.elements)) {\n return acc.concat(item.elements);\n }\n return acc.concat(item);\n }, []);\n }, [elementWillBeUsed]);\n\n const [searchElements, setSearchElements] = useState(elementWillBeUsed);\n\n useEffect(() => {\n setSearchElements(elementWillBeUsed);\n }, [elementWillBeUsed]);\n\n const filterElementsBySearch = useCallback(value => {\n if (value === '') {\n setSearchElements(elementWillBeUsed);\n return;\n }\n const filteredElements = flatElements.filter(element => element.title.toLowerCase().includes(value.toLowerCase()));\n setSearchElements(filteredElements);\n }, [elementWillBeUsed, flatElements]);\n\n const renderElements = useCallback(items => {\n return items.map((item, index) => {\n if (Array.isArray(item.elements)) {\n return (\n <div\n key={item.section || index}\n className=\"toolItem-subSection\"\n >\n <span className=\"toolItem-subSection-title\">{item.title}</span>\n {item.elements.map((el, elIndex) => (\n <Element\n key={elIndex.toString()}\n {...el}\n />\n ))}\n </div>\n );\n }\n return (\n <Element\n key={index.toString()}\n {...item}\n />\n );\n });\n }, []);\n\n return (\n <div className=\"toolItemWrapper f-height d-flex dir-col o-auto p-relative\">\n <LeftPanelCloser />\n <Section\n title={ADD_ELEMENT}\n >\n <Tabs\n panel=\"left\"\n tabs={tabs}\n />\n {hasSearch && (\n <SearchInput onSearch={filterElementsBySearch} />\n )}\n <div className=\"toolItem-tabContent\">\n {searchElements.length > 0 ? renderElements(searchElements) : (\n <div className=\"no-search-result-text\">{NO_RESULT}</div>\n )}\n </div>\n </Section>\n </div>\n );\n};\n\nElements.propTypes = {\n acceptedItems: PropTypes.shape({}),\n leftPanelConfig: leftPanelConfigPropType,\n onAnEventTrigger: PropTypes.func,\n onItemAdd: PropTypes.func,\n};\n\nexport default memo(Elements);\n"],"names":["Elements","leftPanelConfig","usePropStore","state","activeTab","useBuilderStore","useTranslatedTexts","ADD_ELEMENT","NO_RESULT","tabDetails","getTabsWithElements","tabs","useMemo","Object","keys","left","elements","hasSearch","elementWillBeUsed","Array","isArray","flatElements","reduce","acc","item","concat","useState","searchElements","setSearchElements","useEffect","filterElementsBySearch","useCallback","value","filteredElements","filter","element","title","toLowerCase","includes","renderElements","items","map","index","_jsxs","_jsx","el","elIndex","toString","section","LeftPanelCloser","length","propTypes","acceptedItems","PropTypes","shape","leftPanelConfigPropType","onAnEventTrigger","func","onItemAdd","memo"],"mappings":"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"}
|
|
@@ -96,6 +96,25 @@
|
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
98
|
|
|
99
|
+
&-subSection {
|
|
100
|
+
display: flex;
|
|
101
|
+
flex-direction: column;
|
|
102
|
+
|
|
103
|
+
&-title {
|
|
104
|
+
display: flex;
|
|
105
|
+
align-items: center;
|
|
106
|
+
justify-content: center;
|
|
107
|
+
height: 36px;
|
|
108
|
+
font-size: 0.875rem;
|
|
109
|
+
font-weight: 400;
|
|
110
|
+
line-height: 20px;
|
|
111
|
+
letter-spacing: -0.084px;
|
|
112
|
+
white-space: nowrap;
|
|
113
|
+
user-select: none;
|
|
114
|
+
pointer-events: none;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
99
118
|
.note {
|
|
100
119
|
opacity: .6;
|
|
101
120
|
font-size: .75rem;
|