@solvimon/solvimon-web 0.1.0-alpha.7 → 0.1.0-alpha.8

package/dist/TrialChip.vue.es-BHYbW8b6.mjs

@@ -1,759 +0,0 @@
-import { a as useIntl, _ as _sfc_main$9 } from "./component-dpA83LIN.mjs";
-import { i as isEqual, u as uniqueId, g as getRootTestId, _ as _sfc_main$6, a as _sfc_main$7 } from "./IconButton.vue.es-DNCwwH_j.mjs";
-import { a as formatAmount } from "./formatting.es-D5H_ySFv.mjs";
-import { computed, defineComponent, openBlock, createBlock, Transition, withCtx, renderSlot, ref, onMounted, watch, createElementBlock, useModel, useTemplateRef, toRefs, nextTick, Fragment, createElementVNode, mergeProps, unref, createSlots, createTextVNode, toDisplayString, createCommentVNode, normalizeClass, withDirectives, vModelText, createVNode, mergeModels } from "vue";
-import { _ as _sfc_main$8 } from "./FormMessage.vue.es-DFQXxiSC.mjs";
-import { i as isEmpty } from "./isEmpty.es-Bp1SbWFu.mjs";
-import { _ as _sfc_main$a } from "./Chip.vue.es-DcW2CjUA.mjs";
-function useTimePeriod() {
-  const { $t } = useIntl();
-  const map = computed(() => ({
-    DAY: {
-      literal: {
-        singular: $t({
-          defaultMessage: "day",
-          id: "time_period.day.singular",
-          description: "The singular form of the day time period"
-        }),
-        plural: $t({
-          defaultMessage: "days",
-          id: "time_period.day.plural",
-          description: "The plural form of the day time period"
-        })
-      },
-      full: $t({
-        defaultMessage: "daily",
-        id: "time_period.day.full",
-        description: "The full form of the day time period"
-      })
-    },
-    WEEK: {
-      literal: {
-        singular: $t({
-          defaultMessage: "week",
-          id: "time_period.week.singular",
-          description: "The singular form of the week time period"
-        }),
-        plural: $t({
-          defaultMessage: "weeks",
-          id: "time_period.week.plural",
-          description: "The plural form of the week time period"
-        })
-      },
-      full: $t({
-        defaultMessage: "weekly",
-        id: "time_period.week.full",
-        description: "The full form of the week time period"
-      })
-    },
-    MONTH: {
-      literal: {
-        singular: $t({
-          defaultMessage: "month",
-          id: "time_period.month.singular",
-          description: "The singular form of the month time period"
-        }),
-        plural: $t({
-          defaultMessage: "months",
-          id: "time_period.month.plural",
-          description: "The plural form of the month time period"
-        })
-      },
-      full: $t({
-        defaultMessage: "monthly",
-        id: "time_period.month.full",
-        description: "The full form of the month time period"
-      })
-    },
-    YEAR: {
-      literal: {
-        singular: $t({
-          defaultMessage: "year",
-          id: "time_period.year.singular",
-          description: "The singular form of the year time period"
-        }),
-        plural: $t({
-          defaultMessage: "years",
-          id: "time_period.year.plural",
-          description: "The plural form of the year time period"
-        })
-      },
-      full: $t({
-        defaultMessage: "yearly",
-        id: "time_period.year.full",
-        description: "The full form of the year time period"
-      })
-    }
-  }));
-  const formatTimePeriodLiteral = (timePeriodType, options = { singular: false }) => {
-    return map.value[timePeriodType].literal[options.singular ? "singular" : "plural"];
-  };
-  const formatTimePeriod = (timePeriod, options = {
-    short: false,
-    hideValueForExactPeriods: false,
-    singular: false
-  }) => {
-    const billingValue = timePeriod.value ?? 1;
-    const billingType = map.value[timePeriod.type].literal[options.singular || +billingValue === 1 ? "singular" : "plural"].toLowerCase();
-    return `${options.prefix && !options.short ? `${options.prefix} ` : ""}${options.hideValueForExactPeriods && billingValue === 1 ? billingType : `${billingValue} ${billingType}`}`;
-  };
-  return { map, formatTimePeriod, formatTimePeriodLiteral };
-}
-function getConfigFromPricingItem({
-  pricingItem,
-  currency,
-  billingPeriod
-}) {
-  var _a, _b, _c, _d, _e, _f;
-  if ((_a = pricingItem.pricing_currency_configs) == null ? void 0 : _a.length) {
-    const currencyConfig = getCurrencyConfigByCurrency(
-      pricingItem.pricing_currency_configs,
-      currency
-    );
-    if (((_b = currencyConfig == null ? void 0 : currencyConfig.billing_period_configs) == null ? void 0 : _b.length) && billingPeriod) {
-      const billingPeriodConfig = getConfigFromPricingItemBillingPeriodConfigs(
-        currencyConfig.billing_period_configs,
-        billingPeriod
-      );
-      if (billingPeriodConfig) {
-        return billingPeriodConfig;
-      }
-    }
-    if (currencyConfig) {
-      const fallbackCurrency = currencyConfig.fallback_currency;
-      if (fallbackCurrency) {
-        const fallbackCurrencyConfig = getConfigFromPricingItemCurrencyConfigs(
-          pricingItem.pricing_currency_configs,
-          fallbackCurrency
-        );
-        if (fallbackCurrencyConfig) {
-          return fallbackCurrencyConfig;
-        }
-      }
-      if ((_c = currencyConfig.configs) == null ? void 0 : _c.length) {
-        return currencyConfig.configs[0];
-      }
-    }
-  }
-  if ((_d = pricingItem.billing_period_configs) == null ? void 0 : _d.length) {
-    const billingPeriodConfig = getConfigFromPricingItemBillingPeriodConfigs(
-      pricingItem.billing_period_configs,
-      billingPeriod
-    );
-    if (billingPeriodConfig) {
-      return billingPeriodConfig;
-    }
-  }
-  if ((_e = pricingItem.configs) == null ? void 0 : _e.length) {
-    return (_f = pricingItem.configs) == null ? void 0 : _f[0];
-  }
-  return void 0;
-}
-const getCurrencyConfigByCurrency = (pricingCurrencyConfigs, currency) => {
-  return pricingCurrencyConfigs.find((config) => config.currency === currency);
-};
-const getConfigFromPricingItemCurrencyConfigs = (pricingCurrencyConfigs, currency) => {
-  var _a, _b;
-  return (_b = (_a = pricingCurrencyConfigs.find((config) => config.currency === currency)) == null ? void 0 : _a.configs) == null ? void 0 : _b[0];
-};
-const getConfigFromPricingItemBillingPeriodConfigs = (billingPeriodConfigs, billingPeriod) => {
-  var _a, _b;
-  return (_b = (_a = billingPeriodConfigs.find((config) => isEqual(config.billing_period, billingPeriod))) == null ? void 0 : _a.configs) == null ? void 0 : _b[0];
-};
-function usePricingItem({
-  currency,
-  billingPeriod
-} = {}) {
-  const { $t } = useIntl();
-  const { formatTimePeriod } = useTimePeriod();
-  const renderPricingForPricingItem = ({ pricingItem }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
-    const productItem = (_a = pricingItem.product_items) == null ? void 0 : _a[0];
-    const config = getConfigFromPricingItem({
-      pricingItem,
-      currency: currency == null ? void 0 : currency.value,
-      billingPeriod: billingPeriod == null ? void 0 : billingPeriod.value
-    });
-    if (!config) {
-      return $t({
-        defaultMessage: "Unsupported pricing",
-        id: "pricing_item_pricing.unsupported_pricing_error",
-        description: "Text displayed when the pricing item pricing is unsupported"
-      });
-    }
-    if ((productItem == null ? void 0 : productItem.model_type) === "PER_SEAT") {
-      return $t({
-        defaultMessage: "Per seat",
-        id: "pricing_item_pricing.per_seat",
-        description: "The pricing item pricing for a per seat pricing item"
-      });
-    }
-    if ((productItem == null ? void 0 : productItem.model_type) === "ONE_OFF" && ((_c = (_b = config.bands) == null ? void 0 : _b[0]) == null ? void 0 : _c.fixed_amount)) {
-      return formatAmount((_e = (_d = config.bands) == null ? void 0 : _d[0]) == null ? void 0 : _e.fixed_amount);
-    }
-    if (config.type === "FLAT" && ((_g = (_f = config.bands) == null ? void 0 : _f[0]) == null ? void 0 : _g.amount)) {
-      return $t(
-        {
-          defaultMessage: "{pricing} per {billing_period}",
-          id: "pricing_item_pricing",
-          description: "The pricing item pricing"
-        },
-        {
-          pricing: formatAmount(config.bands[0].amount),
-          billing_period: formatTimePeriod(
-            (config == null ? void 0 : config.billing_period) ?? { type: "MONTH", value: 1 },
-            {
-              short: true,
-              hideValueForExactPeriods: true
-            }
-          )
-        }
-      );
-    }
-    if (config.type === "FIXED" && ((_i = (_h = config.bands) == null ? void 0 : _h[0]) == null ? void 0 : _i.fixed_amount)) {
-      return $t(
-        {
-          defaultMessage: "{pricing} per {billing_period}",
-          id: "pricing_item_pricing",
-          description: "The pricing item pricing"
-        },
-        {
-          pricing: formatAmount((_k = (_j = config.bands) == null ? void 0 : _j[0]) == null ? void 0 : _k.fixed_amount),
-          billing_period: formatTimePeriod(
-            (config == null ? void 0 : config.billing_period) ?? { type: "MONTH", value: 1 },
-            {
-              short: true,
-              hideValueForExactPeriods: true
-            }
-          )
-        }
-      );
-    }
-    if (config.type === "TIERED") {
-      return $t({
-        defaultMessage: "Tiered pricing",
-        id: "pricing_item_pricing.tiered",
-        description: "The pricing item pricing for a tiered pricing item"
-      });
-    }
-    if (config.type === "TOP_TIERED") {
-      return $t({
-        defaultMessage: "Top tiered pricing",
-        id: "pricing_item_pricing.top_tiered",
-        description: "The pricing item pricing for a top tiered pricing item"
-      });
-    }
-    if (config.type === "STAIR_STEP") {
-      return $t({
-        defaultMessage: "Stair step pricing",
-        id: "pricing_item_pricing.stair_step",
-        description: "The pricing item pricing for a stair step pricing item"
-      });
-    }
-    if (config.type === "PASS_THROUGH") {
-      return $t({
-        defaultMessage: "Pass through pricing",
-        id: "pricing_item_pricing.pass_through",
-        description: "The pricing item pricing for a pass through pricing item"
-      });
-    }
-    if (config.type === "NONE") {
-      return $t({
-        defaultMessage: "Not billed",
-        id: "pricing_item_pricing.none",
-        description: "The pricing item pricing for a not billed pricing item"
-      });
-    }
-    if (config.type === "FLAT_TOP_UP") {
-      return $t({
-        defaultMessage: "Flat top up pricing",
-        id: "pricing_item_pricing.flat_top_up",
-        description: "The pricing item pricing for a flat top up pricing item"
-      });
-    }
-    if (config.type === "TIERED_TOP_UP") {
-      return $t({
-        defaultMessage: "Tiered top up pricing",
-        id: "pricing_item_pricing.tiered_top_up",
-        description: "The pricing item pricing for a tiered top up pricing item"
-      });
-    }
-    return $t({
-      defaultMessage: "Unsupported pricing",
-      id: "pricing_item_pricing.unsupported_pricing_error",
-      description: "Text displayed when the pricing item pricing is unsupported"
-    });
-  };
-  return { renderPricingForPricingItem };
-}
-const convertDateRangeToTimePeriod = (startDate, endDate) => {
-  const start = new Date(startDate);
-  const end = new Date(endDate);
-  const yearDiff = end.getFullYear() - start.getFullYear();
-  const testYearDate = new Date(start);
-  testYearDate.setFullYear(testYearDate.getFullYear() + yearDiff);
-  if (yearDiff > 0 && testYearDate.getTime() === end.getTime()) {
-    return { type: "YEAR", value: yearDiff };
-  }
-  const monthDiff = (end.getFullYear() - start.getFullYear()) * 12 + (end.getMonth() - start.getMonth());
-  const testMonthDate = new Date(start);
-  testMonthDate.setMonth(testMonthDate.getMonth() + monthDiff);
-  if (monthDiff > 0 && testMonthDate.getTime() === end.getTime()) {
-    return { type: "MONTH", value: monthDiff };
-  }
-  const dayDiff = Math.round((end.getTime() - start.getTime()) / (1e3 * 60 * 60 * 24));
-  if (dayDiff > 0 && dayDiff % 7 === 0) {
-    return { type: "WEEK", value: dayDiff / 7 };
-  }
-  return { type: "DAY", value: dayDiff };
-};
-const MARKER = "data-expand-transition-style";
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-  __name: "Expand",
-  setup(__props) {
-    const injectStylesIfNeeded = (element) => {
-      const root = element.getRootNode();
-      if (root instanceof ShadowRoot) {
-        const existing = root.querySelector(`style[${MARKER}]`);
-        if (existing) return;
-        const style = document.createElement("style");
-        style.setAttribute(MARKER, "true");
-        style.textContent = `
-            .expand-enter-active,
-            .expand-leave-active {
-                transition: height 300ms ease-in-out;
-                overflow: hidden;
-            }
-
-            .expand-enter,
-            .expand-leave-to {
-                height: 0;
-            }
-        `;
-        root.appendChild(style);
-      }
-    };
-    const handleEnter = (element) => {
-      injectStylesIfNeeded(element);
-      const htmlElement = element;
-      const width = getComputedStyle(htmlElement).width;
-      htmlElement.style.width = width;
-      htmlElement.style.position = "absolute";
-      htmlElement.style.visibility = "hidden";
-      htmlElement.style.height = "auto";
-      const height = getComputedStyle(htmlElement).height;
-      htmlElement.style.width = "";
-      htmlElement.style.position = "";
-      htmlElement.style.visibility = "";
-      htmlElement.style.height = "0";
-      requestAnimationFrame(() => {
-        htmlElement.style.height = height;
-      });
-    };
-    const handleAfterEnter = (element) => {
-      const htmlElement = element;
-      htmlElement.style.height = "auto";
-    };
-    const handleLeave = (element) => {
-      injectStylesIfNeeded(element);
-      const htmlElement = element;
-      const height = getComputedStyle(htmlElement).height;
-      htmlElement.style.height = height;
-      requestAnimationFrame(() => {
-        htmlElement.style.height = "0";
-      });
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(Transition, {
-        name: "expand",
-        onEnter: handleEnter,
-        onLeave: handleLeave,
-        onAfterEnter: handleAfterEnter
-      }, {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      });
-    };
-  }
-});
-const rangeDefaultClasses = "w-full appearance-none cursor-pointer";
-const rangeSizeClasses = {
-  sm: "range-sm",
-  md: "range-md",
-  lg: "range-lg",
-  xl: "range-xl"
-};
-function useRangeClasses(props) {
-  const rangeClasses = computed(
-    () => `${rangeDefaultClasses} ${rangeSizeClasses[props.size.value]}`
-  );
-  return { rangeClasses };
-}
-const rangeInputStyles = "/* Base - transparent background so track styles show through */\ninput[type='range'] {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    width: 100%;\n    background: transparent;\n    margin: 0.5rem 0;\n}\n\n/* Thumb - white with explicit border (required for Firefox) */\ninput[type='range']::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 1rem;\n    height: 1rem;\n    border: 2px solid rgb(229 231 235);\n    border-radius: 50%;\n    background: #ffffff;\n    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);\n    cursor: pointer;\n    transition: all 0.1s ease-in-out;\n}\n\ninput[type='range']:disabled::-webkit-slider-thumb {\n    cursor: not-allowed;\n}\n\ninput[type='range']::-moz-range-thumb {\n    -moz-appearance: none;\n    appearance: none;\n    width: 1rem;\n    height: 1rem;\n    border: 2px solid rgb(229 231 235);\n    border-radius: 50%;\n    background: #ffffff;\n    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);\n    cursor: pointer;\n    transition: all 0.1s ease-in-out;\n}\n\ninput[type='range']:disabled::-moz-range-thumb {\n    cursor: not-allowed;\n}\n\ninput[type='range']:not(:disabled):hover::-webkit-slider-thumb {\n    box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary-200) 50%, transparent);\n}\n\ninput[type='range']:not(:disabled):hover::-moz-range-thumb {\n    box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary-200) 50%, transparent);\n}\n\ninput[type='range']:not(:disabled):active::-webkit-slider-thumb {\n    box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-primary-200) 50%, transparent);\n}\n\ninput[type='range']:not(:disabled):active::-moz-range-thumb {\n    box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-primary-200) 50%, transparent);\n}\n\n/* Track - WebKit */\ninput[type='range']::-webkit-slider-runnable-track {\n    width: 100%;\n    height: 0.5rem;\n    cursor: pointer;\n    background: linear-gradient(\n        to right,\n        var(--color-primary-600) var(--range-percentage, 0%),\n        #e0e5eb var(--range-percentage, 0%)\n    );\n    border-radius: 0.25rem;\n}\n\ninput[type='range']:disabled::-webkit-slider-runnable-track {\n    background: #e0e5eb;\n    cursor: not-allowed;\n}\n\n/* Track - Mozilla */\ninput[type='range']::-moz-range-track {\n    width: 100%;\n    height: 0.5rem;\n    cursor: pointer;\n    background: linear-gradient(\n        to right,\n        var(--color-primary-600) var(--range-percentage, 0%),\n        #e0e5eb var(--range-percentage, 0%)\n    );\n    border-radius: 0.25rem;\n}\n\ninput[type='range']:disabled::-moz-range-track {\n    background: #e0e5eb;\n    cursor: not-allowed;\n}\n\n/* Size: sm */\ninput[type='range'].range-sm::-webkit-slider-thumb {\n    width: 0.8rem;\n    height: 0.8rem;\n    margin-top: -0.2rem;\n}\n\ninput[type='range'].range-sm::-moz-range-thumb {\n    width: 0.8rem;\n    height: 0.8rem;\n}\n\ninput[type='range'].range-sm::-webkit-slider-runnable-track {\n    height: 0.4rem;\n    border-radius: 0.2rem;\n}\n\ninput[type='range'].range-sm::-moz-range-track {\n    height: 0.4rem;\n    border-radius: 0.2rem;\n}\n\n/* Size: md */\ninput[type='range'].range-md::-webkit-slider-thumb {\n    width: 1rem;\n    height: 1rem;\n    margin-top: -0.25rem;\n}\n\ninput[type='range'].range-md::-moz-range-thumb {\n    width: 1rem;\n    height: 1rem;\n}\n\ninput[type='range'].range-md::-webkit-slider-runnable-track {\n    height: 0.5rem;\n    border-radius: 0.25rem;\n}\n\ninput[type='range'].range-md::-moz-range-track {\n    height: 0.5rem;\n    border-radius: 0.25rem;\n}\n\n/* Size: lg */\ninput[type='range'].range-lg::-webkit-slider-thumb {\n    width: 1.4rem;\n    height: 1.4rem;\n    margin-top: -0.35rem;\n}\n\ninput[type='range'].range-lg::-moz-range-thumb {\n    width: 1.4rem;\n    height: 1.4rem;\n}\n\ninput[type='range'].range-lg::-webkit-slider-runnable-track {\n    height: 0.7rem;\n    border-radius: 0.35rem;\n}\n\ninput[type='range'].range-lg::-moz-range-track {\n    height: 0.7rem;\n    border-radius: 0.35rem;\n}\n\n/* Size: xl */\ninput[type='range'].range-xl::-webkit-slider-thumb {\n    width: 1.8rem;\n    height: 1.8rem;\n    margin-top: -0.5rem;\n}\n\ninput[type='range'].range-xl::-moz-range-thumb {\n    width: 1.8rem;\n    height: 1.8rem;\n}\n\ninput[type='range'].range-xl::-webkit-slider-runnable-track {\n    height: 0.9rem;\n    border-radius: 0.45rem;\n}\n\ninput[type='range'].range-xl::-moz-range-track {\n    height: 0.9rem;\n    border-radius: 0.45rem;\n}\n";
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  __name: "CustomStyles",
-  props: {
-    css: {},
-    marker: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const containerRef = ref();
-    function injectStyles(css) {
-      if (!css || !containerRef.value) return;
-      const root = containerRef.value.getRootNode();
-      if (!(root instanceof ShadowRoot)) {
-        return;
-      }
-      const existing = root.querySelector(`style[${props.marker}]`);
-      if (existing) return;
-      const style = document.createElement("style");
-      style.setAttribute(props.marker, "true");
-      style.textContent = css;
-      root.appendChild(style);
-    }
-    onMounted(() => {
-      if (props.css) injectStyles(props.css);
-    });
-    watch(
-      () => props.css,
-      (css) => {
-        if (!css || !containerRef.value) return;
-        const root = containerRef.value.getRootNode();
-        if (!(root instanceof ShadowRoot)) return;
-        const style = root.querySelector(`style[${props.marker}]`);
-        if (style) style.textContent = css;
-        else injectStyles(css);
-      }
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "containerRef",
-        ref: containerRef
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 512);
-    };
-  }
-});
-const _hoisted_1 = ["data-testid"];
-const _hoisted_2 = ["step", "min", "max", "name", "disabled"];
-const _hoisted_3 = {
-  key: 0,
-  class: "mt-2 text-sm text-gray-500"
-};
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  __name: "RangeInput",
-  props: /* @__PURE__ */ mergeModels({
-    disabled: { type: Boolean, default: false },
-    label: { default: void 0 },
-    labelAfter: { type: Boolean, default: false },
-    max: { default: 100 },
-    min: { default: 0 },
-    name: {},
-    required: { type: Boolean, default: false },
-    rootClass: { default: "" },
-    size: { default: "md" },
-    steps: { default: 1 },
-    variant: { default: "default" },
-    error: {},
-    inputWrapperClass: {}
-  }, {
-    "modelValue": { required: true },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
-  setup(__props) {
-    const props = __props;
-    const model = useModel(__props, "modelValue");
-    const inputRef = useTemplateRef("inputRef");
-    function setRangeBackground() {
-      const el = inputRef.value;
-      if (!el) return;
-      const value = model.value ?? props.min;
-      const percentage = (Number(value) - props.min) / (props.max - props.min) * 100;
-      el.style.setProperty("--range-percentage", `${percentage}%`);
-    }
-    const { rangeClasses } = useRangeClasses(toRefs(props));
-    const stepButtonSize = computed(() => {
-      switch (props.size) {
-        case "xl":
-          return "lg";
-        case "lg":
-          return "md";
-        case "md":
-          return "sm";
-        default:
-          return props.size;
-      }
-    });
-    const name = props.name ?? uniqueId("range-input-");
-    const onPrevious = computed(
-      () => model.value != null && model.value > props.min ? () => {
-        model.value = (model.value ?? 0) - props.steps;
-      } : void 0
-    );
-    const onNext = computed(
-      () => model.value != null && model.value < props.max ? () => {
-        model.value = (model.value ?? 0) + props.steps;
-      } : void 0
-    );
-    const showStepButtons = computed(
-      () => ["stepped", "stepped-contained", "stepped-ghost"].includes(props.variant)
-    );
-    const isContained = computed(() => props.variant === "stepped-contained");
-    const buttonVariant = computed(
-      () => isContained.value || props.variant === "stepped-ghost" ? "ghost" : "outline"
-    );
-    watch([model, inputRef], () => nextTick(setRangeBackground), { immediate: true });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("div", mergeProps(_ctx.$attrs, {
-          class: ["flex flex-col gap-2", { rootClass: __props.rootClass, "flex-col-reverse": __props.labelAfter }],
-          "data-testid": unref(getRootTestId)(unref(name))
-        }), [
-          __props.label ? (openBlock(), createBlock(_sfc_main$6, {
-            key: 0,
-            for: unref(name),
-            required: __props.required
-          }, createSlots({
-            suffix: withCtx(() => [
-              renderSlot(_ctx.$slots, "label-suffix")
-            ]),
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(__props.label) + " ", 1)
-            ]),
-            _: 2
-          }, [
-            _ctx.$slots.tooltip ? {
-              name: "tooltip",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "tooltip")
-              ]),
-              key: "0"
-            } : void 0
-          ]), 1032, ["for", "required"])) : createCommentVNode("", true),
-          createElementVNode("div", {
-            class: normalizeClass({ flex: showStepButtons.value, "border rounded bg-white": isContained.value })
-          }, [
-            showStepButtons.value ? (openBlock(), createBlock(unref(_sfc_main$7), {
-              key: 0,
-              size: stepButtonSize.value,
-              variant: buttonVariant.value,
-              icon: "remove",
-              square: "",
-              color: "gray",
-              disabled: !onPrevious.value || __props.disabled,
-              onMousedown: _cache[0] || (_cache[0] = ($event) => {
-                var _a;
-                return (_a = onPrevious.value) == null ? void 0 : _a.call(onPrevious);
-              })
-            }, null, 8, ["size", "variant", "disabled"])) : createCommentVNode("", true),
-            createElementVNode("div", {
-              class: normalizeClass([
-                {
-                  "flex grow px-3 items-center": showStepButtons.value,
-                  "border-x": isContained.value
-                },
-                __props.inputWrapperClass
-              ])
-            }, [
-              withDirectives(createElementVNode("input", {
-                ref_key: "inputRef",
-                ref: inputRef,
-                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => model.value = $event),
-                step: __props.steps,
-                min: __props.min,
-                max: __props.max,
-                name: unref(name),
-                disabled: __props.disabled,
-                type: "range",
-                class: normalizeClass(unref(rangeClasses)),
-                onInput: setRangeBackground
-              }, null, 42, _hoisted_2), [
-                [vModelText, model.value]
-              ])
-            ], 2),
-            showStepButtons.value ? (openBlock(), createBlock(unref(_sfc_main$7), {
-              key: 1,
-              size: stepButtonSize.value,
-              variant: buttonVariant.value,
-              icon: "add",
-              square: "",
-              color: "gray",
-              disabled: !onNext.value || __props.disabled,
-              onMousedown: _cache[2] || (_cache[2] = ($event) => {
-                var _a;
-                return (_a = onNext.value) == null ? void 0 : _a.call(onNext);
-              })
-            }, null, 8, ["size", "variant", "disabled"])) : createCommentVNode("", true)
-          ], 2)
-        ], 16, _hoisted_1),
-        createVNode(_sfc_main$4, {
-          marker: "range-input-styles",
-          css: unref(rangeInputStyles)
-        }, null, 8, ["css"]),
-        !unref(isEmpty)(__props.error) || _ctx.$slots.helper ? (openBlock(), createElementBlock("div", _hoisted_3, [
-          !unref(isEmpty)(__props.error) ? (openBlock(), createBlock(_sfc_main$8, {
-            key: 0,
-            message: __props.error
-          }, null, 8, ["message"])) : _ctx.$slots.helper ? renderSlot(_ctx.$slots, "helper", { key: 1 }) : createCommentVNode("", true)
-        ])) : createCommentVNode("", true)
-      ], 64);
-    };
-  }
-});
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  __name: "RangeInputExtended",
-  props: /* @__PURE__ */ mergeModels({
-    options: { default: () => [] },
-    label: {},
-    name: {},
-    required: { type: Boolean, default: false },
-    rootClass: {},
-    size: { default: "md" },
-    variant: {},
-    error: {},
-    disabled: { type: Boolean },
-    labelAfter: { type: Boolean },
-    inputWrapperClass: {}
-  }, {
-    "modelValue": { required: true },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
-  setup(__props) {
-    const props = __props;
-    const model = useModel(__props, "modelValue");
-    const derivedModel = computed({
-      get: () => {
-        const index = model.value ? props.options.findIndex((option) => option === model.value) : 0;
-        return index >= 0 ? index : 0;
-      },
-      set: (value) => {
-        model.value = props.options[value];
-        return props.options.findIndex((option) => option === model.value);
-      }
-    });
-    const optionsCount = computed(() => props.options.length ?? 1);
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$3, mergeProps({
-        modelValue: derivedModel.value,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => derivedModel.value = $event)
-      }, _ctx.$attrs, {
-        variant: __props.variant,
-        "label-after": __props.labelAfter,
-        min: 0,
-        max: optionsCount.value - 1,
-        steps: 1,
-        label: __props.label,
-        name: __props.name,
-        required: __props.required,
-        "root-class": __props.rootClass,
-        size: __props.size,
-        "input-wrapper-class": __props.inputWrapperClass
-      }), {
-        "label-suffix": withCtx(() => [
-          renderSlot(_ctx.$slots, "label-suffix")
-        ]),
-        _: 3
-      }, 16, ["modelValue", "variant", "label-after", "max", "label", "name", "required", "root-class", "size", "input-wrapper-class"]);
-    };
-  }
-});
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "PricingGroupRangeInput",
-  props: /* @__PURE__ */ mergeModels({
-    modelValue: {},
-    options: {},
-    name: {},
-    variant: { default: "stepped-contained" },
-    size: {}
-  }, {
-    "modelValue": {},
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
-  setup(__props) {
-    const props = __props;
-    const model = useModel(__props, "modelValue");
-    const label = computed(() => {
-      var _a;
-      return (_a = props.options.find((option) => option.value === model.value)) == null ? void 0 : _a.label;
-    });
-    const rangeOptions = computed(() => props.options.map((option) => option.value));
-    const pricing = computed(
-      () => {
-        var _a;
-        return (_a = props.options.find((option) => option.value === model.value)) == null ? void 0 : _a.description;
-      }
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$2), mergeProps({
-        modelValue: model.value,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event)
-      }, _ctx.$attrs, {
-        label: label.value,
-        "label-after": "",
-        variant: __props.variant,
-        name: __props.name,
-        options: rangeOptions.value,
-        size: __props.size,
-        "input-wrapper-class": "border-l border-r",
-        required: ""
-      }), {
-        "label-suffix": withCtx(() => [
-          createVNode(unref(_sfc_main$9), {
-            tag: "span",
-            variant: "body-xs",
-            shade: "lighter"
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(pricing.value), 1)
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      }, 16, ["modelValue", "label", "variant", "name", "options", "size"]);
-    };
-  }
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "TrialChip",
-  props: {
-    trialPeriod: {},
-    size: { default: "sm" }
-  },
-  setup(__props) {
-    const props = __props;
-    const { formatTimePeriod } = useTimePeriod();
-    const label = computed(() => {
-      if (typeof props.trialPeriod === "string") {
-        return props.trialPeriod;
-      }
-      return `${formatTimePeriod(props.trialPeriod, { short: true, singular: true })} trial`;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$a), {
-        color: "primary",
-        size: __props.size
-      }, {
-        default: withCtx(() => [
-          createTextVNode(toDisplayString(label.value), 1)
-        ]),
-        _: 1
-      }, 8, ["size"]);
-    };
-  }
-});
-export {
-  _sfc_main$5 as _,
-  _sfc_main as a,
-  usePricingItem as b,
-  convertDateRangeToTimePeriod as c,
-  _sfc_main$1 as d,
-  useTimePeriod as u
-};