@henriquepetrelli/hp-design-system 1.1.24 → 1.1.26

package/dist/hp-design-system.umd.js

@@ -23,8 +23,8 @@
     return ButtonSize2;
   })(ButtonSize || {});
 
-  const _hoisted_1$g = ["xlink:href"];
-  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$i = ["xlink:href"];
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     __name: "Icon",
     props: {
       name: {
@@ -58,7 +58,7 @@
         }, [
           vue.createElementVNode("use", {
             "xlink:href": `#icon-${__props.name}`
-          }, null, 8, _hoisted_1$g)
+          }, null, 8, _hoisted_1$i)
         ], 6);
       };
     }
@@ -72,18 +72,18 @@
     return target;
   };
 
-  const HpIcon = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-0b477588"]]);
+  const HpIcon = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-0b477588"]]);
 
-  const _hoisted_1$f = ["aria-label", "aria-disabled", "disabled"];
-  const _hoisted_2$e = {
+  const _hoisted_1$h = ["aria-label", "aria-disabled", "disabled"];
+  const _hoisted_2$g = {
     key: 0,
     class: "button-primary__icon--left"
   };
-  const _hoisted_3$c = {
+  const _hoisted_3$e = {
     key: 1,
     class: "button-primary__icon--right"
   };
-  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     __name: "ButtonPrimary",
     props: {
       label: {
@@ -156,7 +156,7 @@
           disabled: __props.disabled,
           onClick: handleClick
         }, [
-          __props.icon && __props.iconPosition === vue.unref(IconPosition).LEFT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$e, [
+          __props.icon && __props.iconPosition === vue.unref(IconPosition).LEFT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$g, [
             vue.createVNode(HpIcon, {
               name: __props.icon,
               size: "sm",
@@ -167,31 +167,31 @@
             class: "button-primary__label",
             style: vue.normalizeStyle({ color: computedColor.value })
           }, vue.toDisplayString(__props.label), 5),
-          __props.icon && __props.iconPosition === vue.unref(IconPosition).RIGHT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$c, [
+          __props.icon && __props.iconPosition === vue.unref(IconPosition).RIGHT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$e, [
             vue.createVNode(HpIcon, {
               name: __props.icon,
               size: "sm",
               color: computedColor.value
             }, null, 8, ["name", "color"])
           ])) : vue.createCommentVNode("", true)
-        ], 14, _hoisted_1$f);
+        ], 14, _hoisted_1$h);
       };
     }
   });
 
-  const HpButtonPrimary = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-5c29dcce"]]);
+  const HpButtonPrimary = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-5c29dcce"]]);
 
-  const _hoisted_1$e = ["aria-label", "aria-disabled", "disabled"];
-  const _hoisted_2$d = {
+  const _hoisted_1$g = ["aria-label", "aria-disabled", "disabled"];
+  const _hoisted_2$f = {
     key: 0,
     class: "button-secondary__icon--left"
   };
-  const _hoisted_3$b = { class: "button-secondary__label" };
-  const _hoisted_4$8 = {
+  const _hoisted_3$d = { class: "button-secondary__label" };
+  const _hoisted_4$9 = {
     key: 1,
     class: "button-secondary__icon--right"
   };
-  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     __name: "ButtonSecondary",
     props: {
       label: {
@@ -249,37 +249,37 @@
           disabled: __props.disabled,
           onClick: handleClick
         }, [
-          __props.icon && __props.iconPosition === vue.unref(IconPosition).LEFT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$d, [
+          __props.icon && __props.iconPosition === vue.unref(IconPosition).LEFT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$f, [
             vue.createVNode(HpIcon, {
               name: __props.icon,
               size: "sm"
             }, null, 8, ["name"])
           ])) : vue.createCommentVNode("", true),
-          vue.createElementVNode("span", _hoisted_3$b, vue.toDisplayString(__props.label), 1),
-          __props.icon && __props.iconPosition === vue.unref(IconPosition).RIGHT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$8, [
+          vue.createElementVNode("span", _hoisted_3$d, vue.toDisplayString(__props.label), 1),
+          __props.icon && __props.iconPosition === vue.unref(IconPosition).RIGHT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$9, [
             vue.createVNode(HpIcon, {
               name: __props.icon,
               size: "sm"
             }, null, 8, ["name"])
           ])) : vue.createCommentVNode("", true)
-        ], 14, _hoisted_1$e);
+        ], 14, _hoisted_1$g);
       };
     }
   });
 
-  const HpButtonSecondary = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-ce9350e4"]]);
+  const HpButtonSecondary = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-ce9350e4"]]);
 
