@pequity/squirrel 6.1.0 → 7.0.0

package/dist/es/p-input-search.js

@@ -1,11 +1,11 @@
 import { S as SIZES } from "./chunks/p-btn.types.js";
-import PInput from "./p-input.js";
+import { _ as _sfc_main$1 } from "./chunks/p-input.js";
 import { defineComponent, resolveComponent, resolveDirective, createBlock, openBlock, mergeProps, withKeys, withCtx, withDirectives, createCommentVNode, createElementBlock, normalizeClass, createElementVNode } from "vue";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _sfc_main = defineComponent({
   name: "PInputSearch",
   components: {
-    PInput
+    PInput: _sfc_main$1
   },
   inheritAttrs: false,
   props: {

package/dist/es/p-input.js

@@ -1,94 +1,4 @@
-import inputClassesMixin from "./inputClassesMixin.js";
-import { defineComponent, createElementBlock, openBlock, normalizeStyle, normalizeClass, renderSlot, createElementVNode, withDirectives, createCommentVNode, toDisplayString, mergeProps, vShow } from "vue";
-import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
-const INPUT_TYPES = { TEXT: "text", PASSWORD: "password" };
-const _sfc_main = defineComponent({
-  name: "PInput",
-  mixins: [inputClassesMixin],
-  inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: ""
-    },
-    type: {
-      type: String,
-      default: INPUT_TYPES.TEXT,
-      validator(value) {
-        return Object.values(INPUT_TYPES).includes(value);
-      }
-    },
-    label: {
-      type: String,
-      default: ""
-    },
-    errorMsg: {
-      type: String,
-      default: ""
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    rounded: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ["update:modelValue"],
-  computed: {
-    attrs() {
-      const { class: classes, style, ...rest } = this.$attrs;
-      return rest;
-    },
-    style() {
-      return this.$attrs.style;
-    }
-  }
-});
-const _hoisted_1 = ["data-has-error"];
-const _hoisted_2 = { class: "relative w-full" };
-const _hoisted_3 = { key: 0 };
-const _hoisted_4 = ["type", "value"];
-const _hoisted_5 = { key: 1 };
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass([{ hidden: _ctx.$attrs.hidden }, _ctx.$attrs.class]),
-    "data-has-error": !!_ctx.errorMsg,
-    style: normalizeStyle(_ctx.style)
-  }, [
-    renderSlot(_ctx.$slots, "label", {
-      label: _ctx.label,
-      labelClasses: _ctx.labelClasses
-    }, () => [
-      _ctx.label ? (openBlock(), createElementBlock("label", {
-        key: 0,
-        class: normalizeClass(_ctx.labelClasses)
-      }, toDisplayString(_ctx.label), 3)) : createCommentVNode("", true)
-    ]),
-    createElementVNode("div", _hoisted_2, [
-      !!_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", _hoisted_3, [
-        renderSlot(_ctx.$slots, "prefix")
-      ])) : createCommentVNode("", true),
-      createElementVNode("input", mergeProps({
-        type: _ctx.type,
-        value: _ctx.modelValue
-      }, _ctx.attrs, {
-        class: _ctx.inputClasses,
-        onInput: _cache[0] || (_cache[0] = (event) => _ctx.$emit("update:modelValue", event.target.value))
-      }), null, 16, _hoisted_4),
-      !!_ctx.$slots.suffix ? (openBlock(), createElementBlock("div", _hoisted_5, [
-        renderSlot(_ctx.$slots, "suffix")
-      ])) : createCommentVNode("", true)
-    ]),
-    withDirectives(createElementVNode("div", {
-      class: normalizeClass(_ctx.errorMsgClasses)
-    }, toDisplayString(_ctx.errorMsg), 3), [
-      [vShow, _ctx.errorMsg]
-    ])
-  ], 14, _hoisted_1);
-}
-const PInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+import { _ as _sfc_main } from "./chunks/p-input.js";
 export {
-  PInput as default
+  _sfc_main as default
 };

package/dist/es/p-modal.js

