@fluentui/react-image 9.0.0-alpha.9 → 9.0.0-alpha.90

package/lib/components/Image/useImageStyles.js

@@ -1,79 +1,67 @@
-import { makeStylesCompat, ax } from '@fluentui/react-make-styles';
-export var useRootStyles = makeStylesCompat([
-    [
-        null,
-        function (theme) { return ({
-            borderColor: theme.alias.color.neutral.neutralStroke1,
-            borderRadius: theme.global.borderRadius.none,
-            boxShadow: theme.alias.shadow.shadow4,
-            boxSizing: 'border-box',
-            display: 'inline-block',
-        }); },
-    ],
-    [
-        function (props) { return props.bordered; },
-        function (theme) { return ({
-            borderStyle: 'solid',
-            borderWidth: theme.global.strokeWidth.thin,
-        }); },
-    ],
-    [
-        function (props) { return props.circular; },
-        function (theme) { return ({
-            borderRadius: theme.global.borderRadius.circular,
-        }); },
-    ],
-    [
-        function (props) { return props.rounded; },
-        function (theme) { return ({
-            borderRadius: theme.global.borderRadius.medium,
-        }); },
-    ],
-    [
-        function (props) { return props.fit === 'none'; },
-        {
-            objectFit: 'none',
-            objectPosition: 'left top',
-            height: '100%',
-            width: '100%',
-        },
-    ],
-    [
-        function (props) { return props.fit === 'center'; },
-        {
-            objectFit: 'none',
-            objectPosition: 'center',
-            height: '100%',
-            width: '100%',
-        },
-    ],
-    [
-        function (props) { return props.fit === 'cover'; },
-        {
-            objectFit: 'cover',
-            objectPosition: 'center',
-            height: '100%',
-            width: '100%',
-        },
-    ],
-    [
-        function (props) { return props.fit === 'contain'; },
-        {
-            objectFit: 'contain',
-            objectPosition: 'center',
-            height: '100%',
-            width: '100%',
-        },
-    ],
-    [
-        function (props) { return props.fluid; },
-        {
-            width: '100%',
-        },
-    ],
-]);
+import { mergeClasses, __styles } from '@fluentui/react-make-styles';
+
+var useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "g2u3we": "fj3muxo",
+    "h3c5rm": ["f1akhkt", "f1lxtadh"],
+    "B9xav0g": "f1aperda",
+    "zhjwy3": ["f1lxtadh", "f1akhkt"],
+    "Dimara": "f1fabniw",
+    "B7ck84d": "f1ewtqcl",
+    "mc9l5x": "f14t3ns0"
+  },
+  "rootBordered": {
+    "icvyot": "fzkkow9",
+    "vrafjx": ["fcdblym", "fjik90z"],
+    "oivjwe": "fg706s2",
+    "wvpqe5": ["fjik90z", "fcdblym"],
+    "B4j52fo": "f192inf7",
+    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
+    "Bn0qgzm": "f1vxd6vx",
+    "ibv6hh": ["f1ojsxk5", "f5tn483"]
+  },
+  "rootCircular": {
+    "Dimara": "f44lkw9"
+  },
+  "rootRounded": {
+    "Dimara": "ft85np5"
+  },
+  "rootShadow": {
+    "E5pizo": ["f1whvlc6", "fzb35q0"]
+  },
+  "rootFitNone": {
+    "st4lth": "f1plgu50",
+    "Ermj5k": ["f13uwng7", "fjmyj0p"],
+    "Bqenvij": "f1l02sjl",
+    "a9b677": "fly5x3f"
+  },
+  "rootFitCenter": {
+    "st4lth": "f1plgu50",
+    "Ermj5k": "f14xojzb",
+    "Bqenvij": "f1l02sjl",
+    "a9b677": "fly5x3f"
+  },
+  "rootFitCover": {
+    "st4lth": "f1ps3kmd",
+    "Ermj5k": "f14xojzb",
+    "Bqenvij": "f1l02sjl",
+    "a9b677": "fly5x3f"
+  },
+  "rootFitContain": {
+    "st4lth": "f1kle4es",
+    "Ermj5k": "f14xojzb",
+    "Bqenvij": "f1l02sjl",
+    "a9b677": "fly5x3f"
+  },
+  "rootBlock": {
+    "a9b677": "fly5x3f"
+  }
+}, {
+  "d": [".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f1fabniw{border-radius:var(--borderRadiusNone);}", ".f1ewtqcl{box-sizing:border-box;}", ".f14t3ns0{display:inline-block;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f44lkw9{border-radius:var(--borderRadiusCircular);}", ".ft85np5{border-radius:var(--borderRadiusMedium);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".fzb35q0{box-shadow:var(--shadow-4);}", ".f1plgu50{object-fit:none;}", ".f13uwng7{object-position:left top;}", ".fjmyj0p{object-position:right top;}", ".f1l02sjl{height:100%;}", ".fly5x3f{width:100%;}", ".f14xojzb{object-position:center;}", ".f1ps3kmd{object-fit:cover;}", ".f1kle4es{object-fit:contain;}"]
+});
+
 export var useImageStyles = function (state) {
-    var rootClassName = useRootStyles(state);
-    state.className = ax(rootClassName, state.className);
+  var styles = useStyles();
+  state.root.className = mergeClasses(styles.root, state.bordered && styles.rootBordered, state.shape === 'circular' && styles.rootCircular, state.shape === 'rounded' && styles.rootRounded, state.shadow && styles.rootShadow, state.fit === 'none' && styles.rootFitNone, state.fit === 'center' && styles.rootFitCenter, state.fit === 'cover' && styles.rootFitCover, state.fit === 'contain' && styles.rootFitContain, state.block && styles.rootBlock, state.root.className);
 };
 //# sourceMappingURL=useImageStyles.js.map

