@activecollab/components 2.0.96 → 2.0.98
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/cjs/components/Input/Styles.js +5 -3
- package/dist/cjs/components/Input/Styles.js.map +1 -1
- package/dist/esm/components/Input/Styles.d.ts.map +1 -1
- package/dist/esm/components/Input/Styles.js +2 -2
- package/dist/esm/components/Input/Styles.js.map +1 -1
- package/dist/index.js +5 -3
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -12,8 +12,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
12
12
|
var StyledInputWrapper = exports.StyledInputWrapper = _styledComponents.default.div.withConfig({
|
|
13
13
|
displayName: "Styles__StyledInputWrapper",
|
|
14
14
|
componentId: "sc-ce8kcp-0"
|
|
15
|
-
})(["align-items:center;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
|
|
16
|
-
return props.$mode === "
|
|
15
|
+
})(["align-items:center;background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
|
|
16
|
+
return props.$mode === "flat" && (0, _styledComponents.css)(["background-color:transparent;border:none;border-radius:none;"]);
|
|
17
17
|
}, function (props) {
|
|
18
18
|
return props.$size === "small" && (0, _styledComponents.css)(["border-radius:6px;height:24px;"]);
|
|
19
19
|
}, function (props) {
|
|
@@ -31,7 +31,9 @@ StyledInputWrapper.displayName = "StyledInputWrapper";
|
|
|
31
31
|
var StyledInput = exports.StyledInput = _styledComponents.default.input.withConfig({
|
|
32
32
|
displayName: "Styles__StyledInput",
|
|
33
33
|
componentId: "sc-ce8kcp-1"
|
|
34
|
-
})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100
|
|
34
|
+
})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;", " &::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", " ", " ", ""], function (props) {
|
|
35
|
+
return props.$mode === "flat" && (0, _styledComponents.css)(["background-color:transparent;"]);
|
|
36
|
+
}, function (props) {
|
|
35
37
|
return props.$size === "big" && (0, _styledComponents.css)(["font-size:1rem;"]);
|
|
36
38
|
}, function (props) {
|
|
37
39
|
return props.$size === "biggest" && (0, _styledComponents.css)(["font-size:1.25rem;font-weight:700;"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledInputWrapper","exports","styled","div","withConfig","displayName","componentId","FontStyle","BoxSizingStyle","props","$mode","css","$size","$disabled","$invalid","StyledInput","input","disabled","$loading","align","StyledPasswordIndicatorWrapper","StyledPasswordIndicator","$strength","$index","StyledInputSelectTrigger"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputProps } from \"./Input\";\nimport { InputMode, InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n $size?: InputSize;\n $invalid?: boolean;\n $disabled?: boolean;\n $mode?: InputMode;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n align-items: center;\n
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledInputWrapper","exports","styled","div","withConfig","displayName","componentId","FontStyle","BoxSizingStyle","props","$mode","css","$size","$disabled","$invalid","StyledInput","input","disabled","$loading","align","StyledPasswordIndicatorWrapper","StyledPasswordIndicator","$strength","$index","StyledInputSelectTrigger"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputProps } from \"./Input\";\nimport { InputMode, InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n $size?: InputSize;\n $invalid?: boolean;\n $disabled?: boolean;\n $mode?: InputMode;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n align-items: center;\n background-color: var(--input-background-color);\n border-color: var(--color-theme-500);\n border-radius: 8px;\n border-style: solid;\n border-width: 1px;\n cursor: text;\n display: flex;\n height: 32px;\n padding-block: 4px;\n padding-inline: 4px;\n transition: all 0.3s ease;\n width: 360px;\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n\n ${(props) =>\n props.$mode === \"flat\" &&\n css`\n background-color: transparent;\n border: none;\n border-radius: none;\n `}\n\n\n ${(props) =>\n props.$size === \"small\" &&\n css`\n border-radius: 6px;\n height: 24px;\n `}\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n height: 48px;\n `}\n\n ${(props) =>\n props.$disabled &&\n css`\n cursor: default;\n opacity: 50%;\n `}\n\n ${(props) =>\n !props.$disabled &&\n !props.$invalid &&\n css`\n &:focus-within,\n &:hover {\n border-color: var(--color-primary);\n }\n `}\n\n ${(props) =>\n !props.$disabled &&\n props.$invalid &&\n props.$mode === \"outlined\" &&\n css`\n border-color: var(--red-alert);\n `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps extends Pick<InputProps, \"align\"> {\n $size?: InputSize;\n $loading?: boolean;\n $mode?: InputMode;\n $invalid?: boolean;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n background-color: var(--input-background-color);\n border: none;\n color: var(--color-theme-900);\n /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n font-size: 0.875rem;\n font-weight: 400;\n letter-spacing: 0.02em;\n margin-block: 0;\n margin-inline: 4px;\n outline: none;\n padding: 0;\n width: 100%;\n\n ${(props) =>\n props.$mode === \"flat\" &&\n css`\n background-color: transparent;\n `}\n\n &::placeholder {\n color: var(--color-theme-transparent-500);\n }\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n font-size: 1rem;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n font-size: 1.25rem;\n font-weight: 700;\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n `}\n\n ${(props) =>\n props.$loading &&\n css`\n cursor: progress;\n `}\n\n ${(props) =>\n props.align &&\n css`\n text-align: ${props.align};\n `}\n\n ${(props) =>\n props.$mode === \"flat\" &&\n props.$invalid &&\n css`\n color: var(--red-alert);\n `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledPasswordIndicatorWrapper = styled.div`\n display: flex;\n gap: 2px;\n margin-top: 6px;\n margin-bottom: 4px;\n`;\n\nStyledPasswordIndicatorWrapper.displayName = \"StyledPasswordIndicatorWrapper\";\n\nexport const StyledPasswordIndicator = styled.div<{\n $strength: number;\n $index: number;\n}>`\n width: 100%;\n height: 4px;\n border-radius: 6px;\n background-color: ${(props) => {\n const { $strength, $index } = props;\n\n if ($strength === 0) {\n return \"var(--color-theme-300)\";\n } else if ($strength === 1) {\n return $index === 0 ? \"var(--red-alert)\" : \"var(--color-theme-300)\";\n } else if ($strength === 2) {\n return $index < 2 ? \"var(--color-orange)\" : \"var(--color-theme-300)\";\n } else if ($strength === 3) {\n return $index < 3 ? \"var(--color-blue-sky)\" : \"var(--color-theme-300)\";\n } else {\n return \"var(--color-sucess-green)\";\n }\n }};\n`;\n\nStyledPasswordIndicator.displayName = \"StyledPasswordIndicator\";\n\nexport const StyledInputSelectTrigger = styled.div<{\n $size: string;\n $disabled: boolean;\n}>`\n display: flex;\n gap: 6px;\n align-items: center;\n margin-right: 2px;\n margin-left: 8px;\n color: var(--color-theme-700);\n font-weight: 400;\n letter-spacing: 0.02em;\n font-size: 0.875rem;\n flex-shrink: 0;\n cursor: ${(props) => {\n if (props.$disabled) {\n return \"unset\";\n }\n return \"pointer\";\n }};\n\n pointer-events: ${(props) => {\n if (props.$disabled) {\n return \"none\";\n }\n return \"unset\";\n }};\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n font-size: 1rem;\n `}\n`;\n\nStyledInputSelectTrigger.displayName = \"StyledInputSelectTrigger\";\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAI/C,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB,
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAI/C,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB,yFAuE9B,CAAC;AAIF,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,oFA6DvB,CAAC;AAIF,eAAO,MAAM,8BAA8B,oEAK1C,CAAC;AAIF,eAAO,MAAM,uBAAuB;eACvB,MAAM;YACT,MAAM;SAoBf,CAAC;AAIF,eAAO,MAAM,wBAAwB;WAC5B,MAAM;eACF,OAAO;SA+BnB,CAAC"}
|
|
@@ -4,12 +4,12 @@ import { FontStyle } from "../FontStyle";
|
|
|
4
4
|
export const StyledInputWrapper = styled.div.withConfig({
|
|
5
5
|
displayName: "Styles__StyledInputWrapper",
|
|
6
6
|
componentId: "sc-ce8kcp-0"
|
|
7
|
-
})(["align-items:center;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, props => props.$mode === "
|
|
7
|
+
})(["align-items:center;background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, props => props.$mode === "flat" && css(["background-color:transparent;border:none;border-radius:none;"]), props => props.$size === "small" && css(["border-radius:6px;height:24px;"]), props => props.$size === "big" && css(["height:40px;"]), props => props.$size === "biggest" && css(["height:48px;"]), props => props.$disabled && css(["cursor:default;opacity:50%;"]), props => !props.$disabled && !props.$invalid && css(["&:focus-within,&:hover{border-color:var(--color-primary);}"]), props => !props.$disabled && props.$invalid && props.$mode === "outlined" && css(["border-color:var(--red-alert);"]));
|
|
8
8
|
StyledInputWrapper.displayName = "StyledInputWrapper";
|
|
9
9
|
export const StyledInput = styled.input.withConfig({
|
|
10
10
|
displayName: "Styles__StyledInput",
|
|
11
11
|
componentId: "sc-ce8kcp-1"
|
|
12
|
-
})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100
|
|
12
|
+
})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;", " &::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", " ", " ", ""], props => props.$mode === "flat" && css(["background-color:transparent;"]), props => props.$size === "big" && css(["font-size:1rem;"]), props => props.$size === "biggest" && css(["font-size:1.25rem;font-weight:700;"]), props => props.disabled && css(["cursor:default;"]), props => props.$loading && css(["cursor:progress;"]), props => props.align && css(["text-align:", ";"], props.align), props => props.$mode === "flat" && props.$invalid && css(["color:var(--red-alert);"]));
|
|
13
13
|
StyledInput.displayName = "StyledInput";
|
|
14
14
|
export const StyledPasswordIndicatorWrapper = styled.div.withConfig({
|
|
15
15
|
displayName: "Styles__StyledPasswordIndicatorWrapper",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledInputWrapper","div","withConfig","displayName","componentId","props","$mode","$size","$disabled","$invalid","StyledInput","input","disabled","$loading","align","StyledPasswordIndicatorWrapper","StyledPasswordIndicator","$strength","$index","StyledInputSelectTrigger"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputProps } from \"./Input\";\nimport { InputMode, InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n $size?: InputSize;\n $invalid?: boolean;\n $disabled?: boolean;\n $mode?: InputMode;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n align-items: center;\n
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledInputWrapper","div","withConfig","displayName","componentId","props","$mode","$size","$disabled","$invalid","StyledInput","input","disabled","$loading","align","StyledPasswordIndicatorWrapper","StyledPasswordIndicator","$strength","$index","StyledInputSelectTrigger"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputProps } from \"./Input\";\nimport { InputMode, InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n $size?: InputSize;\n $invalid?: boolean;\n $disabled?: boolean;\n $mode?: InputMode;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n align-items: center;\n background-color: var(--input-background-color);\n border-color: var(--color-theme-500);\n border-radius: 8px;\n border-style: solid;\n border-width: 1px;\n cursor: text;\n display: flex;\n height: 32px;\n padding-block: 4px;\n padding-inline: 4px;\n transition: all 0.3s ease;\n width: 360px;\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n\n ${(props) =>\n props.$mode === \"flat\" &&\n css`\n background-color: transparent;\n border: none;\n border-radius: none;\n `}\n\n\n ${(props) =>\n props.$size === \"small\" &&\n css`\n border-radius: 6px;\n height: 24px;\n `}\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n height: 48px;\n `}\n\n ${(props) =>\n props.$disabled &&\n css`\n cursor: default;\n opacity: 50%;\n `}\n\n ${(props) =>\n !props.$disabled &&\n !props.$invalid &&\n css`\n &:focus-within,\n &:hover {\n border-color: var(--color-primary);\n }\n `}\n\n ${(props) =>\n !props.$disabled &&\n props.$invalid &&\n props.$mode === \"outlined\" &&\n css`\n border-color: var(--red-alert);\n `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps extends Pick<InputProps, \"align\"> {\n $size?: InputSize;\n $loading?: boolean;\n $mode?: InputMode;\n $invalid?: boolean;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n background-color: var(--input-background-color);\n border: none;\n color: var(--color-theme-900);\n /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n font-size: 0.875rem;\n font-weight: 400;\n letter-spacing: 0.02em;\n margin-block: 0;\n margin-inline: 4px;\n outline: none;\n padding: 0;\n width: 100%;\n\n ${(props) =>\n props.$mode === \"flat\" &&\n css`\n background-color: transparent;\n `}\n\n &::placeholder {\n color: var(--color-theme-transparent-500);\n }\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n font-size: 1rem;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n font-size: 1.25rem;\n font-weight: 700;\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n `}\n\n ${(props) =>\n props.$loading &&\n css`\n cursor: progress;\n `}\n\n ${(props) =>\n props.align &&\n css`\n text-align: ${props.align};\n `}\n\n ${(props) =>\n props.$mode === \"flat\" &&\n props.$invalid &&\n css`\n color: var(--red-alert);\n `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledPasswordIndicatorWrapper = styled.div`\n display: flex;\n gap: 2px;\n margin-top: 6px;\n margin-bottom: 4px;\n`;\n\nStyledPasswordIndicatorWrapper.displayName = \"StyledPasswordIndicatorWrapper\";\n\nexport const StyledPasswordIndicator = styled.div<{\n $strength: number;\n $index: number;\n}>`\n width: 100%;\n height: 4px;\n border-radius: 6px;\n background-color: ${(props) => {\n const { $strength, $index } = props;\n\n if ($strength === 0) {\n return \"var(--color-theme-300)\";\n } else if ($strength === 1) {\n return $index === 0 ? \"var(--red-alert)\" : \"var(--color-theme-300)\";\n } else if ($strength === 2) {\n return $index < 2 ? \"var(--color-orange)\" : \"var(--color-theme-300)\";\n } else if ($strength === 3) {\n return $index < 3 ? \"var(--color-blue-sky)\" : \"var(--color-theme-300)\";\n } else {\n return \"var(--color-sucess-green)\";\n }\n }};\n`;\n\nStyledPasswordIndicator.displayName = \"StyledPasswordIndicator\";\n\nexport const StyledInputSelectTrigger = styled.div<{\n $size: string;\n $disabled: boolean;\n}>`\n display: flex;\n gap: 6px;\n align-items: center;\n margin-right: 2px;\n margin-left: 8px;\n color: var(--color-theme-700);\n font-weight: 400;\n letter-spacing: 0.02em;\n font-size: 0.875rem;\n flex-shrink: 0;\n cursor: ${(props) => {\n if (props.$disabled) {\n return \"unset\";\n }\n return \"pointer\";\n }};\n\n pointer-events: ${(props) => {\n if (props.$disabled) {\n return \"none\";\n }\n return \"unset\";\n }};\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n font-size: 1rem;\n `}\n`;\n\nStyledInputSelectTrigger.displayName = \"StyledInputSelectTrigger\";\n"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -11527,8 +11527,8 @@
|
|
|
11527
11527
|
var StyledInputWrapper = styled__default["default"].div.withConfig({
|
|
11528
11528
|
displayName: "Styles__StyledInputWrapper",
|
|
11529
11529
|
componentId: "sc-ce8kcp-0"
|
|
11530
|
-
})(["align-items:center;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
|
|
11531
|
-
return props.$mode === "
|
|
11530
|
+
})(["align-items:center;background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
|
|
11531
|
+
return props.$mode === "flat" && styled.css(["background-color:transparent;border:none;border-radius:none;"]);
|
|
11532
11532
|
}, function (props) {
|
|
11533
11533
|
return props.$size === "small" && styled.css(["border-radius:6px;height:24px;"]);
|
|
11534
11534
|
}, function (props) {
|
|
@@ -11546,7 +11546,9 @@
|
|
|
11546
11546
|
var StyledInput$2 = styled__default["default"].input.withConfig({
|
|
11547
11547
|
displayName: "Styles__StyledInput",
|
|
11548
11548
|
componentId: "sc-ce8kcp-1"
|
|
11549
|
-
})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100
|
|
11549
|
+
})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;", " &::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", " ", " ", ""], function (props) {
|
|
11550
|
+
return props.$mode === "flat" && styled.css(["background-color:transparent;"]);
|
|
11551
|
+
}, function (props) {
|
|
11550
11552
|
return props.$size === "big" && styled.css(["font-size:1rem;"]);
|
|
11551
11553
|
}, function (props) {
|
|
11552
11554
|
return props.$size === "biggest" && styled.css(["font-size:1.25rem;font-weight:700;"]);
|