@@ -1,5 +1,5 @@
 import { defineComponent, useCssVars, ref, onBeforeMount, onMounted, getCurrentInstance, watch, nextTick, onBeforeUnmount, createBlock, createCommentVNode, openBlock, Teleport, createVNode, Transition, withCtx, withDirectives, createElementVNode, normalizeStyle, normalizeClass, vShow, renderSlot, createElementBlock, toDisplayString, withModifiers, createTextVNode } from "vue";
-import PAlert from "./p-alert.js";
+import { _ as _sfc_main$1 } from "./chunks/p-alert.js";
 import PCloseBtn from "./p-close-btn.js";
 import { usePModal } from "./usePModal.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
@@ -336,7 +336,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   ])
                 ], true),
                 __props.errorMsg ? (openBlock(), createElementBlock("div", _hoisted_7, [
-                  createVNode(PAlert, { type: "error" }, {
+                  createVNode(_sfc_main$1, { type: "error" }, {
                     default: withCtx(() => [
                       createTextVNode(toDisplayString(__props.errorMsg), 1)
                     ]),

package/dist/es/p-progress-bar.js

@@ -1,42 +1,4 @@
-import { defineComponent, resolveDirective, createElementBlock, openBlock, Fragment, renderList, withDirectives, normalizeStyle } from "vue";
-import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
-const _sfc_main = defineComponent({
-  name: "PProgressBar",
-  props: {
-    total: {
-      type: Number,
-      required: true
-    },
-    items: {
-      type: Array,
-      required: true
-    }
-  }
-});
-const _hoisted_1 = {
-  class: "flex justify-start overflow-hidden rounded bg-p-blue-20",
-  role: "progressbar"
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _directive_tooltip = resolveDirective("tooltip");
-  return openBlock(), createElementBlock("div", _hoisted_1, [
-    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item) => {
-      return withDirectives((openBlock(), createElementBlock("div", {
-        key: `progress-value-${item.color}`,
-        class: "h-full",
-        style: normalizeStyle({ width: `${item.value / _ctx.total * 100}%`, background: item.color })
-      }, null, 4)), [
-        [
-          _directive_tooltip,
-          item.label,
-          void 0,
-          { top: true }
-        ]
-      ]);
-    }), 128))
-  ]);
-}
-const pProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+import { _ as _sfc_main } from "./chunks/p-progress-bar.js";
 export {
-  pProgressBar as default
+  _sfc_main as default
 };

package/dist/es/p-table-filter-icon.js

@@ -1,21 +1,26 @@
 import { defineComponent, createElementBlock, openBlock, mergeProps } from "vue";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
-const _sfc_main = defineComponent({
-  name: "PTableFilterIcon",
-  inheritAttrs: false,
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PTableFilterIcon",
+    inheritAttrs: false
+  },
+  __name: "p-table-filter-icon",
   props: {
     active: {
       type: Boolean,
       default: false
     }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        class: ["h-5 w-5 shrink-0 cursor-pointer filter", { active: __props.active }]
+      }, _ctx.$attrs), null, 16);
+    };
   }
 });
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", mergeProps({
-    class: ["h-5 w-5 shrink-0 cursor-pointer filter", { active: _ctx.active }]
-  }, _ctx.$attrs), null, 16);
-}
-const PTableFilterIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-cbac2434"]]);
+const PTableFilterIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-84864117"]]);
 export {
   PTableFilterIcon as default
 };

package/dist/es/p-textarea.js

