trepur_components 2.3.9 → 2.3.11

package/src/components/Avatar/index.tsx

@@ -1,492 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-// @ts-expect-error
-import Snap from 'snapsvg-cjs';
-
-export const Avatar: React.FC = (): any => {
-  const [s, setS] = useState(null);
-
-  let rightEyeWhite: any,
-    rightEyePupil: any,
-    leftEyeWhite: any,
-    leftEyePupil: any,
-    avatar: any,
-    armless: any,
-    torso: any,
-    face: any,
-    legs: any,
-    rightArm: any,
-    leftArm: any,
-    rightHand: any,
-    leftHand: any,
-    arms: any,
-    straps: any,
-    hands: any,
-    leftThigh: any,
-    rightThigh: any,
-    leftShoe: any,
-    rightShoe: any;
-
-  const leftShoulderRotationPoints = '175, 202';
-  const rightShoulderRotationPoints = '94, 202';
-  const svgContainerHeight = 400;
-  const svgContainerWidth = 265;
-  const skinColour = '#FFCC9A';
-  const zipColour = '#315107';
-  const eyeColour = '#1389BF';
-  const hairColour = '#F1B452';
-  const beardColour = '#F1B452';
-  const rucksackColour = '#072765';
-  const trouserColour = '#D3D3D3';
-  const jacketColour = '#416E0A';
-  const mouthColour = '#DC7144';
-  const shoeColour = '#000000';
-  const eyebrowColour = '#F1B452';
-  const noseColour = '#F1B452';
-
-  const createAvatar = (s: any, callBack: any): void => {
-    if (typeof window === 'undefined') return;
-    const head = s?.rect(103, 90, 68, 87, 50).attr({ fill: skinColour });
-
-    const leftEyebrow = s?.rect(146, 122, 12, 3, 2);
-    const rightEyebrow = s?.rect(115, 122, 12, 3, 2);
-
-    leftEyeWhite = s?.ellipse(152, 132, 6, 4);
-    rightEyeWhite = s?.ellipse(121, 132, 6, 4);
-    leftEyePupil = s?.ellipse(152, 132, 3, 3).attr({ fill: eyeColour });
-    rightEyePupil = s?.ellipse(121, 132, 3, 3).attr({ fill: eyeColour });
-
-    const leftEye = s?.group(leftEyeWhite, leftEyePupil);
-    const rightEye = s?.group(rightEyeWhite, rightEyePupil);
-
-    const outerBeard = s?.rect(103, 90, 68, 87, 50).attr({ fill: 'white' });
-    const innerBeard = s?.rect(106, 105, 62, 62, 50);
-    const beardGroup = s?.group(outerBeard, innerBeard);
-    const beard = s?.rect(103, 140, 68, 60).attr({
-      mask: beardGroup,
-      fill: beardColour,
-      opacity: 0.6,
-    });
-
-    const outerHair = s?.rect(103, 90, 68, 60, 25).attr({ fill: 'white' });
-    const innerHair = s?.rect(109, 105, 56, 40, 10);
-    const hairGroup = s?.group(outerHair, innerHair);
-    const baseHair = s?.rect(103, 90, 68, 40).attr({
-      mask: hairGroup,
-      fill: hairColour,
-    });
-    const hairLevel1 = s
-      ?.rect(113, 88, 50, 16, 10)
-      .attr({ fill: hairColour })
-      .transform('r0');
-    const hair = s?.group(baseHair, hairLevel1);
-
-    const outerNose = s?.rect(129, 140, 12, 10, 30)?.attr({ fill: 'white' });
-    const innerNose = s?.rect(130, 142, 10, 12, 30);
-    const noseGroup = s?.group(outerNose, innerNose);
-    const nose = s?.rect(129, 140, 12, 10)?.attr({
-      mask: noseGroup,
-      fill: noseColour,
-    });
-
-    const leftEar = s?.circle(103, 135, 5)?.attr({ fill: 'white' });
-    const leftEarMask = s
-      ?.rect(89, 120, 15, 30)
-      .attr({
-        mask: leftEar,
-        fill: skinColour,
-      })
-      .transform('r-2');
-
-    const rightEar = s?.circle(171, 135, 5)?.attr({ fill: 'white' });
-    const rightEarMask = s
-      ?.rect(170, 120, 15, 30)
-      .attr({
-        mask: rightEar,
-        fill: skinColour,
-      })
-      .transform('r2');
-
-    const body = s
-      ?.rect(100, 188, 73, 105, 16, 16)
-      .attr({ fill: jacketColour });
-    const hood = s?.ellipse(136, 182, 24, 10).attr({ fill: jacketColour });
-
-    const rightShoulder = s?.rect(87, 190, 27, 14, 10);
-    rightArm = s?.rect(84, 195, 16, 90, 10, 10);
-
-    const leftShoulder = s?.rect(155, 190, 27, 14, 10);
-    leftArm = s?.rect(170, 195, 16, 90, 10, 10);
-
-    leftHand = s?.circle(178, 278, 8);
-    rightHand = s?.circle(92, 278, 8);
-
-    const wasteBand = s?.rect(98, 277, 74, 33, 0, 0);
-    leftThigh = s?.rect(142, 300, 30, 90, 0, 0);
-    rightThigh = s?.rect(98, 300, 30, 90, 0, 0);
-
-    const bag = s?.rect(99, 180, 74, 78, 10);
-    const rightStrap = s?.rect(101, 185, 5, 100, 10).transform('r4.5');
-    const leftStrap = s?.rect(163, 185, 5, 100, 10).transform('r-4.5');
-
-    const mouth = s?.circle(136, 155, 10).attr({ fill: 'white' });
-    const mouthCutOff = s?.rect(120, 155, 30, 15).attr({ fill: mouthColour });
-
-    const leftShoeTop = s?.rect(142, 370, 30, 20, 10);
-    const leftShoeSole = s?.rect(142, 378, 30, 12);
-
-    const rightShoeTop = s?.rect(98, 370, 30, 20, 10);
-    const rightShoeSole = s?.rect(98, 378, 30, 12);
-
-    const mainZip = s?.rect(135, 199, 3, 94);
-    const leftZip = s?.rect(141, 188, 2, 15).transform('r44.5');
-    const rightZip = s?.rect(130, 188, 2, 15).transform('r-44.5');
-
-    const centerNeck = s?.rect(128, 170, 17, 21);
-    const leftNeck = s?.rect(139, 181, 10, 10).transform('r-33');
-    const rightNeck = s?.rect(124, 181, 10, 10).transform('r33');
-    const frontNeck = s?.rect(129, 182, 15, 15).transform('r45');
-
-    const neck = s
-      ?.group(centerNeck, leftNeck, rightNeck, frontNeck)
-      .attr({ fill: skinColour });
-    const zip = s?.group(mainZip, leftZip, rightZip).attr({ fill: zipColour });
-    leftShoe = s?.group(leftShoeTop, leftShoeSole);
-    rightShoe = s?.group(rightShoeTop, rightShoeSole);
-    const rucksack = s
-      ?.group(leftStrap, rightStrap, bag)
-      .attr({ fill: rucksackColour });
-    const eyes = s?.group(leftEye, rightEye).attr({ fill: 'white' });
-    const eyebrows = s
-      ?.group(leftEyebrow, rightEyebrow)
-      .attr({ fill: eyebrowColour });
-    const shoes = s?.group(leftShoe, rightShoe).attr({ fill: shoeColour });
-    const ears = s?.group(leftEarMask, rightEarMask);
-
-    arms = s
-      ?.group(rightShoulder, leftShoulder, leftArm, rightArm)
-      .attr({ fill: jacketColour });
-    hands = s?.group(leftHand, rightHand).attr({ fill: skinColour });
-    straps = s?.group(leftStrap, rightStrap).attr({ fill: rucksackColour });
-
-    face = s?.group(
-      head,
-      eyes,
-      eyebrows,
-      nose,
-      mouth,
-      mouthCutOff,
-      ears,
-      hair,
-      beard,
-    );
-    torso = s?.group(rucksack, hood, body, neck, zip);
-    legs = s
-      ?.group(leftThigh, rightThigh, wasteBand, shoes)
-      .attr({ fill: trouserColour });
-
-    armless = s?.group(legs, torso, face);
-    avatar = s?.group(armless, arms, straps, hands);
-
-    mouthCutOff?.attr({
-      mask: mouth,
-    });
-
-    callBack(avatar);
-  };
-
-  const nextFrame = (s: any, frameArray: any, frame: number): void => {
-    if (frame >= frameArray.length) {
-      return;
-    }
-
-    Snap.animate(
-      frameArray[frame].from,
-      frameArray[frame].to,
-      frameArray[frame].funct,
-      frameArray[frame].dur,
-      null,
-      nextFrame.bind(null, Snap, frameArray, frame + 1),
-    );
-  };
-
-  const rightWave = [
-    {
-      funct: function (val: number) {
-        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
-        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
-      },
-      from: 0,
-      to: 170,
-      dur: 100,
-    },
-    {
-      funct: function (val: number) {
-        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
-        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
-      },
-      from: 170,
-      to: 120,
-      dur: 100,
-    },
-    {
-      funct: function (val: number) {
-        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
-        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
-      },
-      from: 120,
-      to: 170,
-      dur: 100,
-    },
-    {
-      funct: function (val: number) {
-        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
-        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
-      },
-      from: 170,
-      to: 120,
-      dur: 100,
-    },
-    {
-      funct: function (val: number) {
-        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
-        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
-      },
-      from: 120,
-      to: 170,
-      dur: 100,
-    },
-    {
-      funct: function (val: number) {
-        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
-        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
-      },
-      from: 170,
-      to: 120,
-      dur: 100,
-    },
-    {
-      funct: function (val: number) {
-        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
-        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
-      },
-      from: 120,
-      to: 0,
-      dur: 100,
-    },
-  ];
-
-  const leftWave = [
-    {
-      funct: function (val: number) {
-        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
-        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
-      },
-      from: 0,
-      to: -150,
-      dur: 100,
-    },
-    {
-      funct: function (val: number) {
-        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
-        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
-      },
-      from: -150,
-      to: -120,
-      dur: 100,
-    },
-    {
-      funct: function (val: number) {
-        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
-        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
-      },
-      from: -120,
-      to: -150,
-      dur: 100,
-    },
-    {
-      funct: function (val: number) {
-        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
-        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
-      },
-      from: -150,
-      to: -120,
-      dur: 100,
-    },
-    {
-      funct: function (val: number) {
-        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
-        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
-      },
-      from: -120,
-      to: -150,
-      dur: 100,
-    },
-    {
-      funct: function (val: number) {
-        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
-        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
-      },
-      from: -150,
-      to: -120,
-      dur: 100,
-    },
-    {
-      funct: function (val: number) {
-        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
-        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
-      },
-      from: -120,
-      to: 0,
-      dur: 100,
-    },
-  ];
-
-  const jump = (): void => {
-    torso.animate({ transform: 't0,20' }, 500);
-    arms.animate({ transform: 't0,20' }, 500);
-    straps.animate({ transform: 't0,20' }, 500);
-    hands.animate({ transform: 't0,20' }, 500);
-    face.animate({ transform: 't0,20' }, 500, function () {
-      face.animate({ transform: 't0,-70' }, 200);
-      torso.animate({ transform: 't0,-70' }, 200);
-      arms.animate({ transform: 't0,-70' }, 200);
-      straps.animate({ transform: 't0,-70' }, 200);
-      hands.animate({ transform: 't0,-70' }, 200);
-      legs.animate({ transform: 't0,-70' }, 200, function () {
-        face.animate({ transform: 't0,0' }, 200);
-        torso.animate({ transform: 't0,0' }, 200);
-        arms.animate({ transform: 't0,0' }, 200);
-        straps.animate({ transform: 't0,0' }, 200);
-        hands.animate({ transform: 't0,0' }, 200);
-        legs.animate({ transform: 't0,0' }, 200);
-      });
-    });
-  };
-
-  const eyesLeft = (duration: any): void => {
-    leftEyePupil.animate({ transform: 't2,0' }, duration);
-    rightEyePupil.animate({ transform: 't2,0' }, duration);
-  };
-
-  const eyesRight = (duration: any): void => {
-    leftEyePupil.animate({ transform: 't-2,0' }, duration);
-    rightEyePupil.animate({ transform: 't-2,0' }, duration);
-  };
-
-  const eyesCenter = (duration: any): void => {
-    leftEyePupil.animate({ transform: 't0,0' }, duration);
-    rightEyePupil.animate({ transform: 't0,0' }, duration);
-  };
-
-  const blink = (times: number): void => {
-    if (times < 1) return;
-    [...Array(times)].forEach((_) => {
-      leftEyeWhite?.animate({ ry: 0 }, 120);
-      leftEyePupil.animate({ ry: 0 }, 120);
-      rightEyeWhite?.animate({ ry: 0 }, 120);
-      rightEyePupil.animate({ ry: 0 }, 120, function () {
-        leftEyeWhite?.animate({ ry: 4 }, 200);
-        leftEyePupil?.animate({ ry: 3 }, 200);
-        rightEyeWhite?.animate({ ry: 4 }, 200);
-        rightEyePupil?.animate({ ry: 3 }, 200, () => {
-          blink(times - 1);
-        });
-      });
-    });
-  };
-
-  const animate = (s: any, animation: any): any => {
-    nextFrame(s, animation, 0);
-  };
-
-  // const drawPath = (s: any): void => {
-  //   const linePath =
-  //     "M46.5,433 q3.5,-153 7,-356 q59,-51 116,-5 q60,96 1,159 q-58,26 -116,2 q108,57 119,202 q26,-166 41,-371 q99,1 186,3 q28,108 -21,187 q-66,23 -160,-9 q154,79 133,143 q-82,59 -175,42";
-  //   const lineLength: number = Snap.path.getTotalLength(linePath);
-  //   const lineDraw = s?.path(linePath);
-  //   lineDraw.attr({
-  //     fill: "none",
-  //     stroke: "#009FE3",
-  //     "stroke-dasharray": `${lineLength} ${lineLength}`,
-  //     "stroke-dashoffset": lineLength,
-  //     "stroke-width": 6,
-  //     "stroke-linecap": "round",
-  //     "stroke-linejoin": "round",
-  //     "stroke-miterlimit": 10,
-  //   });
-  //   lineDraw.animate(
-  //     {
-  //       strokeDashoffset: 0,
-  //     },
-  //     3000,
-  //     null
-  //   );
-  // };
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    if (Snap) {
-      setS(Snap('#svg'));
-    }
-
-    const makeBlinkHappen = (): void => {
-      const randNum = Math.floor(Math.random() * 2) + 1;
-      blink(randNum);
-    };
-
-    const loadActions = (): void => {
-      if (!avatar) return;
-
-      setTimeout(() => {
-        animate(s, leftWave);
-      }, 1000);
-
-      // drawPath(s)
-      setInterval(makeBlinkHappen, 3500);
-
-      rightArm?.click(() => animate(s, rightWave));
-      rightHand?.click(() => animate(s, rightWave));
-
-      leftArm?.click(() => animate(s, leftWave));
-      leftHand?.click(() => animate(s, leftWave));
-      armless?.click(jump);
-      leftArm?.hover(() => {
-        eyesLeft(200);
-      });
-      leftThigh?.hover(() => {
-        eyesLeft(200);
-      });
-      leftShoe?.hover(() => {
-        eyesLeft(200);
-      });
-
-      torso?.hover(() => {
-        eyesCenter(200);
-      });
-
-      rightArm?.hover(() => {
-        eyesRight(200);
-      });
-      rightThigh?.hover(() => {
-        eyesRight(200);
-      });
-      rightShoe?.hover(() => {
-        eyesRight(200);
-      });
-    };
-
-    createAvatar(s, loadActions);
-  }, [s]);
-
-  return (
-    <svg
-      id="svg"
-      className="mx-auto"
-      height={`${svgContainerHeight.toString()}px`}
-      width={`${svgContainerWidth.toString()}px`}
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-    />
-  );
-};

