@resee-movies/nuxt-ux 0.9.0 → 0.11.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@resee-movies/nuxt-ux",
   "configKey": "ux",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.0"

package/dist/module.mjs

@@ -108,6 +108,7 @@ async function importCSS(nuxt = useNuxt(), options) {
 function importModules(nuxt) {
   const NuxtFonts = {
     defaults: {
+      provider: "google",
       families: [
         {
           name: "Archivo",
@@ -179,7 +180,8 @@ function importModules(nuxt) {
   };
   return {
     "@nuxt/fonts": NuxtFonts,
-    "@primevue/nuxt-module": Primevue
+    "@primevue/nuxt-module": Primevue,
+    "@nuxtjs/device": {}
   };
 }
 

package/dist/runtime/components/Menu.vue

@@ -53,9 +53,9 @@
 
 <script setup>
 import { isString } from "@resee-movies/utilities/strings/is-string";
-import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
 import PrimeMenu, {} from "primevue/menu";
 import { computed, ref, useAttrs, useId, useSlots } from "vue";
+import { useReseeBreakpoints } from "../composables/use-resee-breakpoints";
 import { blockBodyScroll } from "../utils/dom";
 import IconTextPair from "./IconTextPair.vue";
 import { TeleportId } from "../constants";
@@ -67,7 +67,7 @@ const slots = useSlots();
 const menuId = useId();
 const menu = ref();
 const visible = ref(false);
-const isSmall = useBreakpoints(breakpointsTailwind).smallerOrEqual("sm");
+const isSmall = useReseeBreakpoints().smallerOrEqual("sm");
 const props = defineProps({
   model: { type: Array, required: true },
   prefixText: { type: String, required: false, default: void 0 },

package/dist/runtime/components/form/FormField.vue

@@ -4,10 +4,20 @@
     :as       = "props.is"
     :name     = "props.name"
     :resolver = "validatorFunction"
-    :class    = "['input-field', props.class, { disabled: isDisabled, readonly: isReadonly, required: props.required }]"
+    :class    = "[
+  props.class,
+  {
+    'input-field': props.is !== 'fieldset',
+    'input-fieldset': props.is === 'fieldset',
+    disabled: isDisabled,
+    readonly: isReadonly,
+    required: props.required
+  }
+]"
   >
     <FormLabelInputPair
       :input-id       = "inputId"
+      :label-is       = "props.is === 'fieldset' ? 'legend' : void 0"
       :label-id       = "labelId"
       :label-text     = "labelText"
       :label-position = "props.labelPosition"

package/dist/runtime/components/form/FormFieldBuilder.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="@container">
-    <div class="grid grid-cols-1 gap-x-4 gap-y-6 @lg:grid-cols-2 @lg:gap-y-7">
+    <div class="grid grid-cols-1 gap-x-4 gap-y-6 sm:@lg:grid-cols-2 sm:@lg:gap-y-7">
       <template v-for="(field, index) of props.fields" :key="field.name ?? index">
         <Component
           :is    = "getComponent(field)"
           v-bind = "field"
           :class = "{
-  '@lg:col-span-2': field.width !== 'half'
+  'sm:@lg:col-span-2': field.width !== 'half'
 }"
         />
       </template>
@@ -25,6 +25,7 @@ import CheckboxField from "./FormFieldCheckbox.vue";
 import SelectField from "./FormFieldSelect.vue";
 import SelectButtonField from "./FormFieldSelectButton.vue";
 import SubmitButton from "./FormSubmitButton.vue";
+import RadioGroup from "./FormFieldRadioGroup.vue";
 import TextField from "./FormFieldText.vue";
 import TextareaField from "./FormFieldTextarea.vue";
 import ToggleSwitchField from "./FormFieldToggleSwitch.vue";
@@ -40,6 +41,8 @@ function getComponent(field) {
       return SelectField;
     case "select-button":
       return SelectButtonField;
+    case "radio":
+      return RadioGroup;
     case "text":
       return TextField;
     case "textarea":
@@ -49,7 +52,7 @@ function getComponent(field) {
     case "turnstile":
       return TurnstileField;
     case "submit":
-      return h(EmptyDiv, { class: "text-end" }, h(SubmitButton));
+      return h(EmptyDiv, { class: "text-end" }, { default: () => h(SubmitButton) });
     default:
       return "div";
   }

package/dist/runtime/components/form/FormFieldBuilder.vue.d.ts

@@ -1,4 +1,5 @@
 import type { FormFieldCheckboxProps } from './FormFieldCheckbox.vue.js';
+import type { FormFieldRadioGroupProps } from './FormFieldRadioGroup.vue.js';
 import type { FormFieldSelectProps } from './FormFieldSelect.vue.js';
 import type { FormFieldSelectButtonProps } from './FormFieldSelectButton.vue.js';
 import type { FormFieldTextProps } from './FormFieldText.vue.js';
@@ -18,6 +19,9 @@ export interface SelectField extends FormFieldSelectProps, CommonOptions {
 export interface SelectButtonField extends FormFieldSelectButtonProps, CommonOptions {
     fieldType: 'select-button';
 }
+export interface RadioGroup extends FormFieldRadioGroupProps, CommonOptions {
+    fieldType: 'radio';
+}
 export interface TextField extends FormFieldTextProps, CommonOptions {
     fieldType: 'text';
 }
@@ -33,7 +37,7 @@ export interface TurnstileField extends FormFieldTurnstileProps, CommonOptions {
 export interface SubmitButton extends FormSubmitButtonProps, CommonOptions {
     fieldType: 'submit';
 }
-export type FormFieldBuilderOption = CheckboxField | SelectField | SelectButtonField | TextField | TextareaField | ToggleSwitchField | TurnstileField | SubmitButton;
+export type FormFieldBuilderOption = CheckboxField | SelectField | SelectButtonField | RadioGroup | TextField | TextareaField | ToggleSwitchField | TurnstileField | SubmitButton;
 export interface FormFieldBuilderProps {
     fields: undefined | FormFieldBuilderOption[];
 }

package/dist/runtime/components/form/FormFieldRadioGroup.vue

@@ -0,0 +1,65 @@
+<template>
+  <FormField v-bind="props" is="fieldset" :validator="validatorFunction">
+    <template #label>
+      <slot name="label" />
+    </template>
+
+    <template #default="{ inputId, messageId, disabled, readonly, invalid }">
+      <template v-for="(option, index) of options" :key="`${inputId}_${index}`">
+        <FormLabelInputPair
+          :label-position = "props.optionLabelPosition"
+          :disabled       = "disabled"
+          :readonly       = "readonly"
+          :input-id       = "`${inputId}_${index}`"
+          :label-text     = "utils.getOptionLabel(option)"
+        >
+          <template #input>
+            <PrimeRadioButton
+              :value                     = "utils.getOptionValue(option)"
+              :input-id                  = "`${inputId}_${index}`"
+              :disabled                  = "disabled || utils.getOptionDisabled(option) || readonly"
+              :invalid                   = "invalid"
+              :pt:input:readonly         = "readonly"
+              :pt:input:aria-describedby = "messageId"
+              class                      = "input-group"
+            />
+          </template>
+        </FormLabelInputPair>
+      </template>
+    </template>
+  </FormField>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import PrimeRadioButton from "primevue/radiobutton";
+import { computed } from "vue";
+import { useOptionListMethods } from "../../utils/form";
+import { createBooleanValidator } from "../../utils/validation";
+import FormField from "./FormField.vue";
+import FormLabelInputPair from "./FormLabelInputPair.vue";
+const props = defineProps({
+  options: { type: Array, required: true },
+  optionLabel: { type: String, required: false, default: void 0 },
+  optionValue: { type: String, required: false, default: void 0 },
+  optionDisabled: { type: String, required: false, default: void 0 },
+  optionLabelPosition: { type: String, required: false, default: "after" },
+  name: { type: String, required: true },
+  label: { type: String, required: false },
+  is: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  fauxLabel: { type: Boolean, required: false },
+  labelSrOnly: { type: Boolean, required: false },
+  labelPosition: { type: String, required: false },
+  class: { type: null, required: false }
+});
+const utils = useOptionListMethods(props);
+const validatorFunction = computed(() => {
+  return () => createBooleanValidator({ required: props.required });
+});
+</script>

package/dist/runtime/components/form/FormFieldRadioGroup.vue.d.ts

@@ -0,0 +1,19 @@
+import type { FormFieldProps } from './FormField.vue.js';
+import type { FormLabelInputPairProps } from './FormLabelInputPair.vue.js';
+export interface FormFieldRadioGroupProps extends Omit<FormFieldProps, 'validator'> {
+    options: unknown[];
+    optionLabel?: string;
+    optionValue?: string;
+    optionDisabled?: string;
+    optionLabelPosition?: FormLabelInputPairProps['labelPosition'];
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldRadioGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldRadioGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/form/FormLabelInputPair.vue

@@ -1,9 +1,9 @@
 <template>
   <div :class="['input-label-pair', `label-${props.labelPosition}`]">
     <Component
-      :is    = "props.fauxLabel ? 'span' : 'label'"
+      :is    = "labelTagName"
       :id    = "props.labelId"
-      :for   = "props.fauxLabel ? void 0 : props.inputId"
+      :for   = "labelTagName === 'label' ? props.inputId : void 0"
       :class = "[
   'input-label',
   {
@@ -29,14 +29,19 @@
 </script>
 
 <script setup>
+import { computed } from "vue";
 const props = defineProps({
   inputId: { type: String, required: false },
   labelId: { type: String, required: false },
   labelText: { type: String, required: false },
   labelPosition: { type: String, required: false, default: "above" },
   labelSrOnly: { type: Boolean, required: false, default: false },
+  labelIs: { type: String, required: false, default: void 0 },
   required: { type: Boolean, required: false, default: false },
   disabled: { type: Boolean, required: false, default: false },
   fauxLabel: { type: Boolean, required: false, default: false }
 });
+const labelTagName = computed(
+  () => props.labelIs ?? (props.fauxLabel ? "span" : "label")
+);
 </script>

package/dist/runtime/components/form/FormLabelInputPair.vue.d.ts

@@ -1,9 +1,11 @@
+import type { HintedString } from '../../types/index.js';
 export interface FormLabelInputPairProps {
     inputId?: string;
     labelId?: string;
     labelText?: string;
     labelPosition?: 'above' | 'below' | 'before' | 'after';
     labelSrOnly?: boolean;
+    labelIs?: HintedString<'label' | 'legend' | 'span'>;
     required?: boolean;
     disabled?: boolean;
     fauxLabel?: boolean;

package/dist/runtime/components/form/element/FormElementSelectButton.vue

@@ -5,16 +5,16 @@
     :aria-labelledby  = "props.ariaLabelledby"
     :aria-describedby = "props.ariaDescribedby"
   >
-    <template v-for="(option, index) of props.options" :key="getOptionRenderKey(option) ?? index">
+    <template v-for="(option, index) of props.options" :key="utils.getOptionRenderKey(option) ?? index">
       <ToggleButton
         class       = "input-button"
         severity    = "unset"
-        :pressed    = "getSelectedOptionIndex(option) !== -1"
-        :text       = "props.iconOnly ? void 0 : getOptionLabel(option)"
-        :icon       = "getOptionIcon(option)"
+        :pressed    = "utils.getOptionIndex(option, value) !== -1"
+        :text       = "props.iconOnly ? void 0 : utils.getOptionLabel(option)"
+        :icon       = "utils.getOptionIcon(option)"
         :disabled   = "getOptionDisabled(option)"
-        :aria-label = "props.iconOnly ? getOptionLabel(option) : void 0"
-        :tooltip    = "props.iconOnly ? getOptionLabel(option) : void 0"
+        :aria-label = "props.iconOnly ? utils.getOptionLabel(option) : void 0"
+        :tooltip    = "props.iconOnly ? utils.getOptionLabel(option) : void 0"
         @click      = "(pressed) => handleToggleChange(option, pressed)"
       />
     </template>
@@ -32,9 +32,7 @@ export class ChangeEvent extends Event {
 </script>
 
 <script setup>
-import { equals, resolveFieldData } from "@primeuix/utils/object";
-import { isNumber } from "@resee-movies/utilities/numbers/is-number";
-import { isString } from "@resee-movies/utilities/strings/is-string";
+import { useOptionListMethods } from "../../../utils/form";
 import ToggleButton from "../../ToggleButton.vue";
 const props = defineProps({
   options: { type: Array, required: true },
@@ -53,58 +51,32 @@ const props = defineProps({
 });
 const emits = defineEmits(["change"]);
 const value = defineModel("value", { type: null, ...{ default: null } });
-function getOptionLabel(option) {
-  return String(props.optionLabel ? resolveFieldData(option, props.optionLabel) : option);
-}
-function getOptionValue(option) {
-  return props.optionValue ? resolveFieldData(option, props.optionValue) : option;
-}
-function getOptionIcon(option) {
-  return props.optionIcon ? String(resolveFieldData(option, props.optionIcon)) : void 0;
-}
+const utils = useOptionListMethods(props);
 function getOptionDisabled(option) {
-  if (props.disabled || props.readonly) {
-    return true;
-  }
-  if (props.optionDisabled && resolveFieldData(option, props.optionDisabled)) {
+  if (props.disabled || props.readonly || utils.value.getOptionDisabled(option)) {
     return true;
   }
   if (props.multiple) {
     const limit = props.selectionLimit ?? Number.POSITIVE_INFINITY;
     const length = Array.isArray(value.value) ? value.value.length : 0;
-    if (limit <= length && getSelectedOptionIndex(option) === -1) {
+    if (limit <= length && utils.value.getOptionIndex(option, value) === -1) {
       return true;
     }
   }
   return false;
 }
-function getOptionRenderKey(option) {
-  const result = props.optionDataKey ? resolveFieldData(option, props.optionDataKey) : getOptionLabel(option);
-  return isString(result) || isNumber(result) ? result : void 0;
-}
-function getSelectedOptionIndex(option) {
-  if (!value.value) {
-    return -1;
-  }
-  const equalityKey = props.optionValue ? void 0 : props.optionDataKey;
-  const optionValue = getOptionValue(option);
-  if (Array.isArray(value.value)) {
-    return value.value.findIndex((entry) => equals(entry, optionValue, equalityKey));
-  }
-  return equals(value.value, optionValue, equalityKey) ? 0 : -1;
-}
 function handleToggleChange(option, pressed) {
   if (props.multiple) {
-    const selectedIndex = getSelectedOptionIndex(option);
+    const selectedIndex = utils.value.getOptionIndex(option, value);
     const selectedItems = Array.isArray(value.value) ? [...value.value] : [];
     if (selectedIndex === -1) {
-      selectedItems.push(getOptionValue(option));
+      selectedItems.push(utils.value.getOptionValue(option));
     } else {
       selectedItems.splice(selectedIndex, 1);
     }
     value.value = selectedItems.length === 0 ? null : selectedItems;
   } else {
-    value.value = pressed ? getOptionValue(option) : null;
+    value.value = pressed ? utils.value.getOptionValue(option) : null;
   }
   emits("change", new ChangeEvent(value.value));
 }

package/dist/runtime/components/form/element/FormElementSelectOptions.vue

@@ -14,7 +14,7 @@
     :show-clear         = "props.showClear"
     :show-toggle-all    = "showSelectAllCheckbox"
     :filter             = "showFilter"
-    :filter-placeholder = "props.filterPlaceholder ?? locale.form.filterPlaceholder"
+    :filter-placeholder = "props.filterPlaceholder ?? reseeUx.locale.form.filterPlaceholder"
     :loading            = "props.loading"
     :pt                 = "props.multiple ? multiSelectPassthroughProps : selectPassthroughProps"
     :append-to          = "TeleportId"
@@ -58,11 +58,11 @@
     </template>
 
     <template #emptyfilter>
-      <span>{{ locale.form.filterNoResults }}</span>
+      <span>{{ reseeUx.locale.form.filterNoResults }}</span>
     </template>
 
     <template #empty>
-      <span>{{ locale.form.noOptionsAvailable }}</span>
+      <span>{{ reseeUx.locale.form.noOptionsAvailable }}</span>
     </template>
 
     <template #option="{ option, selected, index }" v-if="slots.option">
@@ -76,14 +76,14 @@ import {} from "primevue/select";
 </script>
 
 <script setup>
-import { equals, resolveFieldData } from "@primeuix/utils/object";
-import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
 import PrimeMultiSelect from "primevue/multiselect";
 import PrimeSelect from "primevue/select";
 import { computed, useSlots } from "vue";
+import { useReseeBreakpoints } from "../../../composables/use-resee-breakpoints";
 import { useReseeUx } from "../../../composables/use-resee-ux";
 import { TeleportId } from "../../../constants";
 import { blockBodyScroll } from "../../../utils/dom";
+import { useOptionListMethods } from "../../../utils/form";
 import { swapStringPlaceholders } from "../../../utils/string";
 import Button from "../../Button.vue";
 import Icon from "../../Icon.vue";
@@ -156,8 +156,9 @@ const props = defineProps({
   unstyled: { type: Boolean, required: false }
 });
 const slots = useSlots();
-const { locale } = useReseeUx();
-const isSmall = useBreakpoints(breakpointsTailwind).smallerOrEqual("sm");
+const utils = useOptionListMethods(props);
+const reseeUx = useReseeUx();
+const isSmall = useReseeBreakpoints().smallerOrEqual("sm");
 const showFilter = computed(() => {
   return props.showOptionFilter ?? (props.options?.length ?? 0) > 20;
 });
@@ -219,7 +220,7 @@ const multiSelectPassthroughProps = computed(() => {
       },
       input: {
         "id": `${props.inputId}_select_all`,
-        "aria-label": locale.form.selectAllOptions
+        "aria-label": reseeUx.locale.form.selectAllOptions
       }
     },
     pcOptionCheckbox: {
@@ -229,30 +230,19 @@ const multiSelectPassthroughProps = computed(() => {
     }
   };
 });
-function getOptionValue(option) {
-  return props.optionValue ? resolveFieldData(option, props.optionValue) : option;
-}
-function getOptionLabel(option) {
-  return props.optionLabel ? resolveFieldData(option, props.optionLabel) : option;
-}
-function findOptionByValue(value) {
-  return props.options?.find(
-    (option) => equals(getOptionValue(option), value, props.optionValue ? void 0 : props.dataKey)
-  );
-}
 function toLabel(value) {
   if (!value) {
     return void 0;
   }
   if (!Array.isArray(value)) {
-    return getOptionLabel(findOptionByValue(value));
+    return utils.value.getOptionLabel(utils.value.getOptionByValue(value, props.options));
   }
   if (value.length === 0) {
     return void 0;
   }
   if (value.length === 1) {
-    return getOptionLabel(findOptionByValue(value[0]));
+    return utils.value.getOptionLabel(utils.value.getOptionByValue(value[0], props.options));
   }
-  return swapStringPlaceholders(locale.form.numOptionsSelected, { count: value.length });
+  return swapStringPlaceholders(reseeUx.locale.form.numOptionsSelected, { count: value.length });
 }
 </script>

package/dist/runtime/composables/use-query-parameters.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Two-way bind to URL query parameters.
+ */
+export declare function useQueryParameters<D extends QueryParamDefinitionMap>(params: D): UseQueryParametersReturn<D>;
+/**
+ * Configuration for a single URL query parameter.
+ */
+export type QueryParamDefinition = {
+    /**
+     * The data type of the query parameter's value. Since this object needs
+     * to be defined at runtime, primitive constructors are used to indicate
+     * the data type.
+     */
+    type: StringConstructor | [StringConstructor] | BooleanConstructor;
+    /**
+     * A value that will be used if no query parameter is set.
+     */
+    defaultValue?: unknown;
+};
+/**
+ * An object wherein the keys are URL query parameter names, and the values at
+ * each key determine the (de)serialization of that parameter (and other behaviors).
+ */
+export type QueryParamDefinitionMap = {
+    [K: string]: QueryParamDefinition;
+};
+/**
+ * A mapping from runtime-available primitive constructors, to TS typings which
+ * correspond to the different data types of URL query parameters that this
+ * composable supports.
+ */
+export type QueryParamValueType<T extends QueryParamDefinition['type']> = T extends StringConstructor ? string | undefined : T extends [StringConstructor] ? string[] | undefined : T extends BooleanConstructor ? boolean | undefined : never;
+/**
+ * The return type of the {@link useQueryParameters} composable.
+ */
+export type UseQueryParametersReturn<M extends QueryParamDefinitionMap> = {
+    [K in keyof M]: QueryParamValueType<M[K]['type']>;
+};

package/dist/runtime/composables/use-query-parameters.js

@@ -0,0 +1,132 @@
+import { useRoute, useRouter } from "#imports";
+import { areEqual } from "@resee-movies/utilities/objects/are-equal";
+import { isString } from "@resee-movies/utilities/strings/is-string";
+import { slugify } from "@resee-movies/utilities/strings/slugify";
+import { customRef, nextTick, onScopeDispose, reactive, toValue, watch } from "vue";
+export function useQueryParameters(params) {
+  const router = useRouter();
+  const queue = getQueueForRouter(router);
+  const refs = {};
+  for (const [name, definition] of Object.entries(params)) {
+    refs[name] = getQueryRef({
+      slug: slugify(name),
+      type: definition.type,
+      setCallback: queue.add,
+      defaultValue: definition.defaultValue
+    });
+  }
+  return reactive(refs);
+}
+const _queue = /* @__PURE__ */ new WeakMap();
+function getQueueForRouter(router) {
+  if (!_queue.has(router)) {
+    _queue.set(router, /* @__PURE__ */ new Map());
+  }
+  const routerQueue = _queue.get(router);
+  const add = async (slug, value) => {
+    routerQueue.set(slug, value);
+    await nextTick();
+    if (routerQueue.size === 0) {
+      return;
+    }
+    const newValues = Object.fromEntries(routerQueue.entries());
+    routerQueue.clear();
+    const { params, query, hash } = router.currentRoute.value;
+    await router.replace({
+      params,
+      query: { ...query, ...newValues },
+      hash
+    });
+  };
+  return { add };
+}
+function getQueryRef(config) {
+  const { slug, type, setCallback, defaultValue } = config;
+  if (Array.isArray(type) && type[0] === String) {
+    const defaultVal = Array.isArray(defaultValue) && defaultValue.length > 0 ? defaultValue : void 0;
+    return makeTrackingRef({
+      slug,
+      defaultValue: defaultVal,
+      setCallback,
+      getTransform: toStringArrayOrUndefined,
+      setTransform: toStringArrayOrUndefined
+    });
+  }
+  if (type === String) {
+    const defaultVal = isString(defaultValue) ? defaultValue : void 0;
+    return makeTrackingRef({
+      slug,
+      defaultValue: defaultVal,
+      setCallback,
+      getTransform: toStringOrUndefined,
+      setTransform: toStringOrUndefined
+    });
+  }
+  if (type === Boolean) {
+    const defaultVal = typeof defaultValue === "boolean" ? true : void 0;
+    return makeTrackingRef({
+      slug,
+      defaultValue: defaultVal,
+      setCallback,
+      getTransform: toBooleanOrUndefined,
+      setTransform: (value) => value ? null : void 0
+    });
+  }
+  return void 0;
+}
+function toStringOrUndefined(value) {
+  return isString(value, { withContent: true }) ? value : void 0;
+}
+function toStringArrayOrUndefined(value) {
+  if (Array.isArray(value)) {
+    return value.length ? value : void 0;
+  }
+  return isString(value) ? [value] : void 0;
+}
+function toBooleanOrUndefined(value) {
+  if (isString(value)) {
+    return value.toLowerCase() === "true" || value === "" ? true : void 0;
+  }
+  return value === null ? true : void 0;
+}
+function makeTrackingRef(config) {
+  const route = useRoute();
+  let queryVal = route.query[config.slug];
+  let refTrigger = () => {
+  };
+  onScopeDispose(() => {
+    queryVal = void 0;
+  }, true);
+  const ref = customRef((track, trigger) => {
+    refTrigger = trigger;
+    return {
+      get() {
+        track();
+        const transformed = config.getTransform(queryVal);
+        return transformed === void 0 ? toValue(config.defaultValue) : transformed;
+      },
+      set(val) {
+        const transformed = config.setTransform(val);
+        if (areEqual(transformed, queryVal)) {
+          return;
+        }
+        const defaultVal = toValue(config.defaultValue);
+        queryVal = transformed === defaultVal ? void 0 : transformed;
+        config.setCallback(config.slug, queryVal);
+        trigger();
+      }
+    };
+  });
+  watch(
+    () => route.query[config.slug],
+    (newValue) => {
+      if (areEqual(config.getTransform(newValue), queryVal)) {
+        return;
+      }
+      queryVal = newValue;
+      refTrigger();
+    },
+    { flush: "sync" }
+  );
+  return ref;
+}

package/dist/runtime/composables/use-resee-breakpoints.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Preconfigures the Vueuse {@link useBreakpoints} composable for use
+ * with ReSee projects. If available, the user-agent is used in SSR to
+ * try and determine the correct break to report.
+ */
+export declare function useReseeBreakpoints(): Record<"sm" | "md" | "lg" | "xl" | "2xl", import("vue").ComputedRef<boolean>> & {
+    greaterOrEqual: (k: import("vue").MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "2xl">) => import("vue").ComputedRef<boolean>;
+    smallerOrEqual: (k: import("vue").MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "2xl">) => import("vue").ComputedRef<boolean>;
+    greater(k: import("vue").MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "2xl">): import("vue").ComputedRef<boolean>;
+    smaller(k: import("vue").MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "2xl">): import("vue").ComputedRef<boolean>;
+    between(a: import("vue").MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "2xl">, b: import("vue").MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "2xl">): import("vue").ComputedRef<boolean>;
+    isGreater(k: import("vue").MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "2xl">): boolean;
+    isGreaterOrEqual(k: import("vue").MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "2xl">): boolean;
+    isSmaller(k: import("vue").MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "2xl">): boolean;
+    isSmallerOrEqual(k: import("vue").MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "2xl">): boolean;
+    isInBetween(a: import("vue").MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "2xl">, b: import("vue").MaybeRefOrGetter<"sm" | "md" | "lg" | "xl" | "2xl">): boolean;
+    current: () => import("vue").ComputedRef<("sm" | "md" | "lg" | "xl" | "2xl")[]>;
+    active(): import("vue").ComputedRef<"" | "sm" | "md" | "lg" | "xl" | "2xl">;
+};

package/dist/runtime/composables/use-resee-breakpoints.js

@@ -0,0 +1,16 @@
+import { useDevice } from "#imports";
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
+export function useReseeBreakpoints() {
+  let ssrWidth = void 0;
+  if (import.meta.server) {
+    const device = useDevice();
+    if (device.isTablet) {
+      ssrWidth = breakpointsTailwind.md;
+    } else if (device.isMobile) {
+      ssrWidth = breakpointsTailwind.sm;
+    } else {
+      ssrWidth = breakpointsTailwind.lg;
+    }
+  }
+  return useBreakpoints(breakpointsTailwind, { ssrWidth });
+}

package/dist/runtime/theme/css/brand/form.css

@@ -1,3 +1 @@
-@layer components{.input-label{display:block;-webkit-user-select:none;-moz-user-select:none;user-select:none}.input-label.required:after{color:var(--color-danger);content:"*";display:inline-block;margin-inline-start:--spacing(1)}.input-label.disabled{cursor:not-allowed;opacity:.6}.input-label-pair{display:flex;flex-direction:column;gap:--spacing(1);margin-block-end:--spacing(1)}.input-label-pair.label-after,.input-label-pair.label-before{align-items:center;flex-direction:row;gap:--spacing(3)}.input-label-pair.label-after .input-label,.input-label-pair.label-below .input-label{order:2}.input-validation{color:var(--color-danger);font-size:var(--text-sm);height:0;line-clamp:2}.input-field{display:flex;flex-direction:column}.input-control{flex-grow:1;padding:--spacing(2) --spacing(3)}.input-control::-moz-placeholder{color:var(--color-global-foreground-accent)}.input-control .placeholder,.input-control::placeholder{color:var(--color-global-foreground-accent)}.input-group{align-items:center;display:flex}.input-group.input-group-loading{cursor:wait}.input-group .input-group-addon{color:var(--color-global-foreground-accent);padding:--spacing(1.5) --spacing(2)}.input-group button.input-group-addon{cursor:pointer}.input-group .input-control{outline:none}.input-control:where(:not(.input-group .input-control)),.input-group{background-color:var(--color-global-background);border-radius:--spacing(1);cursor:pointer;outline:solid 2px var(--color-background-scale-e);overflow:clip;transition:color,background-color,outline-color,box-shadow;transition-duration:calc(var(--default-transition-duration)*2);width:100%}.input-control:where(:not(.input-group .input-control)):where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))),.input-group:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)){cursor:default}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))))),.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))))){cursor:not-allowed;opacity:.6}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):focus-within,.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):hover,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):focus-within,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):hover{outline-color:var(--color-global-foreground-accent)}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):focus-within,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):focus-within{box-shadow:var(--shadow-heavy)}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):not(:has(>input[type=checkbox]),.input-button-bar):focus-within,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):not(:has(>input[type=checkbox]),.input-button-bar):focus-within{background-color:var(--color-background-scale-b)}.input-group:where(:has(input[type=checkbox])){flex-shrink:0;height:1.5rem;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:1.5rem}
-
-    /* !important is to overwrite what gets attached to i-* icons in the utility layer */.input-group:where(:has(input[type=checkbox])) span[class^=i-],.input-group:where(:has(input[type=checkbox])) svg{display:block!important;font-size:1rem;height:1rem!important;line-height:1;margin-left:.25rem;width:1rem!important}.input-group:where(:has(input[type=checkbox])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:100%;inset:0;opacity:0;position:absolute;z-index:10}.input-group:where(:has(input[type=checkbox])) input:not(:disabled,[readonly]){cursor:pointer}.input-group:where(:has(input[type=checkbox])).toggle-switch{border-radius:1rem;width:2.5rem}.input-group:where(:has(input[type=checkbox])).toggle-switch:has(:checked) .slider:before{background-color:var(--color-global-foreground);transform:translateX(1rem)}.input-group:where(:has(input[type=checkbox])).toggle-switch .slider{border-radius:1rem;inset:0;position:absolute}.input-group:where(:has(input[type=checkbox])).toggle-switch .slider:before{background-color:var(--color-background-scale-d);border-radius:var(--radius-full);box-shadow:var(--shadow-md);content:"";height:1rem;left:.25rem;position:absolute;top:.25rem;transition:transform,background-color;transition-duration:var(--default-transition-duration);width:1rem}.input-menu .input-control,.input-menu .input-group{background-color:transparent}.input-menu .input-group:where(:has(input[type=checkbox])){height:1.2rem;width:1.2rem}.input-menu .input-group:where(:has(input[type=checkbox])) span[class^=i-],.input-menu .input-group:where(:has(input[type=checkbox])) svg{margin-left:.1rem;margin-top:-.1rem}[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):focus-within,[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):hover{outline-color:var(--color-background-scale-e)!important}[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):focus-within input,[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):hover input{cursor:not-allowed!important}.input-menu-header{align-items:center;display:flex;gap:--spacing(2)}.input-menu-header .input-menu-filter{align-items:center;color:var(--color-global-foreground-accent);display:flex;flex-grow:1;transition:color var(--default-transition-duration) var(--default-transition-timing-function)}.input-menu-header .input-menu-filter input{flex-grow:1;outline:none;padding:--spacing(.5) 0}.input-menu-header .input-menu-filter input::-moz-placeholder{color:var(--color-global-foreground-accent)}.input-menu-header .input-menu-filter input::placeholder{color:var(--color-global-foreground-accent)}.input-menu-header .input-menu-filter:focus-within{color:var(--color-global-foreground)}.input-button{cursor:pointer;padding:--spacing(1.5) --spacing(2);transition:background-color var(--default-transition-duration) var(--default-transition-timing-function)}.input-button[aria-pressed=true]{background-color:var(--color-background-scale-f)}.input-button:where(.readonly .input-button){cursor:default}.input-button:where(:disabled,.disabled .input-button):not(:where(.readonly .input-button)){cursor:not-allowed;opacity:.6}.input-button:not(:disabled,:where(.disabled .input-button),:where(.readonly .input-button),[aria-pressed=true]):focus-visible,.input-button:not(:disabled,:where(.disabled .input-button),:where(.readonly .input-button),[aria-pressed=true]):hover{background-color:var(--color-background-scale-b)}.input-button-bar{gap:--spacing(.5);padding:--spacing(.5);width:-moz-fit-content;width:fit-content}.input-button-bar button:first-child{border-bottom-left-radius:var(--radius-sm);border-top-left-radius:var(--radius-sm)}.input-button-bar button:last-child{border-bottom-right-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}}
+@layer components{.input-label{display:block;-webkit-user-select:none;-moz-user-select:none;user-select:none}.input-label.required:after{color:var(--color-danger);content:"*";display:inline-block;margin-inline-start:--spacing(1)}.input-label.disabled{cursor:not-allowed;opacity:.6}.input-label:not(fieldset .input-label,.label-before .input-label,.label-after .input-label),.input-label:where(fieldset legend.input-label){font-size:var(--text-lg)}.input-label-pair{display:flex;flex-direction:column;gap:--spacing(1);margin-block-end:--spacing(1)}.input-label-pair.label-after,.input-label-pair.label-before{align-items:center;flex-direction:row;gap:--spacing(3)}.input-label-pair.label-after .input-label,.input-label-pair.label-below .input-label{order:2}.input-validation{color:var(--color-danger);font-size:var(--text-sm);height:0;line-clamp:2}.input-field{display:flex;flex-direction:column}.input-control{flex-grow:1;padding:--spacing(2) --spacing(3)}.input-control::-moz-placeholder{color:var(--color-global-foreground-accent)}.input-control .placeholder,.input-control::placeholder{color:var(--color-global-foreground-accent)}.input-group{align-items:center;display:flex}.input-group.input-group-loading{cursor:wait}.input-group .input-group-addon{color:var(--color-global-foreground-accent);padding:--spacing(1.5) --spacing(2)}.input-group button.input-group-addon{cursor:pointer}.input-group .input-control{outline:none}.input-control:where(:not(.input-group .input-control)),.input-group{background-color:var(--color-global-background);border-radius:--spacing(1);cursor:pointer;outline:solid 2px var(--color-background-scale-e);overflow:clip;transition:color,background-color,outline-color,box-shadow;transition-duration:calc(var(--default-transition-duration)*2);width:100%}.input-control:where(:not(.input-group .input-control)):where(input[type=text],input[type=email],input[type=url],textarea),.input-group:where(input[type=text],input[type=email],input[type=url],textarea){cursor:text}.input-control:where(:not(.input-group .input-control)):where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))),.input-group:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)){cursor:default}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))))),.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))))){cursor:not-allowed;opacity:.6}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):focus-within,.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):hover,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):focus-within,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):hover{outline-color:var(--color-global-foreground-accent)}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):focus-within,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):focus-within{box-shadow:var(--shadow-heavy)}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):not(:has(>input[type=checkbox]),.input-button-bar):focus-within,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):not(:has(>input[type=checkbox]),.input-button-bar):focus-within{background-color:var(--color-background-scale-b)}.input-group:where(:has(input[type=checkbox])),.input-group:where(:has(input[type=radio])){flex-shrink:0;height:1.5rem;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:1.5rem}.input-group:where(:has(input[type=checkbox])):has(input[type=radio]),.input-group:where(:has(input[type=radio])):has(input[type=radio]){border-radius:var(--radius-full);height:1.2rem;width:1.2rem}.input-group:where(:has(input[type=checkbox])):has(input[type=radio])>div,.input-group:where(:has(input[type=radio])):has(input[type=radio])>div{border-radius:var(--radius-full);height:.7rem;left:.25rem;position:absolute;top:.25rem;transition:box-shadow,background-color;transition-duration:var(--default-transition-duration);width:.7rem}.input-group:where(:has(input[type=checkbox])):has(input[type=radio]):has(:checked)>div,.input-group:where(:has(input[type=radio])):has(input[type=radio]):has(:checked)>div{background-color:var(--color-global-foreground);box-shadow:var(--shadow-md)}.input-group:where(:has(input[type=checkbox])) span[class^=i-],.input-group:where(:has(input[type=checkbox])) svg,.input-group:where(:has(input[type=radio])) span[class^=i-],.input-group:where(:has(input[type=radio])) svg{display:block!important;font-size:1rem;height:1rem!important;line-height:1;margin-left:.25rem;width:1rem!important}.input-group:where(:has(input[type=checkbox])) input,.input-group:where(:has(input[type=radio])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:100%;inset:0;opacity:0;position:absolute;z-index:10}.input-group:where(:has(input[type=checkbox])) input:not(:disabled,[readonly]),.input-group:where(:has(input[type=radio])) input:not(:disabled,[readonly]){cursor:pointer}.input-group:where(:has(input[type=checkbox])).toggle-switch,.input-group:where(:has(input[type=radio])).toggle-switch{border-radius:1rem;width:2.5rem}.input-group:where(:has(input[type=checkbox])).toggle-switch:has(:checked) .slider:before,.input-group:where(:has(input[type=radio])).toggle-switch:has(:checked) .slider:before{background-color:var(--color-global-foreground);transform:translateX(1rem)}.input-group:where(:has(input[type=checkbox])).toggle-switch .slider,.input-group:where(:has(input[type=radio])).toggle-switch .slider{border-radius:1rem;inset:0;position:absolute}.input-group:where(:has(input[type=checkbox])).toggle-switch .slider:before,.input-group:where(:has(input[type=radio])).toggle-switch .slider:before{background-color:var(--color-background-scale-d);border-radius:var(--radius-full);box-shadow:var(--shadow-md);content:"";height:1rem;left:.25rem;position:absolute;top:.25rem;transition:transform,background-color;transition-duration:var(--default-transition-duration);width:1rem}.input-menu .input-control,.input-menu .input-group{background-color:transparent}.input-menu .input-group:where(:has(input[type=checkbox])){height:1.2rem;width:1.2rem}.input-menu .input-group:where(:has(input[type=checkbox])) span[class^=i-],.input-menu .input-group:where(:has(input[type=checkbox])) svg{margin-left:.1rem;margin-top:-.1rem}[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):focus-within,[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):hover{outline-color:var(--color-background-scale-e)!important}[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):focus-within input,[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):hover input{cursor:not-allowed!important}.input-menu-header{align-items:center;display:flex;gap:--spacing(2)}.input-menu-header .input-menu-filter{align-items:center;color:var(--color-global-foreground-accent);display:flex;flex-grow:1;transition:color var(--default-transition-duration) var(--default-transition-timing-function)}.input-menu-header .input-menu-filter input{flex-grow:1;outline:none;padding:--spacing(.5) 0}.input-menu-header .input-menu-filter input::-moz-placeholder{color:var(--color-global-foreground-accent)}.input-menu-header .input-menu-filter input::placeholder{color:var(--color-global-foreground-accent)}.input-menu-header .input-menu-filter:focus-within{color:var(--color-global-foreground)}.input-button{cursor:pointer;padding:--spacing(1.5) --spacing(2);transition:background-color var(--default-transition-duration) var(--default-transition-timing-function)}.input-button[aria-pressed=true]{background-color:var(--color-background-scale-f)}.input-button:where(.readonly .input-button){cursor:default}.input-button:where(:disabled,.disabled .input-button):not(:where(.readonly .input-button)){cursor:not-allowed;opacity:.6}.input-button:not(:disabled,:where(.disabled .input-button),:where(.readonly .input-button),[aria-pressed=true]):focus-visible,.input-button:not(:disabled,:where(.disabled .input-button),:where(.readonly .input-button),[aria-pressed=true]):hover{background-color:var(--color-background-scale-b)}.input-button-bar{gap:--spacing(.5);padding:--spacing(.5);width:-moz-fit-content;width:fit-content}.input-button-bar button:first-child{border-bottom-left-radius:var(--radius-sm);border-top-left-radius:var(--radius-sm)}.input-button-bar button:last-child{border-bottom-right-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}}

