@workday/canvas-kit-docs 15.0.0-alpha.0075-next.0 → 15.0.0-alpha.0077-next.0

package/dist/mdx/preview-react/select/examples/Left Label/DefaultLeft.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Select} from '@workday/canvas-kit-preview-react/select';
-import {options} from '../storiesData';
-import {controlComponent} from '../../../../../../utils/storybook';
-
-export default () => {
-  return (
-    <FormField orientation="horizontalStart" id="select-default">
-      <FormField.Label>Label</FormField.Label>
-      <FormField.Field>
-        {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
-      </FormField.Field>
-    </FormField>
-  );
-};

package/dist/mdx/preview-react/select/examples/Left Label/DefaultWithCustomOptionsLeft.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Select} from '@workday/canvas-kit-preview-react/select';
-import {customOptions, customRenderOption, customRenderSelected} from '../storiesData';
-import {controlComponent} from '../../../../../../utils/storybook';
-
-export default () => {
-  return (
-    <FormField orientation="horizontalStart" id="select-default-custom">
-      <FormField.Label>Label</FormField.Label>
-      <FormField.Field>
-        {controlComponent(
-          <FormField.Input
-            as={Select}
-            name="icon"
-            options={customOptions}
-            renderOption={customRenderOption}
-            renderSelected={customRenderSelected}
-          />
-        )}
-      </FormField.Field>
-    </FormField>
-  );
-};

package/dist/mdx/preview-react/select/examples/Left Label/DefaultWithSimpleOptionsLeft.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Select} from '@workday/canvas-kit-preview-react/select';
-import {simpleOptions} from '../storiesData';
-import {controlComponent} from '../../../../../../utils/storybook';
-
-export default () => {
-  return (
-    <FormField orientation="horizontalStart" id="select-default-simple">
-      <FormField.Label>Label</FormField.Label>
-      <FormField.Field>
-        {controlComponent(<FormField.Input as={Select} name="state" options={simpleOptions} />)}
-      </FormField.Field>
-    </FormField>
-  );
-};

package/dist/mdx/preview-react/select/examples/Left Label/DisabledLeft.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Select} from '@workday/canvas-kit-preview-react/select';
-import {options} from '../storiesData';
-import {controlComponent} from '../../../../../../utils/storybook';
-
-export default () => {
-  return (
-    <FormField orientation="horizontalStart" id="select-disabled">
-      <FormField.Label>Label</FormField.Label>
-      <FormField.Field>
-        {controlComponent(
-          <FormField.Input as={Select} name="contact" options={options} disabled={true} />
-        )}
-      </FormField.Field>
-    </FormField>
-  );
-};

package/dist/mdx/preview-react/select/examples/Left Label/ErrorLeft.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Select} from '@workday/canvas-kit-preview-react/select';
-import {hintText, options} from '../storiesData';
-import {controlComponent} from '../../../../../../utils/storybook';
-
-export default () => {
-  return (
-    <FormField orientation="horizontalStart" id="select-error" error="error">
-      <FormField.Label>Label</FormField.Label>
-      <FormField.Field>
-        {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
-        <FormField.Hint>{hintText}</FormField.Hint>
-      </FormField.Field>
-    </FormField>
-  );
-};

package/dist/mdx/preview-react/select/examples/Left Label/GrowLeft.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Select} from '@workday/canvas-kit-preview-react/select';
-import {options} from '../storiesData';
-import {controlComponent} from '../../../../../../utils/storybook';
-
-export default () => {
-  return (
-    <FormField orientation="horizontalStart" id="select-grow" grow={true}>
-      <FormField.Label>Label</FormField.Label>
-      <FormField.Field>
-        {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
-      </FormField.Field>
-    </FormField>
-  );
-};

package/dist/mdx/preview-react/select/examples/Left Label/ScrollableLeft.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Select} from '@workday/canvas-kit-preview-react/select';
-import {manyOptions} from '../storiesData';
-import {controlComponent} from '../../../../../../utils/storybook';
-
-export default () => {
-  return (
-    <FormField orientation="horizontalStart" id="select-default">
-      <FormField.Label>Label</FormField.Label>
-      <FormField.Field>
-        {controlComponent(<FormField.Input as={Select} name="contact" options={manyOptions} />)}
-      </FormField.Field>
-    </FormField>
-  );
-};

