@cuemath/leap 2.9.5-j5 → 2.9.5-j7
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/assets/lottie/lottie.js +1 -0
- package/dist/assets/lottie/lottie.js.map +1 -1
- package/dist/features/auth/comps/resend-otp/otp-timer/otp-timer.js +19 -22
- package/dist/features/auth/comps/resend-otp/otp-timer/otp-timer.js.map +1 -1
- package/dist/features/auth/comps/resend-otp/resend-otp.js +12 -12
- package/dist/features/auth/comps/resend-otp/resend-otp.js.map +1 -1
- package/dist/features/auth/login/social-account-not-found/social-account-not-found.js +46 -0
- package/dist/features/auth/login/social-account-not-found/social-account-not-found.js.map +1 -0
- package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper.js +7 -7
- package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper.js.map +1 -1
- package/dist/features/auth/signup/custom-input/input-wrapper/input-wrapper.js +22 -22
- package/dist/features/auth/signup/custom-input/input-wrapper/input-wrapper.js.map +1 -1
- package/dist/features/auth/signup/custom-input/student-username/student-username.js +22 -22
- package/dist/features/auth/signup/custom-input/student-username/student-username.js.map +1 -1
- package/dist/features/ui/inputs/base-input/base-input-styled.js +61 -60
- package/dist/features/ui/inputs/base-input/base-input-styled.js.map +1 -1
- package/dist/features/ui/inputs/base-input/base-input.js +38 -35
- package/dist/features/ui/inputs/base-input/base-input.js.map +1 -1
- package/dist/features/ui/inputs/text-input/text-input-styled.js +22 -20
- package/dist/features/ui/inputs/text-input/text-input-styled.js.map +1 -1
- package/dist/features/ui/inputs/text-input/text-input.js +35 -32
- package/dist/features/ui/inputs/text-input/text-input.js.map +1 -1
- package/dist/features/ui/theme/input.js +84 -11
- package/dist/features/ui/theme/input.js.map +1 -1
- package/dist/index.d.ts +19 -6
- package/dist/index.js +339 -337
- package/dist/index.js.map +1 -1
- package/dist/static/error.cbe1ddde.json +1 -0
- package/package.json +1 -1
|
@@ -1,114 +1,115 @@
|
|
|
1
|
-
import
|
|
1
|
+
import u from "styled-components";
|
|
2
2
|
import C from "../../text/text.js";
|
|
3
|
-
const
|
|
4
|
-
({ theme:
|
|
5
|
-
const { height:
|
|
3
|
+
const W = u.div(
|
|
4
|
+
({ theme: n, $size: a, $willShowMessage: i, $width: t, $widthX: r }) => {
|
|
5
|
+
const { height: s, marginTop: c, marginBottom: e } = n.input.sizes[a], o = s + c + (i ? e : 0);
|
|
6
6
|
return `
|
|
7
|
-
width: ${
|
|
8
|
-
${
|
|
9
|
-
height: ${
|
|
7
|
+
width: ${t || "auto"}${typeof t == "number" ? "px" : ""};
|
|
8
|
+
${r ? `width: ${r * n.layout.gutter}px;` : ""}
|
|
9
|
+
height: ${o}px;
|
|
10
10
|
`;
|
|
11
11
|
}
|
|
12
|
-
),
|
|
13
|
-
({ theme:
|
|
14
|
-
const { colors:
|
|
12
|
+
), f = u.div(
|
|
13
|
+
({ theme: n, $size: a, $renderAs: i, $disabled: t, $shape: r, $isTransparent: s, $colorTheme: c }) => {
|
|
14
|
+
const { colors: e, input: o } = n, { height: l, marginTop: m, paddingLeft: h, paddingRight: $, borderRadius: k } = o.sizes[a], { borderColorName: d, backgroundColorName: b } = c === "dark" ? o.darkVariants[i] : o.variants[i], p = r === "borderLess", g = r === "curved", v = p ? 0 : k, x = s ? "transparent" : e[b ?? "WHITE"];
|
|
15
15
|
return `
|
|
16
16
|
position: relative;
|
|
17
17
|
display: flex;
|
|
18
|
-
height: ${
|
|
19
|
-
margin-top: ${
|
|
20
|
-
padding-left: ${p ? 0 :
|
|
21
|
-
padding-right: ${p ? 0 :
|
|
22
|
-
padding-top: ${
|
|
23
|
-
padding-bottom: ${
|
|
18
|
+
height: ${l}px;
|
|
19
|
+
margin-top: ${m}px;
|
|
20
|
+
padding-left: ${p ? 0 : h}px;
|
|
21
|
+
padding-right: ${p ? 0 : $}px;
|
|
22
|
+
padding-top: ${g ? 1 : 0}px;
|
|
23
|
+
padding-bottom: ${g ? 1 : 0}px;
|
|
24
24
|
${p ? `
|
|
25
25
|
border: none;
|
|
26
|
-
border-bottom: 1px solid ${
|
|
27
|
-
` : `border: 1px solid ${
|
|
28
|
-
border-radius: ${
|
|
26
|
+
border-bottom: 1px solid ${e[d[t ? "disabled" : "inactive"]]};
|
|
27
|
+
` : `border: 1px solid ${e[d[t ? "disabled" : g ? "active" : "inactive"]]};`}
|
|
28
|
+
border-radius: ${g ? 40 : v}px;
|
|
29
29
|
transition: border-color 0.2s ease-in-out;
|
|
30
30
|
|
|
31
|
-
background: ${
|
|
31
|
+
background: ${x};
|
|
32
32
|
|
|
33
33
|
&:focus-within {
|
|
34
|
-
border-color: ${
|
|
34
|
+
border-color: ${e[d.active]};
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
&:hover {
|
|
38
|
-
${
|
|
38
|
+
${t ? "" : `border-color: ${e[d.active]};`}
|
|
39
39
|
}
|
|
40
40
|
`;
|
|
41
41
|
}
|
|
42
|
-
),
|
|
42
|
+
), B = u.div`
|
|
43
43
|
flex-grow: 1;
|
|
44
|
-
`,
|
|
45
|
-
({ theme:
|
|
46
|
-
const { colors:
|
|
44
|
+
`, R = u.div(
|
|
45
|
+
({ theme: n, $inputRenderAs: a, $disabled: i, $size: t, $siblingPosition: r }) => {
|
|
46
|
+
const { colors: s, input: c } = n, { iconPadding: e } = c.sizes[t], { labelColorName: o } = c.variants[a];
|
|
47
47
|
return `
|
|
48
|
-
order: ${
|
|
49
|
-
padding-${
|
|
48
|
+
order: ${r === "left" ? -1 : 1};
|
|
49
|
+
padding-${r === "left" ? "right" : "left"}: ${e}px;
|
|
50
50
|
align-self: center;
|
|
51
|
-
color: ${
|
|
51
|
+
color: ${s[o[i ? "disabled" : "inactive"]]};
|
|
52
52
|
|
|
53
|
-
${
|
|
54
|
-
color: ${
|
|
53
|
+
${f}:focus-within & {
|
|
54
|
+
color: ${s[o.active]};
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
${
|
|
58
|
-
${
|
|
57
|
+
${f}:hover & {
|
|
58
|
+
${i ? "" : `color: ${s[o.active]};`}
|
|
59
59
|
}
|
|
60
60
|
`;
|
|
61
61
|
}
|
|
62
|
-
), y =
|
|
63
|
-
theme:
|
|
64
|
-
$size:
|
|
65
|
-
$inputRenderAs:
|
|
66
|
-
$stickyLabel:
|
|
67
|
-
$disabled:
|
|
68
|
-
$shape:
|
|
69
|
-
$isTransparent:
|
|
62
|
+
), y = u(C)(({
|
|
63
|
+
theme: n,
|
|
64
|
+
$size: a,
|
|
65
|
+
$inputRenderAs: i,
|
|
66
|
+
$stickyLabel: t,
|
|
67
|
+
$disabled: r,
|
|
68
|
+
$shape: s,
|
|
69
|
+
$isTransparent: c,
|
|
70
|
+
$colorTheme: e
|
|
70
71
|
}) => {
|
|
71
|
-
const { colors:
|
|
72
|
+
const { colors: o, input: l, text: m, layout: h } = n, { gutter: $ } = h, { height: k, paddingLeft: d } = l.sizes[a], { lineHeight: b } = m[l.sizes[a].labelTextVariant], { labelColorName: p, labelBackgroundColorName: g } = e === "dark" ? l.darkVariants[i] : l.variants[i], v = k / 2 - b / 2 - 1, x = -v - b / 2 - 1, E = s === "borderLess", L = c ? "transparent" : o[g ?? "WHITE"];
|
|
72
73
|
return `
|
|
73
74
|
position: absolute;
|
|
74
|
-
top: ${
|
|
75
|
-
left: ${(
|
|
76
|
-
padding: 0 ${
|
|
75
|
+
top: ${v}px;
|
|
76
|
+
left: ${(E ? 0 : d) - $ * 0.375}px;
|
|
77
|
+
padding: 0 ${$ * 0.375}px;
|
|
77
78
|
background-color: ${L};
|
|
78
|
-
color: ${
|
|
79
|
+
color: ${o[p[r ? "disabled" : "inactive"]]};
|
|
79
80
|
pointer-events: none;
|
|
80
81
|
transform-origin: left;
|
|
81
|
-
transform: translateY(${
|
|
82
|
+
transform: translateY(${t ? x : 0}px) scale(${t ? 0.75 : 1});
|
|
82
83
|
transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
|
|
83
84
|
|
|
84
|
-
${
|
|
85
|
-
color: ${
|
|
86
|
-
transform: translateY(${
|
|
85
|
+
${f}:focus-within & {
|
|
86
|
+
color: ${o[p.active]};
|
|
87
|
+
transform: translateY(${x}px) scale(0.75);
|
|
87
88
|
}
|
|
88
89
|
|
|
89
|
-
${
|
|
90
|
-
${
|
|
90
|
+
${f}:hover & {
|
|
91
|
+
${r ? "" : `color: ${o[p.active]};`}
|
|
91
92
|
}
|
|
92
93
|
|
|
93
94
|
& span {
|
|
94
|
-
color: ${
|
|
95
|
+
color: ${o.RED};
|
|
95
96
|
margin-left: 2px;
|
|
96
97
|
}
|
|
97
98
|
`;
|
|
98
|
-
}), z =
|
|
99
|
-
({ theme: { colors:
|
|
99
|
+
}), z = u(C)(
|
|
100
|
+
({ theme: { colors: n }, $colorTheme: a }) => `
|
|
100
101
|
position: absolute;
|
|
101
102
|
bottom: -2px;
|
|
102
103
|
transform: translateY(calc(100%));
|
|
103
|
-
color: ${
|
|
104
|
+
color: ${n[a === "dark" ? "ORANGE_4" : "RED"]};
|
|
104
105
|
`
|
|
105
106
|
);
|
|
106
107
|
export {
|
|
107
|
-
|
|
108
|
+
W as Container,
|
|
108
109
|
z as Error,
|
|
109
|
-
|
|
110
|
+
B as InputWrapper,
|
|
110
111
|
y as Label,
|
|
111
|
-
|
|
112
|
-
|
|
112
|
+
R as SiblingWrapper,
|
|
113
|
+
f as Wrapper
|
|
113
114
|
};
|
|
114
115
|
//# sourceMappingURL=base-input-styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-input-styled.js","sources":["../../../../../src/features/ui/inputs/base-input/base-input-styled.tsx"],"sourcesContent":["import type { IBaseInputProps } from './base-input-types';\n\nimport styled from 'styled-components';\n\nimport Text from '../../text/text';\n\ninterface IContainerProps {\n $width?: string | number;\n $widthX?: number;\n $size: IBaseInputProps['size'];\n $willShowMessage: IBaseInputProps['willShowMessage'];\n}\n\nconst Container = styled.div<IContainerProps>(\n ({ theme, $size, $willShowMessage, $width, $widthX }) => {\n const { height, marginTop, marginBottom } = theme.input.sizes[$size];\n const containerHeight = height + marginTop + ($willShowMessage ? marginBottom : 0);\n\n return `\n width: ${$width ? $width : 'auto'}${typeof $width === 'number' ? 'px' : ''};\n ${$widthX ? `width: ${$widthX * theme.layout.gutter}px;` : ''}\n height: ${containerHeight}px;\n `;\n },\n);\n\ninterface IWrapperProps {\n $size: IBaseInputProps['size'];\n $disabled?: boolean;\n $renderAs: IBaseInputProps['renderAs'];\n $shape?: IBaseInputProps['shape'];\n $isTransparent?: boolean;\n}\n\nconst Wrapper = styled.div<IWrapperProps>(\n ({ theme, $size, $renderAs, $disabled, $shape, $isTransparent }) => {\n const { colors, input } = theme;\n const { height, marginTop, paddingLeft, paddingRight, borderRadius } = input.sizes[$size];\n const { borderColorName, backgroundColorName } = input.variants[$renderAs];\n\n const isBorderLessShape = $shape === 'borderLess';\n const isCurvedShape = $shape === 'curved';\n const defaultBorderRadius = isBorderLessShape ? 0 : borderRadius;\n\n const background = $isTransparent ? 'transparent' : colors[backgroundColorName ?? 'WHITE'];\n\n return `\n position: relative;\n display: flex;\n height: ${height}px;\n margin-top: ${marginTop}px;\n padding-left: ${isBorderLessShape ? 0 : paddingLeft}px;\n padding-right: ${isBorderLessShape ? 0 : paddingRight}px;\n padding-top: ${isCurvedShape ? 1 : 0}px;\n padding-bottom: ${isCurvedShape ? 1 : 0}px;\n ${\n isBorderLessShape\n ? `\n border: none;\n border-bottom: 1px solid ${colors[borderColorName[$disabled ? 'disabled' : 'inactive']]};\n `\n : `border: 1px solid ${\n colors[borderColorName[$disabled ? 'disabled' : isCurvedShape ? 'active' : 'inactive']]\n };`\n }\n border-radius: ${isCurvedShape ? 40 : defaultBorderRadius}px;\n transition: border-color 0.2s ease-in-out;\n \n background: ${background};\n \n &:focus-within {\n border-color: ${colors[borderColorName.active]};\n }\n \n &:hover {\n ${!$disabled ? `border-color: ${colors[borderColorName.active]};` : ''}\n }\n `;\n },\n);\n\nconst InputWrapper = styled.div`\n flex-grow: 1;\n`;\n\ninterface ISiblingWrapperProps {\n $inputRenderAs: IBaseInputProps['renderAs'];\n $size: IBaseInputProps['size'];\n $siblingPosition: NonNullable<IBaseInputProps['siblingPosition']>;\n $disabled?: boolean;\n}\n\nconst SiblingWrapper = styled.div<ISiblingWrapperProps>(\n ({ theme, $inputRenderAs, $disabled, $size, $siblingPosition }) => {\n const { colors, input } = theme;\n const { iconPadding } = input.sizes[$size];\n const { labelColorName } = input.variants[$inputRenderAs];\n\n return `\n order: ${$siblingPosition === 'left' ? -1 : 1};\n padding-${$siblingPosition === 'left' ? 'right' : 'left'}: ${iconPadding}px;\n align-self: center;\n color: ${colors[labelColorName[$disabled ? 'disabled' : 'inactive']]};\n\n ${Wrapper}:focus-within & {\n color: ${colors[labelColorName.active]};\n }\n \n ${Wrapper}:hover & {\n ${!$disabled ? `color: ${colors[labelColorName.active]};` : ''}\n }\n `;\n },\n);\n\ninterface ILabelProps {\n $size: IBaseInputProps['size'];\n $inputRenderAs: IBaseInputProps['renderAs'];\n $stickyLabel: IBaseInputProps['stickyLabel'];\n $disabled?: boolean;\n $shape?: IBaseInputProps['shape'];\n $isTransparent: IBaseInputProps['isTransparent'];\n}\n\nconst Label = styled(Text)<ILabelProps>(({\n theme,\n $size,\n $inputRenderAs,\n $stickyLabel,\n $disabled,\n $shape,\n $isTransparent,\n}) => {\n const { colors, input, text, layout } = theme;\n const { gutter } = layout;\n const { height, paddingLeft } = input.sizes[$size];\n const { lineHeight } = text[input.sizes[$size].labelTextVariant];\n const { labelColorName } = input.variants[$inputRenderAs];\n const topPosition = height / 2 - lineHeight / 2 - 1;\n const topPositionWhenActive = -topPosition - lineHeight / 2 - 1;\n\n const isBorderLessShape = $shape === 'borderLess';\n\n const backgroundColor = $isTransparent ? 'transparent' : colors.WHITE;\n\n return `\n position: absolute;\n top: ${topPosition}px;\n left: ${(isBorderLessShape ? 0 : paddingLeft) - gutter * 0.375}px;\n padding: 0 ${gutter * 0.375}px;\n background-color: ${backgroundColor};\n color: ${colors[labelColorName[$disabled ? 'disabled' : 'inactive']]};\n pointer-events: none;\n transform-origin: left;\n transform: translateY(${$stickyLabel ? topPositionWhenActive : 0}px) scale(${\n $stickyLabel ? 0.75 : 1\n });\n transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;\n\n ${Wrapper}:focus-within & {\n color: ${colors[labelColorName.active]};\n transform: translateY(${topPositionWhenActive}px) scale(0.75);\n }\n \n ${Wrapper}:hover & {\n ${!$disabled ? `color: ${colors[labelColorName.active]};` : ''}\n }\n\n & span {\n color: ${colors.RED};\n margin-left: 2px;\n }\n `;\n});\n\nconst Error = styled(Text)(\n ({ theme: { colors } }) => `\nposition: absolute;\nbottom: -2px;\ntransform: translateY(calc(100%));\ncolor: ${colors.RED};\n`,\n);\n\nexport { Container, Wrapper, InputWrapper, SiblingWrapper, Label, Error };\n"],"names":["Container","styled","theme","$size","$willShowMessage","$width","$widthX","height","marginTop","marginBottom","containerHeight","Wrapper","$renderAs","$disabled","$shape","$isTransparent","colors","input","paddingLeft","paddingRight","borderRadius","borderColorName","backgroundColorName","isBorderLessShape","isCurvedShape","defaultBorderRadius","background","InputWrapper","SiblingWrapper","$inputRenderAs","$siblingPosition","iconPadding","labelColorName","Label","Text","$stickyLabel","text","layout","gutter","lineHeight","topPosition","topPositionWhenActive","backgroundColor","Error"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"base-input-styled.js","sources":["../../../../../src/features/ui/inputs/base-input/base-input-styled.tsx"],"sourcesContent":["import type { IBaseInputProps } from './base-input-types';\n\nimport styled from 'styled-components';\n\nimport Text from '../../text/text';\n\ninterface IContainerProps {\n $width?: string | number;\n $widthX?: number;\n $size: IBaseInputProps['size'];\n $willShowMessage: IBaseInputProps['willShowMessage'];\n}\n\nconst Container = styled.div<IContainerProps>(\n ({ theme, $size, $willShowMessage, $width, $widthX }) => {\n const { height, marginTop, marginBottom } = theme.input.sizes[$size];\n const containerHeight = height + marginTop + ($willShowMessage ? marginBottom : 0);\n\n return `\n width: ${$width ? $width : 'auto'}${typeof $width === 'number' ? 'px' : ''};\n ${$widthX ? `width: ${$widthX * theme.layout.gutter}px;` : ''}\n height: ${containerHeight}px;\n `;\n },\n);\n\ninterface IWrapperProps {\n $size: IBaseInputProps['size'];\n $disabled?: boolean;\n $renderAs: IBaseInputProps['renderAs'];\n $shape?: IBaseInputProps['shape'];\n $isTransparent?: boolean;\n $colorTheme?: IBaseInputProps['colorTheme'];\n}\n\nconst Wrapper = styled.div<IWrapperProps>(\n ({ theme, $size, $renderAs, $disabled, $shape, $isTransparent, $colorTheme }) => {\n const { colors, input } = theme;\n const { height, marginTop, paddingLeft, paddingRight, borderRadius } = input.sizes[$size];\n const { borderColorName, backgroundColorName } =\n $colorTheme === 'dark' ? input.darkVariants[$renderAs] : input.variants[$renderAs];\n\n const isBorderLessShape = $shape === 'borderLess';\n const isCurvedShape = $shape === 'curved';\n const defaultBorderRadius = isBorderLessShape ? 0 : borderRadius;\n\n const background = $isTransparent ? 'transparent' : colors[backgroundColorName ?? 'WHITE'];\n\n return `\n position: relative;\n display: flex;\n height: ${height}px;\n margin-top: ${marginTop}px;\n padding-left: ${isBorderLessShape ? 0 : paddingLeft}px;\n padding-right: ${isBorderLessShape ? 0 : paddingRight}px;\n padding-top: ${isCurvedShape ? 1 : 0}px;\n padding-bottom: ${isCurvedShape ? 1 : 0}px;\n ${\n isBorderLessShape\n ? `\n border: none;\n border-bottom: 1px solid ${colors[borderColorName[$disabled ? 'disabled' : 'inactive']]};\n `\n : `border: 1px solid ${\n colors[borderColorName[$disabled ? 'disabled' : isCurvedShape ? 'active' : 'inactive']]\n };`\n }\n border-radius: ${isCurvedShape ? 40 : defaultBorderRadius}px;\n transition: border-color 0.2s ease-in-out;\n \n background: ${background};\n \n &:focus-within {\n border-color: ${colors[borderColorName.active]};\n }\n \n &:hover {\n ${!$disabled ? `border-color: ${colors[borderColorName.active]};` : ''}\n }\n `;\n },\n);\n\nconst InputWrapper = styled.div`\n flex-grow: 1;\n`;\n\ninterface ISiblingWrapperProps {\n $inputRenderAs: IBaseInputProps['renderAs'];\n $size: IBaseInputProps['size'];\n $siblingPosition: NonNullable<IBaseInputProps['siblingPosition']>;\n $disabled?: boolean;\n}\n\nconst SiblingWrapper = styled.div<ISiblingWrapperProps>(\n ({ theme, $inputRenderAs, $disabled, $size, $siblingPosition }) => {\n const { colors, input } = theme;\n const { iconPadding } = input.sizes[$size];\n const { labelColorName } = input.variants[$inputRenderAs];\n\n return `\n order: ${$siblingPosition === 'left' ? -1 : 1};\n padding-${$siblingPosition === 'left' ? 'right' : 'left'}: ${iconPadding}px;\n align-self: center;\n color: ${colors[labelColorName[$disabled ? 'disabled' : 'inactive']]};\n\n ${Wrapper}:focus-within & {\n color: ${colors[labelColorName.active]};\n }\n \n ${Wrapper}:hover & {\n ${!$disabled ? `color: ${colors[labelColorName.active]};` : ''}\n }\n `;\n },\n);\n\ninterface ILabelProps {\n $size: IBaseInputProps['size'];\n $inputRenderAs: IBaseInputProps['renderAs'];\n $stickyLabel: IBaseInputProps['stickyLabel'];\n $disabled?: boolean;\n $shape?: IBaseInputProps['shape'];\n $isTransparent: IBaseInputProps['isTransparent'];\n $colorTheme: IBaseInputProps['colorTheme'];\n}\n\nconst Label = styled(Text)<ILabelProps>(({\n theme,\n $size,\n $inputRenderAs,\n $stickyLabel,\n $disabled,\n $shape,\n $isTransparent,\n $colorTheme,\n}) => {\n const { colors, input, text, layout } = theme;\n const { gutter } = layout;\n const { height, paddingLeft } = input.sizes[$size];\n const { lineHeight } = text[input.sizes[$size].labelTextVariant];\n const { labelColorName, labelBackgroundColorName } =\n $colorTheme === 'dark' ? input.darkVariants[$inputRenderAs] : input.variants[$inputRenderAs];\n const topPosition = height / 2 - lineHeight / 2 - 1;\n const topPositionWhenActive = -topPosition - lineHeight / 2 - 1;\n\n const isBorderLessShape = $shape === 'borderLess';\n\n const backgroundColor = $isTransparent\n ? 'transparent'\n : colors[labelBackgroundColorName ?? 'WHITE'];\n\n return `\n position: absolute;\n top: ${topPosition}px;\n left: ${(isBorderLessShape ? 0 : paddingLeft) - gutter * 0.375}px;\n padding: 0 ${gutter * 0.375}px;\n background-color: ${backgroundColor};\n color: ${colors[labelColorName[$disabled ? 'disabled' : 'inactive']]};\n pointer-events: none;\n transform-origin: left;\n transform: translateY(${$stickyLabel ? topPositionWhenActive : 0}px) scale(${\n $stickyLabel ? 0.75 : 1\n });\n transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;\n\n ${Wrapper}:focus-within & {\n color: ${colors[labelColorName.active]};\n transform: translateY(${topPositionWhenActive}px) scale(0.75);\n }\n \n ${Wrapper}:hover & {\n ${!$disabled ? `color: ${colors[labelColorName.active]};` : ''}\n }\n\n & span {\n color: ${colors.RED};\n margin-left: 2px;\n }\n `;\n});\n\ninterface IErrorProps {\n $colorTheme?: IBaseInputProps['colorTheme'];\n}\n\nconst Error = styled(Text)<IErrorProps>(\n ({ theme: { colors }, $colorTheme }) => `\nposition: absolute;\nbottom: -2px;\ntransform: translateY(calc(100%));\ncolor: ${colors[$colorTheme === 'dark' ? 'ORANGE_4' : 'RED']};\n`,\n);\n\nexport { Container, Wrapper, InputWrapper, SiblingWrapper, Label, Error };\n"],"names":["Container","styled","theme","$size","$willShowMessage","$width","$widthX","height","marginTop","marginBottom","containerHeight","Wrapper","$renderAs","$disabled","$shape","$isTransparent","$colorTheme","colors","input","paddingLeft","paddingRight","borderRadius","borderColorName","backgroundColorName","isBorderLessShape","isCurvedShape","defaultBorderRadius","background","InputWrapper","SiblingWrapper","$inputRenderAs","$siblingPosition","iconPadding","labelColorName","Label","Text","$stickyLabel","text","layout","gutter","lineHeight","labelBackgroundColorName","topPosition","topPositionWhenActive","backgroundColor","Error"],"mappings":"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"}
|
|
@@ -1,60 +1,63 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as r, jsxs as l } from "react/jsx-runtime";
|
|
2
2
|
import { useTheme as z } from "styled-components";
|
|
3
|
-
import { Container as A, Wrapper as f, InputWrapper as L, Error as
|
|
4
|
-
const
|
|
3
|
+
import { Container as A, Wrapper as f, InputWrapper as L, Error as x, SiblingWrapper as y, Label as E } from "./base-input-styled.js";
|
|
4
|
+
const k = ($) => {
|
|
5
5
|
const {
|
|
6
6
|
label: t,
|
|
7
|
-
stickyLabel:
|
|
8
|
-
renderAs:
|
|
9
|
-
width:
|
|
7
|
+
stickyLabel: p,
|
|
8
|
+
renderAs: s,
|
|
9
|
+
width: c,
|
|
10
10
|
widthX: b,
|
|
11
|
-
disabled:
|
|
12
|
-
willShowMessage:
|
|
13
|
-
inputElement:
|
|
14
|
-
siblingElement:
|
|
15
|
-
siblingPosition:
|
|
11
|
+
disabled: i,
|
|
12
|
+
willShowMessage: m,
|
|
13
|
+
inputElement: u,
|
|
14
|
+
siblingElement: o,
|
|
15
|
+
siblingPosition: w,
|
|
16
16
|
size: e,
|
|
17
17
|
errorMessage: d,
|
|
18
|
-
mandatory:
|
|
18
|
+
mandatory: T,
|
|
19
19
|
shape: n,
|
|
20
|
-
isTransparent:
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
isTransparent: h = !1,
|
|
21
|
+
colorTheme: a
|
|
22
|
+
} = $, { input: g } = z();
|
|
23
|
+
return /* @__PURE__ */ r(A, { $width: c, $widthX: b, $size: e, $willShowMessage: m, children: /* @__PURE__ */ l(
|
|
23
24
|
f,
|
|
24
25
|
{
|
|
25
|
-
$renderAs:
|
|
26
|
+
$renderAs: s,
|
|
26
27
|
$size: e,
|
|
27
|
-
$disabled:
|
|
28
|
+
$disabled: i,
|
|
28
29
|
$shape: n,
|
|
29
|
-
$isTransparent:
|
|
30
|
+
$isTransparent: h,
|
|
31
|
+
$colorTheme: a,
|
|
30
32
|
children: [
|
|
31
|
-
/* @__PURE__ */
|
|
32
|
-
|
|
33
|
-
d && /* @__PURE__ */
|
|
33
|
+
/* @__PURE__ */ l(L, { children: [
|
|
34
|
+
u,
|
|
35
|
+
d && /* @__PURE__ */ r(x, { $renderAs: "body3", $colorTheme: a, children: d })
|
|
34
36
|
] }),
|
|
35
|
-
|
|
36
|
-
|
|
37
|
+
o ? /* @__PURE__ */ r(
|
|
38
|
+
y,
|
|
37
39
|
{
|
|
38
|
-
$inputRenderAs:
|
|
39
|
-
$disabled:
|
|
40
|
+
$inputRenderAs: s,
|
|
41
|
+
$disabled: i,
|
|
40
42
|
$size: e,
|
|
41
|
-
$siblingPosition:
|
|
42
|
-
children:
|
|
43
|
+
$siblingPosition: w ?? "right",
|
|
44
|
+
children: o
|
|
43
45
|
}
|
|
44
46
|
) : void 0,
|
|
45
|
-
t && n !== "curved" && /* @__PURE__ */
|
|
46
|
-
|
|
47
|
+
t && n !== "curved" && /* @__PURE__ */ l(
|
|
48
|
+
E,
|
|
47
49
|
{
|
|
48
50
|
$renderAs: g.sizes[e].labelTextVariant,
|
|
49
|
-
$inputRenderAs:
|
|
51
|
+
$inputRenderAs: s,
|
|
50
52
|
$size: e,
|
|
51
|
-
$stickyLabel:
|
|
52
|
-
$disabled:
|
|
53
|
+
$stickyLabel: p,
|
|
54
|
+
$disabled: i,
|
|
53
55
|
$shape: n,
|
|
54
|
-
$isTransparent:
|
|
56
|
+
$isTransparent: h,
|
|
57
|
+
$colorTheme: a,
|
|
55
58
|
children: [
|
|
56
59
|
t,
|
|
57
|
-
|
|
60
|
+
T && /* @__PURE__ */ r("span", { children: "*" })
|
|
58
61
|
]
|
|
59
62
|
}
|
|
60
63
|
)
|
|
@@ -63,6 +66,6 @@ const j = (p) => {
|
|
|
63
66
|
) });
|
|
64
67
|
};
|
|
65
68
|
export {
|
|
66
|
-
|
|
69
|
+
k as default
|
|
67
70
|
};
|
|
68
71
|
//# sourceMappingURL=base-input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-input.js","sources":["../../../../../src/features/ui/inputs/base-input/base-input.tsx"],"sourcesContent":["import type { IBaseInputProps } from './base-input-types';\n\nimport React from 'react';\nimport { useTheme } from 'styled-components';\n\nimport {\n Container,\n Error,\n InputWrapper,\n Label,\n SiblingWrapper,\n Wrapper,\n} from './base-input-styled';\n\nconst BaseInput: React.FC<IBaseInputProps> = props => {\n const {\n label,\n stickyLabel,\n renderAs,\n width,\n widthX,\n disabled,\n willShowMessage,\n inputElement,\n siblingElement,\n siblingPosition,\n size,\n errorMessage,\n mandatory,\n shape,\n isTransparent = false,\n } = props;\n const { input } = useTheme();\n const showLabel = label && shape !== 'curved';\n\n return (\n <Container $width={width} $widthX={widthX} $size={size} $willShowMessage={willShowMessage}>\n <Wrapper\n $renderAs={renderAs}\n $size={size}\n $disabled={disabled}\n $shape={shape}\n $isTransparent={isTransparent}\n >\n <InputWrapper>\n {inputElement}\n {errorMessage && <Error $renderAs=\"body3\"
|
|
1
|
+
{"version":3,"file":"base-input.js","sources":["../../../../../src/features/ui/inputs/base-input/base-input.tsx"],"sourcesContent":["import type { IBaseInputProps } from './base-input-types';\n\nimport React from 'react';\nimport { useTheme } from 'styled-components';\n\nimport {\n Container,\n Error,\n InputWrapper,\n Label,\n SiblingWrapper,\n Wrapper,\n} from './base-input-styled';\n\nconst BaseInput: React.FC<IBaseInputProps> = props => {\n const {\n label,\n stickyLabel,\n renderAs,\n width,\n widthX,\n disabled,\n willShowMessage,\n inputElement,\n siblingElement,\n siblingPosition,\n size,\n errorMessage,\n mandatory,\n shape,\n isTransparent = false,\n colorTheme,\n } = props;\n const { input } = useTheme();\n const showLabel = label && shape !== 'curved';\n\n return (\n <Container $width={width} $widthX={widthX} $size={size} $willShowMessage={willShowMessage}>\n <Wrapper\n $renderAs={renderAs}\n $size={size}\n $disabled={disabled}\n $shape={shape}\n $isTransparent={isTransparent}\n $colorTheme={colorTheme}\n >\n <InputWrapper>\n {inputElement}\n {errorMessage && (\n <Error $renderAs=\"body3\" $colorTheme={colorTheme}>\n {errorMessage}\n </Error>\n )}\n </InputWrapper>\n {siblingElement ? (\n <SiblingWrapper\n $inputRenderAs={renderAs}\n $disabled={disabled}\n $size={size}\n $siblingPosition={siblingPosition ?? 'right'}\n >\n {siblingElement}\n </SiblingWrapper>\n ) : undefined}\n {showLabel && (\n <Label\n $renderAs={input.sizes[size].labelTextVariant}\n $inputRenderAs={renderAs}\n $size={size}\n $stickyLabel={stickyLabel}\n $disabled={disabled}\n $shape={shape}\n $isTransparent={isTransparent}\n $colorTheme={colorTheme}\n >\n {label}\n {mandatory && <span>*</span>}\n </Label>\n )}\n </Wrapper>\n </Container>\n );\n};\n\nexport default BaseInput;\n"],"names":["BaseInput","props","label","stickyLabel","renderAs","width","widthX","disabled","willShowMessage","inputElement","siblingElement","siblingPosition","size","errorMessage","mandatory","shape","isTransparent","colorTheme","input","useTheme","jsx","Container","jsxs","Wrapper","InputWrapper","Error","SiblingWrapper","Label"],"mappings":";;;AAcA,MAAMA,IAAuC,CAASC,MAAA;AAC9C,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,YAAAC;AAAA,EACE,IAAAhB,GACE,EAAE,OAAAiB,MAAUC;AAIhB,SAAA,gBAAAC,EAACC,KAAU,QAAQhB,GAAO,SAASC,GAAQ,OAAOM,GAAM,kBAAkBJ,GACxE,UAAA,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWnB;AAAA,MACX,OAAOQ;AAAA,MACP,WAAWL;AAAA,MACX,QAAQQ;AAAA,MACR,gBAAgBC;AAAA,MAChB,aAAaC;AAAA,MAEb,UAAA;AAAA,QAAA,gBAAAK,EAACE,GACE,EAAA,UAAA;AAAA,UAAAf;AAAA,UACAI,KACE,gBAAAO,EAAAK,GAAA,EAAM,WAAU,SAAQ,aAAaR,GACnC,UACHJ,GAAA;AAAA,QAAA,GAEJ;AAAA,QACCH,IACC,gBAAAU;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,gBAAgBtB;AAAA,YAChB,WAAWG;AAAA,YACX,OAAOK;AAAA,YACP,kBAAkBD,KAAmB;AAAA,YAEpC,UAAAD;AAAA,UAAA;AAAA,QAED,IAAA;AAAA,QA7BQR,KAASa,MAAU,YA+B7B,gBAAAO;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,WAAWT,EAAM,MAAMN,CAAI,EAAE;AAAA,YAC7B,gBAAgBR;AAAA,YAChB,OAAOQ;AAAA,YACP,cAAcT;AAAA,YACd,WAAWI;AAAA,YACX,QAAQQ;AAAA,YACR,gBAAgBC;AAAA,YAChB,aAAaC;AAAA,YAEZ,UAAA;AAAA,cAAAf;AAAA,cACAY,KAAc,gBAAAM,EAAA,QAAA,EAAK,UAAC,IAAA,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACvB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN,EAAA,CAAA;AAEJ;"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import g from "styled-components";
|
|
2
|
+
const x = g.input(
|
|
3
|
+
({ theme: p, $size: s, $renderAs: a, $isTransparent: d, $colorTheme: u }) => {
|
|
4
|
+
const { colors: o, input: t, text: $ } = p, { valueColorName: n, labelColorName: r, backgroundColorName: b } = u === "dark" ? t.darkVariants[a] : t.variants[a], { inputTextVariant: h } = t.sizes[s], { fontFamily: i, fontSize: l, lineHeight: c, letterSpacing: e } = $[h], f = d ? "transparent" : o[b ?? "WHITE"];
|
|
5
|
+
return `
|
|
5
6
|
position: relative;
|
|
6
7
|
width: 100%;
|
|
7
8
|
height: 100%;
|
|
@@ -10,24 +11,24 @@ const m = f.input(({ theme: c, $size: p, $renderAs: s, $isTransparent: d }) => {
|
|
|
10
11
|
outline: none;
|
|
11
12
|
|
|
12
13
|
font-family: ${i};
|
|
13
|
-
font-size: ${
|
|
14
|
-
line-height: ${
|
|
15
|
-
${typeof
|
|
14
|
+
font-size: ${l}px;
|
|
15
|
+
line-height: ${c}px;
|
|
16
|
+
${typeof e == "number" ? `letter-spacing: ${e}px;` : ""}
|
|
16
17
|
|
|
17
18
|
|
|
18
|
-
background-color: ${
|
|
19
|
-
color: ${
|
|
19
|
+
background-color: ${f};
|
|
20
|
+
color: ${o[n.inactive]};
|
|
20
21
|
|
|
21
22
|
&::placeholder {
|
|
22
|
-
color: ${
|
|
23
|
+
color: ${o[r.inactive]};
|
|
23
24
|
font-family: ${i};
|
|
24
|
-
font-size: ${
|
|
25
|
-
line-height: ${
|
|
26
|
-
${typeof
|
|
25
|
+
font-size: ${l}px;
|
|
26
|
+
line-height: ${c}px;
|
|
27
|
+
${typeof e == "number" ? `letter-spacing: ${e}px;` : ""}
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
&:hover, &:focus {
|
|
30
|
-
color: ${
|
|
31
|
+
color: ${o[n.active]};
|
|
31
32
|
}
|
|
32
33
|
|
|
33
34
|
&:read-only {
|
|
@@ -35,16 +36,16 @@ const m = f.input(({ theme: c, $size: p, $renderAs: s, $isTransparent: d }) => {
|
|
|
35
36
|
}
|
|
36
37
|
|
|
37
38
|
&:disabled {
|
|
38
|
-
color: ${
|
|
39
|
+
color: ${o[n.disabled]};
|
|
39
40
|
cursor: not-allowed;
|
|
40
41
|
|
|
41
42
|
&::placeholder {
|
|
42
|
-
color: ${
|
|
43
|
+
color: ${o[r.disabled]};
|
|
43
44
|
}
|
|
44
45
|
}
|
|
45
46
|
|
|
46
47
|
&:hover:not([disabled, focused])::placeholder {
|
|
47
|
-
color: ${
|
|
48
|
+
color: ${o[r.active]};
|
|
48
49
|
}
|
|
49
50
|
|
|
50
51
|
&:focus::placeholder {
|
|
@@ -57,12 +58,13 @@ const m = f.input(({ theme: c, $size: p, $renderAs: s, $isTransparent: d }) => {
|
|
|
57
58
|
margin: 0;
|
|
58
59
|
}
|
|
59
60
|
&[type="date"]:not(:placeholder-shown){
|
|
60
|
-
color: ${
|
|
61
|
+
color: ${o.BLACK_T_60};
|
|
61
62
|
text-transform: uppercase;
|
|
62
63
|
}
|
|
63
64
|
`;
|
|
64
|
-
}
|
|
65
|
+
}
|
|
66
|
+
);
|
|
65
67
|
export {
|
|
66
|
-
|
|
68
|
+
x as Input
|
|
67
69
|
};
|
|
68
70
|
//# sourceMappingURL=text-input-styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-input-styled.js","sources":["../../../../../src/features/ui/inputs/text-input/text-input-styled.ts"],"sourcesContent":["import type { IBaseInputProps } from '../base-input/base-input-types';\nimport type { ITextInputProps } from './text-input-types';\n\nimport styled from 'styled-components';\n\ninterface IInputProps {\n $renderAs: ITextInputProps['renderAs'];\n $size: IBaseInputProps['size'];\n $isTransparent?: IBaseInputProps['isTransparent'];\n}\n\nconst Input = styled.input<IInputProps>(({ theme, $size, $renderAs, $isTransparent }) => {\n
|
|
1
|
+
{"version":3,"file":"text-input-styled.js","sources":["../../../../../src/features/ui/inputs/text-input/text-input-styled.ts"],"sourcesContent":["import type { IBaseInputProps } from '../base-input/base-input-types';\nimport type { ITextInputProps } from './text-input-types';\n\nimport styled from 'styled-components';\n\ninterface IInputProps {\n $renderAs: ITextInputProps['renderAs'];\n $size: IBaseInputProps['size'];\n $isTransparent?: IBaseInputProps['isTransparent'];\n $colorTheme?: IBaseInputProps['colorTheme'];\n}\n\nconst Input = styled.input<IInputProps>(\n ({ theme, $size, $renderAs, $isTransparent, $colorTheme }) => {\n const { colors, input, text } = theme;\n const { valueColorName, labelColorName, backgroundColorName } =\n $colorTheme === 'dark' ? input.darkVariants[$renderAs] : input.variants[$renderAs];\n const { inputTextVariant } = input.sizes[$size];\n const { fontFamily, fontSize, lineHeight, letterSpacing } = text[inputTextVariant];\n const background = $isTransparent ? 'transparent' : colors[backgroundColorName ?? 'WHITE'];\n\n return `\n position: relative;\n width: 100%;\n height: 100%;\n border: 0;\n padding: 0;\n outline: none;\n\n font-family: ${fontFamily};\n font-size: ${fontSize}px;\n line-height: ${lineHeight}px;\n ${typeof letterSpacing === 'number' ? `letter-spacing: ${letterSpacing}px;` : ''}\n\n \n background-color: ${background};\n color: ${colors[valueColorName.inactive]};\n \n &::placeholder {\n color: ${colors[labelColorName.inactive]};\n font-family: ${fontFamily};\n font-size: ${fontSize}px;\n line-height: ${lineHeight}px;\n ${typeof letterSpacing === 'number' ? `letter-spacing: ${letterSpacing}px;` : ''}\n }\n\n &:hover, &:focus {\n color: ${colors[valueColorName.active]};\n }\n\n &:read-only {\n cursor: pointer;\n }\n \n &:disabled {\n color: ${colors[valueColorName.disabled]};\n cursor: not-allowed;\n\n &::placeholder {\n color: ${colors[labelColorName.disabled]};\n }\n }\n \n &:hover:not([disabled, focused])::placeholder {\n color: ${colors[labelColorName.active]};\n }\n\n &:focus::placeholder {\n color: transparent;\n }\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n &[type=\"date\"]:not(:placeholder-shown){\n color: ${colors.BLACK_T_60};\n text-transform: uppercase;\n }\n `;\n },\n);\n\nexport { Input };\n"],"names":["Input","styled","theme","$size","$renderAs","$isTransparent","$colorTheme","colors","input","text","valueColorName","labelColorName","backgroundColorName","inputTextVariant","fontFamily","fontSize","lineHeight","letterSpacing","background"],"mappings":";AAYA,MAAMA,IAAQC,EAAO;AAAA,EACnB,CAAC,EAAE,OAAAC,GAAO,OAAAC,GAAO,WAAAC,GAAW,gBAAAC,GAAgB,aAAAC,QAAkB;AAC5D,UAAM,EAAE,QAAAC,GAAQ,OAAAC,GAAO,MAAAC,EAAA,IAASP,GAC1B,EAAE,gBAAAQ,GAAgB,gBAAAC,GAAgB,qBAAAC,EACtC,IAAAN,MAAgB,SAASE,EAAM,aAAaJ,CAAS,IAAII,EAAM,SAASJ,CAAS,GAC7E,EAAE,kBAAAS,EAAqB,IAAAL,EAAM,MAAML,CAAK,GACxC,EAAE,YAAAW,GAAY,UAAAC,GAAU,YAAAC,GAAY,eAAAC,MAAkBR,EAAKI,CAAgB,GAC3EK,IAAab,IAAiB,gBAAgBE,EAAOK,KAAuB,OAAO;AAElF,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQQE,CAAU;AAAA,iBACZC,CAAQ;AAAA,mBACNC,CAAU;AAAA,MACvB,OAAOC,KAAkB,WAAW,mBAAmBA,CAAa,QAAQ,EAAE;AAAA;AAAA;AAAA,wBAG5DC,CAAU;AAAA,aACrBX,EAAOG,EAAe,QAAQ,CAAC;AAAA;AAAA;AAAA,eAG7BH,EAAOI,EAAe,QAAQ,CAAC;AAAA,qBACzBG,CAAU;AAAA,mBACZC,CAAQ;AAAA,qBACNC,CAAU;AAAA,QACvB,OAAOC,KAAkB,WAAW,mBAAmBA,CAAa,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,eAIvEV,EAAOG,EAAe,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQ7BH,EAAOG,EAAe,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,iBAI7BH,EAAOI,EAAe,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjCJ,EAAOI,EAAe,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAa7BJ,EAAO,UAAU;AAAA;AAAA;AAAA;AAAA,EAI9B;AACF;"}
|
|
@@ -1,55 +1,58 @@
|
|
|
1
1
|
import { jsx as a } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import
|
|
4
|
-
import { Input as
|
|
5
|
-
const i = "regular",
|
|
2
|
+
import { forwardRef as I } from "react";
|
|
3
|
+
import $ from "../base-input/base-input.js";
|
|
4
|
+
import { Input as b } from "./text-input-styled.js";
|
|
5
|
+
const i = "regular", g = I((l, p) => {
|
|
6
6
|
const {
|
|
7
7
|
type: e,
|
|
8
|
-
label:
|
|
9
|
-
value:
|
|
10
|
-
renderAs:
|
|
11
|
-
width:
|
|
12
|
-
widthX:
|
|
8
|
+
label: m,
|
|
9
|
+
value: r,
|
|
10
|
+
renderAs: t,
|
|
11
|
+
width: u,
|
|
12
|
+
widthX: d,
|
|
13
13
|
disabled: s,
|
|
14
|
-
willShowMessage:
|
|
14
|
+
willShowMessage: c,
|
|
15
15
|
siblingElement: f,
|
|
16
|
-
errorMessage:
|
|
17
|
-
shape:
|
|
18
|
-
isTransparent:
|
|
19
|
-
|
|
20
|
-
|
|
16
|
+
errorMessage: h,
|
|
17
|
+
shape: T,
|
|
18
|
+
isTransparent: o,
|
|
19
|
+
colorTheme: n,
|
|
20
|
+
...w
|
|
21
|
+
} = l;
|
|
21
22
|
return /* @__PURE__ */ a(
|
|
22
|
-
|
|
23
|
+
$,
|
|
23
24
|
{
|
|
24
|
-
renderAs:
|
|
25
|
-
label:
|
|
26
|
-
stickyLabel: !!
|
|
27
|
-
width:
|
|
28
|
-
widthX:
|
|
25
|
+
renderAs: t,
|
|
26
|
+
label: m,
|
|
27
|
+
stickyLabel: !!r || e === "date",
|
|
28
|
+
width: u,
|
|
29
|
+
widthX: d,
|
|
29
30
|
disabled: s,
|
|
30
|
-
willShowMessage:
|
|
31
|
+
willShowMessage: c,
|
|
31
32
|
size: i,
|
|
32
|
-
shape:
|
|
33
|
-
errorMessage:
|
|
34
|
-
isTransparent:
|
|
33
|
+
shape: T,
|
|
34
|
+
errorMessage: h,
|
|
35
|
+
isTransparent: o,
|
|
36
|
+
colorTheme: n,
|
|
35
37
|
inputElement: /* @__PURE__ */ a(
|
|
36
|
-
|
|
38
|
+
b,
|
|
37
39
|
{
|
|
38
40
|
ref: p,
|
|
39
41
|
type: e,
|
|
40
|
-
value:
|
|
41
|
-
$renderAs:
|
|
42
|
+
value: r ?? "",
|
|
43
|
+
$renderAs: t,
|
|
42
44
|
$size: i,
|
|
43
45
|
disabled: s,
|
|
44
|
-
$isTransparent:
|
|
45
|
-
|
|
46
|
+
$isTransparent: o,
|
|
47
|
+
$colorTheme: n,
|
|
48
|
+
...w
|
|
46
49
|
}
|
|
47
50
|
),
|
|
48
51
|
siblingElement: f
|
|
49
52
|
}
|
|
50
53
|
);
|
|
51
|
-
}),
|
|
54
|
+
}), z = g;
|
|
52
55
|
export {
|
|
53
|
-
|
|
56
|
+
z as default
|
|
54
57
|
};
|
|
55
58
|
//# sourceMappingURL=text-input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-input.js","sources":["../../../../../src/features/ui/inputs/text-input/text-input.tsx"],"sourcesContent":["import type { ITextInputProps } from './text-input-types';\nimport type { Ref } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport BaseInput from '../base-input/base-input';\nimport * as Styled from './text-input-styled';\n\nconst SIZE = 'regular';\n\nconst TextInput = forwardRef((props: ITextInputProps, ref: Ref<HTMLInputElement>) => {\n const {\n type,\n label,\n value,\n renderAs,\n width,\n widthX,\n disabled,\n willShowMessage,\n siblingElement,\n errorMessage,\n shape,\n isTransparent,\n ...rest\n } = props;\n\n return (\n <BaseInput\n renderAs={renderAs}\n label={label}\n stickyLabel={!!value || type === 'date'}\n width={width}\n widthX={widthX}\n disabled={disabled}\n willShowMessage={willShowMessage}\n size={SIZE}\n shape={shape}\n errorMessage={errorMessage}\n isTransparent={isTransparent}\n inputElement={\n <Styled.Input\n ref={ref}\n type={type}\n value={value ?? ''}\n $renderAs={renderAs}\n $size={SIZE}\n disabled={disabled}\n $isTransparent={isTransparent}\n {...rest}\n />\n }\n siblingElement={siblingElement}\n />\n );\n});\n\nexport default TextInput;\n"],"names":["SIZE","TextInput","forwardRef","props","ref","type","label","value","renderAs","width","widthX","disabled","willShowMessage","siblingElement","errorMessage","shape","isTransparent","rest","jsx","BaseInput","Styled.Input","TextInput$1"],"mappings":";;;;AAQA,MAAMA,IAAO,WAEPC,IAAYC,EAAW,CAACC,GAAwBC,MAA+B;AAC7E,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,GAAGC;AAAA,EACD,
|
|
1
|
+
{"version":3,"file":"text-input.js","sources":["../../../../../src/features/ui/inputs/text-input/text-input.tsx"],"sourcesContent":["import type { ITextInputProps } from './text-input-types';\nimport type { Ref } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport BaseInput from '../base-input/base-input';\nimport * as Styled from './text-input-styled';\n\nconst SIZE = 'regular';\n\nconst TextInput = forwardRef((props: ITextInputProps, ref: Ref<HTMLInputElement>) => {\n const {\n type,\n label,\n value,\n renderAs,\n width,\n widthX,\n disabled,\n willShowMessage,\n siblingElement,\n errorMessage,\n shape,\n isTransparent,\n colorTheme,\n ...rest\n } = props;\n\n return (\n <BaseInput\n renderAs={renderAs}\n label={label}\n stickyLabel={!!value || type === 'date'}\n width={width}\n widthX={widthX}\n disabled={disabled}\n willShowMessage={willShowMessage}\n size={SIZE}\n shape={shape}\n errorMessage={errorMessage}\n isTransparent={isTransparent}\n colorTheme={colorTheme}\n inputElement={\n <Styled.Input\n ref={ref}\n type={type}\n value={value ?? ''}\n $renderAs={renderAs}\n $size={SIZE}\n disabled={disabled}\n $isTransparent={isTransparent}\n $colorTheme={colorTheme}\n {...rest}\n />\n }\n siblingElement={siblingElement}\n />\n );\n});\n\nexport default TextInput;\n"],"names":["SIZE","TextInput","forwardRef","props","ref","type","label","value","renderAs","width","widthX","disabled","willShowMessage","siblingElement","errorMessage","shape","isTransparent","colorTheme","rest","jsx","BaseInput","Styled.Input","TextInput$1"],"mappings":";;;;AAQA,MAAMA,IAAO,WAEPC,IAAYC,EAAW,CAACC,GAAwBC,MAA+B;AAC7E,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAf;AAGF,SAAA,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAAZ;AAAA,MACA,OAAAF;AAAA,MACA,aAAa,CAAC,CAACC,KAASF,MAAS;AAAA,MACjC,OAAAI;AAAA,MACA,QAAAC;AAAA,MACA,UAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,MAAMZ;AAAA,MACN,OAAAe;AAAA,MACA,cAAAD;AAAA,MACA,eAAAE;AAAA,MACA,YAAAC;AAAA,MACA,cACE,gBAAAE;AAAA,QAACE;AAAAA,QAAA;AAAA,UACC,KAAAjB;AAAA,UACA,MAAAC;AAAA,UACA,OAAOE,KAAS;AAAA,UAChB,WAAWC;AAAA,UACX,OAAOR;AAAA,UACP,UAAAW;AAAA,UACA,gBAAgBK;AAAA,UAChB,aAAaC;AAAA,UACZ,GAAGC;AAAA,QAAA;AAAA,MACN;AAAA,MAEF,gBAAAL;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC,GAEDS,IAAerB;"}
|