tide-design-system 2.5.20 → 2.6.0

package/dist/components/TideInputCheckbox.vue2.js

@@ -0,0 +1,151 @@
+import { defineComponent, useModel, ref, computed, watchEffect, watch, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, withDirectives, vModelCheckbox, createBlock, createCommentVNode, toDisplayString, mergeModels } from "vue";
+import _sfc_main$1 from "./TideIcon.vue.js";
+/* empty css              */
+import _sfc_main$2 from "./TideInputSupportingText.vue.js";
+import { useFormContext } from "../composables/useTideForm.js";
+import { ICON } from "../types/Icon.js";
+import { SIZE } from "../types/Size.js";
+import { CSS } from "../types/Styles.js";
+import { formatNumber } from "../utilities/format.js";
+import { VALIDATION_RESULT } from "../utilities/validation.js";
+const _hoisted_1 = ["checked", "disabled", "name", "id"];
+const __default__ = {};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "TideInputCheckbox",
+  props: /* @__PURE__ */ mergeModels({
+    disabled: { type: Boolean, default: false },
+    error: { default: "" },
+    indeterminate: { type: Boolean, default: false },
+    inputId: { default: void 0 },
+    label: { default: void 0 },
+    name: { default: void 0 },
+    number: { default: void 0 },
+    required: { type: Boolean, default: false }
+  }, {
+    "modelValue": { type: Boolean, ...{ required: true } },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["valid"], ["update:modelValue"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const modelValue = useModel(__props, "modelValue");
+    const formContext = useFormContext();
+    const isValidating = ref(false);
+    const errorRef = ref(VALIDATION_RESULT.NO_ERROR);
+    const formattedLabel = computed(() => props.required ? `${props.label} *` : props.label);
+    const isChecked = computed(() => modelValue.value || props.indeterminate);
+    const showError = computed(() => {
+      if (hasErrorFromProp.value) return true;
+      if (!isValidating.value) return false;
+      return !errorRef.value.valid;
+    });
+    const hasErrorFromProp = computed(() => props.error !== "");
+    const supportingTextMessage = computed(() => showError.value && errorRef.value.message);
+    const getCheckboxValidationResult = () => {
+      if (props.error !== "")
+        return {
+          message: props.error,
+          valid: false
+        };
+      if (!props.required || isChecked.value) return VALIDATION_RESULT.NO_ERROR;
+      return VALIDATION_RESULT.REQUIRED;
+    };
+    watchEffect(() => {
+      errorRef.value = getCheckboxValidationResult();
+    });
+    watch(
+      modelValue,
+      () => {
+        if (modelValue.value) isValidating.value = true;
+      },
+      { immediate: true }
+    );
+    watch(
+      () => formContext == null ? void 0 : formContext.forceShowErrors.value,
+      (newValue) => {
+        if (newValue) isValidating.value = true;
+      },
+      { immediate: true }
+    );
+    watch(
+      errorRef,
+      () => {
+        emit("valid", errorRef.value.valid);
+      },
+      { deep: true, immediate: true }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["tide-input-checkbox", unref(CSS).DISPLAY.FLEX, unref(CSS).FLEX.DIRECTION.COLUMN, unref(CSS).GAP.QUARTER])
+      }, [
+        createElementVNode("label", {
+          class: normalizeClass([
+            unref(CSS).AXIS2.CENTER,
+            unref(CSS).DISPLAY.FLEX,
+            unref(CSS).FONT.ROLE.BODY_1,
+            unref(CSS).GAP.HALF,
+            unref(CSS).USER_SELECT.NONE,
+            showError.value ? unref(CSS).FONT.COLOR.GLOBAL.ERROR : unref(CSS).FONT.COLOR.SURFACE.DEFAULT,
+            __props.disabled ? [unref(CSS).OPACITY.DISABLED, unref(CSS).CURSOR.NOT_ALLOWED] : [unref(CSS).CURSOR.POINTER]
+          ])
+        }, [
+          withDirectives(createElementVNode("input", {
+            checked: isChecked.value,
+            class: normalizeClass(["tide-screen-reader-only"]),
+            disabled: __props.disabled,
+            name: __props.name,
+            ref: "input",
+            id: __props.inputId,
+            type: "checkbox",
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event)
+          }, null, 8, _hoisted_1), [
+            [vModelCheckbox, modelValue.value]
+          ]),
+          createElementVNode("div", {
+            class: normalizeClass([
+              "tide-input-checkbox-custom",
+              unref(CSS).AXIS1.CENTER,
+              unref(CSS).AXIS2.CENTER,
+              unref(CSS).BORDER.FULL.ONE,
+              unref(CSS).BORDER.RADIUS.QUARTER,
+              unref(CSS).DISPLAY.FLEX,
+              unref(CSS).FLEX.SHRINK.OFF,
+              unref(CSS).POSITION.RELATIVE,
+              isChecked.value ? [showError.value ? unref(CSS).BG.GLOBAL.PRIMARY.ERROR : [unref(CSS).BG.SECONDARY, unref(CSS).BORDER.COLOR.HIGH]] : [
+                showError.value ? [unref(CSS).BORDER.COLOR.GLOBAL.ERROR, unref(CSS).BG.GLOBAL.SURFACE.ERROR] : [unref(CSS).BORDER.COLOR.DEFAULT, unref(CSS).BG.SURFACE.DEFAULT]
+              ]
+            ])
+          }, [
+            isChecked.value ? (openBlock(), createBlock(_sfc_main$1, {
+              key: 0,
+              class: normalizeClass([unref(CSS).FONT.COLOR.SECONDARY]),
+              icon: __props.indeterminate ? unref(ICON).REMOVE : unref(ICON).CHECK,
+              size: unref(SIZE).SMALL
+            }, null, 8, ["class", "icon", "size"])) : createCommentVNode("", true)
+          ], 2),
+          __props.label ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass([unref(CSS).AXIS1.BETWEEN, unref(CSS).DISPLAY.FLEX, unref(CSS).FLEX.GROW.ON, unref(CSS).FONT.ROLE.BODY_1])
+          }, [
+            createElementVNode("span", null, toDisplayString(formattedLabel.value), 1),
+            __props.number ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: normalizeClass([unref(CSS).FONT.COLOR.SURFACE.VARIANT])
+            }, " (" + toDisplayString(unref(formatNumber)(__props.number)) + ") ", 3)) : createCommentVNode("", true)
+          ], 2)) : createCommentVNode("", true)
+        ], 2),
+        supportingTextMessage.value ? (openBlock(), createBlock(_sfc_main$2, {
+          key: 0,
+          message: supportingTextMessage.value,
+          "is-error": ""
+        }, null, 8, ["message"])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=TideInputCheckbox.vue2.js.map

package/dist/components/TideInputCheckbox.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TideInputCheckbox.vue2.js","sources":["../../src/components/TideInputCheckbox.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders an input checkbox component.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideinputcheckbox--docs) for TideInputCheckbox\n   */\n  export default {};\n</script>\n\n<script lang=\"ts\" setup>\n  import { computed, ref, watch, watchEffect } from 'vue';\n\n  import TideIcon from '@/components/TideIcon.vue';\n  import TideInputSupportingText from '@/components/TideInputSupportingText.vue';\n  import { useFormContext } from '@/composables/useTideForm';\n  import { ICON } from '@/types/Icon';\n  import { SIZE } from '@/types/Size';\n  import { CSS } from '@/types/Styles';\n  import { formatNumber } from '@/utilities/format';\n  import { VALIDATION_RESULT } from '@/utilities/validation';\n\n  import type { ValidationResult } from '@/types/Validation';\n\n  type Props = {\n    /** Determines whether Checkbox state is interactable */\n    disabled?: boolean;\n\n    /** Overrides the default error message and valid state */\n    error?: string;\n\n    /** Determines whether Checkbox is indeterminate */\n    indeterminate?: boolean;\n\n    /** Unique ID attribute (to bind Checkbox label to input) */\n    inputId?: string;\n\n    /** Label content */\n    label: string;\n\n    /** Name attribute */\n    name?: string;\n\n    /** Parenthetical response count */\n    number?: number;\n\n    /** Determines whether input is required */\n    required?: boolean;\n  };\n\n  const props = withDefaults(defineProps<Props>(), {\n    disabled: false,\n    error: '',\n    indeterminate: false,\n    inputId: undefined,\n    label: undefined,\n    name: undefined,\n    number: undefined,\n    required: false,\n  });\n\n  type Emits = {\n    (event: 'valid', valid: boolean): void;\n  };\n  const emit = defineEmits<Emits>();\n\n  const modelValue = defineModel<boolean>({ required: true });\n\n  const formContext = useFormContext();\n\n  const isValidating = ref<boolean>(false);\n  const errorRef = ref<ValidationResult>(VALIDATION_RESULT.NO_ERROR);\n\n  const formattedLabel = computed(() => (props.required ? `${props.label} *` : props.label));\n  const isChecked = computed(() => modelValue.value || props.indeterminate);\n  const showError = computed(() => {\n    if (hasErrorFromProp.value) return true;\n    if (!isValidating.value) return false;\n    return !errorRef.value.valid;\n  });\n  const hasErrorFromProp = computed(() => props.error !== '');\n  const supportingTextMessage = computed(() => showError.value && errorRef.value.message);\n\n  const getCheckboxValidationResult = (): ValidationResult => {\n    if (props.error !== '')\n      return {\n        message: props.error,\n        valid: false,\n      };\n    if (!props.required || isChecked.value) return VALIDATION_RESULT.NO_ERROR;\n    return VALIDATION_RESULT.REQUIRED;\n  };\n\n  watchEffect(() => {\n    errorRef.value = getCheckboxValidationResult();\n  });\n\n  watch(\n    modelValue,\n    () => {\n      if (modelValue.value) isValidating.value = true;\n    },\n    { immediate: true }\n  );\n\n  watch(\n    () => formContext?.forceShowErrors.value,\n    (newValue) => {\n      if (newValue) isValidating.value = true;\n    },\n    { immediate: true }\n  );\n\n  watch(\n    errorRef,\n    () => {\n      emit('valid', errorRef.value.valid);\n    },\n    { deep: true, immediate: true }\n  );\n</script>\n\n<template>\n  <div :class=\"['tide-input-checkbox', CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.GAP.QUARTER]\">\n    <label\n      :class=\"[\n        CSS.AXIS2.CENTER,\n        CSS.DISPLAY.FLEX,\n        CSS.FONT.ROLE.BODY_1,\n        CSS.GAP.HALF,\n        CSS.USER_SELECT.NONE,\n        showError ? CSS.FONT.COLOR.GLOBAL.ERROR : CSS.FONT.COLOR.SURFACE.DEFAULT,\n        disabled ? [CSS.OPACITY.DISABLED, CSS.CURSOR.NOT_ALLOWED] : [CSS.CURSOR.POINTER],\n      ]\"\n    >\n      <input\n        :checked=\"isChecked\"\n        :class=\"['tide-screen-reader-only']\"\n        :disabled=\"disabled\"\n        :name=\"name\"\n        ref=\"input\"\n        :id=\"inputId\"\n        type=\"checkbox\"\n        v-model=\"modelValue\"\n      />\n\n      <div\n        :class=\"[\n          'tide-input-checkbox-custom',\n          CSS.AXIS1.CENTER,\n          CSS.AXIS2.CENTER,\n          CSS.BORDER.FULL.ONE,\n          CSS.BORDER.RADIUS.QUARTER,\n          CSS.DISPLAY.FLEX,\n          CSS.FLEX.SHRINK.OFF,\n          CSS.POSITION.RELATIVE,\n          isChecked\n            ? [showError ? CSS.BG.GLOBAL.PRIMARY.ERROR : [CSS.BG.SECONDARY, CSS.BORDER.COLOR.HIGH]]\n            : [\n                showError\n                  ? [CSS.BORDER.COLOR.GLOBAL.ERROR, CSS.BG.GLOBAL.SURFACE.ERROR]\n                  : [CSS.BORDER.COLOR.DEFAULT, CSS.BG.SURFACE.DEFAULT],\n              ],\n        ]\"\n      >\n        <TideIcon\n          :class=\"[CSS.FONT.COLOR.SECONDARY]\"\n          :icon=\"indeterminate ? ICON.REMOVE : ICON.CHECK\"\n          :size=\"SIZE.SMALL\"\n          v-if=\"isChecked\"\n        />\n      </div>\n\n      <div\n        :class=\"[CSS.AXIS1.BETWEEN, CSS.DISPLAY.FLEX, CSS.FLEX.GROW.ON, CSS.FONT.ROLE.BODY_1]\"\n        v-if=\"label\"\n      >\n        <span>{{ formattedLabel }}</span>\n\n        <span\n          :class=\"[CSS.FONT.COLOR.SURFACE.VARIANT]\"\n          v-if=\"number\"\n        >\n          ({{ formatNumber(number) }})\n        </span>\n      </div>\n    </label>\n\n    <TideInputSupportingText\n      :message=\"supportingTextMessage\"\n      is-error\n      v-if=\"supportingTextMessage\"\n    />\n  </div>\n</template>\n\n<style scoped>\n  .tide-input-checkbox {\n    align-self: start;\n  }\n\n  .tide-input-checkbox-custom {\n    width: 24px;\n    height: 24px;\n  }\n\n  label:has(input:focus-visible) {\n    outline: auto;\n    outline-offset: 2px;\n  }\n</style>\n"],"names":["_useModel","_createElementBlock","_unref","_createElementVNode","_normalizeClass","_createBlock","TideIcon","_toDisplayString","TideInputSupportingText"],"mappings":"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"}

