@instructure/ui-img 11.7.3-snapshot-7 → 11.7.3-snapshot-26

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 (11) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/Img/v1/index.js +43 -43
  3. package/es/Img/v1/styles.js +7 -5
  4. package/es/Img/v2/index.js +43 -43
  5. package/es/Img/v2/styles.js +7 -5
  6. package/lib/Img/v1/index.js +43 -43
  7. package/lib/Img/v1/styles.js +7 -5
  8. package/lib/Img/v2/index.js +43 -43
  9. package/lib/Img/v2/styles.js +7 -5
  10. package/package.json +11 -11
  11. package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [11.7.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
6
+ ## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-img
8
+
9
+ ### Bug Fixes
10
+
11
+ * **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
9
12
 
10
13
 
11
14
 
package/es/Img/v1/index.js CHANGED
@@ -1,6 +1,4 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
- const _excluded = ["src", "alt", "margin", "display", "overlay", "withGrayscale", "withBlur", "constrain", "width", "height", "elementRef", "styles", "loading"];
3
- var _dec, _class, _Img;
1
+ var _dec, _class;
4
2
  /*
5
3
  * The MIT License (MIT)
6
4
  *
@@ -38,47 +36,54 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
38
36
  category: components
39
37
  ---
40
38
  **/
41
- let Img = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Img = class Img extends Component {
42
- constructor(...args) {
43
- super(...args);
44
- this.ref = null;
45
- this.handleRef = el => {
46
- const elementRef = this.props.elementRef;
47
- this.ref = el;
48
- if (typeof elementRef === 'function') {
49
- elementRef(el);
50
- }
51
- };
52
- }
39
+ let Img = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Img extends Component {
40
+ static displayName = "Img";
41
+ static componentId = 'Img';
42
+ static allowedProps = allowedProps;
43
+ static defaultProps = {
44
+ alt: '',
45
+ display: 'inline-block',
46
+ withGrayscale: false,
47
+ withBlur: false
48
+ };
49
+ ref = null;
50
+ handleRef = el => {
51
+ const {
52
+ elementRef
53
+ } = this.props;
54
+ this.ref = el;
55
+ if (typeof elementRef === 'function') {
56
+ elementRef(el);
57
+ }
58
+ };
53
59
  componentDidMount() {
54
- var _this$props$makeStyle, _this$props;
55
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
60
+ this.props.makeStyles?.();
56
61
  }
57
62
  componentDidUpdate() {
58
- var _this$props$makeStyle2, _this$props2;
59
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
63
+ this.props.makeStyles?.();
60
64
  }
61
65
  render() {
62
- const _this$props3 = this.props,
63
- src = _this$props3.src,
64
- alt = _this$props3.alt,
65
- margin = _this$props3.margin,
66
- display = _this$props3.display,
67
- overlay = _this$props3.overlay,
68
- withGrayscale = _this$props3.withGrayscale,
69
- withBlur = _this$props3.withBlur,
70
- constrain = _this$props3.constrain,
71
- width = _this$props3.width,
72
- height = _this$props3.height,
73
- elementRef = _this$props3.elementRef,
74
- styles = _this$props3.styles,
75
- loading = _this$props3.loading,
76
- props = _objectWithoutProperties(_this$props3, _excluded);
66
+ const {
67
+ src,
68
+ alt,
69
+ margin,
70
+ display,
71
+ overlay,
72
+ withGrayscale,
73
+ withBlur,
74
+ constrain,
75
+ width,
76
+ height,
77
+ elementRef,
78
+ styles,
79
+ loading,
80
+ ...props
81
+ } = this.props;
77
82
  const a11yProps = {
78
83
  alt: alt || ''
79
84
  };
80
85
  const imageProps = {
81
- css: styles === null || styles === void 0 ? void 0 : styles.img,
86
+ css: styles?.img,
82
87
  src,
83
88
  loading
84
89
  };
@@ -98,13 +103,13 @@ let Img = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
98
103
  return _jsxs(View, {
99
104
  ...rootProps,
100
105
  as: "span",
101
- css: styles === null || styles === void 0 ? void 0 : styles.container,
106
+ css: styles?.container,
102
107
  "data-cid": "Img",
103
108
  children: [_jsx("img", {
104
109
  ...imageProps,
105
110
  ...a11yProps
106
111
  }), overlay && _jsx("span", {
107
- css: styles === null || styles === void 0 ? void 0 : styles.overlay
112
+ css: styles?.overlay
108
113
  })]
109
114
  });
110
115
  } else {
@@ -117,11 +122,6 @@ let Img = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
117
122
  });
118
123
  }
119
124
  }
