trepur_components 2.3.3 → 2.3.4

package/storybook-build/assets/AlertBar.stories-BkzNXFBh.js

@@ -0,0 +1,202 @@
+var _a, _b, _c;
+import { i as idAndClassName } from "./controls-DJSGrQKd.js";
+import { j as jsxRuntimeExports } from "./jsx-runtime-D2-sc1j1.js";
+import { r as reactExports } from "./index-DM9bPmif.js";
+import { c as classNames } from "./index-CpyNLP69.js";
+import "./_commonjsHelpers-LQfde5yM.js";
+const AlertBar = ({
+  id,
+  className,
+  type = "warning",
+  text,
+  // leftIconProps,
+  // rightIconProps,
+  textCenter = false,
+  isDismissable = false,
+  onDismissClick
+}) => {
+  const [alertBarStatus, setAlertBarStatus] = reactExports.useState({
+    state: "open",
+    display: true
+  });
+  const bgColor = classNames({
+    "bg-success": type === "success",
+    "bg-warning": type === "warning",
+    "bg-error": type === "error",
+    "bg-info-light": type === "info"
+  });
+  const alertBarState = classNames({
+    "opacity-100": alertBarStatus.state === "open",
+    "opacity-0": alertBarStatus.state === "closed",
+    hidden: !alertBarStatus.display
+  });
+  const classList = classNames(
+    className,
+    bgColor,
+    alertBarState,
+    "flex py-2 text-white duration-700 theme-local w-parent transition-opactiy"
+  );
+  const textClassList = classNames(
+    {
+      "text-center": textCenter
+      // 'pl-20': !textCenter && leftIconProps !== null,
+      // 'pl-4': !textCenter && leftIconProps === null,
+    },
+    "w-full py-3"
+  );
+  classNames(
+    {
+      "hover:cursor-pointer": isDismissable
+    },
+    "absolute right-0 pr-8 pt-3"
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id, className: classList, children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: textClassList, children: text }) });
+};
+try {
+  AlertBar.displayName = "AlertBar";
+  AlertBar.__docgenInfo = { "description": "", "displayName": "AlertBar", "props": { "id": { "defaultValue": null, "description": "", "name": "id", "required": false, "type": { "name": "string" } }, "className": { "defaultValue": null, "description": "", "name": "className", "required": false, "type": { "name": "string" } }, "type": { "defaultValue": { value: "warning" }, "description": "", "name": "type", "required": false, "type": { "name": "enum", "value": [{ "value": '"success"' }, { "value": '"warning"' }, { "value": '"error"' }, { "value": '"info"' }] } }, "text": { "defaultValue": null, "description": "", "name": "text", "required": false, "type": { "name": "string" } }, "textCenter": { "defaultValue": { value: "false" }, "description": "", "name": "textCenter", "required": false, "type": { "name": "boolean" } }, "isDismissable": { "defaultValue": { value: "false" }, "description": "", "name": "isDismissable", "required": false, "type": { "name": "boolean" } }, "onDismissClick": { "defaultValue": null, "description": "", "name": "onDismissClick", "required": false, "type": { "name": "MouseEventHandler" } } } };
+} catch (__react_docgen_typescript_loader_error) {
+}
+const meta = {
+  title: "Components/Alert Bar",
+  component: AlertBar,
+  argTypes: {
+    ...idAndClassName,
+    type: {
+      type: {
+        name: "string",
+        required: false
+      },
+      options: ["success", "warning", "error", "info"],
+      description: "The type of alert to render",
+      table: {
+        type: {
+          summary: "warning"
+        },
+        defaultValue: {
+          summary: "warning"
+        }
+      },
+      defaultValue: "warning",
+      control: {
+        type: "radio"
+      }
+    },
+    text: {
+      type: {
+        name: "string",
+        required: false
+      },
+      description: "The text to display in the component",
+      table: {
+        type: {
+          summary: "string"
+        },
+        defaultValue: {
+          summary: "undefined"
+        }
+      }
+    },
+    leftIconProps: {
+      description: "The icon props for the icon to display aligned to the left",
+      table: {
+        category: "",
+        type: {
+          summary: "string"
+        },
+        defaultValue: {
+          summary: "undefined"
+        }
+      }
+    },
+    rightIconProps: {
+      description: "The icon props for the icon to display aligned to the right",
+      table: {
+        category: "",
+        type: {
+          summary: "string"
+        },
+        defaultValue: {
+          summary: "undefined"
+        }
+      }
+    },
+    textCenter: {
+      type: {
+        name: "boolean",
+        required: false
+      },
+      description: "Aligns the text in the center of the component",
+      table: {
+        type: {
+          summary: "boolean"
+        },
+        defaultValue: {
+          summary: "false"
+        }
+      },
+      defaultValue: "false"
+    },
+    isDismissable: {
+      type: {
+        name: "boolean",
+        required: false
+      },
+      description: "Enables the component to be closed when set to true",
+      table: {
+        type: {
+          summary: "boolean"
+        },
+        defaultValue: {
+          summary: "false"
+        }
+      },
+      defaultValue: "false"
+    },
+    onDismissClick: {
+      type: {
+        name: "function",
+        required: false
+      },
+      description: "The action to perform when the component is closed",
+      action: "onClick",
+      table: {
+        type: {
+          summary: "function"
+        },
+        defaultValue: {
+          summary: "undefined"
+        }
+      }
+    }
+  },
+  args: {
+    text: "This is an alert bar message",
+    leftIconProps: {
+      type: "heart",
+      colour: "white",
+      hollow: true
+    },
+    rightIconProps: {
+      type: "heart",
+      colour: "white"
+    }
+  }
+};
+const Default = {};
+Default.parameters = {
+  ...Default.parameters,
+  docs: {
+    ...(_a = Default.parameters) == null ? void 0 : _a.docs,
+    source: {
+      originalSource: "{}",
+      ...(_c = (_b = Default.parameters) == null ? void 0 : _b.docs) == null ? void 0 : _c.source
+    }
+  }
+};
+const __namedExportsOrder = ["Default"];
+export {
+  Default,
+  __namedExportsOrder,
+  meta as default
+};