@@ -1,74 +1,4 @@
-import inputClassesMixin from "./inputClassesMixin.js";
-import { defineComponent, createElementBlock, openBlock, normalizeStyle, normalizeClass, renderSlot, createElementVNode, withDirectives, createCommentVNode, toDisplayString, mergeProps, vShow } from "vue";
-import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
-const _sfc_main = defineComponent({
-  name: "PTextarea",
-  mixins: [inputClassesMixin],
-  inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: ""
-    },
-    label: {
-      type: String,
-      default: ""
-    },
-    errorMsg: {
-      type: String,
-      default: ""
-    },
-    required: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ["update:modelValue"],
-  computed: {
-    attrs() {
-      const { class: classes, style, ...rest } = this.$attrs;
-      return rest;
-    },
-    style() {
-      return this.$attrs.style;
-    }
-  },
-  methods: {
-    updateValue(e) {
-      const target = e.target;
-      this.$emit("update:modelValue", target.value);
-    }
-  }
-});
-const _hoisted_1 = ["data-has-error"];
-const _hoisted_2 = ["value"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass([{ hidden: _ctx.$attrs.hidden }, _ctx.$attrs.class]),
-    "data-has-error": !!_ctx.errorMsg,
-    style: normalizeStyle(_ctx.style)
-  }, [
-    renderSlot(_ctx.$slots, "label", {
-      label: _ctx.label,
-      labelClasses: _ctx.labelClasses
-    }, () => [
-      _ctx.label ? (openBlock(), createElementBlock("label", {
-        key: 0,
-        class: normalizeClass(_ctx.labelClasses)
-      }, toDisplayString(_ctx.label), 3)) : createCommentVNode("", true)
-    ]),
-    createElementVNode("textarea", mergeProps({ value: _ctx.modelValue }, _ctx.attrs, {
-      class: _ctx.textareaClasses,
-      onInput: _cache[0] || (_cache[0] = (...args) => _ctx.updateValue && _ctx.updateValue(...args))
-    }), " ", 16, _hoisted_2),
-    withDirectives(createElementVNode("div", {
-      class: normalizeClass(_ctx.errorMsgClasses)
-    }, toDisplayString(_ctx.errorMsg), 3), [
-      [vShow, _ctx.errorMsg]
-    ])
-  ], 14, _hoisted_1);
-}
-const pTextarea = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+import { _ as _sfc_main } from "./chunks/p-textarea.js";
 export {
-  pTextarea as default
+  _sfc_main as default
 };

package/dist/es/p-toggle.js

@@ -1,6 +1,9 @@
-import inputClassesMixin from "./inputClassesMixin.js";
-import { defineComponent, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, withDirectives, renderSlot, mergeProps, createCommentVNode, toDisplayString, vShow } from "vue";
+import { defineComponent, useAttrs, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, withDirectives, renderSlot, mergeProps, createCommentVNode, toDisplayString, unref, vShow } from "vue";
+import { S as SIZES } from "./chunks/p-btn.types.js";
+import { useInputClasses } from "./useInputClasses.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
+const _hoisted_1 = ["aria-checked", "data-testid"];
+const _hoisted_2 = ["checked"];
 const TOGGLE_SIZES = {
   sm: `w-7 h-4 after:top-[2px] after:left-[2px] after:h-3 after:w-3`,
   md: `w-11 h-6 after:top-[2px] after:left-[2px] after:h-5 after:w-5`,
@@ -24,10 +27,12 @@ const TOGGLE_CLASSES = [
   "peer-disabled:bg-p-blue-10",
   "peer-disabled:after:border-p-blue-10"
 ].join(" ");
-const _sfc_main = defineComponent({
-  name: "PToggle",
-  mixins: [inputClassesMixin],
-  inheritAttrs: false,
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PToggle",
+    inheritAttrs: false
+  },
+  __name: "p-toggle",
   props: {
     modelValue: {
       type: Boolean,
@@ -44,73 +49,80 @@ const _sfc_main = defineComponent({
     required: {
       type: Boolean,
       default: false
+    },
+    size: {
+      type: String,
+      default: "md",
+      validator(value) {
+        return SIZES.includes(value);
+      }
     }
   },
   emits: ["update:modelValue"],
-  computed: {
-    toggleClasses() {
-      const base = `${TOGGLE_CLASSES} ${TOGGLE_SIZES[this.size]}`;
-      const res = this.errorMsg ? `${base} border border-on-error` : base;
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const props = __props;
+    const allAttrs = useAttrs();
+    const { labelClasses, errorMsgClasses } = useInputClasses(props);
+    const toggleClasses = computed(() => {
+      const base = `${TOGGLE_CLASSES} ${TOGGLE_SIZES[props.size]}`;
+      const res = props.errorMsg ? `${base} border border-on-error` : base;
       return res;
-    },
-    toggleLabelClasses() {
-      return `${this.labelClasses.replace("mb-1", "")} ml-2`;
-    },
-    attrs() {
-      const { style, class: classes, "data-testid": dataTestId, ...rest } = this.$attrs;
+    });
+    const toggleLabelClasses = computed(() => {
+      return `${labelClasses.value.replace("mb-1", "")} ml-2`;
+    });
+    const attrs = computed(() => {
+      const { style: style2, class: classes, "data-testid": dataTestId, ...rest } = allAttrs;
       return rest;
-    },
-    style() {
-      return this.$attrs.style;
-    }
-  },
-  methods: {
-    change(e) {
+    });
+    const style = computed(() => {
+      return allAttrs.style;
+    });
+    const change = (e) => {
       const target = e.target;
-      this.$emit("update:modelValue", target.checked);
-    }
+      emit("update:modelValue", target.checked);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["inline-flex flex-col", _ctx.$attrs.class]),
+        style: normalizeStyle(style.value),
+        role: "switch",
+        "aria-checked": __props.modelValue ? "true" : "false",
+        "data-testid": _ctx.$attrs["data-testid"]
+      }, [
+        createElementVNode("label", {
+          class: normalizeClass(["relative inline-flex items-center", { "cursor-pointer": !_ctx.$attrs.disabled }])
+        }, [
+          createElementVNode("input", mergeProps({
+            type: "checkbox",
+            checked: __props.modelValue,
+            class: "peer sr-only"
+          }, { ...attrs.value, input: () => {
+          }, onChange: change }), null, 16, _hoisted_2),
+          createElementVNode("div", {
+            class: normalizeClass(toggleClasses.value)
+          }, null, 2),
+          renderSlot(_ctx.$slots, "label", {
+            label: __props.label,
+            labelClasses: toggleLabelClasses.value
+          }, () => [
+            __props.label ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: normalizeClass(toggleLabelClasses.value)
+            }, toDisplayString(__props.label), 3)) : createCommentVNode("", true)
+          ], true)
+        ], 2),
+        withDirectives(createElementVNode("div", {
+          class: normalizeClass(unref(errorMsgClasses))
+        }, toDisplayString(__props.errorMsg), 3), [
+          [vShow, __props.errorMsg]
+        ])
+      ], 14, _hoisted_1);
+    };
   }
 });
