@alfalab/core-components-password-input 5.1.3 → 5.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 (11) hide show
  1. package/component.js +13 -3
  2. package/cssm/component.js +12 -2
  3. package/cssm/index.module.css +3 -3
  4. package/esm/component.js +13 -3
  5. package/esm/index.css +6 -6
  6. package/index.css +6 -6
  7. package/modern/component.js +13 -3
  8. package/modern/index.css +6 -6
  9. package/package.json +3 -3
  10. package/src/component.tsx +13 -2
  11. package/src/index.module.css +1 -1
package/component.js CHANGED
@@ -15,11 +15,21 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
15
15
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
16
16
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
17
17
 
18
- var styles = {"eye":"password-input__eye_11lme","xl":"password-input__xl_11lme","addons":"password-input__addons_11lme"};
18
+ var styles = {"eye":"password-input__eye_1w5ot","size-72":"password-input__size-72_1w5ot","addons":"password-input__addons_1w5ot"};
19
19
  require('./index.css')
20
20
 
21
+ var SIZE_TO_CLASSNAME_MAP = {
22
+ s: 'size-48',
23
+ m: 'size-56',
24
+ l: 'size-64',
25
+ xl: 'size-72',
26
+ 48: 'size-48',
27
+ 56: 'size-56',
28
+ 64: 'size-64',
29
+ 72: 'size-72',
30
+ };
21
31
  var PasswordInput = React.forwardRef(function (_a, ref) {
22
- var onPasswordVisibleChange = _a.onPasswordVisibleChange, passwordVisible = _a.passwordVisible, disabled = _a.disabled, colors = _a.colors, rightAddons = _a.rightAddons, _b = _a.size, size = _b === void 0 ? 's' : _b, className = _a.className, restProps = tslib.__rest(_a, ["onPasswordVisibleChange", "passwordVisible", "disabled", "colors", "rightAddons", "size", "className"]);
32
+ var onPasswordVisibleChange = _a.onPasswordVisibleChange, passwordVisible = _a.passwordVisible, disabled = _a.disabled, colors = _a.colors, rightAddons = _a.rightAddons, _b = _a.size, size = _b === void 0 ? 48 : _b, className = _a.className, restProps = tslib.__rest(_a, ["onPasswordVisibleChange", "passwordVisible", "disabled", "colors", "rightAddons", "size", "className"]);
23
33
  var uncontrolled = passwordVisible === undefined;
24
34
  var _c = React.useState(uncontrolled ? false : passwordVisible), statePasswordVisible = _c[0], setStatePasswordVisible = _c[1];
25
35
  var handleButtonClick = React.useCallback(function () {
@@ -31,7 +41,7 @@ var PasswordInput = React.forwardRef(function (_a, ref) {
31
41
  }
32
42
  }, [passwordVisible, uncontrolled, onPasswordVisibleChange]);
33
43
  var isPasswordVisible = uncontrolled ? statePasswordVisible : passwordVisible;
34
- return (React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { disabled: disabled, type: isPasswordVisible ? 'text' : 'password', size: size, ref: ref, colors: colors, className: cn__default.default(className, styles[size]), rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
44
+ return (React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { disabled: disabled, type: isPasswordVisible ? 'text' : 'password', size: size, ref: ref, colors: colors, className: cn__default.default(className, styles[SIZE_TO_CLASSNAME_MAP[size]]), rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
35
45
  rightAddons,
36
46
  React__default.default.createElement(coreComponentsIconButton.IconButton, { className: styles.eye, colors: colors, view: 'secondary', size: 's', icon: isPasswordVisible ? EyeMIcon.EyeMIcon : EyeOffMIcon.EyeOffMIcon, onClick: handleButtonClick, disabled: disabled })), addonsClassName: styles.addons, inputClassName: styles.input })));
37
47
  });
package/cssm/component.js CHANGED
@@ -17,8 +17,18 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
17
17
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
18
18
  var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
19
19
 