package/dist/mdx/preview-react/select/examples/Left Label/index.ts

@@ -1,8 +0,0 @@
-export {DefaultLeft} from './DefaultLeft';
-export {DefaultWithCustomOptionsLeft} from './DefaultWithCustomOptionsLeft';
-export {DefaultWithSimpleOptionsLeft} from './DefaultWithSimpleOptionsLeft';
-export {ScrollableLeft} from './ScrollableLeft';
-export {DisabledLeft} from './DisabledLeft';
-export {AlertLeft} from './AlertLeft';
-export {ErrorLeft} from './ErrorLeft';
-export {GrowLeft} from './GrowLeft';

package/dist/mdx/preview-react/select/examples/Top Label/Caution.tsx

@@ -1,16 +0,0 @@
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Select} from '@workday/canvas-kit-preview-react/select';
-import {hintText, options} from '../storiesData';
-import {controlComponent} from '../../../../../../utils/storybook';
-
-export default () => {
-  return (
-    <FormField id="select-alert" error="caution">
-      <FormField.Label>Label</FormField.Label>
-      <FormField.Field>
-        {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
-        <FormField.Hint>{hintText}</FormField.Hint>
-      </FormField.Field>
-    </FormField>
-  );
-};

package/dist/mdx/preview-react/select/examples/Top Label/Default.tsx

@@ -1,15 +0,0 @@
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Select} from '@workday/canvas-kit-preview-react/select';
-import {options} from '../storiesData';
-import {controlComponent} from '../../../../../../utils/storybook';
-
-export default () => {
-  return (
-    <FormField id="select-default">
-      <FormField.Label>Label</FormField.Label>
-      <FormField.Field>
-        {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
-      </FormField.Field>
-    </FormField>
-  );
-};

package/dist/mdx/preview-react/select/examples/Top Label/DefaultWithCustomOptions.tsx

@@ -1,23 +0,0 @@
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Select} from '@workday/canvas-kit-preview-react/select';
-import {customOptions, customRenderOption, customRenderSelected} from '../storiesData';
-import {controlComponent} from '../../../../../../utils/storybook';
-
-export default () => {
-  return (
-    <FormField id="select-default-custom">
-      <FormField.Label>Label</FormField.Label>
-      <FormField.Field>
-        {controlComponent(
-          <FormField.Input
-            as={Select}
-            name="icon"
-            options={customOptions}
-            renderOption={customRenderOption}
-            renderSelected={customRenderSelected}
-          />
-        )}
-      </FormField.Field>
-    </FormField>
-  );
-};

package/dist/mdx/preview-react/select/examples/Top Label/DefaultWithSimpleOptions.tsx

@@ -1,15 +0,0 @@
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Select} from '@workday/canvas-kit-preview-react/select';
-import {simpleOptions} from '../storiesData';
-import {controlComponent} from '../../../../../../utils/storybook';
-
-export default () => {
-  return (
-    <FormField id="select-default-simple">
-      <FormField.Label>Label</FormField.Label>
-      <FormField.Field>
-        {controlComponent(<FormField.Input as={Select} name="state" options={simpleOptions} />)}
-      </FormField.Field>
-    </FormField>
-  );
-};

package/dist/mdx/preview-react/select/examples/Top Label/Disabled.tsx

@@ -1,17 +0,0 @@
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Select} from '@workday/canvas-kit-preview-react/select';
-import {options} from '../storiesData';
-import {controlComponent} from '../../../../../../utils/storybook';
-
-export default () => {
-  return (
-    <FormField id="select-disabled">
-      <FormField.Label>Label</FormField.Label>
-      <FormField.Field>
-        {controlComponent(
-          <FormField.Input as={Select} name="contact" options={options} disabled={true} />
-        )}
-      </FormField.Field>
-    </FormField>
-  );
-};

