@galaxy-ds/core 2.1.6 → 2.1.8

package/dist/index.esm.js

@@ -875,7 +875,7 @@ var autocompleteOverrides$1 = {
                 marginBottom: 0,
             },
             '& .MuiAutocomplete-input:first-of-type.MuiInputBase-input': {
-                padding: '0 4px',
+                padding: '0 8px',
             },
         },
         inputRoot: {
@@ -1195,6 +1195,23 @@ var dropdownOverrides$1 = {
             fontSize: 12,
             display: 'none',
         },
+        root: function () { return ({
+            '&.MuiInputBase-adornedStart': {
+                '.MuiSvgIcon-root': {
+                    fontSize: 16,
+                    left: 8,
+                    position: 'absolute',
+                    margin: 0,
+                },
+            },
+            '&.customSelectInputBackground': {
+                select: {
+                    '&.MuiOutlinedInput-input': {
+                        padding: 0,
+                    },
+                },
+            },
+        }); },
         select: function (_a) {
             var theme = _a.theme;
             return (__assign(__assign({}, theme.typography.body1), { lineHeight: '1.375rem', background: "url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.0625 3.66666L9.9375 4.54166L6 8.47916L2.0625 4.54166L2.9375 3.66666L6 6.72916L9.0625 3.66666Z' fill='%23444444'/%3E%3C/svg%3E\") center right 3px no-repeat", cursor: 'default', '&.MuiInputBase-input': {
@@ -1204,12 +1221,16 @@ var dropdownOverrides$1 = {
                 }, '.customLargeSize &': {
                     height: 30,
                     lineHeight: '30px',
+                }, '&.MuiOutlinedInput-input': {
+                    zIndex: '1001',
+                    paddingLeft: 8,
+                }, '&.MuiInputBase-inputAdornedStart.MuiOutlinedInput-input': {
+                    padding: '0 24px 0 32px',
+                    zIndex: '1001',
                 }, '& .customSelectInputBackground': {
                     borderColor: theme.palette.grey[500],
                     cursor: 'default',
                     '&:hover': {
-                        // backgroundColor: pallettes.brand.background.accent.lighter,
-                        // borderColor: pallettes.brand.utility.accent.dark,
                         cursor: 'default',
                     },
                 } }));
@@ -1345,17 +1366,16 @@ var inputBaseOverrides$1 = {
                     },
                 },
                 '&.customSelectInputBackground.MuiInputBase-adornedStart > .MuiSvgIcon-root': {
-                    position: 'absolute',
                     fontSize: 16,
                 },
                 '&.customSelectInputBackground .MuiInputBase-inputAdornedStart': {
-                    paddingLeft: 24,
+                    paddingLeft: 12,
                 },
             });
         },
         adornedStart: {
             '& svg:first-of-type': {
-                marginLeft: 3,
+                marginLeft: 12,
             },
         },
         input: {
@@ -1478,8 +1498,8 @@ var listSubheaderOverrides$1 = {
                 }, '&.MuiListSubheader-gutters': {
                     paddingTop: 0,
                     paddingBottom: 0,
-                    paddingLeft: 2,
-                    paddingRight: 2,
+                    paddingLeft: 8,
+                    paddingRight: 8,
                 } }));
         },
     },