20
+ var SIZE_TO_CLASSNAME_MAP = {
21
+ s: 'size-48',
22
+ m: 'size-56',
23
+ l: 'size-64',
24
+ xl: 'size-72',
25
+ 48: 'size-48',
26
+ 56: 'size-56',
27
+ 64: 'size-64',
28
+ 72: 'size-72',
29
+ };
20
30
  var PasswordInput = React.forwardRef(function (_a, ref) {
21
- var onPasswordVisibleChange = _a.onPasswordVisibleChange, passwordVisible = _a.passwordVisible, disabled = _a.disabled, colors = _a.colors, rightAddons = _a.rightAddons, _b = _a.size, size = _b === void 0 ? 's' : _b, className = _a.className, restProps = tslib.__rest(_a, ["onPasswordVisibleChange", "passwordVisible", "disabled", "colors", "rightAddons", "size", "className"]);
31
+ var onPasswordVisibleChange = _a.onPasswordVisibleChange, passwordVisible = _a.passwordVisible, disabled = _a.disabled, colors = _a.colors, rightAddons = _a.rightAddons, _b = _a.size, size = _b === void 0 ? 48 : _b, className = _a.className, restProps = tslib.__rest(_a, ["onPasswordVisibleChange", "passwordVisible", "disabled", "colors", "rightAddons", "size", "className"]);
22
32
  var uncontrolled = passwordVisible === undefined;
23
33
  var _c = React.useState(uncontrolled ? false : passwordVisible), statePasswordVisible = _c[0], setStatePasswordVisible = _c[1];
24
34
  var handleButtonClick = React.useCallback(function () {
@@ -30,7 +40,7 @@ var PasswordInput = React.forwardRef(function (_a, ref) {
30
40
  }
31
41
  }, [passwordVisible, uncontrolled, onPasswordVisibleChange]);
32
42
  var isPasswordVisible = uncontrolled ? statePasswordVisible : passwordVisible;
33
- return (React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { disabled: disabled, type: isPasswordVisible ? 'text' : 'password', size: size, ref: ref, colors: colors, className: cn__default.default(className, styles__default.default[size]), rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
43
+ return (React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { disabled: disabled, type: isPasswordVisible ? 'text' : 'password', size: size, ref: ref, colors: colors, className: cn__default.default(className, styles__default.default[SIZE_TO_CLASSNAME_MAP[size]]), rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
34
44
  rightAddons,
35
45
  React__default.default.createElement(coreComponentsIconButton.IconButton, { className: styles__default.default.eye, colors: colors, view: 'secondary', size: 's', icon: isPasswordVisible ? EyeMIcon.EyeMIcon : EyeOffMIcon.EyeOffMIcon, onClick: handleButtonClick, disabled: disabled })), addonsClassName: styles__default.default.addons, inputClassName: styles__default.default.input })));
36
46
  });
