@fluentui/react-image 0.0.0-nightlyff78d1e27a20220217.1 → 0.0.0

package/MIGRATION.md

@@ -2,28 +2,28 @@
 
 ## Introduction
 
-This guide is a reference for upgrading the Image component from v8 (Fabric) or v0 (Northstar) to v9 (FluentUI vNext).
+This guide is a reference for upgrading the `Image` component from v8 or v0 to v9 .
 
-## Migration from v8 (Fabric)
+## Migration from v8
 
 ### Property mapping
 
-The table below presents a mapping of props between the v8 (FabricUI) and v9 (Fluent UI vNext) in order to clarify which properties require changes to achieve the same result.
+The table below presents a mapping of props between the v8 and v9 `Image` components in order to clarify which properties require changes to achieve the same result.
 
 > ⚠️ Note - Properties not in this table are considered deprecated.
 
-| v7 / v8                 | v9      | Good to go? |
-| ----------------------- | ------- | ----------- |
-| `className`             | -       | ✔️          |
-| `coverStyle`            | `fit`   | ⚠️          |
-| `imageFit`              | `fit`   | ✔️          |
-| `maximizeFrame`         | `block` | ✔️          |
-| `loading`               | -       | ✔️          |
-| `onLoadingStateChanged` | -       | ❌          |
-| `shouldFadeIn`          | -       | ❌          |
-| `shouldStartVisible`    | -       | ❌          |
-| `styles`                | -       | ❌          |
-| `theme`                 | -       | ❓          |
+| v7 / v8                 | v9              | Good to go? |
+| ----------------------- | --------------- | ----------- |
+| `className`             | `className`     | ✔️          |
+| `coverStyle`            | `fit="cover"`   | ⚠️          |
+| `imageFit`              | `fit="contain"` | ✔️          |
+| `maximizeFrame`         | `block`         | ✔️          |
+| `loading`               | -               | ❌          |
+| `onLoadingStateChanged` | -               | ❌          |
+| `shouldFadeIn`          | -               | ❌          |
+| `shouldStartVisible`    | -               | ❌          |
+| `styles`                | -               | ❌          |
+| `theme`                 | -               | ❌          |
 
 ### className
 
@@ -55,7 +55,7 @@ This prop has been renamed to `block` which will result in the same behaviour as
 
 ### loading
 
-_This property has not changed and can be used as is._
+For v9, this feature is no longer supported. The alternative is to use the global events such as: `onLoad`, `onError` to detect the image loading state.
 
 ### onLoadingStateChanged
 