-const _hoisted_1 = ["aria-checked", "data-testid"];
-const _hoisted_2 = ["checked"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass(["inline-flex flex-col", _ctx.$attrs.class]),
-    style: normalizeStyle(_ctx.style),
-    role: "switch",
-    "aria-checked": _ctx.modelValue ? "true" : "false",
-    "data-testid": _ctx.$attrs["data-testid"]
-  }, [
-    createElementVNode("label", {
-      class: normalizeClass(["relative inline-flex items-center", { "cursor-pointer": !_ctx.$attrs.disabled }])
-    }, [
-      createElementVNode("input", mergeProps({
-        type: "checkbox",
-        checked: _ctx.modelValue,
-        class: "peer sr-only"
-      }, { ..._ctx.attrs, input: () => {
-      }, onChange: _ctx.change }), null, 16, _hoisted_2),
-      createElementVNode("div", {
-        class: normalizeClass(_ctx.toggleClasses)
-      }, null, 2),
-      renderSlot(_ctx.$slots, "label", {
-        label: _ctx.label,
-        labelClasses: _ctx.toggleLabelClasses
-      }, () => [
-        _ctx.label ? (openBlock(), createElementBlock("span", {
-          key: 0,
-          class: normalizeClass(_ctx.toggleLabelClasses)
-        }, toDisplayString(_ctx.label), 3)) : createCommentVNode("", true)
-      ], true)
-    ], 2),
-    withDirectives(createElementVNode("div", {
-      class: normalizeClass(_ctx.errorMsgClasses)
-    }, toDisplayString(_ctx.errorMsg), 3), [
-      [vShow, _ctx.errorMsg]
-    ])
-  ], 14, _hoisted_1);
-}
-const pToggle = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-152f5bf8"]]);
+const pToggle = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-be9ecb77"]]);
 export {
   pToggle as default
 };

package/dist/es/useInputClasses.js

@@ -1,36 +1,31 @@
 import { inputClasses, selectClasses, textareaClasses } from "./inputClasses.js";
