@fluentui/react-image 9.4.3 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -2
- package/dist/index.d.cts +89 -0
- package/lib/Image.js +1 -1
- package/lib/Image.js.map +1 -1
- package/lib/components/Image/Image.js +5 -5
- package/lib/components/Image/Image.js.map +1 -1
- package/lib/components/Image/index.js +4 -4
- package/lib/components/Image/index.js.map +1 -1
- package/lib/components/Image/renderImage.js +1 -1
- package/lib/components/Image/useImage.js +1 -1
- package/lib/components/Image/useImageStyles.styles.js +2 -2
- package/lib/components/Image/useImageStyles.styles.js.map +1 -1
- package/lib/components/Image/useImageStyles.styles.raw.js +2 -2
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/{Image.js → Image.cjs} +1 -1
- package/lib-commonjs/{Image.js.map → Image.cjs.map} +1 -1
- package/lib-commonjs/components/Image/{Image.js → Image.cjs} +3 -3
- package/lib-commonjs/components/Image/{Image.js.map → Image.cjs.map} +1 -1
- package/lib-commonjs/components/Image/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/Image/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/Image/useImageStyles.styles.cjs.map +1 -0
- package/lib-commonjs/{index.js → index.cjs} +1 -1
- package/lib-commonjs/{index.js.map → index.cjs.map} +1 -1
- package/package.json +18 -17
- package/lib-commonjs/components/Image/useImageStyles.styles.js.map +0 -1
- /package/lib-commonjs/components/Image/{Image.types.js → Image.types.cjs} +0 -0
- /package/lib-commonjs/components/Image/{Image.types.js.map → Image.types.cjs.map} +0 -0
- /package/lib-commonjs/components/Image/{renderImage.js → renderImage.cjs} +0 -0
- /package/lib-commonjs/components/Image/{renderImage.js.map → renderImage.cjs.map} +0 -0
- /package/lib-commonjs/components/Image/{useImage.js → useImage.cjs} +0 -0
- /package/lib-commonjs/components/Image/{useImage.js.map → useImage.cjs.map} +0 -0
- /package/lib-commonjs/components/Image/{useImageStyles.styles.js → useImageStyles.styles.cjs} +0 -0
- /package/lib-commonjs/components/Image/{useImageStyles.styles.raw.js → useImageStyles.styles.raw.cjs} +0 -0
- /package/lib-commonjs/components/Image/{useImageStyles.styles.raw.js.map → useImageStyles.styles.raw.cjs.map} +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,25 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-image
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 09 Jul 2026 17:34:06 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.74.3-experimental.esm.20260709-49ee7a20cf.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.74.3-experimental.esm.20260709-49ee7a20cf.0)
|
|
8
|
+
|
|
9
|
+
Thu, 09 Jul 2026 17:34:06 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.4.3..@fluentui/react-image_v9.74.3-experimental.esm.20260709-49ee7a20cf.0)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Release 9.74.3-experimental.esm.20260709-49ee7a20cf ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-shared-contexts to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
|
|
16
|
+
- Bump @fluentui/react-utilities to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
|
|
17
|
+
- Bump @fluentui/react-jsx-runtime to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
|
|
18
|
+
- Bump @fluentui/react-theme to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
|
|
19
|
+
|
|
7
20
|
## [9.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.4.3)
|
|
8
21
|
|
|
9
|
-
Wed, 24 Jun 2026 11:
|
|
22
|
+
Wed, 24 Jun 2026 11:09:44 GMT
|
|
10
23
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.4.2..@fluentui/react-image_v9.4.3)
|
|
11
24
|
|
|
12
25
|
### Patches
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import type { ComponentProps } from '@fluentui/react-utilities';
|
|
2
|
+
import type { ComponentState } from '@fluentui/react-utilities';
|
|
3
|
+
import type { ForwardRefComponent } from '@fluentui/react-utilities';
|
|
4
|
+
import type { JSXElement } from '@fluentui/react-utilities';
|
|
5
|
+
import type * as React_2 from 'react';
|
|
6
|
+
import type { Slot } from '@fluentui/react-utilities';
|
|
7
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* The Image component ensures the consistent styling of images.
|
|
11
|
+
*/
|
|
12
|
+
declare const Image_2: ForwardRefComponent<ImageProps>;
|
|
13
|
+
export { Image_2 as Image }
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Image props without design-specific props (shape, shadow, bordered, fit).
|
|
17
|
+
* Use this when building a base image that is unstyled or uses a custom design system.
|
|
18
|
+
*/
|
|
19
|
+
export declare type ImageBaseProps = ComponentProps<ImageSlots>;
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Image state without design-specific state (shape, shadow, bordered, fit).
|
|
23
|
+
*/
|
|
24
|
+
export declare type ImageBaseState = ComponentState<ImageSlots>;
|
|
25
|
+
|
|
26
|
+
export declare const imageClassNames: SlotClassNames<ImageSlots>;
|
|
27
|
+
|
|
28
|
+
export declare type ImageProps = ComponentProps<ImageSlots> & {
|
|
29
|
+
/**
|
|
30
|
+
* An image can take up the width of its container.
|
|
31
|
+
*
|
|
32
|
+
* @default false
|
|
33
|
+
*/
|
|
34
|
+
block?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* An image can appear with a rectangular border.
|
|
37
|
+
*
|
|
38
|
+
* @default false
|
|
39
|
+
*/
|
|
40
|
+
bordered?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* An image can set how it should be resized to fit its container.
|
|
43
|
+
*
|
|
44
|
+
* @default 'default'
|
|
45
|
+
*/
|
|
46
|
+
fit?: 'none' | 'center' | 'contain' | 'cover' | 'default';
|
|
47
|
+
/**
|
|
48
|
+
* An image can appear elevated with shadow.
|
|
49
|
+
*
|
|
50
|
+
* @default false
|
|
51
|
+
*/
|
|
52
|
+
shadow?: boolean;
|
|
53
|
+
/**
|
|
54
|
+
* An image can appear square, circular, or rounded.
|
|
55
|
+
*
|
|
56
|
+
* @default 'square'
|
|
57
|
+
*/
|
|
58
|
+
shape?: 'square' | 'circular' | 'rounded';
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
export declare type ImageSlots = {
|
|
62
|
+
root: Slot<'img'>;
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
export declare type ImageState = ComponentState<ImageSlots> & Required<Pick<ImageProps, 'block' | 'bordered' | 'fit' | 'shadow' | 'shape'>>;
|
|
66
|
+
|
|
67
|
+
/**
|
|
68
|
+
* Define the render function.
|
|
69
|
+
* Given the state of an image, renders it.
|
|
70
|
+
*/
|
|
71
|
+
export declare const renderImage_unstable: (state: ImageBaseState) => JSXElement;
|
|
72
|
+
|
|
73
|
+
/**
|
|
74
|
+
* Given user props, returns state and render function for an Image.
|
|
75
|
+
*/
|
|
76
|
+
export declare const useImage_unstable: (props: ImageProps, ref: React_2.Ref<HTMLImageElement>) => ImageState;
|
|
77
|
+
|
|
78
|
+
/**
|
|
79
|
+
* Base hook for Image component, which manages state related to slot structure.
|
|
80
|
+
* This hook excludes design props (shape, shadow, bordered, fit).
|
|
81
|
+
*
|
|
82
|
+
* @param props - User provided props to the Image component.
|
|
83
|
+
* @param ref - User provided ref to be passed to the Image component.
|
|
84
|
+
*/
|
|
85
|
+
export declare const useImageBase_unstable: (props: ImageBaseProps, ref: React_2.Ref<HTMLImageElement>) => ImageBaseState;
|
|
86
|
+
|
|
87
|
+
export declare const useImageStyles_unstable: (state: ImageState) => ImageState;
|
|
88
|
+
|
|
89
|
+
export { }
|
package/lib/Image.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { Image, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable, useImageBase_unstable } from
|
|
1
|
+
export { Image, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable, useImageBase_unstable } from "./components/Image/index.js";
|
package/lib/Image.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Image.ts"],"sourcesContent":["export type { ImageProps, ImageSlots, ImageState, ImageBaseProps, ImageBaseState } from './components/Image/index';\nexport {\n Image,\n imageClassNames,\n renderImage_unstable,\n useImageStyles_unstable,\n useImage_unstable,\n useImageBase_unstable,\n} from './components/Image/index';\n"],"names":["Image","imageClassNames","renderImage_unstable","useImageStyles_unstable","useImage_unstable","useImageBase_unstable"],"mappings":"AACA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,EACjBC,qBAAqB,QAChB,
|
|
1
|
+
{"version":3,"sources":["../src/Image.ts"],"sourcesContent":["export type { ImageProps, ImageSlots, ImageState, ImageBaseProps, ImageBaseState } from './components/Image/index';\nexport {\n Image,\n imageClassNames,\n renderImage_unstable,\n useImageStyles_unstable,\n useImage_unstable,\n useImageBase_unstable,\n} from './components/Image/index';\n"],"names":["Image","imageClassNames","renderImage_unstable","useImageStyles_unstable","useImage_unstable","useImageBase_unstable"],"mappings":"AACA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,EACjBC,qBAAqB,QAChB,8BAA2B"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import * as React from
|
|
3
|
-
import { renderImage_unstable } from
|
|
4
|
-
import { useImage_unstable } from
|
|
5
|
-
import { useImageStyles_unstable } from
|
|
6
|
-
import { useCustomStyleHook_unstable } from
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { renderImage_unstable } from "./renderImage.js";
|
|
4
|
+
import { useImage_unstable } from "./useImage.js";
|
|
5
|
+
import { useImageStyles_unstable } from "./useImageStyles.styles.js";
|
|
6
|
+
import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
|
|
7
7
|
/**
|
|
8
8
|
* The Image component ensures the consistent styling of images.
|
|
9
9
|
*/ export const Image = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderImage_unstable } from './renderImage';\nimport { useImage_unstable } from './useImage';\nimport { useImageStyles_unstable } from './useImageStyles.styles';\nimport type { ImageProps } from './Image.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n useImageStyles_unstable(state);\n\n useCustomStyleHook_unstable('useImageStyles_unstable')(state);\n\n return renderImage_unstable(state);\n});\n\nImage.displayName = 'Image';\n"],"names":["React","renderImage_unstable","useImage_unstable","useImageStyles_unstable","useCustomStyleHook_unstable","Image","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../src/components/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderImage_unstable } from './renderImage';\nimport { useImage_unstable } from './useImage';\nimport { useImageStyles_unstable } from './useImageStyles.styles';\nimport type { ImageProps } from './Image.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n useImageStyles_unstable(state);\n\n useCustomStyleHook_unstable('useImageStyles_unstable')(state);\n\n return renderImage_unstable(state);\n});\n\nImage.displayName = 'Image';\n"],"names":["React","renderImage_unstable","useImage_unstable","useImageStyles_unstable","useCustomStyleHook_unstable","Image","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,mBAAgB;AACrD,SAASC,iBAAiB,QAAQ,gBAAa;AAC/C,SAASC,uBAAuB,QAAQ,6BAA0B;AAGlE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,sBAAyCL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQP,kBAAkBK,OAAOC;IAEvCL,wBAAwBM;IAExBL,4BAA4B,2BAA2BK;IAEvD,OAAOR,qBAAqBQ;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { Image } from
|
|
2
|
-
export { renderImage_unstable } from
|
|
3
|
-
export { useImage_unstable, useImageBase_unstable } from
|
|
4
|
-
export { imageClassNames, useImageStyles_unstable } from
|
|
1
|
+
export { Image } from "./Image.js";
|
|
2
|
+
export { renderImage_unstable } from "./renderImage.js";
|
|
3
|
+
export { useImage_unstable, useImageBase_unstable } from "./useImage.js";
|
|
4
|
+
export { imageClassNames, useImageStyles_unstable } from "./useImageStyles.styles.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Image/index.ts"],"sourcesContent":["export type { ImageBaseProps, ImageBaseState, ImageProps, ImageSlots, ImageState } from './Image.types';\nexport { Image } from './Image';\nexport { renderImage_unstable } from './renderImage';\nexport { useImage_unstable, useImageBase_unstable } from './useImage';\nexport { imageClassNames, useImageStyles_unstable } from './useImageStyles.styles';\n"],"names":["Image","renderImage_unstable","useImage_unstable","useImageBase_unstable","imageClassNames","useImageStyles_unstable"],"mappings":"AACA,SAASA,KAAK,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../src/components/Image/index.ts"],"sourcesContent":["export type { ImageBaseProps, ImageBaseState, ImageProps, ImageSlots, ImageState } from './Image.types';\nexport { Image } from './Image';\nexport { renderImage_unstable } from './renderImage';\nexport { useImage_unstable, useImageBase_unstable } from './useImage';\nexport { imageClassNames, useImageStyles_unstable } from './useImageStyles.styles';\n"],"names":["Image","renderImage_unstable","useImage_unstable","useImageBase_unstable","imageClassNames","useImageStyles_unstable"],"mappings":"AACA,SAASA,KAAK,QAAQ,aAAU;AAChC,SAASC,oBAAoB,QAAQ,mBAAgB;AACrD,SAASC,iBAAiB,EAAEC,qBAAqB,QAAQ,gBAAa;AACtE,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,6BAA0B"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
|
2
|
-
import { assertSlots } from
|
|
2
|
+
import { assertSlots } from "@fluentui/react-utilities";
|
|
3
3
|
/**
|
|
4
4
|
* Define the render function.
|
|
5
5
|
* Given the state of an image, renders it.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { getIntrinsicElementProps, slot } from
|
|
2
|
+
import { getIntrinsicElementProps, slot } from "@fluentui/react-utilities";
|
|
3
3
|
/**
|
|
4
4
|
* Given user props, returns state and render function for an Image.
|
|
5
5
|
*/ export const useImage_unstable = (props, ref)=>{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import { shorthands, mergeClasses, __styles } from
|
|
4
|
-
import { tokens } from
|
|
3
|
+
import { shorthands, mergeClasses, __styles } from "@griffel/react";
|
|
4
|
+
import { tokens } from "@fluentui/react-theme";
|
|
5
5
|
export const imageClassNames = {
|
|
6
6
|
root: 'fui-Image'
|
|
7
7
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["shorthands","mergeClasses","__styles","tokens","imageClassNames","root","useStyles","base","g2u3we","h3c5rm","B9xav0g","zhjwy3","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","mc9l5x","bordered","icvyot","vrafjx","oivjwe","wvpqe5","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","circular","rounded","square","shadow","E5pizo","center","st4lth","Ermj5k","contain","cover","none","fitFill","Bqenvij","a9b677","block","d","p","useImageStyles_unstable","state","styles","height","width","hasExplicitSize","shouldApplyFitFill","fit","className","shape"],"sources":["useImageStyles.styles.js"],"sourcesContent":["'use client';\nimport { shorthands, mergeClasses, makeStyles } from
|
|
1
|
+
{"version":3,"names":["shorthands","mergeClasses","__styles","tokens","imageClassNames","root","useStyles","base","g2u3we","h3c5rm","B9xav0g","zhjwy3","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","mc9l5x","bordered","icvyot","vrafjx","oivjwe","wvpqe5","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","circular","rounded","square","shadow","E5pizo","center","st4lth","Ermj5k","contain","cover","none","fitFill","Bqenvij","a9b677","block","d","p","useImageStyles_unstable","state","styles","height","width","hasExplicitSize","shouldApplyFitFill","fit","className","shape"],"sources":["useImageStyles.styles.js"],"sourcesContent":["'use client';\nimport { shorthands, mergeClasses, makeStyles } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nexport const imageClassNames = {\n root: 'fui-Image'\n};\nconst useStyles = makeStyles({\n // Base styles\n base: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n borderRadius: tokens.borderRadiusNone,\n boxSizing: 'border-box',\n display: 'inline-block'\n },\n // Bordered styles\n bordered: {\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin)\n },\n // Shape variations\n circular: {\n borderRadius: tokens.borderRadiusCircular\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n },\n // Shadow styles\n shadow: {\n boxShadow: tokens.shadow4\n },\n // Fit variations\n center: {\n objectFit: 'none',\n objectPosition: 'center'\n },\n contain: {\n objectFit: 'contain',\n objectPosition: 'center'\n },\n default: {\n },\n cover: {\n objectFit: 'cover',\n objectPosition: 'center'\n },\n none: {\n objectFit: 'none',\n objectPosition: 'left top'\n },\n // When no explicit height/width props are provided, apply full-size\n // sizing so fit modes behave as intended (object-fit fills the element).\n fitFill: {\n height: '100%',\n width: '100%'\n },\n // Block styles\n block: {\n width: '100%'\n }\n});\nexport const useImageStyles_unstable = (state)=>{\n const styles = useStyles();\n const { height, width } = state.root;\n // eslint-disable-next-line eqeqeq\n const hasExplicitSize = height != null || width != null;\n const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(imageClassNames.root, styles.base, state.block && styles.block, state.bordered && styles.bordered, state.shadow && styles.shadow, styles[state.fit], shouldApplyFitFill && styles.fitFill, styles[state.shape], state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,UAAU,EAAEC,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAK,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAhB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAa,OAAA;IAAAjB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAc,MAAA;EAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAF,MAAA;IAAAC,MAAA;EAAA;EAAA;EAAAE,KAAA;IAAAH,MAAA;IAAAC,MAAA;EAAA;EAAAG,IAAA;IAAAJ,MAAA;IAAAC,MAAA;EAAA;EAAAI,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAuDjB,CAAC;AACF,OAAO,MAAMC,uBAAuB,GAAIC,KAAK,IAAG;EAC5C,MAAMC,MAAM,GAAGzC,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAE0C,MAAM;IAAEC;EAAM,CAAC,GAAGH,KAAK,CAACzC,IAAI;EACpC;EACA,MAAM6C,eAAe,GAAGF,MAAM,IAAI,IAAI,IAAIC,KAAK,IAAI,IAAI;EACvD,MAAME,kBAAkB,GAAGL,KAAK,CAACM,GAAG,KAAK,SAAS,IAAI,CAACF,eAAe;EACtE;EACAJ,KAAK,CAACzC,IAAI,CAACgD,SAAS,GAAGpD,YAAY,CAACG,eAAe,CAACC,IAAI,EAAE0C,MAAM,CAACxC,IAAI,EAAEuC,KAAK,CAACJ,KAAK,IAAIK,MAAM,CAACL,KAAK,EAAEI,KAAK,CAAC3B,QAAQ,IAAI4B,MAAM,CAAC5B,QAAQ,EAAE2B,KAAK,CAACf,MAAM,IAAIgB,MAAM,CAAChB,MAAM,EAAEgB,MAAM,CAACD,KAAK,CAACM,GAAG,CAAC,EAAED,kBAAkB,IAAIJ,MAAM,CAACR,OAAO,EAAEQ,MAAM,CAACD,KAAK,CAACQ,KAAK,CAAC,EAAER,KAAK,CAACzC,IAAI,CAACgD,SAAS,CAAC;EACzQ,OAAOP,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { shorthands, mergeClasses, makeStyles } from
|
|
3
|
-
import { tokens } from
|
|
2
|
+
import { shorthands, mergeClasses, makeStyles } from "@griffel/react";
|
|
3
|
+
import { tokens } from "@fluentui/react-theme";
|
|
4
4
|
export const imageClassNames = {
|
|
5
5
|
root: 'fui-Image'
|
|
6
6
|
};
|
package/lib/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { Image, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable, useImageBase_unstable } from
|
|
1
|
+
export { Image, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable, useImageBase_unstable } from "./Image.js";
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Image,\n imageClassNames,\n renderImage_unstable,\n useImageStyles_unstable,\n useImage_unstable,\n useImageBase_unstable,\n} from './Image';\nexport type { ImageProps, ImageSlots, ImageState, ImageBaseProps, ImageBaseState } from './Image';\n"],"names":["Image","imageClassNames","renderImage_unstable","useImageStyles_unstable","useImage_unstable","useImageBase_unstable"],"mappings":"AAAA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,EACjBC,qBAAqB,QAChB,
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Image,\n imageClassNames,\n renderImage_unstable,\n useImageStyles_unstable,\n useImage_unstable,\n useImageBase_unstable,\n} from './Image';\nexport type { ImageProps, ImageSlots, ImageState, ImageBaseProps, ImageBaseState } from './Image';\n"],"names":["Image","imageClassNames","renderImage_unstable","useImageStyles_unstable","useImage_unstable","useImageBase_unstable"],"mappings":"AAAA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,EACjBC,qBAAqB,QAChB,aAAU"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Image.ts"],"sourcesContent":["export type { ImageProps, ImageSlots, ImageState, ImageBaseProps, ImageBaseState } from './components/Image/index';\nexport {\n Image,\n imageClassNames,\n renderImage_unstable,\n useImageStyles_unstable,\n useImage_unstable,\n useImageBase_unstable,\n} from './components/Image/index';\n"],"names":["Image","imageClassNames","renderImage_unstable","useImageStyles_unstable","useImage_unstable","useImageBase_unstable"],"mappings":";;;;;;;;;;;;eAEEA,YAAK;;;eACLC,sBAAe;;;eACfC,2BAAoB;;;eAGpBG,4BAAqB;;;eAFrBF,8BAAuB;;;eACvBC,wBAAiB;;;uBAEZ,
|
|
1
|
+
{"version":3,"sources":["../src/Image.ts"],"sourcesContent":["export type { ImageProps, ImageSlots, ImageState, ImageBaseProps, ImageBaseState } from './components/Image/index';\nexport {\n Image,\n imageClassNames,\n renderImage_unstable,\n useImageStyles_unstable,\n useImage_unstable,\n useImageBase_unstable,\n} from './components/Image/index';\n"],"names":["Image","imageClassNames","renderImage_unstable","useImageStyles_unstable","useImage_unstable","useImageBase_unstable"],"mappings":";;;;;;;;;;;;eAEEA,YAAK;;;eACLC,sBAAe;;;eACfC,2BAAoB;;;eAGpBG,4BAAqB;;;eAFrBF,8BAAuB;;;eACvBC,wBAAiB;;;uBAEZ,8BAA2B"}
|
|
@@ -11,9 +11,9 @@ Object.defineProperty(exports, "Image", {
|
|
|
11
11
|
});
|
|
12
12
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
|
-
const _renderImage = require("./renderImage");
|
|
15
|
-
const _useImage = require("./useImage");
|
|
16
|
-
const _useImageStylesstyles = require("./useImageStyles.styles");
|
|
14
|
+
const _renderImage = require("./renderImage.cjs");
|
|
15
|
+
const _useImage = require("./useImage.cjs");
|
|
16
|
+
const _useImageStylesstyles = require("./useImageStyles.styles.cjs");
|
|
17
17
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
18
18
|
const Image = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
19
19
|
const state = (0, _useImage.useImage_unstable)(props, ref);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderImage_unstable } from './renderImage';\nimport { useImage_unstable } from './useImage';\nimport { useImageStyles_unstable } from './useImageStyles.styles';\nimport type { ImageProps } from './Image.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n useImageStyles_unstable(state);\n\n useCustomStyleHook_unstable('useImageStyles_unstable')(state);\n\n return renderImage_unstable(state);\n});\n\nImage.displayName = 'Image';\n"],"names":["React","renderImage_unstable","useImage_unstable","useImageStyles_unstable","useCustomStyleHook_unstable","Image","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACM,
|
|
1
|
+
{"version":3,"sources":["../src/components/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderImage_unstable } from './renderImage';\nimport { useImage_unstable } from './useImage';\nimport { useImageStyles_unstable } from './useImageStyles.styles';\nimport type { ImageProps } from './Image.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n useImageStyles_unstable(state);\n\n useCustomStyleHook_unstable('useImageStyles_unstable')(state);\n\n return renderImage_unstable(state);\n});\n\nImage.displayName = 'Image';\n"],"names":["React","renderImage_unstable","useImage_unstable","useImageStyles_unstable","useCustomStyleHook_unstable","Image","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACM,mBAAgB;0BACnB,gBAAa;sCACP,6BAA0B;qCAGtB,kCAAkC;AAKvE,MAAMK,QAAAA,WAAAA,GAAyCL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,YAAQP,2BAAAA,EAAkBK,OAAOC;QAEvCL,6CAAAA,EAAwBM;QAExBL,gDAAAA,EAA4B,2BAA2BK;IAEvD,WAAOR,iCAAAA,EAAqBQ;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}
|
|
@@ -28,7 +28,7 @@ _export(exports, {
|
|
|
28
28
|
return _useImage.useImage_unstable;
|
|
29
29
|
}
|
|
30
30
|
});
|
|
31
|
-
const _Image = require("./Image");
|
|
32
|
-
const _renderImage = require("./renderImage");
|
|
33
|
-
const _useImage = require("./useImage");
|
|
34
|
-
const _useImageStylesstyles = require("./useImageStyles.styles");
|
|
31
|
+
const _Image = require("./Image.cjs");
|
|
32
|
+
const _renderImage = require("./renderImage.cjs");
|
|
33
|
+
const _useImage = require("./useImage.cjs");
|
|
34
|
+
const _useImageStylesstyles = require("./useImageStyles.styles.cjs");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Image/index.ts"],"sourcesContent":["export type { ImageBaseProps, ImageBaseState, ImageProps, ImageSlots, ImageState } from './Image.types';\nexport { Image } from './Image';\nexport { renderImage_unstable } from './renderImage';\nexport { useImage_unstable, useImageBase_unstable } from './useImage';\nexport { imageClassNames, useImageStyles_unstable } from './useImageStyles.styles';\n"],"names":["Image","renderImage_unstable","useImage_unstable","useImageBase_unstable","imageClassNames","useImageStyles_unstable"],"mappings":";;;;;;;;;;;;eACSA,YAAK;;;eAGLI,qCAAe;;;eAFfH,iCAAoB;;;eACDE,+BAAqB;;;eACvBE,6CAAuB;;;eADxCH,2BAAiB;;;uBAFJ,
|
|
1
|
+
{"version":3,"sources":["../src/components/Image/index.ts"],"sourcesContent":["export type { ImageBaseProps, ImageBaseState, ImageProps, ImageSlots, ImageState } from './Image.types';\nexport { Image } from './Image';\nexport { renderImage_unstable } from './renderImage';\nexport { useImage_unstable, useImageBase_unstable } from './useImage';\nexport { imageClassNames, useImageStyles_unstable } from './useImageStyles.styles';\n"],"names":["Image","renderImage_unstable","useImage_unstable","useImageBase_unstable","imageClassNames","useImageStyles_unstable"],"mappings":";;;;;;;;;;;;eACSA,YAAK;;;eAGLI,qCAAe;;;eAFfH,iCAAoB;;;eACDE,+BAAqB;;;eACvBE,6CAAuB;;;eADxCH,2BAAiB;;;uBAFJ,aAAU;6BACK,mBAAgB;0BACI,gBAAa;sCACb,6BAA0B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["useImageStyles.styles.js"],"sourcesContent":["'use client';\nimport { shorthands, mergeClasses, makeStyles } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nexport const imageClassNames = {\n root: 'fui-Image'\n};\nconst useStyles = makeStyles({\n // Base styles\n base: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n borderRadius: tokens.borderRadiusNone,\n boxSizing: 'border-box',\n display: 'inline-block'\n },\n // Bordered styles\n bordered: {\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin)\n },\n // Shape variations\n circular: {\n borderRadius: tokens.borderRadiusCircular\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n },\n // Shadow styles\n shadow: {\n boxShadow: tokens.shadow4\n },\n // Fit variations\n center: {\n objectFit: 'none',\n objectPosition: 'center'\n },\n contain: {\n objectFit: 'contain',\n objectPosition: 'center'\n },\n default: {\n },\n cover: {\n objectFit: 'cover',\n objectPosition: 'center'\n },\n none: {\n objectFit: 'none',\n objectPosition: 'left top'\n },\n // When no explicit height/width props are provided, apply full-size\n // sizing so fit modes behave as intended (object-fit fills the element).\n fitFill: {\n height: '100%',\n width: '100%'\n },\n // Block styles\n block: {\n width: '100%'\n }\n});\nexport const useImageStyles_unstable = (state)=>{\n const styles = useStyles();\n const { height, width } = state.root;\n // eslint-disable-next-line eqeqeq\n const hasExplicitSize = height != null || width != null;\n const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(imageClassNames.root, styles.base, state.block && styles.block, state.bordered && styles.bordered, state.shadow && styles.shadow, styles[state.fit], shouldApplyFitFill && styles.fitFill, styles[state.shape], state.root.className);\n return state;\n};\n"],"names":["shorthands","mergeClasses","__styles","tokens","imageClassNames","root","useStyles","base","g2u3we","h3c5rm","B9xav0g","zhjwy3","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","mc9l5x","bordered","icvyot","vrafjx","oivjwe","wvpqe5","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","circular","rounded","square","shadow","E5pizo","center","st4lth","Ermj5k","contain","cover","none","fitFill","Bqenvij","a9b677","block","d","p","useImageStyles_unstable","state","styles","height","width","hasExplicitSize","shouldApplyFitFill","fit","className","shape"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Image,\n imageClassNames,\n renderImage_unstable,\n useImageStyles_unstable,\n useImage_unstable,\n useImageBase_unstable,\n} from './Image';\nexport type { ImageProps, ImageSlots, ImageState, ImageBaseProps, ImageBaseState } from './Image';\n"],"names":["Image","imageClassNames","renderImage_unstable","useImageStyles_unstable","useImage_unstable","useImageBase_unstable"],"mappings":";;;;;;;;;;;;eACEA,YAAK;;;eACLC,sBAAe;;;eACfC,2BAAoB;;;eAGpBG,4BAAqB;;;eAFrBF,8BAAuB;;;eACvBC,wBAAiB;;;uBAEZ,
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Image,\n imageClassNames,\n renderImage_unstable,\n useImageStyles_unstable,\n useImage_unstable,\n useImageBase_unstable,\n} from './Image';\nexport type { ImageProps, ImageSlots, ImageState, ImageBaseProps, ImageBaseState } from './Image';\n"],"names":["Image","imageClassNames","renderImage_unstable","useImageStyles_unstable","useImage_unstable","useImageBase_unstable"],"mappings":";;;;;;;;;;;;eACEA,YAAK;;;eACLC,sBAAe;;;eACfC,2BAAoB;;;eAGpBG,4BAAqB;;;eAFrBF,8BAAuB;;;eACvBC,wBAAiB;;;uBAEZ,aAAU"}
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-image",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.74.3-experimental.esm.20260709-49ee7a20cf.0",
|
|
4
4
|
"description": "Fluent UI React Image component.",
|
|
5
|
-
"main": "lib-commonjs/index.
|
|
5
|
+
"main": "lib-commonjs/index.cjs",
|
|
6
6
|
"module": "lib/index.js",
|
|
7
7
|
"typings": "./dist/index.d.ts",
|
|
8
8
|
"sideEffects": false,
|
|
@@ -12,10 +12,10 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui/react-shared-contexts": "
|
|
16
|
-
"@fluentui/react-utilities": "
|
|
17
|
-
"@fluentui/react-jsx-runtime": "
|
|
18
|
-
"@fluentui/react-theme": "
|
|
15
|
+
"@fluentui/react-shared-contexts": "9.74.3-experimental.esm.20260709-49ee7a20cf.0",
|
|
16
|
+
"@fluentui/react-utilities": "9.74.3-experimental.esm.20260709-49ee7a20cf.0",
|
|
17
|
+
"@fluentui/react-jsx-runtime": "9.74.3-experimental.esm.20260709-49ee7a20cf.0",
|
|
18
|
+
"@fluentui/react-theme": "9.74.3-experimental.esm.20260709-49ee7a20cf.0",
|
|
19
19
|
"@griffel/react": "^1.5.32",
|
|
20
20
|
"@swc/helpers": "^0.5.1"
|
|
21
21
|
},
|
|
@@ -25,25 +25,26 @@
|
|
|
25
25
|
"react": ">=16.14.0 <20.0.0",
|
|
26
26
|
"react-dom": ">=16.14.0 <20.0.0"
|
|
27
27
|
},
|
|
28
|
-
"beachball": {
|
|
29
|
-
"disallowedChangeTypes": [
|
|
30
|
-
"major",
|
|
31
|
-
"prerelease"
|
|
32
|
-
]
|
|
33
|
-
},
|
|
28
|
+
"beachball": {},
|
|
34
29
|
"exports": {
|
|
35
30
|
".": {
|
|
36
|
-
"
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
31
|
+
"import": {
|
|
32
|
+
"types": "./dist/index.d.ts",
|
|
33
|
+
"default": "./lib/index.js"
|
|
34
|
+
},
|
|
35
|
+
"require": {
|
|
36
|
+
"types": "./dist/index.d.cts",
|
|
37
|
+
"default": "./lib-commonjs/index.cjs"
|
|
38
|
+
}
|
|
40
39
|
},
|
|
41
40
|
"./package.json": "./package.json"
|
|
42
41
|
},
|
|
43
42
|
"files": [
|
|
44
43
|
"*.md",
|
|
45
44
|
"dist/*.d.ts",
|
|
45
|
+
"dist/*.d.cts",
|
|
46
46
|
"lib",
|
|
47
47
|
"lib-commonjs"
|
|
48
|
-
]
|
|
48
|
+
],
|
|
49
|
+
"type": "module"
|
|
49
50
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["useImageStyles.styles.js"],"sourcesContent":["'use client';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const imageClassNames = {\n root: 'fui-Image'\n};\nconst useStyles = makeStyles({\n // Base styles\n base: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n borderRadius: tokens.borderRadiusNone,\n boxSizing: 'border-box',\n display: 'inline-block'\n },\n // Bordered styles\n bordered: {\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin)\n },\n // Shape variations\n circular: {\n borderRadius: tokens.borderRadiusCircular\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n },\n // Shadow styles\n shadow: {\n boxShadow: tokens.shadow4\n },\n // Fit variations\n center: {\n objectFit: 'none',\n objectPosition: 'center'\n },\n contain: {\n objectFit: 'contain',\n objectPosition: 'center'\n },\n default: {\n },\n cover: {\n objectFit: 'cover',\n objectPosition: 'center'\n },\n none: {\n objectFit: 'none',\n objectPosition: 'left top'\n },\n // When no explicit height/width props are provided, apply full-size\n // sizing so fit modes behave as intended (object-fit fills the element).\n fitFill: {\n height: '100%',\n width: '100%'\n },\n // Block styles\n block: {\n width: '100%'\n }\n});\nexport const useImageStyles_unstable = (state)=>{\n const styles = useStyles();\n const { height, width } = state.root;\n // eslint-disable-next-line eqeqeq\n const hasExplicitSize = height != null || width != null;\n const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(imageClassNames.root, styles.base, state.block && styles.block, state.bordered && styles.bordered, state.shadow && styles.shadow, styles[state.fit], shouldApplyFitFill && styles.fitFill, styles[state.shape], state.root.className);\n return state;\n};\n"],"names":["shorthands","mergeClasses","__styles","tokens","imageClassNames","root","useStyles","base","g2u3we","h3c5rm","B9xav0g","zhjwy3","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","mc9l5x","bordered","icvyot","vrafjx","oivjwe","wvpqe5","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","circular","rounded","square","shadow","E5pizo","center","st4lth","Ermj5k","contain","cover","none","fitFill","Bqenvij","a9b677","block","d","p","useImageStyles_unstable","state","styles","height","width","hasExplicitSize","shouldApplyFitFill","fit","className","shape"],"mappings":"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"}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
/package/lib-commonjs/components/Image/{useImageStyles.styles.js → useImageStyles.styles.cjs}
RENAMED
|
File without changes
|
|
File without changes
|
|
File without changes
|