package/dist/runtime/theme/css/brand/gradient.css

@@ -1 +1 @@
-@layer utilities{.text-resee-linear-gradient,.text-resee-linear-step-gradient{-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}.text-resee-linear-gradient{background-image:linear-gradient(to left,var(--colorscale-resee-linear));@variant dark{background-image:linear-gradient(to left,var(--colorscale-resee-lite-linear))}}.text-resee-linear-step-gradient{background-image:linear-gradient(to left,var(--colorscale-resee-linear-step));@variant dark{background-image:linear-gradient(to left,var(--colorscale-resee-lite-linear-step))}}.resee-linear-gradient{background-image:linear-gradient(to left,var(--colorscale-resee-linear))}.resee-linear-step-gradient{background-image:linear-gradient(to left,var(--colorscale-resee-linear-step))}.resee-light-linear-gradient{background-image:linear-gradient(to left,var(--colorscale-resee-lite-linear))}.resee-light-linear-step-gradient{background-image:linear-gradient(to left,var(--colorscale-resee-lite-linear-step))}.resee-conic-gradient{background-image:conic-gradient(from 0deg,var(--colorscale-resee-conic))}.resee-light-conic-gradient{background-image:conic-gradient(from 0deg,var(--colorscale-resee-lite-conic))}}
+@utility resee-text-mask{-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}@utility resee-bg-linear-*{--resee-angle:calc(--value(integer) * 1deg);--resee-angle:--value(--gradient-direction-*);--resee-gradient:var(--colorscale-resee-linear);background-image:linear-gradient(var(--resee-angle),var(--resee-gradient));@variant dark{--resee-gradient:var(--colorscale-resee-lite-linear)}}@utility resee-bg-conic-*{--resee-angle:from calc(--value(integer) * 1deg);--resee-gradient:var(--colorscale-resee-conic);background-image:conic-gradient(var(--resee-angle),var(--resee-gradient));@variant dark{--resee-gradient:var(--colorscale-resee-lite-conic)}}