package/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,29 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Breadcrumbs } from '.';
-
-const meta = {
-  title: 'V2Components/Breadcrumbs',
-  component: Breadcrumbs,
-  args: {
-    children: [
-      <Breadcrumbs.Item>
-        <Breadcrumbs.Label href="#">Link 1</Breadcrumbs.Label>
-      </Breadcrumbs.Item>,
-      <Breadcrumbs.Item>
-        <Breadcrumbs.Label href="#">Link 2</Breadcrumbs.Label>
-      </Breadcrumbs.Item>,
-      <Breadcrumbs.Item>
-        <Breadcrumbs.Label href="#">Link 3</Breadcrumbs.Label>
-      </Breadcrumbs.Item>,
-      <Breadcrumbs.Item>
-        <Breadcrumbs.Label href="#">Link 4</Breadcrumbs.Label>
-      </Breadcrumbs.Item>,
-    ],
-  },
-} satisfies Meta<typeof Breadcrumbs>;
-export default meta;
-
-type Story = StoryObj<typeof Breadcrumbs>;
-
-export const Default: Story = {};

package/src/components/Breadcrumbs/index.tsx

@@ -1,89 +0,0 @@
-import { forwardRef, HTMLAttributes } from 'react';
-
-import classNames from 'classnames';
-
-export interface BreadcrumbsProps {
-  id?: string;
-  className?: string;
-  links?: Array<{ name: string; href: string }>;
-}
-
-const BreadcrumbsComponent = forwardRef<
-  HTMLUListElement,
-  HTMLAttributes<HTMLUListElement> & BreadcrumbsProps
->(({ children, ...props }, ref) => {
-  return (
-    <ul className="flex gap-2" {...props}>
-      {children}
-    </ul>
-  );
-});
-
-const BreadcrumbsItem = forwardRef<
-  HTMLLIElement,
-  HTMLAttributes<HTMLLIElement>
->(({ children, ...props }, ref) => {
-  return (
-    <li className="flex items-center gap-2" {...props}>
-      {children}
-      <p>/</p>
-    </li>
-  );
-});
-
-const BreadcrumbsLabel = forwardRef<
-  HTMLParagraphElement,
-  HTMLAttributes<HTMLParagraphElement> & { href: string }
->(({ children, href, ...props }, ref) => {
-  return (
-    <p className="px-1 py-1">
-      <a className="text-facebook hover:underline" href={href}>
-        {children}
-      </a>
-    </p>
-  );
-});
-
-BreadcrumbsComponent.displayName = 'Breadcrumbs';
-BreadcrumbsItem.displayName = 'Breadcrumbs.Item';
-BreadcrumbsLabel.displayName = 'Breadcrumbs.Label';
-
-const Breadcrumbs = Object.assign(BreadcrumbsComponent, {
-  Item: BreadcrumbsItem,
-  Label: BreadcrumbsLabel,
-});
-
-export { Breadcrumbs };
-
-// export const Breadcrumbs = ({ id, className, links }: Props) => {
-//   const linksLength = links != null ? Object.keys(links).length : 0;
-
-//   const classList = classNames(className, 'flex py-2');
-
-//   return (
-//     <ul id={id} className={classList}>
-//       {links?.map((link, i) => {
-//         return (
-//           <div key={`breadcrumb_${i + 1}`} className="flex">
-//             <li className="h-8">
-//               {i + 1 >= linksLength ? (
-//                 <p className="px-1 py-1">{link.name}</p>
-//               ) : (
-//                 <p className="px-1 py-1">
-//                   <a className="text-facebook hover:underline" href={link.href}>
-//                     {link.name}
-//                   </a>
-//                 </p>
-//               )}
-//             </li>
-//             {i + 1 < linksLength && (
-//               <li className="h-8">
-//                 <p className="py-1">&nbsp; &#62; &nbsp;</p>
-//               </li>
-//             )}
-//           </div>
-//         );
-//       })}
-//     </ul>
-//   );
-// };