package/dist/components/TideInputCheckboxDeprecated.vue.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./TideInputCheckboxDeprecated.vue2.js";
+/* empty css                                 */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const TideInputCheckboxDeprecated = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-345366c5"]]);
+export {
+  TideInputCheckboxDeprecated as default
+};
+//# sourceMappingURL=TideInputCheckboxDeprecated.vue.js.map

package/dist/components/TideInputCheckboxDeprecated.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TideInputCheckboxDeprecated.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/TideInputCheckboxDeprecated.vue2.js

@@ -0,0 +1,96 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, withModifiers, createBlock, createCommentVNode, toDisplayString } from "vue";
+import _sfc_main$1 from "./TideIcon.vue.js";
+/* empty css              */
+import { ICON } from "../types/Icon.js";
+import { SIZE } from "../types/Size.js";
+import { CSS } from "../types/Styles.js";
+import { formatNumber } from "../utilities/format.js";
+const _hoisted_1 = ["checked", "disabled", "name", "id"];
+const _hoisted_2 = ["for"];
+const __default__ = {};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "TideInputCheckboxDeprecated",
+  props: {
+    checked: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    indeterminate: { type: Boolean, default: false },
+    inputId: { default: void 0 },
+    label: { default: void 0 },
+    name: { default: void 0 },
+    number: { default: void 0 }
+  },
+  setup(__props) {
+    const props = __props;
+    const isChecked = computed(() => props.checked || props.indeterminate);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "tide-input-checkbox",
+          unref(CSS).DISPLAY.FLEX,
+          unref(CSS).AXIS2.CENTER,
+          unref(CSS).GAP.HALF,
+          unref(CSS).FONT.ROLE.BODY_1,
+          __props.disabled ? ["disabled", unref(CSS).POINTER_EVENTS.OFF] : unref(CSS).CURSOR.POINTER
+        ])
+      }, [
+        createElementVNode("input", {
+          checked: isChecked.value,
+          class: normalizeClass([unref(CSS).DISPLAY.NONE]),
+          disabled: props.disabled,
+          name: props.name,
+          ref: "input",
+          onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+          }, ["prevent"])),
+          id: props.inputId,
+          type: "checkbox"
+        }, null, 10, _hoisted_1),
+        createElementVNode("div", {
+          class: normalizeClass([
+            "tide-input-checkbox-custom",
+            unref(CSS).POSITION.RELATIVE,
+            unref(CSS).DISPLAY.FLEX,
+            unref(CSS).AXIS1.CENTER,
+            unref(CSS).AXIS2.CENTER,
+            unref(CSS).FLEX.SHRINK.OFF,
+            unref(CSS).BORDER.FULL.ONE,
+            isChecked.value ? [unref(CSS).BORDER.COLOR.HIGH, unref(CSS).BG.SECONDARY] : [unref(CSS).BORDER.COLOR.DEFAULT, unref(CSS).BG.SURFACE.DEFAULT],
+            unref(CSS).BORDER.RADIUS.QUARTER,
+            isChecked.value && "checked",
+            __props.disabled ? unref(CSS).CURSOR.NOT_ALLOWED : unref(CSS).CURSOR.POINTER
+          ])
+        }, [
+          isChecked.value ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 0,
+            class: normalizeClass([unref(CSS).FONT.COLOR.SECONDARY]),
+            icon: props.indeterminate ? unref(ICON).REMOVE : unref(ICON).CHECK,
+            size: unref(SIZE).SMALL
+          }, null, 8, ["class", "icon", "size"])) : createCommentVNode("", true)
+        ], 2),
+        __props.label ? (openBlock(), createElementBlock("label", {
+          key: 0,
+          class: normalizeClass([
+            unref(CSS).DISPLAY.FLEX,
+            unref(CSS).AXIS1.BETWEEN,
+            unref(CSS).FLEX.GROW.ON,
+            unref(CSS).FONT.ROLE.BODY_1,
+            __props.disabled ? unref(CSS).CURSOR.NOT_ALLOWED : unref(CSS).CURSOR.POINTER
+          ]),
+          for: props.inputId,
+          onClick: _cache[1] || (_cache[1] = withModifiers(() => {
+          }, ["prevent"]))
+        }, [
+          createElementVNode("span", null, toDisplayString(__props.label), 1),
+          props.number ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            class: normalizeClass([unref(CSS).FONT.COLOR.SURFACE.VARIANT])
+          }, " (" + toDisplayString(unref(formatNumber)(props.number)) + ") ", 3)) : createCommentVNode("", true)
+        ], 10, _hoisted_2)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=TideInputCheckboxDeprecated.vue2.js.map