package/cssm/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 {
@@ -17,9 +17,9 @@
17
17
  } :root {
18
18
  } .eye:last-child {
19
19
  height: 100%;
20
- } .xl .eye:last-child {
20
+ } .size-72 .eye:last-child {
21
21
  margin-right: var(--gap-m-neg);
22
- } .xl .eye {
22
+ } .size-72 .eye {
23
23
  margin-left: var(--gap-2xs);
24
24
  } .addons {
25
25
  padding-right: 0;
package/esm/component.js CHANGED
@@ -6,11 +6,21 @@ import { Input } from '@alfalab/core-components-input/esm';
6
6
  import { EyeMIcon } from '@alfalab/icons-glyph/EyeMIcon';
7
7
  import { EyeOffMIcon } from '@alfalab/icons-glyph/EyeOffMIcon';
8
8
 
9
- var styles = {"eye":"password-input__eye_11lme","xl":"password-input__xl_11lme","addons":"password-input__addons_11lme"};
9
+ var styles = {"eye":"password-input__eye_1w5ot","size-72":"password-input__size-72_1w5ot","addons":"password-input__addons_1w5ot"};
10
10
  require('./index.css')
11
11
 
12
+ var SIZE_TO_CLASSNAME_MAP = {
13
+ s: 'size-48',
14
+ m: 'size-56',
15
+ l: 'size-64',
16
+ xl: 'size-72',
17
+ 48: 'size-48',
18
+ 56: 'size-56',
19
+ 64: 'size-64',
20
+ 72: 'size-72',
21
+ };
12
22
  var PasswordInput = forwardRef(function (_a, ref) {
13
- var onPasswordVisibleChange = _a.onPasswordVisibleChange, passwordVisible = _a.passwordVisible, disabled = _a.disabled, colors = _a.colors, rightAddons = _a.rightAddons, _b = _a.size, size = _b === void 0 ? 's' : _b, className = _a.className, restProps = __rest(_a, ["onPasswordVisibleChange", "passwordVisible", "disabled", "colors", "rightAddons", "size", "className"]);
23
+ var onPasswordVisibleChange = _a.onPasswordVisibleChange, passwordVisible = _a.passwordVisible, disabled = _a.disabled, colors = _a.colors, rightAddons = _a.rightAddons, _b = _a.size, size = _b === void 0 ? 48 : _b, className = _a.className, restProps = __rest(_a, ["onPasswordVisibleChange", "passwordVisible", "disabled", "colors", "rightAddons", "size", "className"]);
14
24
  var uncontrolled = passwordVisible === undefined;
15
25
  var _c = useState(uncontrolled ? false : passwordVisible), statePasswordVisible = _c[0], setStatePasswordVisible = _c[1];
16
26
  var handleButtonClick = useCallback(function () {
@@ -22,7 +32,7 @@ var PasswordInput = forwardRef(function (_a, ref) {
22
32
  }
23
33
  }, [passwordVisible, uncontrolled, onPasswordVisibleChange]);
24
34
  var isPasswordVisible = uncontrolled ? statePasswordVisible : passwordVisible;
25
- return (React.createElement(Input, __assign({}, restProps, { disabled: disabled, type: isPasswordVisible ? 'text' : 'password', size: size, ref: ref, colors: colors, className: cn(className, styles[size]), rightAddons: React.createElement(React.Fragment, null,
35
+ return (React.createElement(Input, __assign({}, restProps, { disabled: disabled, type: isPasswordVisible ? 'text' : 'password', size: size, ref: ref, colors: colors, className: cn(className, styles[SIZE_TO_CLASSNAME_MAP[size]]), rightAddons: React.createElement(React.Fragment, null,
26
36
  rightAddons,
27
37
  React.createElement(IconButton, { className: styles.eye, colors: colors, view: 'secondary', size: 's', icon: isPasswordVisible ? EyeMIcon : EyeOffMIcon, onClick: handleButtonClick, disabled: disabled })), addonsClassName: styles.addons, inputClassName: styles.input })));
28
38
  });
package/esm/index.css CHANGED
@@ -1,5 +1,5 @@
1
- /* hash: 2jsdg */
2
- :root {
1
+ /* hash: 1gbs2 */
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,12 +16,12 @@
16
16
  --gap-m-neg: -16px;
17
17
  } :root {
18
18
  } :root {
19
- } .password-input__eye_11lme:last-child {
19
+ } .password-input__eye_1w5ot:last-child {
20
20
  height: 100%;
21
- } .password-input__xl_11lme .password-input__eye_11lme:last-child {
21
+ } .password-input__size-72_1w5ot .password-input__eye_1w5ot:last-child {
22
22
  margin-right: var(--gap-m-neg);
23
- } .password-input__xl_11lme .password-input__eye_11lme {
23
+ } .password-input__size-72_1w5ot .password-input__eye_1w5ot {
24
24
  margin-left: var(--gap-2xs);
25
- } .password-input__addons_11lme {
25
+ } .password-input__addons_1w5ot {
26
26
  padding-right: 0;
27
27
  }
package/index.css CHANGED
@@ -1,5 +1,5 @@
1
- /* hash: 2jsdg */
2
- :root {
1
+ /* hash: 1gbs2 */
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,12 +16,12 @@
16
16
  --gap-m-neg: -16px;
17
17
  } :root {
18
18
  } :root {
19
- } .password-input__eye_11lme:last-child {
19
+ } .password-input__eye_1w5ot:last-child {
20
20
  height: 100%;
21
- } .password-input__xl_11lme .password-input__eye_11lme:last-child {
21
+ } .password-input__size-72_1w5ot .password-input__eye_1w5ot:last-child {
22
22
  margin-right: var(--gap-m-neg);
23
- } .password-input__xl_11lme .password-input__eye_11lme {
23
+ } .password-input__size-72_1w5ot .password-input__eye_1w5ot {
24
24
  margin-left: var(--gap-2xs);
25
- } .password-input__addons_11lme {
25
+ } .password-input__addons_1w5ot {
26
26
  padding-right: 0;
27
27
  }
package/modern/component.js CHANGED
@@ -5,10 +5,20 @@ import { Input } from '@alfalab/core-components-input/modern';
5
5
  import { EyeMIcon } from '@alfalab/icons-glyph/EyeMIcon';
6
6
  import { EyeOffMIcon } from '@alfalab/icons-glyph/EyeOffMIcon';
7
7
 
8
- const styles = {"eye":"password-input__eye_11lme","xl":"password-input__xl_11lme","addons":"password-input__addons_11lme"};
8
+ const styles = {"eye":"password-input__eye_1w5ot","size-72":"password-input__size-72_1w5ot","addons":"password-input__addons_1w5ot"};
9
9
  require('./index.css')
10
10
 
11
- const PasswordInput = forwardRef(({ onPasswordVisibleChange, passwordVisible, disabled, colors, rightAddons, size = 's', className, ...restProps }, ref) => {
11
+ const SIZE_TO_CLASSNAME_MAP = {
12
+ s: 'size-48',
13
+ m: 'size-56',
14
+ l: 'size-64',
15
+ xl: 'size-72',
16
+ 48: 'size-48',
17
+ 56: 'size-56',
18
+ 64: 'size-64',
19
+ 72: 'size-72',
20
+ };
21
+ const PasswordInput = forwardRef(({ onPasswordVisibleChange, passwordVisible, disabled, colors, rightAddons, size = 48, className, ...restProps }, ref) => {
12
22
  const uncontrolled = passwordVisible === undefined;
13
23
  const [statePasswordVisible, setStatePasswordVisible] = useState(uncontrolled ? false : passwordVisible);
14
24
  const handleButtonClick = useCallback(() => {
@@ -20,7 +30,7 @@ const PasswordInput = forwardRef(({ onPasswordVisibleChange, passwordVisible, di
20
30
  }
21
31
  }, [passwordVisible, uncontrolled, onPasswordVisibleChange]);
22
32
  const isPasswordVisible = uncontrolled ? statePasswordVisible : passwordVisible;
23
- return (React.createElement(Input, { ...restProps, disabled: disabled, type: isPasswordVisible ? 'text' : 'password', size: size, ref: ref, colors: colors, className: cn(className, styles[size]), rightAddons: React.createElement(React.Fragment, null,
33
+ return (React.createElement(Input, { ...restProps, disabled: disabled, type: isPasswordVisible ? 'text' : 'password', size: size, ref: ref, colors: colors, className: cn(className, styles[SIZE_TO_CLASSNAME_MAP[size]]), rightAddons: React.createElement(React.Fragment, null,
24
34
  rightAddons,
25
35
  React.createElement(IconButton, { className: styles.eye, colors: colors, view: 'secondary', size: 's', icon: isPasswordVisible ? EyeMIcon : EyeOffMIcon, onClick: handleButtonClick, disabled: disabled })), addonsClassName: styles.addons, inputClassName: styles.input }));
26
36
  });
package/modern/index.css CHANGED
@@ -1,5 +1,5 @@
1
- /* hash: 2jsdg */
2
- :root {
1
+ /* hash: 1gbs2 */
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,12 +16,12 @@
16
16
  --gap-m-neg: -16px;
17
17
  } :root {
18
18
  } :root {
19
- } .password-input__eye_11lme:last-child {
19
+ } .password-input__eye_1w5ot:last-child {
20
20
  height: 100%;
21
- } .password-input__xl_11lme .password-input__eye_11lme:last-child {
21
+ } .password-input__size-72_1w5ot .password-input__eye_1w5ot:last-child {
22
22
  margin-right: var(--gap-m-neg);
23
- } .password-input__xl_11lme .password-input__eye_11lme {
23
+ } .password-input__size-72_1w5ot .password-input__eye_1w5ot {
24
24
  margin-left: var(--gap-2xs);
25
- } .password-input__addons_11lme {
25
+ } .password-input__addons_1w5ot {
26
26
  padding-right: 0;
27
27
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-password-input",
3
- "version": "5.1.3",
3
+ "version": "5.2.0",
4
4
  "description": "Input password",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,8 +15,8 @@
15
15
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
16
16
  },
17
17
  "dependencies": {
18
- "@alfalab/core-components-icon-button": "^6.5.2",
19
- "@alfalab/core-components-input": "^14.2.0",
18
+ "@alfalab/core-components-icon-button": "^6.5.3",
19
+ "@alfalab/core-components-input": "^14.3.0",
20
20
  "@alfalab/icons-glyph": "^2.139.0",
21
21
  "classnames": "^2.3.1",
22
22
  "tslib": "^2.4.0"
package/src/component.tsx CHANGED
@@ -20,6 +20,17 @@ export type PasswordInputProps = InputProps & {
20
20
  onPasswordVisibleChange?: (visible: boolean) => void;
21
21
  };
22
22
 
23
+ const SIZE_TO_CLASSNAME_MAP = {
24
+ s: 'size-48',
25
+ m: 'size-56',
26
+ l: 'size-64',
27
+ xl: 'size-72',
28
+ 48: 'size-48',
29
+ 56: 'size-56',
30
+ 64: 'size-64',
31
+ 72: 'size-72',
32
+ };
33
+
23
34
  export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
24
35
  (
25
36
  {
@@ -28,7 +39,7 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
28
39
  disabled,
29
40
  colors,
30
41
  rightAddons,
31
- size = 's',
42
+ size = 48,
32
43
  className,
33
44
  ...restProps
34
45
  },
@@ -59,7 +70,7 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
59
70
  size={size}
60
71
  ref={ref}
61
72
  colors={colors}
62
- className={cn(className, styles[size])}
73
+ className={cn(className, styles[SIZE_TO_CLASSNAME_MAP[size]])}
63
74
  rightAddons={
64
75
  <React.Fragment>
65
76
  {rightAddons}
package/src/index.module.css CHANGED
@@ -4,7 +4,7 @@
4
4
  height: 100%;
5
5
  }
6
6
 
7
- .xl {
7
+ .size-72 {
8
8
  & .eye:last-child {
9
9
  margin-right: var(--gap-m-neg);
10
10
  }