@solace-health/ui 0.10.441 → 0.10.443

package/README.md

@@ -73,6 +73,10 @@ To automatically build and publish new changes to the UI repo with yalc, run the
 npm run dev
 ```
 
+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.
+
 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.
 
@@ -88,12 +92,25 @@ To remove the link on the consumer app, run:
 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.
+
+## V2 Components
+
+The V2 components are located in the `src/v2` directory, and are powered by [Shadcn](https://ui.shadcn.com/).
+
+Please refer to the [Shadcn docs](https://ui.shadcn.com/docs/components) to add more components.
+
+### V2 Component Requirements on the Consumer Apps
+
+To use the V2 components, consumer apps must install [tailwindcss](https://tailwindcss.com/docs/installation/using-vite), include the `tailwindTheme.css` file provided by this repo, and configure tailwind to scan the source files of `@solace-health/ui` in their `node_modules` directory.
+
+E.g. for `@solace-health/ui`, in the `globals.css` file:
+
+```css
+@source "../../node_modules/@solace-health/ui/dist/v2";
+@import "@solace-health/ui/tailwindTheme.css";
+```

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.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.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

@@ -1,4 +1,4 @@
-'use strict';require('../chunk-PPWX32VD.cjs'),require('../chunk-DXCMGQXM.cjs');var chunkUJDEZ2OQ_cjs=require('../chunk-UJDEZ2OQ.cjs');require('../chunk-JCII7PPA.cjs'),require('../chunk-7LFT44D3.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)`
+'use strict';require('../chunk-LZCPDLCP.cjs'),require('../chunk-T7TSZFRY.cjs');var chunk5OBABRCS_cjs=require('../chunk-5OBABRCS.cjs');require('../chunk-76OYHAAP.cjs'),require('../chunk-BNRHWISQ.cjs'),require('../chunk-7LFT44D3.cjs'),require('../chunk-JCII7PPA.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;
@@ -6,7 +6,7 @@
   background-color: ${e=>s(e.type)};
   padding: ${e=>e.hasImage?0:e.size*.2}px;
   color: #fff;
-`,c=o__default.default(chunkUJDEZ2OQ_cjs.a.Display)`
+`,c=o__default.default(chunk5OBABRCS_cjs.a.Display)`
   color: white;
 `;exports.Name=c;exports.VendorAvatar=i;//# sourceMappingURL=style.cjs.map
 //# sourceMappingURL=style.cjs.map

package/dist/Animate/style.js

@@ -1,4 +1,4 @@
-import'../chunk-L5ESRAPJ.js';import'../chunk-V65QEDW6.js';import {a}from'../chunk-B76YPHAH.js';import'../chunk-I74OKVBY.js';import'../chunk-EGPXWR3O.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)`
+import'../chunk-3LYCJCIS.js';import'../chunk-KNBH7SPN.js';import {a}from'../chunk-HLLL4MLA.js';import'../chunk-EZJUXSCR.js';import'../chunk-3Q3QYSRT.js';import'../chunk-EGPXWR3O.js';import'../chunk-I74OKVBY.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;

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.tsx

@@ -0,0 +1,52 @@
+import FillContainer from '../shared/FillContainer';
+import { IconContainer } from '../shared/style';
+import { AnimatedIconProps } from '../shared/type';
+
+export const Afternoon = ({ size = 32, color = '#000', active = false }: AnimatedIconProps) => (
+  <IconContainer>
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M14.3795 8.59869C10.9154 9.22272 8.29484 11.6749 8.02 15.4438C7.70248 19.7979 11.2114 23.1277 15.2567 23.4691C19.0691 23.7908 22.5485 21.5881 23.3705 17.5681C24.3995 12.5356 19.1012 7.74811 14.3795 8.59869Z" />
+      <path
+        d="M20.904 13.507C20.4635 12.6425 19.8015 11.91 18.9925 11.3845M30.5 22L28.472 21.1665L30.5 22ZM24.7765 19.635L26.6245 20.401L24.7765 19.635ZM21.1655 28.4725L22 30.4685L21.1655 28.4725ZM19.635 24.776L20.401 26.6245L19.635 24.776ZM10.8335 28.472L10 30.5L10.8335 28.472ZM12.365 24.7765L11.599 26.6245L12.365 24.7765ZM3.528 21.1655L1.5 22L3.528 21.1655ZM7.224 19.6355L5.3755 20.401L7.224 19.6355ZM3.5285 10.8335L1.5 10L3.5285 10.8335ZM5.3755 11.599L7.2235 12.3645L5.3755 11.599ZM10 1.5L10.8345 3.528L10 1.5ZM12.3645 7.2235L11.599 5.3755L12.3645 7.2235ZM21.1665 3.528L22 1.5L21.1665 3.528ZM19.6355 7.2235L20.401 5.3755L19.6355 7.2235ZM28.472 10.834L30.5 10L28.472 10.834ZM24.777 12.3645L26.6245 11.599L24.777 12.3645ZM25.369 6.881L22.8945 9.3555L25.369 6.881ZM9.459 22.7905L6.631 25.619L9.459 22.7905ZM25.7225 25.619L22.8945 22.7905L25.7225 25.619ZM6.631 6.5275L9.459 9.3555L6.631 6.5275ZM16 6.5V3V6.5ZM16 25.5V29.5V25.5ZM29.5 16H25.5H29.5ZM6.5 16H2.5H6.5ZM16 23.5C11.8575 23.5 8.5 20.142 8.5 16C8.5 11.858 11.8575 8.5 16 8.5C20.1415 8.5 23.5 11.858 23.5 16C23.5 20.142 20.1415 23.5 16 23.5Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+
+    <FillContainer active={active}>
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M14.3795 8.59869C10.9154 9.22272 8.29484 11.6749 8.02 15.4438C7.70248 19.7979 11.2114 23.1277 15.2567 23.4691C19.0691 23.7908 22.5485 21.5881 23.3705 17.5681C24.3995 12.5356 19.1012 7.74811 14.3795 8.59869Z"
+          fill="url(#paint0_linear_4989_839)"
+        />
+        <defs>
+          <linearGradient
+            id="paint0_linear_4989_839"
+            x1="15.75"
+            y1="8.5"
+            x2="15.75"
+            y2="23.5"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#DEB260" />
+            <stop offset="0.348958" stopColor="#D7B161" />
+            <stop offset="1" stopColor="#AFC8BF" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </FillContainer>
+  </IconContainer>
+);

package/dist/AnimatedIcon/icons/Bank.tsx

@@ -0,0 +1,96 @@
+import FillContainer from '../shared/FillContainer';
+import { AnimatedIconProps } from '../shared/type';
+import { IconContainer } from '../shared/style';
+
+export const Bank = ({ size = 32, color = '#000', active = false }: AnimatedIconProps) => (
+  <IconContainer>
+    <svg width={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_4877_23288)">
+        <path
+          d="M23.25 23.25V22.5H1.5V23.25M16.5 19.5H20.25M16.5 9.75H20.25M17.25 19.5V9.75M19.5 19.5V9.75M10.5 19.5H14.25M10.5 9.75H14.25M11.25 19.5V9.75M13.5 19.5V9.75M4.5 19.5H8.25M4.5 9.75H8.25M21.75 21H3M5.25 19.5V9.75M7.5 19.5V9.75M1.5 8.25L12.375 1.5L23.25 8.25H1.5Z"
+          stroke={color}
+          fill="none"
+          strokeWidth="0.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+
+    <FillContainer active={active}>
+      <svg width={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M22.3125 21.75C22.8303 21.75 23.25 22.1697 23.25 22.6875C23.25 23.2053 22.8303 23.625 22.3125 23.625L1.6875 23.625C1.16973 23.625 0.75 23.2053 0.75 22.6875C0.75 22.1697 1.16973 21.75 1.6875 21.75L22.3125 21.75Z"
+          fill="url(#paint3_linear_4877_23288)"
+        />
+        <path
+          d="M20.3741 8.57006L2.6393 8.30135C1.64262 8.28625 1.27917 6.98177 2.12445 6.45347L10.1962 1.4086C10.8415 1.00529 11.6598 1.00311 12.3072 1.403L20.9147 6.71938C21.7786 7.25297 21.3894 8.58544 20.3741 8.57006Z"
+          fill="url(#paint4_linear_4877_23288)"
+        />
+        <rect x="17.25" y="9.75" width="2.25" height="9.75" fill="url(#paint0_linear_4877_23288)" />
+        <rect x="11.25" y="10.125" width="2.25" height="9" fill="url(#paint1_linear_4877_23288)" />
+        <rect x="5.25" y="10.125" width="2.25" height="9" fill="url(#paint2_linear_4877_23288)" />
+        <defs>
+          <linearGradient
+            id="paint0_linear_4877_23288"
+            x1="18.2871"
+            y1="11.1684"
+            x2="18.2871"
+            y2="19.8177"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#AFC8BF" />
+            <stop offset="0.96875" stopColor="#DEB260" />
+          </linearGradient>
+          <linearGradient
+            id="paint1_linear_4877_23288"
+            x1="12.375"
+            y1="16.125"
+            x2="12.2871"
+            y2="19.4183"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#AFC8BF" />
+            <stop offset="0.96875" stopColor="#DEB260" />
+          </linearGradient>
+          <linearGradient
+            id="paint2_linear_4877_23288"
+            x1="6.28706"
+            y1="11.4343"
+            x2="6.28706"
+            y2="19.4183"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#AFC8BF" />
+            <stop offset="0.96875" stopColor="#DEB260" />
+          </linearGradient>
+          <linearGradient
+            id="paint3_linear_4877_23288"
+            x1="19.9767"
+            y1="22.8164"
+            x2="0.0167381"
+            y2="22.8164"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#AFC8BF" />
+            <stop offset="0.96875" stopColor="#DEB260" />
+          </linearGradient>
+          <linearGradient
+            id="paint4_linear_4877_23288"
+            x1="11.1499"
+            y1="2.80243"
+            x2="11.1499"
+            y2="8.45776"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#AFC8BF" />
+            <stop offset="0.96875" stopColor="#DEB260" />
+          </linearGradient>
+          <clipPath id="clip0_4877_23288">
+            <rect width="24" height="24" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </FillContainer>
+  </IconContainer>
+);

package/dist/AnimatedIcon/icons/Books.tsx

@@ -0,0 +1,51 @@
+import FillContainer from '../shared/FillContainer';
+import { IconContainer } from '../shared/style';
+import { AnimatedIconProps } from '../shared/type';
+
+export const Books = ({ size = 32, color = '#000', active = false }: AnimatedIconProps) => (
+  <IconContainer>
+    <svg width={size} viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill="none"
+        d="M3.5 3.5H1.5C0.948 3.5 0.5 3.948 0.5 4.5V28.5C0.5 29.052 0.948 29.5 1.5 29.5H28.5C29.052 29.5 29.5 29.052 29.5 28.5V5.5C29.5 4.948 29.052 4.5 28.5 4.5H25.5M14.5 15.5H16.5V8.5H14.5V15.5ZM23.5 7.5H27H23.5ZM18.5 4.5H21.5H18.5ZM12.5 2.5H16.5H12.5ZM23.5 29.5V2.5C23.5 1.948 23.073 1.5 22.5 1.5H19.5C18.9375 1.5 18.5 1.948 18.5 2.5V29.5H23.5ZM25.5 12.5V17.5V12.5ZM27.5 12.5V17.5V12.5ZM7.5 15.5H10.5V8.5H7.5V15.5ZM25.5 24.5H27.5H25.5ZM25.5 26.5H27.5H25.5ZM14.5 24.5H16.5H14.5ZM14.5 26.5H16.5H14.5ZM7.5 24.5H10.5H7.5ZM7.5 26.5H10.5H7.5ZM20.5 8.5H21.5H20.5ZM20.5 10.5H21.5H20.5ZM20.5 12.5H21.5H20.5ZM20.5 24.5H21.5H20.5ZM20.5 26.5H21.5H20.5ZM2.5 24.5H3.5H2.5ZM2.5 26.5H3.5H2.5ZM2.5 12.5H3.5H2.5ZM5.5 3.5H10.5H5.5ZM2.5 6.5H5.5H2.5ZM2.5 14.5H3.5H2.5ZM5.5 29.5V1.5C5.5 0.948 5.9375 0.5 6.5 0.5H11.5C12.073 0.5 12.5 0.948 12.5 1.5V29.5H5.5Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+
+    <FillContainer active={active}>
+      <svg width={size} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M19.5 30.9999C19.5 30.9999 17.5004 6.99985 19.5003 3.49988C21.5001 -9.82285e-05 29.0002 4.99986 30.5 5.99989C31.9999 6.99993 30.5 30.9999 30.5 30.9999H19.5Z"
+          fill="url(#paint0_linear_11308_26823)"
+        />
+        <path d="M6.5 30.5V2H13.5V30.5H6.5Z" fill="url(#paint1_linear_11308_26823)" />
+        <defs>
+          <linearGradient
+            id="paint0_linear_11308_26823"
+            x1="24.889"
+            y1="2.27319"
+            x2="24.889"
+            y2="30.9999"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#D7A13B" />
+            <stop offset="1" stopColor="#BED3CC" />
+          </linearGradient>
+          <linearGradient
+            id="paint1_linear_11308_26823"
+            x1="10"
+            y1="2"
+            x2="10"
+            y2="30.5"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#DEB260" />
+            <stop offset="1" stopColor="#AFC8BF" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </FillContainer>
+  </IconContainer>
+);

package/dist/AnimatedIcon/icons/CalendarClock.tsx

@@ -0,0 +1,38 @@
+import FillContainer from '../shared/FillContainer';
+import { IconContainer } from '../shared/style';
+import { AnimatedIconProps } from '../shared/type';
+
+export const CalendarClock = ({ size = 32, color = '#000', active = false }: AnimatedIconProps) => (
+  <IconContainer>
+    <svg width={size} viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill="none"
+        d="M17.5 21.5H16.5V23.5H17.5M24.5 22.5V24.5H27.5M23.5 17.5V16.5H21.5V17.5M27.5 18V8.5H2.5V26C2.5 26.8285 3.1715 27.5 4 27.5H18M27.5 6.5H0.5V27.5C0.5 28.5 1.5 29.5 2.5 29.5H19M29.5 19V3.5C29.5 2.5 28.5 1.5 27.5 1.5H25.5M0.5 4.5V3.5C0.5 2.5 1.5 1.5 2.5 1.5H4.5M29.5 24.5C29.5 21.739 27.2605 19.5 24.5 19.5C21.7395 19.5 19.5 21.739 19.5 24.5C19.5 27.261 21.7395 29.5 24.5 29.5C27.2605 29.5 29.5 27.261 29.5 24.5ZM21.5 13.5H23.5V11.5H21.5V13.5ZM11.5 23.5H13.5V21.5H11.5V23.5ZM6.5 23.5H8.5V21.5H6.5V23.5ZM16.5 13.5H18.5V11.5H16.5V13.5ZM16.5 18.5H18.5V16.5H16.5V18.5ZM11.5 18.5H13.5V16.5H11.5V18.5ZM11.5 13.5H13.5V11.5H11.5V13.5ZM6.5 18.5H8.5V16.5H6.5V18.5ZM6.5 13.5H8.5V11.5H6.5V13.5ZM23.5 1.5C23.5 0.948 23.052 0.5 22.5 0.5C21.948 0.5 21.5 0.948 21.5 1.5V3.5C21.5 4.052 21.948 4.5 22.5 4.5C23.052 4.5 23.5 4.052 23.5 3.5V1.5ZM18.5 1.5C18.5 0.948 18.052 0.5 17.5 0.5C16.948 0.5 16.5 0.948 16.5 1.5V3.5C16.5 4.052 16.948 4.5 17.5 4.5C18.052 4.5 18.5 4.052 18.5 3.5V1.5ZM13.5 1.5C13.5 0.948 13.052 0.5 12.5 0.5C11.948 0.5 11.5 0.948 11.5 1.5V3.5C11.5 4.052 11.948 4.5 12.5 4.5C13.052 4.5 13.5 4.052 13.5 3.5V1.5ZM8.5 1.5C8.5 0.948 8.052 0.5 7.5 0.5C6.948 0.5 6.5 0.948 6.5 1.5V3.5C6.5 4.052 6.948 4.5 7.5 4.5C8.052 4.5 8.5 4.052 8.5 3.5V1.5Z"
+        stroke={color}
+        strokeLinejoin="round"
+      />
+    </svg>
+
+    <FillContainer active={active}>
+      <svg width={size} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M3.5 28V9.5H28.5V21.5C28.5 21.5 26.5 20 24.5 20.5C22.5 21 21.8609 21.5577 21 23C19.8991 24.8443 21 28.5 21 28.5L3.5 28Z"
+          fill="url(#paint0_linear_11308_26842)"
+        />
+        <defs>
+          <linearGradient
+            id="paint0_linear_11308_26842"
+            x1="16"
+            y1="9.5"
+            x2="16"
+            y2="28.5"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop offset="0.208333" stopColor="#AFC8BF" />
+            <stop offset="1" stopColor="#D7A13B" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </FillContainer>
+  </IconContainer>
+);

package/dist/AnimatedIcon/icons/CarePlan.tsx

@@ -0,0 +1,51 @@
+import FillContainer from '../shared/FillContainer';
+import { IconContainer } from '../shared/style';
+import { AnimatedIconProps } from '../shared/type';
+
+export const CarePlan = ({ size = 32, color = '#000', active = false }: AnimatedIconProps) => (
+  <IconContainer>
+    <svg width={size} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width="32" height="32" transform="translate(0 0.000488281)" fill="none" />
+      <path
+        d="M23.8 28.9315L26.92 25.8281V5.13842H23.8M8.2 5.13842H5.08V27.3798C5.08 28.2369 5.77836 28.9315 6.64 28.9315H21.72V25.8281C21.72 25.3108 22.1859 24.7936 22.76 24.7936H24.84M23.8 3.06945H26.92C27.96 3.06945 29 4.10394 29 5.13842V28.9315C29 29.966 27.96 31.0005 26.92 31.0005H5.08C4.04 31.0005 3 29.966 3 28.9315V5.13842C3 4.10394 4.04 3.06945 5.08 3.06945H8.2M18.5475 3.06945C18.3067 1.88911 17.2579 1.00049 16 1.00049C14.7421 1.00049 13.6933 1.88911 13.4525 3.06945H10.28V6.1729H21.72V3.06945H18.5475ZM16 3.06945C15.7124 3.06945 15.48 3.30118 15.48 3.5867C15.48 3.87221 15.7124 4.10394 16 4.10394C16.2876 4.10394 16.52 3.87221 16.52 3.5867C16.52 3.30118 16.2876 3.06945 16 3.06945Z"
+        stroke={color}
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.916 22.467C13.916 22.8536 14.2294 23.167 14.616 23.167H18.716C19.1026 23.167 19.416 22.8536 19.416 22.467V19.417H22.466C22.8526 19.417 23.166 19.1036 23.166 18.717V14.617C23.166 14.2304 22.8526 13.917 22.466 13.917H19.416V10.867C19.416 10.4804 19.1026 10.167 18.716 10.167H14.616C14.2294 10.167 13.916 10.4804 13.916 10.867V13.917H10.866C10.4794 13.917 10.166 14.2304 10.166 14.617V18.717C10.166 19.1036 10.4794 19.417 10.866 19.417H13.916V22.467ZM18.416 22.167H14.916V19.117C14.916 18.7304 14.6026 18.417 14.216 18.417H11.166V14.917H14.216C14.6026 14.917 14.916 14.6036 14.916 14.217V11.167H18.416V14.217C18.416 14.6036 18.7294 14.917 19.116 14.917H22.166V18.417H19.116C18.7294 18.417 18.416 18.7304 18.416 19.117V22.167Z"
+        stroke={color}
+        fill={color}
+        strokeWidth=".3"
+      />
+    </svg>
+
+    <FillContainer active={active}>
+      <svg width={size} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clipPath="url(#clip0_4876_13562)">
+          <path
+            d="M2 4.00049C2 2.89592 2.89543 2.00049 4 2.00049H7.87243C8.51525 2.00049 9.03636 2.5216 9.03636 3.16442C9.03636 3.80725 9.55747 4.32836 10.2003 4.32836H21.1142C21.2319 4.32836 21.3273 4.23294 21.3273 4.11524C21.3273 3.99754 21.4227 3.90213 21.5404 3.90213H25C26.1046 3.90213 27 4.79756 27 5.90213V19.8693C27 20.9739 26.1046 21.8693 25 21.8693H22.3818C21.2773 21.8693 20.3818 22.7648 20.3818 23.8693V27.0005C20.3818 28.1051 19.4864 29.0005 18.3818 29.0005H4C2.89543 29.0005 2 28.1051 2 27.0005V4.00049Z"
+            fill="url(#paint0_linear_4876_13562)"
+          />
+        </g>
+        <defs>
+          <linearGradient
+            id="paint0_linear_4876_13562"
+            x1="13.895"
+            y1="6.49855"
+            x2="13.895"
+            y2="28.4291"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#AFC8BF" />
+            <stop offset="0.96875" stopColor="#DEB260" />
+          </linearGradient>
+          <clipPath id="clip0_4876_13562">
+            <rect width="32" height="32" fill="white" transform="translate(0 0.000488281)" />
+          </clipPath>
+        </defs>
+      </svg>
+    </FillContainer>
+  </IconContainer>
+);