@cakemail-org/ui-components-v2 2.2.103 → 2.2.104

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 (7) hide show
  1. package/dist/cjs/components/textField/types.d.ts +1 -1
  2. package/dist/cjs/data/theme/MuiTextField.d.ts +27 -0
  3. package/dist/cjs/index.js +35 -4
  4. package/dist/esm/components/textField/types.d.ts +1 -1
  5. package/dist/esm/data/theme/MuiTextField.d.ts +27 -0
  6. package/dist/esm/index.js +35 -4
  7. package/package.json +1 -1
package/dist/cjs/components/textField/types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { BaseTextFieldProps } from "@mui/material";
2
2
  import { ChangeEventHandler } from "react";
3
3
  import { TIconName } from "../icon/types";
4
- export interface TTextField extends Omit<BaseTextFieldProps, "onMouseUp" | "FormHelperTextProps" | "fullWidth" | "select" | "margin" | "component" | "InputLabelProps" | "SelectProps" | "classes" | "size" | "color"> {
4
+ export interface TTextField extends Omit<BaseTextFieldProps, "onMouseUp" | "FormHelperTextProps" | "fullWidth" | "select" | "margin" | "component" | "InputLabelProps" | "SelectProps" | "classes" | "color"> {
5
5
  onChange?: TTextFieldChange;
6
6
  labelTooltipText?: string;
7
7
  useBareBoneInput?: boolean;
package/dist/cjs/data/theme/MuiTextField.d.ts CHANGED
@@ -1,5 +1,32 @@
1
1
  import { Theme } from "@mui/material";
2
2
  export default function getMuiTextField(theme: Theme): {
3
+ variants: ({
4
+ props: {
5
+ size: string;
6
+ };
7
+ style: {
8
+ ".MuiInputBase-root > input, .MuiInputBase-root > textarea": {
9
+ padding: string;
10
+ fontSize: import("csstype").Property.FontSize<string | number> | undefined;
11
+ lineHeight: import("csstype").Property.LineHeight<string | number> | undefined;
12
+ };
13
+ ".MuiSvgIcon-root": {
14
+ top: string;
15
+ };
16
+ };
17
+ } | {
18
+ props: {
19
+ size: string;
20
+ };
21
+ style: {
22
+ ".MuiInputBase-root > input, .MuiInputBase-root > textarea": {
23
+ padding: string;
24
+ fontSize?: undefined;
25
+ lineHeight?: undefined;
26
+ };
27
+ ".MuiSvgIcon-root"?: undefined;
28
+ };
29
+ })[];
3
30
  styleOverrides: {
4
31
  root: {
5
32
  ".MuiInputLabel-root": {
package/dist/cjs/index.js CHANGED
@@ -5742,6 +5742,37 @@ function getMuiTableRow(theme) {
5742
5742
 
5743
5743
  function getMuiTextField(theme) {
5744
5744
  return {
5745
+ variants: [
5746
+ {
5747
+ props: { size: "small" },
5748
+ style: {
5749
+ ".MuiInputBase-root > input, .MuiInputBase-root > textarea": {
5750
+ padding: theme.spacing(3, 3.5),
5751
+ fontSize: theme.typography.body1.fontSize,
5752
+ lineHeight: theme.typography.body1.lineHeight,
5753
+ },
5754
+ ".MuiSvgIcon-root": {
5755
+ top: "1.5rem !important",
5756
+ },
5757
+ },
5758
+ },
5759
+ {
5760
+ props: { size: "medium" },
5761
+ style: {
5762
+ ".MuiInputBase-root > input, .MuiInputBase-root > textarea": {
5763
+ padding: theme.spacing(4, 3.5),
5764
+ }
5765
+ },
5766
+ },
5767
+ {
5768
+ props: { size: "large" },
5769
+ style: {
5770
+ ".MuiInputBase-root > input, .MuiInputBase-root > textarea": {
5771
+ padding: theme.spacing(5, 3.5),
5772
+ }
5773
+ },
5774
+ },
5775
+ ],
5745
5776
  styleOverrides: {
5746
5777
  root: {
5747
5778
  ".MuiInputLabel-root": __assign(__assign({}, theme.typography.body2), { color: theme.palette.body1.main, transform: "translate(14px, -9px)", ">div": {
@@ -7677,11 +7708,11 @@ function LoadingContainer(_a) {
7677
7708
  React.createElement(Container, { className: "loadingContainer-component-v2 ".concat(className), sx: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%" } }, loader)));
7678
7709
  }
7679
7710
 
7680
- var css_248z$v = ".textfield-component-v2 {\n position: relative;\n}\n.textfield-component-v2.disabled {\n opacity: 0.65;\n pointer-events: none;\n}\n.textfield-component-v2 .MuiSvgIcon-root ~ .MuiFormControl-root .MuiInputBase-input {\n padding-left: 42px;\n}\n.textfield-component-v2 .MuiSvgIcon-root {\n position: absolute;\n left: 1rem;\n top: 1.65rem;\n transform: translateY(-50%);\n z-index: 1;\n}\n\n.locationTextField-component-v2 {\n position: relative;\n}\n.locationTextField-component-v2 .autocomplete-dropdown-container {\n position: absolute;\n width: 100%;\n z-index: 10000;\n}\n\n.phoneTextField-component-v2 .MuiInputAdornment-root .MuiSelect-select {\n padding-right: 1.75rem !important;\n}\n.phoneTextField-component-v2 .MuiInputAdornment-root .MuiSelect-icon {\n display: inline-block;\n right: 0.5rem;\n}\n\n.react-international-phone-flag-emoji {\n width: 1.5rem;\n height: 1.5rem;\n}\n\n.colorTextField-component-v2 {\n position: relative;\n}\n.colorTextField-component-v2 .boxedColor {\n position: absolute;\n width: 20px;\n height: 20px;\n border-radius: 20px;\n left: 1rem;\n top: 1.65rem;\n transform: translateY(-50%);\n z-index: 1;\n}\n.colorTextField-component-v2 .boxedColor .MuiSvgIcon-root {\n width: unset;\n height: unset;\n}\n.colorTextField-component-v2 .boxedColor::after {\n position: absolute;\n width: 6px;\n height: 6px;\n content: \"\";\n background-color: var(--white, #FFFFFF);\n border-radius: 20px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n.colorTextField-component-v2 .boxedColor ~ .textfield-component-v2 .MuiInputBase-input {\n padding-left: 44px;\n}\n.colorTextField-component-v2.bottom .react-colorful {\n top: 3.5rem;\n}\n.colorTextField-component-v2.top .react-colorful {\n bottom: 4rem;\n}\n.colorTextField-component-v2 .react-colorful {\n width: 100%;\n position: absolute;\n}";
7711
+ var css_248z$v = ".textfield-component-v2 {\n position: relative;\n}\n.textfield-component-v2.small .MuiSvgIcon-root {\n top: 1.4rem !important;\n}\n.textfield-component-v2.disabled {\n opacity: 0.65;\n pointer-events: none;\n}\n.textfield-component-v2 .MuiSvgIcon-root ~ .MuiFormControl-root .MuiInputBase-input {\n padding-left: 42px;\n}\n.textfield-component-v2 .MuiSvgIcon-root {\n position: absolute;\n left: 1rem;\n top: 1.65rem;\n transform: translateY(-50%);\n z-index: 1;\n}\n\n.locationTextField-component-v2 {\n position: relative;\n}\n.locationTextField-component-v2 .autocomplete-dropdown-container {\n position: absolute;\n width: 100%;\n z-index: 10000;\n}\n\n.phoneTextField-component-v2 .MuiInputAdornment-root .MuiSelect-select {\n padding-right: 1.75rem !important;\n}\n.phoneTextField-component-v2 .MuiInputAdornment-root .MuiSelect-icon {\n display: inline-block;\n right: 0.5rem;\n}\n\n.react-international-phone-flag-emoji {\n width: 1.5rem;\n height: 1.5rem;\n}\n\n.colorTextField-component-v2 {\n position: relative;\n}\n.colorTextField-component-v2 .boxedColor {\n position: absolute;\n width: 20px;\n height: 20px;\n border-radius: 20px;\n left: 1rem;\n top: 1.65rem;\n transform: translateY(-50%);\n z-index: 1;\n}\n.colorTextField-component-v2 .boxedColor .MuiSvgIcon-root {\n width: unset;\n height: unset;\n}\n.colorTextField-component-v2 .boxedColor::after {\n position: absolute;\n width: 6px;\n height: 6px;\n content: \"\";\n background-color: var(--white, #FFFFFF);\n border-radius: 20px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n.colorTextField-component-v2 .boxedColor ~ .textfield-component-v2 .MuiInputBase-input {\n padding-left: 44px;\n}\n.colorTextField-component-v2.bottom .react-colorful {\n top: 3.5rem;\n}\n.colorTextField-component-v2.top .react-colorful {\n bottom: 4rem;\n}\n.colorTextField-component-v2 .react-colorful {\n width: 100%;\n position: absolute;\n}";
7681
7712
  styleInject(css_248z$v);
7682
7713
 
7683
7714
  var TextField = React.forwardRef(function (_a, ref) {
7684
- var _b = _a.className, className = _b === void 0 ? "" : _b, label = _a.label, timeout = _a.timeout, labelTooltipText = _a.labelTooltipText, disabled = _a.disabled; _a.useBareBoneInput; var onChange = _a.onChange, multiline = _a.multiline, inputProps = _a.inputProps, iconName = _a.iconName, onKeyDown = _a.onKeyDown, props = __rest(_a, ["className", "label", "timeout", "labelTooltipText", "disabled", "useBareBoneInput", "onChange", "multiline", "inputProps", "iconName", "onKeyDown"]);
7715
+ var _b = _a.className, className = _b === void 0 ? "" : _b, label = _a.label, timeout = _a.timeout, labelTooltipText = _a.labelTooltipText, disabled = _a.disabled; _a.useBareBoneInput; var onChange = _a.onChange, multiline = _a.multiline, inputProps = _a.inputProps, iconName = _a.iconName, onKeyDown = _a.onKeyDown, size = _a.size, props = __rest(_a, ["className", "label", "timeout", "labelTooltipText", "disabled", "useBareBoneInput", "onChange", "multiline", "inputProps", "iconName", "onKeyDown", "size"]);
7685
7716
  var cLabel = label;
7686
7717
  var timeoutRef = React.useRef(undefined);
7687
7718
  function onChangeHandler(e) {
@@ -7728,9 +7759,9 @@ var TextField = React.forwardRef(function (_a, ref) {
7728
7759
  onKeyDown && onKeyDown(event);
7729
7760
  }
7730
7761
  inputProps = __assign({ maxLength: 256 }, inputProps);
7731
- return React.createElement(Box, { className: "textfield-component-v2 ".concat(className, " ").concat(disabled ? "disabled" : "", " ") },
7762
+ return React.createElement(Box, { className: "textfield-component-v2 ".concat(className, " ").concat(disabled ? "disabled" : "", " ").concat(size) },
7732
7763
  iconName && React.createElement(Icon, { name: iconName }),
7733
- React.createElement(MUITextField, __assign({}, props, { inputProps: inputProps, onChange: onChangeHandler, label: cLabel, disabled: disabled, onKeyDown: handleKeyDown, multiline: multiline, inputRef: ref })));
7764
+ React.createElement(MUITextField, __assign({}, props, { inputProps: inputProps, onChange: onChangeHandler, label: cLabel, disabled: disabled, onKeyDown: handleKeyDown, multiline: multiline, inputRef: ref, size: size })));
7734
7765
  });
7735
7766
 
7736
7767
  var css_248z$u = ".assetmanager-component-v2 {\n box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);\n background: var(--background-color-1, var(--white, #FFFFFF));\n min-width: 25rem;\n width: 100%;\n}\n.assetmanager-component-v2 .loadingContainer-component-v2 {\n padding: 3rem;\n}\n.assetmanager-component-v2 .container {\n padding: 0.75rem;\n}\n.assetmanager-component-v2 .container > div.textInputContainer {\n display: flex;\n border: solid 1px var(--wild-sand, #dddddd);\n border-radius: 6px;\n justify-content: flex-start;\n align-items: center;\n}\n.assetmanager-component-v2 .container > div.textInputContainer > div .MuiSvgIcon-root {\n display: block;\n cursor: pointer;\n}\n.assetmanager-component-v2 .container > div.textInputContainer > div:first-child {\n padding: 0 0.75rem 0 0.75rem;\n height: 100%;\n}\n.assetmanager-component-v2 .container > div.textInputContainer > div:last-child:not(.textfield-component-v2) {\n padding: 0 0.875rem;\n height: 100%;\n}\n.assetmanager-component-v2 .container > div.textInputContainer .textfield-component-v2 {\n width: 100%;\n}\n.assetmanager-component-v2 .container > div.textInputContainer .textfield-component-v2 fieldset {\n outline: none !important;\n border: none !important;\n}\n.assetmanager-component-v2 .container > div.textInputContainer .textfield-component-v2 input {\n padding: 0.5rem 0 !important;\n}\n.assetmanager-component-v2 .container .optionsListingContainer {\n padding: 0 1.25rem 0.5rem 1.25rem;\n margin: 1.25rem 0 0.5rem 0;\n max-height: 20rem;\n overflow-y: auto;\n}\n.assetmanager-component-v2 .container .optionsListingContainer button {\n text-transform: capitalize;\n}\n.assetmanager-component-v2 .container .optionsListingContainer::-webkit-scrollbar {\n display: block;\n}\n.assetmanager-component-v2 .container .optionsListingContainer::-webkit-scrollbar-track:horizontal {\n position: absolute;\n bottom: -20px;\n}\n.assetmanager-component-v2 .container .optionsListingContainer::-webkit-scrollbar-track:vertical {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 8px !important;\n border-top-right-radius: 8px !important;\n}\n.assetmanager-component-v2 .container .optionsListingContainer::-webkit-scrollbar-track {\n height: 2.5rem;\n width: 2.5rem;\n padding: 2rem;\n background-clip: content-box;\n border-bottom-left-radius: 8px;\n}\n.assetmanager-component-v2 .container .optionsListingContainer::-webkit-scrollbar-thumb {\n background: var(--body-font-color-2, var(--silver, #9B9B9B));\n border-radius: 24px;\n border-top: 5px solid var(--background-color-1, var(--white, #FFFFFF));\n border-bottom: 5px solid var(--background-color-1, var(--white, #FFFFFF));\n border-right: 5px solid var(--background-color-1, var(--white, #FFFFFF));\n border-left: 5px solid var(--background-color-1, var(--white, #FFFFFF));\n}\n.assetmanager-component-v2 .container .optionsListingContainer > div:first-child:not(.listItem) {\n padding-bottom: 0.75rem;\n text-transform: uppercase;\n font-weight: 700;\n color: var(--body-font-color, var(--dark-matter, #2B2B2B));\n}\n.assetmanager-component-v2 .container .optionsListingContainer > p.h8 {\n margin-bottom: 1rem;\n color: var(--body-font-color, var(--dark-matter, #2B2B2B));\n}\n.assetmanager-component-v2 .container .optionsListingContainer p.h8 {\n flex: 1;\n font-family: proxima-nova, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif;\n text-transform: uppercase;\n font-weight: 700;\n line-height: 1rem;\n font-size: 0.75rem;\n}\n.assetmanager-component-v2 .container .optionsListingContainer .listItem {\n display: flex;\n justify-content: space-between;\n align-items: center;\n min-height: 2rem;\n}\n.assetmanager-component-v2 .container .optionsListingContainer .listItem p.h8 {\n color: var(--body-font-color-2, var(--silver, #9B9B9B));\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n.assetmanager-component-v2 .container .optionsListingContainer .listItem > .MuiSvgIcon-root {\n margin-right: 1rem;\n}\n.assetmanager-component-v2 .container .optionsListingContainer .listItem.selected p.h8 {\n color: var(--secondary-brand-color, var(--teal, #0ABDAE));\n padding-right: 1rem;\n max-width: 100%;\n}\n.assetmanager-component-v2 .container .optionsListingContainer .listItem.selected .MuiSvgIcon-root span svg path {\n fill: var(--secondary-brand-color, var(--teal, #0ABDAE));\n}\n.assetmanager-component-v2 .container .optionsListingContainer .listItem .buttonContainer {\n margin-left: 1rem;\n visibility: hidden;\n}\n.assetmanager-component-v2 .container .optionsListingContainer .listItem .buttonContainer button:nth-child(2) {\n margin-left: 0.5rem;\n}\n.assetmanager-component-v2 .container .optionsListingContainer .listItem:hover .buttonContainer {\n visibility: visible;\n}\n.assetmanager-component-v2 > button:last-child {\n width: 100%;\n text-transform: uppercase;\n font-family: proxima-nova, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif;\n height: 3rem;\n border-top: 1px solid var(--wild-sand, #dddddd) !important;\n outline: none;\n border-radius: 0;\n font-weight: 700;\n}";
package/dist/esm/components/textField/types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { BaseTextFieldProps } from "@mui/material";
2
2
  import { ChangeEventHandler } from "react";
3
3
  import { TIconName } from "../icon/types";
4
- export interface TTextField extends Omit<BaseTextFieldProps, "onMouseUp" | "FormHelperTextProps" | "fullWidth" | "select" | "margin" | "component" | "InputLabelProps" | "SelectProps" | "classes" | "size" | "color"> {
4
+ export interface TTextField extends Omit<BaseTextFieldProps, "onMouseUp" | "FormHelperTextProps" | "fullWidth" | "select" | "margin" | "component" | "InputLabelProps" | "SelectProps" | "classes" | "color"> {
5
5
  onChange?: TTextFieldChange;
6
6
  labelTooltipText?: string;
7
7
  useBareBoneInput?: boolean;
package/dist/esm/data/theme/MuiTextField.d.ts CHANGED
@@ -1,5 +1,32 @@
1
1
  import { Theme } from "@mui/material";
2
2
  export default function getMuiTextField(theme: Theme): {
3
+ variants: ({
4
+ props: {
5
+ size: string;
6
+ };
7
+ style: {
8
+ ".MuiInputBase-root > input, .MuiInputBase-root > textarea": {
9
+ padding: string;
10
+ fontSize: import("csstype").Property.FontSize<string | number> | undefined;
11
+ lineHeight: import("csstype").Property.LineHeight<string | number> | undefined;
12
+ };
13
+ ".MuiSvgIcon-root": {
14
+ top: string;
15
+ };
16
+ };
17
+ } | {
18
+ props: {
19
+ size: string;
20
+ };
21
+ style: {
22
+ ".MuiInputBase-root > input, .MuiInputBase-root > textarea": {
23
+ padding: string;
24
+ fontSize?: undefined;
25
+ lineHeight?: undefined;
26
+ };
27
+ ".MuiSvgIcon-root"?: undefined;
28
+ };
29
+ })[];
3
30
  styleOverrides: {
4
31
  root: {
5
32
  ".MuiInputLabel-root": {
package/dist/esm/index.js CHANGED
@@ -5722,6 +5722,37 @@ function getMuiTableRow(theme) {
5722
5722
 
5723
5723
  function getMuiTextField(theme) {
5724
5724
  return {
5725
+ variants: [
5726
+ {
5727
+ props: { size: "small" },
5728
+ style: {
5729
+ ".MuiInputBase-root > input, .MuiInputBase-root > textarea": {
5730
+ padding: theme.spacing(3, 3.5),
5731
+ fontSize: theme.typography.body1.fontSize,
5732
+ lineHeight: theme.typography.body1.lineHeight,
5733
+ },
5734
+ ".MuiSvgIcon-root": {
5735
+ top: "1.5rem !important",
5736
+ },
5737
+ },
5738
+ },
5739
+ {
5740
+ props: { size: "medium" },
5741
+ style: {
5742
+ ".MuiInputBase-root > input, .MuiInputBase-root > textarea": {
5743
+ padding: theme.spacing(4, 3.5),
5744
+ }
5745
+ },
5746
+ },
5747
+ {
5748
+ props: { size: "large" },
5749
+ style: {
5750
+ ".MuiInputBase-root > input, .MuiInputBase-root > textarea": {
5751
+ padding: theme.spacing(5, 3.5),
5752
+ }
5753
+ },
5754
+ },
5755
+ ],
5725
5756
  styleOverrides: {
5726
5757
  root: {
5727
5758
  ".MuiInputLabel-root": __assign(__assign({}, theme.typography.body2), { color: theme.palette.body1.main, transform: "translate(14px, -9px)", ">div": {
@@ -7657,11 +7688,11 @@ function LoadingContainer(_a) {
7657
7688
  React__default.createElement(Container, { className: "loadingContainer-component-v2 ".concat(className), sx: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%" } }, loader)));
7658
7689
  }
7659
7690
 
7660
- var css_248z$v = ".textfield-component-v2 {\n position: relative;\n}\n.textfield-component-v2.disabled {\n opacity: 0.65;\n pointer-events: none;\n}\n.textfield-component-v2 .MuiSvgIcon-root ~ .MuiFormControl-root .MuiInputBase-input {\n padding-left: 42px;\n}\n.textfield-component-v2 .MuiSvgIcon-root {\n position: absolute;\n left: 1rem;\n top: 1.65rem;\n transform: translateY(-50%);\n z-index: 1;\n}\n\n.locationTextField-component-v2 {\n position: relative;\n}\n.locationTextField-component-v2 .autocomplete-dropdown-container {\n position: absolute;\n width: 100%;\n z-index: 10000;\n}\n\n.phoneTextField-component-v2 .MuiInputAdornment-root .MuiSelect-select {\n padding-right: 1.75rem !important;\n}\n.phoneTextField-component-v2 .MuiInputAdornment-root .MuiSelect-icon {\n display: inline-block;\n right: 0.5rem;\n}\n\n.react-international-phone-flag-emoji {\n width: 1.5rem;\n height: 1.5rem;\n}\n\n.colorTextField-component-v2 {\n position: relative;\n}\n.colorTextField-component-v2 .boxedColor {\n position: absolute;\n width: 20px;\n height: 20px;\n border-radius: 20px;\n left: 1rem;\n top: 1.65rem;\n transform: translateY(-50%);\n z-index: 1;\n}\n.colorTextField-component-v2 .boxedColor .MuiSvgIcon-root {\n width: unset;\n height: unset;\n}\n.colorTextField-component-v2 .boxedColor::after {\n position: absolute;\n width: 6px;\n height: 6px;\n content: \"\";\n background-color: var(--white, #FFFFFF);\n border-radius: 20px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n.colorTextField-component-v2 .boxedColor ~ .textfield-component-v2 .MuiInputBase-input {\n padding-left: 44px;\n}\n.colorTextField-component-v2.bottom .react-colorful {\n top: 3.5rem;\n}\n.colorTextField-component-v2.top .react-colorful {\n bottom: 4rem;\n}\n.colorTextField-component-v2 .react-colorful {\n width: 100%;\n position: absolute;\n}";
7691
+ var css_248z$v = ".textfield-component-v2 {\n position: relative;\n}\n.textfield-component-v2.small .MuiSvgIcon-root {\n top: 1.4rem !important;\n}\n.textfield-component-v2.disabled {\n opacity: 0.65;\n pointer-events: none;\n}\n.textfield-component-v2 .MuiSvgIcon-root ~ .MuiFormControl-root .MuiInputBase-input {\n padding-left: 42px;\n}\n.textfield-component-v2 .MuiSvgIcon-root {\n position: absolute;\n left: 1rem;\n top: 1.65rem;\n transform: translateY(-50%);\n z-index: 1;\n}\n\n.locationTextField-component-v2 {\n position: relative;\n}\n.locationTextField-component-v2 .autocomplete-dropdown-container {\n position: absolute;\n width: 100%;\n z-index: 10000;\n}\n\n.phoneTextField-component-v2 .MuiInputAdornment-root .MuiSelect-select {\n padding-right: 1.75rem !important;\n}\n.phoneTextField-component-v2 .MuiInputAdornment-root .MuiSelect-icon {\n display: inline-block;\n right: 0.5rem;\n}\n\n.react-international-phone-flag-emoji {\n width: 1.5rem;\n height: 1.5rem;\n}\n\n.colorTextField-component-v2 {\n position: relative;\n}\n.colorTextField-component-v2 .boxedColor {\n position: absolute;\n width: 20px;\n height: 20px;\n border-radius: 20px;\n left: 1rem;\n top: 1.65rem;\n transform: translateY(-50%);\n z-index: 1;\n}\n.colorTextField-component-v2 .boxedColor .MuiSvgIcon-root {\n width: unset;\n height: unset;\n}\n.colorTextField-component-v2 .boxedColor::after {\n position: absolute;\n width: 6px;\n height: 6px;\n content: \"\";\n background-color: var(--white, #FFFFFF);\n border-radius: 20px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n.colorTextField-component-v2 .boxedColor ~ .textfield-component-v2 .MuiInputBase-input {\n padding-left: 44px;\n}\n.colorTextField-component-v2.bottom .react-colorful {\n top: 3.5rem;\n}\n.colorTextField-component-v2.top .react-colorful {\n bottom: 4rem;\n}\n.colorTextField-component-v2 .react-colorful {\n width: 100%;\n position: absolute;\n}";
7661
7692
  styleInject(css_248z$v);
7662
7693
 
7663
7694
  var TextField = forwardRef(function (_a, ref) {
7664
- var _b = _a.className, className = _b === void 0 ? "" : _b, label = _a.label, timeout = _a.timeout, labelTooltipText = _a.labelTooltipText, disabled = _a.disabled; _a.useBareBoneInput; var onChange = _a.onChange, multiline = _a.multiline, inputProps = _a.inputProps, iconName = _a.iconName, onKeyDown = _a.onKeyDown, props = __rest(_a, ["className", "label", "timeout", "labelTooltipText", "disabled", "useBareBoneInput", "onChange", "multiline", "inputProps", "iconName", "onKeyDown"]);
7695
+ var _b = _a.className, className = _b === void 0 ? "" : _b, label = _a.label, timeout = _a.timeout, labelTooltipText = _a.labelTooltipText, disabled = _a.disabled; _a.useBareBoneInput; var onChange = _a.onChange, multiline = _a.multiline, inputProps = _a.inputProps, iconName = _a.iconName, onKeyDown = _a.onKeyDown, size = _a.size, props = __rest(_a, ["className", "label", "timeout", "labelTooltipText", "disabled", "useBareBoneInput", "onChange", "multiline", "inputProps", "iconName", "onKeyDown", "size"]);
7665
7696
  var cLabel = label;
7666
7697
  var timeoutRef = useRef(undefined);
7667
7698
  function onChangeHandler(e) {
@@ -7708,9 +7739,9 @@ var TextField = forwardRef(function (_a, ref) {
7708
7739
  onKeyDown && onKeyDown(event);
7709
7740
  }
7710
7741
  inputProps = __assign({ maxLength: 256 }, inputProps);
7711
- return React__default.createElement(Box$1, { className: "textfield-component-v2 ".concat(className, " ").concat(disabled ? "disabled" : "", " ") },
7742
+ return React__default.createElement(Box$1, { className: "textfield-component-v2 ".concat(className, " ").concat(disabled ? "disabled" : "", " ").concat(size) },
7712
7743
  iconName && React__default.createElement(Icon, { name: iconName }),
7713
- React__default.createElement(MUITextField, __assign({}, props, { inputProps: inputProps, onChange: onChangeHandler, label: cLabel, disabled: disabled, onKeyDown: handleKeyDown, multiline: multiline, inputRef: ref })));
7744
+ React__default.createElement(MUITextField, __assign({}, props, { inputProps: inputProps, onChange: onChangeHandler, label: cLabel, disabled: disabled, onKeyDown: handleKeyDown, multiline: multiline, inputRef: ref, size: size })));
7714
7745
  });
7715
7746
 
7716
7747
  var css_248z$u = ".assetmanager-component-v2 {\n box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);\n background: var(--background-color-1, var(--white, #FFFFFF));\n min-width: 25rem;\n width: 100%;\n}\n.assetmanager-component-v2 .loadingContainer-component-v2 {\n padding: 3rem;\n}\n.assetmanager-component-v2 .container {\n padding: 0.75rem;\n}\n.assetmanager-component-v2 .container > div.textInputContainer {\n display: flex;\n border: solid 1px var(--wild-sand, #dddddd);\n border-radius: 6px;\n justify-content: flex-start;\n align-items: center;\n}\n.assetmanager-component-v2 .container > div.textInputContainer > div .MuiSvgIcon-root {\n display: block;\n cursor: pointer;\n}\n.assetmanager-component-v2 .container > div.textInputContainer > div:first-child {\n padding: 0 0.75rem 0 0.75rem;\n height: 100%;\n}\n.assetmanager-component-v2 .container > div.textInputContainer > div:last-child:not(.textfield-component-v2) {\n padding: 0 0.875rem;\n height: 100%;\n}\n.assetmanager-component-v2 .container > div.textInputContainer .textfield-component-v2 {\n width: 100%;\n}\n.assetmanager-component-v2 .container > div.textInputContainer .textfield-component-v2 fieldset {\n outline: none !important;\n border: none !important;\n}\n.assetmanager-component-v2 .container > div.textInputContainer .textfield-component-v2 input {\n padding: 0.5rem 0 !important;\n}\n.assetmanager-component-v2 .container .optionsListingContainer {\n padding: 0 1.25rem 0.5rem 1.25rem;\n margin: 1.25rem 0 0.5rem 0;\n max-height: 20rem;\n overflow-y: auto;\n}\n.assetmanager-component-v2 .container .optionsListingContainer button {\n text-transform: capitalize;\n}\n.assetmanager-component-v2 .container .optionsListingContainer::-webkit-scrollbar {\n display: block;\n}\n.assetmanager-component-v2 .container .optionsListingContainer::-webkit-scrollbar-track:horizontal {\n position: absolute;\n bottom: -20px;\n}\n.assetmanager-component-v2 .container .optionsListingContainer::-webkit-scrollbar-track:vertical {\n border-bottom-left-radius: 0 !important;\n border-bottom-right-radius: 8px !important;\n border-top-right-radius: 8px !important;\n}\n.assetmanager-component-v2 .container .optionsListingContainer::-webkit-scrollbar-track {\n height: 2.5rem;\n width: 2.5rem;\n padding: 2rem;\n background-clip: content-box;\n border-bottom-left-radius: 8px;\n}\n.assetmanager-component-v2 .container .optionsListingContainer::-webkit-scrollbar-thumb {\n background: var(--body-font-color-2, var(--silver, #9B9B9B));\n border-radius: 24px;\n border-top: 5px solid var(--background-color-1, var(--white, #FFFFFF));\n border-bottom: 5px solid var(--background-color-1, var(--white, #FFFFFF));\n border-right: 5px solid var(--background-color-1, var(--white, #FFFFFF));\n border-left: 5px solid var(--background-color-1, var(--white, #FFFFFF));\n}\n.assetmanager-component-v2 .container .optionsListingContainer > div:first-child:not(.listItem) {\n padding-bottom: 0.75rem;\n text-transform: uppercase;\n font-weight: 700;\n color: var(--body-font-color, var(--dark-matter, #2B2B2B));\n}\n.assetmanager-component-v2 .container .optionsListingContainer > p.h8 {\n margin-bottom: 1rem;\n color: var(--body-font-color, var(--dark-matter, #2B2B2B));\n}\n.assetmanager-component-v2 .container .optionsListingContainer p.h8 {\n flex: 1;\n font-family: proxima-nova, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif;\n text-transform: uppercase;\n font-weight: 700;\n line-height: 1rem;\n font-size: 0.75rem;\n}\n.assetmanager-component-v2 .container .optionsListingContainer .listItem {\n display: flex;\n justify-content: space-between;\n align-items: center;\n min-height: 2rem;\n}\n.assetmanager-component-v2 .container .optionsListingContainer .listItem p.h8 {\n color: var(--body-font-color-2, var(--silver, #9B9B9B));\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n.assetmanager-component-v2 .container .optionsListingContainer .listItem > .MuiSvgIcon-root {\n margin-right: 1rem;\n}\n.assetmanager-component-v2 .container .optionsListingContainer .listItem.selected p.h8 {\n color: var(--secondary-brand-color, var(--teal, #0ABDAE));\n padding-right: 1rem;\n max-width: 100%;\n}\n.assetmanager-component-v2 .container .optionsListingContainer .listItem.selected .MuiSvgIcon-root span svg path {\n fill: var(--secondary-brand-color, var(--teal, #0ABDAE));\n}\n.assetmanager-component-v2 .container .optionsListingContainer .listItem .buttonContainer {\n margin-left: 1rem;\n visibility: hidden;\n}\n.assetmanager-component-v2 .container .optionsListingContainer .listItem .buttonContainer button:nth-child(2) {\n margin-left: 0.5rem;\n}\n.assetmanager-component-v2 .container .optionsListingContainer .listItem:hover .buttonContainer {\n visibility: visible;\n}\n.assetmanager-component-v2 > button:last-child {\n width: 100%;\n text-transform: uppercase;\n font-family: proxima-nova, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif;\n height: 3rem;\n border-top: 1px solid var(--wild-sand, #dddddd) !important;\n outline: none;\n border-radius: 0;\n font-weight: 700;\n}";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cakemail-org/ui-components-v2",
3
- "version": "2.2.103",
3
+ "version": "2.2.104",
4
4
  "description": "ui library kit made with material UI",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",