package/dist/mdx/preview-react/select/examples/Top Label/Error.tsx

@@ -1,16 +0,0 @@
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Select} from '@workday/canvas-kit-preview-react/select';
-import {hintText, options} from '../storiesData';
-import {controlComponent} from '../../../../../../utils/storybook';
-
-export default () => {
-  return (
-    <FormField id="select-error" error="error">
-      <FormField.Label>Label</FormField.Label>
-      <FormField.Field>
-        {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
-        <FormField.Hint>{hintText}</FormField.Hint>
-      </FormField.Field>
-    </FormField>
-  );
-};

package/dist/mdx/preview-react/select/examples/Top Label/Grow.tsx

@@ -1,15 +0,0 @@
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Select} from '@workday/canvas-kit-preview-react/select';
-import {options} from '../storiesData';
-import {controlComponent} from '../../../../../../utils/storybook';
-
-export default () => {
-  return (
-    <FormField id="select-grow" grow={true}>
-      <FormField.Label>Label</FormField.Label>
-      <FormField.Field>
-        {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
-      </FormField.Field>
-    </FormField>
-  );
-};

package/dist/mdx/preview-react/select/examples/Top Label/Scrollable.tsx

@@ -1,13 +0,0 @@
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Select} from '@workday/canvas-kit-preview-react/select';
-import {manyOptions} from '../storiesData';
-import {controlComponent} from '../../../../../../utils/storybook';
-
-export default () => {
-  return (
-    <FormField id="select-default">
-      <FormField.Label>Label</FormField.Label>
-      {controlComponent(<FormField.Input as={Select} name="contact" options={manyOptions} />)}
-    </FormField>
-  );
-};

package/dist/mdx/preview-react/select/examples/Top Label/index.ts

@@ -1,8 +0,0 @@
-export {Default} from './Default';
-export {DefaultWithCustomOptions} from './DefaultWithCustomOptions';
-export {DefaultWithSimpleOptions} from './DefaultWithSimpleOptions';
-export {Scrollable} from './Scrollable';
-export {Disabled} from './Disabled';
-export {Caution} from './Caution';
-export {Error} from './Error';
-export {Grow} from './Grow';

package/dist/mdx/preview-react/select/examples/storiesData.tsx

