@cambly/syntax-core 22.1.0 → 22.2.1
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/RichSelect/RichSelectList.css +21 -18
- package/dist/RichSelect/RichSelectList.css.map +1 -1
- package/dist/RichSelect/RichSelectList.d.ts +4 -1
- package/dist/RichSelect/RichSelectList.js +2 -2
- package/dist/SelectList/SelectList.css +21 -18
- package/dist/SelectList/SelectList.css.map +1 -1
- package/dist/SelectList/SelectList.js +2 -2
- package/dist/__chunks/{BNIBTPIA.js → ATK36VZD.js} +1 -1
- package/dist/__chunks/{BNIBTPIA.js.map → ATK36VZD.js.map} +1 -1
- package/dist/__chunks/{5MOBRFQE.js → HGRKVO52.js} +8 -4
- package/dist/__chunks/HGRKVO52.js.map +1 -0
- package/dist/__chunks/{V3A22FFS.js → KAPE4NUI.js} +3 -3
- package/dist/__chunks/{V3A22FFS.js.map → KAPE4NUI.js.map} +1 -1
- package/dist/index.css +21 -18
- package/dist/index.css.map +1 -1
- package/dist/index.js +3 -3
- package/package.json +3 -3
- package/dist/__chunks/5MOBRFQE.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/SelectList/SelectList.tsx","css-module:./SelectList.module.css#css-module"],"sourcesContent":["import React, {\n type ReactElement,\n type ReactNode,\n useId,\n useState,\n} from \"react\";\nimport Box from \"../Box/Box\";\nimport classNames from \"classnames\";\nimport {\n ColorBaseDestructive700,\n ColorBaseGray700,\n ColorCambioWhite100,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport styles from \"./SelectList.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport SelectOption from \"./SelectOption\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\n\n/**\n * [SelectList](https://cambly-syntax.vercel.app/?path=/docs/components-selectlist--docs) is a dropdown menu that allows users to select one option from a list.\n */\nexport default function SelectList({\n children,\n \"data-testid\": dataTestId,\n disabled: disabledProp = false,\n errorText,\n helperText,\n id,\n label,\n on,\n onChange,\n onClick,\n placeholderText,\n selectedValue = \"\",\n}: {\n /**\n * One or more SelectList.Option components.\n */\n children: ReactNode;\n /**\n * Test id for the select element\n */\n \"data-testid\"?: string;\n /**\n * true if the select dropdown is disabled\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Indicate whether the component renders on a light or dark background. Changes the color of the text\n *\n * @defaulValue `lightBackground`\n */\n on?: \"lightBackground\" | \"darkBackground\";\n /**\n * Callback to be called when select is clicked\n */\n onClick?: (event: React.SyntheticEvent<HTMLSelectElement>) => void;\n /**\n * Text shown below select box if there is an input error.\n */\n errorText?: string;\n /**\n * Text shown below select box\n */\n helperText?: string;\n /**\n * Id of the select element\n */\n id?: string;\n /**\n * Text shown above select box\n */\n label: string;\n /**\n * The callback to be called when an option is selected\n */\n onChange: React.ChangeEventHandler<HTMLSelectElement>;\n /**\n * Text showing in select box if no option has been chosen.\n * We should always have a placeholder unless there is a default option selected\n */\n placeholderText?: string;\n /**\n * Value of the currently selected option\n */\n selectedValue?: string;\n}): ReactElement {\n const reactId = useId();\n const isHydrated = useIsHydrated();\n const disabled = !isHydrated || disabledProp;\n const selectId = id ?? reactId;\n const { isFocusVisible } = useFocusVisible();\n const [isFocused, setIsFocused] = useState(false);\n const textColor = on === \"darkBackground\" ? \"white\" : \"gray900\";\n const errorTextColor =\n on !== \"darkBackground\"\n ? \"destructive-lightBackground\"\n : \"destructive-darkBackground\";\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLSelectElement> = (\n event,\n ) => {\n if (disabled || onClick == null) return;\n if (event.key === \"Enter\" || event.key === \" \" || event.key === \"Space\") {\n onClick(event);\n }\n };\n\n const getArrowIconColor = () => {\n if (errorText) {\n return ColorBaseDestructive700;\n } else {\n if (on === \"darkBackground\") {\n return ColorCambioWhite100;\n } else {\n return ColorBaseGray700;\n }\n }\n };\n\n return (\n <div\n className={classNames(styles.selectContainer, {\n [styles.opacityOverlay]: disabled,\n })}\n >\n {label && (\n <label htmlFor={selectId}>\n <Box paddingX={1}>\n <Typography size={100} color={textColor}>\n {label}\n </Typography>\n </Box>\n </label>\n )}\n <div className={styles.selectWrapper}>\n <select\n id={selectId}\n data-testid={dataTestId}\n disabled={disabled}\n className={classNames(styles.selectBox, styles.selectBoxCambio, {\n [styles.unselected]: !selectedValue && !errorText,\n [styles.selected]: selectedValue && !errorText,\n [styles.selectErrorCambio]: errorText && on === \"lightBackground\",\n [styles.transparentInputError]:\n errorText && on === \"darkBackground\",\n [focusStyles.accessibilityOutlineFocus]:\n isFocused && isFocusVisible, // for focus keyboard\n [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse\n [styles.darkBackground]: on === \"darkBackground\",\n })}\n onChange={onChange}\n onClick={onClick}\n onKeyDown={handleKeyDown}\n value={\n placeholderText && !selectedValue ? placeholderText : selectedValue\n }\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n >\n {placeholderText && (\n <option disabled value={placeholderText}>\n {placeholderText}\n </option>\n )}\n {children}\n </select>\n <div className={styles.arrowIcon}>\n <svg\n focusable=\"false\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n width={24}\n >\n <path\n fill={getArrowIconColor()}\n d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n />\n </svg>\n </div>\n </div>\n {(helperText || errorText) && (\n <Box paddingX={1}>\n <Typography size={100} color={errorText ? errorTextColor : textColor}>\n {errorText ? errorText : helperText}\n </Typography>\n </Box>\n )}\n </div>\n );\n}\n\nSelectList.Option = SelectOption;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"
|
|
1
|
+
{"version":3,"sources":["../../src/SelectList/SelectList.tsx","css-module:./SelectList.module.css#css-module"],"sourcesContent":["import React, {\n type ReactElement,\n type ReactNode,\n useId,\n useState,\n} from \"react\";\nimport Box from \"../Box/Box\";\nimport classNames from \"classnames\";\nimport {\n ColorBaseDestructive700,\n ColorBaseGray700,\n ColorCambioWhite100,\n} from \"@cambly/syntax-design-tokens\";\nimport Typography from \"../Typography/Typography\";\nimport styles from \"./SelectList.module.css\";\nimport focusStyles from \"../Focus.module.css\";\nimport SelectOption from \"./SelectOption\";\nimport useFocusVisible from \"../useFocusVisible\";\nimport useIsHydrated from \"../useIsHydrated\";\n\n/**\n * [SelectList](https://cambly-syntax.vercel.app/?path=/docs/components-selectlist--docs) is a dropdown menu that allows users to select one option from a list.\n */\nexport default function SelectList({\n children,\n \"data-testid\": dataTestId,\n disabled: disabledProp = false,\n errorText,\n helperText,\n id,\n label,\n on,\n onChange,\n onClick,\n placeholderText,\n selectedValue = \"\",\n}: {\n /**\n * One or more SelectList.Option components.\n */\n children: ReactNode;\n /**\n * Test id for the select element\n */\n \"data-testid\"?: string;\n /**\n * true if the select dropdown is disabled\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Indicate whether the component renders on a light or dark background. Changes the color of the text\n *\n * @defaulValue `lightBackground`\n */\n on?: \"lightBackground\" | \"darkBackground\";\n /**\n * Callback to be called when select is clicked\n */\n onClick?: (event: React.SyntheticEvent<HTMLSelectElement>) => void;\n /**\n * Text shown below select box if there is an input error.\n */\n errorText?: string;\n /**\n * Text shown below select box\n */\n helperText?: string;\n /**\n * Id of the select element\n */\n id?: string;\n /**\n * Text shown above select box\n */\n label: string;\n /**\n * The callback to be called when an option is selected\n */\n onChange: React.ChangeEventHandler<HTMLSelectElement>;\n /**\n * Text showing in select box if no option has been chosen.\n * We should always have a placeholder unless there is a default option selected\n */\n placeholderText?: string;\n /**\n * Value of the currently selected option\n */\n selectedValue?: string;\n}): ReactElement {\n const reactId = useId();\n const isHydrated = useIsHydrated();\n const disabled = !isHydrated || disabledProp;\n const selectId = id ?? reactId;\n const { isFocusVisible } = useFocusVisible();\n const [isFocused, setIsFocused] = useState(false);\n const textColor = on === \"darkBackground\" ? \"white\" : \"gray900\";\n const errorTextColor =\n on !== \"darkBackground\"\n ? \"destructive-lightBackground\"\n : \"destructive-darkBackground\";\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLSelectElement> = (\n event,\n ) => {\n if (disabled || onClick == null) return;\n if (event.key === \"Enter\" || event.key === \" \" || event.key === \"Space\") {\n onClick(event);\n }\n };\n\n const getArrowIconColor = () => {\n if (errorText) {\n return ColorBaseDestructive700;\n } else {\n if (on === \"darkBackground\") {\n return ColorCambioWhite100;\n } else {\n return ColorBaseGray700;\n }\n }\n };\n\n return (\n <div\n className={classNames(styles.selectContainer, {\n [styles.opacityOverlay]: disabled,\n })}\n >\n {label && (\n <label htmlFor={selectId}>\n <Box paddingX={1}>\n <Typography size={100} color={textColor}>\n {label}\n </Typography>\n </Box>\n </label>\n )}\n <div className={styles.selectWrapper}>\n <select\n id={selectId}\n data-testid={dataTestId}\n disabled={disabled}\n className={classNames(styles.selectBox, styles.selectBoxCambio, {\n [styles.unselected]: !selectedValue && !errorText,\n [styles.selected]: selectedValue && !errorText,\n [styles.selectErrorCambio]: errorText && on === \"lightBackground\",\n [styles.transparentInputError]:\n errorText && on === \"darkBackground\",\n [focusStyles.accessibilityOutlineFocus]:\n isFocused && isFocusVisible, // for focus keyboard\n [styles.selectMouseFocusStyling]: isFocused && !isFocusVisible, // for focus mouse\n [styles.darkBackground]: on === \"darkBackground\",\n })}\n onChange={onChange}\n onClick={onClick}\n onKeyDown={handleKeyDown}\n value={\n placeholderText && !selectedValue ? placeholderText : selectedValue\n }\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n >\n {placeholderText && (\n <option disabled value={placeholderText}>\n {placeholderText}\n </option>\n )}\n {children}\n </select>\n <div className={styles.arrowIcon}>\n <svg\n focusable=\"false\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n width={24}\n >\n <path\n fill={getArrowIconColor()}\n d=\"M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z\"\n />\n </svg>\n </div>\n </div>\n {(helperText || errorText) && (\n <Box paddingX={1}>\n <Typography size={100} color={errorText ? errorTextColor : textColor}>\n {errorText ? errorText : helperText}\n </Typography>\n </Box>\n )}\n </div>\n );\n}\n\nSelectList.Option = SelectOption;\n","import \"/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css\"; export default {\"selectContainer\":\"_selectContainer_rxo2v_1\",\"opacityOverlay\":\"_opacityOverlay_rxo2v_7\",\"selectWrapper\":\"_selectWrapper_rxo2v_11\",\"selectBox\":\"_selectBox_rxo2v_16\",\"selectBoxCambio\":\"_selectBoxCambio_rxo2v_30\",\"selectMouseFocusStyling\":\"_selectMouseFocusStyling_rxo2v_41\",\"unselected\":\"_unselected_rxo2v_46\",\"selected\":\"_selected_rxo2v_50\",\"darkBackground\":\"_darkBackground_rxo2v_54\",\"arrowIcon\":\"_arrowIcon_rxo2v_66\",\"selectErrorCambio\":\"_selectErrorCambio_rxo2v_80\",\"selectColorwhite\":\"_selectColorwhite_rxo2v_86\",\"transparentInputError\":\"_transparentInputError_rxo2v_92\",\"transparenInputError\":\"_transparenInputError_rxo2v_97\"}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,EAGE;AAAA,EACA;AAAA,OACK;AAEP,OAAO,gBAAgB;;;ACP6E,IAAO,4BAAQ,EAAC,mBAAkB,4BAA2B,kBAAiB,2BAA0B,iBAAgB,2BAA0B,aAAY,uBAAsB,mBAAkB,6BAA4B,2BAA0B,qCAAoC,cAAa,wBAAuB,YAAW,sBAAqB,kBAAiB,4BAA2B,aAAY,uBAAsB,qBAAoB,+BAA8B,oBAAmB,8BAA6B,yBAAwB,mCAAkC,wBAAuB,iCAAgC;;;ADoI7tB,cAOJ,YAPI;AA7GG,SAAR,WAA4B;AAAA,EACjC;AAAA,EACA,eAAe;AAAA,EACf,UAAU,eAAe;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAClB,GAqDiB;AACf,QAAM,UAAU,MAAM;AACtB,QAAM,aAAa,cAAc;AACjC,QAAM,WAAW,CAAC,cAAc;AAChC,QAAM,WAAW,kBAAM;AACvB,QAAM,EAAE,eAAe,IAAI,gBAAgB;AAC3C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,YAAY,OAAO,mBAAmB,UAAU;AACtD,QAAM,iBACJ,OAAO,mBACH,gCACA;AAEN,QAAM,gBAA+D,CACnE,UACG;AACH,QAAI,YAAY,WAAW;AAAM;AACjC,QAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,OAAO,MAAM,QAAQ,SAAS;AACvE,cAAQ,KAAK;AAAA,IACf;AAAA,EACF;AAEA,QAAM,oBAAoB,MAAM;AAC9B,QAAI,WAAW;AACb,aAAO;AAAA,IACT,OAAO;AACL,UAAI,OAAO,kBAAkB;AAC3B,eAAO;AAAA,MACT,OAAO;AACL,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW,0BAAO,iBAAiB;AAAA,QAC5C,CAAC,0BAAO,cAAc,GAAG;AAAA,MAC3B,CAAC;AAAA,MAEA;AAAA,iBACC,oBAAC,WAAM,SAAS,UACd,8BAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAO,WAC3B,iBACH,GACF,GACF;AAAA,QAEF,qBAAC,SAAI,WAAW,0BAAO,eACrB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,eAAa;AAAA,cACb;AAAA,cACA,WAAW,WAAW,0BAAO,WAAW,0BAAO,iBAAiB;AAAA,gBAC9D,CAAC,0BAAO,UAAU,GAAG,CAAC,iBAAiB,CAAC;AAAA,gBACxC,CAAC,0BAAO,QAAQ,GAAG,iBAAiB,CAAC;AAAA,gBACrC,CAAC,0BAAO,iBAAiB,GAAG,aAAa,OAAO;AAAA,gBAChD,CAAC,0BAAO,qBAAqB,GAC3B,aAAa,OAAO;AAAA,gBACtB,CAAC,qBAAY,yBAAyB,GACpC,aAAa;AAAA;AAAA,gBACf,CAAC,0BAAO,uBAAuB,GAAG,aAAa,CAAC;AAAA;AAAA,gBAChD,CAAC,0BAAO,cAAc,GAAG,OAAO;AAAA,cAClC,CAAC;AAAA,cACD;AAAA,cACA;AAAA,cACA,WAAW;AAAA,cACX,OACE,mBAAmB,CAAC,gBAAgB,kBAAkB;AAAA,cAExD,SAAS,MAAM,aAAa,IAAI;AAAA,cAChC,QAAQ,MAAM,aAAa,KAAK;AAAA,cAE/B;AAAA,mCACC,oBAAC,YAAO,UAAQ,MAAC,OAAO,iBACrB,2BACH;AAAA,gBAED;AAAA;AAAA;AAAA,UACH;AAAA,UACA,oBAAC,SAAI,WAAW,0BAAO,WACrB;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAY;AAAA,cACZ,SAAQ;AAAA,cACR,OAAO;AAAA,cAEP;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,kBAAkB;AAAA,kBACxB,GAAE;AAAA;AAAA,cACJ;AAAA;AAAA,UACF,GACF;AAAA,WACF;AAAA,SACE,cAAc,cACd,oBAAC,eAAI,UAAU,GACb,8BAAC,sBAAW,MAAM,KAAK,OAAO,YAAY,iBAAiB,WACxD,sBAAY,YAAY,YAC3B,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,WAAW,SAAS;","names":[]}
|
package/dist/index.css
CHANGED
|
@@ -3035,19 +3035,19 @@
|
|
|
3035
3035
|
}
|
|
3036
3036
|
|
|
3037
3037
|
/* css-module:/home/runner/work/syntax/syntax/packages/syntax-core/src/SelectList/SelectList.module.css/#css-module-data */
|
|
3038
|
-
.
|
|
3038
|
+
._selectContainer_rxo2v_1 {
|
|
3039
3039
|
display: flex;
|
|
3040
3040
|
flex-direction: column;
|
|
3041
3041
|
gap: 8px;
|
|
3042
3042
|
}
|
|
3043
|
-
.
|
|
3043
|
+
._opacityOverlay_rxo2v_7 {
|
|
3044
3044
|
opacity: 0.5;
|
|
3045
3045
|
}
|
|
3046
|
-
.
|
|
3046
|
+
._selectWrapper_rxo2v_11 {
|
|
3047
3047
|
display: flex;
|
|
3048
3048
|
position: relative;
|
|
3049
3049
|
}
|
|
3050
|
-
.
|
|
3050
|
+
._selectBox_rxo2v_16 {
|
|
3051
3051
|
align-items: center;
|
|
3052
3052
|
appearance: none;
|
|
3053
3053
|
cursor: pointer;
|
|
@@ -3067,59 +3067,62 @@
|
|
|
3067
3067
|
outline: 0;
|
|
3068
3068
|
width: 100%;
|
|
3069
3069
|
}
|
|
3070
|
-
.
|
|
3070
|
+
._selectBoxCambio_rxo2v_30 {
|
|
3071
3071
|
border-radius: 8px;
|
|
3072
3072
|
box-sizing: border-box;
|
|
3073
3073
|
font-size: 16px;
|
|
3074
3074
|
height: 48px;
|
|
3075
|
-
padding: 12px
|
|
3075
|
+
padding-top: 12px;
|
|
3076
|
+
padding-bottom: 12px;
|
|
3077
|
+
padding-inline-start: 12px;
|
|
3078
|
+
padding-inline-end: 36px;
|
|
3076
3079
|
}
|
|
3077
|
-
.
|
|
3080
|
+
._selectMouseFocusStyling_rxo2v_41 {
|
|
3078
3081
|
border: 1px solid var(--color-base-primary-700);
|
|
3079
3082
|
box-shadow: 0 0 0 1px var(--color-base-primary-700);
|
|
3080
3083
|
}
|
|
3081
|
-
.
|
|
3084
|
+
._unselected_rxo2v_46 {
|
|
3082
3085
|
color: var(--color-base-gray-700);
|
|
3083
3086
|
}
|
|
3084
|
-
.
|
|
3087
|
+
._selected_rxo2v_50 {
|
|
3085
3088
|
color: var(--color-base-gray-800);
|
|
3086
3089
|
}
|
|
3087
|
-
.
|
|
3090
|
+
._darkBackground_rxo2v_54 {
|
|
3088
3091
|
background: var(--color-cambio-gray-900);
|
|
3089
3092
|
border: 1px solid var(--color-cambio-white-40);
|
|
3090
3093
|
color: var(--color-cambio-white-70);
|
|
3091
3094
|
}
|
|
3092
|
-
.
|
|
3095
|
+
._darkBackground_rxo2v_54:focus {
|
|
3093
3096
|
outline: none;
|
|
3094
3097
|
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
|
|
3095
3098
|
color: var(--color-cambio-white-100);
|
|
3096
3099
|
}
|
|
3097
|
-
.
|
|
3100
|
+
._arrowIcon_rxo2v_66 {
|
|
3098
3101
|
display: flex;
|
|
3099
3102
|
position: absolute;
|
|
3100
|
-
|
|
3103
|
+
inset-inline-end: 0;
|
|
3101
3104
|
top: 0;
|
|
3102
3105
|
bottom: 0;
|
|
3103
3106
|
padding-inline-end: 8px;
|
|
3104
3107
|
pointer-events: none;
|
|
3105
3108
|
}
|
|
3106
|
-
.
|
|
3109
|
+
._selectBox_rxo2v_16:disabled {
|
|
3107
3110
|
cursor: auto;
|
|
3108
3111
|
}
|
|
3109
|
-
.
|
|
3112
|
+
._selectErrorCambio_rxo2v_80 {
|
|
3110
3113
|
color: var(--color-cambio-destructive-900);
|
|
3111
3114
|
border-color: var(--color-cambio-destructive-700);
|
|
3112
3115
|
}
|
|
3113
|
-
.
|
|
3116
|
+
._selectColorwhite_rxo2v_86 {
|
|
3114
3117
|
background-color: var(--color-base-white);
|
|
3115
3118
|
border: 1px solid var(--color-cambio-gray-370);
|
|
3116
3119
|
color: var(--color-base-gray-700);
|
|
3117
3120
|
}
|
|
3118
|
-
.
|
|
3121
|
+
._transparentInputError_rxo2v_92 {
|
|
3119
3122
|
color: var(--color-cambio-destructive-370);
|
|
3120
3123
|
border: 1px solid var(--color-cambio-destructive-300);
|
|
3121
3124
|
}
|
|
3122
|
-
.
|
|
3125
|
+
._transparenInputError_rxo2v_97::placeholder {
|
|
3123
3126
|
color: var(--color-cambio-destructive-370);
|
|
3124
3127
|
}
|
|
3125
3128
|
|