@instructure/ui-img 11.7.2-snapshot-45 → 11.7.2-snapshot-46

package/CHANGELOG.md

@@ -3,9 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.2-snapshot-45](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-45) (2026-04-10)
+## [11.7.2-snapshot-46](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-46) (2026-04-10)
 
-**Note:** Version bump only for package @instructure/ui-img
+
+### Features
+
+* **ui-img:** rework Img ([5e7a355](https://github.com/instructure/instructure-ui/commit/5e7a3556401ac3155a8ff58baad9359095f654ff))
+
+
+### BREAKING CHANGES
+
+* **ui-img:** contains breaking changes due to component using the new theming system
+
+INSTUI-4970
 
 
 

package/es/Img/v2/index.js

@@ -0,0 +1,126 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["src", "alt", "margin", "display", "overlay", "withGrayscale", "withBlur", "constrain", "width", "height", "elementRef", "styles", "loading"];
+var _dec, _class, _Img;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Component } from 'react';
+import { View } from '@instructure/ui-view/latest';
+import { passthroughProps } from '@instructure/ui-react-utils';
+import { withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/**
+---
+category: components
+---
+**/
+let Img = (_dec = withStyle(generateStyle), _dec(_class = (_Img = class Img extends Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  render() {
+    const _this$props3 = this.props,
+      src = _this$props3.src,
+      alt = _this$props3.alt,
+      margin = _this$props3.margin,
+      display = _this$props3.display,
+      overlay = _this$props3.overlay,
+      withGrayscale = _this$props3.withGrayscale,
+      withBlur = _this$props3.withBlur,
+      constrain = _this$props3.constrain,
+      width = _this$props3.width,
+      height = _this$props3.height,
+      elementRef = _this$props3.elementRef,
+      styles = _this$props3.styles,
+      loading = _this$props3.loading,
+      props = _objectWithoutProperties(_this$props3, _excluded);
+    const a11yProps = {
+      alt: alt || ''
+    };
+    const imageProps = {
+      css: styles === null || styles === void 0 ? void 0 : styles.img,
+      src,
+      loading
+    };
+    const containerProps = {
+      ...passthroughProps(props),
+      width,
+      height,
+      margin,
+      display,
+      elementRef: this.handleRef
+    };
+    if (overlay) {
+      // if a background image is rendered we add the a11y props on the container element
+      const rootProps = {
+        ...containerProps
+      };
+      return _jsxs(View, {
+        ...rootProps,
+        as: "span",
+        css: styles === null || styles === void 0 ? void 0 : styles.container,
+        "data-cid": "Img",
+        children: [_jsx("img", {
+          ...imageProps,
+          ...a11yProps
+        }), overlay && _jsx("span", {
+          css: styles === null || styles === void 0 ? void 0 : styles.overlay
+        })]
+      });
+    } else {
+      return _jsx(View, {
+        ...containerProps,
+        ...imageProps,
+        ...a11yProps,
+        as: "img",
+        "data-cid": "Img"
+      });
+    }
+  }
+}, _Img.displayName = "Img", _Img.componentId = 'Img', _Img.allowedProps = allowedProps, _Img.defaultProps = {
+  alt: '',
+  display: 'inline-block',
+  withGrayscale: false,
+  withBlur: false
+}, _Img)) || _class);
+export default Img;
+export { Img };

package/es/Img/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = ['src', 'alt', 'display', 'loading', 'margin', 'overlay', 'withGrayscale', 'withBlur', 'constrain', 'elementRef', 'height', 'width'];
+export { allowedProps };

package/es/Img/v2/styles.js

@@ -0,0 +1,132 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props) => {
+  const overlay = props.overlay,
+    withBlur = props.withBlur,
+    withGrayscale = props.withGrayscale,
+    constrain = props.constrain;
+  const isCover = constrain === 'cover';
+  const isContain = constrain === 'contain';
+
+  // if overlay or filters are updated via props,
+  // make the transition look smooth
+  const transitionStyle = {
+    transition: `all ${componentTheme.effectTransitionDuration}`
+  };
+  const getFilterStyle = () => {
+    const filters = [];
+    withBlur && filters.push(`blur(${componentTheme.imageBlurAmount})`);
+    withGrayscale && filters.push('grayscale(1)');
+    return filters.length > 0 ? {
+      ...transitionStyle,
+      filter: filters.join(' ')
+    } : {
+      filter: 'none'
+    };
+  };
+  const fillContainer = {
+    width: '100%',
+    height: '100%'
+  };
+  const imgCoverStyle = {
+    objectFit: 'cover',
+    ...fillContainer
+  };
+  const imgContainStyle = {
+    objectFit: 'contain',
+    ...fillContainer,
+    ...(overlay && {
+      width: 'auto',
+      height: 'auto',
+      maxWidth: '100%',
+      maxHeight: '100%'
+    })
+  };
+  return {
+    overlay: {
+      label: 'img__overlay',
+      position: 'absolute',
+      top: '0px',
+      left: '0px',
+      width: '100%',
+      height: '100%',
+      ...transitionStyle,
+      ...(overlay && {
+        backgroundColor: overlay.color,
+        opacity: overlay.opacity * 0.1,
+        mixBlendMode: overlay.blend ? overlay.blend : void 0
+      })
+    },
+    container: {
+      label: 'img__container',
+      ...(overlay && {
+        position: 'relative',
+        overflow: 'hidden' /* stops blurred images extending past overlay borders */
+      }),
+      ...(isCover && fillContainer),
+      ...(isContain && {
+        height: 'inherit'
+      })
+    },
+    img: {
+      label: 'img',
+      // reset image styles (initial: all was causing conflicts
+      // View's CSS and overriding height/width attrs)
+      margin: '0',
+      padding: '0',
+      float: 'none',
+      top: 'auto',
+      bottom: 'auto',
+      left: 'auto',
+      right: 'auto',
+      lineHeight: 'normal',
+      position: 'static',
+      transform: 'none',
+      maxHeight: 'none',
+      minHeight: '0',
+      minWidth: '0',
+      maxWidth: '100%',
+      ...getFilterStyle(),
+      ...(overlay && {
+        // when image is contained in overlay,
+        // avoid extra space at bottom from inline/line-height
+        display: 'block'
+      }),
+      ...(isCover && imgCoverStyle),
+      ...(isContain && imgContainStyle)
+    }
+  };
+};
+export default generateStyle;