package/dist/components/TideInputCheckboxDeprecated.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TideInputCheckboxDeprecated.vue2.js","sources":["../../src/components/TideInputCheckboxDeprecated.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * @deprecated Use `TideInputCheckbox.vue` imported from 'tide-design-system' npm package instead.\n   */\n  export default {};\n</script>\n\n<script lang=\"ts\" setup>\n  import { computed } from 'vue';\n\n  import TideIcon from '@/components/TideIcon.vue';\n  import { ICON } from '@/types/Icon';\n  import { SIZE } from '@/types/Size';\n  import { CSS } from '@/types/Styles';\n  import { formatNumber } from '@/utilities/format';\n\n  type Props = {\n    checked?: boolean;\n    disabled?: boolean;\n    indeterminate?: boolean;\n    inputId?: string;\n    label?: string;\n    name?: string;\n    number?: number;\n  };\n\n  const props = withDefaults(defineProps<Props>(), {\n    checked: false,\n    disabled: false,\n    indeterminate: false,\n    inputId: undefined,\n    label: undefined,\n    name: undefined,\n    number: undefined,\n  });\n\n  const isChecked = computed(() => props.checked || props.indeterminate);\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'tide-input-checkbox',\n      CSS.DISPLAY.FLEX,\n      CSS.AXIS2.CENTER,\n      CSS.GAP.HALF,\n      CSS.FONT.ROLE.BODY_1,\n      disabled ? ['disabled', CSS.POINTER_EVENTS.OFF] : CSS.CURSOR.POINTER,\n    ]\"\n  >\n    <input\n      :checked=\"isChecked\"\n      :class=\"[CSS.DISPLAY.NONE]\"\n      :disabled=\"props.disabled\"\n      :name=\"props.name\"\n      ref=\"input\"\n      @click.prevent\n      :id=\"props.inputId\"\n      type=\"checkbox\"\n    />\n\n    <div\n      :class=\"[\n        'tide-input-checkbox-custom',\n        CSS.POSITION.RELATIVE,\n        CSS.DISPLAY.FLEX,\n        CSS.AXIS1.CENTER,\n        CSS.AXIS2.CENTER,\n        CSS.FLEX.SHRINK.OFF,\n        CSS.BORDER.FULL.ONE,\n        isChecked ? [CSS.BORDER.COLOR.HIGH, CSS.BG.SECONDARY] : [CSS.BORDER.COLOR.DEFAULT, CSS.BG.SURFACE.DEFAULT],\n        CSS.BORDER.RADIUS.QUARTER,\n        isChecked && 'checked',\n        disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.POINTER,\n      ]\"\n    >\n      <TideIcon\n        :class=\"[CSS.FONT.COLOR.SECONDARY]\"\n        :icon=\"props.indeterminate ? ICON.REMOVE : ICON.CHECK\"\n        :size=\"SIZE.SMALL\"\n        v-if=\"isChecked\"\n      />\n    </div>\n\n    <label\n      :class=\"[\n        CSS.DISPLAY.FLEX,\n        CSS.AXIS1.BETWEEN,\n        CSS.FLEX.GROW.ON,\n        CSS.FONT.ROLE.BODY_1,\n        disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.POINTER,\n      ]\"\n      :for=\"props.inputId\"\n      @click.prevent\n      v-if=\"label\"\n    >\n      <span>{{ label }}</span>\n      <span\n        :class=\"[CSS.FONT.COLOR.SURFACE.VARIANT]\"\n        v-if=\"props.number\"\n      >\n        ({{ formatNumber(props.number) }})\n      </span>\n    </label>\n  </div>\n</template>\n\n<style scoped>\n  .tide-input-checkbox.disabled {\n    opacity: var(--tide-disabled);\n  }\n\n  .tide-input-checkbox-custom {\n    width: 24px;\n    height: 24px;\n  }\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createBlock","TideIcon"],"mappings":";;;;;;;;;AAIE,MAAA,cAAe,CAAA;;;;;;;;;;;;;;AAsBf,UAAM,QAAQ;AAUd,UAAM,YAAY,SAAS,MAAM,MAAM,WAAW,MAAM,aAAa;;0BAIrEA,mBAgEM,OAAA;AAAA,QA/DH,OAAKC,eAAA;AAAA;UAAuCC,MAAA,GAAA,EAAI,QAAQ;AAAA,UAAYA,MAAA,GAAA,EAAI,MAAM;AAAA,UAAcA,MAAA,GAAA,EAAI,IAAI;AAAA,UAAYA,MAAA,GAAA,EAAI,KAAK,KAAK;AAAA,UAAc,QAAA,WAAQ,CAAA,YAAgBA,MAAA,GAAA,EAAI,eAAe,GAAG,IAAIA,MAAA,GAAA,EAAI,OAAO;AAAA,QAAA;;QAS1MC,mBASE,SAAA;AAAA,UARC,SAAS,UAAA;AAAA,UACT,OAAKF,eAAA,CAAGC,MAAA,GAAA,EAAI,QAAQ,IAAI,CAAA;AAAA,UACxB,UAAU,MAAM;AAAA,UAChB,MAAM,MAAM;AAAA,UACb,KAAI;AAAA,UACH,iDAAD,MAAA;AAAA,UAAA,GAAc,CAAA,SAAA,CAAA;AAAA,UACb,IAAI,MAAM;AAAA,UACX,MAAK;AAAA,QAAA;QAGPC,mBAqBM,OAAA;AAAA,UApBH,OAAKF,eAAA;AAAA;YAAkDC,MAAA,GAAA,EAAI,SAAS;AAAA,YAAkBA,MAAA,GAAA,EAAI,QAAQ;AAAA,YAAcA,MAAA,GAAA,EAAI,MAAM;AAAA,YAAgBA,MAAA,GAAA,EAAI,MAAM;AAAA,YAAgBA,MAAA,GAAA,EAAI,KAAK,OAAO;AAAA,YAAaA,MAAA,GAAA,EAAI,OAAO,KAAK;AAAA,YAAa,UAAA,QAAS,CAAIA,MAAA,GAAA,EAAI,OAAO,MAAM,MAAMA,MAAA,GAAA,EAAI,GAAG,SAAS,IAAA,CAAKA,MAAA,GAAA,EAAI,OAAO,MAAM,SAASA,MAAA,GAAA,EAAI,GAAG,QAAQ,OAAO;AAAA,YAAWA,MAAA,GAAA,EAAI,OAAO,OAAO;AAAA,YAAiB,UAAA,SAAS;AAAA,YAAuB,QAAA,WAAWA,MAAA,GAAA,EAAI,OAAO,cAAcA,MAAA,GAAA,EAAI,OAAO;AAAA,UAAA;;UAkB7b,UAAA,sBAJRE,YAKEC,aAAA;AAAA;YAJC,uBAAQH,MAAA,GAAA,EAAI,KAAK,MAAM,SAAS,CAAA;AAAA,YAChC,MAAM,MAAM,gBAAgBA,MAAA,IAAA,EAAK,SAASA,MAAA,IAAA,EAAK;AAAA,YAC/C,MAAMA,MAAA,IAAA,EAAK;AAAA,UAAA;;QAeR,QAAA,sBAVRF,mBAmBQ,SAAA;AAAA;UAlBL,OAAKC,eAAA;AAAA,YAAYC,MAAA,GAAA,EAAI,QAAQ;AAAA,YAAcA,MAAA,GAAA,EAAI,MAAM;AAAA,YAAiBA,MAAA,GAAA,EAAI,KAAK,KAAK;AAAA,YAAYA,MAAA,GAAA,EAAI,KAAK,KAAK;AAAA,YAAgB,QAAA,WAAWA,MAAA,GAAA,EAAI,OAAO,cAAcA,MAAA,GAAA,EAAI,OAAO;AAAA,UAAA;UAO7K,KAAK,MAAM;AAAA,UACX,iDAAD,MAAA;AAAA,UAAA,GAAc,CAAA,SAAA,CAAA;AAAA,QAAA;UAGdC,mBAAwB,8BAAf,QAAA,KAAK,GAAA,CAAA;AAAA,UAGN,MAAM,uBAFdH,mBAKO,QAAA;AAAA;YAJJ,OAAKC,eAAA,CAAGC,WAAI,KAAK,MAAM,QAAQ,OAAO,CAAA;AAAA,UAAA,GAExC,uBACKA,MAAA,YAAA,EAAa,MAAM,MAAM,KAAI,MACnC,CAAA;;;;;;"}

