@leaflink/stash 44.0.0-beta.1 → 44.0.0-beta.2

package/dist/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import isNil from 'lodash-es/isNil';\n  import { computed, onMounted, ref, useAttrs, useCssModule, useSlots, watchEffect } from 'vue';\n\n  import { convertDecimal, decimalSeparator, sanitizeDecimal } from '../../utils/i18n';\n  import Field from '../Field/Field.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export type InputValue = string | number | undefined;\n\n  export interface InputProps {\n    /**\n     * Adds spacing under the field that is consistent whether or not hint/error text is displayed.\n     */\n    addBottomSpace?: boolean;\n\n    /**\n     * Error text to display. Replaces `hintText` (if provided) & adds error styling.\n     */\n    errorText?: string;\n\n    /**\n     * Displays text below the input; hidden when the isReadOnly prop is truthy.\n     */\n    hintText?: string;\n\n    /**\n     * ID for the Label and Input; must be unique\n     */\n    id?: string;\n\n    /**\n     * Label to render above the input.\n     */\n    label?: string;\n\n    /**\n     * Show \"(optional)\" to the right of the label text\n     */\n    showOptionalInLabel?: boolean;\n\n    /**\n     * Autocomplete takes in a string of off or on\n     */\n    autocomplete?: string;\n\n    /**\n     * Value for the input element.\n     */\n    modelValue?: string | number;\n\n    /**\n     * @deprecated Use :model-value or v-model instead of :value.\n     */\n    value?: string | number | null;\n\n    /**\n     * Input type. Excludes certain types that have a dedicated component.\n     *\n     * Note: For distinguishing between text & number internally, passing `number`\n     * will still render an input with a type of `text` (for localization).\n     */\n    type?: string extends 'button' | 'checkbox' | 'radio' | 'submit' ? never : string;\n  }\n\n  defineOptions({\n    name: 'll-input',\n    inheritAttrs: false,\n  });\n\n  const props = withDefaults(defineProps<InputProps>(), {\n    autocomplete: 'off',\n    type: 'text',\n    modelValue: '',\n    value: null,\n    errorText: undefined,\n    hintText: undefined,\n    label: undefined,\n    id: undefined,\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * Emitted when the input value changes.\n       */\n      (e: 'update:model-value', v: string | number): void;\n      /**\n       * Emitted when the input value changes.\n       */\n      (e: 'change', v: string | number): void;\n      /**\n       * Emitted when the input is focused\n       */\n      (e: 'focus', evt: Event): void;\n      /**\n       * Emitted when the input is blurred\n       */\n      (e: 'blur', evt: Event): void;\n    }>();\n\n  const slots = useSlots();\n  const classes = useCssModule();\n  const attrs = useAttrs();\n\n  // declare a ref to hold the element reference\n  // the name must match template ref value\n  const inputEl = ref<HTMLInputElement>();\n\n  // this exposes the input ref to any parent that renders the `Input` component\n  // and gives it a template ref, giving parent components access to the DOM element.\n  defineExpose({ inputEl });\n\n  const internalValue = ref<string | number>(props.modelValue);\n\n  if (props.type === 'number' && (props.modelValue || props.modelValue === 0)) {\n    internalValue.value = convertDecimal(props.modelValue, decimalSeparator);\n  }\n\n  const showPassword = ref(false);\n\n  const isNumber = computed(() => props.type === 'number');\n\n  const inputAttrs = computed(() => {\n    const tempAttrs = { ...attrs };\n\n    delete tempAttrs.class;\n\n    return tempAttrs;\n  });\n\n  const inputType = computed(() => {\n    // type 'number' is a special use case and requires\n    // that the type be 'text' to support internationalization\n    if (isNumber.value) {\n      return 'text';\n    }\n\n    if (props.type === 'password' && showPassword.value) {\n      return 'text';\n    }\n\n    return props.type;\n  });\n\n  watchEffect(() => {\n    internalValue.value = format(props.modelValue);\n  });\n\n  /**\n   * Converts the localized number to a valid number (to emit). i.e. 12,50 > 12.50\n   *\n   * @param {string|number} value - Number you want to parse.\n   * @returns {number|string} number or empty string (for empty input)\n   */\n  function parseNumber(value: string | number = '', isUserTyping = false): string | number {\n    // If this isn't a number input, we shouldn't be calling this function\n    if (!isNumber.value) {\n      return value;\n    }\n\n    let tempValue = value;\n\n    // If blank, just stop\n    if (isNil(tempValue) || `${tempValue}`.length === 0) return '';\n\n    // clean out different locale decimals\n    if (decimalSeparator !== '.') {\n      tempValue = convertDecimal(tempValue, '.');\n    }\n\n    // If the user is in the middle of an input, let them finish the number\n    if (isUserTyping) {\n      // Prefix values with a 0 if the user starts with a decimal point\n      if (tempValue === '.') tempValue = '0.';\n\n      // This is to prevent the parsing from correcting 0. to 0 and causing the value to be reset\n      if (tempValue.toString().startsWith('0.')) return tempValue;\n    }\n\n    // Empty or null values convert to 0 with NumberFormat, so return '';\n    if (!isNil(tempValue) && `${tempValue}`.length) {\n      tempValue = Intl.NumberFormat('en-US', {\n        style: 'decimal',\n        maximumFractionDigits: 7,\n        useGrouping: false,\n      }).format(Number(tempValue));\n    } else {\n      return '';\n    }\n\n    // Ensure valid number, otherwise clear value\n    return isNaN(Number(tempValue)) ? '' : parseFloat(tempValue);\n  }\n\n  /**\n   * Formats the input based on conditions\n   *\n   * @param {number|string} value - The value to format.\n   */\n  function format(value: string | number) {\n    if (isNumber.value) {\n      return sanitizeDecimal(value, decimalSeparator);\n    }\n\n    return value;\n  }\n\n  /**\n   * Fire after focusing out of input, if value has changed.\n   */\n  function handleChange() {\n    // Parse the final value on blur\n    const parsedValue = isNumber.value ? parseNumber(internalValue.value) : internalValue.value;\n    emit('change', parsedValue);\n  }\n\n  /**\n   * Fired when typing on input.\n   */\n  function handleInput(e: Event) {\n    const value = (e.target as HTMLInputElement).value;\n\n    // Update the internal value with a sanitized version\n    internalValue.value = format(value);\n\n    const parsedValue = isNumber.value ? parseNumber(internalValue.value, true) : value;\n\n    emit('update:model-value', parsedValue);\n  }\n\n  onMounted(() => {\n    if (props.value !== null) {\n      throw new Error('ll-input: use :model-value or v-model instead of :value.');\n    }\n\n    if (attrs.onInput) {\n      throw new Error('ll-input: use the @update:model-value event instead of @input');\n    }\n  });\n</script>\n\n<template>\n  <Field v-bind=\"props\" class=\"stash-input\" :class=\"[classes.root, attrs.class]\" data-test=\"ll-input\">\n    <template #default=\"{ fieldId, fieldErrorId, hasError }\">\n      <div class=\"relative\">\n        <input\n          v-bind=\"inputAttrs\"\n          :id=\"fieldId\"\n          ref=\"inputEl\"\n          v-model=\"internalValue\"\n          :aria-errormessage=\"fieldErrorId\"\n          :aria-invalid=\"hasError\"\n          :autocomplete=\"autocomplete\"\n          :class=\"[\n            { [classes['input-prepended']]: !!slots.prepend },\n            { [classes['input-appended']]: !!slots.append || props.type === 'password' },\n            { [classes['has-error']]: !!props.errorText },\n          ]\"\n          :type=\"inputType\"\n          @change=\"handleChange\"\n          @input=\"handleInput\"\n          @blur=\"(evt) => emit('blur', evt)\"\n          @focus=\"(evt) => emit('focus', evt)\"\n        />\n\n        <div\n          v-if=\"slots.prepend\"\n          class=\"stash-input-prepend font-semibold\"\n          :class=\"[classes.symbol, classes['symbol--prepend']]\"\n        >\n          <!-- @slot renders content on the left side of the input -->\n          <slot name=\"prepend\"> </slot>\n        </div>\n\n        <div\n          v-if=\"slots.append || props.type === 'password'\"\n          class=\"stash-input-append font-semibold\"\n          :class=\"[classes.symbol, classes['symbol--append']]\"\n        >\n          <!-- @slot renders content on the right side of the input -->\n          <slot v-if=\"slots.append\" name=\"append\"></slot>\n          <Icon\n            v-else\n            :name=\"showPassword ? 'hide' : 'show'\"\n            class=\"cursor-pointer\"\n            :data-test=\"showPassword ? 'hide-password-icon' : 'show-password-icon'\"\n            @click=\"showPassword = !showPassword\"\n          />\n        </div>\n      </div>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style module>\n  .root {\n    position: relative;\n  }\n\n  .root input {\n    background: var(--color-white);\n    border: 1px solid var(--color-ice);\n    border-radius: var(--border-radius);\n    color: var(--color-ice-700);\n    display: block;\n    height: var(--input-height);\n    font-size: var(--input-font-size);\n    font-weight: var(--font-weight-normal);\n    outline: none;\n    padding: 0 var(--ll-space-2);\n    width: 100%;\n  }\n\n  .root input:hover {\n    border-color: var(--color-ice);\n  }\n\n  .root input:active,\n  .root input:focus {\n    border-color: var(--color-blue);\n  }\n\n  .root input::placeholder {\n    color: var(--color-ice);\n    opacity: 1;\n  }\n\n  .root input.has-error:not(:focus) {\n    border-color: var(--color-red);\n  }\n\n  .root input.input-prepended {\n    padding-left: 36px;\n  }\n\n  .root input.input-appended {\n    padding-right: 36px;\n  }\n\n  .root input[disabled],\n  .root input[readonly] {\n    background-color: var(--color-ice-200) !important;\n    border-color: var(--color-ice) !important;\n    color: var(--color-ice-700) !important;\n    pointer-events: none;\n  }\n\n  .root input[disabled]:active,\n  .root input[readonly]:active,\n  .root input[disabled]:focus,\n  .root input[readonly]:focus {\n    box-shadow: none !important;\n  }\n\n  .root input[disabled]::placeholder,\n  .root input[readonly]::placeholder {\n    text-transform: none;\n  }\n\n  .symbol {\n    align-items: center;\n    display: flex;\n    height: var(--input-height);\n    justify-content: center;\n    overflow: hidden;\n    position: absolute;\n    top: 0;\n    width: var(--input-height);\n  }\n\n  .symbol--prepend {\n    border-bottom-left-radius: var(--border-radius);\n    border-top-left-radius: var(--border-radius);\n    left: 0;\n  }\n\n  .symbol--append {\n    border-bottom-right-radius: var(--border-radius);\n    border-top-right-radius: var(--border-radius);\n    right: 0;\n  }\n</style>\n"],"names":["slots","useSlots","classes","useCssModule","attrs","useAttrs","inputEl","ref","__expose","internalValue","props","convertDecimal","decimalSeparator","showPassword","isNumber","computed","inputAttrs","tempAttrs","inputType","watchEffect","format","parseNumber","value","isUserTyping","tempValue","isNil","sanitizeDecimal","handleChange","parsedValue","emit","handleInput","e","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAqGQA,IAAQC,KACRC,IAAUC,KACVC,IAAQC,KAIRC,IAAUC;AAIH,IAAAC,EAAA,EAAE,SAAAF,GAAS;AAElB,UAAAG,IAAgBF,EAAqBG,EAAM,UAAU;AAE3D,IAAIA,EAAM,SAAS,aAAaA,EAAM,cAAcA,EAAM,eAAe,OACvED,EAAc,QAAQE,EAAeD,EAAM,YAAYE,CAAgB;AAGnE,UAAAC,IAAeN,EAAI,EAAK,GAExBO,IAAWC,EAAS,MAAML,EAAM,SAAS,QAAQ,GAEjDM,IAAaD,EAAS,MAAM;AAC1B,YAAAE,IAAY,EAAE,GAAGb;AAEvB,oBAAOa,EAAU,OAEVA;AAAA,IAAA,CACR,GAEKC,IAAYH,EAAS,MAGrBD,EAAS,SAITJ,EAAM,SAAS,cAAcG,EAAa,QACrC,SAGFH,EAAM,IACd;AAED,IAAAS,EAAY,MAAM;AACF,MAAAV,EAAA,QAAQW,EAAOV,EAAM,UAAU;AAAA,IAAA,CAC9C;AAQD,aAASW,EAAYC,IAAyB,IAAIC,IAAe,IAAwB;AAEnF,UAAA,CAACT,EAAS;AACL,eAAAQ;AAGT,UAAIE,IAAYF;AAGhB,UAAIG,EAAMD,CAAS,KAAK,GAAGA,CAAS,GAAG,WAAW;AAAU,eAAA;AAQ5D,UALIZ,MAAqB,QACXY,IAAAb,EAAea,GAAW,GAAG,IAIvCD,MAEEC,MAAc,QAAiBA,IAAA,OAG/BA,EAAU,WAAW,WAAW,IAAI;AAAU,eAAAA;AAIpD,UAAI,CAACC,EAAMD,CAAS,KAAK,GAAGA,CAAS,GAAG;AAC1B,QAAAA,IAAA,KAAK,aAAa,SAAS;AAAA,UACrC,OAAO;AAAA,UACP,uBAAuB;AAAA,UACvB,aAAa;AAAA,QACd,CAAA,EAAE,OAAO,OAAOA,CAAS,CAAC;AAAA;AAEpB,eAAA;AAIT,aAAO,MAAM,OAAOA,CAAS,CAAC,IAAI,KAAK,WAAWA,CAAS;AAAA,IAC7D;AAOA,aAASJ,EAAOE,GAAwB;AACtC,aAAIR,EAAS,QACJY,EAAgBJ,GAAOV,CAAgB,IAGzCU;AAAA,IACT;AAKA,aAASK,IAAe;AAEtB,YAAMC,IAAcd,EAAS,QAAQO,EAAYZ,EAAc,KAAK,IAAIA,EAAc;AACtF,MAAAoB,EAAK,UAAUD,CAAW;AAAA,IAC5B;AAKA,aAASE,EAAYC,GAAU;AACvB,YAAAT,IAASS,EAAE,OAA4B;AAG/B,MAAAtB,EAAA,QAAQW,EAAOE,CAAK;AAElC,YAAMM,IAAcd,EAAS,QAAQO,EAAYZ,EAAc,OAAO,EAAI,IAAIa;AAE9E,MAAAO,EAAK,sBAAsBD,CAAW;AAAA,IACxC;AAEA,WAAAI,EAAU,MAAM;AACV,UAAAtB,EAAM,UAAU;AACZ,cAAA,IAAI,MAAM,0DAA0D;AAG5E,UAAIN,EAAM;AACF,cAAA,IAAI,MAAM,+DAA+D;AAAA,IACjF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import isNil from 'lodash-es/isNil';\n  import { computed, onMounted, ref, useAttrs, useCssModule, useSlots, watchEffect } from 'vue';\n\n  import { convertDecimal, decimalSeparator, sanitizeDecimal } from '../../utils/i18n';\n  import Field from '../Field/Field.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export type InputValue = string | number | undefined;\n\n  export interface InputProps {\n    /**\n     * Adds spacing under the field that is consistent whether or not hint/error text is displayed.\n     */\n    addBottomSpace?: boolean;\n\n    /**\n     * Error text to display. Replaces `hintText` (if provided) & adds error styling.\n     */\n    errorText?: string;\n\n    /**\n     * Displays text below the input; hidden when the isReadOnly prop is truthy.\n     */\n    hintText?: string;\n\n    /**\n     * ID for the Label and Input; must be unique\n     */\n    id?: string;\n\n    /**\n     * Label to render above the input.\n     */\n    label?: string;\n\n    /**\n     * Show \"(optional)\" to the right of the label text\n     */\n    showOptionalInLabel?: boolean;\n\n    /**\n     * Autocomplete takes in a string of off or on\n     */\n    autocomplete?: string;\n\n    /**\n     * Value for the input element.\n     */\n    modelValue?: string | number;\n\n    /**\n     * @deprecated Use :model-value or v-model instead of :value.\n     */\n    value?: string | number | null;\n\n    /**\n     * Input type. Excludes certain types that have a dedicated component.\n     *\n     * Note: For distinguishing between text & number internally, passing `number`\n     * will still render an input with a type of `text` (for localization).\n     */\n    type?: string extends 'button' | 'checkbox' | 'radio' | 'submit' ? never : string;\n  }\n\n  defineOptions({\n    name: 'll-input',\n    inheritAttrs: false,\n  });\n\n  const props = withDefaults(defineProps<InputProps>(), {\n    autocomplete: 'off',\n    type: 'text',\n    modelValue: '',\n    value: null,\n    errorText: undefined,\n    hintText: undefined,\n    label: undefined,\n    id: undefined,\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * Emitted when the input value changes.\n       */\n      (e: 'update:model-value', v: string | number): void;\n      /**\n       * Emitted when the input value changes.\n       */\n      (e: 'change', v: string | number): void;\n      /**\n       * Emitted when the input is focused\n       */\n      (e: 'focus', evt: Event): void;\n      /**\n       * Emitted when the input is blurred\n       */\n      (e: 'blur', evt: Event): void;\n    }>();\n\n  const slots = useSlots();\n  const classes = useCssModule();\n  const attrs = useAttrs();\n\n  // declare a ref to hold the element reference\n  // the name must match template ref value\n  const inputEl = ref<HTMLInputElement>();\n\n  // this exposes the input ref to any parent that renders the `Input` component\n  // and gives it a template ref, giving parent components access to the DOM element.\n  defineExpose({ inputEl });\n\n  const internalValue = ref<string | number>(props.modelValue);\n\n  if (props.type === 'number' && (props.modelValue || props.modelValue === 0)) {\n    internalValue.value = convertDecimal(props.modelValue, decimalSeparator);\n  }\n\n  const showPassword = ref(false);\n\n  const isNumber = computed(() => props.type === 'number');\n\n  const inputAttrs = computed(() => {\n    const tempAttrs = { ...attrs };\n\n    delete tempAttrs.class;\n\n    return tempAttrs;\n  });\n\n  const inputType = computed(() => {\n    // type 'number' is a special use case and requires\n    // that the type be 'text' to support internationalization\n    if (isNumber.value) {\n      return 'text';\n    }\n\n    if (props.type === 'password' && showPassword.value) {\n      return 'text';\n    }\n\n    return props.type;\n  });\n\n  watchEffect(() => {\n    internalValue.value = format(props.modelValue);\n  });\n\n  /**\n   * Converts the localized number to a valid number (to emit). i.e. 12,50 > 12.50\n   *\n   * @param {string|number} value - Number you want to parse.\n   * @returns {number|string} number or empty string (for empty input)\n   */\n  function parseNumber(value: string | number = '', isUserTyping = false): string | number {\n    // If this isn't a number input, we shouldn't be calling this function\n    if (!isNumber.value) {\n      return value;\n    }\n\n    let tempValue = value;\n\n    // If blank, just stop\n    if (isNil(tempValue) || `${tempValue}`.length === 0) return '';\n\n    // clean out different locale decimals\n    if (decimalSeparator !== '.') {\n      tempValue = convertDecimal(tempValue, '.');\n    }\n\n    // If the user is in the middle of an input, let them finish the number\n    if (isUserTyping) {\n      // Prefix values with a 0 if the user starts with a decimal point\n      if (tempValue === '.') tempValue = '0.';\n\n      // This is to prevent the parsing from correcting 0. to 0 and causing the value to be reset\n      if (tempValue.toString().startsWith('0.')) return tempValue;\n    }\n\n    // Empty or null values convert to 0 with NumberFormat, so return '';\n    if (!isNil(tempValue) && `${tempValue}`.length) {\n      tempValue = Intl.NumberFormat('en-US', {\n        style: 'decimal',\n        maximumFractionDigits: 7,\n        useGrouping: false,\n      }).format(Number(tempValue));\n    } else {\n      return '';\n    }\n\n    // Ensure valid number, otherwise clear value\n    return isNaN(Number(tempValue)) ? '' : parseFloat(tempValue);\n  }\n\n  /**\n   * Formats the input based on conditions\n   *\n   * @param {number|string} value - The value to format.\n   */\n  function format(value: string | number) {\n    if (isNumber.value) {\n      return sanitizeDecimal(value, decimalSeparator);\n    }\n\n    return value;\n  }\n\n  /**\n   * Fire after focusing out of input, if value has changed.\n   */\n  function handleChange() {\n    // Parse the final value on blur\n    const parsedValue = isNumber.value ? parseNumber(internalValue.value) : internalValue.value;\n    emit('change', parsedValue);\n  }\n\n  /**\n   * Fired when typing on input.\n   */\n  function handleInput(e: Event) {\n    const value = (e.target as HTMLInputElement).value;\n\n    // Update the internal value with a sanitized version\n    internalValue.value = format(value);\n\n    const parsedValue = isNumber.value ? parseNumber(internalValue.value, true) : value;\n\n    emit('update:model-value', parsedValue);\n  }\n\n  onMounted(() => {\n    if (props.value !== null) {\n      throw new Error('ll-input: use :model-value or v-model instead of :value.');\n    }\n\n    if (attrs.onInput) {\n      throw new Error('ll-input: use the @update:model-value event instead of @input');\n    }\n  });\n</script>\n\n<template>\n  <Field v-bind=\"props\" class=\"stash-input\" :class=\"[classes.root, attrs.class]\" data-test=\"ll-input\">\n    <template #default=\"{ fieldId, fieldErrorId, hasError }\">\n      <div class=\"relative\">\n        <input\n          v-bind=\"inputAttrs\"\n          :id=\"fieldId\"\n          ref=\"inputEl\"\n          v-model=\"internalValue\"\n          :aria-errormessage=\"fieldErrorId\"\n          :aria-invalid=\"hasError\"\n          :autocomplete=\"autocomplete\"\n          :class=\"[\n            { [classes['input-prepended']]: !!slots.prepend },\n            { [classes['input-appended']]: !!slots.append || props.type === 'password' },\n            { [classes['has-error']]: !!props.errorText },\n          ]\"\n          :type=\"inputType\"\n          @change=\"handleChange\"\n          @input=\"handleInput\"\n          @blur=\"(evt) => emit('blur', evt)\"\n          @focus=\"(evt) => emit('focus', evt)\"\n        />\n\n        <div\n          v-if=\"slots.prepend\"\n          class=\"stash-input-prepend font-semibold\"\n          :class=\"[classes.symbol, classes['symbol--prepend']]\"\n        >\n          <!-- @slot renders content on the left side of the input -->\n          <slot name=\"prepend\"> </slot>\n        </div>\n\n        <div\n          v-if=\"slots.append || props.type === 'password'\"\n          class=\"stash-input-append font-semibold\"\n          :class=\"[classes.symbol, classes['symbol--append']]\"\n        >\n          <!-- @slot renders content on the right side of the input -->\n          <slot v-if=\"slots.append\" name=\"append\"></slot>\n          <Icon\n            v-else\n            :name=\"showPassword ? 'hide' : 'show'\"\n            class=\"cursor-pointer\"\n            :data-test=\"showPassword ? 'hide-password-icon' : 'show-password-icon'\"\n            @click=\"showPassword = !showPassword\"\n          />\n        </div>\n      </div>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style module>\n  .root {\n    position: relative;\n  }\n\n  .root input {\n    background: var(--color-white);\n    border: 1px solid var(--color-ice-500);\n    border-radius: var(--border-radius);\n    color: var(--color-ice-700);\n    display: block;\n    height: var(--input-height);\n    font-size: var(--input-font-size);\n    font-weight: var(--font-weight-normal);\n    outline: none;\n    padding: 0 var(--ll-space-2);\n    width: 100%;\n  }\n\n  .root input:hover {\n    border-color: var(--color-ice-500);\n  }\n\n  .root input:active,\n  .root input:focus {\n    border-color: var(--color-blue-500);\n  }\n\n  .root input::placeholder {\n    color: var(--color-ice-500);\n    opacity: 1;\n  }\n\n  .root input.has-error:not(:focus) {\n    border-color: var(--color-red-500);\n  }\n\n  .root input.input-prepended {\n    padding-left: 36px;\n  }\n\n  .root input.input-appended {\n    padding-right: 36px;\n  }\n\n  .root input[disabled],\n  .root input[readonly] {\n    background-color: var(--color-ice-200) !important;\n    border-color: var(--color-ice-500) !important;\n    color: var(--color-ice-700) !important;\n    pointer-events: none;\n  }\n\n  .root input[disabled]:active,\n  .root input[readonly]:active,\n  .root input[disabled]:focus,\n  .root input[readonly]:focus {\n    box-shadow: none !important;\n  }\n\n  .root input[disabled]::placeholder,\n  .root input[readonly]::placeholder {\n    text-transform: none;\n  }\n\n  .symbol {\n    align-items: center;\n    display: flex;\n    height: var(--input-height);\n    justify-content: center;\n    overflow: hidden;\n    position: absolute;\n    top: 0;\n    width: var(--input-height);\n  }\n\n  .symbol--prepend {\n    border-bottom-left-radius: var(--border-radius);\n    border-top-left-radius: var(--border-radius);\n    left: 0;\n  }\n\n  .symbol--append {\n    border-bottom-right-radius: var(--border-radius);\n    border-top-right-radius: var(--border-radius);\n    right: 0;\n  }\n</style>\n"],"names":["slots","useSlots","classes","useCssModule","attrs","useAttrs","inputEl","ref","__expose","internalValue","props","convertDecimal","decimalSeparator","showPassword","isNumber","computed","inputAttrs","tempAttrs","inputType","watchEffect","format","parseNumber","value","isUserTyping","tempValue","isNil","sanitizeDecimal","handleChange","parsedValue","emit","handleInput","e","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAqGQA,IAAQC,KACRC,IAAUC,KACVC,IAAQC,KAIRC,IAAUC;AAIH,IAAAC,EAAA,EAAE,SAAAF,GAAS;AAElB,UAAAG,IAAgBF,EAAqBG,EAAM,UAAU;AAE3D,IAAIA,EAAM,SAAS,aAAaA,EAAM,cAAcA,EAAM,eAAe,OACvED,EAAc,QAAQE,EAAeD,EAAM,YAAYE,CAAgB;AAGnE,UAAAC,IAAeN,EAAI,EAAK,GAExBO,IAAWC,EAAS,MAAML,EAAM,SAAS,QAAQ,GAEjDM,IAAaD,EAAS,MAAM;AAC1B,YAAAE,IAAY,EAAE,GAAGb;AAEvB,oBAAOa,EAAU,OAEVA;AAAA,IAAA,CACR,GAEKC,IAAYH,EAAS,MAGrBD,EAAS,SAITJ,EAAM,SAAS,cAAcG,EAAa,QACrC,SAGFH,EAAM,IACd;AAED,IAAAS,EAAY,MAAM;AACF,MAAAV,EAAA,QAAQW,EAAOV,EAAM,UAAU;AAAA,IAAA,CAC9C;AAQD,aAASW,EAAYC,IAAyB,IAAIC,IAAe,IAAwB;AAEnF,UAAA,CAACT,EAAS;AACL,eAAAQ;AAGT,UAAIE,IAAYF;AAGhB,UAAIG,EAAMD,CAAS,KAAK,GAAGA,CAAS,GAAG,WAAW;AAAU,eAAA;AAQ5D,UALIZ,MAAqB,QACXY,IAAAb,EAAea,GAAW,GAAG,IAIvCD,MAEEC,MAAc,QAAiBA,IAAA,OAG/BA,EAAU,WAAW,WAAW,IAAI;AAAU,eAAAA;AAIpD,UAAI,CAACC,EAAMD,CAAS,KAAK,GAAGA,CAAS,GAAG;AAC1B,QAAAA,IAAA,KAAK,aAAa,SAAS;AAAA,UACrC,OAAO;AAAA,UACP,uBAAuB;AAAA,UACvB,aAAa;AAAA,QACd,CAAA,EAAE,OAAO,OAAOA,CAAS,CAAC;AAAA;AAEpB,eAAA;AAIT,aAAO,MAAM,OAAOA,CAAS,CAAC,IAAI,KAAK,WAAWA,CAAS;AAAA,IAC7D;AAOA,aAASJ,EAAOE,GAAwB;AACtC,aAAIR,EAAS,QACJY,EAAgBJ,GAAOV,CAAgB,IAGzCU;AAAA,IACT;AAKA,aAASK,IAAe;AAEtB,YAAMC,IAAcd,EAAS,QAAQO,EAAYZ,EAAc,KAAK,IAAIA,EAAc;AACtF,MAAAoB,EAAK,UAAUD,CAAW;AAAA,IAC5B;AAKA,aAASE,EAAYC,GAAU;AACvB,YAAAT,IAASS,EAAE,OAA4B;AAG/B,MAAAtB,EAAA,QAAQW,EAAOE,CAAK;AAElC,YAAMM,IAAcd,EAAS,QAAQO,EAAYZ,EAAc,OAAO,EAAI,IAAIa;AAE9E,MAAAO,EAAK,sBAAsBD,CAAW;AAAA,IACxC;AAEA,WAAAI,EAAU,MAAM;AACV,UAAAtB,EAAM,UAAU;AACZ,cAAA,IAAI,MAAM,0DAA0D;AAG5E,UAAIN,EAAM;AACF,cAAA,IAAI,MAAM,+DAA+D;AAAA,IACjF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/InputOptions.js

@@ -1,10 +1,10 @@
-import { defineComponent as B, useAttrs as S, useSlots as T, useCssModule as $, ref as d, computed as c, watchEffect as k, watch as v, openBlock as E, createBlock as b, mergeProps as m, createSlots as q, withCtx as f, createElementVNode as A, normalizeClass as M, unref as s, createVNode as h, renderSlot as z } from "vue";
-import { _ as F } from "./Field.vue_vue_type_script_setup_true_lang-475832fe.js";
-import N from "./Input.js";
-import O from "./Select.js";
-import { _ as U } from "./_plugin-vue_export-helper-dad06003.js";
+import { defineComponent as B, useAttrs as S, useSlots as T, useCssModule as $, ref as d, computed as c, watchEffect as k, watch as v, openBlock as E, createBlock as b, mergeProps as m, createSlots as A, withCtx as f, createElementVNode as M, normalizeClass as z, unref as s, createVNode as h, renderSlot as F } from "vue";
+import { _ as N } from "./Field.vue_vue_type_script_setup_true_lang-42cf79d4.js";
+import O from "./Input.js";
+import U from "./Select.js";
+import { _ as P } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";
-import "./Label.vue_vue_type_script_setup_true_lang-1d29d98a.js";
+import "./Label.vue_vue_type_script_setup_true_lang-c5589919.js";
 import "./locale.js";
 import "lodash-es/get";
 import "lodash-es/isNil";
@@ -13,6 +13,7 @@ import "./constants.js";
 import "./Icon.js";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
+import "@leaflink/snitch";
 import "lodash-es/debounce";
 import "lodash-es/isEmpty";
 import "lodash-es/isEqual";
@@ -27,10 +28,10 @@ import "./clickoutside.js";
 import "./MenusPlugin-5e93f0a5.js";
 import "./Chip.js";
 import "./utils/colorScheme.js";
-const P = {
+const j = {
   name: "ll-input-options"
-}, j = /* @__PURE__ */ B({
-  ...P,
+}, q = /* @__PURE__ */ B({
+  ...j,
   props: {
     errorText: { default: void 0 },
     hintText: { default: void 0 },
@@ -41,8 +42,8 @@ const P = {
     options: { default: () => [] }
   },
   emits: ["update:model-value", "change"],
-  setup(_, { emit: a }) {
-    const o = _, u = S(), y = T(), r = $(), n = d(), i = d(!1), t = d(), g = c(() => {
+  setup(_, { emit: n }) {
+    const o = _, u = S(), y = T(), r = $(), a = d(), i = d(!1), t = d(), g = c(() => {
       const { disabled: e, placeholder: l } = u;
       return { disabled: e, placeholder: l };
     }), V = c(() => {
@@ -50,29 +51,29 @@ const P = {
       return { disabled: e, displayBy: l, trackBy: p };
     });
     function C(e) {
-      n.value = String(e), a("update:model-value", {
-        value: n.value,
+      a.value = String(e), n("update:model-value", {
+        value: a.value,
         option: t.value,
         isValueChange: !0,
         type: "input"
       });
     }
-    function w() {
-      a("change", {
-        value: n.value,
+    function x() {
+      n("change", {
+        value: a.value,
         option: t.value,
         isValueChange: !0,
         type: "input"
       });
     }
-    function x(e) {
-      t.value = e, a("change", {
-        value: n.value,
+    function w(e) {
+      t.value = e, n("change", {
+        value: a.value,
         option: t.value,
         isValueChange: !1,
         type: "select"
-      }), a("update:model-value", {
-        value: n.value,
+      }), n("update:model-value", {
+        value: a.value,
         option: t.value,
         isValueChange: !1,
         type: "select"
@@ -83,7 +84,7 @@ const P = {
     }), v(
       () => o.modelValue.value,
       () => {
-        n.value = o.modelValue.value;
+        a.value = o.modelValue.value;
       },
       { immediate: !0 }
     ), v(
@@ -96,25 +97,25 @@ const P = {
       throw new Error("ll-input-options: use :model-value or v-model instead of :value.");
     if (u.onInput)
       throw new Error("ll-input-options: use the @update:model-value event instead of @input");
-    return (e, l) => (E(), b(F, m(o, {
+    return (e, l) => (E(), b(N, m(o, {
       class: "input",
       "data-test": "ll-input-options"
-    }), q({
+    }), A({
       default: f(({ fieldId: p }) => [
-        A("div", {
-          class: M(["flex", { [s(r)["has-error"]]: !!o.errorText }])
+        M("div", {
+          class: z(["flex", { [s(r)["has-error"]]: !!o.errorText }])
         }, [
-          h(N, m(g.value, {
+          h(O, m(g.value, {
             id: p,
             class: ["flex-1", [s(r).input, { "tw-z-control": i.value }]],
             type: o.type,
-            "model-value": n.value,
-            onChange: w,
+            "model-value": a.value,
+            onChange: x,
             "onUpdate:modelValue": C,
             onBlur: l[0] || (l[0] = (I) => i.value = !1),
             onFocus: l[1] || (l[1] = (I) => i.value = !0)
           }), null, 16, ["id", "class", "type", "model-value"]),
-          h(O, m(V.value, {
+          h(U, m(V.value, {
             single: "",
             "hide-search": "",
             "prevent-empty": "",
@@ -122,7 +123,7 @@ const P = {
             "no-truncate": e.noTruncate,
             options: e.options,
             "model-value": t.value,
-            "onUpdate:modelValue": x
+            "onUpdate:modelValue": w
           }), null, 16, ["class", "no-truncate", "options", "model-value"])
         ], 2)
       ]),
@@ -131,20 +132,20 @@ const P = {
       s(y).hint ? {
         name: "hint",
         fn: f(() => [
-          z(e.$slots, "hint")
+          F(e.$slots, "hint")
         ]),
         key: "0"
       } : void 0
     ]), 1040));
   }
-}), D = "_input_mqotn_2", G = "_select_mqotn_13", H = {
+}), D = "_input_euxl6_2", G = "_select_euxl6_13", H = {
   input: D,
   select: G,
-  "has-error": "_has-error_mqotn_26"
+  "has-error": "_has-error_euxl6_26"
 }, J = {
   $style: H
-}, Ce = /* @__PURE__ */ U(j, [["__cssModules", J]]);
+}, xe = /* @__PURE__ */ P(q, [["__cssModules", J]]);
 export {
-  Ce as default
+  xe as default
 };
 //# sourceMappingURL=InputOptions.js.map

package/dist/InputOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputOptions.js","sources":["../src/components/InputOptions/InputOptions.vue"],"sourcesContent":["<script lang=\"ts\">\n  export default {\n    name: 'll-input-options',\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  type Option = any;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  type SelectedOption = any;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  interface InputOptionsProps {\n    /**\n     * Error text to display. Replaces `hintText` (if provided) & adds error styling\n     */\n    errorText?: string;\n\n    /**\n     * Hint text to display below the input\n     */\n    hintText?: string;\n\n    /**\n     * Label to render for the datepicker\n     */\n    label?: string;\n\n    /**\n     * The current value inclusive of the input & select\n     */\n    modelValue?: { value: string; option?: SelectedOption };\n\n    /**\n     * Input type\n     */\n    type?: string extends 'button' | 'checkbox' | 'radio' | 'submit' ? never : string;\n\n    /**\n     * Prevents the Selected Option from being truncated, if true\n     */\n    noTruncate?: boolean;\n\n    /**\n     * Options for the select\n     */\n    options?: Option[];\n  }\n</script>\n\n<script lang=\"ts\" setup>\n  import { computed, ref, useAttrs, useCssModule, useSlots, watch, watchEffect } from 'vue';\n\n  import Field from '../Field/Field.vue';\n  import Input from '../Input/Input.vue';\n  import Select from '../Select/Select.vue';\n\n  const props = withDefaults(defineProps<InputOptionsProps>(), {\n    modelValue: () => ({ value: '', option: undefined }),\n    noTruncate: false,\n    options: () => [],\n    dataTest: 'll-input-options',\n    errorText: undefined,\n    hintText: undefined,\n    label: undefined,\n    type: 'text',\n  });\n\n  const emit =\n    defineEmits<{\n      (\n        e: 'update:model-value',\n        v: { value?: string; option?: SelectedOption; isValueChange: boolean; type: 'input' | 'select' },\n      ): void;\n      (\n        e: 'change',\n        v: { value?: string; option?: SelectedOption; isValueChange: boolean; type: 'input' | 'select' },\n      ): void;\n    }>();\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const classes = useCssModule();\n  const internalInput = ref<string>();\n  const isInputFocused = ref(false);\n  const selectedOption = ref<Option | undefined>();\n\n  const inputAttrs = computed(() => {\n    const { disabled, placeholder } = attrs;\n\n    return { disabled, placeholder } as { disabled: boolean; placeholder: string };\n  });\n\n  const selectAttrs = computed(() => {\n    const { disabled, displayBy, trackBy } = attrs;\n\n    return { disabled, displayBy, trackBy } as { disabled: boolean; displayBy: string; trackBy: string };\n  });\n\n  // Input value changed\n  function handleInput(val?: string | number) {\n    internalInput.value = String(val);\n\n    emit('update:model-value', {\n      value: internalInput.value,\n      option: selectedOption.value,\n      isValueChange: true,\n      type: 'input',\n    });\n  }\n\n  // Input blurred\n  function handleInputChange() {\n    emit('change', {\n      value: internalInput.value,\n      option: selectedOption.value,\n      isValueChange: true,\n      type: 'input',\n    });\n  }\n\n  function handleSelectChange(val?: Option) {\n    selectedOption.value = val;\n\n    emit('change', {\n      value: internalInput.value,\n      option: selectedOption.value,\n      isValueChange: false,\n      type: 'select',\n    });\n    emit('update:model-value', {\n      value: internalInput.value,\n      option: selectedOption.value,\n      isValueChange: false,\n      type: 'select',\n    });\n  }\n\n  watchEffect(() => {\n    if (!selectedOption.value) {\n      selectedOption.value = props.options[0];\n    }\n  });\n\n  watch(\n    () => props.modelValue.value,\n    () => {\n      internalInput.value = props.modelValue.value;\n    },\n    { immediate: true },\n  );\n\n  watch(\n    () => props.modelValue.option,\n    () => {\n      selectedOption.value = props.modelValue.option;\n    },\n    { immediate: true },\n  );\n\n  if (attrs.value) {\n    throw new Error('ll-input-options: use :model-value or v-model instead of :value.');\n  }\n\n  if (attrs.onInput) {\n    throw new Error('ll-input-options: use the @update:model-value event instead of @input');\n  }\n</script>\n\n<template>\n  <Field v-bind=\"props\" class=\"input\" data-test=\"ll-input-options\">\n    <template #default=\"{ fieldId }\">\n      <div class=\"flex\" :class=\"{ [classes['has-error']]: !!props.errorText }\">\n        <Input\n          v-bind=\"inputAttrs\"\n          :id=\"fieldId\"\n          class=\"flex-1\"\n          :class=\"[classes.input, { 'tw-z-control': isInputFocused }]\"\n          :type=\"props.type\"\n          :model-value=\"internalInput\"\n          @change=\"handleInputChange\"\n          @update:model-value=\"handleInput\"\n          @blur=\"isInputFocused = false\"\n          @focus=\"isInputFocused = true\"\n        />\n\n        <Select\n          v-bind=\"selectAttrs\"\n          single\n          hide-search\n          prevent-empty\n          :class=\"classes.select\"\n          :no-truncate=\"noTruncate\"\n          :options=\"options\"\n          :model-value=\"selectedOption\"\n          @update:model-value=\"handleSelectChange\"\n        />\n      </div>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style module>\n  .input {\n    display: inline-block;\n    /* input border overlaps select border */\n    margin-right: -1px;\n  }\n\n  .input input {\n    border-bottom-right-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  .select {\n    min-width: 80px;\n  }\n\n  .select :global(.stash-select__content) {\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n  }\n\n  .select:global(.stash-select--active .stash-select__content) {\n    min-width: 0;\n  }\n\n  .has-error input,\n  .has-error input:hover:not(:focus),\n  .has-error :global(.stash-select__content),\n  .has-error :global(.stash-select__content:hover:not(:focus)) {\n    border-color: var(--color-red);\n  }\n</style>\n"],"names":["attrs","useAttrs","slots","useSlots","classes","useCssModule","internalInput","ref","isInputFocused","selectedOption","inputAttrs","computed","disabled","placeholder","selectAttrs","displayBy","trackBy","handleInput","val","emit","handleInputChange","handleSelectChange","watchEffect","props","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACE,UAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;iBA6EMA,IAAQC,KACRC,IAAQC,KACRC,IAAUC,KACVC,IAAgBC,KAChBC,IAAiBD,EAAI,EAAK,GAC1BE,IAAiBF,KAEjBG,IAAaC,EAAS,MAAM;AAC1B,YAAA,EAAE,UAAAC,GAAU,aAAAC,EAAgB,IAAAb;AAE3B,aAAA,EAAE,UAAAY,GAAU,aAAAC;IAAY,CAChC,GAEKC,IAAcH,EAAS,MAAM;AACjC,YAAM,EAAE,UAAAC,GAAU,WAAAG,GAAW,SAAAC,EAAA,IAAYhB;AAElC,aAAA,EAAE,UAAAY,GAAU,WAAAG,GAAW,SAAAC;IAAQ,CACvC;AAGD,aAASC,EAAYC,GAAuB;AAC5B,MAAAZ,EAAA,QAAQ,OAAOY,CAAG,GAEhCC,EAAK,sBAAsB;AAAA,QACzB,OAAOb,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,IACH;AAGA,aAASW,IAAoB;AAC3B,MAAAD,EAAK,UAAU;AAAA,QACb,OAAOb,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,IACH;AAEA,aAASY,EAAmBH,GAAc;AACxC,MAAAT,EAAe,QAAQS,GAEvBC,EAAK,UAAU;AAAA,QACb,OAAOb,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP,GACDU,EAAK,sBAAsB;AAAA,QACzB,OAAOb,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,IACH;AAwBA,QAtBAa,EAAY,MAAM;AACZ,MAACb,EAAe,UACHA,EAAA,QAAQc,EAAM,QAAQ,CAAC;AAAA,IACxC,CACD,GAEDC;AAAA,MACE,MAAMD,EAAM,WAAW;AAAA,MACvB,MAAM;AACU,QAAAjB,EAAA,QAAQiB,EAAM,WAAW;AAAA,MACzC;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA,GAGpBC;AAAA,MACE,MAAMD,EAAM,WAAW;AAAA,MACvB,MAAM;AACW,QAAAd,EAAA,QAAQc,EAAM,WAAW;AAAA,MAC1C;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA,GAGhBvB,EAAM;AACF,YAAA,IAAI,MAAM,kEAAkE;AAGpF,QAAIA,EAAM;AACF,YAAA,IAAI,MAAM,uEAAuE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"InputOptions.js","sources":["../src/components/InputOptions/InputOptions.vue"],"sourcesContent":["<script lang=\"ts\">\n  export default {\n    name: 'll-input-options',\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  type Option = any;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  type SelectedOption = any;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  interface InputOptionsProps {\n    /**\n     * Error text to display. Replaces `hintText` (if provided) & adds error styling\n     */\n    errorText?: string;\n\n    /**\n     * Hint text to display below the input\n     */\n    hintText?: string;\n\n    /**\n     * Label to render for the datepicker\n     */\n    label?: string;\n\n    /**\n     * The current value inclusive of the input & select\n     */\n    modelValue?: { value: string; option?: SelectedOption };\n\n    /**\n     * Input type\n     */\n    type?: string extends 'button' | 'checkbox' | 'radio' | 'submit' ? never : string;\n\n    /**\n     * Prevents the Selected Option from being truncated, if true\n     */\n    noTruncate?: boolean;\n\n    /**\n     * Options for the select\n     */\n    options?: Option[];\n  }\n</script>\n\n<script lang=\"ts\" setup>\n  import { computed, ref, useAttrs, useCssModule, useSlots, watch, watchEffect } from 'vue';\n\n  import Field from '../Field/Field.vue';\n  import Input from '../Input/Input.vue';\n  import Select from '../Select/Select.vue';\n\n  const props = withDefaults(defineProps<InputOptionsProps>(), {\n    modelValue: () => ({ value: '', option: undefined }),\n    noTruncate: false,\n    options: () => [],\n    dataTest: 'll-input-options',\n    errorText: undefined,\n    hintText: undefined,\n    label: undefined,\n    type: 'text',\n  });\n\n  const emit =\n    defineEmits<{\n      (\n        e: 'update:model-value',\n        v: { value?: string; option?: SelectedOption; isValueChange: boolean; type: 'input' | 'select' },\n      ): void;\n      (\n        e: 'change',\n        v: { value?: string; option?: SelectedOption; isValueChange: boolean; type: 'input' | 'select' },\n      ): void;\n    }>();\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const classes = useCssModule();\n  const internalInput = ref<string>();\n  const isInputFocused = ref(false);\n  const selectedOption = ref<Option | undefined>();\n\n  const inputAttrs = computed(() => {\n    const { disabled, placeholder } = attrs;\n\n    return { disabled, placeholder } as { disabled: boolean; placeholder: string };\n  });\n\n  const selectAttrs = computed(() => {\n    const { disabled, displayBy, trackBy } = attrs;\n\n    return { disabled, displayBy, trackBy } as { disabled: boolean; displayBy: string; trackBy: string };\n  });\n\n  // Input value changed\n  function handleInput(val?: string | number) {\n    internalInput.value = String(val);\n\n    emit('update:model-value', {\n      value: internalInput.value,\n      option: selectedOption.value,\n      isValueChange: true,\n      type: 'input',\n    });\n  }\n\n  // Input blurred\n  function handleInputChange() {\n    emit('change', {\n      value: internalInput.value,\n      option: selectedOption.value,\n      isValueChange: true,\n      type: 'input',\n    });\n  }\n\n  function handleSelectChange(val?: Option) {\n    selectedOption.value = val;\n\n    emit('change', {\n      value: internalInput.value,\n      option: selectedOption.value,\n      isValueChange: false,\n      type: 'select',\n    });\n    emit('update:model-value', {\n      value: internalInput.value,\n      option: selectedOption.value,\n      isValueChange: false,\n      type: 'select',\n    });\n  }\n\n  watchEffect(() => {\n    if (!selectedOption.value) {\n      selectedOption.value = props.options[0];\n    }\n  });\n\n  watch(\n    () => props.modelValue.value,\n    () => {\n      internalInput.value = props.modelValue.value;\n    },\n    { immediate: true },\n  );\n\n  watch(\n    () => props.modelValue.option,\n    () => {\n      selectedOption.value = props.modelValue.option;\n    },\n    { immediate: true },\n  );\n\n  if (attrs.value) {\n    throw new Error('ll-input-options: use :model-value or v-model instead of :value.');\n  }\n\n  if (attrs.onInput) {\n    throw new Error('ll-input-options: use the @update:model-value event instead of @input');\n  }\n</script>\n\n<template>\n  <Field v-bind=\"props\" class=\"input\" data-test=\"ll-input-options\">\n    <template #default=\"{ fieldId }\">\n      <div class=\"flex\" :class=\"{ [classes['has-error']]: !!props.errorText }\">\n        <Input\n          v-bind=\"inputAttrs\"\n          :id=\"fieldId\"\n          class=\"flex-1\"\n          :class=\"[classes.input, { 'tw-z-control': isInputFocused }]\"\n          :type=\"props.type\"\n          :model-value=\"internalInput\"\n          @change=\"handleInputChange\"\n          @update:model-value=\"handleInput\"\n          @blur=\"isInputFocused = false\"\n          @focus=\"isInputFocused = true\"\n        />\n\n        <Select\n          v-bind=\"selectAttrs\"\n          single\n          hide-search\n          prevent-empty\n          :class=\"classes.select\"\n          :no-truncate=\"noTruncate\"\n          :options=\"options\"\n          :model-value=\"selectedOption\"\n          @update:model-value=\"handleSelectChange\"\n        />\n      </div>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style module>\n  .input {\n    display: inline-block;\n    /* input border overlaps select border */\n    margin-right: -1px;\n  }\n\n  .input input {\n    border-bottom-right-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  .select {\n    min-width: 80px;\n  }\n\n  .select :global(.stash-select__content) {\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n  }\n\n  .select:global(.stash-select--active .stash-select__content) {\n    min-width: 0;\n  }\n\n  .has-error input,\n  .has-error input:hover:not(:focus),\n  .has-error :global(.stash-select__content),\n  .has-error :global(.stash-select__content:hover:not(:focus)) {\n    border-color: var(--color-red-500);\n  }\n</style>\n"],"names":["attrs","useAttrs","slots","useSlots","classes","useCssModule","internalInput","ref","isInputFocused","selectedOption","inputAttrs","computed","disabled","placeholder","selectAttrs","displayBy","trackBy","handleInput","val","emit","handleInputChange","handleSelectChange","watchEffect","props","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACE,UAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;;;iBA6EMA,IAAQC,KACRC,IAAQC,KACRC,IAAUC,KACVC,IAAgBC,KAChBC,IAAiBD,EAAI,EAAK,GAC1BE,IAAiBF,KAEjBG,IAAaC,EAAS,MAAM;AAC1B,YAAA,EAAE,UAAAC,GAAU,aAAAC,EAAgB,IAAAb;AAE3B,aAAA,EAAE,UAAAY,GAAU,aAAAC;IAAY,CAChC,GAEKC,IAAcH,EAAS,MAAM;AACjC,YAAM,EAAE,UAAAC,GAAU,WAAAG,GAAW,SAAAC,EAAA,IAAYhB;AAElC,aAAA,EAAE,UAAAY,GAAU,WAAAG,GAAW,SAAAC;IAAQ,CACvC;AAGD,aAASC,EAAYC,GAAuB;AAC5B,MAAAZ,EAAA,QAAQ,OAAOY,CAAG,GAEhCC,EAAK,sBAAsB;AAAA,QACzB,OAAOb,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,IACH;AAGA,aAASW,IAAoB;AAC3B,MAAAD,EAAK,UAAU;AAAA,QACb,OAAOb,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,IACH;AAEA,aAASY,EAAmBH,GAAc;AACxC,MAAAT,EAAe,QAAQS,GAEvBC,EAAK,UAAU;AAAA,QACb,OAAOb,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP,GACDU,EAAK,sBAAsB;AAAA,QACzB,OAAOb,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,IACH;AAwBA,QAtBAa,EAAY,MAAM;AACZ,MAACb,EAAe,UACHA,EAAA,QAAQc,EAAM,QAAQ,CAAC;AAAA,IACxC,CACD,GAEDC;AAAA,MACE,MAAMD,EAAM,WAAW;AAAA,MACvB,MAAM;AACU,QAAAjB,EAAA,QAAQiB,EAAM,WAAW;AAAA,MACzC;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA,GAGpBC;AAAA,MACE,MAAMD,EAAM,WAAW;AAAA,MACvB,MAAM;AACW,QAAAd,EAAA,QAAQc,EAAM,WAAW;AAAA,MAC1C;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA,GAGhBvB,EAAM;AACF,YAAA,IAAI,MAAM,kEAAkE;AAGpF,QAAIA,EAAM;AACF,YAAA,IAAI,MAAM,uEAAuE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Label.js

@@ -1,4 +1,4 @@
-import { _ as o } from "./Label.vue_vue_type_script_setup_true_lang-1d29d98a.js";
+import { _ as o } from "./Label.vue_vue_type_script_setup_true_lang-c5589919.js";
 import "vue";
 import "./locale.js";
 import "lodash-es/get";

package/dist/{Label.vue_vue_type_script_setup_true_lang-1d29d98a.js → Label.vue_vue_type_script_setup_true_lang-c5589919.js}

@@ -20,7 +20,7 @@ const _ = {
   setup(a) {
     const e = a, l = n(() => e.legend ? "legend" : "label");
     return (r, k) => (t(), i(d(l.value), {
-      class: c(["stash-label tw-block tw-truncate tw-text-ice-900 tw-font-medium tw-text-sm tw-leading-6", { "animate-shake": e.hasError }]),
+      class: c(["stash-label tw-block tw-truncate tw-text-sm tw-font-medium tw-leading-6 tw-text-ice-900", { "animate-shake": e.hasError }]),
       for: e.for
     }, {
       default: p(() => [
@@ -34,4 +34,4 @@ const _ = {
 export {
   g as _
 };
-//# sourceMappingURL=Label.vue_vue_type_script_setup_true_lang-1d29d98a.js.map
+//# sourceMappingURL=Label.vue_vue_type_script_setup_true_lang-c5589919.js.map

package/dist/{Label.vue_vue_type_script_setup_true_lang-1d29d98a.js.map → Label.vue_vue_type_script_setup_true_lang-c5589919.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Label.vue_vue_type_script_setup_true_lang-1d29d98a.js","sources":["../src/components/Label/Label.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n\n  import { t } from '../../locale';\n\n  export interface LabelProps {\n    for?: string;\n    hasError?: boolean;\n    isRequired?: boolean;\n    showOptional?: boolean;\n    /**\n     * Indicates whether the wrapper element to be rendered\n     * should be a label or a legend.\n     */\n    legend?: boolean;\n  }\n\n  const props = withDefaults(defineProps<LabelProps>(), {\n    for: undefined,\n    hasError: false,\n    isRequired: false,\n    showOptional: false,\n    legend: false,\n  });\n\n  const wrapperElement = computed(() => {\n    return props.legend ? 'legend' : 'label';\n  });\n</script>\n\n<template>\n  <component\n    :is=\"wrapperElement\"\n    class=\"stash-label tw-block tw-truncate tw-text-ice-900 tw-font-medium tw-text-sm tw-leading-6\"\n    :class=\"{ 'animate-shake': props.hasError }\"\n    :for=\"props.for\"\n  >\n    <!-- @slot the label text -->\n    <slot></slot>\n    <span v-if=\"props.isRequired\" class=\"text-red font-weight-bold\" title=\"Required\" aria-label=\"required\"> * </span>\n    <span v-else-if=\"props.showOptional\" class=\"text-ice-700\"> ({{ t('ll.optional') }}) </span>\n  </component>\n</template>\n"],"names":["wrapperElement","computed","props"],"mappings":";;;;;;;;;;;;;;;;;;;;iBAyBQA,IAAiBC,EAAS,MACvBC,EAAM,SAAS,WAAW,OAClC;;;;;;;;;;;;;"}
+{"version":3,"file":"Label.vue_vue_type_script_setup_true_lang-c5589919.js","sources":["../src/components/Label/Label.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n\n  import { t } from '../../locale';\n\n  export interface LabelProps {\n    for?: string;\n    hasError?: boolean;\n    isRequired?: boolean;\n    showOptional?: boolean;\n    /**\n     * Indicates whether the wrapper element to be rendered\n     * should be a label or a legend.\n     */\n    legend?: boolean;\n  }\n\n  const props = withDefaults(defineProps<LabelProps>(), {\n    for: undefined,\n    hasError: false,\n    isRequired: false,\n    showOptional: false,\n    legend: false,\n  });\n\n  const wrapperElement = computed(() => {\n    return props.legend ? 'legend' : 'label';\n  });\n</script>\n\n<template>\n  <component\n    :is=\"wrapperElement\"\n    class=\"stash-label tw-block tw-truncate tw-text-sm tw-font-medium tw-leading-6 tw-text-ice-900\"\n    :class=\"{ 'animate-shake': props.hasError }\"\n    :for=\"props.for\"\n  >\n    <!-- @slot the label text -->\n    <slot></slot>\n    <span v-if=\"props.isRequired\" class=\"text-red font-weight-bold\" title=\"Required\" aria-label=\"required\"> * </span>\n    <span v-else-if=\"props.showOptional\" class=\"text-ice-700\"> ({{ t('ll.optional') }}) </span>\n  </component>\n</template>\n"],"names":["wrapperElement","computed","props"],"mappings":";;;;;;;;;;;;;;;;;;;;iBAyBQA,IAAiBC,EAAS,MACvBC,EAAM,SAAS,WAAW,OAClC;;;;;;;;;;;;;"}

package/dist/ListItem.js

@@ -1,8 +1,9 @@
 import a from "./Checkbox.js";
 import { resolveComponent as n, openBlock as l, createElementBlock as i, normalizeClass as s, createBlock as d, createCommentVNode as m, renderSlot as b } from "vue";
 import { _ as r } from "./_plugin-vue_export-helper-dad06003.js";
+import "@leaflink/snitch";
 import "lodash-es/uniqueId";
-import "./Checkbox.vue_vue_type_style_index_0_scoped_0d7e7fd0_lang-4ed993c7.js";
+import "./Checkbox.vue_vue_type_style_index_0_scoped_dbd26d7f_lang-4ed993c7.js";
 const _ = "_item_1ivse_2", f = "_checkbox_1ivse_56", h = {
   item: _,
   "is-selectable": "_is-selectable_1ivse_41",
@@ -69,7 +70,7 @@ const _ = "_item_1ivse_2", f = "_checkbox_1ivse_56", h = {
     }
   }
 };
-function u(e, p, t, B, x, o) {
+function u(e, y, t, B, x, o) {
   const c = n("ll-checkbox");
   return l(), i("li", {
     class: s(["shadow-low", [e.$style.item, { [e.$style["is-selectable"]]: t.isSelectable, [e.$style["not-actionable"]]: t.notActionable }]])
@@ -86,10 +87,10 @@ function u(e, p, t, B, x, o) {
     b(e.$slots, "default")
   ], 2);
 }
-const y = {
+const p = {
   $style: h
-}, w = /* @__PURE__ */ r(k, [["render", u], ["__cssModules", y]]);
+}, A = /* @__PURE__ */ r(k, [["render", u], ["__cssModules", p]]);
 export {
-  w as default
+  A as default
 };
 //# sourceMappingURL=ListItem.js.map

package/dist/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../src/components/ListItem/ListItem.vue"],"sourcesContent":["<script>\n  import Checkbox from '../Checkbox/Checkbox.vue';\n\n  export default {\n    name: 'll-list-item',\n\n    components: {\n      'll-checkbox': Checkbox,\n    },\n\n    props: {\n      /**\n       * The item to be selected\n       */\n      item: {\n        type: Object,\n        default: () => ({}),\n      },\n\n      /**\n       * Whether this row can be selected.\n       */\n      isSelectable: {\n        type: Boolean,\n        default: false,\n      },\n\n      /**\n       * Whether this row's checkbox should be indeterminite\n       */\n      isIndeterminate: {\n        type: Boolean,\n        default: false,\n      },\n\n      /**\n       * Whether this row has an actions column or not. By default list items will\n       * be styled to include actions. Use `not-actionable` to restyle a row that\n       * has no actions.\n       */\n      notActionable: {\n        type: Boolean,\n        default: false,\n      },\n\n      /**\n       * Whether this row is selected.\n       */\n      selected: {\n        type: Boolean,\n        default: false,\n      },\n\n      /**\n       * Disables the checkbox\n       */\n      disabled: {\n        type: Boolean,\n        default: false,\n      },\n    },\n\n    emits: ['select'],\n\n    methods: {\n      /**\n       * @param {boolean} value emit change event when item is selected\n       */\n      onSelect(value) {\n        this.$emit('select', { item: this.item, value });\n      },\n    },\n  };\n</script>\n\n<template>\n  <li\n    class=\"shadow-low\"\n    :class=\"[$style.item, { [$style['is-selectable']]: isSelectable, [$style['not-actionable']]: notActionable }]\"\n  >\n    <ll-checkbox\n      v-if=\"isSelectable\"\n      data-test=\"checkbox|select-item\"\n      :checked=\"selected\"\n      :class=\"$style.checkbox\"\n      :disabled=\"disabled || null\"\n      :indeterminate=\"isIndeterminate\"\n      @update:checked=\"onSelect\"\n    />\n    <slot></slot>\n  </li>\n</template>\n\n<style module>\n  .item {\n    background: var(--color-white);\n    border-radius: var(--border-radius);\n    column-gap: var(--grid-gutter);\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    margin-bottom: var(--ll-space-3);\n    padding: var(--ll-space-2);\n    padding-top: var(--ll-space-5);\n    position: relative;\n    row-gap: var(--grid-gutter);\n  }\n\n  @media screen(md) {\n    .item {\n      grid-template-columns: repeat(8, 1fr);\n    }\n  }\n\n  @media screen(lg) {\n    .item {\n      align-items: center;\n      border-bottom: 1px solid var(--color-ice-200);\n      border-radius: 0;\n      box-shadow: none;\n      grid-template-columns: repeat(12, 1fr);\n      margin-bottom: 0;\n      padding: var(--ll-space-3);\n      row-gap: 0;\n    }\n\n    .item:last-child {\n      border: 0;\n      border-bottom-left-radius: var(--border-radius);\n      border-bottom-right-radius: var(--border-radius);\n    }\n  }\n\n  @media screen(lg) {\n    .is-selectable {\n      grid-template-columns: var(--ll-space-1) repeat(12, 1fr);\n    }\n  }\n\n  .not-actionable {\n    padding-top: var(--ll-space-2);\n  }\n\n  @media screen(lg) {\n    .not-actionable {\n      padding-top: var(--ll-space-3);\n    }\n  }\n\n  .checkbox {\n    left: var(--ll-space-2);\n    position: absolute !important;\n    top: 0;\n  }\n\n  @media screen(lg) {\n    .checkbox {\n      left: 0;\n      position: relative !important;\n    }\n\n    .checkbox label {\n      padding: 10px;\n    }\n\n    .checkbox label::before,\n    .checkbox input:checked + label::after {\n      top: 0;\n    }\n  }\n</style>\n"],"names":["_sfc_main","Checkbox","value","_createElementBlock","_normalizeClass","_ctx","$props","_createBlock","_component_ll_checkbox","$options","_renderSlot"],"mappings":";;;;;;;;;;GAGOA,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,eAAeC;AAAA,EAChB;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS,OAAO,CAAA;AAAA,IACjB;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO,CAAC,QAAQ;AAAA,EAEhB,SAAS;AAAA;AAAA;AAAA;AAAA,IAIP,SAASC,GAAO;AACd,WAAK,MAAM,UAAU,EAAE,MAAM,KAAK,MAAM,OAAAA,EAAI,CAAG;AAAA,IAChD;AAAA,EACF;;;;cAKHC,EAcK,MAAA;AAAA,IAbH,OAAMC,EAAA,CAAA,cACG,CAAAC,EAAA,OAAO,MAAS,EAAA,CAAAA,EAAA,OAA0B,eAAA,CAAA,GAAAC,EAAA,cAAe,CAAAD,EAAA,2BAA2BC,EAAa,cAAA,CAAA,CAAA,CAAA;AAAA;IAGlGA,EAAY,qBADpBC,EAQEC,GAAA;AAAA;MANA,aAAU;AAAA,MACT,SAASF,EAAQ;AAAA,MACjB,OAAKF,EAAEC,EAAM,OAAC,QAAQ;AAAA,MACtB,UAAUC,EAAQ,YAAA;AAAA,MAClB,eAAeA,EAAe;AAAA,MAC9B,oBAAgBG,EAAQ;AAAA;IAE3BC,EAAaL,EAAA,QAAA,SAAA;AAAA;;;;;"}
+{"version":3,"file":"ListItem.js","sources":["../src/components/ListItem/ListItem.vue"],"sourcesContent":["<script>\n  import Checkbox from '../Checkbox/Checkbox.vue';\n\n  export default {\n    name: 'll-list-item',\n\n    components: {\n      'll-checkbox': Checkbox,\n    },\n\n    props: {\n      /**\n       * The item to be selected\n       */\n      item: {\n        type: Object,\n        default: () => ({}),\n      },\n\n      /**\n       * Whether this row can be selected.\n       */\n      isSelectable: {\n        type: Boolean,\n        default: false,\n      },\n\n      /**\n       * Whether this row's checkbox should be indeterminite\n       */\n      isIndeterminate: {\n        type: Boolean,\n        default: false,\n      },\n\n      /**\n       * Whether this row has an actions column or not. By default list items will\n       * be styled to include actions. Use `not-actionable` to restyle a row that\n       * has no actions.\n       */\n      notActionable: {\n        type: Boolean,\n        default: false,\n      },\n\n      /**\n       * Whether this row is selected.\n       */\n      selected: {\n        type: Boolean,\n        default: false,\n      },\n\n      /**\n       * Disables the checkbox\n       */\n      disabled: {\n        type: Boolean,\n        default: false,\n      },\n    },\n\n    emits: ['select'],\n\n    methods: {\n      /**\n       * @param {boolean} value emit change event when item is selected\n       */\n      onSelect(value) {\n        this.$emit('select', { item: this.item, value });\n      },\n    },\n  };\n</script>\n\n<template>\n  <li\n    class=\"shadow-low\"\n    :class=\"[$style.item, { [$style['is-selectable']]: isSelectable, [$style['not-actionable']]: notActionable }]\"\n  >\n    <ll-checkbox\n      v-if=\"isSelectable\"\n      data-test=\"checkbox|select-item\"\n      :checked=\"selected\"\n      :class=\"$style.checkbox\"\n      :disabled=\"disabled || null\"\n      :indeterminate=\"isIndeterminate\"\n      @update:checked=\"onSelect\"\n    />\n    <slot></slot>\n  </li>\n</template>\n\n<style module>\n  .item {\n    background: var(--color-white);\n    border-radius: var(--border-radius);\n    column-gap: var(--grid-gutter);\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    margin-bottom: var(--ll-space-3);\n    padding: var(--ll-space-2);\n    padding-top: var(--ll-space-5);\n    position: relative;\n    row-gap: var(--grid-gutter);\n  }\n\n  @media screen(md) {\n    .item {\n      grid-template-columns: repeat(8, 1fr);\n    }\n  }\n\n  @media screen(lg) {\n    .item {\n      align-items: center;\n      border-bottom: 1px solid var(--color-ice-200);\n      border-radius: 0;\n      box-shadow: none;\n      grid-template-columns: repeat(12, 1fr);\n      margin-bottom: 0;\n      padding: var(--ll-space-3);\n      row-gap: 0;\n    }\n\n    .item:last-child {\n      border: 0;\n      border-bottom-left-radius: var(--border-radius);\n      border-bottom-right-radius: var(--border-radius);\n    }\n  }\n\n  @media screen(lg) {\n    .is-selectable {\n      grid-template-columns: var(--ll-space-1) repeat(12, 1fr);\n    }\n  }\n\n  .not-actionable {\n    padding-top: var(--ll-space-2);\n  }\n\n  @media screen(lg) {\n    .not-actionable {\n      padding-top: var(--ll-space-3);\n    }\n  }\n\n  .checkbox {\n    left: var(--ll-space-2);\n    position: absolute !important;\n    top: 0;\n  }\n\n  @media screen(lg) {\n    .checkbox {\n      left: 0;\n      position: relative !important;\n    }\n\n    .checkbox label {\n      padding: 10px;\n    }\n\n    .checkbox label::before,\n    .checkbox input:checked + label::after {\n      top: 0;\n    }\n  }\n</style>\n"],"names":["_sfc_main","Checkbox","value","_createElementBlock","_normalizeClass","_ctx","$props","_createBlock","_component_ll_checkbox","$options","_renderSlot"],"mappings":";;;;;;;;;;;GAGOA,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,eAAeC;AAAA,EAChB;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS,OAAO,CAAA;AAAA,IACjB;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO,CAAC,QAAQ;AAAA,EAEhB,SAAS;AAAA;AAAA;AAAA;AAAA,IAIP,SAASC,GAAO;AACd,WAAK,MAAM,UAAU,EAAE,MAAM,KAAK,MAAM,OAAAA,EAAI,CAAG;AAAA,IAChD;AAAA,EACF;;;;cAKHC,EAcK,MAAA;AAAA,IAbH,OAAMC,EAAA,CAAA,cACG,CAAAC,EAAA,OAAO,MAAS,EAAA,CAAAA,EAAA,OAA0B,eAAA,CAAA,GAAAC,EAAA,cAAe,CAAAD,EAAA,2BAA2BC,EAAa,cAAA,CAAA,CAAA,CAAA;AAAA;IAGlGA,EAAY,qBADpBC,EAQEC,GAAA;AAAA;MANA,aAAU;AAAA,MACT,SAASF,EAAQ;AAAA,MACjB,OAAKF,EAAEC,EAAM,OAAC,QAAQ;AAAA,MACtB,UAAUC,EAAQ,YAAA;AAAA,MAClB,eAAeA,EAAe;AAAA,MAC9B,oBAAgBG,EAAQ;AAAA;IAE3BC,EAAaL,EAAA,QAAA,SAAA;AAAA;;;;;"}