package/storybook-build/assets/Avatar.stories-CpH6xVwM.js

@@ -0,0 +1,418 @@
+var _a, _b, _c;
+import { i as idAndClassName } from "./controls-DJSGrQKd.js";
+import { j as jsxRuntimeExports } from "./jsx-runtime-D2-sc1j1.js";
+import { r as reactExports } from "./index-DM9bPmif.js";
+import "./_commonjsHelpers-LQfde5yM.js";
+let Snap;
+if (typeof window !== "undefined") {
+  Snap = require("snapsvg-cjs");
+}
+const Avatar = () => {
+  const [s, setS] = reactExports.useState(null);
+  let rightEyeWhite, rightEyePupil, leftEyeWhite, leftEyePupil, avatar, armless, torso, face, legs, rightArm, leftArm, rightHand, leftHand, arms, straps, hands, leftThigh, rightThigh, leftShoe, rightShoe;
+  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 = (s2, callBack) => {
+    var _a2, _b2, _c2, _d;
+    if (typeof window === "undefined")
+      return;
+    const head = s2 == null ? void 0 : s2.rect(103, 90, 68, 87, 50).attr({ fill: skinColour });
+    const leftEyebrow = s2 == null ? void 0 : s2.rect(146, 122, 12, 3, 2);
+    const rightEyebrow = s2 == null ? void 0 : s2.rect(115, 122, 12, 3, 2);
+    leftEyeWhite = s2 == null ? void 0 : s2.ellipse(152, 132, 6, 4);
+    rightEyeWhite = s2 == null ? void 0 : s2.ellipse(121, 132, 6, 4);
+    leftEyePupil = s2 == null ? void 0 : s2.ellipse(152, 132, 3, 3).attr({ fill: eyeColour });
+    rightEyePupil = s2 == null ? void 0 : s2.ellipse(121, 132, 3, 3).attr({ fill: eyeColour });
+    const leftEye = s2 == null ? void 0 : s2.group(leftEyeWhite, leftEyePupil);
+    const rightEye = s2 == null ? void 0 : s2.group(rightEyeWhite, rightEyePupil);
+    const outerBeard = s2 == null ? void 0 : s2.rect(103, 90, 68, 87, 50).attr({ fill: "white" });
+    const innerBeard = s2 == null ? void 0 : s2.rect(106, 105, 62, 62, 50);
+    const beardGroup = s2 == null ? void 0 : s2.group(outerBeard, innerBeard);
+    const beard = s2 == null ? void 0 : s2.rect(103, 140, 68, 60).attr({
+      mask: beardGroup,
+      fill: beardColour,
+      opacity: 0.6
+    });
+    const outerHair = s2 == null ? void 0 : s2.rect(103, 90, 68, 60, 25).attr({ fill: "white" });
+    const innerHair = s2 == null ? void 0 : s2.rect(109, 105, 56, 40, 10);
+    const hairGroup = s2 == null ? void 0 : s2.group(outerHair, innerHair);
+    const baseHair = s2 == null ? void 0 : s2.rect(103, 90, 68, 40).attr({
+      mask: hairGroup,
+      fill: hairColour
+    });
+    const hairLevel1 = s2 == null ? void 0 : s2.rect(113, 88, 50, 16, 10).attr({ fill: hairColour }).transform("r0");
+    const hair = s2 == null ? void 0 : s2.group(baseHair, hairLevel1);
+    const outerNose = (_a2 = s2 == null ? void 0 : s2.rect(129, 140, 12, 10, 30)) == null ? void 0 : _a2.attr({ fill: "white" });
+    const innerNose = s2 == null ? void 0 : s2.rect(130, 142, 10, 12, 30);
+    const noseGroup = s2 == null ? void 0 : s2.group(outerNose, innerNose);
+    const nose = (_b2 = s2 == null ? void 0 : s2.rect(129, 140, 12, 10)) == null ? void 0 : _b2.attr({
+      mask: noseGroup,
+      fill: noseColour
+    });
+    const leftEar = (_c2 = s2 == null ? void 0 : s2.circle(103, 135, 5)) == null ? void 0 : _c2.attr({ fill: "white" });
+    const leftEarMask = s2 == null ? void 0 : s2.rect(89, 120, 15, 30).attr({
+      mask: leftEar,
+      fill: skinColour
+    }).transform("r-2");
+    const rightEar = (_d = s2 == null ? void 0 : s2.circle(171, 135, 5)) == null ? void 0 : _d.attr({ fill: "white" });
+    const rightEarMask = s2 == null ? void 0 : s2.rect(170, 120, 15, 30).attr({
+      mask: rightEar,
+      fill: skinColour
+    }).transform("r2");
+    const body = s2 == null ? void 0 : s2.rect(100, 188, 73, 105, 16, 16).attr({ fill: jacketColour });
+    const hood = s2 == null ? void 0 : s2.ellipse(136, 182, 24, 10).attr({ fill: jacketColour });
+    const rightShoulder = s2 == null ? void 0 : s2.rect(87, 190, 27, 14, 10);
+    rightArm = s2 == null ? void 0 : s2.rect(84, 195, 16, 90, 10, 10);
+    const leftShoulder = s2 == null ? void 0 : s2.rect(155, 190, 27, 14, 10);
+    leftArm = s2 == null ? void 0 : s2.rect(170, 195, 16, 90, 10, 10);
+    leftHand = s2 == null ? void 0 : s2.circle(178, 278, 8);
+    rightHand = s2 == null ? void 0 : s2.circle(92, 278, 8);
+    const wasteBand = s2 == null ? void 0 : s2.rect(98, 277, 74, 33, 0, 0);
+    leftThigh = s2 == null ? void 0 : s2.rect(142, 300, 30, 90, 0, 0);
+    rightThigh = s2 == null ? void 0 : s2.rect(98, 300, 30, 90, 0, 0);
+    const bag = s2 == null ? void 0 : s2.rect(99, 180, 74, 78, 10);
+    const rightStrap = s2 == null ? void 0 : s2.rect(101, 185, 5, 100, 10).transform("r4.5");
+    const leftStrap = s2 == null ? void 0 : s2.rect(163, 185, 5, 100, 10).transform("r-4.5");
+    const mouth = s2 == null ? void 0 : s2.circle(136, 155, 10).attr({ fill: "white" });
+    const mouthCutOff = s2 == null ? void 0 : s2.rect(120, 155, 30, 15).attr({ fill: mouthColour });
+    const leftShoeTop = s2 == null ? void 0 : s2.rect(142, 370, 30, 20, 10);
+    const leftShoeSole = s2 == null ? void 0 : s2.rect(142, 378, 30, 12);
+    const rightShoeTop = s2 == null ? void 0 : s2.rect(98, 370, 30, 20, 10);
+    const rightShoeSole = s2 == null ? void 0 : s2.rect(98, 378, 30, 12);
+    const mainZip = s2 == null ? void 0 : s2.rect(135, 199, 3, 94);
+    const leftZip = s2 == null ? void 0 : s2.rect(141, 188, 2, 15).transform("r44.5");
+    const rightZip = s2 == null ? void 0 : s2.rect(130, 188, 2, 15).transform("r-44.5");
+    const centerNeck = s2 == null ? void 0 : s2.rect(128, 170, 17, 21);
+    const leftNeck = s2 == null ? void 0 : s2.rect(139, 181, 10, 10).transform("r-33");
+    const rightNeck = s2 == null ? void 0 : s2.rect(124, 181, 10, 10).transform("r33");
+    const frontNeck = s2 == null ? void 0 : s2.rect(129, 182, 15, 15).transform("r45");
+    const neck = s2 == null ? void 0 : s2.group(centerNeck, leftNeck, rightNeck, frontNeck).attr({ fill: skinColour });
+    const zip = s2 == null ? void 0 : s2.group(mainZip, leftZip, rightZip).attr({ fill: zipColour });
+    leftShoe = s2 == null ? void 0 : s2.group(leftShoeTop, leftShoeSole);
+    rightShoe = s2 == null ? void 0 : s2.group(rightShoeTop, rightShoeSole);
+    const rucksack = s2 == null ? void 0 : s2.group(leftStrap, rightStrap, bag).attr({ fill: rucksackColour });
+    const eyes = s2 == null ? void 0 : s2.group(leftEye, rightEye).attr({ fill: "white" });
+    const eyebrows = s2 == null ? void 0 : s2.group(leftEyebrow, rightEyebrow).attr({ fill: eyebrowColour });
+    const shoes = s2 == null ? void 0 : s2.group(leftShoe, rightShoe).attr({ fill: shoeColour });
+    const ears = s2 == null ? void 0 : s2.group(leftEarMask, rightEarMask);
+    arms = s2 == null ? void 0 : s2.group(rightShoulder, leftShoulder, leftArm, rightArm).attr({ fill: jacketColour });
+    hands = s2 == null ? void 0 : s2.group(leftHand, rightHand).attr({ fill: skinColour });
+    straps = s2 == null ? void 0 : s2.group(leftStrap, rightStrap).attr({ fill: rucksackColour });
+    face = s2 == null ? void 0 : s2.group(
+      head,
+      eyes,
+      eyebrows,
+      nose,
+      mouth,
+      mouthCutOff,
+      ears,
+      hair,
+      beard
+    );
+    torso = s2 == null ? void 0 : s2.group(rucksack, hood, body, neck, zip);
+    legs = s2 == null ? void 0 : s2.group(leftThigh, rightThigh, wasteBand, shoes).attr({ fill: trouserColour });
+    armless = s2 == null ? void 0 : s2.group(legs, torso, face);
+    avatar = s2 == null ? void 0 : s2.group(armless, arms, straps, hands);
+    mouthCutOff == null ? void 0 : mouthCutOff.attr({
+      mask: mouth
+    });
+    callBack(avatar);
+  };
+  const nextFrame = (s2, frameArray, frame) => {
+    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) {
+        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
+        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
+      },
+      from: 0,
+      to: 170,
+      dur: 100
+    },
+    {
+      funct: function(val) {
+        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
+        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
+      },
+      from: 170,
+      to: 120,
+      dur: 100
+    },
+    {
+      funct: function(val) {
+        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
+        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
+      },
+      from: 120,
+      to: 170,
+      dur: 100
+    },
+    {
+      funct: function(val) {
+        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
+        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
+      },
+      from: 170,
+      to: 120,
+      dur: 100
+    },
+    {
+      funct: function(val) {
+        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
+        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
+      },
+      from: 120,
+      to: 170,
+      dur: 100
+    },
+    {
+      funct: function(val) {
+        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
+        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
+      },
+      from: 170,
+      to: 120,
+      dur: 100
+    },
+    {
+      funct: function(val) {
+        rightArm.transform(`r${val},${rightShoulderRotationPoints}`);
+        rightHand.transform(`r${val},${rightShoulderRotationPoints}`);
+      },
+      from: 120,
+      to: 0,
+      dur: 100
+    }
+  ];
+  const leftWave = [
+    {
+      funct: function(val) {
+        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
+        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
+      },
+      from: 0,
+      to: -150,
+      dur: 100
+    },
+    {
+      funct: function(val) {
+        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
+        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
+      },
+      from: -150,
+      to: -120,
+      dur: 100
+    },
+    {
+      funct: function(val) {
+        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
+        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
+      },
+      from: -120,
+      to: -150,
+      dur: 100
+    },
+    {
+      funct: function(val) {
+        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
+        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
+      },
+      from: -150,
+      to: -120,
+      dur: 100
+    },
+    {
+      funct: function(val) {
+        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
+        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
+      },
+      from: -120,
+      to: -150,
+      dur: 100
+    },
+    {
+      funct: function(val) {
+        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
+        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
+      },
+      from: -150,
+      to: -120,
+      dur: 100
+    },
+    {
+      funct: function(val) {
+        leftArm.transform(`r${val},${leftShoulderRotationPoints}`);
+        leftHand.transform(`r${val},${leftShoulderRotationPoints}`);
+      },
+      from: -120,
+      to: 0,
+      dur: 100
+    }
+  ];
+  const jump = () => {
+    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) => {
+    leftEyePupil.animate({ transform: "t2,0" }, duration);
+    rightEyePupil.animate({ transform: "t2,0" }, duration);
+  };
+  const eyesRight = (duration) => {
+    leftEyePupil.animate({ transform: "t-2,0" }, duration);
+    rightEyePupil.animate({ transform: "t-2,0" }, duration);
+  };
+  const eyesCenter = (duration) => {
+    leftEyePupil.animate({ transform: "t0,0" }, duration);
+    rightEyePupil.animate({ transform: "t0,0" }, duration);
+  };
+  const blink = (times) => {
+    if (times < 1)
+      return;
+    [...Array(times)].forEach((_) => {
+      leftEyeWhite == null ? void 0 : leftEyeWhite.animate({ ry: 0 }, 120);
+      leftEyePupil.animate({ ry: 0 }, 120);
+      rightEyeWhite == null ? void 0 : rightEyeWhite.animate({ ry: 0 }, 120);
+      rightEyePupil.animate({ ry: 0 }, 120, function() {
+        leftEyeWhite == null ? void 0 : leftEyeWhite.animate({ ry: 4 }, 200);
+        leftEyePupil == null ? void 0 : leftEyePupil.animate({ ry: 3 }, 200);
+        rightEyeWhite == null ? void 0 : rightEyeWhite.animate({ ry: 4 }, 200);
+        rightEyePupil == null ? void 0 : rightEyePupil.animate({ ry: 3 }, 200, () => {
+          blink(times - 1);
+        });
+      });
+    });
+  };
+  const animate = (s2, animation) => {
+    nextFrame(s2, animation, 0);
+  };
+  reactExports.useEffect(() => {
+    if (typeof window === "undefined")
+      return;
+    if (Snap) {
+      setS(Snap("#svg"));
+    }
+    const makeBlinkHappen = () => {
+      const randNum = Math.floor(Math.random() * 2) + 1;
+      blink(randNum);
+    };
+    const loadActions = () => {
+      if (!avatar)
+        return;
+      setTimeout(() => {
+        animate(s, leftWave);
+      }, 1e3);
+      setInterval(makeBlinkHappen, 3500);
+      rightArm == null ? void 0 : rightArm.click(() => animate(s, rightWave));
+      rightHand == null ? void 0 : rightHand.click(() => animate(s, rightWave));
+      leftArm == null ? void 0 : leftArm.click(() => animate(s, leftWave));
+      leftHand == null ? void 0 : leftHand.click(() => animate(s, leftWave));
+      armless == null ? void 0 : armless.click(jump);
+      leftArm == null ? void 0 : leftArm.hover(() => {
+        eyesLeft(200);
+      });
+      leftThigh == null ? void 0 : leftThigh.hover(() => {
+        eyesLeft(200);
+      });
+      leftShoe == null ? void 0 : leftShoe.hover(() => {
+        eyesLeft(200);
+      });
+      torso == null ? void 0 : torso.hover(() => {
+        eyesCenter(200);
+      });
+      rightArm == null ? void 0 : rightArm.hover(() => {
+        eyesRight(200);
+      });
+      rightThigh == null ? void 0 : rightThigh.hover(() => {
+        eyesRight(200);
+      });
+      rightShoe == null ? void 0 : rightShoe.hover(() => {
+        eyesRight(200);
+      });
+    };
+    createAvatar(s, loadActions);
+  }, [s]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "svg",
+    {
+      id: "svg",
+      className: "mx-auto",
+      height: `${svgContainerHeight.toString()}px`,
+      width: `${svgContainerWidth.toString()}px`,
+      version: "1.1",
+      xmlns: "http://www.w3.org/2000/svg"
+    }
+  );
+};
+try {
+  Avatar.displayName = "Avatar";
+  Avatar.__docgenInfo = { "description": "", "displayName": "Avatar", "props": {} };
+} catch (__react_docgen_typescript_loader_error) {
+}
+const meta = {
+  title: "Components/Avatar",
+  component: Avatar,
+  argTypes: {
+    ...idAndClassName
+  },
+  args: {}
+};
+const Default = {};
+Default.parameters = {
+  ...Default.parameters,
+  docs: {
+    ...(_a = Default.parameters) == null ? void 0 : _a.docs,
+    source: {
+      originalSource: "{}",
+      ...(_c = (_b = Default.parameters) == null ? void 0 : _b.docs) == null ? void 0 : _c.source
+    }
+  }
+};
+const __namedExportsOrder = ["Default"];
+export {
+  Default,
+  __namedExportsOrder,
+  meta as default
+};