120
- }, _Img.displayName = "Img", _Img.componentId = 'Img', _Img.allowedProps = allowedProps, _Img.defaultProps = {
121
- alt: '',
122
- display: 'inline-block',
123
- withGrayscale: false,
124
- withBlur: false
125
- }, _Img)) || _class);
125
+ }) || _class);
126
126
  export default Img;
127
127
  export { Img };
package/es/Img/v1/styles.js CHANGED
@@ -33,10 +33,12 @@
33
33
  * @return {Object} The final style object, which will be used in the component
34
34
  */
35
35
  const generateStyle = (componentTheme, props) => {
36
- const overlay = props.overlay,
37
- withBlur = props.withBlur,
38
- withGrayscale = props.withGrayscale,
39
- constrain = props.constrain;
36
+ const {
37
+ overlay,
38
+ withBlur,
39
+ withGrayscale,
40
+ constrain
41
+ } = props;
40
42
  const isCover = constrain === 'cover';
41
43
  const isContain = constrain === 'contain';
42
44
 
@@ -86,7 +88,7 @@ const generateStyle = (componentTheme, props) => {
86
88
  ...(overlay && {
87
89
  backgroundColor: overlay.color,
88
90
  opacity: overlay.opacity * 0.1,
89
- mixBlendMode: overlay.blend ? overlay.blend : void 0
91
+ mixBlendMode: overlay.blend ? overlay.blend : undefined
90
92
  })
91
93
  },
92
94
  container: {
package/es/Img/v2/index.js CHANGED
@@ -1,6 +1,4 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
- const _excluded = ["src", "alt", "margin", "display", "overlay", "withGrayscale", "withBlur", "constrain", "width", "height", "elementRef", "styles", "loading"];
3
- var _dec, _class, _Img;
1
+ var _dec, _class;
4
2
  /*
5
3
  * The MIT License (MIT)
6
4
  *
@@ -37,47 +35,54 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
37
35
  category: components
38
36
  ---
39
37
  **/
40
- let Img = (_dec = withStyle(generateStyle), _dec(_class = (_Img = class Img extends Component {
41
- constructor(...args) {
42
- super(...args);
43
- this.ref = null;
44
- this.handleRef = el => {
45
- const elementRef = this.props.elementRef;
46
- this.ref = el;
47
- if (typeof elementRef === 'function') {
48
- elementRef(el);
49
- }
50
- };
51
- }
38
+ let Img = (_dec = withStyle(generateStyle), _dec(_class = class Img extends Component {
39
+ static displayName = "Img";
40
+ static componentId = 'Img';
41
+ static allowedProps = allowedProps;
42
+ static defaultProps = {
43
+ alt: '',
44
+ display: 'inline-block',
45
+ withGrayscale: false,
46
+ withBlur: false
47
+ };
48
+ ref = null;
49
+ handleRef = el => {
50
+ const {
51
+ elementRef
52
+ } = this.props;
53
+ this.ref = el;
54
+ if (typeof elementRef === 'function') {
55
+ elementRef(el);
56
+ }
57
+ };
52
58
  componentDidMount() {
53
- var _this$props$makeStyle, _this$props;
54
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
59
+ this.props.makeStyles?.();
55
60
  }
56
61
  componentDidUpdate() {
57
- var _this$props$makeStyle2, _this$props2;
58
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
62
+ this.props.makeStyles?.();
59
63
  }
60
64
  render() {
61
- const _this$props3 = this.props,
62
- src = _this$props3.src,
63
- alt = _this$props3.alt,
64
- margin = _this$props3.margin,
65
- display = _this$props3.display,
66
- overlay = _this$props3.overlay,
67
- withGrayscale = _this$props3.withGrayscale,
68
- withBlur = _this$props3.withBlur,
69
- constrain = _this$props3.constrain,
70
- width = _this$props3.width,
71
- height = _this$props3.height,
72
- elementRef = _this$props3.elementRef,
73
- styles = _this$props3.styles,
74
- loading = _this$props3.loading,
75
- props = _objectWithoutProperties(_this$props3, _excluded);
65
+ const {
66
+ src,
67
+ alt,
68
+ margin,
69
+ display,
70
+ overlay,
71
+ withGrayscale,
72
+ withBlur,
73
+ constrain,
74
+ width,
75
+ height,
76
+ elementRef,
77
+ styles,
78
+ loading,
79
+ ...props
80
+ } = this.props;
76
81
  const a11yProps = {
77
82
  alt: alt || ''
78
83
  };
79
84
  const imageProps = {
80
- css: styles === null || styles === void 0 ? void 0 : styles.img,
85
+ css: styles?.img,
81
86
  src,
82
87
  loading
83
88
  };
@@ -97,13 +102,13 @@ let Img = (_dec = withStyle(generateStyle), _dec(_class = (_Img = class Img exte
97
102
  return _jsxs(View, {
98
103
  ...rootProps,
99
104
  as: "span",
100
- css: styles === null || styles === void 0 ? void 0 : styles.container,
105
+ css: styles?.container,
101
106
  "data-cid": "Img",
102
107
  children: [_jsx("img", {
103
108
  ...imageProps,
104
109
  ...a11yProps
105
110
  }), overlay && _jsx("span", {
106
- css: styles === null || styles === void 0 ? void 0 : styles.overlay
111
+ css: styles?.overlay
107
112
  })]
108
113
  });
109
114
  } else {
@@ -116,11 +121,6 @@ let Img = (_dec = withStyle(generateStyle), _dec(_class = (_Img = class Img exte
116
121
  });
117
122
  }
118
123
  }
119
- }, _Img.displayName = "Img", _Img.componentId = 'Img', _Img.allowedProps = allowedProps, _Img.defaultProps = {
120
- alt: '',
121
- display: 'inline-block',
122
- withGrayscale: false,
123
- withBlur: false
124
- }, _Img)) || _class);
124
+ }) || _class);
125
125
  export default Img;
126
126
  export { Img };
package/es/Img/v2/styles.js CHANGED
@@ -32,10 +32,12 @@
32
32
  * @return {Object} The final style object, which will be used in the component
33
33
  */
34
34
  const generateStyle = (componentTheme, props) => {
35
- const overlay = props.overlay,
36
- withBlur = props.withBlur,
37
- withGrayscale = props.withGrayscale,
38
- constrain = props.constrain;
35
+ const {
36
+ overlay,
37
+ withBlur,
38
+ withGrayscale,
39
+ constrain
40
+ } = props;
39
41
  const isCover = constrain === 'cover';
40
42
  const isContain = constrain === 'contain';
41
43
 
@@ -85,7 +87,7 @@ const generateStyle = (componentTheme, props) => {
85
87
  ...(overlay && {
86
88
  backgroundColor: overlay.color,
87
89
  opacity: overlay.opacity * 0.1,
88
- mixBlendMode: overlay.blend ? overlay.blend : void 0
90
+ mixBlendMode: overlay.blend ? overlay.blend : undefined
89
91
  })
90
92
  },
91
93
  container: {
package/lib/Img/v1/index.js CHANGED
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = exports.Img = void 0;
8
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
9
8
  var _react = require("react");
10
9
  var _v11_ = require("@instructure/ui-view/v11_6");
11
10
  var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
@@ -14,8 +13,7 @@ var _styles = _interopRequireDefault(require("./styles"));
14
13
  var _theme = _interopRequireDefault(require("./theme"));
15
14
  var _props = require("./props");
16
15
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
17
- const _excluded = ["src", "alt", "margin", "display", "overlay", "withGrayscale", "withBlur", "constrain", "width", "height", "elementRef", "styles", "loading"];
18
- var _dec, _class, _Img;
16
+ var _dec, _class;
19
17
  /*
20
18
  * The MIT License (MIT)
21
19
  *
@@ -44,47 +42,54 @@ var _dec, _class, _Img;
44
42
  category: components
45
43
  ---
46
44
  **/
47
- let Img = exports.Img = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_Img = class Img extends _react.Component {
48
- constructor(...args) {
49
- super(...args);
50
- this.ref = null;
51
- this.handleRef = el => {
52
- const elementRef = this.props.elementRef;
53
- this.ref = el;
54
- if (typeof elementRef === 'function') {
55
- elementRef(el);
56
- }
57
- };
58
- }
45
+ let Img = exports.Img = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = class Img extends _react.Component {
46
+ static displayName = "Img";
47
+ static componentId = 'Img';
48
+ static allowedProps = _props.allowedProps;
49
+ static defaultProps = {
50
+ alt: '',
51
+ display: 'inline-block',
52
+ withGrayscale: false,
53
+ withBlur: false
54
+ };
55
+ ref = null;
56
+ handleRef = el => {
57
+ const {
58
+ elementRef
59
+ } = this.props;
60
+ this.ref = el;
61
+ if (typeof elementRef === 'function') {
62
+ elementRef(el);
63
+ }
64
+ };
59
65
  componentDidMount() {
60
- var _this$props$makeStyle, _this$props;
61
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
66
+ this.props.makeStyles?.();
62
67
  }
63
68
  componentDidUpdate() {
64
- var _this$props$makeStyle2, _this$props2;
65
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
69
+ this.props.makeStyles?.();
66
70
  }
67
71
  render() {
68
- const _this$props3 = this.props,
69
- src = _this$props3.src,
70
- alt = _this$props3.alt,
71
- margin = _this$props3.margin,
72
- display = _this$props3.display,
73
- overlay = _this$props3.overlay,
74
- withGrayscale = _this$props3.withGrayscale,
75
- withBlur = _this$props3.withBlur,
76
- constrain = _this$props3.constrain,
77
- width = _this$props3.width,
78
- height = _this$props3.height,
79
- elementRef = _this$props3.elementRef,
80
- styles = _this$props3.styles,
81
- loading = _this$props3.loading,
82
- props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
72
+ const {
73
+ src,
74
+ alt,
75
+ margin,
76
+ display,
77
+ overlay,
78
+ withGrayscale,
79
+ withBlur,
80
+ constrain,
81
+ width,
82
+ height,
83
+ elementRef,
84
+ styles,
85
+ loading,
86
+ ...props
87
+ } = this.props;
83
88
  const a11yProps = {
84
89
  alt: alt || ''
85
90
  };
86
91
  const imageProps = {
87
- css: styles === null || styles === void 0 ? void 0 : styles.img,
92
+ css: styles?.img,
88
93
  src,
89
94
  loading
90
95
  };
@@ -104,13 +109,13 @@ let Img = exports.Img = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _
104
109
  return (0, _jsxRuntime.jsxs)(_v11_.View, {
105
110
  ...rootProps,
106
111
  as: "span",
107
- css: styles === null || styles === void 0 ? void 0 : styles.container,
112
+ css: styles?.container,
108
113
  "data-cid": "Img",
109
114
  children: [(0, _jsxRuntime.jsx)("img", {
110
115
  ...imageProps,
111
116
  ...a11yProps
112
117
  }), overlay && (0, _jsxRuntime.jsx)("span", {
113
- css: styles === null || styles === void 0 ? void 0 : styles.overlay
118
+ css: styles?.overlay
114
119
  })]
115
120
  });
116
121
  } else {
@@ -123,10 +128,5 @@ let Img = exports.Img = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _
123
128
  });
124
129
  }
125
130
  }
126
- }, _Img.displayName = "Img", _Img.componentId = 'Img', _Img.allowedProps = _props.allowedProps, _Img.defaultProps = {
127
- alt: '',
128
- display: 'inline-block',
129
- withGrayscale: false,
130
- withBlur: false
131
- }, _Img)) || _class);
131
+ }) || _class);
132
132
  var _default = exports.default = Img;