package/dist/components/TideInputRadio.vue.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./TideInputRadio.vue2.js";
+/* empty css                    */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const TideInputRadio = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2346e8b9"]]);
+export {
+  TideInputRadio as default
+};
+//# sourceMappingURL=TideInputRadio.vue.js.map

package/dist/components/TideInputRadio.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TideInputRadio.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/TideInputRadio.vue2.js

@@ -0,0 +1,84 @@
+import { defineComponent, useModel, computed, openBlock, createElementBlock, normalizeClass, unref, withDirectives, createElementVNode, vModelRadio, toDisplayString, createCommentVNode, mergeModels } from "vue";
+import { CSS } from "../types/Styles.js";
+import { formatNumber } from "../utilities/format.js";
+const _hoisted_1 = ["for"];
+const _hoisted_2 = ["disabled", "name", "value", "id"];
+const __default__ = {};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "TideInputRadio",
+  props: /* @__PURE__ */ mergeModels({
+    disabled: { type: Boolean, default: false },
+    inputId: { default: void 0 },
+    label: { default: void 0 },
+    name: {},
+    number: { default: void 0 },
+    value: {}
+  }, {
+    "modelValue": { required: true },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    const isChecked = computed(() => modelValue.value === props.value);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("label", {
+        class: normalizeClass([
+          "tide-input-radio",
+          unref(CSS).DISPLAY.FLEX,
+          unref(CSS).AXIS2.CENTER,
+          unref(CSS).GAP.HALF,
+          unref(CSS).USER_SELECT.NONE,
+          props.disabled ? [unref(CSS).OPACITY.DISABLED, unref(CSS).CURSOR.NOT_ALLOWED] : [unref(CSS).CURSOR.POINTER]
+        ]),
+        for: props.inputId
+      }, [
+        withDirectives(createElementVNode("input", {
+          class: normalizeClass(["tide-screen-reader-only"]),
+          disabled: __props.disabled,
+          name: __props.name,
+          value: __props.value,
+          id: props.inputId,
+          type: "radio",
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event)
+        }, null, 8, _hoisted_2), [
+          [vModelRadio, modelValue.value]
+        ]),
+        createElementVNode("div", {
+          class: normalizeClass([
+            "tide-input-radio-custom",
+            unref(CSS).POSITION.RELATIVE,
+            unref(CSS).DISPLAY.FLEX,
+            unref(CSS).AXIS1.CENTER,
+            unref(CSS).AXIS2.CENTER,
+            unref(CSS).BORDER.FULL.ONE,
+            isChecked.value ? [unref(CSS).BORDER.COLOR.HIGH] : [unref(CSS).BORDER.COLOR.DEFAULT],
+            unref(CSS).BORDER.RADIUS.FULL,
+            unref(CSS).BG.SURFACE.DEFAULT,
+            unref(CSS).CURSOR.POINTER,
+            unref(CSS).POINTER_EVENTS.ON
+          ])
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(["tide-input-radio-check", unref(CSS).BORDER.RADIUS.FULL, isChecked.value && unref(CSS).BG.SECONDARY])
+          }, null, 2)
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass([unref(CSS).DISPLAY.FLEX, unref(CSS).FLEX.GROW.ON, unref(CSS).AXIS1.BETWEEN, unref(CSS).FONT.ROLE.BODY_1])
+        }, [
+          createElementVNode("span", null, toDisplayString(__props.label), 1),
+          props.number ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            class: normalizeClass([unref(CSS).FONT.COLOR.SURFACE.VARIANT])
+          }, " (" + toDisplayString(unref(formatNumber)(props.number)) + ") ", 3)) : createCommentVNode("", true)
+        ], 2)
+      ], 10, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=TideInputRadio.vue2.js.map