package/lib/components/Image/useImageStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"useImageStyles.js","sourceRoot":"../src/","sources":["components/Image/useImageStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,EAAE,EAAE,MAAM,6BAA6B,CAAC;AAGnE,MAAM,CAAC,IAAM,aAAa,GAAG,gBAAgB,CAAa;IACxD;QACE,IAAI;QACJ,UAAA,KAAK,IAAI,OAAA,CAAC;YACR,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;YACrD,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI;YAC5C,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;YAErC,SAAS,EAAE,YAAY;YACvB,OAAO,EAAE,cAAc;SACxB,CAAC,EAPO,CAOP;KACH;IACD;QACE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,QAAQ,EAAd,CAAc;QACvB,UAAA,KAAK,IAAI,OAAA,CAAC;YACR,WAAW,EAAE,OAAO;YACpB,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI;SAC3C,CAAC,EAHO,CAGP;KACH;IACD;QACE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,QAAQ,EAAd,CAAc;QACvB,UAAA,KAAK,IAAI,OAAA,CAAC;YACR,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ;SACjD,CAAC,EAFO,CAEP;KACH;IACD;QACE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,OAAO,EAAb,CAAa;QACtB,UAAA,KAAK,IAAI,OAAA,CAAC;YACR,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM;SAC/C,CAAC,EAFO,CAEP;KACH;IACD;QACE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,GAAG,KAAK,MAAM,EAApB,CAAoB;QAC7B;YACE,SAAS,EAAE,MAAM;YACjB,cAAc,EAAE,UAAU;YAC1B,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SAId;KACF;IACD;QACE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAtB,CAAsB;QAC/B;YACE,SAAS,EAAE,MAAM;YACjB,cAAc,EAAE,QAAQ;YACxB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SAId;KACF;IACD;QACE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,GAAG,KAAK,OAAO,EAArB,CAAqB;QAC9B;YACE,SAAS,EAAE,OAAO;YAClB,cAAc,EAAE,QAAQ;YACxB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SAId;KACF;IACD;QACE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,GAAG,KAAK,SAAS,EAAvB,CAAuB;QAChC;YACE,SAAS,EAAE,SAAS;YACpB,cAAc,EAAE,QAAQ;YACxB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SAId;KACF;IACD;QACE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,KAAK,EAAX,CAAW;QACpB;YACE,KAAK,EAAE,MAAM;SACd;KACF;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,KAAiB;IAC9C,IAAM,aAAa,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IAC3C,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;AACvD,CAAC,CAAC","sourcesContent":["import { makeStylesCompat, ax } from '@fluentui/react-make-styles';\nimport { ImageState } from './Image.types';\n\nexport const useRootStyles = makeStylesCompat<ImageState>([\n  [\n    null,\n    theme => ({\n      borderColor: theme.alias.color.neutral.neutralStroke1,\n      borderRadius: theme.global.borderRadius.none,\n      boxShadow: theme.alias.shadow.shadow4,\n\n      boxSizing: 'border-box',\n      display: 'inline-block',\n    }),\n  ],\n  [\n    props => props.bordered,\n    theme => ({\n      borderStyle: 'solid',\n      borderWidth: theme.global.strokeWidth.thin,\n    }),\n  ],\n  [\n    props => props.circular,\n    theme => ({\n      borderRadius: theme.global.borderRadius.circular,\n    }),\n  ],\n  [\n    props => props.rounded,\n    theme => ({\n      borderRadius: theme.global.borderRadius.medium,\n    }),\n  ],\n  [\n    props => props.fit === 'none',\n    {\n      objectFit: 'none',\n      objectPosition: 'left top',\n      height: '100%',\n      width: '100%',\n\n      // TODO IE 11\n      // font-family: 'object-fit: none; object-position: left top;',\n    },\n  ],\n  [\n    props => props.fit === 'center',\n    {\n      objectFit: 'none',\n      objectPosition: 'center',\n      height: '100%',\n      width: '100%',\n\n      // TODO IE 11\n      // font-family: 'object-fit: none; object-position: center;',\n    },\n  ],\n  [\n    props => props.fit === 'cover',\n    {\n      objectFit: 'cover',\n      objectPosition: 'center',\n      height: '100%',\n      width: '100%',\n\n      // TODO IE 11\n      // font-family: 'object-fit: cover; object-position: center;',\n    },\n  ],\n  [\n    props => props.fit === 'contain',\n    {\n      objectFit: 'contain',\n      objectPosition: 'center',\n      height: '100%',\n      width: '100%',\n\n      // TODO IE 11\n      // font-family: 'object-fit: contain; object-position: center;',\n    },\n  ],\n  [\n    props => props.fluid,\n    {\n      width: '100%',\n    },\n  ],\n]);\n\nexport const useImageStyles = (state: ImageState) => {\n  const rootClassName = useRootStyles(state);\n  state.className = ax(rootClassName, state.className);\n};\n"]}
+{"version":3,"sources":["../../../src/components/Image/useImageStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC;;AAGA,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAkDA,OAAO,IAAM,cAAc,GAAG,UAAC,KAAD,EAAkB;AAC9C,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,MAAM,CAAC,IAD0B,EAEjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,YAFQ,EAGjC,KAAK,CAAC,KAAN,KAAgB,UAAhB,IAA8B,MAAM,CAAC,YAHJ,EAIjC,KAAK,CAAC,KAAN,KAAgB,SAAhB,IAA6B,MAAM,CAAC,WAJH,EAKjC,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,UALU,EAMjC,KAAK,CAAC,GAAN,KAAc,MAAd,IAAwB,MAAM,CAAC,WANE,EAOjC,KAAK,CAAC,GAAN,KAAc,QAAd,IAA0B,MAAM,CAAC,aAPA,EAQjC,KAAK,CAAC,GAAN,KAAc,OAAd,IAAyB,MAAM,CAAC,YARC,EASjC,KAAK,CAAC,GAAN,KAAc,SAAd,IAA2B,MAAM,CAAC,cATD,EAUjC,KAAK,CAAC,KAAN,IAAe,MAAM,CAAC,SAVW,EAWjC,KAAK,CAAC,IAAN,CAAW,SAXsB,CAAnC;AAaD,CAfM","sourceRoot":""}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC","sourcesContent":["export * from './Image';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/lib/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.7.1"
+      "packageVersion": "7.18.1"
     }
   ]
 }