package/lib/Img/v1/styles.js CHANGED
@@ -39,10 +39,12 @@ exports.default = void 0;
39
39
  * @return {Object} The final style object, which will be used in the component
40
40
  */
41
41
  const generateStyle = (componentTheme, props) => {
42
- const overlay = props.overlay,
43
- withBlur = props.withBlur,
44
- withGrayscale = props.withGrayscale,
45
- constrain = props.constrain;
42
+ const {
43
+ overlay,
44
+ withBlur,
45
+ withGrayscale,
46
+ constrain
47
+ } = props;
46
48
  const isCover = constrain === 'cover';
47
49
  const isContain = constrain === 'contain';
48
50
 
@@ -92,7 +94,7 @@ const generateStyle = (componentTheme, props) => {
92
94
  ...(overlay && {
93
95
  backgroundColor: overlay.color,
94
96
  opacity: overlay.opacity * 0.1,
95
- mixBlendMode: overlay.blend ? overlay.blend : void 0
97
+ mixBlendMode: overlay.blend ? overlay.blend : undefined
96
98
  })
97
99
  },
98
100
  container: {
package/lib/Img/v2/index.js CHANGED
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = exports.Img = void 0;
8
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
9
8
  var _react = require("react");
10
9
  var _latest = require("@instructure/ui-view/latest");
11
10
  var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
@@ -13,8 +12,7 @@ var _emotion = require("@instructure/emotion");
13
12
  var _styles = _interopRequireDefault(require("./styles"));
14
13
  var _props = require("./props");
15
14
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
16
- const _excluded = ["src", "alt", "margin", "display", "overlay", "withGrayscale", "withBlur", "constrain", "width", "height", "elementRef", "styles", "loading"];
17
- var _dec, _class, _Img;
15
+ var _dec, _class;
18
16
  /*
19
17
  * The MIT License (MIT)
20
18
  *
@@ -43,47 +41,54 @@ var _dec, _class, _Img;
43
41
  category: components
44
42
  ---
45
43
  **/
46
- let Img = exports.Img = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_Img = class Img extends _react.Component {
47
- constructor(...args) {
48
- super(...args);
49
- this.ref = null;
50
- this.handleRef = el => {
51
- const elementRef = this.props.elementRef;
52
- this.ref = el;
53
- if (typeof elementRef === 'function') {
54
- elementRef(el);
55
- }
56
- };
57
- }
44
+ let Img = exports.Img = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = class Img extends _react.Component {
45
+ static displayName = "Img";
46
+ static componentId = 'Img';
47
+ static allowedProps = _props.allowedProps;
48
+ static defaultProps = {
49
+ alt: '',
50
+ display: 'inline-block',
51
+ withGrayscale: false,
52
+ withBlur: false
53
+ };
54
+ ref = null;
55
+ handleRef = el => {
56
+ const {
57
+ elementRef
58
+ } = this.props;
59
+ this.ref = el;
60
+ if (typeof elementRef === 'function') {
61
+ elementRef(el);
62
+ }
63
+ };
58
64
  componentDidMount() {
59
- var _this$props$makeStyle, _this$props;
60
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
65
+ this.props.makeStyles?.();
61
66
  }
62
67
  componentDidUpdate() {
63
- var _this$props$makeStyle2, _this$props2;
64
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
68
+ this.props.makeStyles?.();
65
69
  }
66
70
  render() {
67
- const _this$props3 = this.props,
68
- src = _this$props3.src,
69
- alt = _this$props3.alt,
70
- margin = _this$props3.margin,
71
- display = _this$props3.display,
72
- overlay = _this$props3.overlay,
73
- withGrayscale = _this$props3.withGrayscale,
74
- withBlur = _this$props3.withBlur,
75
- constrain = _this$props3.constrain,
76
- width = _this$props3.width,
77
- height = _this$props3.height,
78
- elementRef = _this$props3.elementRef,
79
- styles = _this$props3.styles,
80
- loading = _this$props3.loading,
81
- props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
71
+ const {
72
+ src,
73
+ alt,
74
+ margin,
75
+ display,
76
+ overlay,
77
+ withGrayscale,
78
+ withBlur,
79
+ constrain,
80
+ width,
81
+ height,
82
+ elementRef,
83
+ styles,
84
+ loading,
85
+ ...props
86
+ } = this.props;
82
87
  const a11yProps = {
83
88
  alt: alt || ''
84
89
  };
85
90
  const imageProps = {
86
- css: styles === null || styles === void 0 ? void 0 : styles.img,
91
+ css: styles?.img,
87
92
  src,
88
93
  loading
89
94
  };
@@ -103,13 +108,13 @@ let Img = exports.Img = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_
103
108
  return (0, _jsxRuntime.jsxs)(_latest.View, {
104
109
  ...rootProps,
105
110
  as: "span",
106
- css: styles === null || styles === void 0 ? void 0 : styles.container,
111
+ css: styles?.container,
107
112
  "data-cid": "Img",
108
113
  children: [(0, _jsxRuntime.jsx)("img", {
109
114
  ...imageProps,
110
115
  ...a11yProps
111
116
  }), overlay && (0, _jsxRuntime.jsx)("span", {
112
- css: styles === null || styles === void 0 ? void 0 : styles.overlay
117
+ css: styles?.overlay
113
118
  })]
114
119
  });
115
120
  } else {
@@ -122,10 +127,5 @@ let Img = exports.Img = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_
122
127
  });
123
128
  }
124
129
  }
125
- }, _Img.displayName = "Img", _Img.componentId = 'Img', _Img.allowedProps = _props.allowedProps, _Img.defaultProps = {
126
- alt: '',
127
- display: 'inline-block',
128
- withGrayscale: false,
129
- withBlur: false
130
- }, _Img)) || _class);
130
+ }) || _class);
131
131
  var _default = exports.default = Img;
package/lib/Img/v2/styles.js CHANGED
@@ -38,10 +38,12 @@ exports.default = void 0;
38
38
  * @return {Object} The final style object, which will be used in the component
39
39
  */
40
40
  const generateStyle = (componentTheme, props) => {
41
- const overlay = props.overlay,
42
- withBlur = props.withBlur,
43
- withGrayscale = props.withGrayscale,
44
- constrain = props.constrain;
41
+ const {
42
+ overlay,
43
+ withBlur,
44
+ withGrayscale,
45
+ constrain
46
+ } = props;
45
47
  const isCover = constrain === 'cover';
46
48
  const isContain = constrain === 'contain';
47
49
 
@@ -91,7 +93,7 @@ const generateStyle = (componentTheme, props) => {
91
93
  ...(overlay && {
92
94
  backgroundColor: overlay.color,
93
95
  opacity: overlay.opacity * 0.1,
94
- mixBlendMode: overlay.blend ? overlay.blend : void 0
96
+ mixBlendMode: overlay.blend ? overlay.blend : undefined
95
97
  })
96
98
  },
97
99
  container: {