-  const _hoisted_1$d = ["aria-label", "aria-disabled", "disabled"];
-  const _hoisted_2$c = {
+  const _hoisted_1$f = ["aria-label", "aria-disabled", "disabled"];
+  const _hoisted_2$e = {
     key: 0,
     class: "button-tertiary__icon--left"
   };
-  const _hoisted_3$a = { class: "button-tertiary__label" };
-  const _hoisted_4$7 = {
+  const _hoisted_3$c = { class: "button-tertiary__label" };
+  const _hoisted_4$8 = {
     key: 1,
     class: "button-tertiary__icon--right"
   };
-  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     __name: "ButtonTertiary",
     props: {
       label: {
@@ -337,25 +337,25 @@
           disabled: __props.disabled,
           onClick: handleClick
         }, [
-          __props.icon && __props.iconPosition === vue.unref(IconPosition).LEFT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$c, [
+          __props.icon && __props.iconPosition === vue.unref(IconPosition).LEFT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$e, [
             vue.createVNode(HpIcon, {
               name: __props.icon,
               size: "sm"
             }, null, 8, ["name"])
           ])) : vue.createCommentVNode("", true),
-          vue.createElementVNode("span", _hoisted_3$a, vue.toDisplayString(__props.label), 1),
-          __props.icon && __props.iconPosition === vue.unref(IconPosition).RIGHT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$7, [
+          vue.createElementVNode("span", _hoisted_3$c, vue.toDisplayString(__props.label), 1),
+          __props.icon && __props.iconPosition === vue.unref(IconPosition).RIGHT ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$8, [
             vue.createVNode(HpIcon, {
               name: __props.icon,
               size: "sm"
             }, null, 8, ["name"])
           ])) : vue.createCommentVNode("", true)
-        ], 14, _hoisted_1$d);
+        ], 14, _hoisted_1$f);
       };
     }
   });
 
-  const ButtonTertiary = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-0401b00e"]]);
+  const ButtonTertiary = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-0401b00e"]]);
 
   var ButtonIconSize = /* @__PURE__ */ ((ButtonIconSize2) => {
     ButtonIconSize2["SMALL"] = "sm";
@@ -382,8 +382,8 @@
     return "";
   };
 
-  const _hoisted_1$c = ["aria-label", "tabindex", "aria-disabled", "disabled"];
-  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$e = ["aria-label", "tabindex", "aria-disabled", "disabled"];
+  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     __name: "ButtonIcon",
     props: {
       label: {
@@ -465,7 +465,7 @@
             name: __props.icon,
             size: __props.size,
             color: computedIconColor.value
-          }, null, 8, ["name", "size", "color"])) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$b), {
+          }, null, 8, ["name", "size", "color"])) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
             key: 1,
             type: "circle1",
             color: computedIconColor.value || "#000",
@@ -473,12 +473,12 @@
             size: __props.size,
             speed: 0.8
           }, null, 8, ["color", "secondaryColor", "size"]))
-        ], 14, _hoisted_1$c);
+        ], 14, _hoisted_1$e);
       };
     }
   });
 
-  const HpButtonIcon = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-8cf8a123"]]);
+  const HpButtonIcon = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-8cf8a123"]]);
 
   var ButtonLetterSize = /* @__PURE__ */ ((ButtonLetterSize2) => {
     ButtonLetterSize2["SMALL"] = "sm";
@@ -487,9 +487,9 @@
     return ButtonLetterSize2;
   })(ButtonLetterSize || {});
 
-  const _hoisted_1$b = ["aria-label", "aria-disabled", "disabled", "tabindex"];
-  const _hoisted_2$b = { key: 0 };
-  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$d = ["aria-label", "aria-disabled", "disabled", "tabindex"];
+  const _hoisted_2$d = { key: 0 };
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     __name: "ButtonLetter",
     props: {
       label: {
@@ -572,7 +572,7 @@
             color: computedLetterColor.value
           })
         }, [
-          !__props.isLoading ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$b, vue.toDisplayString(__props.letter), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$b), {
+          !__props.isLoading ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$d, vue.toDisplayString(__props.letter), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
             key: 1,
             type: "circle1",
             color: computedLetterColor.value || "var(--color-primary)",
@@ -580,12 +580,12 @@
             size: __props.size,
             speed: 0.8
           }, null, 8, ["color", "secondaryColor", "size"]))
-        ], 14, _hoisted_1$b);
+        ], 14, _hoisted_1$d);
       };
     }
   });
 
-  const ButtonLetter = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-13b75270"]]);
+  const ButtonLetter = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-13b75270"]]);
 
   var AlertType = /* @__PURE__ */ ((AlertType2) => {
     AlertType2["WARNING"] = "warning";
@@ -595,9 +595,9 @@
     return AlertType2;
   })(AlertType || {});
 