@@ -1544,7 +1564,7 @@ var menuItemOverrides$1 = {
             var _b;
             var theme = _a.theme;
             return ({
-                '&.MuiMenuItem-root': __assign(__assign({}, theme.typography.body1), (_b = { lineHeight: '1.25rem', padding: 4, paddingTop: 0, paddingBottom: 0, backgroundColor: theme.palette.grey[50], transition: 'none' }, _b[theme.breakpoints.down('sm')] = {
+                '&.MuiMenuItem-root': __assign(__assign({}, theme.typography.body1), (_b = { lineHeight: '1.25rem', paddingLeft: 8, paddingTop: 0, paddingBottom: 0, backgroundColor: theme.palette.grey[50], transition: 'none' }, _b[theme.breakpoints.down('sm')] = {
                     minHeight: 40,
                 }, _b['@media (hover: none)'] = {
                     minHeight: 40,
@@ -1570,7 +1590,7 @@ var menuItemOverrides$1 = {
                         lineHeight: '1.25rem',
                     },
                 }, _b['& .MuiFormControlLabel-root'] = {
-                    marginRight: 6,
+                    marginRight: 4,
                 }, _b['&.gds-drawer-menu-item-dark'] = {
                     backgroundColor: theme.palette.primary.main,
                     color: theme.palette.grey[200],
@@ -2769,10 +2789,17 @@ var dropdownOverrides = {
                     '.MuiSvgIcon-root': {
                         fontSize: 16,
                         left: 16,
-                        position: 'relative',
+                        position: 'absolute',
                         margin: 0,
                     },
                 },
+                '&.customSelectInputBackground': {
+                    select: {
+                        '&.MuiOutlinedInput-input': {
+                            padding: 0,
+                        },
+                    },
+                },
                 '&:hover': {
                     backgroundColor: theme.palette.primary.transparent,
                     borderColor: theme.palette.primary.main,
@@ -2820,7 +2847,11 @@ var dropdownOverrides = {
             fontWeight: 600,
             letterSpacing: '.02em',
             '&.MuiOutlinedInput-input': {
-                padding: '8px 32px 8px 16px',
+                zIndex: '1001',
+            },
+            '&.MuiInputBase-inputAdornedStart.MuiOutlinedInput-input': {
+                padding: '8px 36px 8px 46px',
+                zIndex: '1001',
             },
         },
     },
@@ -18716,12 +18747,13 @@ var StyledFormHelperText = styled(FormHelperText)(function (_a) {
 });
 
 var Input = React.forwardRef(function Input(props, ref) {
-    var _a = props.error, error = _a === void 0 ? false : _a, helperText = props.helperText, _b = props.textAlignRight, textAlignRight = _b === void 0 ? false : _b, label = props.label, _c = props.size, size = _c === void 0 ? 'medium' : _c, _d = props.background, background = _d === void 0 ? 'default' : _d, className = props.className, inputPropStyles = props.inputPropStyles, rest = __rest(props, ["error", "helperText", "textAlignRight", "label", "size", "background", "className", "inputPropStyles"]);
+    var _a = props.error, error = _a === void 0 ? false : _a, helperText = props.helperText, _b = props.textAlignRight, textAlignRight = _b === void 0 ? false : _b, label = props.label, _c = props.size, size = _c === void 0 ? 'medium' : _c, _d = props.background, background = _d === void 0 ? 'default' : _d, className = props.className, inputPropStyles = props.inputPropStyles, minRows = props.minRows, maxRows = props.maxRows, rows = props.rows, rest = __rest(props, ["error", "helperText", "textAlignRight", "label", "size", "background", "className", "inputPropStyles", "minRows", "maxRows", "rows"]);
     return (jsxs(Fragment$1, { children: [label && jsx(FormLabelBlock, { children: label }), jsx(StyledInputBase, __assign({ ref: ref, error: error, textAlignRight: textAlignRight, className: clsx(size === 'large' && 'customLargeSize', background === 'light' && 'customLightColor', className), inputProps: {
                     style: __assign({ 
-                        // EDGECASE: When we use multiline and set minRows, maxRows, rows we need to define the width of the input. By default we set this to 162.
-                        width: inputPropStyles ? inputPropStyles.width : 162 }, inputPropStyles),
-                } }, rest)), helperText && (jsx(StyledFormHelperText, { error: error, children: helperText }))] }));
+                        // EDGECASE: When we use multiline and set minRows, maxRows, rows we need to define the width of the input. 100% here will inherit parent container.
+                        // If there's no container we need to define the width. Otherwise the input will fluctate in size on keydown when rows param exist.
+                        width: inputPropStyles ? inputPropStyles.width : '100%' }, inputPropStyles),
+                }, rows: rows, minRows: minRows, maxRows: maxRows }, rest)), helperText && (jsx(StyledFormHelperText, { error: error, children: helperText }))] }));
 });
 
 var ListItemAvatar = function (props) {