@@ -1,92 +0,0 @@
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {
-  activityStreamIcon,
-  avatarIcon,
-  uploadCloudIcon,
-  userIcon,
-} from '@workday/canvas-system-icons-web';
-import {colors, typeColors} from '@workday/canvas-kit-react/tokens';
-import {
-  RenderOptionFunction,
-  RenderSelectedFunction,
-} from '@workday/canvas-kit-preview-react/select';
-
-export default 'Helpful text goes here.';
-export default 'error-desc-id';
-
-export default [
-  {label: 'E-mail', value: 'email-1234'},
-  {label: 'Phone', value: 'phone'},
-  {label: 'Fax (disabled)', value: 'fax', disabled: true},
-  {label: 'Mail', value: 'mail'},
-  {label: 'Mobile Phone', value: 'mobile_phone'},
-  {
-    label: 'The Ontologically Anthropocentric Sensory Immersive Simulation',
-    value: 'oasis',
-  },
-];
-
-export default ['California', 'Florida', 'New York', 'Pennsylvania', 'Texas'];
-
-export default [
-  {label: 'Atlanta (United States)', value: 'atlanta'},
-  {label: 'Amsterdam (Europe)', value: 'amsterdam'},
-  {label: 'Austin (United States)', value: 'austin'},
-  {label: 'Beaverton (United States)', value: 'beaverton'},
-  {label: 'Belfast (Europe)', value: 'belfast'},
-  {label: 'Berlin (Europe)', value: 'berlin'},
-  {label: 'Boston (United States)', value: 'boston'},
-  {label: 'Boulder (United States)', value: 'boulder'},
-  {label: 'Chicago (United States)', value: 'chicago'},
-  {label: 'Dallas (United States)', value: 'dallas'},
-  {label: 'Denver (United States)', value: 'denver'},
-  {label: 'Dublin (Europe)', value: 'dublin'},
-  {label: 'Irvine (United States)', value: 'irvine'},
-  {label: 'Minneapolis (United States)', value: 'minneapolis'},
-  {label: 'New York (United States)', value: 'new-york'},
-  {label: 'Orlando (United States)', value: 'orlando'},
-  {label: 'Palo Alto (United States)', value: 'palo-alto'},
-  {label: 'Philadelphia (United States)', value: 'philadelphia'},
-  {label: 'Pleasanton (United States)', value: 'pleasanton'},
-  {label: 'Raleigh (United States)', value: 'raleigh'},
-  {label: 'San Francisco (United States)', value: 'san-francisco'},
-  {label: 'San Mateo (United States)', value: 'san-mateo'},
-  {label: 'Stockholm (Europe)', value: 'stockholm'},
-  {
-    label: 'The Ontologically Anthropocentric Sensory Immersive Simulation (Virtual Reality)',
-    value: 'oasis',
-  },
-  {label: 'Toronto (Canada)', value: 'toronto'},
-  {label: 'Victoria (Canada)', value: 'victoria'},
-  {label: 'Vienna (Europe)', value: 'vienna'},
-  {label: 'Warsaw (Europe)', value: 'warsaw'},
-  {label: 'Washington, DC (United States)', value: 'washington-dc'},
-  {label: 'Zurich (Europe)', value: 'zurich'},
-];
-
-export default [
-  {value: 'Activity Stream', data: {icon: activityStreamIcon}},
-  {value: 'Avatar', data: {icon: avatarIcon}},
-  {value: 'Upload Cloud', data: {icon: uploadCloudIcon}},
-  {value: 'User', data: {icon: userIcon}},
-];
-
-export const customRenderOption: RenderOptionFunction = option => {
-  const iconColor = option.focused ? typeColors.inverse : colors.blackPepper100;
-  return (
-    <div style={{alignItems: 'center', display: 'flex', padding: '3px 0'}}>
-      <SystemIcon icon={option.data.icon} color={iconColor} colorHover={iconColor} />
-      <div style={{marginLeft: 5}}>{option.value}</div>
-    </div>
-  );
-};
-
-export const customRenderSelected: RenderSelectedFunction = option => {
-  const iconColor = colors.blackPepper100;
-  return (
-    <div style={{alignItems: 'center', display: 'flex'}}>
-      <SystemIcon icon={option.data.icon} color={iconColor} colorHover={iconColor} />
-      <div style={{marginLeft: 5}}>{option.value}</div>
-    </div>
-  );
-};

package/dist/mdx/react/avatar/avatar/Avatar.mdx