-  const _hoisted_1$a = { class: "alert" };
-  const _hoisted_2$a = { class: "alert__container__message" };
-  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$c = { class: "alert" };
+  const _hoisted_2$c = { class: "alert__container__message" };
+  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     __name: "Alert",
     props: {
       message: {
@@ -660,7 +660,7 @@
         return props.type;
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("section", _hoisted_1$a, [
+        return vue.openBlock(), vue.createElementBlock("section", _hoisted_1$c, [
           vue.createElementVNode("div", {
             class: "alert__container",
             style: vue.normalizeStyle({
@@ -668,7 +668,7 @@
               "--color": computedColorType.value
             })
           }, [
-            vue.createElementVNode("p", _hoisted_2$a, vue.toDisplayString(__props.message), 1),
+            vue.createElementVNode("p", _hoisted_2$c, vue.toDisplayString(__props.message), 1),
             vue.createVNode(vue.unref(HpButtonIcon), {
               class: "alert__container__icon",
               label: "Fechar modal",
@@ -684,7 +684,64 @@
     }
   });
 
-  const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-10dcca72"]]);
+  const Alert = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-10dcca72"]]);
+
+  const _hoisted_1$b = {
+    key: 0,
+    class: "card__header"
+  };
+  const _hoisted_2$b = { class: "card__body" };
+  const _hoisted_3$b = {
+    key: 1,
+    class: "card__footer"
+  };
+  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+    __name: "Card",
+    props: {
+      title: { type: String, default: "" },
+      description: { type: String, default: "" },
+      variant: { type: String, default: "default" },
+      interactive: { type: Boolean, default: false }
+    },
+    setup(__props) {
+      const props = __props;
+      const titleId = `card-title-${Math.random().toString(36).slice(2)}`;
+      const descriptionId = `card-desc-${Math.random().toString(36).slice(2)}`;
+      const cardClasses = vue.computed(() => ({
+        [`card--${props.variant}`]: true,
+        "card--interactive": props.interactive
+      }));
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("article", {
+          class: vue.normalizeClass(["card", cardClasses.value]),
+          "aria-labelledby": titleId,
+          "aria-describedby": descriptionId
+        }, [
+          _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("header", _hoisted_1$b, [
+            vue.renderSlot(_ctx.$slots, "header", {}, void 0, true)
+          ])) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", _hoisted_2$b, [
+            __props.title ? (vue.openBlock(), vue.createElementBlock("h3", {
+              key: 0,
+              id: titleId,
+              class: "card__title"
+            }, vue.toDisplayString(__props.title), 1)) : vue.createCommentVNode("", true),
+            __props.description ? (vue.openBlock(), vue.createElementBlock("p", {
+              key: 1,
+              id: descriptionId,
+              class: "card__description"
+            }, vue.toDisplayString(__props.description), 1)) : vue.createCommentVNode("", true),
+            vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+          ]),
+          _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("footer", _hoisted_3$b, [
+            vue.renderSlot(_ctx.$slots, "footer", {}, void 0, true)
+          ])) : vue.createCommentVNode("", true)
+        ], 2);
+      };
+    }
+  });
+
+  const Card = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-2b489100"]]);
 
   var SpinnerLoaderSize = /* @__PURE__ */ ((SpinnerLoaderSize2) => {
     SpinnerLoaderSize2["SMALL"] = "sm";
@@ -693,23 +750,23 @@
     return SpinnerLoaderSize2;
   })(SpinnerLoaderSize || {});
 
-  const _hoisted_1$9 = {
+  const _hoisted_1$a = {
     key: 0,
     class: "spinner-circle-1"
   };
-  const _hoisted_2$9 = {
+  const _hoisted_2$a = {
     key: 1,
     class: "spinner-circle-2"
   };
-  const _hoisted_3$9 = {
+  const _hoisted_3$a = {
     key: 2,
     class: "spinner-circle-3"
   };
-  const _hoisted_4$6 = {
+  const _hoisted_4$7 = {
     key: 3,
     class: "spinner-circle-4"
   };
-  const _hoisted_5$6 = {
+  const _hoisted_5$7 = {
     key: 4,
     class: "spinner-dot-1"
   };
@@ -757,7 +814,7 @@
     key: 15,
     class: "spinner-search"
   };
-  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     __name: "SpinnerLoader",
     props: {
       type: {
@@ -807,11 +864,11 @@
           class: vue.normalizeClass(["spinner-loader", `spinner-${__props.type}`]),
           style: vue.normalizeStyle(spinnerStyles.value)
         }, [
-          __props.type === "circle1" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9)) : vue.createCommentVNode("", true),
-          __props.type === "circle2" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$9)) : vue.createCommentVNode("", true),
-          __props.type === "circle3" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$9)) : vue.createCommentVNode("", true),
-          __props.type === "circle4" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$6)) : vue.createCommentVNode("", true),
-          __props.type === "dot1" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$6, [
+          __props.type === "circle1" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a)) : vue.createCommentVNode("", true),
+          __props.type === "circle2" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$a)) : vue.createCommentVNode("", true),
+          __props.type === "circle3" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$a)) : vue.createCommentVNode("", true),
+          __props.type === "circle4" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$7)) : vue.createCommentVNode("", true),
+          __props.type === "dot1" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$7, [
             (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(3, (i) => {
               return vue.createElementVNode("div", {
                 key: `dot1-${i}`,
@@ -837,13 +894,13 @@
     }
   });
 
-  const _hoisted_1$8 = ["for"];
-  const _hoisted_2$8 = ["id", "checked", "disabled"];
-  const _hoisted_3$8 = {
+  const _hoisted_1$9 = ["for"];
+  const _hoisted_2$9 = ["id", "checked", "disabled"];
+  const _hoisted_3$9 = {
     key: 0,
     class: "checkbox__label"
   };
-  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     __name: "Checkbox",
     props: {
       modelValue: {
@@ -929,7 +986,7 @@
             checked: isChecked.value,
             disabled: __props.disabled,
             onChange: handleChange
-          }, null, 40, _hoisted_2$8),
+          }, null, 40, _hoisted_2$9),
           vue.createElementVNode("span", {
             class: vue.normalizeClass(["checkbox__container", { "checkbox__container--rounded": __props.rounded }]),
             style: vue.normalizeStyle({ "--background-color": computedBackgroundColor.value })
@@ -947,23 +1004,23 @@
               vue.createElementVNode("polyline", { points: "1 5 4 8 11 1" }, null, -1)
             ]), 6)) : vue.createCommentVNode("", true)
           ], 6),