package/src/components/Button/Button.stories.tsx

@@ -1,24 +0,0 @@
-import { faHeart } from '@fortawesome/fontawesome-free-solid';
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from '.';
-
-const meta = {
-  title: 'V2Components/Button',
-  component: Button,
-  args: {
-    variant: 'primary',
-    children: [
-      <Button.Icon icon={faHeart} />,
-      <Button.Label>This is a button</Button.Label>,
-    ],
-    onClick: action('clicked'),
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-
-type Story = StoryObj<typeof Button>;
-
-export const Default: Story = {};

package/src/components/Button/index.tsx

@@ -1,59 +0,0 @@
-import { ComponentPropsWithoutRef, forwardRef, HTMLAttributes } from 'react';
-
-import { Icon } from '@components/Icon';
-import { PickU } from '@components/Pill';
-import clsx from 'clsx';
-
-export interface ButtonProps {
-  variant?: 'primary' | 'secondary' | 'ghost';
-  disabled?: boolean;
-}
-
-const ButtonComponent = forwardRef<
-  HTMLButtonElement,
-  HTMLAttributes<HTMLButtonElement> & ButtonProps
->(({ className, children, variant = 'primary', disabled, ...props }) => {
-  return (
-    <button
-      className={clsx(
-        'flex items-center gap-2 rounded-lg border px-4 py-2 text-center text-sm duration-200',
-        {
-          'border-button-primary-border bg-button-primary-bg text-button-primary-text hover:bg-button-primary-hover active:bg-button-primary-active':
-            variant === 'primary',
-          'border-button-secondary-border bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-hover active:bg-button-secondary-active':
-            variant === 'secondary',
-          'border-button-ghost-border bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-hover active:bg-button-ghost-active':
-            variant === 'ghost',
-        },
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </button>
-  );
-});
-
-const ButtonLabel = forwardRef<
-  HTMLParagraphElement,
-  HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p className={clsx('text-md', className)} ref={ref} {...props} />
-));
-
-const ButtonIcon = forwardRef<
-  SVGSVGElement,
-  PickU<ComponentPropsWithoutRef<typeof Icon>, 'icon'>
->(({ icon }, ref) => <Icon size="md" ref={ref} icon={icon} />);
-
-ButtonComponent.displayName = 'Button';
-
-ButtonIcon.displayName = 'Button.Icon';
-ButtonLabel.displayName = 'Button.Label';
-
-const Button = Object.assign(ButtonComponent, {
-  Icon: ButtonIcon,
-  Label: ButtonLabel,
-});
-
-export { Button };