package/dist/components/TideInputRadio.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TideInputRadio.vue2.js","sources":["../../src/components/TideInputRadio.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * Renders an input radio component.\n   *\n   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideinputradio--docs) for TideInputRadio\n   */\n  export default {};\n</script>\n\n<script lang=\"ts\" setup>\n  import { computed } from 'vue';\n\n  import { CSS } from '@/types/Styles';\n  import { formatNumber } from '@/utilities/format';\n\n  type Props = {\n    /** Determines whether input is interactable */\n    disabled?: boolean;\n\n    /** Unique ID attribute (to bind input label to input) */\n    inputId?: string;\n\n    /** Label content */\n    label: string;\n\n    /** Name attribute */\n    name: string;\n\n    /** Parenthetical response count */\n    number?: number;\n\n    /** Value attribute */\n    value: string;\n  };\n\n  const props = withDefaults(defineProps<Props>(), {\n    disabled: false,\n    inputId: undefined,\n    label: undefined,\n    number: undefined,\n  });\n\n  const modelValue = defineModel<string>({ required: true });\n\n  const isChecked = computed(() => modelValue.value === props.value);\n</script>\n\n<template>\n  <label\n    :class=\"[\n      'tide-input-radio',\n      CSS.DISPLAY.FLEX,\n      CSS.AXIS2.CENTER,\n      CSS.GAP.HALF,\n      CSS.USER_SELECT.NONE,\n      props.disabled ? [CSS.OPACITY.DISABLED, CSS.CURSOR.NOT_ALLOWED] : [CSS.CURSOR.POINTER],\n    ]\"\n    :for=\"props.inputId\"\n  >\n    <input\n      :class=\"['tide-screen-reader-only']\"\n      :disabled=\"disabled\"\n      :name=\"name\"\n      :value=\"value\"\n      :id=\"props.inputId\"\n      type=\"radio\"\n      v-model=\"modelValue\"\n    />\n\n    <div\n      :class=\"[\n        'tide-input-radio-custom',\n        CSS.POSITION.RELATIVE,\n        CSS.DISPLAY.FLEX,\n        CSS.AXIS1.CENTER,\n        CSS.AXIS2.CENTER,\n        CSS.BORDER.FULL.ONE,\n        isChecked ? [CSS.BORDER.COLOR.HIGH] : [CSS.BORDER.COLOR.DEFAULT],\n        CSS.BORDER.RADIUS.FULL,\n        CSS.BG.SURFACE.DEFAULT,\n        CSS.CURSOR.POINTER,\n        CSS.POINTER_EVENTS.ON,\n      ]\"\n    >\n      <div :class=\"['tide-input-radio-check', CSS.BORDER.RADIUS.FULL, isChecked && CSS.BG.SECONDARY]\" />\n    </div>\n\n    <div :class=\"[CSS.DISPLAY.FLEX, CSS.FLEX.GROW.ON, CSS.AXIS1.BETWEEN, CSS.FONT.ROLE.BODY_1]\">\n      <span>{{ label }}</span>\n      <span\n        :class=\"[CSS.FONT.COLOR.SURFACE.VARIANT]\"\n        v-if=\"props.number\"\n      >\n        ({{ formatNumber(props.number) }})\n      </span>\n    </div>\n  </label>\n</template>\n\n<style scoped>\n  .tide-input-radio-custom {\n    width: 24px;\n    height: 24px;\n  }\n\n  .tide-input-radio-check {\n    width: 16px;\n    height: 16px;\n  }\n\n  label:has(input:focus-visible) {\n    outline: auto;\n    outline-offset: 2px;\n  }\n</style>\n"],"names":["_useModel","_createElementBlock","_normalizeClass","_unref","_createElementVNode"],"mappings":";;;;;AAME,MAAA,cAAe,CAAA;;;;;;;;;;;;;;;;;AA6Bf,UAAM,QAAQ;AAOd,UAAM,aAAaA,8BAAsC;AAEzD,UAAM,YAAY,SAAS,MAAM,WAAW,UAAU,MAAM,KAAK;;0BAIjEC,mBAgDQ,SAAA;AAAA,QA/CL,OAAKC,eAAA;AAAA;UAAoCC,MAAA,GAAA,EAAI,QAAQ;AAAA,UAAYA,MAAA,GAAA,EAAI,MAAM;AAAA,UAAcA,MAAA,GAAA,EAAI,IAAI;AAAA,UAAYA,MAAA,GAAA,EAAI,YAAY;AAAA,UAAY,MAAM,WAAQ,CAAIA,WAAI,QAAQ,UAAUA,WAAI,OAAO,WAAW,IAAA,CAAKA,WAAI,OAAO,OAAO;AAAA,QAAA;QAQ9N,KAAK,MAAM;AAAA,MAAA;uBAEZC,mBAQE,SAAA;AAAA,UAPC,sBAAO,CAAA,yBAAA,CAA2B;AAAA,UAClC,UAAU,QAAA;AAAA,UACV,MAAM,QAAA;AAAA,UACN,OAAO,QAAA;AAAA,UACP,IAAI,MAAM;AAAA,UACX,MAAK;AAAA,uEACI,WAAU,QAAA;AAAA,QAAA;wBAAV,WAAA,KAAU;AAAA,QAAA;QAGrBA,mBAgBM,OAAA;AAAA,UAfH,OAAKF,eAAA;AAAA;YAA+CC,MAAA,GAAA,EAAI,SAAS;AAAA,YAAkBA,MAAA,GAAA,EAAI,QAAQ;AAAA,YAAcA,MAAA,GAAA,EAAI,MAAM;AAAA,YAAgBA,MAAA,GAAA,EAAI,MAAM;AAAA,YAAgBA,MAAA,GAAA,EAAI,OAAO,KAAK;AAAA,YAAa,UAAA,QAAS,CAAIA,MAAA,GAAA,EAAI,OAAO,MAAM,IAAI,IAAA,CAAKA,WAAI,OAAO,MAAM,OAAO;AAAA,YAAWA,MAAA,GAAA,EAAI,OAAO,OAAO;AAAA,YAAcA,MAAA,GAAA,EAAI,GAAG,QAAQ;AAAA,YAAiBA,MAAA,GAAA,EAAI,OAAO;AAAA,YAAiBA,MAAA,GAAA,EAAI,eAAe;AAAA,UAAA;;UAcxXC,mBAAkG,OAAA;AAAA,YAA5F,OAAKF,eAAA,CAAA,0BAA6BC,MAAA,GAAA,EAAI,OAAO,OAAO,MAAM,mBAAaA,MAAA,GAAA,EAAI,GAAG,SAAS,CAAA;AAAA,UAAA;;QAG/FC,mBAQM,OAAA;AAAA,UARA,OAAKF,eAAA,CAAGC,MAAA,GAAA,EAAI,QAAQ,MAAMA,MAAA,GAAA,EAAI,KAAK,KAAK,IAAIA,MAAA,GAAA,EAAI,MAAM,SAASA,MAAA,GAAA,EAAI,KAAK,KAAK,MAAM,CAAA;AAAA,QAAA;UACvFC,mBAAwB,8BAAf,QAAA,KAAK,GAAA,CAAA;AAAA,UAGN,MAAM,uBAFdH,mBAKO,QAAA;AAAA;YAJJ,OAAKC,eAAA,CAAGC,WAAI,KAAK,MAAM,QAAQ,OAAO,CAAA;AAAA,UAAA,GAExC,uBACKA,MAAA,YAAA,EAAa,MAAM,MAAM,KAAI,MACnC,CAAA;;;;;;"}

