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

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

@@ -0,0 +1,759 @@
+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
+};