package/lib-commonjs/Image.js

@@ -1,5 +1,10 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
 tslib_1.__exportStar(require("./components/Image/index"), exports);
 //# sourceMappingURL=Image.js.map

package/lib-commonjs/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"../src/","sources":["Image.ts"],"names":[],"mappings":";;;AAAA,mEAAyC","sourcesContent":["export * from './components/Image/index';\n"]}
+{"version":3,"sources":["../src/Image.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/common/isConformant.d.ts

@@ -0,0 +1,4 @@
+import type { IsConformantOptions } from '@fluentui/react-conformance';
+export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
+    componentPath?: string;
+}): void;

package/lib-commonjs/common/isConformant.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isConformant = void 0;
+
+var react_conformance_1 = /*#__PURE__*/require("@fluentui/react-conformance");
+
+var react_conformance_make_styles_1 = /*#__PURE__*/require("@fluentui/react-conformance-make-styles");
+
+function isConformant(testInfo) {
+  var defaultOptions = {
+    asPropHandlesRef: true,
+    componentPath: module.parent.filename.replace('.test', ''),
+    disabledTests: ['has-docblock'],
+    extraTests: react_conformance_make_styles_1.default,
+    skipAsPropTests: true
+  };
+  react_conformance_1.isConformant(defaultOptions, testInfo);
+}
+
+exports.isConformant = isConformant;
+//# sourceMappingURL=isConformant.js.map

