@itcase/ui 1.5.1 → 1.7.0
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/dist/{Badge-ydSHGXSG.js → Badge-BE28NFES.js} +4 -4
- package/dist/{Badge-JXM0G_0I.js → Badge-C_6Iofu7.js} +4 -4
- package/dist/{Button-BmSyIDb_.js → Button-Df425Vot.js} +6 -6
- package/dist/{Button-DCtRrkgc.js → Button-sYpJIJPv.js} +6 -6
- package/dist/{Divider-D8hUUrwe.js → Divider-BQIfjvPR.js} +2 -2
- package/dist/{Divider-DhXzYcNF.js → Divider-CUFKsm-9.js} +2 -2
- package/dist/{DropdownItem-CBJeJPbP.js → DropdownItem-CdAS1E-G.js} +4 -5
- package/dist/{DropdownItem-C8CumsgX.js → DropdownItem-f29l8dds.js} +4 -5
- package/dist/{Group-OkygpKiJ.js → Group-D5nvxHx0.js} +2 -2
- package/dist/{Group-BVlu5z77.js → Group-NYDjw1CD.js} +2 -2
- package/dist/{Icon-BOEOspTF.js → Icon-BzIdIgGY.js} +1 -1
- package/dist/{Icon-DU2T-nfY.js → Icon-dS-it4rs.js} +1 -1
- package/dist/{Input-e0kLrbs6.js → Input-C_HeI9UK.js} +2 -2
- package/dist/{Input-ChiH90mV.js → Input-v52BiIsb.js} +2 -2
- package/dist/{Label-CP8IAPOM.js → Label-DsNZ-asS.js} +4 -4
- package/dist/{Label-CfE08vBy.js → Label-brG78nLi.js} +4 -4
- package/dist/{Loader-CRN4MAbm.js → Loader-BnhUh-g6.js} +3 -3
- package/dist/{Loader-rzo8nnRI.js → Loader-CZVsMYl6.js} +3 -3
- package/dist/{Overlay-CRIofShk.js → Overlay-Be9UCtR9.js} +2 -2
- package/dist/{Overlay-CZFSerUl.js → Overlay-BoIJ-g58.js} +2 -2
- package/dist/{Text-CEcBg-F5.js → Text-DwIx33-P.js} +2 -2
- package/dist/{Text-CI2prtf6.js → Text-aaWArShm.js} +2 -2
- package/dist/{Title-CaXw1KBQ.js → Title--_epIXkC.js} +2 -2
- package/dist/{Title-C4xUtigh.js → Title-ByfOyy-n.js} +2 -2
- package/dist/{Tooltip-EOu0a93a.js → Tooltip-DP32J5V6.js} +4 -4
- package/dist/{Tooltip-Lhx-Fefx.js → Tooltip-hznDyLwa.js} +4 -4
- package/dist/cjs/components/Accordion.js +9 -9
- package/dist/cjs/components/Avatar.js +6 -6
- package/dist/cjs/components/Badge.js +5 -5
- package/dist/cjs/components/Breadcrumbs.js +4 -4
- package/dist/cjs/components/Button.js +6 -6
- package/dist/cjs/components/Cell.js +7 -7
- package/dist/cjs/components/Checkbox.js +4 -4
- package/dist/cjs/components/Checkmark.js +2 -2
- package/dist/cjs/components/Chips.js +6 -7
- package/dist/cjs/components/Choice.js +7 -7
- package/dist/cjs/components/Code.js +2 -2
- package/dist/cjs/components/CookiesWarning.js +7 -7
- package/dist/cjs/components/DadataHintField.js +1 -1
- package/dist/cjs/components/DatePicker.js +10 -10
- package/dist/cjs/components/Divider.js +1 -1
- package/dist/cjs/components/Dropdown.js +3 -3
- package/dist/cjs/components/Group.js +1 -1
- package/dist/cjs/components/HeroTitle.js +2 -2
- package/dist/cjs/components/Icon.js +4 -4
- package/dist/cjs/components/Input.js +1 -1
- package/dist/cjs/components/InputMask.js +2 -2
- package/dist/cjs/components/InputPassword.js +6 -6
- package/dist/cjs/components/Label.js +4 -4
- package/dist/cjs/components/Loader.js +2 -2
- package/dist/cjs/components/Logo.js +2 -2
- package/dist/cjs/components/MenuItem.js +3 -3
- package/dist/cjs/components/Modal.js +6 -6
- package/dist/cjs/components/Notification.js +1 -1
- package/dist/cjs/components/Overlay.js +1 -1
- package/dist/cjs/components/Pagination.js +8 -8
- package/dist/cjs/components/Panel.js +4 -4
- package/dist/cjs/components/Radio.js +3 -3
- package/dist/cjs/components/Response.js +9 -10
- package/dist/cjs/components/Search.js +6 -6
- package/dist/cjs/components/Segmented.js +3 -3
- package/dist/cjs/components/Select.js +17 -12
- package/dist/cjs/components/Swiper.js +1 -1
- package/dist/cjs/components/Switch.js +8 -8
- package/dist/cjs/components/Tab.js +8 -8
- package/dist/cjs/components/Text.js +1 -1
- package/dist/cjs/components/Textarea.js +2 -2
- package/dist/cjs/components/Tile.js +7 -7
- package/dist/cjs/components/Title.js +1 -1
- package/dist/cjs/components/Tooltip.js +3 -3
- package/dist/components/Accordion.js +9 -9
- package/dist/components/Avatar.js +6 -6
- package/dist/components/Badge.js +5 -5
- package/dist/components/Breadcrumbs.js +4 -4
- package/dist/components/Button.js +6 -6
- package/dist/components/Cell.js +7 -7
- package/dist/components/Checkbox.js +4 -4
- package/dist/components/Checkmark.js +2 -2
- package/dist/components/Chips.js +6 -7
- package/dist/components/Choice.js +7 -7
- package/dist/components/Code.js +2 -2
- package/dist/components/CookiesWarning.js +7 -7
- package/dist/components/DadataHintField.js +1 -1
- package/dist/components/DatePicker.js +10 -10
- package/dist/components/Divider.js +1 -1
- package/dist/components/Dropdown.js +3 -3
- package/dist/components/Group.js +1 -1
- package/dist/components/HeroTitle.js +2 -2
- package/dist/components/Icon.js +4 -4
- package/dist/components/Input.js +1 -1
- package/dist/components/InputMask.js +2 -2
- package/dist/components/InputPassword.js +6 -6
- package/dist/components/Label.js +4 -4
- package/dist/components/Loader.js +2 -2
- package/dist/components/Logo.js +2 -2
- package/dist/components/MenuItem.js +3 -3
- package/dist/components/Modal.js +6 -6
- package/dist/components/Notification.js +1 -1
- package/dist/components/Overlay.js +1 -1
- package/dist/components/Pagination.js +8 -8
- package/dist/components/Panel.js +4 -4
- package/dist/components/Radio.js +3 -3
- package/dist/components/Response.js +9 -10
- package/dist/components/Search.js +6 -6
- package/dist/components/Segmented.js +3 -3
- package/dist/components/Select.js +17 -12
- package/dist/components/Swiper.js +1 -1
- package/dist/components/Switch.js +8 -8
- package/dist/components/Tab.js +8 -8
- package/dist/components/Text.js +1 -1
- package/dist/components/Textarea.js +2 -2
- package/dist/components/Tile.js +7 -7
- package/dist/components/Title.js +1 -1
- package/dist/components/Tooltip.js +3 -3
- package/dist/css/components/Switch/Switch.css +65 -25
- package/dist/types/components/Select/index.d.ts +15 -15
- package/package.json +1 -1
|
@@ -5,9 +5,9 @@ import clsx from 'clsx';
|
|
|
5
5
|
import ceil from 'lodash/ceil';
|
|
6
6
|
import ReactPaginate from 'react-paginate';
|
|
7
7
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
8
|
-
import { D as Dropdown, a as DropdownItem } from '../DropdownItem-
|
|
9
|
-
import { I as Icon } from '../Icon-
|
|
10
|
-
import { T as Text } from '../Text-
|
|
8
|
+
import { D as Dropdown, a as DropdownItem } from '../DropdownItem-f29l8dds.js';
|
|
9
|
+
import { I as Icon } from '../Icon-BzIdIgGY.js';
|
|
10
|
+
import { T as Text } from '../Text-aaWArShm.js';
|
|
11
11
|
import 'lodash/camelCase';
|
|
12
12
|
import 'lodash/castArray';
|
|
13
13
|
import 'lodash/upperFirst';
|
|
@@ -21,11 +21,11 @@ import '../utils/setViewportProperty.js';
|
|
|
21
21
|
import '../hooks/useStyles/useStyles.js';
|
|
22
22
|
import 'lodash/maxBy';
|
|
23
23
|
import '../hooks/useStyles/styleAttributes.js';
|
|
24
|
-
import '../Divider-
|
|
24
|
+
import '../Divider-CUFKsm-9.js';
|
|
25
25
|
import 'react-inlinesvg';
|
|
26
26
|
import '../Link-aBsZ1d0Q.js';
|
|
27
|
-
import '../Tooltip-
|
|
28
|
-
import '../Title
|
|
27
|
+
import '../Tooltip-DP32J5V6.js';
|
|
28
|
+
import '../Title--_epIXkC.js';
|
|
29
29
|
|
|
30
30
|
var paginationAppearance = {
|
|
31
31
|
default: {
|
|
@@ -126,9 +126,9 @@ function Pagination(props) {
|
|
|
126
126
|
}
|
|
127
127
|
return 0;
|
|
128
128
|
}, [pageNumber]);
|
|
129
|
-
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (
|
|
129
|
+
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
|
|
130
130
|
var _a;
|
|
131
|
-
return (__assign(__assign({},
|
|
131
|
+
return (__assign(__assign({}, resultConfig), (_a = paginationConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
|
|
132
132
|
}, {});
|
|
133
133
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
134
134
|
var justifyContentClass = propsGenerator.justifyContentClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, gapClass = propsGenerator.gapClass;
|
package/dist/components/Panel.js
CHANGED
|
@@ -4,8 +4,8 @@ import React from 'react';
|
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
6
6
|
import { useStyles } from '../hooks/useStyles/useStyles.js';
|
|
7
|
-
import { G as Group } from '../Group-
|
|
8
|
-
import { T as Text } from '../Text-
|
|
7
|
+
import { G as Group } from '../Group-D5nvxHx0.js';
|
|
8
|
+
import { T as Text } from '../Text-aaWArShm.js';
|
|
9
9
|
import 'lodash/camelCase';
|
|
10
10
|
import 'lodash/castArray';
|
|
11
11
|
import 'lodash/upperFirst';
|
|
@@ -27,9 +27,9 @@ var panelConfig = {
|
|
|
27
27
|
};
|
|
28
28
|
var Panel = React.forwardRef(function Panel(props, ref) {
|
|
29
29
|
var className = props.className, appearance = props.appearance, title = props.title, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, desc = props.desc, descTextColor = props.descTextColor, descTextSize = props.descTextSize, descTextWeight = props.descTextWeight, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, htmlFor = props.htmlFor, verticalScroll = props.verticalScroll, set = props.set, children = props.children;
|
|
30
|
-
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (
|
|
30
|
+
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
|
|
31
31
|
var _a;
|
|
32
|
-
return (__assign(__assign({},
|
|
32
|
+
return (__assign(__assign({}, resultConfig), (_a = panelConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
|
|
33
33
|
}, {});
|
|
34
34
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
35
35
|
var directionClass = propsGenerator.directionClass, justifyContentClass = propsGenerator.justifyContentClass, alignContentClass = propsGenerator.alignContentClass, alignItemsClass = propsGenerator.alignItemsClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, elevationClass = propsGenerator.elevationClass, heightClass = propsGenerator.heightClass, positionClass = propsGenerator.positionClass, shapeClass = propsGenerator.shapeClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
|
package/dist/components/Radio.js
CHANGED
|
@@ -2,7 +2,7 @@ import { _ as __assign } from '../tslib.es6-Bwu1Cn-t.js';
|
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
5
|
-
import { T as Text } from '../Text-
|
|
5
|
+
import { T as Text } from '../Text-aaWArShm.js';
|
|
6
6
|
import 'react';
|
|
7
7
|
import 'lodash/camelCase';
|
|
8
8
|
import 'lodash/castArray';
|
|
@@ -49,9 +49,9 @@ var radioConfig = {
|
|
|
49
49
|
};
|
|
50
50
|
function Radio(props) {
|
|
51
51
|
var id = props.id, className = props.className, appearance = props.appearance, label = props.label, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, desc = props.desc, descTextColor = props.descTextColor, descTextSize = props.descTextSize, descTextWeight = props.descTextWeight, disabled = props.disabled, isDisabled = props.isDisabled, checked = props.checked, _a = props.tag, Tag = _a === void 0 ? 'label' : _a, onChange = props.onChange;
|
|
52
|
-
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (
|
|
52
|
+
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
|
|
53
53
|
var _a;
|
|
54
|
-
return (__assign(__assign({},
|
|
54
|
+
return (__assign(__assign({}, resultConfig), (_a = radioConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
|
|
55
55
|
}, {});
|
|
56
56
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
57
57
|
var fillClass = propsGenerator.fillClass, _b = propsGenerator.shapeClass, shapeClass = _b === void 0 ? 'circular' : _b, stateBorderColorClass = propsGenerator.stateBorderColorClass, stateBorderWidthClass = propsGenerator.stateBorderWidthClass, stateCheckmarkFillClass = propsGenerator.stateCheckmarkFillClass, stateShapeClass = propsGenerator.stateShapeClass;
|
|
@@ -5,9 +5,9 @@ import clsx from 'clsx';
|
|
|
5
5
|
import SVG from 'react-inlinesvg';
|
|
6
6
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
7
7
|
import { useStyles } from '../hooks/useStyles/useStyles.js';
|
|
8
|
-
import { B as Button } from '../Button-
|
|
9
|
-
import { G as Group } from '../Group-
|
|
10
|
-
import { T as Text } from '../Text-
|
|
8
|
+
import { B as Button } from '../Button-sYpJIJPv.js';
|
|
9
|
+
import { G as Group } from '../Group-D5nvxHx0.js';
|
|
10
|
+
import { T as Text } from '../Text-aaWArShm.js';
|
|
11
11
|
import 'lodash/camelCase';
|
|
12
12
|
import 'lodash/castArray';
|
|
13
13
|
import 'lodash/upperFirst';
|
|
@@ -20,11 +20,11 @@ import 'react-responsive';
|
|
|
20
20
|
import '../utils/setViewportProperty.js';
|
|
21
21
|
import 'lodash/maxBy';
|
|
22
22
|
import '../hooks/useStyles/styleAttributes.js';
|
|
23
|
-
import '../Icon-
|
|
23
|
+
import '../Icon-BzIdIgGY.js';
|
|
24
24
|
import '../Link-aBsZ1d0Q.js';
|
|
25
|
-
import '../Tooltip-
|
|
26
|
-
import '../Title
|
|
27
|
-
import '../Loader-
|
|
25
|
+
import '../Tooltip-DP32J5V6.js';
|
|
26
|
+
import '../Title--_epIXkC.js';
|
|
27
|
+
import '../Loader-BnhUh-g6.js';
|
|
28
28
|
|
|
29
29
|
var img$6 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23D9D9D9'/%3e%3cpath d='M93.2275 101.842H84.0659C83.8263 99.1898 83.976 96.839 84.515 94.7895C85.1138 92.74 86.2216 90.8111 87.8383 89.0027C89.515 87.1341 91.7904 85.2051 94.6647 83.2159C96.5808 81.8898 97.9581 80.5637 98.7964 79.2375C99.6946 77.9114 100.144 76.4345 100.144 74.807C100.144 72.2753 99.2156 70.1957 97.3593 68.5682C95.503 66.9406 93.0778 66.1269 90.0838 66.1269C87.3892 66.1269 84.7246 66.9105 82.0898 68.4777C79.4551 69.9847 77.0299 72.3959 74.8144 75.7112L67 67.9352C70.0539 64.0774 73.5868 61.1237 77.5988 59.0742C81.6707 57.0247 85.9521 56 90.4431 56C94.5749 56 98.2575 56.8439 101.491 58.5317C104.725 60.1592 107.269 62.3896 109.126 65.2227C111.042 67.9955 112 71.1601 112 74.7166C112 78.0922 111.042 81.1062 109.126 83.7584C107.269 86.4107 104.455 88.8821 100.683 91.1727C97.7485 92.8605 95.7725 94.4881 94.7545 96.0553C93.7365 97.6226 93.2275 99.5515 93.2275 101.842ZM96.1916 115.767C96.1916 117.756 95.4731 119.474 94.0359 120.92C92.5988 122.307 90.8323 123 88.7365 123C86.6407 123 84.8743 122.307 83.4371 120.92C82 119.474 81.2814 117.756 81.2814 115.767C81.2814 113.717 82 111.999 83.4371 110.613C84.8743 109.166 86.6407 108.443 88.7365 108.443C90.8323 108.443 92.5988 109.166 94.0359 110.613C95.4731 111.999 96.1916 113.717 96.1916 115.767Z' fill='%23747474'/%3e%3c/svg%3e";
|
|
30
30
|
|
|
@@ -229,16 +229,15 @@ var responseConfig = {
|
|
|
229
229
|
};
|
|
230
230
|
function Response(props) {
|
|
231
231
|
var className = props.className, appearance = props.appearance, width = props.width, height = props.height, title = props.title, desc = props.desc, primaryButton = props.primaryButton, secondaryButton = props.secondaryButton, onClickSecondaryButton = props.onClickSecondaryButton, before = props.before, after = props.after;
|
|
232
|
-
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (
|
|
232
|
+
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
|
|
233
233
|
var _a;
|
|
234
|
-
return (__assign(__assign({},
|
|
234
|
+
return (__assign(__assign({}, resultConfig), (_a = responseConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
|
|
235
235
|
}, {});
|
|
236
236
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
237
237
|
var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextWeight = propsGenerator.titleTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textAlignClass = propsGenerator.textAlignClass, primaryButtonAfter = propsGenerator.primaryButtonAfter, primaryButtonAppearance = propsGenerator.primaryButtonAppearance, primaryButtonBefore = propsGenerator.primaryButtonBefore, primaryButtonFill = propsGenerator.primaryButtonFill, primaryButtonFillHover = propsGenerator.primaryButtonFillHover, primaryButtonLabel = propsGenerator.primaryButtonLabel, primaryButtonLabelTextColor = propsGenerator.primaryButtonLabelTextColor, primaryButtonLabelTextSize = propsGenerator.primaryButtonLabelTextSize, primaryButtonShape = propsGenerator.primaryButtonShape, primaryButtonSize = propsGenerator.primaryButtonSize, primaryButtonWidth = propsGenerator.primaryButtonWidth, secondaryButtonAfter = propsGenerator.secondaryButtonAfter, secondaryButtonAppearance = propsGenerator.secondaryButtonAppearance, secondaryButtonBefore = propsGenerator.secondaryButtonBefore, secondaryButtonFill = propsGenerator.secondaryButtonFill, secondaryButtonFillHover = propsGenerator.secondaryButtonFillHover, secondaryButtonLabel = propsGenerator.secondaryButtonLabel, secondaryButtonLabelTextColor = propsGenerator.secondaryButtonLabelTextColor, secondaryButtonLabelTextSize = propsGenerator.secondaryButtonLabelTextSize, secondaryButtonShape = propsGenerator.secondaryButtonShape, secondaryButtonSize = propsGenerator.secondaryButtonSize, secondaryButtonWidth = propsGenerator.secondaryButtonWidth, onClickPrimaryButton = propsGenerator.onClickPrimaryButton, dataTestId = propsGenerator.dataTestId, dataTour = propsGenerator.dataTour, imageSrc = propsGenerator.imageSrc, shapeClass = propsGenerator.shapeClass, svgFillClass = propsGenerator.svgFillClass, SvgImage = propsGenerator.SvgImage, svgPathFillClass = propsGenerator.svgPathFillClass, svgSrc = propsGenerator.svgSrc;
|
|
238
238
|
var ImageComponent = useMemo(function () {
|
|
239
239
|
var src = imageSrc || svgSrc;
|
|
240
240
|
var Image = SvgImage;
|
|
241
|
-
console.log(src);
|
|
242
241
|
if (Image) {
|
|
243
242
|
var sizes = {};
|
|
244
243
|
if (width) {
|
|
@@ -4,8 +4,8 @@ import React, { useCallback } from 'react';
|
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
6
6
|
import { useStyles } from '../hooks/useStyles/useStyles.js';
|
|
7
|
-
import { I as Icon } from '../Icon-
|
|
8
|
-
import { T as Text } from '../Text-
|
|
7
|
+
import { I as Icon } from '../Icon-BzIdIgGY.js';
|
|
8
|
+
import { T as Text } from '../Text-aaWArShm.js';
|
|
9
9
|
import { S as Scrollbar } from '../Scrollbar-CThJeCLF.js';
|
|
10
10
|
import 'lodash/camelCase';
|
|
11
11
|
import 'lodash/castArray';
|
|
@@ -21,8 +21,8 @@ import 'lodash/maxBy';
|
|
|
21
21
|
import '../hooks/useStyles/styleAttributes.js';
|
|
22
22
|
import 'react-inlinesvg';
|
|
23
23
|
import '../Link-aBsZ1d0Q.js';
|
|
24
|
-
import '../Tooltip-
|
|
25
|
-
import '../Title
|
|
24
|
+
import '../Tooltip-DP32J5V6.js';
|
|
25
|
+
import '../Title--_epIXkC.js';
|
|
26
26
|
import 'react-scrollbars-custom';
|
|
27
27
|
|
|
28
28
|
var searchAppearance = {
|
|
@@ -53,9 +53,9 @@ var SearchInput = React.forwardRef(function SearchInput(props, ref) {
|
|
|
53
53
|
onClickClean();
|
|
54
54
|
}
|
|
55
55
|
}, [onChange, onClickClean]);
|
|
56
|
-
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (
|
|
56
|
+
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
|
|
57
57
|
var _a;
|
|
58
|
-
return (__assign(__assign({},
|
|
58
|
+
return (__assign(__assign({}, resultConfig), (_a = searchInputConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
|
|
59
59
|
}, {});
|
|
60
60
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
61
61
|
var fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderHoverClass = propsGenerator.borderHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, inputFillClass = propsGenerator.inputFillClass, inputShapeClass = propsGenerator.inputShapeClass, inputTextColorClass = propsGenerator.inputTextColorClass, _c = propsGenerator.inputTextSizeClass, inputTextSizeClass = _c === void 0 ? 'm' : _c, inputTextStyleClass = propsGenerator.inputTextStyleClass, inputTextWeightClass = propsGenerator.inputTextWeightClass, shapeClass = propsGenerator.shapeClass, widthClass = propsGenerator.widthClass;
|
|
@@ -3,7 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
3
3
|
import React, { useRef, useMemo, createRef, useCallback, useEffect } from 'react';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
6
|
-
import { T as Text } from '../Text-
|
|
6
|
+
import { T as Text } from '../Text-aaWArShm.js';
|
|
7
7
|
import 'lodash/camelCase';
|
|
8
8
|
import 'lodash/castArray';
|
|
9
9
|
import 'lodash/upperFirst';
|
|
@@ -70,9 +70,9 @@ var Segmented = React.forwardRef(function (props) {
|
|
|
70
70
|
// controlRef.current.style.setProperty('--segmented-active-x-pos', `${offsetLeft - 2}px`)
|
|
71
71
|
(_b = controlRef.current) === null || _b === void 0 ? void 0 : _b.style.setProperty('--segmented-active-x-pos', "".concat(offsetLeft, "px"));
|
|
72
72
|
}, [activeSegment, segmentsRefs]);
|
|
73
|
-
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (
|
|
73
|
+
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
|
|
74
74
|
var _a;
|
|
75
|
-
return (__assign(__assign({},
|
|
75
|
+
return (__assign(__assign({}, resultConfig), (_a = segmentedConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
|
|
76
76
|
}, {});
|
|
77
77
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
78
78
|
var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, labelTextActiveColor = propsGenerator.labelTextActiveColor, labelTextActiveHoverColor = propsGenerator.labelTextActiveHoverColor, labelTextColor = propsGenerator.labelTextColor, labelTextHoverColor = propsGenerator.labelTextHoverColor, labelTextSize = propsGenerator.labelTextSize, labelTextWrap = propsGenerator.labelTextWrap, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, indicatorFillClass = propsGenerator.indicatorFillClass, inputBorderColorClass = propsGenerator.inputBorderColorClass, shapeClass = propsGenerator.shapeClass, widthClass = propsGenerator.widthClass;
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { _ as __assign } from '../tslib.es6-Bwu1Cn-t.js';
|
|
2
2
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
3
|
import Select, { components } from 'react-select';
|
|
4
|
-
import { I as Icon } from '../Icon-
|
|
4
|
+
import { I as Icon } from '../Icon-BzIdIgGY.js';
|
|
5
5
|
import React, { useRef, useCallback, useEffect, useMemo } from 'react';
|
|
6
6
|
import clsx from 'clsx';
|
|
7
7
|
import CreatableSelect from 'react-select/creatable';
|
|
8
8
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
9
|
-
import { T as Text } from '../Text-
|
|
10
|
-
import { B as Badge } from '../Badge-
|
|
11
|
-
import { G as Group } from '../Group-
|
|
12
|
-
import { D as Divider } from '../Divider-
|
|
9
|
+
import { T as Text } from '../Text-aaWArShm.js';
|
|
10
|
+
import { B as Badge } from '../Badge-BE28NFES.js';
|
|
11
|
+
import { G as Group } from '../Group-D5nvxHx0.js';
|
|
12
|
+
import { D as Divider } from '../Divider-CUFKsm-9.js';
|
|
13
13
|
import 'react-inlinesvg';
|
|
14
14
|
import '../hooks/useStyles/useStyles.js';
|
|
15
15
|
import 'lodash/camelCase';
|
|
@@ -24,8 +24,8 @@ import 'react-responsive';
|
|
|
24
24
|
import '../utils/setViewportProperty.js';
|
|
25
25
|
import '../hooks/useStyles/styleAttributes.js';
|
|
26
26
|
import '../Link-aBsZ1d0Q.js';
|
|
27
|
-
import '../Tooltip-
|
|
28
|
-
import '../Title
|
|
27
|
+
import '../Tooltip-DP32J5V6.js';
|
|
28
|
+
import '../Title--_epIXkC.js';
|
|
29
29
|
import 'lodash/castArray';
|
|
30
30
|
|
|
31
31
|
// interface ClearIndicatorProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>>
|
|
@@ -157,7 +157,7 @@ var selectConfig = {
|
|
|
157
157
|
},
|
|
158
158
|
};
|
|
159
159
|
var SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
|
|
160
|
-
var className = props.className,
|
|
160
|
+
var className = props.className, _a = props.appearance, appearance = _a === void 0 ? '' : _a, width = props.width, minWidth = props.minWidth, initialValue = props.initialValue, isDisabled = props.isDisabled, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, clearIcon = props.clearIcon, defaultValue = props.defaultValue, dividerDirection = props.dividerDirection, dividerSize = props.dividerSize, dropdownIcon = props.dropdownIcon, filterOption = props.filterOption, hideSelectedOptions = props.hideSelectedOptions, hideValueContainer = props.hideValueContainer, inputAfter = props.inputAfter, inputBefore = props.inputBefore, instanceId = props.instanceId, loadingMessage = props.loadingMessage, menuAfter = props.menuAfter, menuBefore = props.menuBefore, menuIsOpen = props.menuIsOpen, menuItemSize = props.menuItemSize, noOptionsSearchText = props.noOptionsSearchText, noOptionsText = props.noOptionsText, optionAfter = props.optionAfter, optionBefore = props.optionBefore, options = props.options, optionSelected = props.optionSelected, placeholder = props.placeholder, showBadge = props.showBadge, showDivider = props.showDivider, value = props.value, before = props.before, after = props.after, openMenuOnClick = props.openMenuOnClick, closeMenuOnSelect = props.closeMenuOnSelect, isClearable = props.isClearable, isCreatable = props.isCreatable, isLoading = props.isLoading, isMulti = props.isMulti, isSearchable = props.isSearchable, set = props.set, onChange = props.onChange, onInputChange = props.onInputChange;
|
|
161
161
|
var defaultRef = useRef(null);
|
|
162
162
|
var selectRef = ref || defaultRef;
|
|
163
163
|
// React-select wait function as "loadingMessage" property
|
|
@@ -207,10 +207,15 @@ var SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
|
|
|
207
207
|
},
|
|
208
208
|
});
|
|
209
209
|
}, [minWidth, width]);
|
|
210
|
-
var appearanceConfig =
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
210
|
+
var appearanceConfig = useMemo(function () {
|
|
211
|
+
if (appearance) {
|
|
212
|
+
return appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
|
|
213
|
+
var _a;
|
|
214
|
+
return (__assign(__assign({}, resultConfig), (_a = selectConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
|
|
215
|
+
}, {});
|
|
216
|
+
}
|
|
217
|
+
return {};
|
|
218
|
+
}, [appearance]);
|
|
214
219
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
215
220
|
var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, elevation = propsGenerator.elevation, badgeTextSize = propsGenerator.badgeTextSize, clearIconFill = propsGenerator.clearIconFill, dividerFill = propsGenerator.dividerFill, dropdownFillHover = propsGenerator.dropdownFillHover, dropdownIconFill = propsGenerator.dropdownIconFill, dropdownIconShape = propsGenerator.dropdownIconShape, headingFillClass = propsGenerator.headingFillClass, headingFillHoverClass = propsGenerator.headingFillHoverClass, headingTextColorClass = propsGenerator.headingTextColorClass, headingTextSizeClass = propsGenerator.headingTextSizeClass, headingTextWeightClass = propsGenerator.headingTextWeightClass, inputBorderColorClass = propsGenerator.inputBorderColorClass, inputBorderColorHoverClass = propsGenerator.inputBorderColorHoverClass, inputCaretColorClass = propsGenerator.inputCaretColorClass, inputFillClass = propsGenerator.inputFillClass, inputShapeClass = propsGenerator.inputShapeClass, inputTextColorClass = propsGenerator.inputTextColorClass, inputTextSizeClass = propsGenerator.inputTextSizeClass, multipleItemFill = propsGenerator.multipleItemFill, multipleItemFillHover = propsGenerator.multipleItemFillHover, multipleItemIcon = propsGenerator.multipleItemIcon, multipleItemIconFill = propsGenerator.multipleItemIconFill, multipleItemTextColorClass = propsGenerator.multipleItemTextColorClass, multipleItemTextSizeClass = propsGenerator.multipleItemTextSizeClass, noOptionsTextColorClass = propsGenerator.noOptionsTextColorClass, noOptionsTextSizeClass = propsGenerator.noOptionsTextSizeClass, optionBorderClass = propsGenerator.optionBorderClass, optionBorderTypeClass = propsGenerator.optionBorderTypeClass, optionFillClass = propsGenerator.optionFillClass, optionFillHoverClass = propsGenerator.optionFillHoverClass, optionShapeClass = propsGenerator.optionShapeClass, optionTextColorClass = propsGenerator.optionTextColorClass, optionTextSizeClass = propsGenerator.optionTextSizeClass, placeholderTextColor = propsGenerator.placeholderTextColor, placeholderTextSize = propsGenerator.placeholderTextSize, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass;
|
|
216
221
|
return (jsx(SelectComponent, { className: clsx(className, 'select', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "select_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), sizeClass && "select_size_".concat(sizeClass), hideValueContainer && 'select_state_hide-value-container', set && "select_set_".concat(set)), elevation: elevation, isDisabled: isDisabled, badgeAppearance: badgeAppearance, badgeSize: badgeSize, badgeTextSize: badgeTextSize, classNamePrefix: "select", clearIcon: clearIcon, clearIconFill: clearIconFill, components: {
|
|
@@ -4,7 +4,7 @@ import clsx from 'clsx';
|
|
|
4
4
|
import { Swiper as Swiper$1, SwiperSlide } from 'swiper/react';
|
|
5
5
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
6
6
|
import { useStyles } from '../hooks/useStyles/useStyles.js';
|
|
7
|
-
import { T as Title } from '../Title
|
|
7
|
+
import { T as Title } from '../Title--_epIXkC.js';
|
|
8
8
|
import '../tslib.es6-Bwu1Cn-t.js';
|
|
9
9
|
import 'lodash/camelCase';
|
|
10
10
|
import 'lodash/castArray';
|
|
@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
6
|
-
import { T as Text } from '../Text-
|
|
6
|
+
import { T as Text } from '../Text-aaWArShm.js';
|
|
7
7
|
import 'lodash/camelCase';
|
|
8
8
|
import 'lodash/castArray';
|
|
9
9
|
import 'lodash/upperFirst';
|
|
@@ -29,16 +29,16 @@ var switchConfig = {
|
|
|
29
29
|
},
|
|
30
30
|
};
|
|
31
31
|
var Switch = React.forwardRef(function Switch(props, ref) {
|
|
32
|
-
var id = props.id, className = props.className, appearance = props.appearance, size = props.size, title = props.title, desc = props.desc, disabled = props.disabled, checked = props.checked, onChange = props.onChange;
|
|
33
|
-
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (
|
|
32
|
+
var id = props.id, className = props.className, appearance = props.appearance, _a = props.align, align = _a === void 0 ? 'left' : _a, size = props.size, title = props.title, desc = props.desc, disabled = props.disabled, checked = props.checked, onChange = props.onChange;
|
|
33
|
+
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
|
|
34
34
|
var _a;
|
|
35
|
-
return (__assign(__assign({},
|
|
35
|
+
return (__assign(__assign({}, resultConfig), (_a = segmentedConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
|
|
36
36
|
}, {});
|
|
37
37
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
38
|
-
var
|
|
39
|
-
return (jsxs("div", { className: clsx('switch', className, size && "switch_size_".concat(size)), children: [title && (jsx(Text, { className: clsx('switch__title'), size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsx(Text, { className: clsx('switch__desc'), size:
|
|
40
|
-
|
|
41
|
-
|
|
38
|
+
var titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize;
|
|
39
|
+
return (jsxs("div", { className: clsx('switch', className, align && "switch_align_".concat(align), size && "switch_size_".concat(size)), children: [title && (jsx(Text, { className: clsx('switch__title'), size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsx(Text, { className: clsx('switch__desc'), size: descTextSize, textColor: descTextColor, children: desc })), jsxs("div", { className: 'switch__item', children: [jsx("input", { id: id, className: "switch__checkbox", type: "checkbox", disabled: disabled, checked: checked,
|
|
40
|
+
// @ts-expect-error
|
|
41
|
+
ref: ref, onChange: onChange }), jsx("div", { className: "switch__bg", children: "\u00A0" }), jsx("div", { className: "switch__toggle", children: "\u00A0" })] })] }));
|
|
42
42
|
});
|
|
43
43
|
|
|
44
44
|
export { Switch, switchAppearance, switchConfig };
|
package/dist/components/Tab.js
CHANGED
|
@@ -4,10 +4,10 @@ import React from 'react';
|
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
6
6
|
import { useStyles } from '../hooks/useStyles/useStyles.js';
|
|
7
|
-
import { B as Badge } from '../Badge-
|
|
8
|
-
import { D as Divider } from '../Divider-
|
|
7
|
+
import { B as Badge } from '../Badge-BE28NFES.js';
|
|
8
|
+
import { D as Divider } from '../Divider-CUFKsm-9.js';
|
|
9
9
|
import { L as Link } from '../Link-aBsZ1d0Q.js';
|
|
10
|
-
import { T as Text } from '../Text-
|
|
10
|
+
import { T as Text } from '../Text-aaWArShm.js';
|
|
11
11
|
import 'lodash/camelCase';
|
|
12
12
|
import 'lodash/castArray';
|
|
13
13
|
import 'lodash/upperFirst';
|
|
@@ -20,10 +20,10 @@ import 'react-responsive';
|
|
|
20
20
|
import '../utils/setViewportProperty.js';
|
|
21
21
|
import 'lodash/maxBy';
|
|
22
22
|
import '../hooks/useStyles/styleAttributes.js';
|
|
23
|
-
import '../Icon-
|
|
23
|
+
import '../Icon-BzIdIgGY.js';
|
|
24
24
|
import 'react-inlinesvg';
|
|
25
|
-
import '../Tooltip-
|
|
26
|
-
import '../Title
|
|
25
|
+
import '../Tooltip-DP32J5V6.js';
|
|
26
|
+
import '../Title--_epIXkC.js';
|
|
27
27
|
|
|
28
28
|
var tabAppearance = {
|
|
29
29
|
accent: {
|
|
@@ -132,9 +132,9 @@ var tabConfig = {
|
|
|
132
132
|
};
|
|
133
133
|
function Tab(props) {
|
|
134
134
|
var className = props.className, appearance = props.appearance, label = props.label, _a = props.isDisabled, isDisabled = _a === void 0 ? false : _a, badgeValue = props.badgeValue, dataTour = props.dataTour, href = props.href, link = props.link, rel = props.rel, reset = props.reset, target = props.target, before = props.before, after = props.after, _b = props.isActive, isActive = _b === void 0 ? false : _b, _c = props.isHover, isHover = _c === void 0 ? false : _c, set = props.set, onClick = props.onClick, onMouseEnter = props.onMouseEnter, children = props.children;
|
|
135
|
-
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (
|
|
135
|
+
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
|
|
136
136
|
var _a;
|
|
137
|
-
return (__assign(__assign({},
|
|
137
|
+
return (__assign(__assign({}, resultConfig), (_a = tabConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
|
|
138
138
|
}, {});
|
|
139
139
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
140
140
|
var justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillDisabledClass = propsGenerator.fillDisabledClass, fillHoverClass = propsGenerator.fillHoverClass, labelColor = propsGenerator.labelColor, labelColorActive = propsGenerator.labelColorActive, labelColorDisabled = propsGenerator.labelColorDisabled, labelTextAlign = propsGenerator.labelTextAlign, labelTextColorHover = propsGenerator.labelTextColorHover, labelTextGradient = propsGenerator.labelTextGradient, labelTextSize = propsGenerator.labelTextSize, labelTextStyle = propsGenerator.labelTextStyle, labelTextWeight = propsGenerator.labelTextWeight, labelTextWrap = propsGenerator.labelTextWrap, dividerFillDisabled = propsGenerator.dividerFillDisabled, badgeAppearance = propsGenerator.badgeAppearance, badgeShape = propsGenerator.badgeShape, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, dividerDirection = propsGenerator.dividerDirection, dividerFill = propsGenerator.dividerFill, dividerFillActive = propsGenerator.dividerFillActive, dividerFillActiveHover = propsGenerator.dividerFillActiveHover, dividerFillHover = propsGenerator.dividerFillHover, dividerSize = propsGenerator.dividerSize, linkFill = propsGenerator.linkFill, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, typeClass = propsGenerator.typeClass, widthClass = propsGenerator.widthClass;
|
package/dist/components/Text.js
CHANGED
|
@@ -87,9 +87,9 @@ function Textarea(props) {
|
|
|
87
87
|
// () => state && textareaConfig.state && textareaConfig.state[state],
|
|
88
88
|
// [state, textareaConfig],
|
|
89
89
|
// )
|
|
90
|
-
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (
|
|
90
|
+
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
|
|
91
91
|
var _a;
|
|
92
|
-
return (__assign(__assign({},
|
|
92
|
+
return (__assign(__assign({}, resultConfig), (_a = textareaConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
|
|
93
93
|
}, {});
|
|
94
94
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
95
95
|
var fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderHoverClass = propsGenerator.borderHoverClass, textColorClass = propsGenerator.textColorClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, _a = propsGenerator.sizeClass, sizeClass = _a === void 0 ? 'm' : _a, widthClass = propsGenerator.widthClass;
|
package/dist/components/Tile.js
CHANGED
|
@@ -3,9 +3,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
5
5
|
import { useStyles } from '../hooks/useStyles/useStyles.js';
|
|
6
|
-
import { B as Badge } from '../Badge-
|
|
7
|
-
import { T as Text } from '../Text-
|
|
8
|
-
import { T as Title } from '../Title
|
|
6
|
+
import { B as Badge } from '../Badge-BE28NFES.js';
|
|
7
|
+
import { T as Text } from '../Text-aaWArShm.js';
|
|
8
|
+
import { T as Title } from '../Title--_epIXkC.js';
|
|
9
9
|
import 'react';
|
|
10
10
|
import 'lodash/camelCase';
|
|
11
11
|
import 'lodash/castArray';
|
|
@@ -19,10 +19,10 @@ import 'react-responsive';
|
|
|
19
19
|
import '../utils/setViewportProperty.js';
|
|
20
20
|
import 'lodash/maxBy';
|
|
21
21
|
import '../hooks/useStyles/styleAttributes.js';
|
|
22
|
-
import '../Icon-
|
|
22
|
+
import '../Icon-BzIdIgGY.js';
|
|
23
23
|
import 'react-inlinesvg';
|
|
24
24
|
import '../Link-aBsZ1d0Q.js';
|
|
25
|
-
import '../Tooltip-
|
|
25
|
+
import '../Tooltip-DP32J5V6.js';
|
|
26
26
|
|
|
27
27
|
var tileAppearance = {
|
|
28
28
|
dev: {},
|
|
@@ -36,9 +36,9 @@ var tileConfig = {
|
|
|
36
36
|
};
|
|
37
37
|
function Tile(props) {
|
|
38
38
|
var className = props.className, type = props.type, appearance = props.appearance, direction = props.direction, size = props.size, title = props.title, text = props.text, badge = props.badge, badgeAppearance = props.badgeAppearance, reverse = props.reverse, before = props.before, after = props.after, onClick = props.onClick, children = props.children;
|
|
39
|
-
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (
|
|
39
|
+
var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
|
|
40
40
|
var _a;
|
|
41
|
-
return (__assign(__assign({},
|
|
41
|
+
return (__assign(__assign({}, resultConfig), (_a = tileConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
|
|
42
42
|
}, {});
|
|
43
43
|
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
44
44
|
var alignClass = propsGenerator.alignClass, _a = propsGenerator.alignDirectionClass, alignDirectionClass = _a === void 0 ? 'vertical' : _a, fillClass = propsGenerator.fillClass, titleTextAlign = propsGenerator.titleTextAlign, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextWeight = propsGenerator.titleTextWeight, titleTextWrap = propsGenerator.titleTextWrap, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, textWrap = propsGenerator.textWrap, badgeSize = propsGenerator.badgeSize, badgeTextColor = propsGenerator.badgeTextColor, badgeTextSize = propsGenerator.badgeTextSize, dataTestId = propsGenerator.dataTestId, dataTour = propsGenerator.dataTour, shapeClass = propsGenerator.shapeClass;
|
package/dist/components/Title.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Tooltip-
|
|
1
|
+
export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Tooltip-DP32J5V6.js';
|
|
2
2
|
import '../tslib.es6-Bwu1Cn-t.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'react';
|
|
@@ -17,5 +17,5 @@ import '../utils/setViewportProperty.js';
|
|
|
17
17
|
import '../hooks/useStyles/useStyles.js';
|
|
18
18
|
import 'lodash/maxBy';
|
|
19
19
|
import '../hooks/useStyles/styleAttributes.js';
|
|
20
|
-
import '../Text-
|
|
21
|
-
import '../Title
|
|
20
|
+
import '../Text-aaWArShm.js';
|
|
21
|
+
import '../Title--_epIXkC.js';
|
|
@@ -1,30 +1,42 @@
|
|
|
1
1
|
.switch {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
display: grid;
|
|
3
|
+
&__title {
|
|
4
|
+
padding: 0 8px 0 0;
|
|
5
|
+
align-self: start;
|
|
6
|
+
}
|
|
7
|
+
&__desc {
|
|
8
|
+
padding: 0 8px 0 0;
|
|
9
|
+
align-self: start;
|
|
10
|
+
}
|
|
11
|
+
&__item {
|
|
12
|
+
border-radius: 50px;
|
|
13
|
+
position: relative;
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
display: flex;
|
|
16
|
+
align-self: start;
|
|
17
|
+
transition: 0.4s;
|
|
18
|
+
cursor: pointer;
|
|
19
|
+
grid-row: 1/3;
|
|
20
|
+
}
|
|
9
21
|
&__checkbox {
|
|
10
|
-
position: absolute;
|
|
11
22
|
width: 100%;
|
|
12
23
|
height: 100%;
|
|
24
|
+
margin: 0;
|
|
25
|
+
border: 0;
|
|
26
|
+
position: absolute;
|
|
13
27
|
left: 0;
|
|
14
28
|
top: 0;
|
|
29
|
+
z-index: 2;
|
|
15
30
|
cursor: pointer;
|
|
16
31
|
appearance: none;
|
|
17
|
-
border: 0;
|
|
18
|
-
margin: 0;
|
|
19
|
-
z-index: 2;
|
|
20
32
|
&:checked {
|
|
21
33
|
& + .switch__bg {
|
|
22
34
|
background: var(--color-accent-primary);
|
|
23
35
|
}
|
|
24
36
|
& ~ .switch__toggle {
|
|
25
|
-
left: 100%;
|
|
26
|
-
margin: 0 0 0 -3px;
|
|
27
37
|
background: var(--color-accent-item-primary);
|
|
38
|
+
margin: 0 0 0 -3px;
|
|
39
|
+
left: 100%;
|
|
28
40
|
transform: translate(-100%, -50%);
|
|
29
41
|
}
|
|
30
42
|
}
|
|
@@ -36,32 +48,60 @@
|
|
|
36
48
|
}
|
|
37
49
|
&__bg {
|
|
38
50
|
width: 100%;
|
|
39
|
-
flex: 1;
|
|
40
51
|
background: var(--color-surface-tertiary);
|
|
52
|
+
flex: 1;
|
|
41
53
|
transition: all 0.25s;
|
|
42
54
|
}
|
|
43
55
|
&__toggle {
|
|
44
|
-
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
45
56
|
height: calc(100% - 6px);
|
|
46
|
-
position: absolute;
|
|
47
57
|
aspect-ratio: 1/1;
|
|
48
|
-
top: 50%;
|
|
49
|
-
transform: translate(3px, -50%);
|
|
50
|
-
left: 0;
|
|
51
58
|
background: #fff;
|
|
52
59
|
border-radius: 50%;
|
|
53
|
-
|
|
60
|
+
position: absolute;
|
|
61
|
+
box-shadow: inset 0 0 5px rgb(0, 0, 0, 0.2);
|
|
62
|
+
box-shadow: 0 0 5px rgb(0, 0, 0, 0.2);
|
|
63
|
+
left: 0;
|
|
64
|
+
top: 50%;
|
|
65
|
+
transform: translate(3px, -50%);
|
|
54
66
|
transition: all 0.25s;
|
|
55
67
|
}
|
|
56
68
|
}
|
|
69
|
+
.switch {
|
|
70
|
+
&_align {
|
|
71
|
+
&_left {
|
|
72
|
+
grid-template-columns: 1fr auto;
|
|
73
|
+
^^&__title,
|
|
74
|
+
^^&__desc {
|
|
75
|
+
grid-column-start: 2;
|
|
76
|
+
padding: 0 0 0 8px;
|
|
77
|
+
}
|
|
78
|
+
^^&__item {
|
|
79
|
+
grid-column-start: 1;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
&_right {
|
|
83
|
+
grid-template-columns: auto 1fr;
|
|
84
|
+
^^&__title,
|
|
85
|
+
^^&__desc {
|
|
86
|
+
grid-column-start: 1;
|
|
87
|
+
padding: 0 8px 0 0;
|
|
88
|
+
}
|
|
89
|
+
^^&__item {
|
|
90
|
+
grid-column-start: 2;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
57
95
|
.switch {
|
|
58
96
|
&&_size {
|
|
59
|
-
@each $size in xxl, xl, l, m, s, xs, xxs
|
|
97
|
+
@each $size in xxl, xl, l, m, s, xs, xxs {
|
|
60
98
|
&_$(size) {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
99
|
+
& .switch__item {
|
|
100
|
+
min-width: var(--switch-size-$(size)-width);
|
|
101
|
+
min-height: var(--switch-size-$(size)-height);
|
|
102
|
+
max-width: var(--switch-size-$(size)-width);
|
|
103
|
+
max-height: var(--switch-size-$(size)-height);
|
|
104
|
+
}
|
|
65
105
|
}
|
|
66
106
|
}
|
|
67
107
|
}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { SelectClearIndicator } from './SelectClearIndicator
|
|
2
|
-
import { selectConfig, SelectContainer } from './SelectContainer
|
|
3
|
-
import { SelectControl } from './SelectControl
|
|
4
|
-
import { SelectDropdownIndicator } from './SelectDropdownIndicator
|
|
5
|
-
import { SelectGroupHeading } from './SelectGroupHeading
|
|
6
|
-
import { SelectIndicatorsContainer } from './SelectIndicatorsContainer
|
|
7
|
-
import { SelectInput } from './SelectInput
|
|
8
|
-
import { SelectMenu } from './SelectMenu
|
|
9
|
-
import { SelectMultiValueContainer } from './SelectMultiValueContainer
|
|
10
|
-
import { SelectMultiValueLabel } from './SelectMultiValueLabel
|
|
11
|
-
import { SelectMultiValueRemove } from './SelectMultiValueRemove
|
|
12
|
-
import { SelectOption } from './SelectOption
|
|
13
|
-
import { SelectPlaceholder } from './SelectPlaceholder
|
|
14
|
-
import { SelectSingleValue } from './SelectSingleValue
|
|
15
|
-
import { SelectValueContainer } from './SelectValueContainer
|
|
1
|
+
import { SelectClearIndicator } from './SelectClearIndicator';
|
|
2
|
+
import { selectConfig, SelectContainer } from './SelectContainer';
|
|
3
|
+
import { SelectControl } from './SelectControl';
|
|
4
|
+
import { SelectDropdownIndicator } from './SelectDropdownIndicator';
|
|
5
|
+
import { SelectGroupHeading } from './SelectGroupHeading';
|
|
6
|
+
import { SelectIndicatorsContainer } from './SelectIndicatorsContainer';
|
|
7
|
+
import { SelectInput } from './SelectInput';
|
|
8
|
+
import { SelectMenu } from './SelectMenu';
|
|
9
|
+
import { SelectMultiValueContainer } from './SelectMultiValueContainer';
|
|
10
|
+
import { SelectMultiValueLabel } from './SelectMultiValueLabel';
|
|
11
|
+
import { SelectMultiValueRemove } from './SelectMultiValueRemove';
|
|
12
|
+
import { SelectOption } from './SelectOption';
|
|
13
|
+
import { SelectPlaceholder } from './SelectPlaceholder';
|
|
14
|
+
import { SelectSingleValue } from './SelectSingleValue';
|
|
15
|
+
import { SelectValueContainer } from './SelectValueContainer';
|
|
16
16
|
export { SelectClearIndicator, SelectContainer as Select, SelectControl, SelectDropdownIndicator, SelectGroupHeading, SelectIndicatorsContainer, SelectInput, SelectMenu, SelectMultiValueContainer, SelectMultiValueLabel, SelectMultiValueRemove, SelectOption, SelectPlaceholder, SelectSingleValue, SelectValueContainer, selectConfig, };
|