@hunter-industries/hunter-components 0.0.80 → 0.0.81

package/dist/hunter-components.js

@@ -1,4 +1,4 @@
-import { openBlock, createElementBlock, createElementVNode, createStaticVNode, defineComponent, computed, ref, createBlock, resolveDynamicComponent, normalizeClass, normalizeStyle, createCommentVNode, toRefs, toDisplayString, createVNode, createTextVNode, renderSlot, watchEffect, unref, withDirectives, vShow, withCtx, vModelCheckbox, Fragment, renderList, watch, onBeforeUnmount, mergeProps, onMounted, withModifiers, vModelRadio, pushScopeId, popScopeId, vModelText } from "vue";
+import { openBlock, createElementBlock, createElementVNode, createStaticVNode, defineComponent, toRefs, computed, ref, createBlock, resolveDynamicComponent, mergeProps, createCommentVNode, normalizeClass, normalizeStyle, toDisplayString, renderSlot, unref, createVNode, createTextVNode, watchEffect, withDirectives, vShow, withCtx, vModelCheckbox, Fragment, renderList, watch, onBeforeUnmount, withModifiers, onMounted, vModelRadio, pushScopeId, popScopeId, vModelText } from "vue";
 const _hoisted_1$1X = {
   xmlns: "http://www.w3.org/2000/svg",
   fill: "currentColor",
@@ -1519,7 +1519,7 @@ const _hoisted_3$u = [
 function render$m(_ctx, _cache) {
   return openBlock(), createElementBlock("svg", _hoisted_1$z, [..._hoisted_3$u]);
 }
-const SearchIcon = { render: render$m };
+const __vite_glob_0_88 = { render: render$m };
 const _hoisted_1$y = {
   xmlns: "http://www.w3.org/2000/svg",
   fill: "currentColor",
@@ -2032,7 +2032,7 @@ const componentFiles = /* @__PURE__ */ Object.assign({
   "./rotate-double-arrow.svg": __vite_glob_0_85,
   "./ruler.svg": __vite_glob_0_86,
   "./scale.svg": __vite_glob_0_87,
-  "./search.svg": SearchIcon,
+  "./search.svg": __vite_glob_0_88,
   "./share.svg": __vite_glob_0_89,
   "./square-outline.svg": __vite_glob_0_90,
   "./square.svg": __vite_glob_0_91,
@@ -2177,39 +2177,57 @@ const hunterIconSvgs = Object.fromEntries(
   Object.entries(rawFiles).map(([p, svg]) => [toName(p), svg])
 );
 const icons = hunterIconComponents;
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "Icon",
   props: {
     name: {},
     className: {},
     width: {},
     height: {},
-    size: {}
+    size: {},
+    fill: {},
+    stroke: {},
+    strokeWidth: {},
+    flipIcon: {}
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
+    const { flipIcon } = toRefs(props);
     const iconSizeClass = computed(() => {
       if (props.size) {
         return `hcl-icon_size-${props.size}`;
       }
     });
+    const iconProps = computed(() => {
+      let obj = {};
+      if (props.fill)
+        obj.fill = props.fill || "currentColor";
+      if (props.stroke)
+        obj.stroke = props.stroke;
+      if (props.strokeWidth)
+        obj.strokeWidth = props.strokeWidth;
+      console.log("OBJ", obj);
+      return obj;
+    });
     const hunterIcon = ref();
     const icon = computed(() => icons[props.name]);
-    const iconClasses = computed(
-      () => Array.isArray(props.className) ? [...props.className] : props.className
-    );
-    console.log("NAME", props.className);
+    const iconClasses = computed(() => {
+      let classes = [props.className].flat();
+      if (flipIcon.value) {
+        classes.push(`hcl-flip-icon ${flipIcon.value}`);
+      }
+      return classes;
+    });
     __expose({
       hunterIcon
     });
     return (_ctx, _cache) => {
-      return icon.value ? (openBlock(), createBlock(resolveDynamicComponent(icon.value), {
-        key: 0,
-        class: normalizeClass(["hcl-icon", [iconClasses.value, iconSizeClass.value]]),
-        style: normalizeStyle({ width: _ctx.width, height: _ctx.height }),
+      return icon.value ? (openBlock(), createBlock(resolveDynamicComponent(icon.value), mergeProps({ key: 0 }, iconProps.value, {
+        class: ["hcl-icon", [iconClasses.value, iconSizeClass.value, {}]],
+        style: { width: _ctx.width, height: _ctx.height },
         ref_key: "hunterIcon",
         ref: hunterIcon
-      }, null, 8, ["class", "style"])) : createCommentVNode("", true);
+      }), null, 16, ["class", "style"])) : createCommentVNode("", true);
     };
   }
 });
@@ -2220,7 +2238,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const Icon = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-e8d96df5"]]);
+const Icon = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-1f4dafc5"]]);
 const unitRegex = /(ch|em|rem|ex|px|cm|mm|in|pt|pc|vh|vw|vmin|vmax|svh|lvh|dvh|svw|lvw|dvw|%)$/i;
 const keywordOrFuncRegex = /^(auto|min-content|max-content|fit-content\(.+\)|calc\(.+\)|clamp\(.+\)|min\(.+\)|max\(.+\)|var\(--[^)]+\))$/i;
 const convertValueToCssSizeProperty = (value) => {
@@ -2289,7 +2307,7 @@ const validateForm = (inputs) => {
   return { inputs, isValid };
 };
 const _hoisted_1$c = ["id", "aria-disabled", "type"];
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "Button",
   props: {
     variant: {},
@@ -2313,6 +2331,9 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     iconWidth: {},
     iconHeight: {},
     iconSize: {},
+    iconFill: {},
+    iconStroke: {},
+    iconStrokeWidth: {},
     style: {},
     status: {},
     useStatusStyles: { type: Boolean },
@@ -2320,7 +2341,9 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     animatePendingEllipsis: { type: Boolean },
     width: {},
     height: {},
-    type: {}
+    type: {},
+    useSlot: { type: Boolean },
+    flipIcon: {}
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
@@ -2359,15 +2382,12 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       () => convertValueToCssSizeProperty(props.height)
     );
     const buttonClasses = computed(() => {
-      const defaultClass = `hunter-button-${props.variant ? props.variant : "primary"}`;
+      const defaultClass = `hunter-button_${props.variant ? props.variant : "primary"}`;
       const statusClass = props.useStatusStyles === true && status.value !== "idle" && !props.disabled ? `hunter-button_${status.value}` : void 0;
       const flipClass = props.icon && iconPosition.value === "left" ? "hunter-button_flip-icon-position" : void 0;
       const ellipsisClass = props.animatePendingEllipsis === true && status.value === "pending" ? "hunter-button_animate-ellipsis" : void 0;
       return [defaultClass, statusClass, flipClass, ellipsisClass].filter(Boolean);
     });
-    const customIconClasses = computed(
-      () => [iconClass.value].flat().filter(Boolean).join(" ")
-    );
     const buttonEl = ref(null);
     const buttonSpan = ref(null);
     __expose({
@@ -2392,34 +2412,41 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         onMouseover: _cache[0] || (_cache[0] = ($event) => isHovered.value = true),
         onMouseleave: _cache[1] || (_cache[1] = ($event) => isHovered.value = false)
       }, [
-        _ctx.variant !== "icon" ? (openBlock(), createElementBlock("span", {
+        _ctx.variant !== "icon" && !_ctx.useSlot ? (openBlock(), createElementBlock("span", {
           key: 0,
           class: "hunter-button__label",
           ref_key: "buttonSpan",
           ref: buttonSpan
         }, toDisplayString(displayText.value), 513)) : createCommentVNode("", true),
+        _ctx.variant !== "icon" && _ctx.useSlot === true ? renderSlot(_ctx.$slots, "default", { key: 1 }, void 0, true) : createCommentVNode("", true),
         _ctx.icon ? (openBlock(), createBlock(Icon, {
-          key: 1,
+          key: 2,
           ref_key: "buttonIcon",
           ref: buttonIcon,
           name: _ctx.icon,
           size: _ctx.iconSize || "default",
-          class: normalizeClass([{ "hunter-button-icon": _ctx.variant === "icon" }]),
-          className: [
-            customIconClasses.value,
+          class: normalizeClass([
+            {
+              "hunter-button_icon": _ctx.variant === "icon"
+            },
             isHovered.value === true && _ctx.iconHoverClass ? [_ctx.iconHoverClass].flat().join(" ") : ""
-          ],
+          ]),
+          flipIcon: _ctx.flipIcon,
+          className: unref(iconClass),
           width: _ctx.iconWidth,
-          height: _ctx.iconHeight
-        }, null, 8, ["name", "size", "class", "className", "width", "height"])) : createCommentVNode("", true)
+          height: _ctx.iconHeight,
+          fill: _ctx.iconFill,
+          stroke: _ctx.iconStroke,
+          strokeWidth: _ctx.iconStrokeWidth
+        }, null, 8, ["name", "size", "class", "flipIcon", "className", "width", "height", "fill", "stroke", "strokeWidth"])) : createCommentVNode("", true)
       ], 46, _hoisted_1$c);
     };
   }
 });