-          _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$8, [
+          _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$9, [
             vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
           ])) : vue.createCommentVNode("", true)
-        ], 14, _hoisted_1$8);
+        ], 14, _hoisted_1$9);
       };
     }
   });
 
-  const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-29384d40"]]);
+  const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-29384d40"]]);
 
-  const _hoisted_1$7 = ["for"];
-  const _hoisted_2$7 = ["id", "checked", "disabled", "value"];
-  const _hoisted_3$7 = {
+  const _hoisted_1$8 = ["for"];
+  const _hoisted_2$8 = ["id", "checked", "disabled", "value"];
+  const _hoisted_3$8 = {
     key: 0,
     class: "radio__label"
   };
-  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     __name: "RadioButton",
     props: {
       modelValue: {
@@ -1045,7 +1102,7 @@
             disabled: __props.disabled,
             value: __props.value,
             onChange: handleChange
-          }, null, 40, _hoisted_2$7),
+          }, null, 40, _hoisted_2$8),
           vue.createElementVNode("span", {
             class: vue.normalizeClass(["radio__container", { "radio__container--rounded": __props.rounded }])
           }, [
@@ -1054,15 +1111,15 @@
               class: vue.normalizeClass(["radio__dot", { "radio__dot--animated": __props.hasAnimation }])
             }, null, 2)) : vue.createCommentVNode("", true)
           ], 2),
-          _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$7, [
+          _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$8, [
             vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
           ])) : vue.createCommentVNode("", true)
-        ], 14, _hoisted_1$7);
+        ], 14, _hoisted_1$8);
       };
     }
   });
 
-  const RadioButton = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-50110fea"]]);
+  const RadioButton = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-50110fea"]]);
 
   var TextSize = /* @__PURE__ */ ((TextSize2) => {
     TextSize2["EXTRA_SMALL"] = "xs";
@@ -1083,7 +1140,7 @@
     return HeadingLevel2;
   })(HeadingLevel || {});
 
-  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     __name: "Text",
     props: {
       size: {
@@ -1114,9 +1171,9 @@
     }
   });
 
-  const Text = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-e52f8226"]]);
+  const Text = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-e52f8226"]]);
 
-  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     __name: "Heading",
     props: {
       level: {
@@ -1154,20 +1211,20 @@
     }
   });
 
-  const Heading = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-35210bc7"]]);
+  const Heading = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-35210bc7"]]);
 
-  const _hoisted_1$6 = { class: "modal__header" };
-  const _hoisted_2$6 = { class: "modal__title" };
-  const _hoisted_3$6 = { class: "modal__content" };
-  const _hoisted_4$5 = {
+  const _hoisted_1$7 = { class: "modal__header" };
+  const _hoisted_2$7 = { class: "modal__title" };
+  const _hoisted_3$7 = { class: "modal__content" };
+  const _hoisted_4$6 = {
     key: 0,
     class: "modal__footer"
   };
-  const _hoisted_5$5 = {
+  const _hoisted_5$6 = {
     key: 1,
     class: "modal__footer"
   };
-  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     __name: "Modal",
     props: {
       title: {
@@ -1246,7 +1303,7 @@
               vue.createElementVNode("div", {
                 class: vue.normalizeClass(["modal__container", [`modal__container--${__props.size}`]])
               }, [
-                vue.createElementVNode("div", _hoisted_1$6, [
+                vue.createElementVNode("div", _hoisted_1$7, [
                   __props.showBackButton ? (vue.openBlock(), vue.createBlock(vue.unref(HpButtonIcon), {
                     key: 0,
                     class: "modal__back-button",
@@ -1255,7 +1312,7 @@
                     label: "Botão de voltar",
                     onClick: handleBackClick
                   })) : vue.createCommentVNode("", true),
-                  vue.createElementVNode("h2", _hoisted_2$6, vue.toDisplayString(__props.title), 1),
+                  vue.createElementVNode("h2", _hoisted_2$7, vue.toDisplayString(__props.title), 1),
                   __props.showCloseButton ? (vue.openBlock(), vue.createBlock(vue.unref(HpButtonIcon), {
                     key: 1,
                     class: "modal__close-button",
@@ -1265,10 +1322,10 @@
                     onClick: handleCloseModal
                   })) : vue.createCommentVNode("", true)
                 ]),
-                vue.createElementVNode("div", _hoisted_3$6, [
+                vue.createElementVNode("div", _hoisted_3$7, [
                   vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
                 ]),
-                __props.hasPrimaryButton || __props.hasSecondaryButton ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$5, [
+                __props.hasPrimaryButton || __props.hasSecondaryButton ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$6, [
                   __props.hasSecondaryButton ? (vue.openBlock(), vue.createBlock(vue.unref(HpButtonSecondary), {
                     key: 0,
                     label: __props.secondaryButtonLabel,
@@ -1282,7 +1339,7 @@
                     onClick: handleSecondaryButtonClick
                   }, null, 8, ["label", "backgroundColor"])) : vue.createCommentVNode("", true)
                 ])) : vue.createCommentVNode("", true),
-                !__props.hasPrimaryButton && !__props.hasSecondaryButton && _ctx.$slots.buttons ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$5, [
+                !__props.hasPrimaryButton && !__props.hasSecondaryButton && _ctx.$slots.buttons ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$6, [
                   vue.renderSlot(_ctx.$slots, "buttons", {}, void 0, true)
                 ])) : vue.createCommentVNode("", true)
               ], 2)
@@ -1294,15 +1351,15 @@
     }
   });
 
-  const Modal = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-cdf63c2b"]]);
+  const Modal = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-cdf63c2b"]]);
 
-  const _hoisted_1$5 = ["id", "checked", "disabled", "aria-checked", "aria-labelledby"];
-  const _hoisted_2$5 = ["for", "id", "tabindex", "onKeydown"];
-  const _hoisted_3$5 = {
+  const _hoisted_1$6 = ["id", "checked", "disabled", "aria-checked", "aria-labelledby"];
+  const _hoisted_2$6 = ["for", "id", "tabindex", "onKeydown"];
+  const _hoisted_3$6 = {
     key: 0,
     class: "toggle-switch__text"
   };
-  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     __name: "ToggleSwitch",
     props: {
       modelValue: {
@@ -1367,7 +1424,7 @@
             "aria-checked": __props.modelValue,
             "aria-labelledby": `${__props.id}-label`,
             tabindex: "-1"
-          }, null, 40, _hoisted_1$5),
+          }, null, 40, _hoisted_1$6),
           vue.createElementVNode("label", {
             for: __props.id,
             class: "toggle-switch__label",
@@ -1388,28 +1445,28 @@
                 style: vue.normalizeStyle({ "--thumb-color": computedThumbColor.value })
               }, null, 4)
             ], 4),