@@ -1,109 +0,0 @@
-import {
-  Specifications,
-  SymbolDoc,
-  SymbolDescription,
-  ExampleCodeBlock,
-  StorybookStatusIndicator,
-} from '@workday/canvas-kit-docs';
-import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
-
-import Basic from './examples/Basic';
-import Button from './examples/Button';
-import Image from './examples/Image';
-import LazyLoad from './examples/LazyLoad';
-import ObjectFit from './examples/ObjectFit';
-import Size from './examples/Size';
-import Variant from './examples/Variant';
-import CustomStyles from './examples/CustomStyles';
-
-
-# Canvas Kit Avatar <StorybookStatusIndicator type="deprecated" />
-
-<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
-  <InformationHighlight.Icon />
-  <InformationHighlight.Body>
-    `Avatar` in Main has been deprecated and will be removed in a future major version. Please use
-    [Avatar](https://workday.github.io/canvas-kit/?path=/docs/preview-avatar--docs) in Preview
-    instead.
-  </InformationHighlight.Body>
-</InformationHighlight>
-
-Represents a person's profile.
-
-[> Workday Design Reference](https://canvas.workdaydesign.com/components/indicators/avatar)
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-react
-```
-
-## Usage
-
-<SymbolDescription name="Avatar" fileName="/react/" />
-
-The example below shows multiple instances of a `Avatar` with various configurations.
-
-### Basic
-
-By default, the Avatar renders a `button` element. If yo'd like to change the default element, use
-the `as` prop.
-
-<ExampleCodeBlock code={Basic} />
-
-### Button
-
-Like many of our components, Avatar accepts an `as` prop, which lets you change the underlying
-semantic element to a `div`. This should be done with caution to ensure the best accessibility.
-Generally, `<button>` elements should be used for actions.
-
-<ExampleCodeBlock code={Button} />
-
-### Variant
-
-Avatar defaults to using a `"light"` `variant` property. You can change the `variant` prop to "dark"
-by including `variant="dark"`.
-
-<ExampleCodeBlock code={Variant} />
-
-### Size
-
-Avatar defaults to using a `"medium"` `size` property. You can change the `size` prop to various
-sizing options. See Component API for more details.
-
-Additionally, you can explicitly specify the size you want for the Avatar in pixels or rems.
-
-<ExampleCodeBlock code={Size} />
-
-### Image
-
-Avatar renders an image when the `url` prop is defined.
-
-<ExampleCodeBlock code={Image} />
-
-### Object Fit
-
-Avatar defaults to using `contain` for object-fit. You can change this property to any other
-acceptable `object-fit` properties. For best fit, try to use square images.
-
-<ExampleCodeBlock code={ObjectFit} />
-
-### Lazy Load
-
-Example of implementing lazy load behavior with Avatar.
-
-<ExampleCodeBlock code={LazyLoad} />
-
-### Custom Styling
-
-To change the background color of the Avatar, you can use our `createStencil` functionality.
-
-<ExampleCodeBlock code={CustomStyles} />
-
-## Component API
-
-<SymbolDoc name="Avatar" fileName="/react/" />
-
-## Specifications
-
-<Specifications file="Avatar.spec.ts" name="Avatar" />

package/dist/mdx/react/avatar/avatar/examples/Basic.tsx

@@ -1,17 +0,0 @@
-import {Avatar} from '@workday/canvas-kit-react/avatar';
-import {createStyles} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-
-const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
-
-const containerStyles = createStyles({
-  display: 'inline-flex',
-  gap: system.space.x2,
-});
-
-export default () => (
-  <div className={containerStyles}>
-    <Avatar altText="Avatar" onClick={handleAvatarButtonClick} />
-    <Avatar altText="Avatar" as="div" />
-  </div>
-);

package/dist/mdx/react/avatar/avatar/examples/Button.tsx

@@ -1,20 +0,0 @@
-import {Avatar} from '@workday/canvas-kit-react/avatar';
-import {createStyles} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-// @ts-ignore: Cannot find module error
-import testAvatar from './test-avatar.png';
-
-const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
-
-const containerStyles = createStyles({
-  display: 'inline-flex',
-  gap: system.space.x2,
-});
-
-export default () => (
-  <div className={containerStyles}>
-    <Avatar altText="Avatar" variant="dark" onClick={handleAvatarButtonClick} />
-    <Avatar altText="Avatar" onClick={handleAvatarButtonClick} />
-    <Avatar altText="Avatar" url={testAvatar} onClick={handleAvatarButtonClick} />
-  </div>
-);

package/dist/mdx/react/avatar/avatar/examples/CustomStyles.tsx

@@ -1,34 +0,0 @@
-import {Avatar} from '@workday/canvas-kit-react/avatar';
-import {createStencil, createStyles} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-import {systemIconStencil} from '@workday/canvas-kit-react/icon';
-
-const customOrangeAvatar = createStencil({
-  base: {
-    backgroundColor: system.color.static.amber.default,
-    ['[data-part="avatar-icon"]']: {
-      [systemIconStencil.vars.color]: system.color.static.white,
-    },
-  },
-});
-
-const customGreenAvatarStencil = createStencil({
-  base: {
-    backgroundColor: system.color.static.green.default,
-    ['[data-part="avatar-icon"]']: {
-      [systemIconStencil.vars.color]: system.color.static.white,
-    },
-  },
-});
-
-const containerStyles = createStyles({
-  display: 'inline-flex',
-  gap: system.space.x2,
-});
-
-export default () => (
-  <div className={containerStyles}>
-    <Avatar altText="Avatar" as="div" {...customOrangeAvatar()} />
-    <Avatar altText="Avatar" as="div" {...customGreenAvatarStencil()} />
-  </div>
-);

package/dist/mdx/react/avatar/avatar/examples/Image.tsx

@@ -1,25 +0,0 @@
-import {Avatar} from '@workday/canvas-kit-react/avatar';
-// @ts-ignore: Cannot find module error
-import testAvatar from './test-avatar.png';
-import {createStyles} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
-
-const containerStyles = createStyles({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: system.space.x2,
-});
-
-export default () => (
-  <div className={containerStyles}>
-    <h3>Working Images</h3>
-    <Avatar altText="Avatar" size="extraExtraLarge" as="div" url={testAvatar} />
-    <Avatar altText="Avatar" size="extraLarge" as="div" url={testAvatar} />
-    <Avatar altText="Avatar" size="large" as="div" url={testAvatar} />
-    <Avatar altText="Avatar" size="medium" as="div" url={testAvatar} />
-    <Avatar altText="Avatar" size="small" as="div" url={testAvatar} />
-    <Avatar altText="Avatar" size="extraSmall" as="div" url={testAvatar} />
-    <h3>Broken Image</h3>
-    <Avatar altText="Avatar" url="/fake/path/to/image.png" as="div" />
-  </div>
-);

package/dist/mdx/react/avatar/avatar/examples/LazyLoad.tsx

@@ -1,20 +0,0 @@
-import {Avatar} from '@workday/canvas-kit-react/avatar';
-// @ts-ignore: Cannot find module error
-import testAvatar from './test-avatar.png';
-
-export default () => (
-  <div className="story">
-    {Array.from({length: 5}, (v, index) => (
-      <div>
-        <Avatar
-          altText="Avatar"
-          key={index}
-          as="div"
-          size="medium"
-          url={testAvatar + '?v=' + index}
-        />
-        <br />
-      </div>
-    ))}
-  </div>
-);

package/dist/mdx/react/avatar/avatar/examples/ObjectFit.tsx

@@ -1,30 +0,0 @@
-import {Avatar} from '@workday/canvas-kit-react/avatar';
-import {px2rem} from '@workday/canvas-kit-styling';
-
-export default () => (
-  <div className="story">
-    <h3>Original Rectangle Image</h3>
-    <img alt="" src="https://picsum.photos/id/237/300/200" />
-    <h3>Object fit on a Rectangle Image</h3>
-    <Avatar altText="Avatar" as="div" url="https://picsum.photos/id/237/300/200" />
-    <h3>Object fit on a Rectangle Image using Dynamic Size</h3>
-    <Avatar
-      altText="Avatar"
-      as="div"
-      size={px2rem(200)}
-      url="https://picsum.photos/id/237/300/200"
-      objectFit="contain"
-    />
-    <h3>Original Square Image</h3>
-    <img alt="" src="https://picsum.photos/id/237/300/300" />
-    <h3>Object fit on a Square Image</h3>
-    <Avatar altText="Avatar" as="div" url="https://picsum.photos/id/237/300/300" />
-    <h3>Object fit on a Square Image using Dynamic Size</h3>
-    <Avatar
-      altText="Avatar"
-      as="div"
-      size={px2rem(200)}
-      url="https://picsum.photos/id/237/300/300"
-    />
-  </div>
-);