package/es/exports/b.js

@@ -0,0 +1,24 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export { Img } from "../Img/v2/index.js";

package/lib/Img/v2/index.js

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Img = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _latest = require("@instructure/ui-view/latest");
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+const _excluded = ["src", "alt", "margin", "display", "overlay", "withGrayscale", "withBlur", "constrain", "width", "height", "elementRef", "styles", "loading"];
+var _dec, _class, _Img;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+---
+category: components
+---
+**/
+let Img = exports.Img = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_Img = class Img extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  render() {
+    const _this$props3 = this.props,
+      src = _this$props3.src,
+      alt = _this$props3.alt,
+      margin = _this$props3.margin,
+      display = _this$props3.display,
+      overlay = _this$props3.overlay,
+      withGrayscale = _this$props3.withGrayscale,
+      withBlur = _this$props3.withBlur,
+      constrain = _this$props3.constrain,
+      width = _this$props3.width,
+      height = _this$props3.height,
+      elementRef = _this$props3.elementRef,
+      styles = _this$props3.styles,
+      loading = _this$props3.loading,
+      props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+    const a11yProps = {
+      alt: alt || ''
+    };
+    const imageProps = {
+      css: styles === null || styles === void 0 ? void 0 : styles.img,
+      src,
+      loading
+    };
+    const containerProps = {
+      ...(0, _passthroughProps.passthroughProps)(props),
+      width,
+      height,
+      margin,
+      display,
+      elementRef: this.handleRef
+    };
+    if (overlay) {
+      // if a background image is rendered we add the a11y props on the container element
+      const rootProps = {
+        ...containerProps
+      };
+      return (0, _jsxRuntime.jsxs)(_latest.View, {
+        ...rootProps,
+        as: "span",
+        css: styles === null || styles === void 0 ? void 0 : styles.container,
+        "data-cid": "Img",
+        children: [(0, _jsxRuntime.jsx)("img", {
+          ...imageProps,
+          ...a11yProps
+        }), overlay && (0, _jsxRuntime.jsx)("span", {
+          css: styles === null || styles === void 0 ? void 0 : styles.overlay
+        })]
+      });
+    } else {
+      return (0, _jsxRuntime.jsx)(_latest.View, {
+        ...containerProps,
+        ...imageProps,
+        ...a11yProps,
+        as: "img",
+        "data-cid": "Img"
+      });
+    }
+  }
+}, _Img.displayName = "Img", _Img.componentId = 'Img', _Img.allowedProps = _props.allowedProps, _Img.defaultProps = {
+  alt: '',
+  display: 'inline-block',
+  withGrayscale: false,
+  withBlur: false
+}, _Img)) || _class);
+var _default = exports.default = Img;