-const Button = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-6412df83"]]);
+const Button = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-d65b8412"]]);
 const _hoisted_1$b = ["id"];
 const _hoisted_2$9 = { key: 0 };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "ButtonIcon",
   props: {
     variant: {},
@@ -2459,8 +2486,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ButtonIcon = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-cfb871ee"]]);
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const ButtonIcon = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-cfb871ee"]]);
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "ButtonToast",
   props: {
     text: {},
@@ -2496,7 +2523,7 @@ const _hoisted_8 = {
   key: 0,
   class: "hc__card__buttons"
 };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "Card",
   props: {
     title: {},
@@ -2593,7 +2620,7 @@ const _hoisted_2$7 = {
 };
 const _hoisted_3$6 = ["src", "alt"];
 const _hoisted_4$5 = { class: "hc__category-card__title" };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "CategoryCard",
   props: {
     title: {},
@@ -2668,7 +2695,7 @@ const _hoisted_5$2 = {
   key: 0,
   class: "hunter-checkbox-note-span"
 };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "Checkbox",
   props: {
     label: {},
@@ -2700,9 +2727,9 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-75265500"]]);
+const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-75265500"]]);
 const _hoisted_1$7 = { class: "text" };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "Chip",
   props: {
     text: {},
@@ -2731,12 +2758,12 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Chip = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-3d21af5d"]]);
+const Chip = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-3d21af5d"]]);
 const _hoisted_1$6 = ["id", "aria-hidden"];
 const _hoisted_2$5 = { class: "dropdown-wrapper" };
 const _hoisted_3$4 = ["value", "onClick"];
 const _hoisted_4$3 = { class: "hunter-search-input-option-li" };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "DropdownList",
   props: {
     options: {},
@@ -2801,8 +2828,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DropdownList = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-f18bb4ff"]]);
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const DropdownList = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-f18bb4ff"]]);
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "DropdownListWithFilter",
   props: {
     filterValue: {},
@@ -2860,7 +2887,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "ColorIcon",
   props: {
     color: {},
@@ -2891,11 +2918,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ColorIcon = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-3e170770"]]);
+const ColorIcon = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-3e170770"]]);
 const _hoisted_1$5 = ["id", "aria-hidden"];
 const _hoisted_2$4 = { class: "dropdown-wrapper" };
 const _hoisted_3$3 = ["value", "onClick"];
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "DropdownListWithColorIcons",
   props: {
     colors: {},
@@ -2950,8 +2977,72 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DropdownListWithColorIcons = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-908a37e0"]]);
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const DropdownListWithColorIcons = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-908a37e0"]]);
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "ButtonDropdown",
+  props: {
+    collapsed: { type: Boolean },
+    variant: {},
+    disabled: { type: Boolean },
+    className: {},
+    iconClass: {},
+    iconHoverClass: {},
+    iconPendingClass: {},
+    iconSuccessClass: {},
+    iconErrorClass: {},
+    id: {},
+    text: {},
+    pendingText: {},
+    successText: {},
+    errorText: {},
+    icon: {},
+    pendingIcon: {},
+    successIcon: {},
+    errorIcon: {},
+    iconPosition: {},
+    iconWidth: {},
+    iconHeight: {},
+    iconSize: {},
+    iconFill: {},
+    iconStroke: {},
+    iconStrokeWidth: {},
+    style: {},
+    status: {},
+    useStatusStyles: { type: Boolean },
+    maintainButtonSize: { type: Boolean },
+    animatePendingEllipsis: { type: Boolean },
+    width: {},
+    height: {},
+    type: {},
+    useSlot: { type: Boolean },
+    flipIcon: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { collapsed } = toRefs(props);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Button, mergeProps(props, {
+        class: ["hunter-button_dropdown", {
+          disabled: _ctx.disabled
+        }],
+        icon: "caret-down",
+        "icon-class": _ctx.iconClass,
+        "flip-icon": unref(collapsed) === true ? "down" : "up",
+        "icon-fill": _ctx.iconFill || "currentColor",
+        variant: _ctx.variant || "dropdown",
+        "icon-position": "left",
+        text: _ctx.text,
+        useSlot: _ctx.useSlot
+      }), {
+        default: withCtx(() => [
+          _ctx.useSlot ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16, ["class", "icon-class", "flip-icon", "icon-fill", "variant", "text", "useSlot"]);
+    };
+  }
+});
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "Dropdown",
   props: {
     placeholderText: {},
@@ -2961,6 +3052,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     className: {},
     disabled: { type: Boolean },
     scrollable: { type: Boolean },
+    buttonVariant: {},
     options: {},
     optionKey: {},
     collapsed: { type: Boolean },
@@ -2984,20 +3076,6 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const dropdownButtonText = ref(
       props.defaultText || props.placeholderText || props.options[0].name
     );
-    const isPlaceholderText = computed(() => {
-      return dropdownButtonText.value === props.placeholderText;
-    });
-    const buttonVariant = computed(() => {
-      if ((props == null ? void 0 : props.variant) === "small" && (props == null ? void 0 : props.hasBorder) === true) {
-        return "dropdown-small with-border";
-      } else if (props.variant === "small") {
-        return "dropdown-small";
-      } else if (props.hasBorder === true) {
-        return "dropdown with-border";
-      } else {
-        return "dropdown";
-      }
-    });
     watch(collapsed, (value) => {
       if (value === false) {
         return document.addEventListener("click", handleOutsideClick);
@@ -3048,26 +3126,17 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         ref_key: "dropdownWithButton",
         ref: dropdownWithButton
       }, [
-        createVNode(Button, {
+        createVNode(_sfc_main$9, {
           ref_key: "dropdownButton",
           ref: dropdownButton,
-          className: [
-            isPlaceholderText.value ? "placeholder" : "",
-            _ctx.hasBorder ? "has-border" : ""
-          ],
           id: buttonId.value,
-          onClick: toggleDropdown,
-          variant: buttonVariant.value,
+          variant: _ctx.buttonVariant || "dropdown",
+          collapsed: collapsed.value,
           disabled: _ctx.disabled,
-          icon: "caret-down",
-          iconClass: `h-4 w-4 transition duration-300 ease-in-out ${collapsed.value === true ? "scale-y-100" : "-scale-y-100"}`,
-          iconPosition: "right"
-        }, {
-          default: withCtx(() => [
-            createElementVNode("span", null, toDisplayString(dropdownButtonText.value), 1)
-          ]),
-          _: 1
-        }, 8, ["className", "id", "variant", "disabled", "iconClass"]),
+          placeholder: _ctx.placeholderText,
+          text: dropdownButtonText.value.toString(),
+          onClick: withModifiers(toggleDropdown, ["stop"])
+        }, null, 8, ["id", "variant", "collapsed", "disabled", "placeholder", "text"]),
         createElementVNode("div", {
           ref_key: "dropdownListEl",
           ref: dropdownListEl,
@@ -3088,7 +3157,76 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-386131cd"]]);
+const Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-95b0a2d2"]]);
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "ButtonDropdownColors",
+  props: {
+    currentColor: {},
+    collapsed: { type: Boolean },
+    variant: {},
+    disabled: { type: Boolean },
+    className: {},
+    iconClass: {},
+    iconHoverClass: {},
+    iconPendingClass: {},
+    iconSuccessClass: {},
+    iconErrorClass: {},
+    id: {},
+    text: {},
+    pendingText: {},
+    successText: {},
+    errorText: {},
+    icon: {},
+    pendingIcon: {},
+    successIcon: {},
+    errorIcon: {},
+    iconPosition: {},
+    iconWidth: {},
+    iconHeight: {},
+    iconSize: {},
+    iconFill: {},
+    iconStroke: {},
+    iconStrokeWidth: {},
+    style: {},
+    status: {},
+    useStatusStyles: { type: Boolean },
+    maintainButtonSize: { type: Boolean },
+    animatePendingEllipsis: { type: Boolean },
+    width: {},
+    height: {},
+    type: {},
+    useSlot: { type: Boolean },
+    flipIcon: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { collapsed } = toRefs(props);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$9, mergeProps(props, {
+        class: ["hunter-button_dropdown_colors", {
+          disabled: _ctx.disabled
+        }],
+        icon: "caret-down",
+        "icon-class": _ctx.iconClass,
+        "flip-icon": unref(collapsed) === true ? "down" : "up",
+        "icon-fill": _ctx.iconFill || "currentColor",
+        variant: _ctx.variant || "dropdown-with-icon",
+        "icon-position": "left",
+        useSlot: true
+      }), {
+        default: withCtx(() => [
+          createVNode(ColorIcon, {
+            color: _ctx.currentColor,
+            "has-border": true,
+            disabled: _ctx.disabled
+          }, null, 8, ["color", "disabled"])
+        ]),
+        _: 1
+      }, 16, ["class", "icon-class", "flip-icon", "icon-fill", "variant"]);
+    };
+  }
+});
+const ButtonDropdownColors = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-0031919c"]]);
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "DropdownColors",
   props: {
@@ -3117,31 +3255,18 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const collapsed = ref(true);
     const selectedItem = ref();
     const currentColor = ref(props.placeholderColor || "#ffffff");
-    const isPlaceholderColor = computed(() => {
-      return currentColor.value === props.placeholderColor;
-    });
     const buttonVariant = computed(() => {
-      if (props.variant === "small" && props.hasBorder === true) {
-        return "dropdown-small with-border";
-      } else if (props.variant === "small") {
-        return "dropdown-small";
-      } else if (props.hasBorder === true) {
-        return "dropdown with-border";
+      if (props.variant === "small") {
+        return "dropdown-with-icon-small";
       } else {
-        return "dropdown";
+        return "dropdown-with-icon";
       }
     });
     watch(collapsed, (value) => {
       if (value === false) {
-        return document.addEventListener(
-          "click",
-          (e) => handleOutsideClick(e)
-        );
+        return document.addEventListener("click", handleOutsideClick);
       } else {
-        document.removeEventListener(
-          "click",
-          (e) => handleOutsideClick(e)
-        );
+        return document.removeEventListener("click", handleOutsideClick);
       }
     });
     const toggleDropdown = () => {
@@ -3172,38 +3297,24 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       return collapsed.value;
     };
     onBeforeUnmount(() => {
-      return document.removeEventListener(
-        "click",
-        (e) => handleOutsideClick(e)
-      );
+      return document.removeEventListener("click", handleOutsideClick);
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["hunter-component hunter-color-dropdown-with-button", [_ctx.className, { variant: _ctx.variant, disabled: _ctx.disabled, "has-border": _ctx.hasBorder }]]),
+        class: normalizeClass(["hunter-component hcl-dropdown-with-button_colors", [_ctx.className, { variant: _ctx.variant, disabled: _ctx.disabled, "has-border": _ctx.hasBorder }]]),
         ref_key: "dropdown",
         ref: dropdown
       }, [
-        createVNode(Button, {
+        createVNode(ButtonDropdownColors, {
           ref_key: "dropdownButton",
           ref: dropdownButton,
-          class: "hunter-dropdown-selection-button",
-          className: isPlaceholderColor.value ? "placeholder" : "",
+          "current-color": currentColor.value,
           id: buttonId.value,
           variant: buttonVariant.value,
-          onClick: toggleDropdown,
-          icon: "caret-down",
-          iconClass: `h-4 w-4 transition duration-300 ease-in-out ${collapsed.value === true ? "scale-y-100" : "-scale-y-100"}`,
-          iconPosition: "right"
-        }, {
-          default: withCtx(() => [
-            createVNode(ColorIcon, {
-              color: currentColor.value,
-              "has-border": true,
-              disabled: _ctx.disabled
-            }, null, 8, ["color", "disabled"])
-          ]),
-          _: 1
-        }, 8, ["className", "id", "variant", "iconClass"]),
+          collapsed: collapsed.value,
+          disabled: _ctx.disabled,
+          onClick: withModifiers(toggleDropdown, ["stop"])
+        }, null, 8, ["current-color", "id", "variant", "collapsed", "disabled"]),
         createElementVNode("div", {
           ref_key: "dropdownListEl",
           ref: dropdownListEl,
@@ -3273,7 +3384,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   }
 });
 const FormInput = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-7e700c34"]]);
-const _withScopeId = (n) => (pushScopeId("data-v-417015dc"), n = n(), popScopeId(), n);
+const _withScopeId = (n) => (pushScopeId("data-v-b640ca47"), n = n(), popScopeId(), n);
 const _hoisted_1$3 = { class: "unit-selection-container" };
 const _hoisted_2$2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("span", { class: "font-medium" }, "Units", -1));
 const _hoisted_3$1 = { class: "unit-selection" };
@@ -3297,12 +3408,18 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     bypassPendingState: { type: Boolean },
     submitButtonText: {},
     cancelButtonText: {},
+    showCancelButton: { type: Boolean },
     successSubmitButtonDisabled: { type: Boolean }
   },
   emits: ["cancelSubmit", "submitForm"],
   setup(__props, { emit: __emit }) {
     const props = __props;
-    const { bypassPendingState, successSubmitButtonDisabled, submitButtonProps } = toRefs(props);
+    const {
+      bypassPendingState,
+      successSubmitButtonDisabled,
+      submitButtonProps,
+      cancelButtonProps
+    } = toRefs(props);
     const status = ref(props.submitStatus);
     const formInputs = ref(props.inputs);
     const unit = ref("en");
@@ -3317,7 +3434,6 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       });
     });
     const handleFormSubmit = (e) => {
-      console.log("GOT TO SUBMIT");
       e.preventDefault();
       status.value = "pending";
       const { isValid, inputs } = validateForm(formInputs.value);
@@ -3465,18 +3581,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           ])
         ]),
         createElementVNode("div", _hoisted_6, [
-          _ctx.cancelButtonText ? (openBlock(), createBlock(Button, {
-            key: 0,
+          createVNode(Button, mergeProps(unref(cancelButtonProps), {
             variant: "tertiary",
             className: "form-button",
+            text: _ctx.cancelButtonText,
             disabled: status.value === "pending" || status.value === "success",
             onClick: handleCancelFormClick
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(_ctx.cancelButtonText), 1)
-            ]),
-            _: 1
-          }, 8, ["disabled"])) : createCommentVNode("", true),
+          }), null, 16, ["text", "disabled"]),
           createVNode(Button, mergeProps({
             class: ["form-button form-button_submit", {
               "form-button_pointer-events-none": status.value === "success" && unref(successSubmitButtonDisabled) === true
@@ -3491,7 +3602,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const index = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-417015dc"]]);
+const index = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-b640ca47"]]);
 const _hoisted_1$2 = ["href"];
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "Link",
@@ -3621,7 +3732,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             }, null, 8, ["name"])) : createCommentVNode("", true),
             createElementVNode("h2", null, toDisplayString(_ctx.title), 1)
           ]),
-          _ctx.buttonType === "default" && _ctx.buttonText ? (openBlock(), createBlock(_sfc_main$g, {
+          _ctx.buttonType === "default" && _ctx.buttonText ? (openBlock(), createBlock(_sfc_main$i, {
             key: 0,
             text: _ctx.buttonText,
             type: _ctx.type,
@@ -3632,15 +3743,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             key: 1,
             variant: "icon",
             onClick: _cache[1] || (_cache[1] = ($event) => emit("close", informationEl.value)),
-            class: "hunter-toast-close-button"
-          }, {
-            default: withCtx(() => [
-              createVNode(Icon, {
-                name: "close",
-                class: "hunter-close-icon"
-              })
-            ]),
-            _: 1
+            class: "hunter-toast-close-button",
+            icon: "close",
+            "icon-class": "hunter-close-icon"
           })) : createCommentVNode("", true)
         ]),
         createElementVNode("p", {
@@ -3650,7 +3755,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Toast = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-7b042845"]]);
+const Toast = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-12bb1fc1"]]);
 const _hoisted_1 = { class: "hunter-search-input-label" };
 const _hoisted_2 = { class: "hunter-search-input-label-span" };
 const _hoisted_3 = ["placeholder"];
@@ -3669,7 +3774,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     optionKey: {},
     variant: {},
     hideSearchButton: { type: Boolean },
-    hideClearButton: { type: Boolean }
+    hideClearButton: { type: Boolean },
+    searchIconFill: {}
   },
   emits: ["search", "clearSearch", "focus"],
   setup(__props, { emit: __emit }) {
@@ -3789,7 +3895,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             class: "hunter-search-input-error transition duration-300 ease-in-out",
             ariaHidden: error.value ? false : true
           }, toDisplayString(error.value), 9, _hoisted_4),
-          createVNode(_sfc_main$a, {
+          createVNode(_sfc_main$c, {
             options: _ctx.options,
             "option-key": _ctx.optionKey || "name",
             collapsed: hideDropdown.value,
@@ -3806,44 +3912,38 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ref: searchButtonEl,
             class: "hunter-search-input-button",
             variant: "icon",
+            "icon-class": "hunter-search-input-icon",
+            icon: "search",
+            "icon-fill": _ctx.searchIconFill || "currentColor",
             onClick: handleSearchClick
-          }, {
-            default: withCtx(() => [
-              createVNode(unref(SearchIcon), { class: "hunter-search-input-icon" })
-            ]),
-            _: 1
-          }, 512)) : createCommentVNode("", true)
+          }, null, 8, ["icon-fill"])) : createCommentVNode("", true)
         ], 4),
         !_ctx.hideClearButton ? (openBlock(), createElementBlock("div", _hoisted_5, [
           createVNode(Button, {
             class: "underline clear-button",
             variant: "link",
+            text: "Clear",
             onClick: handleClearInput
-          }, {
-            default: withCtx(() => [
-              createTextVNode(" Clear ")
-            ]),
-            _: 1
           })
         ])) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const SearchInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6b77c59c"]]);
+const SearchInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-603385ac"]]);
 export {
   Button as HunterButton,
   ButtonIcon as HunterButtonIcon,
-  _sfc_main$g as HunterButtonToast,
-  _sfc_main$f as HunterCard,
-  _sfc_main$e as HunterCategoryCard,
+  _sfc_main$i as HunterButtonToast,
+  _sfc_main$h as HunterCard,
+  _sfc_main$g as HunterCategoryCard,
   Checkbox as HunterCheckbox,
   Chip as HunterChip,
   Dropdown as HunterDropdown,
   _sfc_main$6 as HunterDropdownColors,
   DropdownList as HunterDropdownList,
   DropdownListWithColorIcons as HunterDropdownListWithColorIcons,
-  _sfc_main$a as HunterDropdownListWithFilter,
+  _sfc_main$c as HunterDropdownListWithFilter,
   index as HunterForm,
   FormInput as HunterFormInput,
   Icon as HunterIcon,