package/dist/runtime/theme/css/brand/theme.css

@@ -1 +1 @@
-@custom-variant dark (&:where(.dark, .dark *));@variant dark{--color-global-background:var(--color-global-background-dark);--color-global-background-accent:var(--color-global-background-accent-dark);--color-global-foreground:var(--color-global-foreground-dark);--color-global-foreground-accent:var(--color-global-foreground-accent-dark);--color-invert-global-background:var(--color-global-background-lite);--color-invert-global-background-accent:var(--color-global-background-accent-lite);--color-invert-global-foreground:var(--color-global-foreground-lite);--color-invert-global-foreground-accent:var(--color-global-foreground-accent-lite);--color-background-scale-a:var(--color-background-scale-a-dark);--color-background-scale-b:var(--color-background-scale-b-dark);--color-background-scale-c:var(--color-background-scale-c-dark);--color-background-scale-d:var(--color-background-scale-d-dark);--color-background-scale-e:var(--color-background-scale-e-dark);--color-background-scale-f:var(--color-background-scale-f-dark);--color-background-scale-g:var(--color-background-scale-g-dark);--color-foreground-scale-a:var(--color-foreground-scale-a-dark);--color-foreground-scale-b:var(--color-foreground-scale-b-dark);--color-foreground-scale-c:var(--color-foreground-scale-c-dark);--color-foreground-scale-d:var(--color-foreground-scale-d-dark);--color-foreground-scale-e:var(--color-foreground-scale-e-dark);--color-foreground-scale-f:var(--color-foreground-scale-f-dark);--color-foreground-scale-g:var(--color-foreground-scale-g-dark);--color-invert-background-scale-a:var(--color-background-scale-a-lite);--color-invert-background-scale-b:var(--color-background-scale-b-lite);--color-invert-background-scale-c:var(--color-background-scale-c-lite);--color-invert-background-scale-d:var(--color-background-scale-d-lite);--color-invert-background-scale-e:var(--color-background-scale-e-lite);--color-invert-background-scale-f:var(--color-background-scale-f-lite);--color-invert-background-scale-g:var(--color-background-scale-g-lite);--color-invert-foreground-scale-a:var(--color-foreground-scale-a-lite);--color-invert-foreground-scale-b:var(--color-foreground-scale-b-lite);--color-invert-foreground-scale-c:var(--color-foreground-scale-c-lite);--color-invert-foreground-scale-d:var(--color-foreground-scale-d-lite);--color-invert-foreground-scale-e:var(--color-foreground-scale-e-lite);--color-invert-foreground-scale-f:var(--color-foreground-scale-f-lite);--color-invert-foreground-scale-g:var(--color-foreground-scale-g-lite);--color-info:var(--color-info-dark);--color-info-emphasis:var(--color-info-emphasis-dark);--color-info-contrast:var(--color-info-contrast-dark);--color-help:var(--color-help-dark);--color-help-emphasis:var(--color-help-emphasis-dark);--color-help-contrast:var(--color-help-contrast-dark);--color-success:var(--color-success-dark);--color-success-emphasis:var(--color-success-emphasis-dark);--color-success-contrast:var(--color-success-contrast-dark);--color-warning:var(--color-warning-dark);--color-warning-emphasis:var(--color-warning-emphasis-dark);--color-warning-contrast:var(--color-warning-contrast-dark);--color-danger:var(--color-danger-dark);--color-danger-emphasis:var(--color-danger-emphasis-dark);--color-danger-contrast:var(--color-danger-contrast-dark);--shadow-heavy:var(--shadow-heavy-dark);--shadow-heavy-right:var(--shadow-heavy-right-dark);--shadow-heavy-left:var(--shadow-heavy-left-dark);--shadow-heavy-top:var(--shadow-heavy-top-dark)}@theme{--font-sans:"Archivo",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--zero-width-space:"​";--radius-full:9999px;--custom-accent-color:unset;--icon-size-small:--spacing(3.5);--icon-size-medium:--spacing(4);--icon-size-large:--spacing(6);--icon-size-jumbo:--spacing(12);--aspect-poster:2/3;--aspect-tall:4/5;--color-surface-0:oklch(100.0% 0 0);--color-surface-50:oklch(97.31% 0 0);--color-surface-100:oklch(92.80% 0 0);--color-surface-200:oklch(86.07% 0 0);--color-surface-300:oklch(75.72% 0 0);--color-surface-400:oklch(62.68% 0 0);--color-surface-500:oklch(53.48% 0 0);--color-surface-600:oklch(47.84% 0 0);--color-surface-700:oklch(42.76% 0 0);--color-surface-800:oklch(39.04% 0 0);--color-surface-850:oklch(37.53% 0 0);--color-surface-900:oklch(36.00% 0 0);--color-surface-925:oklch(28.50% 0 0);--color-surface-950:oklch(20.02% 0 0);--color-primary-50:oklch(97.94% 0.0171 103.14);--color-primary-100:oklch(94.93% 0.0459 101.86);--color-primary-200:oklch(89.80% 0.0854 99.1);--color-primary-300:oklch(83.23% 0.1222 96.48);--color-primary-400:oklch(76.65% 0.1387 91.06);--color-primary-500:oklch(71.00% 0.1307 86.56);--color-primary-600:oklch(61.31% 0.1146 77.38);--color-primary-700:oklch(50.50% 0.0943 67.44);--color-primary-800:oklch(44.38% 0.0782 62.58);--color-primary-900:oklch(39.94% 0.0661 58.15);--color-primary-950:oklch(27.10% 0.0457 53.29);--color-resee-red:oklch(57.47% 0.2229 28.19);--color-resee-orange:oklch(67.79% 0.201 41.61);--color-resee-yellow:oklch(84.78% 0.171 89.53);--color-resee-green:oklch(71.41% 0.1907 132.48);--color-resee-seaweed:oklch(59.95% 0.1179 167.71);--color-resee-aqua:oklch(74.55% 0.1224 209.96);--color-resee-blue:oklch(42.42% 0.1982 265.5);--color-resee-indigo:oklch(39.67% 0.1568 293.38);--color-resee-violet:oklch(46.25% 0.1488 353.55);--color-resee-lite-red:oklch(from var(--color-resee-red) calc(l + 0.22) c h);--color-resee-lite-orange:oklch(from var(--color-resee-orange) calc(l + 0.25) c h);--color-resee-lite-yellow:oklch(from var(--color-resee-yellow) calc(l + 0.30) calc(c - 0.03) h);--color-resee-lite-green:oklch(from var(--color-resee-green) calc(l + 0.30) calc(c + 0.02) h);--color-resee-lite-seaweed:oklch(from var(--color-resee-seaweed) calc(l + 0.20) c h);--color-resee-lite-aqua:oklch(from var(--color-resee-aqua) calc(l + 0.25) calc(c - 0.03) h);--color-resee-lite-blue:oklch(from var(--color-resee-blue) calc(l + 0.38) c h);--color-resee-lite-indigo:oklch(from var(--color-resee-indigo) calc(l + 0.45) calc(c + 0.1) h);--color-resee-lite-violet:oklch(from var(--color-resee-violet) calc(l + 0.30) calc(c - 0.05) h);--color-global-background-lite:var(--color-surface-50);--color-global-background-accent-lite:oklch(from var(--color-surface-50) calc(l - 0.15) c h);--color-global-foreground-lite:var(--color-surface-950);--color-global-foreground-accent-lite:var(--color-surface-700);--color-global-background-dark:var(--color-surface-950);--color-global-background-accent-dark:oklch(from var(--color-surface-950) calc(l + 0.15) c h);--color-global-foreground-dark:var(--color-surface-0);--color-global-foreground-accent-dark:var(--color-surface-400);--color-background-scale-a-lite:color-mix(in oklch,var(--color-surface-950) 5%,var(--color-global-background-lite));--color-background-scale-b-lite:color-mix(in oklch,var(--color-surface-950) 8%,var(--color-global-background-lite));--color-background-scale-c-lite:color-mix(in oklch,var(--color-surface-950) 11%,var(--color-global-background-lite));--color-background-scale-d-lite:color-mix(in oklch,var(--color-surface-950) 14%,var(--color-global-background-lite));--color-background-scale-e-lite:color-mix(in oklch,var(--color-surface-950) 17%,var(--color-global-background-lite));--color-background-scale-f-lite:color-mix(in oklch,var(--color-surface-950) 20%,var(--color-global-background-lite));--color-background-scale-g-lite:color-mix(in oklch,var(--color-surface-950) 29%,var(--color-global-background-lite));--color-background-scale-a-dark:color-mix(in oklch,var(--color-surface-0) 5%,var(--color-global-background-dark));--color-background-scale-b-dark:color-mix(in oklch,var(--color-surface-0) 8%,var(--color-global-background-dark));--color-background-scale-c-dark:color-mix(in oklch,var(--color-surface-0) 11%,var(--color-global-background-dark));--color-background-scale-d-dark:color-mix(in oklch,var(--color-surface-0) 14%,var(--color-global-background-dark));--color-background-scale-e-dark:color-mix(in oklch,var(--color-surface-0) 17%,var(--color-global-background-dark));--color-background-scale-f-dark:color-mix(in oklch,var(--color-surface-0) 20%,var(--color-global-background-dark));--color-background-scale-g-dark:color-mix(in oklch,var(--color-surface-0) 29%,var(--color-global-background-dark));--color-foreground-scale-a-lite:var(--color-background-scale-a-dark);--color-foreground-scale-b-lite:var(--color-background-scale-b-dark);--color-foreground-scale-c-lite:var(--color-background-scale-c-dark);--color-foreground-scale-d-lite:var(--color-background-scale-d-dark);--color-foreground-scale-e-lite:var(--color-background-scale-e-dark);--color-foreground-scale-f-lite:var(--color-background-scale-f-dark);--color-foreground-scale-g-lite:var(--color-background-scale-g-dark);--color-foreground-scale-a-dark:var(--color-background-scale-a-lite);--color-foreground-scale-b-dark:var(--color-background-scale-b-lite);--color-foreground-scale-c-dark:var(--color-background-scale-c-lite);--color-foreground-scale-d-dark:var(--color-background-scale-d-lite);--color-foreground-scale-e-dark:var(--color-background-scale-e-lite);--color-foreground-scale-f-dark:var(--color-background-scale-f-lite);--color-foreground-scale-g-dark:var(--color-background-scale-g-lite);--color-info-lite:#3b82f6;--color-info-emphasis-lite:#2563eb;--color-info-contrast-lite:#fff;--color-info-dark:var(--color-resee-aqua);--color-info-emphasis-dark:oklch(from var(--color-resee-aqua) calc(l + 0.1) c h);--color-info-contrast-dark:var(--color-surface-950);--color-help-lite:#8b5cf6;--color-help-emphasis-lite:#7c3aed;--color-help-contrast-lite:var(--color-surface-50);--color-help-dark:#c4b5fd;--color-help-emphasis-dark:#ddd6fe;--color-help-contrast-dark:var(--color-surface-950);--color-success-lite:#15803d;--color-success-emphasis-lite:#166534;--color-success-contrast-lite:var(--color-surface-50);--color-success-dark:var(--color-resee-lite-seaweed);--color-success-emphasis-dark:oklch(from var(--color-resee-lite-seaweed) calc(l + 0.02) c h);--color-success-contrast-dark:var(--color-surface-950);--color-warning-lite:#b45309;--color-warning-emphasis-lite:#92400e;--color-warning-contrast-lite:var(--color-surface-50);--color-warning-dark:#fbbf24;--color-warning-emphasis-dark:#fcd34d;--color-warning-contrast-dark:var(--color-surface-950);--color-danger-lite:#991b1b;--color-danger-emphasis-lite:#7f1d1d;--color-danger-contrast-lite:var(--color-surface-50);--color-danger-dark:#ef4444;--color-danger-emphasis-dark:#f87171;--color-danger-contrast-dark:var(--color-surface-950);--color-global-background:var(--color-global-background-lite);--color-global-background-accent:var(--color-global-background-accent-lite);--color-global-foreground:var(--color-global-foreground-lite);--color-global-foreground-accent:var(--color-global-foreground-accent-lite);--color-background-scale-a:var(--color-background-scale-a-lite);--color-background-scale-b:var(--color-background-scale-b-lite);--color-background-scale-c:var(--color-background-scale-c-lite);--color-background-scale-d:var(--color-background-scale-d-lite);--color-background-scale-e:var(--color-background-scale-e-lite);--color-background-scale-f:var(--color-background-scale-f-lite);--color-background-scale-g:var(--color-background-scale-g-lite);--color-foreground-scale-a:var(--color-foreground-scale-a-lite);--color-foreground-scale-b:var(--color-foreground-scale-b-lite);--color-foreground-scale-c:var(--color-foreground-scale-c-lite);--color-foreground-scale-d:var(--color-foreground-scale-d-lite);--color-foreground-scale-e:var(--color-foreground-scale-e-lite);--color-foreground-scale-f:var(--color-foreground-scale-f-lite);--color-foreground-scale-g:var(--color-foreground-scale-g-lite);--color-invert-global-background:var(--color-global-background-dark);--color-invert-global-background-accent:var(--color-global-background-accent-dark);--color-invert-global-foreground:var(--color-global-foreground-dark);--color-invert-global-foreground-accent:var(--color-global-foreground-accent-dark);--color-invert-background-scale-a:var(--color-background-scale-a-dark);--color-invert-background-scale-b:var(--color-background-scale-b-dark);--color-invert-background-scale-c:var(--color-background-scale-c-dark);--color-invert-background-scale-d:var(--color-background-scale-d-dark);--color-invert-background-scale-e:var(--color-background-scale-e-dark);--color-invert-background-scale-f:var(--color-background-scale-f-dark);--color-invert-background-scale-g:var(--color-background-scale-g-dark);--color-invert-foreground-scale-a:var(--color-foreground-scale-a-dark);--color-invert-foreground-scale-b:var(--color-foreground-scale-b-dark);--color-invert-foreground-scale-c:var(--color-foreground-scale-c-dark);--color-invert-foreground-scale-d:var(--color-foreground-scale-d-dark);--color-invert-foreground-scale-e:var(--color-foreground-scale-e-dark);--color-invert-foreground-scale-f:var(--color-foreground-scale-f-dark);--color-invert-foreground-scale-g:var(--color-foreground-scale-g-dark);--color-info:var(--color-info-lite);--color-info-emphasis:var(--color-info-emphasis-lite);--color-info-contrast:var(--color-info-contrast-lite);--color-help:var(--color-help-lite);--color-help-emphasis:var(--color-help-emphasis-lite);--color-help-contrast:var(--color-help-contrast-lite);--color-success:var(--color-success-lite);--color-success-emphasis:var(--color-success-emphasis-lite);--color-success-contrast:var(--color-success-contrast-lite);--color-warning:var(--color-warning-lite);--color-warning-emphasis:var(--color-warning-emphasis-lite);--color-warning-contrast:var(--color-warning-contrast-lite);--color-danger:var(--color-danger-lite);--color-danger-emphasis:var(--color-danger-emphasis-lite);--color-danger-contrast:var(--color-danger-contrast-lite);--colorscale-resee-linear:var(--color-resee-red) 0%,var(--color-resee-orange) 16.666%,var(--color-resee-yellow) 27.777%,var(--color-resee-green) 38.888%,var(--color-resee-seaweed) 49.999%,var(--color-resee-aqua) 60.000%,var(--color-resee-blue) 71.111%,var(--color-resee-indigo) 82.222%,var(--color-resee-violet) 100%;--colorscale-resee-linear-step:var(--color-resee-red) 0% 11.111%,var(--color-resee-orange) 11.111% 22.222%,var(--color-resee-yellow) 22.222% 33.333%,var(--color-resee-green) 33.333% 44.444%,var(--color-resee-seaweed) 44.444% 55.555%,var(--color-resee-aqua) 55.555% 66.666%,var(--color-resee-blue) 66.666% 77.777%,var(--color-resee-indigo) 77.777% 88.888%,var(--color-resee-violet) 88.888% 100%;--colorscale-resee-conic:var(--color-resee-violet) 18deg,var(--color-resee-red) 54deg,var(--color-resee-orange) 90deg,var(--color-resee-yellow) 126deg,var(--color-resee-green) 164deg,var(--color-resee-seaweed) 198deg,var(--color-resee-aqua) 234deg,var(--color-resee-blue) 270deg,var(--color-resee-indigo) 306deg,var(--color-resee-violet) 342deg;--colorscale-resee-conic-step:var(--color-resee-violet) 0deg 20deg,var(--color-resee-red) 20deg 60deg,var(--color-resee-orange) 60deg 100deg,var(--color-resee-yellow) 100deg 140deg,var(--color-resee-green) 140deg 180deg,var(--color-resee-seaweed) 180deg 220deg,var(--color-resee-aqua) 220deg 260deg,var(--color-resee-blue) 260deg 300deg,var(--color-resee-indigo) 300deg 340deg,var(--color-resee-violet) 340deg 360deg;--colorscale-resee-lite-linear:var(--color-resee-lite-red) 0%,var(--color-resee-lite-orange) 16.666%,var(--color-resee-lite-yellow) 27.777%,var(--color-resee-lite-green) 38.888%,var(--color-resee-lite-seaweed) 49.999%,var(--color-resee-lite-aqua) 60.000%,var(--color-resee-lite-blue) 71.111%,var(--color-resee-lite-indigo) 82.222%,var(--color-resee-lite-violet) 100%;--colorscale-resee-lite-linear-step:var(--color-resee-lite-red) 0% 11.111%,var(--color-resee-lite-orange) 11.111% 22.222%,var(--color-resee-lite-yellow) 22.222% 33.333%,var(--color-resee-lite-green) 33.333% 44.444%,var(--color-resee-lite-seaweed) 44.444% 55.555%,var(--color-resee-lite-aqua) 55.555% 66.666%,var(--color-resee-lite-blue) 66.666% 77.777%,var(--color-resee-lite-indigo) 77.777% 88.888%,var(--color-resee-lite-violet) 88.888% 100%;--colorscale-resee-lite-conic:var(--color-resee-lite-violet) 18deg,var(--color-resee-lite-red) 54deg,var(--color-resee-lite-orange) 90deg,var(--color-resee-lite-yellow) 126deg,var(--color-resee-lite-green) 164deg,var(--color-resee-lite-seaweed) 198deg,var(--color-resee-lite-aqua) 234deg,var(--color-resee-lite-blue) 270deg,var(--color-resee-lite-indigo) 306deg,var(--color-resee-lite-violet) 342deg;--colorscale-resee-lite-conic-step:var(--color-resee-lite-violet) 0deg 20deg,var(--color-resee-lite-red) 20deg 60deg,var(--color-resee-lite-orange) 60deg 100deg,var(--color-resee-lite-yellow) 100deg 140deg,var(--color-resee-lite-green) 140deg 180deg,var(--color-resee-lite-seaweed) 180deg 220deg,var(--color-resee-lite-aqua) 220deg 260deg,var(--color-resee-lite-blue) 260deg 300deg,var(--color-resee-lite-indigo) 300deg 340deg,var(--color-resee-lite-violet) 340deg 360deg;--shadow-heavy-lite:0 2px 3px rgba(0,0,0,.2);--shadow-heavy-right-lite:2px 0 3px rgba(0,0,0,.2);--shadow-heavy-left-lite:-2px 0 3px rgba(0,0,0,.2);--shadow-heavy-top-lite:0 -2px 3px rgba(0,0,0,.2);--shadow-heavy-dark:0 2px 3px rgba(0,0,0,.7);--shadow-heavy-right-dark:2px 0 3px rgba(0,0,0,.7);--shadow-heavy-left-dark:-2px 0 3px rgba(0,0,0,.7);--shadow-heavy-top-dark:0 -2px 3px rgba(0,0,0,.7);--shadow-heavy:var(--shadow-heavy-lite);--shadow-heavy-right:var(--shadow-heavy-right-lite);--shadow-heavy-left:var(--shadow-heavy-left-lite);--shadow-heavy-top:var(--shadow-heavy-top-lite)}
+@custom-variant dark (&:where(.dark, .dark *));@variant dark{--color-global-background:var(--color-global-background-dark);--color-global-background-accent:var(--color-global-background-accent-dark);--color-global-foreground:var(--color-global-foreground-dark);--color-global-foreground-accent:var(--color-global-foreground-accent-dark);--color-invert-global-background:var(--color-global-background-lite);--color-invert-global-background-accent:var(--color-global-background-accent-lite);--color-invert-global-foreground:var(--color-global-foreground-lite);--color-invert-global-foreground-accent:var(--color-global-foreground-accent-lite);--color-background-scale-a:var(--color-background-scale-a-dark);--color-background-scale-b:var(--color-background-scale-b-dark);--color-background-scale-c:var(--color-background-scale-c-dark);--color-background-scale-d:var(--color-background-scale-d-dark);--color-background-scale-e:var(--color-background-scale-e-dark);--color-background-scale-f:var(--color-background-scale-f-dark);--color-background-scale-g:var(--color-background-scale-g-dark);--color-foreground-scale-a:var(--color-foreground-scale-a-dark);--color-foreground-scale-b:var(--color-foreground-scale-b-dark);--color-foreground-scale-c:var(--color-foreground-scale-c-dark);--color-foreground-scale-d:var(--color-foreground-scale-d-dark);--color-foreground-scale-e:var(--color-foreground-scale-e-dark);--color-foreground-scale-f:var(--color-foreground-scale-f-dark);--color-foreground-scale-g:var(--color-foreground-scale-g-dark);--color-invert-background-scale-a:var(--color-background-scale-a-lite);--color-invert-background-scale-b:var(--color-background-scale-b-lite);--color-invert-background-scale-c:var(--color-background-scale-c-lite);--color-invert-background-scale-d:var(--color-background-scale-d-lite);--color-invert-background-scale-e:var(--color-background-scale-e-lite);--color-invert-background-scale-f:var(--color-background-scale-f-lite);--color-invert-background-scale-g:var(--color-background-scale-g-lite);--color-invert-foreground-scale-a:var(--color-foreground-scale-a-lite);--color-invert-foreground-scale-b:var(--color-foreground-scale-b-lite);--color-invert-foreground-scale-c:var(--color-foreground-scale-c-lite);--color-invert-foreground-scale-d:var(--color-foreground-scale-d-lite);--color-invert-foreground-scale-e:var(--color-foreground-scale-e-lite);--color-invert-foreground-scale-f:var(--color-foreground-scale-f-lite);--color-invert-foreground-scale-g:var(--color-foreground-scale-g-lite);--color-info:var(--color-info-dark);--color-info-emphasis:var(--color-info-emphasis-dark);--color-info-contrast:var(--color-info-contrast-dark);--color-help:var(--color-help-dark);--color-help-emphasis:var(--color-help-emphasis-dark);--color-help-contrast:var(--color-help-contrast-dark);--color-success:var(--color-success-dark);--color-success-emphasis:var(--color-success-emphasis-dark);--color-success-contrast:var(--color-success-contrast-dark);--color-warning:var(--color-warning-dark);--color-warning-emphasis:var(--color-warning-emphasis-dark);--color-warning-contrast:var(--color-warning-contrast-dark);--color-danger:var(--color-danger-dark);--color-danger-emphasis:var(--color-danger-emphasis-dark);--color-danger-contrast:var(--color-danger-contrast-dark);--shadow-heavy:var(--shadow-heavy-dark);--shadow-heavy-right:var(--shadow-heavy-right-dark);--shadow-heavy-left:var(--shadow-heavy-left-dark);--shadow-heavy-top:var(--shadow-heavy-top-dark)}@theme{--font-sans:"Archivo",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--zero-width-space:"​";--radius-full:9999px;--custom-accent-color:unset;--icon-size-small:--spacing(3.5);--icon-size-medium:--spacing(4);--icon-size-large:--spacing(6);--icon-size-jumbo:--spacing(12);--aspect-poster:2/3;--aspect-tall:4/5;--color-surface-0:oklch(100.0% 0 0);--color-surface-50:oklch(97.31% 0 0);--color-surface-100:oklch(92.80% 0 0);--color-surface-200:oklch(86.07% 0 0);--color-surface-300:oklch(75.72% 0 0);--color-surface-400:oklch(62.68% 0 0);--color-surface-500:oklch(53.48% 0 0);--color-surface-600:oklch(47.84% 0 0);--color-surface-700:oklch(42.76% 0 0);--color-surface-800:oklch(39.04% 0 0);--color-surface-850:oklch(37.53% 0 0);--color-surface-900:oklch(36.00% 0 0);--color-surface-925:oklch(28.50% 0 0);--color-surface-950:oklch(20.02% 0 0);--color-primary-50:oklch(97.94% 0.0171 103.14);--color-primary-100:oklch(94.93% 0.0459 101.86);--color-primary-200:oklch(89.80% 0.0854 99.1);--color-primary-300:oklch(83.23% 0.1222 96.48);--color-primary-400:oklch(76.65% 0.1387 91.06);--color-primary-500:oklch(71.00% 0.1307 86.56);--color-primary-600:oklch(61.31% 0.1146 77.38);--color-primary-700:oklch(50.50% 0.0943 67.44);--color-primary-800:oklch(44.38% 0.0782 62.58);--color-primary-900:oklch(39.94% 0.0661 58.15);--color-primary-950:oklch(27.10% 0.0457 53.29);--color-resee-red:oklch(57.47% 0.2229 28.19);--color-resee-orange:oklch(67.79% 0.201 41.61);--color-resee-yellow:oklch(84.78% 0.171 89.53);--color-resee-green:oklch(71.41% 0.1907 132.48);--color-resee-seaweed:oklch(59.95% 0.1179 167.71);--color-resee-aqua:oklch(74.55% 0.1224 209.96);--color-resee-blue:oklch(42.42% 0.1982 265.5);--color-resee-indigo:oklch(39.67% 0.1568 293.38);--color-resee-violet:oklch(46.25% 0.1488 353.55);--color-resee-lite-red:oklch(from var(--color-resee-red) calc(l + 0.22) c h);--color-resee-lite-orange:oklch(from var(--color-resee-orange) calc(l + 0.25) c h);--color-resee-lite-yellow:oklch(from var(--color-resee-yellow) calc(l + 0.30) calc(c - 0.03) h);--color-resee-lite-green:oklch(from var(--color-resee-green) calc(l + 0.30) calc(c + 0.02) h);--color-resee-lite-seaweed:oklch(from var(--color-resee-seaweed) calc(l + 0.20) c h);--color-resee-lite-aqua:oklch(from var(--color-resee-aqua) calc(l + 0.25) calc(c - 0.03) h);--color-resee-lite-blue:oklch(from var(--color-resee-blue) calc(l + 0.38) c h);--color-resee-lite-indigo:oklch(from var(--color-resee-indigo) calc(l + 0.45) calc(c + 0.1) h);--color-resee-lite-violet:oklch(from var(--color-resee-violet) calc(l + 0.30) calc(c - 0.05) h);--color-global-background-lite:var(--color-surface-50);--color-global-background-accent-lite:oklch(from var(--color-surface-50) calc(l - 0.15) c h);--color-global-foreground-lite:var(--color-surface-950);--color-global-foreground-accent-lite:var(--color-surface-700);--color-global-background-dark:var(--color-surface-950);--color-global-background-accent-dark:oklch(from var(--color-surface-950) calc(l + 0.15) c h);--color-global-foreground-dark:var(--color-surface-0);--color-global-foreground-accent-dark:var(--color-surface-400);--color-background-scale-a-lite:color-mix(in oklch,var(--color-surface-950) 5%,var(--color-global-background-lite));--color-background-scale-b-lite:color-mix(in oklch,var(--color-surface-950) 8%,var(--color-global-background-lite));--color-background-scale-c-lite:color-mix(in oklch,var(--color-surface-950) 11%,var(--color-global-background-lite));--color-background-scale-d-lite:color-mix(in oklch,var(--color-surface-950) 14%,var(--color-global-background-lite));--color-background-scale-e-lite:color-mix(in oklch,var(--color-surface-950) 17%,var(--color-global-background-lite));--color-background-scale-f-lite:color-mix(in oklch,var(--color-surface-950) 20%,var(--color-global-background-lite));--color-background-scale-g-lite:color-mix(in oklch,var(--color-surface-950) 29%,var(--color-global-background-lite));--color-background-scale-a-dark:color-mix(in oklch,var(--color-surface-0) 5%,var(--color-global-background-dark));--color-background-scale-b-dark:color-mix(in oklch,var(--color-surface-0) 8%,var(--color-global-background-dark));--color-background-scale-c-dark:color-mix(in oklch,var(--color-surface-0) 11%,var(--color-global-background-dark));--color-background-scale-d-dark:color-mix(in oklch,var(--color-surface-0) 14%,var(--color-global-background-dark));--color-background-scale-e-dark:color-mix(in oklch,var(--color-surface-0) 17%,var(--color-global-background-dark));--color-background-scale-f-dark:color-mix(in oklch,var(--color-surface-0) 20%,var(--color-global-background-dark));--color-background-scale-g-dark:color-mix(in oklch,var(--color-surface-0) 29%,var(--color-global-background-dark));--color-foreground-scale-a-lite:var(--color-background-scale-a-dark);--color-foreground-scale-b-lite:var(--color-background-scale-b-dark);--color-foreground-scale-c-lite:var(--color-background-scale-c-dark);--color-foreground-scale-d-lite:var(--color-background-scale-d-dark);--color-foreground-scale-e-lite:var(--color-background-scale-e-dark);--color-foreground-scale-f-lite:var(--color-background-scale-f-dark);--color-foreground-scale-g-lite:var(--color-background-scale-g-dark);--color-foreground-scale-a-dark:var(--color-background-scale-a-lite);--color-foreground-scale-b-dark:var(--color-background-scale-b-lite);--color-foreground-scale-c-dark:var(--color-background-scale-c-lite);--color-foreground-scale-d-dark:var(--color-background-scale-d-lite);--color-foreground-scale-e-dark:var(--color-background-scale-e-lite);--color-foreground-scale-f-dark:var(--color-background-scale-f-lite);--color-foreground-scale-g-dark:var(--color-background-scale-g-lite);--color-info-lite:#3b82f6;--color-info-emphasis-lite:#2563eb;--color-info-contrast-lite:#fff;--color-info-dark:var(--color-resee-aqua);--color-info-emphasis-dark:oklch(from var(--color-resee-aqua) calc(l + 0.1) c h);--color-info-contrast-dark:var(--color-surface-950);--color-help-lite:#8b5cf6;--color-help-emphasis-lite:#7c3aed;--color-help-contrast-lite:var(--color-surface-50);--color-help-dark:#c4b5fd;--color-help-emphasis-dark:#ddd6fe;--color-help-contrast-dark:var(--color-surface-950);--color-success-lite:#15803d;--color-success-emphasis-lite:#166534;--color-success-contrast-lite:var(--color-surface-50);--color-success-dark:var(--color-resee-lite-seaweed);--color-success-emphasis-dark:oklch(from var(--color-resee-lite-seaweed) calc(l + 0.02) c h);--color-success-contrast-dark:var(--color-surface-950);--color-warning-lite:#b45309;--color-warning-emphasis-lite:#92400e;--color-warning-contrast-lite:var(--color-surface-50);--color-warning-dark:#fbbf24;--color-warning-emphasis-dark:#fcd34d;--color-warning-contrast-dark:var(--color-surface-950);--color-danger-lite:#991b1b;--color-danger-emphasis-lite:#7f1d1d;--color-danger-contrast-lite:var(--color-surface-50);--color-danger-dark:#ef4444;--color-danger-emphasis-dark:#f87171;--color-danger-contrast-dark:var(--color-surface-950);--color-global-background:var(--color-global-background-lite);--color-global-background-accent:var(--color-global-background-accent-lite);--color-global-foreground:var(--color-global-foreground-lite);--color-global-foreground-accent:var(--color-global-foreground-accent-lite);--color-background-scale-a:var(--color-background-scale-a-lite);--color-background-scale-b:var(--color-background-scale-b-lite);--color-background-scale-c:var(--color-background-scale-c-lite);--color-background-scale-d:var(--color-background-scale-d-lite);--color-background-scale-e:var(--color-background-scale-e-lite);--color-background-scale-f:var(--color-background-scale-f-lite);--color-background-scale-g:var(--color-background-scale-g-lite);--color-foreground-scale-a:var(--color-foreground-scale-a-lite);--color-foreground-scale-b:var(--color-foreground-scale-b-lite);--color-foreground-scale-c:var(--color-foreground-scale-c-lite);--color-foreground-scale-d:var(--color-foreground-scale-d-lite);--color-foreground-scale-e:var(--color-foreground-scale-e-lite);--color-foreground-scale-f:var(--color-foreground-scale-f-lite);--color-foreground-scale-g:var(--color-foreground-scale-g-lite);--color-invert-global-background:var(--color-global-background-dark);--color-invert-global-background-accent:var(--color-global-background-accent-dark);--color-invert-global-foreground:var(--color-global-foreground-dark);--color-invert-global-foreground-accent:var(--color-global-foreground-accent-dark);--color-invert-background-scale-a:var(--color-background-scale-a-dark);--color-invert-background-scale-b:var(--color-background-scale-b-dark);--color-invert-background-scale-c:var(--color-background-scale-c-dark);--color-invert-background-scale-d:var(--color-background-scale-d-dark);--color-invert-background-scale-e:var(--color-background-scale-e-dark);--color-invert-background-scale-f:var(--color-background-scale-f-dark);--color-invert-background-scale-g:var(--color-background-scale-g-dark);--color-invert-foreground-scale-a:var(--color-foreground-scale-a-dark);--color-invert-foreground-scale-b:var(--color-foreground-scale-b-dark);--color-invert-foreground-scale-c:var(--color-foreground-scale-c-dark);--color-invert-foreground-scale-d:var(--color-foreground-scale-d-dark);--color-invert-foreground-scale-e:var(--color-foreground-scale-e-dark);--color-invert-foreground-scale-f:var(--color-foreground-scale-f-dark);--color-invert-foreground-scale-g:var(--color-foreground-scale-g-dark);--color-info:var(--color-info-lite);--color-info-emphasis:var(--color-info-emphasis-lite);--color-info-contrast:var(--color-info-contrast-lite);--color-help:var(--color-help-lite);--color-help-emphasis:var(--color-help-emphasis-lite);--color-help-contrast:var(--color-help-contrast-lite);--color-success:var(--color-success-lite);--color-success-emphasis:var(--color-success-emphasis-lite);--color-success-contrast:var(--color-success-contrast-lite);--color-warning:var(--color-warning-lite);--color-warning-emphasis:var(--color-warning-emphasis-lite);--color-warning-contrast:var(--color-warning-contrast-lite);--color-danger:var(--color-danger-lite);--color-danger-emphasis:var(--color-danger-emphasis-lite);--color-danger-contrast:var(--color-danger-contrast-lite);--colorscale-resee-linear:var(--color-resee-red) 0%,var(--color-resee-orange) 16.666%,var(--color-resee-yellow) 27.777%,var(--color-resee-green) 38.888%,var(--color-resee-seaweed) 49.999%,var(--color-resee-aqua) 60.000%,var(--color-resee-blue) 71.111%,var(--color-resee-indigo) 82.222%,var(--color-resee-violet) 100%;--colorscale-resee-linear-step:var(--color-resee-red) 0% 11.111%,var(--color-resee-orange) 11.111% 22.222%,var(--color-resee-yellow) 22.222% 33.333%,var(--color-resee-green) 33.333% 44.444%,var(--color-resee-seaweed) 44.444% 55.555%,var(--color-resee-aqua) 55.555% 66.666%,var(--color-resee-blue) 66.666% 77.777%,var(--color-resee-indigo) 77.777% 88.888%,var(--color-resee-violet) 88.888% 100%;--colorscale-resee-conic:var(--color-resee-violet) 18deg,var(--color-resee-red) 54deg,var(--color-resee-orange) 90deg,var(--color-resee-yellow) 126deg,var(--color-resee-green) 164deg,var(--color-resee-seaweed) 198deg,var(--color-resee-aqua) 234deg,var(--color-resee-blue) 270deg,var(--color-resee-indigo) 306deg,var(--color-resee-violet) 342deg;--colorscale-resee-conic-step:var(--color-resee-violet) 0deg 20deg,var(--color-resee-red) 20deg 60deg,var(--color-resee-orange) 60deg 100deg,var(--color-resee-yellow) 100deg 140deg,var(--color-resee-green) 140deg 180deg,var(--color-resee-seaweed) 180deg 220deg,var(--color-resee-aqua) 220deg 260deg,var(--color-resee-blue) 260deg 300deg,var(--color-resee-indigo) 300deg 340deg,var(--color-resee-violet) 340deg 360deg;--colorscale-resee-lite-linear:var(--color-resee-lite-red) 0%,var(--color-resee-lite-orange) 16.666%,var(--color-resee-lite-yellow) 27.777%,var(--color-resee-lite-green) 38.888%,var(--color-resee-lite-seaweed) 49.999%,var(--color-resee-lite-aqua) 60.000%,var(--color-resee-lite-blue) 71.111%,var(--color-resee-lite-indigo) 82.222%,var(--color-resee-lite-violet) 100%;--colorscale-resee-lite-linear-step:var(--color-resee-lite-red) 0% 11.111%,var(--color-resee-lite-orange) 11.111% 22.222%,var(--color-resee-lite-yellow) 22.222% 33.333%,var(--color-resee-lite-green) 33.333% 44.444%,var(--color-resee-lite-seaweed) 44.444% 55.555%,var(--color-resee-lite-aqua) 55.555% 66.666%,var(--color-resee-lite-blue) 66.666% 77.777%,var(--color-resee-lite-indigo) 77.777% 88.888%,var(--color-resee-lite-violet) 88.888% 100%;--colorscale-resee-lite-conic:var(--color-resee-lite-violet) 18deg,var(--color-resee-lite-red) 54deg,var(--color-resee-lite-orange) 90deg,var(--color-resee-lite-yellow) 126deg,var(--color-resee-lite-green) 164deg,var(--color-resee-lite-seaweed) 198deg,var(--color-resee-lite-aqua) 234deg,var(--color-resee-lite-blue) 270deg,var(--color-resee-lite-indigo) 306deg,var(--color-resee-lite-violet) 342deg;--colorscale-resee-lite-conic-step:var(--color-resee-lite-violet) 0deg 20deg,var(--color-resee-lite-red) 20deg 60deg,var(--color-resee-lite-orange) 60deg 100deg,var(--color-resee-lite-yellow) 100deg 140deg,var(--color-resee-lite-green) 140deg 180deg,var(--color-resee-lite-seaweed) 180deg 220deg,var(--color-resee-lite-aqua) 220deg 260deg,var(--color-resee-lite-blue) 260deg 300deg,var(--color-resee-lite-indigo) 300deg 340deg,var(--color-resee-lite-violet) 340deg 360deg;--shadow-heavy-lite:0 2px 3px rgba(0,0,0,.2);--shadow-heavy-right-lite:2px 0 3px rgba(0,0,0,.2);--shadow-heavy-left-lite:-2px 0 3px rgba(0,0,0,.2);--shadow-heavy-top-lite:0 -2px 3px rgba(0,0,0,.2);--shadow-heavy-dark:0 2px 3px rgba(0,0,0,.7);--shadow-heavy-right-dark:2px 0 3px rgba(0,0,0,.7);--shadow-heavy-left-dark:-2px 0 3px rgba(0,0,0,.7);--shadow-heavy-top-dark:0 -2px 3px rgba(0,0,0,.7);--shadow-heavy:var(--shadow-heavy-lite);--shadow-heavy-right:var(--shadow-heavy-right-lite);--shadow-heavy-left:var(--shadow-heavy-left-lite);--shadow-heavy-top:var(--shadow-heavy-top-lite);--gradient-direction-to-t:to top;--gradient-direction-to-tr:to top right;--gradient-direction-to-r:to right;--gradient-direction-to-br:to bottom right;--gradient-direction-to-b:to b;--gradient-direction-to-bl:to bottom left;--gradient-direction-to-l:to left;--gradient-direction-to-tl:to top left}

package/dist/runtime/utils/form.d.ts

@@ -1,5 +1,5 @@
 import type { FormFieldState } from '@primevue/forms';
-import { type InjectionKey } from 'vue';
+import { type InjectionKey, type MaybeRefOrGetter } from 'vue';
 import type { FormInstance, FormValues } from '../types/form.js';
 /**
  * The injection key for acquiring a {@link FormInstance} object within the
@@ -24,11 +24,40 @@ export declare function provideFormInstance(): FormInstance;
 /**
  * Injects the stateful object provided by an ancestor Form instance. If not
  * available, a dummy state object is generated.
+ *
+ * @private
  */
 export declare function injectFormInstance(): FormInstance;
 /**
  * Takes a Primevue Form's `states` object, and extracts the current values
  * of each named property. In doing so, it will deref proxies, and create
  * shallow clones of any arrays/objects it encounters.
+ *
+ * @private
  */
 export declare function getValuesFromFormState<T extends FormValues = FormValues>(state: Record<string, FormFieldState>): T;
+/**
+ * @private
+ */
+export type UseOptionListMethodsConfig = {
+    optionLabel?: string | ((data: unknown) => string);
+    optionValue?: string | ((data: unknown) => string);
+    optionIcon?: string | ((data: unknown) => string);
+    optionDisabled?: string | ((data: unknown) => boolean);
+    optionDataKey?: string;
+};
+/**
+ * Creates a set of common methods for interacting with an array of "options" like what
+ * gets provided to a Select or RadioGroup.
+ *
+ * @private
+ */
+export declare function useOptionListMethods(config: MaybeRefOrGetter<UseOptionListMethodsConfig>): import("vue").ComputedRef<{
+    getOptionLabel: (option: unknown) => string;
+    getOptionValue: (option: unknown) => unknown;
+    getOptionIcon: (option: unknown) => string | undefined;
+    getOptionDisabled: (option: unknown) => boolean;
+    getOptionRenderKey: (option: unknown) => string | number | undefined;
+    getOptionIndex: (needle: unknown, haystack: unknown) => number;
+    getOptionByValue: <T>(needle: unknown, haystack: MaybeRefOrGetter<T[] | undefined>) => T | undefined;
+}>;

package/dist/runtime/utils/form.js

@@ -1,5 +1,8 @@
+import { equals, resolveFieldData } from "@primeuix/utils/object";
+import { isNumber } from "@resee-movies/utilities/numbers/is-number";
 import { isObjectLike } from "@resee-movies/utilities/objects/is-object-like";
-import { inject, provide, ref, toRaw, toValue } from "vue";
+import { isString } from "@resee-movies/utilities/strings/is-string";
+import { computed, inject, provide, ref, toRaw, toValue } from "vue";
 export const FormSymbol = Symbol("form");
 export function createFormInstance() {
   return {
@@ -32,3 +35,54 @@ export function getValuesFromFormState(state) {
   }
   return result;
 }
+export function useOptionListMethods(config) {
+  return computed(() => {
+    const {
+      optionLabel,
+      optionValue,
+      optionIcon,
+      optionDisabled,
+      optionDataKey
+    } = toValue(config);
+    const getOptionLabel = (option) => {
+      return String(optionLabel ? resolveFieldData(option, optionLabel) : option);
+    };
+    const getOptionValue = (option) => {
+      return optionValue ? resolveFieldData(option, optionValue) : option;
+    };
+    const getOptionIcon = (option) => {
+      return optionIcon ? String(resolveFieldData(option, optionIcon)) : void 0;
+    };
+    const getOptionDisabled = (option) => {
+      return Boolean(optionDisabled ? resolveFieldData(option, optionDisabled) : false);
+    };
+    const getOptionRenderKey = (option) => {
+      const result = optionDataKey ? resolveFieldData(option, optionDataKey) : getOptionLabel(option);
+      return isString(result) || isNumber(result) ? result : void 0;
+    };
+    const getOptionIndex = (needle, haystack) => {
+      const rawHaystack = toValue(haystack);
+      const optionValue2 = getOptionValue(needle);
+      const equalityKey = optionValue2 ? void 0 : optionDataKey;
+      if (Array.isArray(rawHaystack)) {
+        return rawHaystack.findIndex((entry) => equals(entry, optionValue2, equalityKey));
+      }
+      return equals(rawHaystack, optionValue2, equalityKey) ? 0 : -1;
+    };
+    const getOptionByValue = (needle, haystack) => {
+      const equalityKey = optionValue ? void 0 : optionDataKey;
+      return toValue(haystack)?.find(
+        (option) => equals(getOptionValue(option), needle, equalityKey)
+      );
+    };
+    return {
+      getOptionLabel,
+      getOptionValue,
+      getOptionIcon,
+      getOptionDisabled,
+      getOptionRenderKey,
+      getOptionIndex,
+      getOptionByValue
+    };
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@resee-movies/nuxt-ux",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "The next-gen user experience library for ReSee Movies - currently in development. ",
   "repository": {
     "url": "https://github.com/ReSee-Movies/nuxt-ux.git"
@@ -75,6 +75,7 @@
     "@iconify-json/simple-icons": "^1.2.61",
     "@iconify-json/solar": "^1.2.5",
     "@nuxt/fonts": "^0.12.1",
+    "@nuxtjs/device": "^4.0.0",
     "@primeuix/utils": "^0.6.1",
     "@primevue/forms": "^4.5.1",
     "@primevue/nuxt-module": "^4.5.1",