@alfalab/core-components-custom-picker-button 2.1.11 → 2.2.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.
Files changed (10) hide show
  1. package/cssm/field/Component.js +16 -2
  2. package/cssm/field/index.module.css +1 -1
  3. package/esm/field/Component.js +17 -3
  4. package/esm/field/index.css +6 -6
  5. package/field/Component.js +17 -3
  6. package/field/index.css +6 -6
  7. package/modern/field/Component.js +17 -3
  8. package/modern/field/index.css +6 -6
  9. package/package.json +4 -4
  10. package/src/field/Component.tsx +20 -2
package/cssm/field/Component.js CHANGED
@@ -15,10 +15,24 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
15
15
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
16
16
  var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
17
17
 
18
+ var SIZE_TO_CLASSNAME_MAP = {
19
+ xxs: 'size-32',
20
+ xs: 'size-40',
21
+ s: 'size-48',
22
+ m: 'size-56',
23
+ l: 'size-64',
24
+ xl: 'size-72',
25
+ 32: 'size-32',
26
+ 40: 'size-40',
27
+ 48: 'size-48',
28
+ 56: 'size-56',
29
+ 64: 'size-64',
30
+ 72: 'size-72',
31
+ };
18
32
  var Field = function (_a) {
19
33
  var _b;
20
- var _c = _a.buttonSize, buttonSize = _c === void 0 ? 'm' : _c, _d = _a.buttonVariant, buttonVariant = _d === void 0 ? 'default' : _d, backgroundColor = _a.backgroundColor, contentColor = _a.contentColor, stateType = _a.stateType, label = _a.label, open = _a.open, rightAddons = _a.rightAddons, innerProps = _a.innerProps, className = _a.className, _e = _a.showArrow, showArrow = _e === void 0 ? true : _e, restProps = tslib.__rest(_a, ["buttonSize", "buttonVariant", "backgroundColor", "contentColor", "stateType", "label", "open", "rightAddons", "innerProps", "className", "showArrow"]);
21
- var Icon = shared.getIcon(buttonVariant, buttonSize);
34
+ var _c = _a.buttonSize, buttonSize = _c === void 0 ? 56 : _c, _d = _a.buttonVariant, buttonVariant = _d === void 0 ? 'default' : _d, backgroundColor = _a.backgroundColor, contentColor = _a.contentColor, stateType = _a.stateType, label = _a.label, open = _a.open, rightAddons = _a.rightAddons, innerProps = _a.innerProps, className = _a.className, _e = _a.showArrow, showArrow = _e === void 0 ? true : _e, restProps = tslib.__rest(_a, ["buttonSize", "buttonVariant", "backgroundColor", "contentColor", "stateType", "label", "open", "rightAddons", "innerProps", "className", "showArrow"]);
35
+ var Icon = shared.getIcon(buttonVariant, SIZE_TO_CLASSNAME_MAP[buttonSize]);
22
36
  var buttonProps = tslib.__assign(tslib.__assign({}, restProps), innerProps);
23
37
  return (React__default.default.createElement(coreComponentsCustomButton.CustomButton, tslib.__assign({}, buttonProps, { rightAddons: React__default.default.createElement(React.Fragment, null,
24
38
  rightAddons && (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.addonsContainer, (_b = {},
package/cssm/field/index.module.css CHANGED
@@ -1,4 +1,4 @@
1
- :root {
1
+ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
2
2
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root {
package/esm/field/Component.js CHANGED
@@ -4,13 +4,27 @@ import cn from 'classnames';
4
4
  import { CustomButton } from '@alfalab/core-components-custom-button/esm';
5
5
  import { getIcon } from '@alfalab/core-components-picker-button/esm/shared';
6
6
 
7
- var styles = {"iconContainer":"custom-picker-button__iconContainer_1psk0","addonsContainer":"custom-picker-button__addonsContainer_1psk0","showControlIcon":"custom-picker-button__showControlIcon_1psk0","open":"custom-picker-button__open_1psk0"};
7
+ var styles = {"iconContainer":"custom-picker-button__iconContainer_uv0ua","addonsContainer":"custom-picker-button__addonsContainer_uv0ua","showControlIcon":"custom-picker-button__showControlIcon_uv0ua","open":"custom-picker-button__open_uv0ua"};
8
8
  require('./index.css')
9
9
 
10
+ var SIZE_TO_CLASSNAME_MAP = {
11
+ xxs: 'size-32',
12
+ xs: 'size-40',
13
+ s: 'size-48',
14
+ m: 'size-56',
15
+ l: 'size-64',
16
+ xl: 'size-72',
17
+ 32: 'size-32',
18
+ 40: 'size-40',
19
+ 48: 'size-48',
20
+ 56: 'size-56',
21
+ 64: 'size-64',
22
+ 72: 'size-72',
23
+ };
10
24
  var Field = function (_a) {
11
25
  var _b;
12
- var _c = _a.buttonSize, buttonSize = _c === void 0 ? 'm' : _c, _d = _a.buttonVariant, buttonVariant = _d === void 0 ? 'default' : _d, backgroundColor = _a.backgroundColor, contentColor = _a.contentColor, stateType = _a.stateType, label = _a.label, open = _a.open, rightAddons = _a.rightAddons, innerProps = _a.innerProps, className = _a.className, _e = _a.showArrow, showArrow = _e === void 0 ? true : _e, restProps = __rest(_a, ["buttonSize", "buttonVariant", "backgroundColor", "contentColor", "stateType", "label", "open", "rightAddons", "innerProps", "className", "showArrow"]);
13
- var Icon = getIcon(buttonVariant, buttonSize);
26
+ var _c = _a.buttonSize, buttonSize = _c === void 0 ? 56 : _c, _d = _a.buttonVariant, buttonVariant = _d === void 0 ? 'default' : _d, backgroundColor = _a.backgroundColor, contentColor = _a.contentColor, stateType = _a.stateType, label = _a.label, open = _a.open, rightAddons = _a.rightAddons, innerProps = _a.innerProps, className = _a.className, _e = _a.showArrow, showArrow = _e === void 0 ? true : _e, restProps = __rest(_a, ["buttonSize", "buttonVariant", "backgroundColor", "contentColor", "stateType", "label", "open", "rightAddons", "innerProps", "className", "showArrow"]);
27
+ var Icon = getIcon(buttonVariant, SIZE_TO_CLASSNAME_MAP[buttonSize]);
14
28
  var buttonProps = __assign(__assign({}, restProps), innerProps);
15
29
  return (React.createElement(CustomButton, __assign({}, buttonProps, { rightAddons: React.createElement(Fragment, null,
16
30
  rightAddons && (React.createElement("span", { className: cn(styles.addonsContainer, (_b = {},
package/esm/field/index.css CHANGED
@@ -1,5 +1,5 @@
1
- /* hash: vei96 */
2
- :root {
1
+ /* hash: v4gtu */
2
+ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
5
  } :root {
@@ -16,13 +16,13 @@
16
16
  } :root {
17
17
  } :root {
18
18
  --arrow-transform: rotate(180deg);
19
- } .custom-picker-button__iconContainer_1psk0 {
19
+ } .custom-picker-button__iconContainer_uv0ua {
20
20
  display: flex;
21
21
  transition: transform 0.15s ease-in-out;
22
- } .custom-picker-button__addonsContainer_1psk0 {
22
+ } .custom-picker-button__addonsContainer_uv0ua {
23
23
  display: flex
24
- } .custom-picker-button__addonsContainer_1psk0.custom-picker-button__showControlIcon_1psk0 {
24
+ } .custom-picker-button__addonsContainer_uv0ua.custom-picker-button__showControlIcon_uv0ua {
25
25
  margin-right: var(--gap-2xs);
26
- } .custom-picker-button__open_1psk0 {
26
+ } .custom-picker-button__open_uv0ua {
27
27
  transform: var(--arrow-transform);
28
28
  }
package/field/Component.js CHANGED
@@ -13,13 +13,27 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
13
13
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
14
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
15
15
 
16
- var styles = {"iconContainer":"custom-picker-button__iconContainer_1psk0","addonsContainer":"custom-picker-button__addonsContainer_1psk0","showControlIcon":"custom-picker-button__showControlIcon_1psk0","open":"custom-picker-button__open_1psk0"};
16
+ var styles = {"iconContainer":"custom-picker-button__iconContainer_uv0ua","addonsContainer":"custom-picker-button__addonsContainer_uv0ua","showControlIcon":"custom-picker-button__showControlIcon_uv0ua","open":"custom-picker-button__open_uv0ua"};
17
17
  require('./index.css')
18
18
 
19
+ var SIZE_TO_CLASSNAME_MAP = {
20
+ xxs: 'size-32',
21
+ xs: 'size-40',
22
+ s: 'size-48',
23
+ m: 'size-56',
24
+ l: 'size-64',
25
+ xl: 'size-72',
26
+ 32: 'size-32',
27
+ 40: 'size-40',
28
+ 48: 'size-48',
29
+ 56: 'size-56',
30
+ 64: 'size-64',
31
+ 72: 'size-72',
32
+ };
19
33
  var Field = function (_a) {
20
34
  var _b;
21
- var _c = _a.buttonSize, buttonSize = _c === void 0 ? 'm' : _c, _d = _a.buttonVariant, buttonVariant = _d === void 0 ? 'default' : _d, backgroundColor = _a.backgroundColor, contentColor = _a.contentColor, stateType = _a.stateType, label = _a.label, open = _a.open, rightAddons = _a.rightAddons, innerProps = _a.innerProps, className = _a.className, _e = _a.showArrow, showArrow = _e === void 0 ? true : _e, restProps = tslib.__rest(_a, ["buttonSize", "buttonVariant", "backgroundColor", "contentColor", "stateType", "label", "open", "rightAddons", "innerProps", "className", "showArrow"]);
22
- var Icon = shared.getIcon(buttonVariant, buttonSize);
35
+ var _c = _a.buttonSize, buttonSize = _c === void 0 ? 56 : _c, _d = _a.buttonVariant, buttonVariant = _d === void 0 ? 'default' : _d, backgroundColor = _a.backgroundColor, contentColor = _a.contentColor, stateType = _a.stateType, label = _a.label, open = _a.open, rightAddons = _a.rightAddons, innerProps = _a.innerProps, className = _a.className, _e = _a.showArrow, showArrow = _e === void 0 ? true : _e, restProps = tslib.__rest(_a, ["buttonSize", "buttonVariant", "backgroundColor", "contentColor", "stateType", "label", "open", "rightAddons", "innerProps", "className", "showArrow"]);
36
+ var Icon = shared.getIcon(buttonVariant, SIZE_TO_CLASSNAME_MAP[buttonSize]);
23
37
  var buttonProps = tslib.__assign(tslib.__assign({}, restProps), innerProps);
24
38
  return (React__default.default.createElement(coreComponentsCustomButton.CustomButton, tslib.__assign({}, buttonProps, { rightAddons: React__default.default.createElement(React.Fragment, null,
25
39
  rightAddons && (React__default.default.createElement("span", { className: cn__default.default(styles.addonsContainer, (_b = {},
package/field/index.css CHANGED
@@ -1,5 +1,5 @@
1
- /* hash: vei96 */
2
- :root {
1
+ /* hash: v4gtu */
2
+ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
5
  } :root {
@@ -16,13 +16,13 @@
16
16
  } :root {
17
17
  } :root {
18
18
  --arrow-transform: rotate(180deg);
19
- } .custom-picker-button__iconContainer_1psk0 {
19
+ } .custom-picker-button__iconContainer_uv0ua {
20
20
  display: flex;
21
21
  transition: transform 0.15s ease-in-out;
22
- } .custom-picker-button__addonsContainer_1psk0 {
22
+ } .custom-picker-button__addonsContainer_uv0ua {
23
23
  display: flex
24
- } .custom-picker-button__addonsContainer_1psk0.custom-picker-button__showControlIcon_1psk0 {
24
+ } .custom-picker-button__addonsContainer_uv0ua.custom-picker-button__showControlIcon_uv0ua {
25
25
  margin-right: var(--gap-2xs);
26
- } .custom-picker-button__open_1psk0 {
26
+ } .custom-picker-button__open_uv0ua {
27
27
  transform: var(--arrow-transform);
28
28
  }
package/modern/field/Component.js CHANGED
@@ -3,11 +3,25 @@ import cn from 'classnames';
3
3
  import { CustomButton } from '@alfalab/core-components-custom-button/modern';
4
4
  import { getIcon } from '@alfalab/core-components-picker-button/modern/shared';
5
5
 
6
- const styles = {"iconContainer":"custom-picker-button__iconContainer_1psk0","addonsContainer":"custom-picker-button__addonsContainer_1psk0","showControlIcon":"custom-picker-button__showControlIcon_1psk0","open":"custom-picker-button__open_1psk0"};
6
+ const styles = {"iconContainer":"custom-picker-button__iconContainer_uv0ua","addonsContainer":"custom-picker-button__addonsContainer_uv0ua","showControlIcon":"custom-picker-button__showControlIcon_uv0ua","open":"custom-picker-button__open_uv0ua"};
7
7
  require('./index.css')
8
8
 
9
- const Field = ({ buttonSize = 'm', buttonVariant = 'default', backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow = true, ...restProps }) => {
10
- const Icon = getIcon(buttonVariant, buttonSize);
9
+ const SIZE_TO_CLASSNAME_MAP = {
10
+ xxs: 'size-32',
11
+ xs: 'size-40',
12
+ s: 'size-48',
13
+ m: 'size-56',
14
+ l: 'size-64',
15
+ xl: 'size-72',
16
+ 32: 'size-32',
17
+ 40: 'size-40',
18
+ 48: 'size-48',
19
+ 56: 'size-56',
20
+ 64: 'size-64',
21
+ 72: 'size-72',
22
+ };
23
+ const Field = ({ buttonSize = 56, buttonVariant = 'default', backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow = true, ...restProps }) => {
24
+ const Icon = getIcon(buttonVariant, SIZE_TO_CLASSNAME_MAP[buttonSize]);
11
25
  const buttonProps = {
12
26
  ...restProps,
13
27
  ...innerProps,
package/modern/field/index.css CHANGED
@@ -1,5 +1,5 @@
1
- /* hash: vei96 */
2
- :root {
1
+ /* hash: v4gtu */
2
+ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
5
5
  } :root {
@@ -16,13 +16,13 @@
16
16
  } :root {
17
17
  } :root {
18
18
  --arrow-transform: rotate(180deg);
19
- } .custom-picker-button__iconContainer_1psk0 {
19
+ } .custom-picker-button__iconContainer_uv0ua {
20
20
  display: flex;
21
21
  transition: transform 0.15s ease-in-out;
22
- } .custom-picker-button__addonsContainer_1psk0 {
22
+ } .custom-picker-button__addonsContainer_uv0ua {
23
23
  display: flex
24
- } .custom-picker-button__addonsContainer_1psk0.custom-picker-button__showControlIcon_1psk0 {
24
+ } .custom-picker-button__addonsContainer_uv0ua.custom-picker-button__showControlIcon_uv0ua {
25
25
  margin-right: var(--gap-2xs);
26
- } .custom-picker-button__open_1psk0 {
26
+ } .custom-picker-button__open_uv0ua {
27
27
  transform: var(--arrow-transform);
28
28
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-custom-picker-button",
3
- "version": "2.1.11",
3
+ "version": "2.2.0",
4
4
  "description": "Custom picker button component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,10 +15,10 @@
15
15
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
16
16
  },
17
17
  "dependencies": {
18
- "@alfalab/core-components-picker-button": "^11.5.4",
19
- "@alfalab/core-components-custom-button": "^3.4.3",
18
+ "@alfalab/core-components-picker-button": "^11.6.0",
19
+ "@alfalab/core-components-custom-button": "^3.5.0",
20
20
  "@alfalab/core-components-mq": "^4.2.0",
21
- "@alfalab/core-components-select": "^17.2.1",
21
+ "@alfalab/core-components-select": "^17.3.0",
22
22
  "classnames": "^2.3.1",
23
23
  "tslib": "^2.4.0"
24
24
  }
package/src/field/Component.tsx CHANGED
@@ -18,8 +18,23 @@ type FieldProps = Pick<BaseFieldProps, 'open' | 'label' | 'innerProps'> &
18
18
  showArrow?: boolean;
19
19
  };
20
20
 
21
+ const SIZE_TO_CLASSNAME_MAP = {
22
+ xxs: 'size-32',
23
+ xs: 'size-40',
24
+ s: 'size-48',
25
+ m: 'size-56',
26
+ l: 'size-64',
27
+ xl: 'size-72',
28
+ 32: 'size-32',
29
+ 40: 'size-40',
30
+ 48: 'size-48',
31
+ 56: 'size-56',
32
+ 64: 'size-64',
33
+ 72: 'size-72',
34
+ };
35
+
21
36
  export const Field = ({
22
- buttonSize = 'm',
37
+ buttonSize = 56,
23
38
  buttonVariant = 'default',
24
39
  backgroundColor,
25
40
  contentColor,
@@ -32,7 +47,10 @@ export const Field = ({
32
47
  showArrow = true,
33
48
  ...restProps
34
49
  }: FieldProps) => {
35
- const Icon: FC<SVGProps<SVGSVGElement>> = getIcon(buttonVariant, buttonSize);
50
+ const Icon: FC<SVGProps<SVGSVGElement>> = getIcon(
51
+ buttonVariant,
52
+ SIZE_TO_CLASSNAME_MAP[buttonSize],
53
+ );
36
54
 
37
55
  const buttonProps = {
38
56
  ...restProps,