-            _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$5, [
+            _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$6, [
               vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
             ])) : vue.createCommentVNode("", true)
-          ], 44, _hoisted_2$5)
+          ], 44, _hoisted_2$6)
         ], 2);
       };
     }
   });
 
-  const ToggleSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-14c54b46"]]);
+  const ToggleSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-14c54b46"]]);
 
-  const _hoisted_1$4 = { key: 0 };
-  const _hoisted_2$4 = ["aria-checked", "onKeydown"];
-  const _hoisted_3$4 = {
+  const _hoisted_1$5 = { key: 0 };
+  const _hoisted_2$5 = ["aria-checked", "onKeydown"];
+  const _hoisted_3$5 = {
     key: 1,
     class: "theme-switcher-animation"
   };
-  const _hoisted_4$4 = ["id", "aria-checked"];
-  const _hoisted_5$4 = ["for", "onKeydown"];
+  const _hoisted_4$5 = ["id", "aria-checked"];
+  const _hoisted_5$5 = ["for", "onKeydown"];
 
 
-  const _sfc_main$4 = {
+  const _sfc_main$5 = {
     __name: 'ThemeSwitcher',
     props: {
     modelValue: {
@@ -1521,7 +1578,7 @@
 
   return (_ctx, _cache) => {
     return (!__props.hasAnimation)
-      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
           vue.createElementVNode("button", {
             class: "theme-switcher",
             type: "button",
@@ -1544,9 +1601,9 @@
               size: "sm",
               color: computedButtonIconColor.value
             }, null, 8, ["name", "color"])
-          ], 44, _hoisted_2$4)
+          ], 44, _hoisted_2$5)
         ]))
-      : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$4, [
+      : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$5, [
           vue.withDirectives(vue.createElementVNode("input", {
             type: "checkbox",
             id: __props.id,
@@ -1557,7 +1614,7 @@
             "aria-checked": isDarkMode.value,
             "aria-label": "Alternar entre tema claro e escuro",
             tabindex: "-1"
-          }, null, 40, _hoisted_4$4), [
+          }, null, 40, _hoisted_4$5), [
             [vue.vModelCheckbox, isDarkMode.value]
           ]),
           vue.createElementVNode("label", {
@@ -1576,22 +1633,22 @@
             ]
           }, _cache[1] || (_cache[1] = [
             vue.createElementVNode("span", { class: "toggle--label-background" }, null, -1)
-          ]), 44, _hoisted_5$4)
+          ]), 44, _hoisted_5$5)
         ]))
   }
   }
 
   };
-  const ThemeSwitcher = /*#__PURE__*/_export_sfc(_sfc_main$4, [['__scopeId',"data-v-7efca676"]]);
+  const ThemeSwitcher = /*#__PURE__*/_export_sfc(_sfc_main$5, [['__scopeId',"data-v-7efca676"]]);
 
