@fluentui/react-image 9.0.0-alpha.80 → 9.0.0-alpha.84

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Image/useImage.ts"],"names":[],"mappings":";AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA,OAAO,IAAM,mBAAmB,GAA4B,CAAC,MAAD,CAArD;AAEP;;AAEG;;AACH,OAAO,IAAM,QAAQ,GAAG,UAAC,KAAD,EAAoB,GAApB,EAAoD;AAClE,MAAA,QAAQ,GAAoC,KAAK,CAAzC,QAAR;AAAA,MAAU,GAAG,GAA+B,KAAK,CAApC,GAAb;AAAA,MAAe,KAAK,GAAwB,KAAK,CAA7B,KAApB;AAAA,MAAsB,QAAQ,GAAc,KAAK,CAAnB,QAA9B;AAAA,MAAgC,OAAO,GAAK,KAAK,CAAV,OAAvC;AACR,MAAM,KAAK,GAAe;AACxB,IAAA,QAAQ,EAAA,QADgB;AAExB,IAAA,GAAG,EAAA,GAFqB;AAGxB,IAAA,KAAK,EAAA,KAHmB;AAIxB,IAAA,QAAQ,EAAA,QAJgB;AAKxB,IAAA,OAAO,EAAA,OALiB;AAMxB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KANY;AASxB,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAM,QAAA,CAAA;AAC/B,MAAA,GAAG,EAAA;AAD4B,KAAA,EAE5B,KAF4B,CAAN;AATH,GAA1B;AAeA,SAAO,KAAP;AACD,CAlBM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ImageProps, ImageSlots, ImageState } from './Image.types';\n\nexport const imageShorthandProps: Array<keyof ImageSlots> = ['root'];\n\n/**\n * Given user props, returns state and render function for an Image.\n */\nexport const useImage = (props: ImageProps, ref: React.Ref<HTMLImageElement>): ImageState => {\n  const { bordered, fit, fluid, circular, rounded } = props;\n  const state: ImageState = {\n    bordered,\n    fit,\n    fluid,\n    circular,\n    rounded,\n    components: {\n      root: 'img',\n    },\n    root: getNativeElementProps('img', {\n      ref,\n      ...props,\n    }),\n  };\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/Image/useImage.ts"],"names":[],"mappings":";AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA,OAAO,IAAM,mBAAmB,GAA4B,CAAC,MAAD,CAArD;AAEP;;AAEG;;AACH,OAAO,IAAM,QAAQ,GAAG,UAAC,KAAD,EAAoB,GAApB,EAAoD;AAClE,MAAA,QAAQ,GAA4C,KAAK,CAAjD,QAAR;AAAA,MAAU,GAAG,GAAuC,KAAK,CAA5C,GAAb;AAAA,MAAe,KAAK,GAAgC,KAAK,CAArC,KAApB;AAAA,MAAsB,QAAQ,GAAsB,KAAK,CAA3B,QAA9B;AAAA,MAAgC,OAAO,GAAa,KAAK,CAAlB,OAAvC;AAAA,MAAyC,MAAM,GAAK,KAAK,CAAV,MAA/C;AACR,MAAM,KAAK,GAAe;AACxB,IAAA,QAAQ,EAAA,QADgB;AAExB,IAAA,GAAG,EAAA,GAFqB;AAGxB,IAAA,KAAK,EAAA,KAHmB;AAIxB,IAAA,QAAQ,EAAA,QAJgB;AAKxB,IAAA,OAAO,EAAA,OALiB;AAMxB,IAAA,MAAM,EAAA,MANkB;AAOxB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KAPY;AAUxB,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAM,QAAA,CAAA;AAC/B,MAAA,GAAG,EAAA;AAD4B,KAAA,EAE5B,KAF4B,CAAN;AAVH,GAA1B;AAgBA,SAAO,KAAP;AACD,CAnBM","sourceRoot":""}

package/lib/components/Image/useImageStyles.js

@@ -7,7 +7,6 @@ var useStyles = /*#__PURE__*/__styles({
     "B9xav0g": "fbm5ngu",
     "zhjwy3": ["f1dqgpma", "fmej1xs"],
     "Dimara": "fyoio89",
-    "E5pizo": ["f1eroye8", "f1m1elsp"],
     "B7ck84d": "f1ewtqcl",
     "mc9l5x": "f14t3ns0"
   },
@@ -27,6 +26,9 @@ var useStyles = /*#__PURE__*/__styles({
   "rootRounded": {
     "Dimara": "fnpfh4l"
   },
+  "rootShadow": {
+    "E5pizo": ["f1eroye8", "f1m1elsp"]
+  },
   "rootFitNone": {
     "st4lth": "f1plgu50",
     "Ermj5k": ["f13uwng7", "fjmyj0p"],
@@ -55,11 +57,11 @@ var useStyles = /*#__PURE__*/__styles({
     "a9b677": "fly5x3f"
   }
 }, {
-  "d": [".fnxce6y{border-top-color:var(--alias-color-neutral-neutralStroke1);}", ".fmej1xs{border-right-color:var(--alias-color-neutral-neutralStroke1);}", ".f1dqgpma{border-left-color:var(--alias-color-neutral-neutralStroke1);}", ".fbm5ngu{border-bottom-color:var(--alias-color-neutral-neutralStroke1);}", ".fyoio89{border-radius:var(--global-borderRadius-none);}", ".f1eroye8{box-shadow:var(--alias-shadow-shadow4);}", ".f1m1elsp{box-shadow:var(--alias-shadow-shadow-4);}", ".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;}", ".f1hanlw2{border-top-width:var(--global-strokeWidth-thin);}", ".fkst1ot{border-right-width:var(--global-strokeWidth-thin);}", ".ftvv60i{border-left-width:var(--global-strokeWidth-thin);}", ".fm975v3{border-bottom-width:var(--global-strokeWidth-thin);}", ".f1ytn4vn{border-radius:var(--global-borderRadius-circular);}", ".fnpfh4l{border-radius:var(--global-borderRadius-medium);}", ".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;}"]
+  "d": [".fnxce6y{border-top-color:var(--alias-color-neutral-neutralStroke1);}", ".fmej1xs{border-right-color:var(--alias-color-neutral-neutralStroke1);}", ".f1dqgpma{border-left-color:var(--alias-color-neutral-neutralStroke1);}", ".fbm5ngu{border-bottom-color:var(--alias-color-neutral-neutralStroke1);}", ".fyoio89{border-radius:var(--global-borderRadius-none);}", ".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;}", ".f1hanlw2{border-top-width:var(--global-strokeWidth-thin);}", ".fkst1ot{border-right-width:var(--global-strokeWidth-thin);}", ".ftvv60i{border-left-width:var(--global-strokeWidth-thin);}", ".fm975v3{border-bottom-width:var(--global-strokeWidth-thin);}", ".f1ytn4vn{border-radius:var(--global-borderRadius-circular);}", ".fnpfh4l{border-radius:var(--global-borderRadius-medium);}", ".f1eroye8{box-shadow:var(--alias-shadow-shadow4);}", ".f1m1elsp{box-shadow:var(--alias-shadow-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 styles = useStyles();
-  state.root.className = mergeClasses(styles.root, state.bordered && styles.rootBordered, state.circular && styles.rootCircular, state.rounded && styles.rootRounded, state.fit === 'none' && styles.rootFitNone, state.fit === 'center' && styles.rootFitCenter, state.fit === 'cover' && styles.rootFitCover, state.fit === 'contain' && styles.rootFitContain, state.fluid && styles.rootFluid, state.root.className);
+  state.root.className = mergeClasses(styles.root, state.bordered && styles.rootBordered, state.circular && styles.rootCircular, state.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.fluid && styles.rootFluid, state.root.className);
 };
 //# sourceMappingURL=useImageStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["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,EAAlB;;AAgDA,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,QAAN,IAAkB,MAAM,CAAC,YAHQ,EAIjC,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,WAJS,EAKjC,KAAK,CAAC,GAAN,KAAc,MAAd,IAAwB,MAAM,CAAC,WALE,EAMjC,KAAK,CAAC,GAAN,KAAc,QAAd,IAA0B,MAAM,CAAC,aANA,EAOjC,KAAK,CAAC,GAAN,KAAc,OAAd,IAAyB,MAAM,CAAC,YAPC,EAQjC,KAAK,CAAC,GAAN,KAAc,SAAd,IAA2B,MAAM,CAAC,cARD,EASjC,KAAK,CAAC,KAAN,IAAe,MAAM,CAAC,SATW,EAUjC,KAAK,CAAC,IAAN,CAAW,SAVsB,CAAnC;AAYD,CAdM","sourcesContent":["import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';\nimport type { ImageState } from './Image.types';\n\nconst useStyles = makeStyles({\n  root: 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  rootBordered: theme => ({\n    borderStyle: 'solid',\n    borderWidth: theme.global.strokeWidth.thin,\n  }),\n  rootCircular: theme => ({\n    borderRadius: theme.global.borderRadius.circular,\n  }),\n  rootRounded: theme => ({\n    borderRadius: theme.global.borderRadius.medium,\n  }),\n  rootFitNone: {\n    objectFit: 'none',\n    objectPosition: 'left top',\n    height: '100%',\n    width: '100%',\n  },\n  rootFitCenter: {\n    objectFit: 'none',\n    objectPosition: 'center',\n    height: '100%',\n    width: '100%',\n  },\n  rootFitCover: {\n    objectFit: 'cover',\n    objectPosition: 'center',\n    height: '100%',\n    width: '100%',\n  },\n  rootFitContain: {\n    objectFit: 'contain',\n    objectPosition: 'center',\n    height: '100%',\n    width: '100%',\n  },\n  rootFluid: {\n    width: '100%',\n  },\n});\n\nexport const useImageStyles = (state: ImageState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    styles.root,\n    state.bordered && styles.rootBordered,\n    state.circular && styles.rootCircular,\n    state.rounded && styles.rootRounded,\n    state.fit === 'none' && styles.rootFitNone,\n    state.fit === 'center' && styles.rootFitCenter,\n    state.fit === 'cover' && styles.rootFitCover,\n    state.fit === 'contain' && styles.rootFitContain,\n    state.fluid && styles.rootFluid,\n    state.root.className,\n  );\n};\n"],"sourceRoot":"../src/"}
+{"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,QAAN,IAAkB,MAAM,CAAC,YAHQ,EAIjC,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,WAJS,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-commonjs/Image.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["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","sourcesContent":["import { isConformant as baseIsConformant } from '@fluentui/react-conformance';\nimport type { IsConformantOptions, TestObject } from '@fluentui/react-conformance';\nimport makeStylesTests from '@fluentui/react-conformance-make-styles';\n\nexport function isConformant<TProps = {}>(\n  testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },\n) {\n  const defaultOptions: Partial<IsConformantOptions<TProps>> = {\n    asPropHandlesRef: true,\n    componentPath: module!.parent!.filename.replace('.test', ''),\n    disabledTests: ['has-docblock'],\n    extraTests: makeStylesTests as TestObject<TProps>,\n    skipAsPropTests: true,\n  };\n\n  baseIsConformant(defaultOptions, testInfo);\n}\n"],"sourceRoot":"../src/"}
+{"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,6 +1,23 @@
 import * as React from 'react';
-import type { ImageProps } from './Image.types';
 /**
  * The Image component ensures the consistent styling of images.
  */
-export declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
+export declare const Image: React.ForwardRefExoticComponent<Pick<{
+    root?: import("@fluentui/react-utilities").ShorthandProps<{
+        as?: "img" | undefined;
+    } & Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "slot" | "style" | "title" | "key" | "alt" | "crossOrigin" | "decoding" | "height" | "loading" | "referrerPolicy" | "sizes" | "src" | "srcSet" | "useMap" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css"> & {
+        ref?: ((instance: HTMLImageElement | null) => void) | React.RefObject<HTMLImageElement> | null | undefined;
+    } & {
+        children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | import("@fluentui/react-utilities").ShorthandRenderFunction<Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "slot" | "style" | "title" | "key" | "alt" | "crossOrigin" | "decoding" | "height" | "loading" | "referrerPolicy" | "sizes" | "src" | "srcSet" | "useMap" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css"> & {
+            ref?: ((instance: HTMLImageElement | null) => void) | React.RefObject<HTMLImageElement> | null | undefined;
+        }> | null | undefined;
+    }>;
+}, never> & Pick<{
+    as?: "img" | undefined;
+} & Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "slot" | "style" | "title" | "key" | "alt" | "crossOrigin" | "decoding" | "height" | "loading" | "referrerPolicy" | "sizes" | "src" | "srcSet" | "useMap" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css"> & {
+    ref?: ((instance: HTMLImageElement | null) => void) | React.RefObject<HTMLImageElement> | null | undefined;
+} & {
+    children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | import("@fluentui/react-utilities").ShorthandRenderFunction<Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "slot" | "style" | "title" | "key" | "alt" | "crossOrigin" | "decoding" | "height" | "loading" | "referrerPolicy" | "sizes" | "src" | "srcSet" | "useMap" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css"> & {
+        ref?: ((instance: HTMLImageElement | null) => void) | React.RefObject<HTMLImageElement> | null | undefined;
+    }> | null | undefined;
+}, "slot" | "style" | "title" | "key" | "alt" | "crossOrigin" | "decoding" | "height" | "loading" | "referrerPolicy" | "sizes" | "src" | "srcSet" | "useMap" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "as"> & Partial<import("./Image.types").ImageCommons> & React.RefAttributes<HTMLImageElement>>;

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

@@ -1 +1 @@
-{"version":3,"sources":["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;AAGA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAQ,KAAK,CAAC,UAAN,CAA+C,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC7E,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,CALoB,CAAR;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { renderImage } from './renderImage';\nimport { useImage } from './useImage';\nimport { useImageStyles } from './useImageStyles';\nimport type { ImageProps } from './Image.types';\n\n/**\n * The Image component ensures the consistent styling of images.\n */\nexport const Image = React.forwardRef<HTMLImageElement, ImageProps>((props, ref) => {\n  const state = useImage(props, ref);\n  useImageStyles(state);\n\n  return renderImage(state);\n});\n\nImage.displayName = 'Image';\n"],"sourceRoot":"../src/"}
+{"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;AAGA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAQ,KAAK,CAAC,UAAN,CAA+C,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC7E,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,CALoB,CAAR;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourceRoot":""}

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

@@ -23,8 +23,10 @@ export declare type ImageCommons = {
      * An image can appear rounded.
      */
     rounded?: boolean;
+    /**
+     * An image can appear elevated with shadow.
+     */
+    shadow?: boolean;
 };
-export interface ImageProps extends ComponentProps<ImageSlots>, Partial<ImageCommons> {
-}
-export interface ImageState extends ComponentState<ImageSlots>, ImageCommons {
-}
+export declare type ImageProps = ComponentProps<ImageSlots> & Partial<ImageCommons>;
+export declare type ImageState = ComponentState<ImageSlots> & ImageCommons;

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}

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

@@ -1 +1 @@
-{"version":3,"sources":["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","sourcesContent":["export * from './Image.types';\nexport * from './Image';\nexport * from './renderImage';\nexport * from './useImage';\nexport * from './useImageStyles';\n"],"sourceRoot":"../src/"}
+{"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.map

@@ -1 +1 @@
-{"version":3,"sources":["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","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ImageSlots, ImageState } from './Image.types';\nimport { imageShorthandProps } from './useImage';\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<ImageSlots>(state, imageShorthandProps);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}
+{"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.js

@@ -19,13 +19,15 @@ var useImage = function (props, ref) {
       fit = props.fit,
       fluid = props.fluid,
       circular = props.circular,
-      rounded = props.rounded;
+      rounded = props.rounded,
+      shadow = props.shadow;
   var state = {
     bordered: bordered,
     fit: fit,
     fluid: fluid,
     circular: circular,
     rounded: rounded,
+    shadow: shadow,
     components: {
       root: 'img'
     },

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

@@ -1 +1 @@
-{"version":3,"sources":["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,GAAoC,KAAK,CAAzC,QAAR;AAAA,MAAU,GAAG,GAA+B,KAAK,CAApC,GAAb;AAAA,MAAe,KAAK,GAAwB,KAAK,CAA7B,KAApB;AAAA,MAAsB,QAAQ,GAAc,KAAK,CAAnB,QAA9B;AAAA,MAAgC,OAAO,GAAK,KAAK,CAAV,OAAvC;AACR,MAAM,KAAK,GAAe;AACxB,IAAA,QAAQ,EAAA,QADgB;AAExB,IAAA,GAAG,EAAA,GAFqB;AAGxB,IAAA,KAAK,EAAA,KAHmB;AAIxB,IAAA,QAAQ,EAAA,QAJgB;AAKxB,IAAA,OAAO,EAAA,OALiB;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,CAlBM;;AAAM,OAAA,CAAA,QAAA,GAAQ,QAAR","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ImageProps, ImageSlots, ImageState } from './Image.types';\n\nexport const imageShorthandProps: Array<keyof ImageSlots> = ['root'];\n\n/**\n * Given user props, returns state and render function for an Image.\n */\nexport const useImage = (props: ImageProps, ref: React.Ref<HTMLImageElement>): ImageState => {\n  const { bordered, fit, fluid, circular, rounded } = props;\n  const state: ImageState = {\n    bordered,\n    fit,\n    fluid,\n    circular,\n    rounded,\n    components: {\n      root: 'img',\n    },\n    root: getNativeElementProps('img', {\n      ref,\n      ...props,\n    }),\n  };\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"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,GAA4C,KAAK,CAAjD,QAAR;AAAA,MAAU,GAAG,GAAuC,KAAK,CAA5C,GAAb;AAAA,MAAe,KAAK,GAAgC,KAAK,CAArC,KAApB;AAAA,MAAsB,QAAQ,GAAsB,KAAK,CAA3B,QAA9B;AAAA,MAAgC,OAAO,GAAa,KAAK,CAAlB,OAAvC;AAAA,MAAyC,MAAM,GAAK,KAAK,CAAV,MAA/C;AACR,MAAM,KAAK,GAAe;AACxB,IAAA,QAAQ,EAAA,QADgB;AAExB,IAAA,GAAG,EAAA,GAFqB;AAGxB,IAAA,KAAK,EAAA,KAHmB;AAIxB,IAAA,QAAQ,EAAA,QAJgB;AAKxB,IAAA,OAAO,EAAA,OALiB;AAMxB,IAAA,MAAM,EAAA,MANkB;AAOxB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KAPY;AAUxB,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA2B,OAAA,CAAA,QAAA,CAAA;AAC/B,MAAA,GAAG,EAAA;AAD4B,KAAA,EAE5B,KAF4B,CAA3B;AAVkB,GAA1B;AAgBA,SAAO,KAAP;AACD,CAnBM;;AAAM,OAAA,CAAA,QAAA,GAAQ,QAAR","sourceRoot":""}

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

@@ -14,7 +14,6 @@ var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "B9xav0g": "fbm5ngu",
     "zhjwy3": ["f1dqgpma", "fmej1xs"],
     "Dimara": "fyoio89",
-    "E5pizo": ["f1eroye8", "f1m1elsp"],
     "B7ck84d": "f1ewtqcl",
     "mc9l5x": "f14t3ns0"
   },
@@ -34,6 +33,9 @@ var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
   "rootRounded": {
     "Dimara": "fnpfh4l"
   },
+  "rootShadow": {
+    "E5pizo": ["f1eroye8", "f1m1elsp"]
+  },
   "rootFitNone": {
     "st4lth": "f1plgu50",
     "Ermj5k": ["f13uwng7", "fjmyj0p"],
@@ -62,12 +64,12 @@ var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "a9b677": "fly5x3f"
   }
 }, {
-  "d": [".fnxce6y{border-top-color:var(--alias-color-neutral-neutralStroke1);}", ".fmej1xs{border-right-color:var(--alias-color-neutral-neutralStroke1);}", ".f1dqgpma{border-left-color:var(--alias-color-neutral-neutralStroke1);}", ".fbm5ngu{border-bottom-color:var(--alias-color-neutral-neutralStroke1);}", ".fyoio89{border-radius:var(--global-borderRadius-none);}", ".f1eroye8{box-shadow:var(--alias-shadow-shadow4);}", ".f1m1elsp{box-shadow:var(--alias-shadow-shadow-4);}", ".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;}", ".f1hanlw2{border-top-width:var(--global-strokeWidth-thin);}", ".fkst1ot{border-right-width:var(--global-strokeWidth-thin);}", ".ftvv60i{border-left-width:var(--global-strokeWidth-thin);}", ".fm975v3{border-bottom-width:var(--global-strokeWidth-thin);}", ".f1ytn4vn{border-radius:var(--global-borderRadius-circular);}", ".fnpfh4l{border-radius:var(--global-borderRadius-medium);}", ".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;}"]
+  "d": [".fnxce6y{border-top-color:var(--alias-color-neutral-neutralStroke1);}", ".fmej1xs{border-right-color:var(--alias-color-neutral-neutralStroke1);}", ".f1dqgpma{border-left-color:var(--alias-color-neutral-neutralStroke1);}", ".fbm5ngu{border-bottom-color:var(--alias-color-neutral-neutralStroke1);}", ".fyoio89{border-radius:var(--global-borderRadius-none);}", ".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;}", ".f1hanlw2{border-top-width:var(--global-strokeWidth-thin);}", ".fkst1ot{border-right-width:var(--global-strokeWidth-thin);}", ".ftvv60i{border-left-width:var(--global-strokeWidth-thin);}", ".fm975v3{border-bottom-width:var(--global-strokeWidth-thin);}", ".f1ytn4vn{border-radius:var(--global-borderRadius-circular);}", ".fnpfh4l{border-radius:var(--global-borderRadius-medium);}", ".f1eroye8{box-shadow:var(--alias-shadow-shadow4);}", ".f1m1elsp{box-shadow:var(--alias-shadow-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;}"]
 });
 
 var useImageStyles = function (state) {
   var styles = useStyles();
-  state.root.className = react_make_styles_1.mergeClasses(styles.root, state.bordered && styles.rootBordered, state.circular && styles.rootCircular, state.rounded && styles.rootRounded, state.fit === 'none' && styles.rootFitNone, state.fit === 'center' && styles.rootFitCenter, state.fit === 'cover' && styles.rootFitCover, state.fit === 'contain' && styles.rootFitContain, state.fluid && styles.rootFluid, state.root.className);
+  state.root.className = react_make_styles_1.mergeClasses(styles.root, state.bordered && styles.rootBordered, state.circular && styles.rootCircular, state.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.fluid && styles.rootFluid, state.root.className);
 };
 
 exports.useImageStyles = useImageStyles;

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Image/useImageStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAGA,IAAM,SAAS,gBAAG,mBAAA,SAAA;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;;AAgDO,IAAM,cAAc,GAAG,UAAC,KAAD,EAAkB;AAC9C,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CACrB,MAAM,CAAC,IADc,EAErB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,YAFJ,EAGrB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,YAHJ,EAIrB,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,WAJH,EAKrB,KAAK,CAAC,GAAN,KAAc,MAAd,IAAwB,MAAM,CAAC,WALV,EAMrB,KAAK,CAAC,GAAN,KAAc,QAAd,IAA0B,MAAM,CAAC,aANZ,EAOrB,KAAK,CAAC,GAAN,KAAc,OAAd,IAAyB,MAAM,CAAC,YAPX,EAQrB,KAAK,CAAC,GAAN,KAAc,SAAd,IAA2B,MAAM,CAAC,cARb,EASrB,KAAK,CAAC,KAAN,IAAe,MAAM,CAAC,SATD,EAUrB,KAAK,CAAC,IAAN,CAAW,SAVU,CAAvB;AAYD,CAdM;;AAAM,OAAA,CAAA,cAAA,GAAc,cAAd","sourcesContent":["import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';\nimport type { ImageState } from './Image.types';\n\nconst useStyles = makeStyles({\n  root: 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  rootBordered: theme => ({\n    borderStyle: 'solid',\n    borderWidth: theme.global.strokeWidth.thin,\n  }),\n  rootCircular: theme => ({\n    borderRadius: theme.global.borderRadius.circular,\n  }),\n  rootRounded: theme => ({\n    borderRadius: theme.global.borderRadius.medium,\n  }),\n  rootFitNone: {\n    objectFit: 'none',\n    objectPosition: 'left top',\n    height: '100%',\n    width: '100%',\n  },\n  rootFitCenter: {\n    objectFit: 'none',\n    objectPosition: 'center',\n    height: '100%',\n    width: '100%',\n  },\n  rootFitCover: {\n    objectFit: 'cover',\n    objectPosition: 'center',\n    height: '100%',\n    width: '100%',\n  },\n  rootFitContain: {\n    objectFit: 'contain',\n    objectPosition: 'center',\n    height: '100%',\n    width: '100%',\n  },\n  rootFluid: {\n    width: '100%',\n  },\n});\n\nexport const useImageStyles = (state: ImageState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    styles.root,\n    state.bordered && styles.rootBordered,\n    state.circular && styles.rootCircular,\n    state.rounded && styles.rootRounded,\n    state.fit === 'none' && styles.rootFitNone,\n    state.fit === 'center' && styles.rootFitCenter,\n    state.fit === 'cover' && styles.rootFitCover,\n    state.fit === 'contain' && styles.rootFitContain,\n    state.fluid && styles.rootFluid,\n    state.root.className,\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/Image/useImageStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAGA,IAAM,SAAS,gBAAG,mBAAA,SAAA;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;;AAkDO,IAAM,cAAc,GAAG,UAAC,KAAD,EAAkB;AAC9C,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CACrB,MAAM,CAAC,IADc,EAErB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,YAFJ,EAGrB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,YAHJ,EAIrB,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,WAJH,EAKrB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,UALF,EAMrB,KAAK,CAAC,GAAN,KAAc,MAAd,IAAwB,MAAM,CAAC,WANV,EAOrB,KAAK,CAAC,GAAN,KAAc,QAAd,IAA0B,MAAM,CAAC,aAPZ,EAQrB,KAAK,CAAC,GAAN,KAAc,OAAd,IAAyB,MAAM,CAAC,YARX,EASrB,KAAK,CAAC,GAAN,KAAc,SAAd,IAA2B,MAAM,CAAC,cATb,EAUrB,KAAK,CAAC,KAAN,IAAe,MAAM,CAAC,SAVD,EAWrB,KAAK,CAAC,IAAN,CAAW,SAXU,CAAvB;AAaD,CAfM;;AAAM,OAAA,CAAA,cAAA,GAAc,cAAd","sourceRoot":""}

package/lib-commonjs/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-image",
-  "version": "9.0.0-alpha.80",
+  "version": "9.0.0-alpha.84",
   "description": "Fluent UI React Image component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -25,11 +25,11 @@
     "storybook": "start-storybook"
   },
   "devDependencies": {
-    "@fluentui/babel-make-styles": "9.0.0-alpha.50",
+    "@fluentui/babel-make-styles": "9.0.0-alpha.54",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/jest-serializer-make-styles": "9.0.0-alpha.43",
+    "@fluentui/jest-serializer-make-styles": "9.0.0-alpha.47",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-make-styles": "9.0.0-alpha.12",
+    "@fluentui/react-conformance-make-styles": "9.0.0-alpha.16",
     "@fluentui/scripts": "^1.0.0",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
@@ -44,8 +44,8 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-make-styles": "9.0.0-alpha.68",
-    "@fluentui/react-utilities": "9.0.0-alpha.49",
+    "@fluentui/react-make-styles": "9.0.0-alpha.72",
+    "@fluentui/react-utilities": "9.0.0-alpha.52",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {

package/lib-amd/Image.d.ts

@@ -1 +0,0 @@
-export * from './components/Image/index';

package/lib-amd/Image.js

@@ -1,6 +0,0 @@
-define(["require", "exports", "tslib", "./components/Image/index"], function (require, exports, tslib_1, index_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(index_1, exports);
-});
-//# sourceMappingURL=Image.js.map

package/lib-amd/Image.js.map

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

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

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

package/lib-amd/common/isConformant.js

@@ -1,17 +0,0 @@
-define(["require", "exports", "@fluentui/react-conformance", "@fluentui/react-conformance-make-styles"], function (require, exports, react_conformance_1, react_conformance_make_styles_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.isConformant = void 0;
-    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-amd/common/isConformant.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":";;;;IAIA,SAAgB,YAAY,CAC1B,QAAyF;QAEzF,IAAM,cAAc,GAAyC;YAC3D,gBAAgB,EAAE,IAAI;YACtB,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;YAC5D,aAAa,EAAE,CAAC,cAAc,CAAC;YAC/B,UAAU,EAAE,uCAAqC;YACjD,eAAe,EAAE,IAAI;SACtB,CAAC;QAEF,gCAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;IAC7C,CAAC;IAZD,oCAYC","sourcesContent":["import { isConformant as baseIsConformant } from '@fluentui/react-conformance';\nimport type { IsConformantOptions, TestObject } from '@fluentui/react-conformance';\nimport makeStylesTests from '@fluentui/react-conformance-make-styles';\n\nexport function isConformant<TProps = {}>(\n  testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },\n) {\n  const defaultOptions: Partial<IsConformantOptions<TProps>> = {\n    asPropHandlesRef: true,\n    componentPath: module!.parent!.filename.replace('.test', ''),\n    disabledTests: ['has-docblock'],\n    extraTests: makeStylesTests as TestObject<TProps>,\n    skipAsPropTests: true,\n  };\n\n  baseIsConformant(defaultOptions, testInfo);\n}\n"]}

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

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

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

@@ -1,15 +0,0 @@
-define(["require", "exports", "react", "./renderImage", "./useImage", "./useImageStyles"], function (require, exports, React, renderImage_1, useImage_1, useImageStyles_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.Image = void 0;
-    /**
-     * The Image component ensures the consistent styling of images.
-     */
-    exports.Image = 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-amd/components/Image/Image.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Image.js","sourceRoot":"../src/","sources":["components/Image/Image.tsx"],"names":[],"mappings":";;;;IAMA;;OAEG;IACU,QAAA,KAAK,GAAG,KAAK,CAAC,UAAU,CAA+B,UAAC,KAAK,EAAE,GAAG;QAC7E,IAAM,KAAK,GAAG,mBAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QACnC,+BAAc,CAAC,KAAK,CAAC,CAAC;QAEtB,OAAO,yBAAW,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import * as React from 'react';\nimport { renderImage } from './renderImage';\nimport { useImage } from './useImage';\nimport { useImageStyles } from './useImageStyles';\nimport type { ImageProps } from './Image.types';\n\n/**\n * The Image component ensures the consistent styling of images.\n */\nexport const Image = React.forwardRef<HTMLImageElement, ImageProps>((props, ref) => {\n  const state = useImage(props, ref);\n  useImageStyles(state);\n\n  return renderImage(state);\n});\n\nImage.displayName = 'Image';\n"]}

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

@@ -1,30 +0,0 @@
-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.
-     */
-    bordered?: boolean;
-    /**
-     * An image can set how it should be resized to fit its container.
-     */
-    fit?: 'none' | 'center' | 'contain' | 'cover';
-    /**
-     * An image can take up the width of its container.
-     */
-    fluid?: boolean;
-    /**
-     * An image can appear circular.
-     */
-    circular?: boolean;
-    /**
-     * An image can appear rounded.
-     */
-    rounded?: boolean;
-};
-export interface ImageProps extends ComponentProps<ImageSlots>, Partial<ImageCommons> {
-}
-export interface ImageState extends ComponentState<ImageSlots>, ImageCommons {
-}

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

@@ -1,5 +0,0 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-});
-//# sourceMappingURL=Image.types.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Image.types.js","sourceRoot":"../src/","sources":["components/Image/Image.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentState, ComponentProps, IntrinsicShorthandProps } from '@fluentui/react-utilities';\n\nexport type ImageSlots = {\n  root: IntrinsicShorthandProps<'img'>;\n};\n\nexport type ImageCommons = {\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\nexport interface ImageProps extends ComponentProps<ImageSlots>, Partial<ImageCommons> {}\n\nexport interface ImageState extends ComponentState<ImageSlots>, ImageCommons {}\n"]}

package/lib-amd/components/Image/index.d.ts

@@ -1,5 +0,0 @@
-export * from './Image.types';
-export * from './Image';
-export * from './renderImage';
-export * from './useImage';
-export * from './useImageStyles';

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

@@ -1,10 +0,0 @@
-define(["require", "exports", "tslib", "./Image.types", "./Image", "./renderImage", "./useImage", "./useImageStyles"], function (require, exports, tslib_1, Image_types_1, Image_1, renderImage_1, useImage_1, useImageStyles_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(Image_types_1, exports);
-    tslib_1.__exportStar(Image_1, exports);
-    tslib_1.__exportStar(renderImage_1, exports);
-    tslib_1.__exportStar(useImage_1, exports);
-    tslib_1.__exportStar(useImageStyles_1, exports);
-});
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Image/index.ts"],"names":[],"mappings":";;;IAAA,6CAA8B;IAC9B,uCAAwB;IACxB,6CAA8B;IAC9B,0CAA2B;IAC3B,gDAAiC","sourcesContent":["export * from './Image.types';\nexport * from './Image';\nexport * from './renderImage';\nexport * from './useImage';\nexport * from './useImageStyles';\n"]}

package/lib-amd/components/Image/renderImage.d.ts

@@ -1,6 +0,0 @@
-import { ImageState } from './Image.types';
-/**
- * Define the render function.
- * Given the state of an image, renders it.
- */
-export declare const renderImage: (state: ImageState) => JSX.Element;

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

@@ -1,15 +0,0 @@
-define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "./useImage"], function (require, exports, tslib_1, React, react_utilities_1, useImage_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.renderImage = void 0;
-    /**
-     * Define the render function.
-     * Given the state of an image, renders it.
-     */
-    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-amd/components/Image/renderImage.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"renderImage.js","sourceRoot":"../src/","sources":["components/Image/renderImage.tsx"],"names":[],"mappings":";;;;IAKA;;;OAGG;IACI,IAAM,WAAW,GAAG,UAAC,KAAiB;QACrC,IAAA,KAAuB,0BAAQ,CAAa,KAAK,EAAE,8BAAmB,CAAC,EAArE,KAAK,WAAA,EAAE,SAAS,eAAqD,CAAC;QAE9E,OAAO,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CAAC;IAC5C,CAAC,CAAC;IAJW,QAAA,WAAW,eAItB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ImageSlots, ImageState } from './Image.types';\nimport { imageShorthandProps } from './useImage';\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<ImageSlots>(state, imageShorthandProps);\n\n  return <slots.root {...slotProps.root} />;\n};\n"]}

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

@@ -1,7 +0,0 @@
-import * as React from 'react';
-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<HTMLImageElement>) => ImageState;

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

@@ -1,26 +0,0 @@
-define(["require", "exports", "tslib", "@fluentui/react-utilities"], function (require, exports, tslib_1, react_utilities_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useImage = exports.imageShorthandProps = void 0;
-    exports.imageShorthandProps = ['root'];
-    /**
-     * Given user props, returns state and render function for an Image.
-     */
-    var useImage = function (props, ref) {
-        var bordered = props.bordered, fit = props.fit, fluid = props.fluid, circular = props.circular, rounded = props.rounded;
-        var state = {
-            bordered: bordered,
-            fit: fit,
-            fluid: fluid,
-            circular: circular,
-            rounded: rounded,
-            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-amd/components/Image/useImage.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useImage.js","sourceRoot":"../src/","sources":["components/Image/useImage.ts"],"names":[],"mappings":";;;;IAIa,QAAA,mBAAmB,GAA4B,CAAC,MAAM,CAAC,CAAC;IAErE;;OAEG;IACI,IAAM,QAAQ,GAAG,UAAC,KAAiB,EAAE,GAAgC;QAClE,IAAA,QAAQ,GAAoC,KAAK,SAAzC,EAAE,GAAG,GAA+B,KAAK,IAApC,EAAE,KAAK,GAAwB,KAAK,MAA7B,EAAE,QAAQ,GAAc,KAAK,SAAnB,EAAE,OAAO,GAAK,KAAK,QAAV,CAAW;QAC1D,IAAM,KAAK,GAAe;YACxB,QAAQ,UAAA;YACR,GAAG,KAAA;YACH,KAAK,OAAA;YACL,QAAQ,UAAA;YACR,OAAO,SAAA;YACP,UAAU,EAAE;gBACV,IAAI,EAAE,KAAK;aACZ;YACD,IAAI,EAAE,uCAAqB,CAAC,KAAK,qBAC/B,GAAG,KAAA,IACA,KAAK,EACR;SACH,CAAC;QAEF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAlBW,QAAA,QAAQ,YAkBnB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ImageProps, ImageSlots, ImageState } from './Image.types';\n\nexport const imageShorthandProps: Array<keyof ImageSlots> = ['root'];\n\n/**\n * Given user props, returns state and render function for an Image.\n */\nexport const useImage = (props: ImageProps, ref: React.Ref<HTMLImageElement>): ImageState => {\n  const { bordered, fit, fluid, circular, rounded } = props;\n  const state: ImageState = {\n    bordered,\n    fit,\n    fluid,\n    circular,\n    rounded,\n    components: {\n      root: 'img',\n    },\n    root: getNativeElementProps('img', {\n      ref,\n      ...props,\n    }),\n  };\n\n  return state;\n};\n"]}

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

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