package/lib-commonjs/common/isConformant.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAEA,IAAA,+BAAA,gBAAA,OAAA,CAAA,yCAAA,CAAA;;AAEA,SAAgB,YAAhB,CACE,QADF,EAC2F;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,aAAa,EAAE,CAAC,cAAD,CAH4C;AAI3D,IAAA,UAAU,EAAE,+BAAA,CAAA,OAJ+C;AAK3D,IAAA,eAAe,EAAE;AAL0C,GAA7D;AAQA,EAAA,mBAAA,CAAA,YAAA,CAAiB,cAAjB,EAAiC,QAAjC;AACD;;AAZD,OAAA,CAAA,YAAA,GAAA,YAAA","sourceRoot":""}

package/lib-commonjs/components/Image/Image.d.ts

@@ -1,3 +1,6 @@
-import * as React from 'react';
-import { ImageProps } from './Image.types';
-export declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLElement>>;
+import type { ImageProps } from './Image.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+/**
+ * The Image component ensures the consistent styling of images.
+ */
+export declare const Image: ForwardRefComponent<ImageProps>;

package/lib-commonjs/components/Image/Image.js

@@ -1,13 +1,26 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var renderImage_1 = require("./renderImage");
-var useImage_1 = require("./useImage");
-var useImageStyles_1 = require("./useImageStyles");
-exports.Image = React.forwardRef(function (props, ref) {
-    var state = useImage_1.useImage(props, ref);
-    useImageStyles_1.useImageStyles(state);
-    return renderImage_1.renderImage(state);
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Image = void 0;
+
+var React = /*#__PURE__*/require("react");
+
+var renderImage_1 = /*#__PURE__*/require("./renderImage");
+
+var useImage_1 = /*#__PURE__*/require("./useImage");
+
+var useImageStyles_1 = /*#__PURE__*/require("./useImageStyles");
+/**
+ * The Image component ensures the consistent styling of images.
+ */
+
+
+exports.Image = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var state = useImage_1.useImage(props, ref);
+  useImageStyles_1.useImageStyles(state);
+  return renderImage_1.renderImage(state);
 });
 exports.Image.displayName = 'Image';
 //# sourceMappingURL=Image.js.map

package/lib-commonjs/components/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"../src/","sources":["components/Image/Image.tsx"],"names":[],"mappings":";;AAAA,6BAA+B;AAE/B,6CAA4C;AAC5C,uCAAsC;AACtC,mDAAkD;AAErC,QAAA,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,UAAC,KAAiB,EAAE,GAA2B;IACnF,IAAM,KAAK,GAAG,mBAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACnC,+BAAc,CAAC,KAAK,CAAC,CAAC;IAEtB,OAAO,yBAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,CAAC,CAAC,CAAC;AAEH,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import * as React from 'react';\nimport { ImageProps } from './Image.types';\nimport { renderImage } from './renderImage';\nimport { useImage } from './useImage';\nimport { useImageStyles } from './useImageStyles';\n\nexport const Image = React.forwardRef((props: ImageProps, ref: React.Ref<HTMLElement>) => {\n  const state = useImage(props, ref);\n  useImageStyles(state);\n\n  return renderImage(state);\n});\n\nImage.displayName = 'Image';\n"]}
+{"version":3,"sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,IAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAChF,MAAM,KAAK,GAAG,UAAA,CAAA,QAAA,CAAS,KAAT,EAAgB,GAAhB,CAAd;AACA,EAAA,gBAAA,CAAA,cAAA,CAAe,KAAf;AAEA,SAAO,aAAA,CAAA,WAAA,CAAY,KAAZ,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourceRoot":""}

package/lib-commonjs/components/Image/Image.types.d.ts

