@solace-health/ui 0.10.43 → 0.10.44-1.beta1

package/README.md

@@ -15,71 +15,85 @@ Checkout the changelogs per release [here](https://github.com/Solace-Health/sola
 
 Install the `@solace-health/ui` package
 
-```sh
+```bash
 npm install @solace-health/ui
 ```
 
 ## For Development
 
 1. Run `npm i`
-2. Run `npm run storybook` or `npm run dev` is you only need to run in watch mode
+2. Run `npm run storybook`
 
 ## Use local package in external application
 
-Install [yalc](https://github.com/wclr/yalc) globally
+### Using `yalc`
 
-```
-npm i yalc -g
-```
+**Note:** This method requires the consumer app to match the exact version of the library.
 
-Navigate to the solace-health-ui package
+Example: in solace-health/app/package.json: `"@solace-health/ui": "0.10.406"` matches this repo's version from package.json:
 
 ```
-cd solace-health-ui
+  "name": "@solace-health/ui",
+  "version": "0.10.406"
 ```
 
-Publish package to yalc
+#### 1. Install [yalc](https://github.com/wclr/yalc) globally
 
-```
-npx yalc publish
+```bash
+npm i yalc -g
 ```
 
-Navigate to solace-health-app
+#### 2. Build and Publish package to yalc
 
-```
-cd solace-health-app
+```bash
+npm run build
 ```
 
-🚨 **Before the next step, make sure solace-health-app is not currently running, otherwise you'll have to restart after linking**
+```bash
+yalc publish
+```
 
-Link the local package to solace-health-app/solace-health-admin
+#### 3. Link the UI repo to the consumer apps (e.g. solace-health-app)
 
+```bash
+cd solace-health-app
 ```
-npx yalc link @solace-health/ui
+
+```bash
+yalc link @solace-health/ui
 ```
 
-solace-health-app will now be using your local version of solace-health-ui. Hot reloading is not currently enabled so after every change to your local solace-health-ui, run the following command to see the changes reflected in the app.
+`solace-health-app` will now be using your local version of `solace-health-ui`.
 
-🗒️ _This command assumes that solace-health-app and solace-health-ui are within the same directory._
+#### 4. Reloading the consumer app
 
-solace-health-app
+To automatically build and publish new changes to the UI repo with yalc, run the following command:
 
-```
-cd ../solace-health-ui && npm run build && npx yalc publish && cd ../solace-health-app && npx yalc update
+```bash
+npm run dev
 ```
 
-solace-health-admin
+On the consumer app, if it's a next.js app, you have to clear the cache first in order to see yalc'd changes.
+For Vite apps, you can force a build of all deps with the [--force](https://vite.dev/guide/cli#options) flag.
 
+```bash
+npm run dev -- --force
 ```
-cd ../solace-health-ui && npm run build && npx yalc publish && cd ../solace-health-admin && npx yalc update
+
+#### 5. Remove the link
+
+To remove the link on the consumer app, run:
+
+```bash
+yalc remove @solace-health/ui
 ```
 
+This makes a production build, updating the `dist` folder, and then publishes the library with yalc.
+
+Consumer apps will see the changed `dist` folder and will reload themselves.
+
 ## Deploy to NPM
 
 Simply cut a new [release](https://github.com/Solace-Health/solace-health-ui/releases) in github with an appropriate semantic version. There is a github action that will fire when it detects a new cut tag. From there it will build and deploy using the tag from github and mark it as latest. Once that is complete, the action will update the version in package.json. No need for any manual updates on the code side.
 
 We use release drafter to scaffold the upcoming releases. You rarely will need to draft a new release manually.
-
-```
-
-```

package/dist/Affix/index.cjs

@@ -0,0 +1,2 @@
+'use strict';var chunkJPLIMY2F_cjs=require('../chunk-JPLIMY2F.cjs');require('../chunk-WH6WPZPG.cjs');module.exports=chunkJPLIMY2F_cjs.a;//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/Affix/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs"}

package/dist/Affix/index.d.ts

@@ -0,0 +1,2 @@
+import { Affix } from 'antd';
+export default Affix;

package/dist/Affix/index.js

@@ -0,0 +1,2 @@
+export{a as default}from'../chunk-3EDGQJEB.js';import'../chunk-RFBBAUMM.js';//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/Affix/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/Affix/index.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Affix from '.';
+declare const meta: Meta<typeof Affix>;
+export default meta;
+type Story = StoryObj<typeof Affix>;
+export declare const Primary: Story;

package/dist/Affix/index.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Affix from '.';
+import Button from '../Button';
+
+const meta: Meta<typeof Affix> = {
+  title: 'General/Affix',
+  component: Affix,
+};
+
+export default meta;
+type Story = StoryObj<typeof Affix>;
+
+export const Primary: Story = {
+  render: (args) => (
+    <div style={{ height: '100vh', overflow: 'auto', padding: '60px 20px' }}>
+      <div style={{ height: '2000px', padding: '20px', backgroundColor: '#f0f0f0' }}>
+        <p>Scroll down to see the Affix component stick to the top</p>
+        <Affix {...args} offsetTop={10}>
+          <Button.Primary>Sticky!</Button.Primary>
+        </Affix>
+        <p>
+          This is some filler content to make the container scrollable. Lorem ipsum dolor sit amet,
+          consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras
+          mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
+          egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam quis risus
+          eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Cras
+          justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida
+          at eget metus.
+        </p>
+      </div>
+    </div>
+  ),
+};

package/dist/Affix/index.tsx

@@ -0,0 +1,3 @@
+import { Affix } from 'antd';
+
+export default Affix;

package/dist/Alert/index.cjs

@@ -0,0 +1,2 @@
+'use strict';var chunkKOLC537J_cjs=require('../chunk-KOLC537J.cjs');require('../chunk-WH6WPZPG.cjs');module.exports=chunkKOLC537J_cjs.a;//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/Alert/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs"}

package/dist/Alert/index.d.ts

@@ -0,0 +1,3 @@
+import { Alert, AlertProps } from 'antd';
+export type AlertType = AlertProps['type'];
+export default Alert;

package/dist/Alert/index.js

@@ -0,0 +1,2 @@
+export{a as default}from'../chunk-EAW4DTJG.js';import'../chunk-RFBBAUMM.js';//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/Alert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/Alert/index.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Alert from '.';
+declare const meta: Meta<typeof Alert>;
+export default meta;
+export declare const AlertStory: StoryObj<typeof Alert>;

package/dist/Alert/index.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import styled from '@emotion/styled';
+import Alert from '.';
+
+const Container = styled.div`
+  max-width: 30rem;
+  margin: 0 auto;
+  padding: 2rem;
+  display: flex;
+  flex-flow: column;
+  gap: 1rem;
+`;
+
+const meta: Meta<typeof Alert> = {
+  title: 'Feedback/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  args: {
+    message: 'This is an alert message',
+    type: 'warning',
+    showIcon: true,
+    banner: false,
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+export const AlertStory: StoryObj<typeof Alert> = {
+  render: (args) => (
+    <Container>
+      <Alert {...args} />
+    </Container>
+  ),
+};

package/dist/Alert/index.tsx

@@ -0,0 +1,5 @@
+import { Alert, AlertProps } from 'antd';
+
+export type AlertType = AlertProps['type'];
+
+export default Alert;

package/dist/Animate/index.cjs

@@ -0,0 +1,2 @@
+'use strict';var chunk77NQEZH2_cjs=require('../chunk-77NQEZH2.cjs');require('../chunk-WH6WPZPG.cjs');module.exports=chunk77NQEZH2_cjs.a;//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/Animate/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs"}

package/dist/Animate/index.d.ts

@@ -0,0 +1,35 @@
+import { AnimationProps, config as springConfig } from '@react-spring/web';
+import { CSSProperties } from 'react';
+/**
+ * Props for the Animate component.
+ */
+export type AnimateProps = {
+    /** The content to be animated. */
+    children?: React.ReactNode | React.ReactNode[] | null;
+    /** The type of animation to apply. */
+    type?: 'fadeIn' | 'slideIn';
+    /** The delay before the animation starts, in milliseconds. */
+    delay?: number;
+    /** The CSS properties to animate to. */
+    to?: CSSProperties | null;
+    /** The CSS properties to animate from. */
+    from?: CSSProperties | null;
+    /** Determines whether the animation should be triggered. */
+    trigger?: boolean;
+    /** Determines whether the animation is disabled. */
+    disabled?: boolean;
+    /** Additional inline styles to apply to the animated element. */
+    style?: CSSProperties;
+    /** The configuration for the animation. */
+    config?: keyof typeof springConfig;
+    /** Additional animation properties. */
+    animationProps?: AnimationProps;
+    className?: string;
+};
+/**
+ * Interface for React Spring animations
+ *
+ * When used in a Next.js app, make sure to disable reactStrictMode in next.config to avoid a React Spring bug happening locally.
+ */
+declare const Animate: ({ children, delay, type, to, from, trigger, disabled, style, config, animationProps, className, ...rest }: AnimateProps) => import("react/jsx-runtime").JSX.Element;
+export default Animate;

package/dist/Animate/index.js

@@ -0,0 +1,2 @@
+export{a as default}from'../chunk-EHULSA4P.js';import'../chunk-RFBBAUMM.js';//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/Animate/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/Animate/index.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Animate from '.';
+declare const meta: Meta<typeof Animate>;
+export default meta;
+type Story = StoryObj<typeof Animate>;
+export declare const AnimateFadeIn: Story;
+export declare const AnimateSlideIn: Story;
+export declare const AnimateOnTrigger: Story;

package/dist/Animate/index.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import styled from '@emotion/styled';
+import { useState } from 'react';
+import Animate from '.';
+import Button from '../Button';
+
+const Container = styled.div`
+  max-width: 30rem;
+  margin: 0 auto;
+  padding: 2rem;
+
+  display: flex;
+  flex-flow: column;
+  gap: 1rem;
+`;
+
+const meta: Meta<typeof Animate> = {
+  title: 'Animation/Animate',
+  component: Animate,
+  decorators: [
+    (Story) => (
+      <Container>
+        <Story />
+      </Container>
+    ),
+  ],
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    trigger: {
+      type: 'boolean',
+    },
+  },
+  args: {
+    trigger: true,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Animate>;
+
+export const AnimateFadeIn: Story = {
+  render: () => (
+    <Animate delay={1000}>
+      <Button.Primary>An Example Button</Button.Primary>
+    </Animate>
+  ),
+};
+
+export const AnimateSlideIn: Story = {
+  render: () => (
+    <Animate type="slideIn" delay={1000} config="slow">
+      <Button.Primary>An Example Button</Button.Primary>
+    </Animate>
+  ),
+};
+
+export const AnimateOnTrigger: Story = {
+  render: () => {
+    const [trigger, setTrigger] = useState(false);
+    return (
+      <>
+        <Animate type="slideIn" trigger={trigger}>
+          <Button.Primary>An Example Button</Button.Primary>
+        </Animate>
+        <Button.Primary onClick={() => setTrigger(!trigger)}>Toggle Trigger</Button.Primary>
+      </>
+    );
+  },
+};

package/dist/Animate/index.tsx

@@ -0,0 +1,116 @@
+import { AnimationProps, animated, config as springConfig, useSpring } from '@react-spring/web';
+import { CSSProperties } from 'react';
+
+/**
+ * Props for the Animate component.
+ */
+export type AnimateProps = {
+  /** The content to be animated. */
+  children?: React.ReactNode | React.ReactNode[] | null;
+
+  /** The type of animation to apply. */
+  type?: 'fadeIn' | 'slideIn';
+
+  /** The delay before the animation starts, in milliseconds. */
+  delay?: number;
+
+  /** The CSS properties to animate to. */
+  to?: CSSProperties | null;
+
+  /** The CSS properties to animate from. */
+  from?: CSSProperties | null;
+
+  /** Determines whether the animation should be triggered. */
+  trigger?: boolean;
+
+  /** Determines whether the animation is disabled. */
+  disabled?: boolean;
+
+  /** Additional inline styles to apply to the animated element. */
+  style?: CSSProperties;
+
+  /** The configuration for the animation. */
+  config?: keyof typeof springConfig;
+
+  /** Additional animation properties. */
+  animationProps?: AnimationProps;
+
+  className?: string;
+};
+
+const FadeInAnimation = {
+  from: {
+    opacity: 0,
+  },
+  to: {
+    opacity: 1,
+  },
+};
+
+const SlideInAnimation = {
+  from: {
+    transform: 'translateY(50px)',
+    opacity: 0,
+  },
+  to: {
+    transform: 'translateY(0px)',
+    opacity: 1,
+  },
+};
+
+const keypoints = (
+  type: 'fadeIn' | 'slideIn',
+  to: CSSProperties | null,
+  from: CSSProperties | null,
+) => {
+  if (!!to && !!from) return { to, from };
+  switch (type) {
+    case 'fadeIn':
+      return FadeInAnimation;
+    case 'slideIn':
+      return SlideInAnimation;
+    default:
+      return { to, from };
+  }
+};
+
+/**
+ * Interface for React Spring animations
+ *
+ * When used in a Next.js app, make sure to disable reactStrictMode in next.config to avoid a React Spring bug happening locally.
+ */
+const Animate = ({
+  children = null,
+  delay = 0,
+  type = 'fadeIn',
+  to = null,
+  from = null,
+  trigger = true,
+  disabled = false,
+  style = {},
+  config = 'default',
+  animationProps = {},
+  className = '',
+  ...rest
+}: AnimateProps) => {
+  const { to: toStyle, from: fromStyle } = keypoints(type, to, from);
+  const animationStyles = useSpring({
+    from: fromStyle,
+    to: trigger ? toStyle : fromStyle,
+    delay,
+    config: springConfig[config],
+    ...animationProps,
+  });
+
+  if (disabled) {
+    return <div {...rest}>{children}</div>;
+  }
+
+  return (
+    <animated.div className={className} style={{ ...style, ...animationStyles }} {...rest}>
+      {children}
+    </animated.div>
+  );
+};
+
+export default Animate;

package/dist/Animate/style.cjs

@@ -0,0 +1,12 @@
+'use strict';require('../chunk-RCEFLROQ.cjs'),require('../chunk-ETC56LBM.cjs');var chunkGXCU3CGO_cjs=require('../chunk-GXCU3CGO.cjs');require('../chunk-7LFT44D3.cjs'),require('../chunk-JCII7PPA.cjs'),require('../chunk-76OYHAAP.cjs'),require('../chunk-BNRHWISQ.cjs'),require('../chunk-B6L5BLXJ.cjs'),require('../chunk-4VIXEDG4.cjs'),require('../chunk-BXFHENQ3.cjs'),require('../chunk-WH6WPZPG.cjs');var antd=require('antd'),o=require('@emotion/styled');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var o__default=/*#__PURE__*/_interopDefault(o);var s=e=>{switch(e){case "patient":return "#D7A13B";case "client":default:return "#285E50"}},i=o__default.default(antd.Avatar)`
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${e=>s(e.type)};
+  padding: ${e=>e.hasImage?0:e.size*.2}px;
+  color: #fff;
+`,c=o__default.default(chunkGXCU3CGO_cjs.a.Display)`
+  color: white;
+`;exports.Name=c;exports.VendorAvatar=i;//# sourceMappingURL=style.cjs.map
+//# sourceMappingURL=style.cjs.map

package/dist/Animate/style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Animate/style.tsx"],"names":["colorByType","type","VendorAvatar","styled","Avatar","p","Name","Typography_default"],"mappings":"ojBAKMA,IAAAA,CAAAA,CAAeC,CAAqB,EAAA,CACxC,OAAQA,CAAAA,EACN,KACE,SAAA,CAAA,OAAO,SACT,CAAA,KAAA,QAAA,CACA,QACE,OAAO,SACX,CACF,CAAA,CAEaC,CAAeC,CAAAA,kBAAAA,CAAOC,WAAM,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAA,EASlBC,CAAML,EAAAA,CAAAA,CAAYK,CAAE,CAAA,IAAI,CAAC,CAAA;AAAA,WAAA,EAClCA,GAAOA,CAAE,CAAA,QAAA,CAAW,CAAIA,CAAAA,CAAAA,CAAE,KAAO,EAAI,CAAA;AAAA;AAAA,CAItCC,CAAAA,CAAAA,CAAOH,kBAAOI,CAAAA,mBAAAA,CAAW,OAAO,CAAA;AAAA","file":"style.cjs","sourcesContent":["import { Avatar } from 'antd';\nimport styled from '@emotion/styled';\nimport Typography from '../Typography';\nimport { UserTypes } from '../Avatar';\n\nconst colorByType = (type?: UserTypes) => {\n  switch (type) {\n    case UserTypes.Patient:\n      return '#D7A13B';\n    case UserTypes.Client:\n    default:\n      return '#285E50';\n  }\n};\n\nexport const VendorAvatar = styled(Avatar)<{\n  type?: UserTypes;\n  size: number;\n  hasImage?: boolean;\n}>`\n  flex: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ${(p) => colorByType(p.type)};\n  padding: ${(p) => (p.hasImage ? 0 : p.size * 0.2)}px;\n  color: #fff;\n`;\n\nexport const Name = styled(Typography.Display)`\n  color: white;\n`;\n"]}

package/dist/Animate/style.d.ts

@@ -0,0 +1,17 @@
+import { UserTypes } from '../Avatar';
+export declare const VendorAvatar: import("@emotion/styled").StyledComponent<import("antd").AvatarProps & import("react").RefAttributes<HTMLSpanElement> & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    type?: UserTypes;
+    size: number;
+    hasImage?: boolean;
+}, {}, {}>;
+export declare const Name: import("@emotion/styled").StyledComponent<{
+    [extraProps: string]: unknown;
+    className?: string;
+    size?: import("..").Size;
+    children?: string | React.ReactNode;
+    center?: boolean;
+} & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/dist/Animate/style.js

@@ -0,0 +1,12 @@
+import'../chunk-V6VPBGJZ.js';import'../chunk-Z5PJWHGR.js';import {a}from'../chunk-BYWSUMRN.js';import'../chunk-EGPXWR3O.js';import'../chunk-I74OKVBY.js';import'../chunk-EZJUXSCR.js';import'../chunk-3Q3QYSRT.js';import'../chunk-JIZJIZYR.js';import'../chunk-7QZQXRMR.js';import'../chunk-SLCTEGVG.js';import'../chunk-RFBBAUMM.js';import {Avatar}from'antd';import o from'@emotion/styled';var s=e=>{switch(e){case "patient":return "#D7A13B";case "client":default:return "#285E50"}},i=o(Avatar)`
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${e=>s(e.type)};
+  padding: ${e=>e.hasImage?0:e.size*.2}px;
+  color: #fff;
+`,c=o(a.Display)`
+  color: white;
+`;export{c as Name,i as VendorAvatar};//# sourceMappingURL=style.js.map
+//# sourceMappingURL=style.js.map

package/dist/Animate/style.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Animate/style.tsx"],"names":["colorByType","type","VendorAvatar","styled","Avatar","p","Name","Typography_default"],"mappings":"gYAKMA,IAAAA,CAAAA,CAAeC,CAAqB,EAAA,CACxC,OAAQA,CAAAA,EACN,KACE,SAAA,CAAA,OAAO,SACT,CAAA,KAAA,QAAA,CACA,QACE,OAAO,SACX,CACF,CAAA,CAEaC,CAAeC,CAAAA,CAAAA,CAAOC,MAAM,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAA,EASlBC,CAAML,EAAAA,CAAAA,CAAYK,CAAE,CAAA,IAAI,CAAC,CAAA;AAAA,WAAA,EAClCA,GAAOA,CAAE,CAAA,QAAA,CAAW,CAAIA,CAAAA,CAAAA,CAAE,KAAO,EAAI,CAAA;AAAA;AAAA,CAItCC,CAAAA,CAAAA,CAAOH,CAAOI,CAAAA,CAAAA,CAAW,OAAO,CAAA;AAAA","file":"style.js","sourcesContent":["import { Avatar } from 'antd';\nimport styled from '@emotion/styled';\nimport Typography from '../Typography';\nimport { UserTypes } from '../Avatar';\n\nconst colorByType = (type?: UserTypes) => {\n  switch (type) {\n    case UserTypes.Patient:\n      return '#D7A13B';\n    case UserTypes.Client:\n    default:\n      return '#285E50';\n  }\n};\n\nexport const VendorAvatar = styled(Avatar)<{\n  type?: UserTypes;\n  size: number;\n  hasImage?: boolean;\n}>`\n  flex: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ${(p) => colorByType(p.type)};\n  padding: ${(p) => (p.hasImage ? 0 : p.size * 0.2)}px;\n  color: #fff;\n`;\n\nexport const Name = styled(Typography.Display)`\n  color: white;\n`;\n"]}

package/dist/Animate/style.tsx

@@ -0,0 +1,32 @@
+import { Avatar } from 'antd';
+import styled from '@emotion/styled';
+import Typography from '../Typography';
+import { UserTypes } from '../Avatar';
+
+const colorByType = (type?: UserTypes) => {
+  switch (type) {
+    case UserTypes.Patient:
+      return '#D7A13B';
+    case UserTypes.Client:
+    default:
+      return '#285E50';
+  }
+};
+
+export const VendorAvatar = styled(Avatar)<{
+  type?: UserTypes;
+  size: number;
+  hasImage?: boolean;
+}>`
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${(p) => colorByType(p.type)};
+  padding: ${(p) => (p.hasImage ? 0 : p.size * 0.2)}px;
+  color: #fff;
+`;
+
+export const Name = styled(Typography.Display)`
+  color: white;
+`;

package/dist/AnimatedIcon/icons/Afternoon.cjs

@@ -0,0 +1,2 @@
+'use strict';var chunkEMQYMZBW_cjs=require('../../chunk-EMQYMZBW.cjs');require('../../chunk-FTPWCPJQ.cjs'),require('../../chunk-UBXE4GAF.cjs'),require('../../chunk-WH6WPZPG.cjs');Object.defineProperty(exports,"Afternoon",{enumerable:true,get:function(){return chunkEMQYMZBW_cjs.a}});//# sourceMappingURL=Afternoon.cjs.map
+//# sourceMappingURL=Afternoon.cjs.map

package/dist/AnimatedIcon/icons/Afternoon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Afternoon.cjs"}

package/dist/AnimatedIcon/icons/Afternoon.d.ts

@@ -0,0 +1,2 @@
+import { AnimatedIconProps } from '../shared/type';
+export declare const Afternoon: ({ size, color, active }: AnimatedIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/AnimatedIcon/icons/Afternoon.js

@@ -0,0 +1,2 @@
+export{a as Afternoon}from'../../chunk-2PCM6BBV.js';import'../../chunk-MZKOOK6S.js';import'../../chunk-Q6TXR4TV.js';import'../../chunk-RFBBAUMM.js';//# sourceMappingURL=Afternoon.js.map
+//# sourceMappingURL=Afternoon.js.map

package/dist/AnimatedIcon/icons/Afternoon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Afternoon.js"}