Use unsafe sizes for Examples

gsoft-inc · Dec 5, 2024 · dc4f2ef · dc4f2ef
1 parent cf52335
commit dc4f2ef
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 9 deletions.
diff --git a/apps/docs/content/components/content/IllustratedMessage.mdx b/apps/docs/content/components/content/IllustratedMessage.mdx
@@ -14,7 +14,7 @@ links:
 
 A `IllustratedMessage` uses the following components.
 
-<ComposedComponents components={["Image", "SVGImage", "Text"]}/>
+<ComposedComponents components={["Image", "Text"]}/>
 
 ## Usage
 

diff --git a/packages/components/src/Image/docs/image.tsx b/packages/components/src/Image/docs/image.tsx
@@ -2,6 +2,6 @@ import { Image } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Image src="/frog.jpg" alt="Frog" width="core_1280" />
+        <Image src="/frog.jpg" alt="Frog" UNSAFE_width="300px" />
     );
 }
diff --git a/packages/components/src/Image/docs/retina.tsx b/packages/components/src/Image/docs/retina.tsx
@@ -2,6 +2,6 @@ import { Image } from "@hopper-ui/components";
 
 export default function Example() {
     return (
-        <Image srcSet="/frog.jpg 1x, /frog2x.jpg 2x" alt="Frog" width="core_1280" />
+        <Image srcSet="/frog.jpg 1x, /frog2x.jpg 2x" alt="Frog" UNSAFE_width="300px" />
     );
 }
diff --git a/packages/components/src/Image/docs/shape.tsx b/packages/components/src/Image/docs/shape.tsx
@@ -3,8 +3,8 @@ import { Image, Inline } from "@hopper-ui/components";
 export default function Example() {
     return (
         <Inline>
-            <Image src="/frog.jpg" alt="Frog" width="core_1280" shape="rounded" />
-            <Image src="/frog.jpg" alt="Frog" width="core_1280" shape="circular" />
+            <Image src="/frog.jpg" alt="Frog" UNSAFE_width="300px" shape="rounded" />
+            <Image src="/frog.jpg" alt="Frog" UNSAFE_width="300px" shape="circular" />
         </Inline>
     );
 }
diff --git a/packages/components/src/Image/docs/size.tsx b/packages/components/src/Image/docs/size.tsx
@@ -3,9 +3,9 @@ import { Image, Inline } from "@hopper-ui/components";
 export default function Example() {
     return (
         <Inline>
-            <Image src="/frog.jpg" alt="Frog" width="core_640" height="auto" />
-            <Image src="/frog.jpg" alt="Frog" width="core_800" height="auto" />
-            <Image src="/frog.jpg" alt="Frog" width="core_1280"height="auto" />
+            <Image src="/frog.jpg" alt="Frog" UNSAFE_width="200px" height="auto" />
+            <Image src="/frog.jpg" alt="Frog" UNSAFE_width="300px" height="auto" />
+            <Image src="/frog.jpg" alt="Frog" UNSAFE_width="400px" height="auto" />
         </Inline>
     );
 }
diff --git a/packages/components/src/Image/docs/svgSize.tsx b/packages/components/src/Image/docs/svgSize.tsx
@@ -4,6 +4,6 @@ import { NoResults } from "../assets/index.ts";
 
 export default function Example() {
     return (
-        <SvgImage stroke="neutral" src={NoResults} aria-label="No Results" height="core_1280" width="core_1280" />
+        <SvgImage stroke="neutral" src={NoResults} aria-label="No Results" UNSAFE_width="200px" UNSAFE_height="200px" />
     );
 }