@@ -1,10 +1,8 @@
-import * as React from 'react';
-import { ComponentProps } from '@fluentui/react-utilities';
-export interface ImageProps extends ComponentProps, React.ImgHTMLAttributes<HTMLImageElement> {
-    /**
-     * An alternative text for an image.
-     */
-    alt?: string;
+import type { ComponentState, ComponentProps, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+export declare type ImageSlots = {
+    root: IntrinsicShorthandProps<'img'>;
+};
+export declare type ImageCommons = {
     /**
      * An image can appear with rectangular border.
      */
@@ -16,20 +14,16 @@ export interface ImageProps extends ComponentProps, React.ImgHTMLAttributes<HTML
     /**
      * An image can take up the width of its container.
      */
-    fluid?: boolean;
-    /**
-     * An image can appear circular.
-     */
-    circular?: boolean;
+    block?: boolean;
     /**
-     * An image can appear rounded.
+     * An image can appear square, circular, or rounded.
+     * @defaultvalue square
      */
-    rounded?: boolean;
+    shape?: 'square' | 'circular' | 'rounded';
     /**
-     * An image can have source URL.
+     * An image can appear elevated with shadow.
      */
-    src?: string;
-}
-export interface ImageState extends ImageProps {
-    ref: React.RefObject<HTMLImageElement>;
-}
+    shadow?: boolean;
+};
+export declare type ImageProps = ComponentProps<ImageSlots> & Partial<ImageCommons>;
+export declare type ImageState = ComponentState<ImageSlots> & ImageCommons;

package/lib-commonjs/components/Image/Image.types.js

@@ -1,3 +1,6 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 //# sourceMappingURL=Image.types.js.map

package/lib-commonjs/components/Image/Image.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.types.js","sourceRoot":"../src/","sources":["components/Image/Image.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ComponentProps } from '@fluentui/react-utilities';\n\nexport interface ImageProps extends ComponentProps, React.ImgHTMLAttributes<HTMLImageElement> {\n  /**\n   * An alternative text for an image.\n   */\n  alt?: string;\n\n  /**\n   * An image can appear with rectangular border.\n   */\n  bordered?: boolean;\n\n  /**\n   * An image can set how it should be resized to fit its container.\n   */\n  fit?: 'none' | 'center' | 'contain' | 'cover';\n\n  /**\n   * An image can take up the width of its container.\n   */\n  fluid?: boolean;\n\n  /**\n   * An image can appear circular.\n   */\n  circular?: boolean;\n\n  /**\n   * An image can appear rounded.\n   */\n  rounded?: boolean;\n\n  /**\n   * An image can have source URL.\n   */\n  src?: string;\n}\n\nexport interface ImageState extends ImageProps {\n  ref: React.RefObject<HTMLImageElement>;\n}\n"]}
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}

package/lib-commonjs/components/Image/index.js

@@ -1,8 +1,18 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./Image.types"), exports);
+
 tslib_1.__exportStar(require("./Image"), exports);
+
 tslib_1.__exportStar(require("./renderImage"), exports);
+
 tslib_1.__exportStar(require("./useImage"), exports);