package/lib/Img/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = exports.allowedProps = ['src', 'alt', 'display', 'loading', 'margin', 'overlay', 'withGrayscale', 'withBlur', 'constrain', 'elementRef', 'height', 'width'];

package/lib/Img/v2/styles.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props) => {
+  const overlay = props.overlay,
+    withBlur = props.withBlur,
+    withGrayscale = props.withGrayscale,
+    constrain = props.constrain;
+  const isCover = constrain === 'cover';
+  const isContain = constrain === 'contain';
+
+  // if overlay or filters are updated via props,
+  // make the transition look smooth
+  const transitionStyle = {
+    transition: `all ${componentTheme.effectTransitionDuration}`
+  };
+  const getFilterStyle = () => {
+    const filters = [];
+    withBlur && filters.push(`blur(${componentTheme.imageBlurAmount})`);
+    withGrayscale && filters.push('grayscale(1)');
+    return filters.length > 0 ? {
+      ...transitionStyle,
+      filter: filters.join(' ')
+    } : {
+      filter: 'none'
+    };
+  };
+  const fillContainer = {
+    width: '100%',
+    height: '100%'
+  };
+  const imgCoverStyle = {
+    objectFit: 'cover',
+    ...fillContainer
+  };
+  const imgContainStyle = {
+    objectFit: 'contain',
+    ...fillContainer,
+    ...(overlay && {
+      width: 'auto',
+      height: 'auto',
+      maxWidth: '100%',
+      maxHeight: '100%'
+    })
+  };
+  return {
+    overlay: {
+      label: 'img__overlay',
+      position: 'absolute',
+      top: '0px',
+      left: '0px',
+      width: '100%',
+      height: '100%',
+      ...transitionStyle,
+      ...(overlay && {
+        backgroundColor: overlay.color,
+        opacity: overlay.opacity * 0.1,
+        mixBlendMode: overlay.blend ? overlay.blend : void 0
+      })
+    },
+    container: {
+      label: 'img__container',
+      ...(overlay && {
+        position: 'relative',
+        overflow: 'hidden' /* stops blurred images extending past overlay borders */
+      }),
+      ...(isCover && fillContainer),
+      ...(isContain && {
+        height: 'inherit'
+      })
+    },
+    img: {
+      label: 'img',
+      // reset image styles (initial: all was causing conflicts
+      // View's CSS and overriding height/width attrs)
+      margin: '0',
+      padding: '0',
+      float: 'none',
+      top: 'auto',
+      bottom: 'auto',
+      left: 'auto',
+      right: 'auto',
+      lineHeight: 'normal',
+      position: 'static',
+      transform: 'none',
+      maxHeight: 'none',
+      minHeight: '0',
+      minWidth: '0',
+      maxWidth: '100%',
+      ...getFilterStyle(),
+      ...(overlay && {
+        // when image is contained in overlay,
+        // avoid extra space at bottom from inline/line-height
+        display: 'block'
+      }),
+      ...(isCover && imgCoverStyle),
+      ...(isContain && imgContainStyle)
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/exports/b.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Img", {
+  enumerable: true,
+  get: function () {
+    return _v.Img;
+  }
+});
+var _v = require("../Img/v2");