-  const _hoisted_1$3 = { class: "input__fieldset" };
-  const _hoisted_2$3 = {
+  const _hoisted_1$4 = { class: "input__fieldset" };
+  const _hoisted_2$4 = {
     style: {"display":"none"},
     "aria-hidden": true
   };
-  const _hoisted_3$3 = ["for"];
-  const _hoisted_4$3 = { class: "input__wrapper" };
-  const _hoisted_5$3 = ["id", "value", "readonly", "aria-readonly", "disabled", "placeholder", "required", "maxlength", "aria-labelledby", "aria-describedby", "aria-invalid"];
+  const _hoisted_3$4 = ["for"];
+  const _hoisted_4$4 = { class: "input__wrapper" };
+  const _hoisted_5$4 = ["id", "value", "readonly", "aria-readonly", "disabled", "placeholder", "required", "maxlength", "aria-labelledby", "aria-describedby", "aria-invalid"];
   const _hoisted_6$3 = { class: "input__footer" };
   const _hoisted_7$3 = ["id"];
   const _hoisted_8$3 = {
@@ -1600,7 +1657,7 @@
   };
 
 
-  const _sfc_main$3 = {
+  const _sfc_main$4 = {
     __name: 'InputText',
     props: {
     modelValue: {
@@ -1727,16 +1784,16 @@
         '--icon-padding-right': __props.trailingIcon ? '32px' : '0px'
       })
     }, [
-      vue.createElementVNode("fieldset", _hoisted_1$3, [
-        vue.createElementVNode("legend", _hoisted_2$3, vue.toDisplayString(__props.label), 1),
+      vue.createElementVNode("fieldset", _hoisted_1$4, [
+        vue.createElementVNode("legend", _hoisted_2$4, vue.toDisplayString(__props.label), 1),
         (isFocused.value || __props.modelValue !== '' || __props.placeholder !== '')
           ? (vue.openBlock(), vue.createElementBlock("label", {
               key: 0,
               for: __props.id,
               class: vue.normalizeClass(["input__label", { 'input__label--required': __props.required }])
-            }, vue.toDisplayString(__props.label), 11, _hoisted_3$3))
+            }, vue.toDisplayString(__props.label), 11, _hoisted_3$4))
           : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_4$3, [
+        vue.createElementVNode("div", _hoisted_4$4, [
           (__props.leadingIcon)
             ? (vue.openBlock(), vue.createBlock(vue.unref(HpIcon), {
                 key: 0,
@@ -1765,7 +1822,7 @@
             "aria-labelledby": `${__props.id}-label`,
             "aria-describedby": __props.helperText ? `${__props.id}-helper-text` : undefined,
             "aria-invalid": __props.status === 'error'
-          }, null, 40, _hoisted_5$3),
+          }, null, 40, _hoisted_5$4),
           (__props.iconHasAction && __props.trailingIcon)
             ? (vue.openBlock(), vue.createBlock(vue.unref(HpButtonIcon), {
                 key: 1,
@@ -1806,16 +1863,16 @@
   }
 
   };
-  const InputText = /*#__PURE__*/_export_sfc(_sfc_main$3, [['__scopeId',"data-v-6450d99a"]]);
+  const InputText = /*#__PURE__*/_export_sfc(_sfc_main$4, [['__scopeId',"data-v-6450d99a"]]);
 
-  const _hoisted_1$2 = { class: "input__fieldset" };
-  const _hoisted_2$2 = {
+  const _hoisted_1$3 = { class: "input__fieldset" };
+  const _hoisted_2$3 = {
     style: {"display":"none"},
     "aria-hidden": true
   };
-  const _hoisted_3$2 = ["for"];
-  const _hoisted_4$2 = { class: "input__wrapper" };
-  const _hoisted_5$2 = ["id", "value", "readonly", "aria-readonly", "disabled", "placeholder", "required", "min", "max", "aria-labelledby", "aria-describedby", "aria-invalid"];
+  const _hoisted_3$3 = ["for"];
+  const _hoisted_4$3 = { class: "input__wrapper" };
+  const _hoisted_5$3 = ["id", "value", "readonly", "aria-readonly", "disabled", "placeholder", "required", "min", "max", "aria-labelledby", "aria-describedby", "aria-invalid"];
   const _hoisted_6$2 = { class: "input__buttons-container" };
   const _hoisted_7$2 = ["disabled", "aria-label"];
   const _hoisted_8$2 = ["disabled", "aria-label"];
@@ -1823,7 +1880,7 @@
   const _hoisted_10$2 = ["id"];
 
 
-  const _sfc_main$2 = {
+  const _sfc_main$3 = {
     __name: 'InputNumber',
     props: {
     modelValue: {
@@ -1989,16 +2046,16 @@
         '--icon-padding-left': __props.leadingIcon ? '24px' : '0px'
       })
     }, [
-      vue.createElementVNode("fieldset", _hoisted_1$2, [
-        vue.createElementVNode("legend", _hoisted_2$2, vue.toDisplayString(__props.label), 1),
+      vue.createElementVNode("fieldset", _hoisted_1$3, [
+        vue.createElementVNode("legend", _hoisted_2$3, vue.toDisplayString(__props.label), 1),
         (isFocused.value || modelValueFormatted.value !== null || __props.placeholder !== '')
           ? (vue.openBlock(), vue.createElementBlock("label", {
               key: 0,
               for: __props.id,
               class: vue.normalizeClass(["input__label", { 'input__label--required': __props.required }])
-            }, vue.toDisplayString(__props.label), 11, _hoisted_3$2))
+            }, vue.toDisplayString(__props.label), 11, _hoisted_3$3))
           : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_4$2, [
+        vue.createElementVNode("div", _hoisted_4$3, [
           (__props.leadingIcon)
             ? (vue.openBlock(), vue.createBlock(vue.unref(HpIcon), {
                 key: 0,
@@ -2029,7 +2086,7 @@
             "aria-labelledby": `${__props.id}-label`,
             "aria-describedby": __props.helperText ? `${__props.id}-helper-text` : undefined,
             "aria-invalid": __props.status === 'error'
-          }, null, 40, _hoisted_5$2),
+          }, null, 40, _hoisted_5$3),
           vue.createElementVNode("div", _hoisted_6$2, [
             vue.createElementVNode("button", {
               type: "button",
@@ -2075,19 +2132,19 @@
   }
 
   };
-  const InputNumber = /*#__PURE__*/_export_sfc(_sfc_main$2, [['__scopeId',"data-v-7f20743b"]]);
+  const InputNumber = /*#__PURE__*/_export_sfc(_sfc_main$3, [['__scopeId',"data-v-7f20743b"]]);
 
-  const _hoisted_1$1 = { class: "input__fieldset" };
-  const _hoisted_2$1 = {
+  const _hoisted_1$2 = { class: "input__fieldset" };
+  const _hoisted_2$2 = {
     style: {"display":"none"},
     "aria-hidden": true
   };
-  const _hoisted_3$1 = ["for", "id"];
-  const _hoisted_4$1 = {
+  const _hoisted_3$2 = ["for", "id"];
+  const _hoisted_4$2 = {
     key: 0,
     class: "required-asterisk"
   };
-  const _hoisted_5$1 = { class: "input__wrapper" };
+  const _hoisted_5$2 = { class: "input__wrapper" };
   const _hoisted_6$1 = {
     key: 0,
     class: "autocomplete-wrapper"
@@ -2115,7 +2172,7 @@
   };
 
 
-  const _sfc_main$1 = {
+  const _sfc_main$2 = {
     __name: 'InputSelect',
     props: {
     modelValue: {
@@ -2399,8 +2456,8 @@
       ref_key: "select",
       ref: select
     }, [
-      vue.createElementVNode("fieldset", _hoisted_1$1, [
-        vue.createElementVNode("legend", _hoisted_2$1, vue.toDisplayString(__props.label), 1),
+      vue.createElementVNode("fieldset", _hoisted_1$2, [
+        vue.createElementVNode("legend", _hoisted_2$2, vue.toDisplayString(__props.label), 1),
         (__props.modelValue !== null || __props.placeholder !== '')
           ? (vue.openBlock(), vue.createElementBlock("label", {
               key: 0,
@@ -2410,11 +2467,11 @@
             }, [
               vue.createTextVNode(vue.toDisplayString(__props.label) + " ", 1),
               (__props.required)
-                ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$1, "*"))
+                ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$2, "*"))
                 : vue.createCommentVNode("", true)
-            ], 10, _hoisted_3$1))
+            ], 10, _hoisted_3$2))
           : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_5$1, [
+        vue.createElementVNode("div", _hoisted_5$2, [
           (__props.autocomplete)
             ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$1, [
                 vue.withDirectives(vue.createElementVNode("input", {
@@ -2602,19 +2659,19 @@
   }
 
   };
-  const InputSelect = /*#__PURE__*/_export_sfc(_sfc_main$1, [['__scopeId',"data-v-00cdf827"]]);
+  const InputSelect = /*#__PURE__*/_export_sfc(_sfc_main$2, [['__scopeId',"data-v-00cdf827"]]);
 
-  const _hoisted_1 = { class: "input-range__fieldset" };
-  const _hoisted_2 = {
+  const _hoisted_1$1 = { class: "input-range__fieldset" };
+  const _hoisted_2$1 = {
     key: 0,
     class: "input-range__legend"
   };
-  const _hoisted_3 = {
+  const _hoisted_3$1 = {
     key: 0,
     class: "input-range__required"
   };
-  const _hoisted_4 = { class: "input-range__wrapper" };
-  const _hoisted_5 = ["id", "min", "max", "step", "value", "disabled", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-labelledby", "aria-describedby"];
+  const _hoisted_4$1 = { class: "input-range__wrapper" };
+  const _hoisted_5$1 = ["id", "min", "max", "step", "value", "disabled", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-labelledby", "aria-describedby"];
   const _hoisted_6 = { class: "input-range__value-display" };
   const _hoisted_7 = { class: "input-range__value" };
   const _hoisted_8 = {
@@ -2628,7 +2685,7 @@
   const _hoisted_10 = ["id"];
 
 
-  const _sfc_main = {
+  const _sfc_main$1 = {
     __name: 'InputRange',
     props: {
     modelValue: {
@@ -2711,16 +2768,16 @@
         [`input-range--${__props.status}`]: __props.status !== 'default'
       }])
     }, [
-      vue.createElementVNode("fieldset", _hoisted_1, [
+      vue.createElementVNode("fieldset", _hoisted_1$1, [
         (__props.label)
-          ? (vue.openBlock(), vue.createElementBlock("legend", _hoisted_2, [
+          ? (vue.openBlock(), vue.createElementBlock("legend", _hoisted_2$1, [
               vue.createTextVNode(vue.toDisplayString(__props.label) + " ", 1),
               (__props.required)
-                ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, "*"))
+                ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$1, "*"))
                 : vue.createCommentVNode("", true)
             ]))
           : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_4, [
+        vue.createElementVNode("div", _hoisted_4$1, [
           vue.createElementVNode("input", {
             id: __props.id,
             ref_key: "input",
@@ -2739,7 +2796,7 @@
             "aria-valuenow": __props.modelValue,
             "aria-labelledby": `${__props.id}-label`,
             "aria-describedby": __props.helperText ? `${__props.id}-helper` : undefined
-          }, null, 40, _hoisted_5),
+          }, null, 40, _hoisted_5$1),
           vue.createElementVNode("div", _hoisted_6, [
             vue.createElementVNode("span", _hoisted_7, vue.toDisplayString(__props.modelValue), 1),
             (__props.unit)
@@ -2761,7 +2818,82 @@
   }
 
   };
-  const InputRange = /*#__PURE__*/_export_sfc(_sfc_main, [['__scopeId',"data-v-32e54a28"]]);
+  const InputRange = /*#__PURE__*/_export_sfc(_sfc_main$1, [['__scopeId',"data-v-32e54a28"]]);
+
+  const _hoisted_1 = { class: "progress-bar" };
+  const _hoisted_2 = {
+    key: 0,
+    class: "progress-bar__header"
+  };
+  const _hoisted_3 = { class: "progress-bar__value" };
+  const _hoisted_4 = { class: "progress-bar__wrapper" };
+  const _hoisted_5 = ["value", "max", "aria-labelledby"];
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "ProgressBar"
+    },
+    __name: "ProgressBar",
+    props: {
+      label: {
+        type: String,
+        default: ""
+      },
+      value: {
+        type: Number,
+        required: true
+      },
+      max: {
+        type: Number,
+        default: 100
+      },
+      hasLabel: {
+        type: Boolean,
+        default: false
+      },
+      backgroundColor: {
+        type: String,
+        default: ""
+      },
+      barColor: {
+        type: String,
+        default: ""
+      }
+    },
+    setup(__props) {
+      const props = __props;
+      const labelId = `progress-bar-label-${Math.random().toString(36).slice(2)}`;
+      const normalizedValue = vue.computed(() => {
+        const percent = props.value / props.max * 100;
+        return Math.min(100, Math.max(0, Math.round(percent)));
+      });
+      const trackStyle = vue.computed(() => ({
+        "--track-color": props.backgroundColor || "var(--color-border, #e5e7eb)",
+        "--bar-color": props.barColor || "var(--color-danger, #b91c1c)"
+      }));
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+          __props.hasLabel ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+            vue.createElementVNode("span", {
+              class: "progress-bar__label",
+              id: labelId
+            }, vue.toDisplayString(__props.label), 1),
+            vue.createElementVNode("span", _hoisted_3, vue.toDisplayString(normalizedValue.value) + "% ", 1)
+          ])) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", _hoisted_4, [
+            vue.createElementVNode("progress", {
+              class: "progress-bar__track",
+              value: __props.value,
+              max: __props.max,
+              "aria-labelledby": __props.label ? labelId : void 0,
+              style: vue.normalizeStyle(trackStyle.value)
+            }, null, 12, _hoisted_5)
+          ])
+        ]);
+      };
+    }
+  });
+
+  const ProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a3ba3e49"]]);
 
   const components = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
     __proto__: null,
@@ -2771,6 +2903,7 @@
     HpButtonPrimary,
     HpButtonSecondary,
     HpButtonTertiary: ButtonTertiary,
+    HpCard: Card,
     HpCheckbox: Checkbox,
     HpHeading: Heading,
     HpIcon,
@@ -2779,8 +2912,9 @@
     HpInputSelect: InputSelect,
     HpInputText: InputText,
     HpModal: Modal,
+    HpProgressBar: ProgressBar,
     HpRadioButton: RadioButton,
-    HpSpinnerLoader: _sfc_main$b,
+    HpSpinnerLoader: _sfc_main$c,
     HpText: Text,
     HpThemeSwitcher: ThemeSwitcher,
     HpToggleSwitch: ToggleSwitch
@@ -2827,6 +2961,7 @@
   exports.HpButtonPrimary = HpButtonPrimary;
   exports.HpButtonSecondary = HpButtonSecondary;
   exports.HpButtonTertiary = ButtonTertiary;
+  exports.HpCard = Card;
   exports.HpCheckbox = Checkbox;
   exports.HpHeading = Heading;
   exports.HpIcon = HpIcon;
@@ -2835,8 +2970,9 @@
   exports.HpInputSelect = InputSelect;
   exports.HpInputText = InputText;
   exports.HpModal = Modal;
+  exports.HpProgressBar = ProgressBar;
   exports.HpRadioButton = RadioButton;
-  exports.HpSpinnerLoader = _sfc_main$b;
+  exports.HpSpinnerLoader = _sfc_main$c;
   exports.HpText = Text;
   exports.HpThemeSwitcher = ThemeSwitcher;
   exports.HpToggleSwitch = ToggleSwitch;