-import { ref, toRefs, computed } from "vue";
+import { computed, toValue } from "vue";
 const defaults = {
-  size: ref("md"),
-  errorMsg: ref(""),
-  required: ref(false),
-  prefix: ref(false),
-  suffix: ref(false),
-  rounded: ref(false)
+  size: "md",
+  errorMsg: "",
+  required: false,
+  prefix: false,
+  suffix: false,
+  rounded: false
 };
 function useInputClasses(props) {
-  const opts = { ...defaults, ...toRefs(props) };
-  const { size, errorMsg, required, rounded, prefix, suffix } = opts;
+  const opts = computed(() => {
+    const propsValue = toValue(props);
+    return { ...defaults, ...propsValue, error: !!propsValue.errorMsg };
+  });
   const allClasses = computed(() => {
-    const { input, label, errorMessage } = inputClasses({
-      size: size.value,
-      prefix: prefix.value,
-      suffix: suffix.value,
-      required: required.value,
-      error: !!errorMsg.value,
-      rounded: rounded.value
-    });
+    const { input, label, errorMessage } = inputClasses(opts.value);
     return { input: input(), label: label(), errorMessage: errorMessage() };
   });
   const inputClasses$1 = computed(() => allClasses.value.input);
   const labelClasses = computed(() => allClasses.value.label);
   const errorMsgClasses = computed(() => allClasses.value.errorMessage);
   const selectClasses$1 = computed(() => {
-    const { input } = selectClasses({ size: size.value, required: required.value, error: !!errorMsg.value });
+    const { input } = selectClasses(opts.value);
     return input();
   });
   const textareaClasses$1 = computed(() => {
-    const { input } = textareaClasses({ required: required.value, error: !!errorMsg.value });
+    const { input } = textareaClasses(opts.value);
     return input();
   });
   return {

package/dist/squirrel/components/p-alert/p-alert.vue.d.ts

@@ -1,20 +1,29 @@
 import { type PropType } from 'vue';
 declare const ALERT_TYPES: {
-    info: string;
-    warning: string;
-    error: string;
-    success: string;
+    info: {
+        classes: string;
+        icon: string;
+    };
+    warning: {
+        classes: string;
+        icon: string;
+    };
+    error: {
+        classes: string;
+        icon: string;
+    };
+    success: {
+        classes: string;
+        icon: string;
+    };
 };
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     type: {
         type: PropType<keyof typeof ALERT_TYPES>;
         default: string;
         validator(value: keyof typeof ALERT_TYPES): boolean;
     };
-}>, {}, {}, {
-    classes(): string;
-    svgColor(): undefined;
-}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     type: {
         type: PropType<keyof typeof ALERT_TYPES>;
         default: string;
@@ -22,5 +31,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>> & Readonly<{}>, {
     type: "info" | "error" | "success" | "warning";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
+    icon?: ((props: {}) => any) | undefined;
+    default?: ((props: {}) => any) | undefined;
+}>;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/squirrel/components/p-avatar/p-avatar.vue.d.ts

@@ -1,8 +1,11 @@
+import { type PropType } from 'vue';
+declare const SHAPES: readonly ["rectangle", "circle"];
+type Shape = (typeof SHAPES)[number];
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     shape: {
-        type: StringConstructor;
+        type: PropType<Shape>;
         default: string;
-        validator: (value: string) => boolean;
+        validator: (value: Shape) => boolean;
     };
     imageSrc: {
         type: StringConstructor;
@@ -20,15 +23,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: StringConstructor;
         default: string;
     };
-}>, {}, {
-    imageBroken: boolean;
-}, {
-    shapeClass(): string;
-}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     shape: {
-        type: StringConstructor;
+        type: PropType<Shape>;
         default: string;
-        validator: (value: string) => boolean;
+        validator: (value: Shape) => boolean;
     };
     imageSrc: {
         type: StringConstructor;
@@ -47,7 +46,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: string;
     };
 }>> & Readonly<{}>, {
-    shape: string;
+    shape: "circle" | "rectangle";
     imageSrc: string;
     imageClass: string;
     labelClass: string;