+
 tslib_1.__exportStar(require("./useImageStyles"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/components/Image/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Image/index.ts"],"names":[],"mappings":";;;AACA,kDAAwB;AACxB,wDAA8B;AAC9B,qDAA2B;AAC3B,2DAAiC","sourcesContent":["export * from './Image.types';\nexport * from './Image';\nexport * from './renderImage';\nexport * from './useImage';\nexport * from './useImageStyles';\n"]}
+{"version":3,"sources":["../../../src/components/Image/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/components/Image/renderImage.js

@@ -1,14 +1,30 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var React = require("react");
-var react_utilities_1 = require("@fluentui/react-utilities");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderImage = void 0;
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+var React = /*#__PURE__*/require("react");
+
+var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+var useImage_1 = /*#__PURE__*/require("./useImage");
 /**
  * Define the render function.
  * Given the state of an image, renders it.
  */
-exports.renderImage = function (state) {
-    var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
-    return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root));
+
+
+var renderImage = function (state) {
+  var _a = react_utilities_1.getSlots(state, useImage_1.imageShorthandProps),
+      slots = _a.slots,
+      slotProps = _a.slotProps;
+
+  return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root));
 };
+
+exports.renderImage = renderImage;
 //# sourceMappingURL=renderImage.js.map

package/lib-commonjs/components/Image/renderImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderImage.js","sourceRoot":"../src/","sources":["components/Image/renderImage.tsx"],"names":[],"mappings":";;;AAAA,6BAA+B;AAC/B,6DAAqD;AAGrD;;;GAGG;AACU,QAAA,WAAW,GAAG,UAAC,KAAiB;IACrC,IAAA,sCAAsC,EAApC,gBAAK,EAAE,wBAA6B,CAAC;IAE7C,OAAO,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CAAC;AAC5C,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ImageState } from './Image.types';\n\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n */\nexport const renderImage = (state: ImageState) => {\n  const { slots, slotProps } = getSlots(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"]}
+{"version":3,"sources":["../../../src/components/Image/renderImage.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,IAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;AAEA;;;AAGG;;;AACI,IAAM,WAAW,GAAG,UAAC,KAAD,EAAkB;AACrC,MAAA,EAAA,GAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,EAA4B,UAAA,CAAA,mBAA5B,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,SAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,WAAA,GAAW,WAAX","sourceRoot":""}

package/lib-commonjs/components/Image/useImage.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { ImageProps, ImageState } from './Image.types';
+import type { ImageProps, ImageSlots, ImageState } from './Image.types';
+export declare const imageShorthandProps: Array<keyof ImageSlots>;
 /**
  * Given user props, returns state and render function for an Image.
  */
-export declare const useImage: (props: ImageProps, ref: React.Ref<HTMLElement>, defaultProps?: ImageProps | undefined) => ImageState;
+export declare const useImage: (props: ImageProps, ref: React.Ref<HTMLImageElement>) => ImageState;

package/lib-commonjs/components/Image/useImage.js

@@ -1,33 +1,41 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-ignore Typings require esModuleInterop
-var object_fit_images_1 = require("object-fit-images");
-var react_utilities_1 = require("@fluentui/react-utilities");
-var mergeProps = react_utilities_1.makeMergeProps();
-var isFitSupported = (function () {
-    var testImg = new Image();
-    return 'object-fit' in testImg.style && 'object-position' in testImg.style;
-})();
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useImage = exports.imageShorthandProps = void 0;
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+exports.imageShorthandProps = ['root'];
 /**
  * Given user props, returns state and render function for an Image.
  */
-exports.useImage = function (props, ref, defaultProps) {
-    var resolvedRef = react_utilities_1.useMergedRefs(ref, React.useRef(null));
-    var state = mergeProps({
-        ref: resolvedRef,
-        as: 'img',
-    }, defaultProps, react_utilities_1.resolveShorthandProps(props, []));
-    React.useEffect(function () {
-        if (!isFitSupported) {
-            object_fit_images_1.objectFitImages(state.ref.current);
-        }
-    }, 
-    // objectFitImages() should be executed once per element
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    state['aria-hidden'] = state.alt || state['aria-label'] ? undefined : 'true';
-    return state;
+
+var useImage = function (props, ref) {
+  var bordered = props.bordered,
+      fit = props.fit,
+      block = props.block,
+      _a = props.shape,
+      shape = _a === void 0 ? 'square' : _a,
+      shadow = props.shadow;
+  var state = {
+    bordered: bordered,
+    fit: fit,
+    block: block,
+    shape: shape,
+    shadow: shadow,
+    components: {
+      root: 'img'
+    },
+    root: react_utilities_1.getNativeElementProps('img', tslib_1.__assign({
+      ref: ref
+    }, props))
+  };
+  return state;
 };
+
+exports.useImage = useImage;
 //# sourceMappingURL=useImage.js.map

package/lib-commonjs/components/Image/useImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"useImage.js","sourceRoot":"../src/","sources":["components/Image/useImage.ts"],"names":[],"mappings":";;AAAA,6BAA+B;AAC/B,sDAAsD;AACtD,6CAA6C;AAC7C,uDAAoD;AACpD,6DAAiG;AAGjG,IAAM,UAAU,GAAG,gCAAc,EAAc,CAAC;AAEhD,IAAM,cAAc,GAAG,CAAC;IACtB,IAAM,OAAO,GAAG,IAAI,KAAK,EAAE,CAAC;IAE5B,OAAO,YAAY,IAAI,OAAO,CAAC,KAAK,IAAI,iBAAiB,IAAI,OAAO,CAAC,KAAK,CAAC;AAC7E,CAAC,CAAC,EAAE,CAAC;AAEL;;GAEG;AACU,QAAA,QAAQ,GAAG,UAAC,KAAiB,EAAE,GAA2B,EAAE,YAAyB;IAChG,IAAM,WAAW,GAAG,+BAAa,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;IAC3D,IAAM,KAAK,GAAG,UAAU,CACtB;QACE,GAAG,EAAE,WAAW;QAChB,EAAE,EAAE,KAAK;KACV,EACD,YAAY,EACZ,uCAAqB,CAAC,KAAK,EAAE,EAAE,CAAC,CACjC,CAAC;IAEF,KAAK,CAAC,SAAS,CACb;QACE,IAAI,CAAC,cAAc,EAAE;YACnB,mCAAe,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;SACpC;IACH,CAAC;IACD,wDAAwD;IACxD,uDAAuD;IACvD,EAAE,CACH,CAAC;IAEF,KAAK,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC,GAAG,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IAE7E,OAAO,KAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["import * as React from 'react';\n/* eslint-disable @typescript-eslint/ban-ts-comment */\n// @ts-ignore Typings require esModuleInterop\nimport { objectFitImages } from 'object-fit-images';\nimport { makeMergeProps, resolveShorthandProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { ImageProps, ImageState } from './Image.types';\n\nconst mergeProps = makeMergeProps<ImageState>();\n\nconst isFitSupported = (function() {\n  const testImg = new Image();\n\n  return 'object-fit' in testImg.style && 'object-position' in testImg.style;\n})();\n\n/**\n * Given user props, returns state and render function for an Image.\n */\nexport const useImage = (props: ImageProps, ref: React.Ref<HTMLElement>, defaultProps?: ImageProps): ImageState => {\n  const resolvedRef = useMergedRefs(ref, React.useRef(null));\n  const state = mergeProps(\n    {\n      ref: resolvedRef,\n      as: 'img',\n    },\n    defaultProps,\n    resolveShorthandProps(props, []),\n  );\n\n  React.useEffect(\n    () => {\n      if (!isFitSupported) {\n        objectFitImages(state.ref.current);\n      }\n    },\n    // objectFitImages() should be executed once per element\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n\n  state['aria-hidden'] = state.alt || state['aria-label'] ? undefined : 'true';\n\n  return state;\n};\n"]}
+{"version":3,"sources":["../../../src/components/Image/useImage.ts"],"names":[],"mappings":";;;;;;;;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGa,OAAA,CAAA,mBAAA,GAA+C,CAAC,MAAD,CAA/C;AAEb;;AAEG;;AACI,IAAM,QAAQ,GAAG,UAAC,KAAD,EAAoB,GAApB,EAAoD;AAClE,MAAA,QAAQ,GAA2C,KAAK,CAAhD,QAAR;AAAA,MAAU,GAAG,GAAsC,KAAK,CAA3C,GAAb;AAAA,MAAe,KAAK,GAA+B,KAAK,CAApC,KAApB;AAAA,MAAsB,EAAA,GAA6B,KAAK,CAAlB,KAAtC;AAAA,MAAsB,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EAAtC;AAAA,MAAwC,MAAM,GAAK,KAAK,CAAV,MAA9C;AAER,MAAM,KAAK,GAAe;AACxB,IAAA,QAAQ,EAAA,QADgB;AAExB,IAAA,GAAG,EAAA,GAFqB;AAGxB,IAAA,KAAK,EAAA,KAHmB;AAIxB,IAAA,KAAK,EAAA,KAJmB;AAKxB,IAAA,MAAM,EAAA,MALkB;AAMxB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KANY;AASxB,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA2B,OAAA,CAAA,QAAA,CAAA;AAC/B,MAAA,GAAG,EAAA;AAD4B,KAAA,EAE5B,KAF4B,CAA3B;AATkB,GAA1B;AAeA,SAAO,KAAP;AACD,CAnBM;;AAAM,OAAA,CAAA,QAAA,GAAQ,QAAR","sourceRoot":""}

package/lib-commonjs/components/Image/useImageStyles.d.ts

@@ -1,3 +1,2 @@
-import { ImageState } from './Image.types';
-export declare const useRootStyles: (selectors: ImageState) => string;
+import type { ImageState } from './Image.types';
 export declare const useImageStyles: (state: ImageState) => void;