@@ -127,27 +127,27 @@ export default function App() {
 
 ### styles
 
-_This property has not changed and can be used as is. However, we highly recommend that you migrate to a `make-styles` styling solution for performance reasons._
+For v9, you should migrate to use `make-styles` and do style customizations through the `className` prop.
 
 ### theme
 
-_This property has not changed and can be used as is. However, we highly recommend that you migrate to a `make-styles` styling solution for performance reasons._
+For v9, you should use `tokens` in conjunction with `make-styles` and `FluentProvider` to achieve theming correctly.
 
-## Migration from v0 (Northstar)
+## Migration from v0
 
 ### Property mapping
 
-The table below presents a mapping of props between the v0 and v9 versions in order to make it clear which properties require changes to achieve the same result.
+The table below presents a mapping of props between the v0 and v9 versions of `Image` in order to make it clear which properties require changes to achieve the same result.
 
 | v0              | v9                 | Good to go? |
 | --------------- | ------------------ | ----------- |
 | `accessibility` | -                  | ❌          |
-| `alt`           | -                  | ✔️          |
-| `aria-label`    | -                  | ✔️          |
+| `alt`           | `alt`              | ✔️          |
+| `aria-label`    | `aria-label`       | ✔️          |
 | `as`            | -                  | ❌          |
 | `avatar`        | `shape="circular"` | ✔️          |
 | `circular`      | `shape="circular"` | ✔️          |
-| `className`     | -                  | ✔️          |
+| `className`     | `className`        | ✔️          |
 | `fluid`         | `block`            | ✔️          |
 | `styles`        | -                  | ❌          |
 | `variables`     | -                  | ❌          |
@@ -156,8 +156,8 @@ The table below presents a mapping of props between the v0 and v9 versions in or
 
 For v9, this property is no longer supported. It is recommended to follow the best practices of a11y in order for Image to be accessible to assistive tools. Thus:
 
-- It is important for Image to have the `alt` description.
-- In case the Image is decorative only, have either `role="presentation"` or `aria-hidden`. Ensure the correct usage of these two attributes, based on your objectives.
+- It is important for `Image` to have the `alt` description.
+- In case the `Image` is decorative only, have either `role="presentation"` or `aria-hidden`. Ensure the correct usage of these two attributes, based on your objectives.
 
 ### alt
 
@@ -169,7 +169,7 @@ _This property has not changed and can be left as is._
 
 ### as
 
-For v9, this property is no longer supported. The Image prop will always be an `<img/>` element, it is not possible to show an image as any other element.
+For v9, this property is no longer supported. The `Image` prop will always be an `<img/>` element, it is not possible to show an image as any other element.
 
 ### avatar
 
@@ -201,13 +201,13 @@ This prop has been renamed to `block` which will result into the same behaviour
 
 ### styles
 
-_This property has not changed and can be used as is. However, we highly recommend that you migrate to a `make-styles` styling solution for performance reasons._
+For v9, you should migrate to use `make-styles` and do style customizations through the `className` prop.
 
 ### variables
 
 For v9, this feature is no longer supported. The alternative is to apply styles through `make-styles`. Below is an example of a migration:
 
-#### v0 (Northstar) implementation
+#### v0 implementation
 
 ```jsx
 const MyComponent = () => {
@@ -215,7 +215,7 @@ const MyComponent = () => {
 };
 ```
 
-#### v9 (Fluent UI vNext) implementation
+#### v9 implementation
 
 ```jsx
 import { Image } from '@fluentui/react-image';

package/README.md

@@ -1,57 +1,39 @@
 # @fluentui/react-image
 
-**React Image component for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
-
-> WIP 🚧 - These are not production-ready components as we are still in a Beta phase.
+**Image components for [Fluent UI React](https://aka.ms/fluentui-storybook)**
 
 Usage of Image component ensures consistent styling and behaviour of images in your application based on the Fluent UI Design System.
 
 ## Usage
 
-To use the Image component, it is required to install the main package of Fluent UI components:
-
-```sh
-npm install @fluentui/react-components
-```
+To import Image:
 
 ```js
 import { Image } from '@fluentui/react-components';
-
-const App = () => {
-  return <Image src="example_image.png" />;
-};
 ```
 
-Or, installing only the `react-image` package:
-
-```sh
-npm install @fluentui/react-image
-npm install @fluentui/react-provider
-```
+### Examples
 
-```js
-import { Image } from '@fluentui/react-image';
-import { FluentProvider } from '@fluentui/react-provider';
-
-const App = () => (
-  <FluentProvider>
-    <Image src="example_image.png" alt="Example image" />;
-  </FluentProvider>
-);
+```jsx
+<Image src="example_image.png" />
+<Image src="example_image.png" alt="Example image" />;
+<Image src="example_image.png" bordered />;
+<Image src="example_image.png" fit="contain" />;
+<Image src="example_image.png" shadow />;
+<Image src="example_image.png" shape="circular" />;
 ```
 
-The DOM structure will result into:
+See [Fluent UI Storybook](https://aka.ms/fluentui-storybook) for more detailed usage examples.
 
-```jsx
-<img src="example_image.png" alt="Example image" />
-```
+Alternatively, run Storybook locally with:
 
-## API
+1. `yarn start`
+2. Select `react-image` from the list.
 
-Image component is build upon the `<img/>` tag, which does support all the native attributes. Additionaly, the following properties are available: `bordered`, `fit`, `block`, `shape` and `shadow`.
+### Specification
 
-For more information on the component, please refer to the [API documentation](https://aka.ms/fluentui-storybook).
+See [SPEC.md](./SPEC.md).
 
 ## Migration
 
-For migrating from older versions of FluentUI, please check out the [migration guide](./MIGRATION.md)
+If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating to the latest Image implementation.

package/Spec.md

@@ -73,18 +73,16 @@ n/a
 
 ## API proposal
 
-See [react-image/Image.types.ts] for the API.
-
-[react-image/image.types.ts]: https://github.com/microsoft/fluentui/blob/master/packages/react-image/src/components/Image/Image.types.ts
+See API at [Image.types.ts](./src/components/Image/Image.types.ts).
 
 Proposed component props:
 
 | Name       | Type      | Default value | Comments                                     |
 | ---------- | --------- | ------------- | -------------------------------------------- |
 | `bordered` | `boolean` | `false`       |                                              |
-| `fit`      | `string`  | "`none`"      | One of: `none`, `center`, `contain`, `cover` |
+| `fit`      | `string`  | `"none"`      | One of: `none`, `center`, `contain`, `cover` |
 | `block`    | `boolean` | `false`       |                                              |
-| `shape `   | `string ` | `false`       | One of: `square`, `circular` , `rounded`     |
+| `shape `   | `string ` | `"square"`    | One of: `square`, `circular` , `rounded`     |
 | `shadow`   | `boolean` | `false`       |                                              |
 
 All native html attributes of the `<img />` will be available to be used as props of the Image component.
@@ -153,12 +151,9 @@ Sample code based on the proposed API:
 <img src="..." class="...">
 ```
 
-<!-- ## Migration -->
-
-<!-- _Describe what will need to be done to upgrade from the existing implementations:_
+## Migration
 
-- _Migration from v8_
-- _Migration from v0_ -->
+See [MIGRATION.md](./MIGRATION.md).
 
 ## Accessibility
 

package/dist/{react-image.d.ts → index.d.ts}

@@ -3,6 +3,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * The Image component ensures the consistent styling of images.
@@ -10,39 +11,46 @@ import type { Slot } from '@fluentui/react-utilities';
 declare const Image_2: ForwardRefComponent<ImageProps>;
 export { Image_2 as Image }
 
-export declare const imageClassName = "fui-Image";
+export declare const imageClassNames: SlotClassNames<ImageSlots>;
 
-declare type ImageCommons = {
+export declare type ImageProps = ComponentProps<ImageSlots> & {
     /**
-     * An image can appear with rectangular border.
+     * An image can take up the width of its container.
+     *
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * An image can appear with a rectangular border.
+     *
+     * @default false
      */
     bordered?: boolean;
     /**
      * An image can set how it should be resized to fit its container.
+     *
+     * @default 'default'
      */
-    fit?: 'none' | 'center' | 'contain' | 'cover';
+    fit?: 'none' | 'center' | 'contain' | 'cover' | 'default';
     /**
-     * An image can take up the width of its container.
+     * An image can appear elevated with shadow.
+     *
+     * @default false
      */
-    block?: boolean;
+    shadow?: boolean;
     /**
      * An image can appear square, circular, or rounded.
-     * @defaultvalue square
+     *
+     * @default 'square'
      */
     shape?: 'square' | 'circular' | 'rounded';
-    /**
-     * An image can appear elevated with shadow.
-     */
-    shadow?: boolean;
 };
 
-export declare type ImageProps = ComponentProps<ImageSlots> & Partial<ImageCommons>;
-
 export declare type ImageSlots = {
     root: Slot<'img'>;
 };
 
-export declare type ImageState = ComponentState<ImageSlots> & ImageCommons;
+export declare type ImageState = ComponentState<ImageSlots> & Required<Pick<ImageProps, 'block' | 'bordered' | 'fit' | 'shadow' | 'shape'>>;
 
 /**
  * Define the render function.

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAIA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;AACA,EAAA,uBAAuB,CAAC,KAAD,CAAvB;AAEA,SAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { renderImage_unstable } from './renderImage';\nimport { useImage_unstable } from './useImage';\nimport { useImageStyles_unstable } from './useImageStyles';\nimport type { ImageProps } from './Image.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The Image component ensures the consistent styling of images.\n */\nexport const Image: ForwardRefComponent<ImageProps> = React.forwardRef((props, ref) => {\n  const state = useImage_unstable(props, ref);\n  useImageStyles_unstable(state);\n\n  return renderImage_unstable(state);\n});\n\nImage.displayName = 'Image';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAIA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;EACA,uBAAuB,CAAC,KAAD,CAAvB;EAEA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { renderImage_unstable } from './renderImage';\nimport { useImage_unstable } from './useImage';\nimport { useImageStyles_unstable } from './useImageStyles';\nimport type { ImageProps } from './Image.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The Image component ensures the consistent styling of images.\n */\nexport const Image: ForwardRefComponent<ImageProps> = React.forwardRef((props, ref) => {\n  const state = useImage_unstable(props, ref);\n  useImageStyles_unstable(state);\n\n  return renderImage_unstable(state);\n});\n\nImage.displayName = 'Image';\n"],"sourceRoot":"../src/"}

package/lib/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 type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';\n\nexport type ImageSlots = {\n  root: Slot<'img'>;\n};\n\ntype 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  block?: boolean;\n\n  /**\n   * An image can appear square, circular, or rounded.\n   * @defaultvalue square\n   */\n  shape?: 'square' | 'circular' | 'rounded';\n\n  /**\n   * An image can appear elevated with shadow.\n   */\n  shadow?: boolean;\n};\n\nexport type ImageProps = ComponentProps<ImageSlots> & Partial<ImageCommons>;\n\nexport type ImageState = ComponentState<ImageSlots> & ImageCommons;\n"]}
+{"version":3,"file":"Image.types.js","sourceRoot":"../src/","sources":["components/Image/Image.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';\n\nexport type ImageSlots = {\n  root: Slot<'img'>;\n};\n\nexport type ImageProps = ComponentProps<ImageSlots> & {\n  /**\n   * An image can take up the width of its container.\n   *\n   * @default false\n   */\n  block?: boolean;\n\n  /**\n   * An image can appear with a rectangular border.\n   *\n   * @default false\n   */\n  bordered?: boolean;\n\n  /**\n   * An image can set how it should be resized to fit its container.\n   *\n   * @default 'default'\n   */\n  fit?: 'none' | 'center' | 'contain' | 'cover' | 'default';\n\n  /**\n   * An image can appear elevated with shadow.\n   *\n   * @default false\n   */\n  shadow?: boolean;\n\n  /**\n   * An image can appear square, circular, or rounded.\n   *\n   * @default 'square'\n   */\n  shape?: 'square' | 'circular' | 'rounded';\n};\n\nexport type ImageState = ComponentState<ImageSlots> &\n  Required<Pick<ImageProps, 'block' | 'bordered' | 'fit' | 'shadow' | 'shape'>>;\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Image/renderImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;;AAGG;;AACH,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;AACxD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAa,KAAb,CAArC;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ImageSlots, ImageState } from './Image.types';\n\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n */\nexport const renderImage_unstable = (state: ImageState) => {\n  const { slots, slotProps } = getSlots<ImageSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Image/renderImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;;AAGG;;AACH,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAa,KAAb,CAArC;EAEA,oBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CAJM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ImageSlots, ImageState } from './Image.types';\n\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n */\nexport const renderImage_unstable = (state: ImageState) => {\n  const { slots, slotProps } = getSlots<ImageSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Image/useImage.js

@@ -5,11 +5,11 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
 
 export const useImage_unstable = (props, ref) => {
   const {
-    bordered,
-    fit,
-    block,
+    bordered = false,
+    fit = 'default',
+    block = false,
     shape = 'square',
-    shadow
+    shadow = false
   } = props;
   const state = {
     bordered,

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Image/useImage.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;AACnG,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA,GAAZ;AAAiB,IAAA,KAAjB;AAAwB,IAAA,KAAK,GAAG,QAAhC;AAA0C,IAAA;AAA1C,MAAqD,KAA3D;AAEA,QAAM,KAAK,GAAe;AACxB,IAAA,QADwB;AAExB,IAAA,GAFwB;AAGxB,IAAA,KAHwB;AAIxB,IAAA,KAJwB;AAKxB,IAAA,MALwB;AAMxB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KANY;AASxB,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAAR;AATH,GAA1B;AAeA,SAAO,KAAP;AACD,CAnBM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ImageProps, ImageState } from './Image.types';\n\n/**\n * Given user props, returns state and render function for an Image.\n */\nexport const useImage_unstable = (props: ImageProps, ref: React.Ref<HTMLImageElement>): ImageState => {\n  const { bordered, fit, block, shape = 'square', shadow } = props;\n\n  const state: ImageState = {\n    bordered,\n    fit,\n    block,\n    shape,\n    shadow,\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":["components/Image/useImage.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;EACnG,MAAM;IAAE,QAAQ,GAAG,KAAb;IAAoB,GAAG,GAAG,SAA1B;IAAqC,KAAK,GAAG,KAA7C;IAAoD,KAAK,GAAG,QAA5D;IAAsE,MAAM,GAAG;EAA/E,IAAyF,KAA/F;EAEA,MAAM,KAAK,GAAe;IACxB,QADwB;IAExB,GAFwB;IAGxB,KAHwB;IAIxB,KAJwB;IAKxB,MALwB;IAMxB,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CANY;IASxB,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAAR;EATH,CAA1B;EAeA,OAAO,KAAP;AACD,CAnBM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ImageProps, ImageState } from './Image.types';\n\n/**\n * Given user props, returns state and render function for an Image.\n */\nexport const useImage_unstable = (props: ImageProps, ref: React.Ref<HTMLImageElement>): ImageState => {\n  const { bordered = false, fit = 'default', block = false, shape = 'square', shadow = false } = props;\n\n  const state: ImageState = {\n    bordered,\n    fit,\n    block,\n    shape,\n    shadow,\n    components: {\n      root: 'img',\n    },\n    root: getNativeElementProps('img', {\n      ref,\n      ...props,\n    }),\n  };\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Image/useImageStyles.js

@@ -1,9 +1,11 @@
 import { shorthands, mergeClasses, __styles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-export const imageClassName = 'fui-Image';
+export const imageClassNames = {
+  root: 'fui-Image'
+};
 
 const useStyles = /*#__PURE__*/__styles({
-  "root": {
+  "base": {
     "g2u3we": "fj3muxo",
     "h3c5rm": ["f1akhkt", "f1lxtadh"],
     "B9xav0g": "f1aperda",
@@ -15,7 +17,7 @@ const useStyles = /*#__PURE__*/__styles({
     "B7ck84d": "f1ewtqcl",
     "mc9l5x": "f14t3ns0"
   },
-  "rootBordered": {
+  "bordered": {
     "icvyot": "fzkkow9",
     "vrafjx": ["fcdblym", "fjik90z"],
     "oivjwe": "fg706s2",
@@ -25,54 +27,56 @@ const useStyles = /*#__PURE__*/__styles({
     "Bn0qgzm": "f1vxd6vx",
     "ibv6hh": ["f1ojsxk5", "f5tn483"]
   },
-  "rootCircular": {
+  "circular": {
     "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
     "Beyfa6y": ["f1nfllo7", "f8fbkgy"],
     "B7oj6ja": ["f1djnp8u", "f1s8kh49"],
     "Btl43ni": ["f1s8kh49", "f1djnp8u"]
   },
-  "rootRounded": {
+  "rounded": {
     "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
     "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
     "B7oj6ja": ["f1jar5jt", "fyu767a"],
     "Btl43ni": ["fyu767a", "f1jar5jt"]
   },
-  "rootShadow": {
+  "square": {},
+  "shadow": {
     "E5pizo": "f1whvlc6"
   },
-  "rootFitNone": {
+  "center": {
     "st4lth": "f1plgu50",
-    "Ermj5k": ["f13uwng7", "fjmyj0p"],
+    "Ermj5k": "f14xojzb",
     "Bqenvij": "f1l02sjl",
     "a9b677": "fly5x3f"
   },
-  "rootFitCenter": {
-    "st4lth": "f1plgu50",
+  "contain": {
+    "st4lth": "f1kle4es",
     "Ermj5k": "f14xojzb",
     "Bqenvij": "f1l02sjl",
     "a9b677": "fly5x3f"
   },
-  "rootFitCover": {
+  "default": {},
+  "cover": {
     "st4lth": "f1ps3kmd",
     "Ermj5k": "f14xojzb",
     "Bqenvij": "f1l02sjl",
     "a9b677": "fly5x3f"
   },
-  "rootFitContain": {
-    "st4lth": "f1kle4es",
-    "Ermj5k": "f14xojzb",
+  "none": {
+    "st4lth": "f1plgu50",
+    "Ermj5k": ["f13uwng7", "fjmyj0p"],
     "Bqenvij": "f1l02sjl",
     "a9b677": "fly5x3f"
   },
-  "rootBlock": {
+  "block": {
     "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);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-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);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".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": [".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-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);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f1plgu50{object-fit:none;}", ".f14xojzb{object-position:center;}", ".f1l02sjl{height:100%;}", ".fly5x3f{width:100%;}", ".f1kle4es{object-fit:contain;}", ".f1ps3kmd{object-fit:cover;}", ".f13uwng7{object-position:left top;}", ".fjmyj0p{object-position:right top;}"]
 });
 
 export const useImageStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(imageClassName, 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);
+  state.root.className = mergeClasses(imageClassNames.root, styles.base, state.block && styles.block, state.bordered && styles.bordered, state.shadow && styles.shadow, styles[state.fit], styles[state.shape], 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,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,cAAc,GAAG,WAAvB;;AAEP,MAAM,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;;AAkDA,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAsB;AAC3D,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,cADiC,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,YAHQ,EAIjC,KAAK,CAAC,KAAN,KAAgB,UAAhB,IAA8B,MAAM,CAAC,YAJJ,EAKjC,KAAK,CAAC,KAAN,KAAgB,SAAhB,IAA6B,MAAM,CAAC,WALH,EAMjC,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,UANU,EAOjC,KAAK,CAAC,GAAN,KAAc,MAAd,IAAwB,MAAM,CAAC,WAPE,EAQjC,KAAK,CAAC,GAAN,KAAc,QAAd,IAA0B,MAAM,CAAC,aARA,EASjC,KAAK,CAAC,GAAN,KAAc,OAAd,IAAyB,MAAM,CAAC,YATC,EAUjC,KAAK,CAAC,GAAN,KAAc,SAAd,IAA2B,MAAM,CAAC,cAVD,EAWjC,KAAK,CAAC,KAAN,IAAe,MAAM,CAAC,SAXW,EAYjC,KAAK,CAAC,IAAN,CAAW,SAZsB,CAAnC;AAcD,CAhBM","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ImageState } from './Image.types';\n\nexport const imageClassName = 'fui-Image';\n\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n\n    boxSizing: 'border-box',\n    display: 'inline-block',\n  },\n  rootBordered: {\n    ...shorthands.borderStyle('solid'),\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n  },\n  rootCircular: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n  rootRounded: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  rootShadow: {\n    boxShadow: tokens.shadow4,\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  rootBlock: {\n    width: '100%',\n  },\n});\n\nexport const useImageStyles_unstable = (state: ImageState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    imageClassName,\n    styles.root,\n    state.bordered && styles.rootBordered,\n    state.shape === 'circular' && styles.rootCircular,\n    state.shape === 'rounded' && styles.rootRounded,\n    state.shadow && styles.rootShadow,\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.block && styles.rootBlock,\n    state.root.className,\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Image/useImageStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,eAAe,GAA+B;EACzD,IAAI,EAAE;AADmD,CAApD;;AAIP,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;;AAmEA,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAsB;EAC3D,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,eAAe,CAAC,IADiB,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,KAAN,IAAe,MAAM,CAAC,KAHW,EAIjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAJQ,EAKjC,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MALU,EAMjC,MAAM,CAAC,KAAK,CAAC,GAAP,CAN2B,EAOjC,MAAM,CAAC,KAAK,CAAC,KAAP,CAP2B,EAQjC,KAAK,CAAC,IAAN,CAAW,SARsB,CAAnC;AAUD,CAZM","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ImageSlots, ImageState } from './Image.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const imageClassNames: SlotClassNames<ImageSlots> = {\n  root: 'fui-Image',\n};\n\nconst useStyles = makeStyles({\n  // Base styles\n  base: {\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n\n    boxSizing: 'border-box',\n    display: 'inline-block',\n  },\n\n  // Bordered styles\n  bordered: {\n    ...shorthands.borderStyle('solid'),\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n  },\n\n  // Shape variations\n  circular: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n  rounded: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  square: {\n    /* The square styles are exactly the same as the base styles. */\n  },\n\n  // Shadow styles\n  shadow: {\n    boxShadow: tokens.shadow4,\n  },\n\n  // Fit variations\n  center: {\n    objectFit: 'none',\n    objectPosition: 'center',\n    height: '100%',\n    width: '100%',\n  },\n  contain: {\n    objectFit: 'contain',\n    objectPosition: 'center',\n    height: '100%',\n    width: '100%',\n  },\n  default: {\n    /* The default styles are exactly the same as the base styles. */\n  },\n  cover: {\n    objectFit: 'cover',\n    objectPosition: 'center',\n    height: '100%',\n    width: '100%',\n  },\n  none: {\n    objectFit: 'none',\n    objectPosition: 'left top',\n    height: '100%',\n    width: '100%',\n  },\n\n  // Block styles\n  block: {\n    width: '100%',\n  },\n});\n\nexport const useImageStyles_unstable = (state: ImageState) => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    imageClassNames.root,\n    styles.base,\n    state.block && styles.block,\n    state.bordered && styles.bordered,\n    state.shadow && styles.shadow,\n    styles[state.fit],\n    styles[state.shape],\n    state.root.className,\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/index.js

@@ -1,2 +1,2 @@
-export * from './Image';
+export { Image, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable } from './Image';
 //# sourceMappingURL=index.js.map

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":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { Image, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable } from './Image';\nexport type { ImageProps, ImageSlots, ImageState } from './Image';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Image/Image.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;AACA,EAAA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;AAEA,SAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { renderImage_unstable } from './renderImage';\nimport { useImage_unstable } from './useImage';\nimport { useImageStyles_unstable } from './useImageStyles';\nimport type { ImageProps } from './Image.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The Image component ensures the consistent styling of images.\n */\nexport const Image: ForwardRefComponent<ImageProps> = React.forwardRef((props, ref) => {\n  const state = useImage_unstable(props, ref);\n  useImageStyles_unstable(state);\n\n  return renderImage_unstable(state);\n});\n\nImage.displayName = 'Image';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Image/Image.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;EACA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;EAEA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { renderImage_unstable } from './renderImage';\nimport { useImage_unstable } from './useImage';\nimport { useImageStyles_unstable } from './useImageStyles';\nimport type { ImageProps } from './Image.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The Image component ensures the consistent styling of images.\n */\nexport const Image: ForwardRefComponent<ImageProps> = React.forwardRef((props, ref) => {\n  const state = useImage_unstable(props, ref);\n  useImageStyles_unstable(state);\n\n  return renderImage_unstable(state);\n});\n\nImage.displayName = 'Image';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Image/renderImage.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;AAGG;;;AACI,MAAM,oBAAoB,GAAI,KAAD,IAAsB;AACxD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;AAEA,SAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ImageSlots, ImageState } from './Image.types';\n\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n */\nexport const renderImage_unstable = (state: ImageState) => {\n  const { slots, slotProps } = getSlots<ImageSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Image/renderImage.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;AAGG;;;AACI,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;EAEA,OAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ImageSlots, ImageState } from './Image.types';\n\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n */\nexport const renderImage_unstable = (state: ImageState) => {\n  const { slots, slotProps } = getSlots<ImageSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}

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

@@ -13,11 +13,11 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
 const useImage_unstable = (props, ref) => {
   const {
-    bordered,
-    fit,
-    block,
+    bordered = false,
+    fit = 'default',
+    block = false,
     shape = 'square',
-    shadow
+    shadow = false
   } = props;
   const state = {
     bordered,

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Image/useImage.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;AACnG,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA,GAAZ;AAAiB,IAAA,KAAjB;AAAwB,IAAA,KAAK,GAAG,QAAhC;AAA0C,IAAA;AAA1C,MAAqD,KAA3D;AAEA,QAAM,KAAK,GAAe;AACxB,IAAA,QADwB;AAExB,IAAA,GAFwB;AAGxB,IAAA,KAHwB;AAIxB,IAAA,KAJwB;AAKxB,IAAA,MALwB;AAMxB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KANY;AASxB,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAA7B;AATkB,GAA1B;AAeA,SAAO,KAAP;AACD,CAnBM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ImageProps, ImageState } from './Image.types';\n\n/**\n * Given user props, returns state and render function for an Image.\n */\nexport const useImage_unstable = (props: ImageProps, ref: React.Ref<HTMLImageElement>): ImageState => {\n  const { bordered, fit, block, shape = 'square', shadow } = props;\n\n  const state: ImageState = {\n    bordered,\n    fit,\n    block,\n    shape,\n    shadow,\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":["components/Image/useImage.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAAoE;EACnG,MAAM;IAAE,QAAQ,GAAG,KAAb;IAAoB,GAAG,GAAG,SAA1B;IAAqC,KAAK,GAAG,KAA7C;IAAoD,KAAK,GAAG,QAA5D;IAAsE,MAAM,GAAG;EAA/E,IAAyF,KAA/F;EAEA,MAAM,KAAK,GAAe;IACxB,QADwB;IAExB,GAFwB;IAGxB,KAHwB;IAIxB,KAJwB;IAKxB,MALwB;IAMxB,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CANY;IASxB,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAA7B;EATkB,CAA1B;EAeA,OAAO,KAAP;AACD,CAnBM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ImageProps, ImageState } from './Image.types';\n\n/**\n * Given user props, returns state and render function for an Image.\n */\nexport const useImage_unstable = (props: ImageProps, ref: React.Ref<HTMLImageElement>): ImageState => {\n  const { bordered = false, fit = 'default', block = false, shape = 'square', shadow = false } = props;\n\n  const state: ImageState = {\n    bordered,\n    fit,\n    block,\n    shape,\n    shadow,\n    components: {\n      root: 'img',\n    },\n    root: getNativeElementProps('img', {\n      ref,\n      ...props,\n    }),\n  };\n\n  return state;\n};\n"],"sourceRoot":"../src/"}