package/dist/components/TideInputRadioDeprecated.vue.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./TideInputRadioDeprecated.vue2.js";
+/* empty css                              */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const TideInputRadioDeprecated = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bde66757"]]);
+export {
+  TideInputRadioDeprecated as default
+};
+//# sourceMappingURL=TideInputRadioDeprecated.vue.js.map

package/dist/components/TideInputRadioDeprecated.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TideInputRadioDeprecated.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/TideInputRadioDeprecated.vue2.js

@@ -0,0 +1,92 @@
+import { defineComponent, ref, watch, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, toDisplayString, createCommentVNode } from "vue";
+import { CSS } from "../types/Styles.js";
+import { formatNumber } from "../utilities/format.js";
+const _hoisted_1 = ["checked", "id"];
+const _hoisted_2 = ["for"];
+const __default__ = {};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "TideInputRadioDeprecated",
+  props: {
+    checked: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    inputId: { default: void 0 },
+    label: { default: void 0 },
+    name: { default: void 0 },
+    number: { default: void 0 }
+  },
+  setup(__props) {
+    const props = __props;
+    const checked = ref(props.checked);
+    watch(
+      () => props.checked,
+      (newValue, oldValue) => {
+        if (newValue !== oldValue || newValue !== checked.value) {
+          checked.value = newValue;
+        }
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "tide-input-radio",
+          unref(CSS).DISPLAY.FLEX,
+          unref(CSS).AXIS2.CENTER,
+          unref(CSS).GAP.HALF,
+          unref(CSS).POINTER_EVENTS.OFF,
+          props.disabled && "disabled"
+        ])
+      }, [
+        createElementVNode("input", {
+          checked: checked.value,
+          class: normalizeClass([unref(CSS).DISPLAY.NONE]),
+          id: props.inputId,
+          name: "",
+          type: "radio",
+          value: ""
+        }, null, 10, _hoisted_1),
+        createElementVNode("div", {
+          class: normalizeClass([
+            "tide-input-radio-custom",
+            unref(CSS).POSITION.RELATIVE,
+            unref(CSS).DISPLAY.FLEX,
+            unref(CSS).AXIS1.CENTER,
+            unref(CSS).AXIS2.CENTER,
+            unref(CSS).BORDER.FULL.ONE,
+            checked.value ? unref(CSS).BORDER.COLOR.HIGH : unref(CSS).BORDER.COLOR.DEFAULT,
+            unref(CSS).BORDER.RADIUS.FULL,
+            unref(CSS).BG.SURFACE.DEFAULT,
+            unref(CSS).CURSOR.POINTER,
+            unref(CSS).POINTER_EVENTS.ON,
+            checked.value && "checked"
+          ])
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(["tide-input-radio-check", unref(CSS).BORDER.RADIUS.FULL, props.checked && unref(CSS).BG.SECONDARY])
+          }, null, 2)
+        ], 2),
+        createElementVNode("label", {
+          class: normalizeClass([
+            unref(CSS).DISPLAY.FLEX,
+            unref(CSS).FLEX.GROW.ON,
+            unref(CSS).AXIS1.BETWEEN,
+            unref(CSS).FONT.ROLE.BODY_1,
+            unref(CSS).CURSOR.POINTER,
+            unref(CSS).POINTER_EVENTS.ON
+          ]),
+          for: props.inputId
+        }, [
+          createElementVNode("span", null, toDisplayString(__props.label), 1),
+          props.number ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            class: normalizeClass([unref(CSS).FONT.COLOR.SURFACE.VARIANT])
+          }, " (" + toDisplayString(unref(formatNumber)(props.number)) + ") ", 3)) : createCommentVNode("", true)
+        ], 10, _hoisted_2)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=TideInputRadioDeprecated.vue2.js.map

package/dist/components/TideInputRadioDeprecated.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TideInputRadioDeprecated.vue2.js","sources":["../../src/components/TideInputRadioDeprecated.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * @deprecated Use `TideInputRadio.vue` imported from 'tide-design-system' npm package instead.\n   */\n  export default {};\n</script>\n\n<script lang=\"ts\" setup>\n  import { ref, watch } from 'vue';\n\n  import { CSS } from '@/types/Styles';\n  import { formatNumber } from '@/utilities/format';\n\n  type Props = {\n    checked?: boolean;\n    disabled?: boolean;\n    inputId?: string;\n    label?: string;\n    name?: string;\n    number?: number;\n  };\n\n  const props = withDefaults(defineProps<Props>(), {\n    checked: false,\n    disabled: false,\n    inputId: undefined,\n    label: undefined,\n    name: undefined,\n    number: undefined,\n  });\n\n  const checked = ref(props.checked);\n\n  watch(\n    () => props.checked,\n    (newValue, oldValue) => {\n      if (newValue !== oldValue || newValue !== checked.value) {\n        checked.value = newValue;\n      }\n    }\n  );\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'tide-input-radio',\n      CSS.DISPLAY.FLEX,\n      CSS.AXIS2.CENTER,\n      CSS.GAP.HALF,\n      CSS.POINTER_EVENTS.OFF,\n      props.disabled && 'disabled',\n    ]\"\n  >\n    <input\n      :checked=\"checked\"\n      :class=\"[CSS.DISPLAY.NONE]\"\n      :id=\"props.inputId\"\n      name=\"\"\n      type=\"radio\"\n      value=\"\"\n    />\n\n    <div\n      :class=\"[\n        'tide-input-radio-custom',\n        CSS.POSITION.RELATIVE,\n        CSS.DISPLAY.FLEX,\n        CSS.AXIS1.CENTER,\n        CSS.AXIS2.CENTER,\n        CSS.BORDER.FULL.ONE,\n        checked ? CSS.BORDER.COLOR.HIGH : CSS.BORDER.COLOR.DEFAULT,\n        CSS.BORDER.RADIUS.FULL,\n        CSS.BG.SURFACE.DEFAULT,\n        CSS.CURSOR.POINTER,\n        CSS.POINTER_EVENTS.ON,\n        checked && 'checked',\n      ]\"\n    >\n      <div :class=\"['tide-input-radio-check', CSS.BORDER.RADIUS.FULL, props.checked && CSS.BG.SECONDARY]\" />\n    </div>\n\n    <label\n      :class=\"[\n        CSS.DISPLAY.FLEX,\n        CSS.FLEX.GROW.ON,\n        CSS.AXIS1.BETWEEN,\n        CSS.FONT.ROLE.BODY_1,\n        CSS.CURSOR.POINTER,\n        CSS.POINTER_EVENTS.ON,\n      ]\"\n      :for=\"props.inputId\"\n    >\n      <span>{{ label }}</span>\n      <span\n        :class=\"[CSS.FONT.COLOR.SURFACE.VARIANT]\"\n        v-if=\"props.number\"\n      >\n        ({{ formatNumber(props.number) }})\n      </span>\n    </label>\n  </div>\n</template>\n\n<style scoped>\n  .tide-input-radio.disabled {\n    opacity: var(--tide-disabled);\n  }\n\n  .tide-input-radio-custom {\n    width: 24px;\n    height: 24px;\n  }\n\n  .tide-input-radio-check {\n    width: 16px;\n    height: 16px;\n  }\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_unref","_createElementVNode"],"mappings":";;;;;AAIE,MAAA,cAAe,CAAA;;;;;;;;;;;;;AAkBf,UAAM,QAAQ;AASd,UAAM,UAAU,IAAI,MAAM,OAAO;AAEjC;AAAA,MACE,MAAM,MAAM;AAAA,MACZ,CAAC,UAAU,aAAa;AACtB,YAAI,aAAa,YAAY,aAAa,QAAQ,OAAO;AACvD,kBAAQ,QAAQ;AAAA,QAClB;AAAA,MACF;AAAA,IAAA;;0BAKFA,mBAyDM,OAAA;AAAA,QAxDH,OAAKC,eAAA;AAAA;UAAoCC,MAAA,GAAA,EAAI,QAAQ;AAAA,UAAYA,MAAA,GAAA,EAAI,MAAM;AAAA,UAAcA,MAAA,GAAA,EAAI,IAAI;AAAA,UAAYA,MAAA,GAAA,EAAI,eAAe;AAAA,UAAW,MAAM,YAAQ;AAAA,QAAA;;QAS1JC,mBAOE,SAAA;AAAA,UANC,SAAS,QAAA;AAAA,UACT,OAAKF,eAAA,CAAGC,MAAA,GAAA,EAAI,QAAQ,IAAI,CAAA;AAAA,UACxB,IAAI,MAAM;AAAA,UACX,MAAK;AAAA,UACL,MAAK;AAAA,UACL,OAAM;AAAA,QAAA;QAGRC,mBAiBM,OAAA;AAAA,UAhBH,OAAKF,eAAA;AAAA;YAA+CC,MAAA,GAAA,EAAI,SAAS;AAAA,YAAkBA,MAAA,GAAA,EAAI,QAAQ;AAAA,YAAcA,MAAA,GAAA,EAAI,MAAM;AAAA,YAAgBA,MAAA,GAAA,EAAI,MAAM;AAAA,YAAgBA,MAAA,GAAA,EAAI,OAAO,KAAK;AAAA,YAAa,QAAA,QAAUA,MAAA,GAAA,EAAI,OAAO,MAAM,OAAOA,WAAI,OAAO,MAAM;AAAA,YAAiBA,MAAA,GAAA,EAAI,OAAO,OAAO;AAAA,YAAcA,MAAA,GAAA,EAAI,GAAG,QAAQ;AAAA,YAAiBA,MAAA,GAAA,EAAI,OAAO;AAAA,YAAiBA,MAAA,GAAA,EAAI,eAAe;AAAA,YAAY,QAAA,SAAO;AAAA,UAAA;;UAerYC,mBAAsG,OAAA;AAAA,YAAhG,iDAAkCD,MAAA,GAAA,EAAI,OAAO,OAAO,MAAM,MAAM,WAAWA,WAAI,GAAG,SAAS,CAAA;AAAA,UAAA;;QAGnGC,mBAkBQ,SAAA;AAAA,UAjBL,OAAKF,eAAA;AAAA,YAAYC,MAAA,GAAA,EAAI,QAAQ;AAAA,YAAcA,MAAA,GAAA,EAAI,KAAK,KAAK;AAAA,YAAYA,MAAA,GAAA,EAAI,MAAM;AAAA,YAAiBA,MAAA,GAAA,EAAI,KAAK,KAAK;AAAA,YAAgBA,MAAA,GAAA,EAAI,OAAO;AAAA,YAAiBA,MAAA,GAAA,EAAI,eAAe;AAAA,UAAA;UAQ7K,KAAK,MAAM;AAAA,QAAA;UAEZC,mBAAwB,8BAAf,QAAA,KAAK,GAAA,CAAA;AAAA,UAGN,MAAM,uBAFdH,mBAKO,QAAA;AAAA;YAJJ,OAAKC,eAAA,CAAGC,WAAI,KAAK,MAAM,QAAQ,OAAO,CAAA;AAAA,UAAA,GAExC,uBACKA,MAAA,YAAA,EAAa,MAAM,MAAM,KAAI,MACnC,CAAA;;;;;;"}

package/dist/components/TideInputSelect.vue.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./TideInputSelect.vue2.js";
+/* empty css                     */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const TideInputSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5a079d8b"]]);
+export {
+  TideInputSelect as default
+};
+//# sourceMappingURL=TideInputSelect.vue.js.map

package/dist/components/TideInputSelect.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TideInputSelect.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}