@7pmlabs/design-system 0.4.2 → 0.4.3

package/dist/design-system19.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system19.js","sources":["../src/components/BOtpField/BOtpField.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass, createBlock as _createBlock, createElementVNode as _createElementVNode, unref as _unref, createCommentVNode as _createCommentVNode } from \"vue\"\n\nconst _hoisted_1 = { class: \"ds-flex ds-items-center ds-justify-center ds-space-x-2\" }\n\nimport BErrorMessage from '@/components/BErrorMessage.vue';\nimport {\n  useValidationField,\n  type ValidationRule,\n} from '@/composables/Validation';\nimport { cloneDeep } from 'lodash-es';\nimport { v4 as uuid } from 'uuid';\nimport { computed, ref } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport BOtpFieldBox from './BOtpFieldBox.vue';\n\n//#region Props\nexport interface BOtpFieldProps {\n  inputId?: string;\n  modelValue: string;\n  /**\n   * Number of input boxes.\n   */\n  numInputs?: number;\n  /**\n   * Index of input box to be focused.\n   */\n  focusIndex?: number;\n  disabled?: boolean;\n  inputCssClass?: string | {};\n  /**\n   * Array of custom validation rules.\n   */\n  validationRules?: ValidationRule[];\n  /**\n   * Validate if the field is left empty.\n   */\n  required?: boolean;\n  requiredErrorMessage?: string;\n  /**\n   * Hide the validation error message.\n   */\n  hideDetails?: boolean;\n}\n\n\nexport default /*#__PURE__*/_defineComponent({\n  __name: 'BOtpField',\n  props: {\n    inputId: { default: '' },\n    modelValue: { default: '' },\n    numInputs: { default: 6 },\n    focusIndex: { default: undefined },\n    disabled: { type: Boolean, default: false },\n    inputCssClass: { default: '' },\n    validationRules: { default: undefined },\n    required: { type: Boolean, default: false },\n    requiredErrorMessage: { default: '' },\n    hideDetails: { type: Boolean, default: false }\n  },\n  emits: [\"complete\", \"change\", \"update:focusIndex\", \"update:modelValue\"],\n  setup(__props: any, { expose: __expose, emit }) {\n\nconst props = __props;\n\n// Sourcecode: https://github.com/ejirocodes/vue3-otp-input\n\n//#endregion\n\n//#region Events\n\n//#endregion\n\n//#region Data\nconst { t } = useI18n();\nconst validateRequired: ValidationRule = {\n  validateRule: (val: string) => !!val,\n  errorMessage: () =>\n    props.requiredErrorMessage || t('ds.global.field_required'),\n};\nconst fIndex = ref(0);\nconst oldOtp = ref<any[]>([]);\nconst boxRefs = ref<Array<InstanceType<typeof BOtpFieldBox>> | null>(null);\nconst handleOnFocus = (index: number) => {\n  focusIndexValue.value = index;\n};\nconst handleOnBlur = () => {\n  focusIndexValue.value = -1;\n};\nconst id = computed(() => props.inputId || `id-${uuid()}`);\nconst value = computed<any[]>({\n  get() {\n    return props.modelValue.split('');\n  },\n  set(val: any) {\n    emit('update:modelValue', val.join(''));\n  },\n});\nconst originalValue = computed(() => props.modelValue);\nconst focusIndexValue = computed({\n  get() {\n    return props.focusIndex !== undefined ? props.focusIndex : fIndex.value;\n  },\n  set(val: number) {\n    if (props.focusIndex !== undefined) {\n      emit('update:focusIndex', val);\n    } else {\n      fIndex.value = val;\n    }\n  },\n});\nconst vRules = computed(() => {\n  let result: ValidationRule[] = [];\n\n  if (props.required) {\n    result.push(validateRequired);\n  }\n  if (props.validationRules) {\n    result = result.concat(props.validationRules);\n  }\n\n  return result.length ? result : undefined;\n});\nconst inputCssClassValue = computed(() => [\n  ...[\n    props.disabled\n      ? 'ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4]'\n      : 'ds-text-black/[0.85]',\n    validationResult.value.valid\n      ? 'ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus'\n      : 'ds-border-error focus:ds-ring-1 focus:ds-ring-error',\n  ],\n  props.inputCssClass,\n]);\n\nconst { validate, validationResult } = useValidationField(\n  id.value,\n  originalValue,\n  vRules.value,\n);\n//#endregion\n\n//#region Methods\nconst focus = () => {\n  boxRefs.value![focusIndexValue.value].focus();\n};\nconst checkFilledAllInputs = () => {\n  if (value.value.join('').length === props.numInputs) {\n    return emit('complete', value.value.join(''));\n  }\n  return 'Wait until the user enters the required number of characters';\n};\n// Focus on input by index\nconst focusInput = (input: number) => {\n  focusIndexValue.value = Math.max(Math.min(props.numInputs - 1, input), 0);\n};\n// Focus on next input\nconst focusNextInput = () => {\n  focusInput(focusIndexValue.value + 1);\n};\n// Focus on previous input\nconst focusPrevInput = () => {\n  focusInput(focusIndexValue.value - 1);\n};\n// Change OTP value at focused input\nconst changeCodeAtFocus = (val: number | string) => {\n  oldOtp.value = [...value.value];\n\n  value.value[focusIndexValue.value] = val;\n  value.value = cloneDeep(value.value);\n\n  const oldOtpStr = oldOtp.value.join('');\n  const otpStr = value.value.join('');\n  if (oldOtpStr !== otpStr) {\n    emit('change', otpStr);\n    checkFilledAllInputs();\n  }\n};\n// Handle pasted OTP\nconst handleOnPaste = (event: any) => {\n  event.preventDefault();\n  const pastedData = event.clipboardData\n    .getData('text/plain')\n    .slice(0, props.numInputs - focusIndexValue.value)\n    .split('');\n  if (!pastedData.join('').match(/^\\d+$/)) {\n    return 'Invalid pasted data';\n  }\n\n  // Paste data from focused input onwards\n  const currentCharsInOtp = value.value.slice(0, focusIndexValue.value);\n  const combinedWithPastedData = currentCharsInOtp.concat(pastedData);\n\n  combinedWithPastedData.slice(0, props.numInputs).forEach((val, i) => {\n    value.value[i] = val;\n  });\n\n  focusInput(combinedWithPastedData.slice(0, props.numInputs).length);\n\n  // Update modelValue when data is pasted from keyboard\n  emit('update:modelValue', value.value.join(''));\n  // Check if `complete`\n  return checkFilledAllInputs();\n};\nconst handleOnChange = (val: string) => {\n  changeCodeAtFocus(val);\n  focusNextInput();\n};\n// Handle cases of backspace, delete, left arrow, right arrow\nconst handleOnKeyDown = (event: KeyboardEvent) => {\n  switch (event.key) {\n    case 'Backspace':\n      event.preventDefault();\n      changeCodeAtFocus('');\n      focusPrevInput();\n      break;\n    case 'Delete':\n      event.preventDefault();\n      changeCodeAtFocus('');\n      break;\n    case 'ArrowLeft':\n      event.preventDefault();\n      focusPrevInput();\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n      focusNextInput();\n      break;\n    default:\n      break;\n  }\n};\nconst handleOnKeyUp = () => {\n  validate();\n};\n//#endregion\n\n__expose({ validate, focus });\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", null, [\n    _createElementVNode(\"div\", _hoisted_1, [\n      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.numInputs, (_, i) => {\n        return (_openBlock(), _createBlock(BOtpFieldBox, {\n          key: i,\n          ref_for: true,\n          ref_key: \"boxRefs\",\n          ref: boxRefs,\n          class: _normalizeClass(inputCssClassValue.value),\n          focus: focusIndexValue.value === i,\n          \"is-disabled\": _ctx.disabled,\n          value: value.value[i],\n          onOnChange: handleOnChange,\n          onOnKeydown: handleOnKeyDown,\n          onOnKeyup: handleOnKeyUp,\n          onOnPaste: handleOnPaste,\n          onOnFocus: ($event: any) => (handleOnFocus(i)),\n          onOnBlur: handleOnBlur\n        }, null, 8, [\"class\", \"focus\", \"is-disabled\", \"value\", \"onOnFocus\"]))\n      }), 128))\n    ]),\n    (!_ctx.hideDetails)\n      ? (_openBlock(), _createBlock(BErrorMessage, {\n          key: 0,\n          \"error-message\": _unref(validationResult).errorMessage(),\n          class: \"ds-mt-1\"\n        }, null, 8, [\"error-message\"]))\n      : _createCommentVNode(\"\", true)\n  ]))\n}\n}\n\n})"],"names":["_hoisted_1","_sfc_main","_defineComponent","__props","__expose","emit","props","t","useI18n","validateRequired","val","fIndex","ref","oldOtp","boxRefs","handleOnFocus","index","focusIndexValue","handleOnBlur","id","computed","uuid","value","originalValue","vRules","result","inputCssClassValue","validationResult","validate","useValidationField","focus","checkFilledAllInputs","focusInput","input","focusNextInput","focusPrevInput","changeCodeAtFocus","cloneDeep","oldOtpStr","otpStr","handleOnPaste","event","pastedData","combinedWithPastedData","i","handleOnChange","handleOnKeyDown","handleOnKeyUp","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_","_createBlock","BOtpFieldBox","_normalizeClass","$event","_createCommentVNode","BErrorMessage","_unref"],"mappings":"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"}
+{"version":3,"file":"design-system19.js","sources":["../src/components/BOtpField/BOtpField.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass, createBlock as _createBlock, createElementVNode as _createElementVNode, unref as _unref, createCommentVNode as _createCommentVNode } from \"vue\"\n\nconst _hoisted_1 = { class: \"ds-flex ds-items-center ds-justify-center ds-space-x-2\" }\n\nimport BErrorMessage from '@/components/BErrorMessage.vue';\nimport {\n  useValidationField,\n  type ValidationRule,\n} from '@/composables/Validation';\nimport { cloneDeep } from 'lodash-es';\nimport { v4 as uuid } from 'uuid';\nimport { computed, ref } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport BOtpFieldBox from './BOtpFieldBox.vue';\n\n//#region Props\nexport interface BOtpFieldProps {\n  inputId?: string;\n  modelValue: string;\n  /**\n   * Number of input boxes.\n   */\n  numInputs?: number;\n  /**\n   * Index of input box to be focused.\n   */\n  focusIndex?: number;\n  disabled?: boolean;\n  inputCssClass?: string | {};\n  /**\n   * Array of custom validation rules.\n   */\n  validationRules?: ValidationRule[];\n  /**\n   * Validate if the field is left empty.\n   */\n  required?: boolean;\n  requiredErrorMessage?: string;\n  /**\n   * Hide the validation error message.\n   */\n  hideDetails?: boolean;\n}\n\n\nexport default /*#__PURE__*/_defineComponent({\n  __name: 'BOtpField',\n  props: {\n    inputId: { default: '' },\n    modelValue: { default: '' },\n    numInputs: { default: 6 },\n    focusIndex: { default: undefined },\n    disabled: { type: Boolean, default: false },\n    inputCssClass: { default: '' },\n    validationRules: { default: undefined },\n    required: { type: Boolean, default: false },\n    requiredErrorMessage: { default: '' },\n    hideDetails: { type: Boolean, default: false }\n  },\n  emits: [\"complete\", \"change\", \"update:focusIndex\", \"update:modelValue\"],\n  setup(__props: any, { expose: __expose, emit }) {\n\nconst props = __props;\n\n// Sourcecode: https://github.com/ejirocodes/vue3-otp-input\n\n//#endregion\n\n//#region Events\n\n//#endregion\n\n//#region Data\nconst { t } = useI18n();\nconst validateRequired: ValidationRule = {\n  validateRule: (val: string) => !!val,\n  errorMessage: () =>\n    props.requiredErrorMessage || t('ds.global.field_required'),\n};\nconst fIndex = ref(0);\nconst oldOtp = ref<any[]>([]);\nconst boxRefs = ref<Array<InstanceType<typeof BOtpFieldBox>> | null>(null);\nconst handleOnFocus = (index: number) => {\n  focusIndexValue.value = index;\n};\nconst handleOnBlur = () => {\n  focusIndexValue.value = -1;\n};\nconst id = computed(() => props.inputId || `id-${uuid()}`);\nconst value = computed<any[]>({\n  get() {\n    return props.modelValue.split('');\n  },\n  set(val: any) {\n    emit('update:modelValue', val.join(''));\n  },\n});\nconst originalValue = computed(() => props.modelValue);\nconst focusIndexValue = computed({\n  get() {\n    return props.focusIndex !== undefined ? props.focusIndex : fIndex.value;\n  },\n  set(val: number) {\n    if (props.focusIndex !== undefined) {\n      emit('update:focusIndex', val);\n    } else {\n      fIndex.value = val;\n    }\n  },\n});\nconst vRules = computed(() => {\n  let result: ValidationRule[] = [];\n\n  if (props.required) {\n    result.push(validateRequired);\n  }\n  if (props.validationRules) {\n    result = result.concat(props.validationRules);\n  }\n\n  return result.length ? result : undefined;\n});\nconst inputCssClassValue = computed(() => [\n  ...[\n    props.disabled\n      ? 'ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4]'\n      : 'ds-text-black/[0.85]',\n    validationResult.value.valid\n      ? 'ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus'\n      : 'ds-border-error focus:ds-ring-1 focus:ds-ring-error',\n  ],\n  props.inputCssClass,\n]);\n\nconst { validate, validationResult } = useValidationField(\n  id.value,\n  originalValue,\n  vRules.value,\n);\n//#endregion\n\n//#region Methods\nconst focus = () => {\n  boxRefs.value![focusIndexValue.value].focus();\n};\nconst checkFilledAllInputs = () => {\n  if (value.value.join('').length === props.numInputs) {\n    return emit('complete', value.value.join(''));\n  }\n  return 'Wait until the user enters the required number of characters';\n};\n// Focus on input by index\nconst focusInput = (input: number) => {\n  focusIndexValue.value = Math.max(Math.min(props.numInputs - 1, input), 0);\n};\n// Focus on next input\nconst focusNextInput = () => {\n  focusInput(focusIndexValue.value + 1);\n};\n// Focus on previous input\nconst focusPrevInput = () => {\n  focusInput(focusIndexValue.value - 1);\n};\n// Change OTP value at focused input\nconst changeCodeAtFocus = (val: number | string) => {\n  oldOtp.value = [...value.value];\n\n  value.value[focusIndexValue.value] = val;\n  value.value = cloneDeep(value.value);\n\n  const oldOtpStr = oldOtp.value.join('');\n  const otpStr = value.value.join('');\n  if (oldOtpStr !== otpStr) {\n    emit('change', otpStr);\n    checkFilledAllInputs();\n  }\n};\n// Handle pasted OTP\nconst handleOnPaste = (event: any) => {\n  event.preventDefault();\n  const pastedData = event.clipboardData\n    .getData('text/plain')\n    .slice(0, props.numInputs - focusIndexValue.value)\n    .split('');\n  if (!pastedData.join('').match(/^\\d+$/)) {\n    return 'Invalid pasted data';\n  }\n\n  // Paste data from focused input onwards\n  const currentCharsInOtp = value.value.slice(0, focusIndexValue.value);\n  const combinedWithPastedData = currentCharsInOtp.concat(pastedData);\n\n  combinedWithPastedData.slice(0, props.numInputs).forEach((val, i) => {\n    value.value[i] = val;\n  });\n\n  focusInput(combinedWithPastedData.slice(0, props.numInputs).length);\n\n  // Update modelValue when data is pasted from keyboard\n  emit('update:modelValue', value.value.join(''));\n  // Check if `complete`\n  return checkFilledAllInputs();\n};\nconst handleOnChange = (val: string) => {\n  changeCodeAtFocus(val);\n  focusNextInput();\n};\n// Handle cases of backspace, delete, left arrow, right arrow\nconst handleOnKeyDown = (event: KeyboardEvent) => {\n  switch (event.key) {\n    case 'Backspace':\n      event.preventDefault();\n      changeCodeAtFocus('');\n      focusPrevInput();\n      break;\n    case 'Delete':\n      event.preventDefault();\n      changeCodeAtFocus('');\n      break;\n    case 'ArrowLeft':\n      event.preventDefault();\n      focusPrevInput();\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n      focusNextInput();\n      break;\n    default:\n      break;\n  }\n};\nconst handleOnKeyUp = () => {\n  validate();\n};\n//#endregion\n\n__expose({ validate, focus });\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", null, [\n    _createElementVNode(\"div\", _hoisted_1, [\n      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.numInputs, (_, i) => {\n        return (_openBlock(), _createBlock(BOtpFieldBox, {\n          key: i,\n          ref_for: true,\n          ref_key: \"boxRefs\",\n          ref: boxRefs,\n          class: _normalizeClass(inputCssClassValue.value),\n          focus: focusIndexValue.value === i,\n          \"is-disabled\": _ctx.disabled,\n          value: value.value[i],\n          onOnChange: handleOnChange,\n          onOnKeydown: handleOnKeyDown,\n          onOnKeyup: handleOnKeyUp,\n          onOnPaste: handleOnPaste,\n          onOnFocus: ($event: any) => (handleOnFocus(i)),\n          onOnBlur: handleOnBlur\n        }, null, 8, [\"class\", \"focus\", \"is-disabled\", \"value\", \"onOnFocus\"]))\n      }), 128))\n    ]),\n    (!_ctx.hideDetails)\n      ? (_openBlock(), _createBlock(BErrorMessage, {\n          key: 0,\n          \"error-message\": _unref(validationResult).errorMessage(),\n          class: \"ds-mt-1\"\n        }, null, 8, [\"error-message\"]))\n      : _createCommentVNode(\"\", true)\n  ]))\n}\n}\n\n})"],"names":["_hoisted_1","_sfc_main","_defineComponent","__props","__expose","emit","props","t","useI18n","validateRequired","val","fIndex","ref","oldOtp","boxRefs","handleOnFocus","index","focusIndexValue","handleOnBlur","id","computed","uuid","value","originalValue","vRules","result","inputCssClassValue","validationResult","validate","useValidationField","focus","checkFilledAllInputs","focusInput","input","focusNextInput","focusPrevInput","changeCodeAtFocus","cloneDeep","oldOtpStr","otpStr","handleOnPaste","event","pastedData","combinedWithPastedData","i","handleOnChange","handleOnKeyDown","handleOnKeyUp","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_","_createBlock","BOtpFieldBox","_normalizeClass","$event","_createCommentVNode","BErrorMessage","_unref"],"mappings":"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"}

package/dist/design-system19.mjs

@@ -2,9 +2,9 @@ import { defineComponent as N, ref as f, computed as l, openBlock as d, createEl
 import H from "./design-system29.mjs";
 import { useValidationField as J } from "./design-system3.mjs";
 import { useI18n as Q } from "./design-system48.mjs";
-import T from "./design-system99.mjs";
-import X from "./design-system95.mjs";
-import Y from "./design-system100.mjs";
+import T from "./design-system98.mjs";
+import X from "./design-system93.mjs";
+import Y from "./design-system99.mjs";
 const Z = { class: "ds-flex ds-items-center ds-justify-center ds-space-x-2" }, ue = /* @__PURE__ */ N({
   __name: "BOtpField",
   props: {

package/dist/design-system194.js

@@ -1,2 +1,2 @@
-"use strict";const _=require("./design-system189.js"),a=require("./design-system165.js"),r=require("./design-system180.js");var n=200;function h(s,i){var t=this.__data__;if(t instanceof _){var e=t.__data__;if(!a||e.length<n-1)return e.push([s,i]),this.size=++t.size,this;t=this.__data__=new r(e)}return t.set(s,i),this.size=t.size,this}module.exports=h;
+"use strict";const _=require("./design-system189.js"),a=require("./design-system168.js"),r=require("./design-system180.js");var n=200;function h(s,i){var t=this.__data__;if(t instanceof _){var e=t.__data__;if(!a||e.length<n-1)return e.push([s,i]),this.size=++t.size,this;t=this.__data__=new r(e)}return t.set(s,i),this.size=t.size,this}module.exports=h;
 //# sourceMappingURL=design-system194.js.map

package/dist/design-system194.mjs

@@ -1,5 +1,5 @@
 import _ from "./design-system189.mjs";
-import e from "./design-system165.mjs";
+import e from "./design-system168.mjs";
 import r from "./design-system180.mjs";
 var h = 200;
 function m(i, s) {

package/dist/design-system195.js

@@ -1,2 +1,2 @@
-"use strict";const n=require("./design-system161.js"),o=require("./design-system141.js");var s=Object.prototype,u=s.propertyIsEnumerable,t=Object.getOwnPropertySymbols,a=t?function(r){return r==null?[]:(r=Object(r),n(t(r),function(e){return u.call(r,e)}))}:o;const l=a;module.exports=l;
+"use strict";const n=require("./design-system161.js"),o=require("./design-system140.js");var s=Object.prototype,u=s.propertyIsEnumerable,t=Object.getOwnPropertySymbols,a=t?function(r){return r==null?[]:(r=Object(r),n(t(r),function(e){return u.call(r,e)}))}:o;const l=a;module.exports=l;
 //# sourceMappingURL=design-system195.js.map

package/dist/design-system195.mjs

@@ -1,5 +1,5 @@
 import o from "./design-system161.mjs";
-import a from "./design-system141.mjs";
+import a from "./design-system140.mjs";
 var n = Object.prototype, l = n.propertyIsEnumerable, t = Object.getOwnPropertySymbols, m = t ? function(r) {
   return r == null ? [] : (r = Object(r), o(t(r), function(e) {
     return l.call(r, e);

package/dist/design-system199.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("./design-system170.js");var o=e?e.prototype:void 0,t=o?o.valueOf:void 0;function n(l){return t?Object(t.call(l)):{}}module.exports=n;
+"use strict";const e=require("./design-system163.js");var o=e?e.prototype:void 0,t=o?o.valueOf:void 0;function n(l){return t?Object(t.call(l)):{}}module.exports=n;
 //# sourceMappingURL=design-system199.js.map

package/dist/design-system199.mjs

@@ -1,4 +1,4 @@
-import o from "./design-system170.mjs";
+import o from "./design-system163.mjs";
 var e = o ? o.prototype : void 0, l = e ? e.valueOf : void 0;
 function r(t) {
   return l ? Object(l.call(t)) : {};

package/dist/design-system201.js

@@ -1,2 +1,2 @@
-"use strict";const r=require("./design-system122.js");var s=r["__core-js_shared__"];const e=s;module.exports=e;
+"use strict";const r=require("./design-system121.js");var s=r["__core-js_shared__"];const e=s;module.exports=e;
 //# sourceMappingURL=design-system201.js.map

package/dist/design-system201.mjs

@@ -1,4 +1,4 @@
-import o from "./design-system122.mjs";
+import o from "./design-system121.mjs";
 var r = o["__core-js_shared__"];
 const t = r;
 export {

package/dist/design-system21.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue"),f=require("./design-system29.js"),g=require("./design-system3.js"),b=require("./design-system48.js"),y=require("./design-system95.js"),B={class:"ds-flex ds-items-center"},h=["id","disabled","name","value"],q=["for"],V=e.defineComponent({__name:"BRadio",props:{inputId:{default:""},modelValue:{type:[String,Number,Boolean],default:""},inputName:{default:""},label:{default:""},disabled:{type:Boolean,default:!1},labelCssClass:{default:""},hideDetails:{type:Boolean,default:!1},validationRules:{default:void 0},required:{type:Boolean,default:!1},requiredErrorMessage:{default:""}},emits:["change","update:modelValue"],setup(o,{emit:r}){const l=o,{t:u}=b.useI18n(),n={validateRule:a=>!!(a&&a.trim()),errorMessage:()=>l.requiredErrorMessage||u("ds.global.field_required")},s=e.computed(()=>l.inputId||`id-${y()}`),t=e.computed({get(){return l.modelValue},set(a){r("update:modelValue",a)}}),i=e.computed(()=>{let a=[];return l.required&&a.push(n),l.validationRules&&(a=a.concat(l.validationRules)),a.length?a:void 0}),{validate:m,validationResult:c}=g.useValidationField(s.value,t,i.value),p=()=>{r("change"),m()};return(a,d)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",B,[e.withDirectives(e.createElementVNode("input",{id:s.value,"onUpdate:modelValue":d[0]||(d[0]=v=>t.value=v),class:e.normalizeClass([{"ds-cursor-not-allowed":a.disabled},"ds-h-6 ds-min-h-[1.5rem] ds-w-6 ds-min-w-[1.5rem] ds-border-gray-300 ds-bg-gray-100 ds-text-primary-t focus:ds-ring-primary-t"]),disabled:a.disabled,name:a.inputName,value:a.$attrs.value,type:"radio",onChange:p},null,42,h),[[e.vModelRadio,t.value]]),a.label?(e.openBlock(),e.createElementBlock("label",{key:0,class:e.normalizeClass([a.labelCssClass,"ds-ml-2 ds-text-sm ds-font-medium ds-text-gray-900"]),for:s.value},e.toDisplayString(a.label),11,q)):e.createCommentVNode("",!0)]),a.hideDetails?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(f,{key:0,"error-message":e.unref(c).errorMessage(),class:"ds-mt-1"},null,8,["error-message"]))],64))}});module.exports=V;
+"use strict";const e=require("vue"),f=require("./design-system29.js"),g=require("./design-system3.js"),b=require("./design-system48.js"),y=require("./design-system93.js"),B={class:"ds-flex ds-items-center"},h=["id","disabled","name","value"],q=["for"],V=e.defineComponent({__name:"BRadio",props:{inputId:{default:""},modelValue:{type:[String,Number,Boolean],default:""},inputName:{default:""},label:{default:""},disabled:{type:Boolean,default:!1},labelCssClass:{default:""},hideDetails:{type:Boolean,default:!1},validationRules:{default:void 0},required:{type:Boolean,default:!1},requiredErrorMessage:{default:""}},emits:["change","update:modelValue"],setup(o,{emit:r}){const l=o,{t:u}=b.useI18n(),n={validateRule:a=>!!(a&&a.trim()),errorMessage:()=>l.requiredErrorMessage||u("ds.global.field_required")},s=e.computed(()=>l.inputId||`id-${y()}`),t=e.computed({get(){return l.modelValue},set(a){r("update:modelValue",a)}}),i=e.computed(()=>{let a=[];return l.required&&a.push(n),l.validationRules&&(a=a.concat(l.validationRules)),a.length?a:void 0}),{validate:m,validationResult:c}=g.useValidationField(s.value,t,i.value),p=()=>{r("change"),m()};return(a,d)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",B,[e.withDirectives(e.createElementVNode("input",{id:s.value,"onUpdate:modelValue":d[0]||(d[0]=v=>t.value=v),class:e.normalizeClass([{"ds-cursor-not-allowed":a.disabled},"ds-h-6 ds-min-h-[1.5rem] ds-w-6 ds-min-w-[1.5rem] ds-border-gray-300 ds-bg-gray-100 ds-text-primary-t focus:ds-ring-primary-t"]),disabled:a.disabled,name:a.inputName,value:a.$attrs.value,type:"radio",onChange:p},null,42,h),[[e.vModelRadio,t.value]]),a.label?(e.openBlock(),e.createElementBlock("label",{key:0,class:e.normalizeClass([a.labelCssClass,"ds-ml-2 ds-text-sm ds-font-medium ds-text-gray-900"]),for:s.value},e.toDisplayString(a.label),11,q)):e.createCommentVNode("",!0)]),a.hideDetails?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(f,{key:0,"error-message":e.unref(c).errorMessage(),class:"ds-mt-1"},null,8,["error-message"]))],64))}});module.exports=V;
 //# sourceMappingURL=design-system21.js.map

package/dist/design-system21.mjs

@@ -2,7 +2,7 @@ import { defineComponent as R, computed as t, openBlock as d, createElementBlock
 import N from "./design-system29.mjs";
 import { useValidationField as _ } from "./design-system3.mjs";
 import { useI18n as w } from "./design-system48.mjs";
-import D from "./design-system95.mjs";
+import D from "./design-system93.mjs";
 const E = { class: "ds-flex ds-items-center" }, I = ["id", "disabled", "name", "value"], $ = ["for"], A = /* @__PURE__ */ R({
   __name: "BRadio",
   props: {

package/dist/design-system210.js

@@ -1,2 +1,2 @@
-"use strict";const r=require("./design-system122.js");var t=r.Uint8Array;const i=t;module.exports=i;
+"use strict";const r=require("./design-system121.js");var t=r.Uint8Array;const i=t;module.exports=i;
 //# sourceMappingURL=design-system210.js.map

package/dist/design-system210.mjs

@@ -1,4 +1,4 @@
-import r from "./design-system122.mjs";
+import r from "./design-system121.mjs";
 var t = r.Uint8Array;
 const o = t;
 export {

package/dist/design-system217.js

@@ -1,2 +1,2 @@
-"use strict";const r=require("./design-system113.js");function s(t,n){for(var e=t.length;e--;)if(r(t[e][0],n))return e;return-1}module.exports=s;
+"use strict";const r=require("./design-system112.js");function s(t,n){for(var e=t.length;e--;)if(r(t[e][0],n))return e;return-1}module.exports=s;
 //# sourceMappingURL=design-system217.js.map

package/dist/design-system217.mjs

@@ -1,4 +1,4 @@
-import r from "./design-system113.mjs";
+import r from "./design-system112.mjs";
 function o(t, n) {
   for (var e = t.length; e--; )
     if (r(t[e][0], n))

package/dist/design-system22.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue"),T=require("./design-system3.js"),v=require("./design-system6.js"),D=require("./design-system48.js"),F=require("./design-system29.js"),O=require("./design-system30.js"),U=require("./design-system39.js"),W=require("./design-system95.js"),j=e.createElementVNode("path",{d:"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"},null,-1),H=[j],A=["id","disabled"],G={key:0},J={key:1,class:"ds-text-black/[0.4]"},K=e.createElementVNode("path",{d:"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"},null,-1),Q=[K],X=["id","data-cy","data-ut"],Y={class:"ds-max-h-72 ds-overflow-y-auto ds-rounded-lg ds-bg-white ds-shadow"},Z={class:"ds-py-1 ds-text-sm ds-text-black/[0.85]"},ee=["onClick"],se=e.defineComponent({__name:"BSelect",props:{inputId:{default:""},modelValue:{},label:{default:""},items:{},disabled:{type:Boolean,default:!1},placeholder:{default:""},valueCssClass:{default:""},menuCssClass:{default:""},validationRules:{default:void 0},required:{type:Boolean,default:!1},requiredErrorMessage:{default:""},hideDetails:{type:Boolean,default:!1},allowInput:{type:Boolean,default:!1}},emits:["change","open","close","change:input","update:modelValue"],setup(x,{expose:V,emit:d}){const t=x,r=e.ref(null),k=e.ref(null),u=e.ref(null),n=e.ref(!1),{t:M}=D.useI18n(),q={validateRule:s=>!!s,errorMessage:()=>t.requiredErrorMessage||M("ds.global.field_required")},h=e.ref(""),i=e.ref(),c=e.computed(()=>t.inputId||`id-${W()}`),a=e.computed({get(){return t.modelValue},set(s){d("update:modelValue",s)}}),$=e.computed(()=>{let s="ds-border ds-drop-shadow-light ds-text-sm ds-h-[40px] ds-px-3 ds-rounded-lg ds-block ds-w-full ds-inline-flex ds-items-center ds-justify-between ";return s+=t.disabled?"ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4] ":"ds-bg-white ds-text-black/[0.85] ",s+=w.value.valid?"ds-border-black/10 focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus ":"ds-border-error focus:ds-ring-1 focus:ds-ring-error ",s}),I=e.computed(()=>{let s=[];return t.required&&s.push(q),t.validationRules&&(s=s.concat(t.validationRules)),s.length?s:void 0}),{validate:B,validationResult:w}=T.useValidationField(c.value,a,I.value);e.watch(n,s=>{s?(v.lockScrollBody(),R(),d("open")):(v.unlockScrollBody(),C(),d("close"))}),e.watch(a,()=>{g(),p()}),e.watch(()=>t.items,()=>{var s;a.value&&!((s=i.value)!=null&&s.value)&&(g(),p())},{deep:!0});const g=()=>{i.value=t.items.find(s=>s.value===a.value)},p=()=>{var s;t.allowInput&&(h.value=((s=i.value)==null?void 0:s.text)||"")},N=()=>{document.addEventListener("keydown",E)},E=s=>{s.key==="Escape"&&b()},L=()=>{document.addEventListener("click",_)},_=s=>{[r.value,u.value].some(f=>s.composedPath().includes(f))||b()},S=s=>{a.value=s.value,b(),d("change",s.value),e.nextTick(()=>{B()})},z=(s,l)=>{l.style.width=`${s.offsetWidth}px`},R=()=>{e.nextTick(()=>{v.ensureVisiblePosition(r.value,u.value),z(r.value,u.value)})},C=()=>{v.resetPosition(r.value,u.value)},P=s=>{d("change:input",s)},b=()=>{var s;n.value=!1,(s=k.value)==null||s.blur(),p()};return(()=>{g(),p()})(),e.onMounted(()=>{N(),L()}),e.onBeforeUnmount(()=>{document.removeEventListener("keydown",E),document.removeEventListener("click",_),v.unlockScrollBody(),C()}),V({validate:B,selectMenu:n}),(s,l)=>{var y,f;return e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("div",{ref_key:"selectEl",ref:r},[e.createVNode(O,{id:c.value,label:s.label,required:s.required},null,8,["id","label","required"]),t.allowInput?(e.openBlock(),e.createBlock(U,{key:0,id:c.value,ref_key:"inputRef",ref:k,modelValue:h.value,"onUpdate:modelValue":[l[0]||(l[0]=o=>h.value=o),P],disabled:t.disabled,placeholder:t.placeholder,"hide-details":"",onFocus:l[1]||(l[1]=o=>n.value=!0),"onClick:append":l[2]||(l[2]=o=>{var m;return(m=k.value)==null?void 0:m.focus()})},{appendIcon:e.withCtx(()=>[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass([[n.value?"ds-rotate-180":""],"ds-h-4 ds-w-4 ds-transition-transform"]),viewBox:"0 0 320 512",xmlns:"http://www.w3.org/2000/svg"},H,2))]),_:1},8,["id","modelValue","disabled","placeholder"])):(e.openBlock(),e.createElementBlock("button",{key:1,id:c.value,class:e.normalizeClass($.value),disabled:t.disabled,type:"button",onClick:l[3]||(l[3]=o=>n.value=!n.value)},[e.createElementVNode("span",{class:e.normalizeClass([s.valueCssClass,"ds-truncate"])},[(y=i.value)!=null&&y.text?(e.openBlock(),e.createElementBlock("span",G,e.toDisplayString((f=i.value)==null?void 0:f.text),1)):(e.openBlock(),e.createElementBlock("span",J,e.toDisplayString(t.placeholder),1))],2),e.createTextVNode("   "),(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass([[n.value?"ds-rotate-180":""],"ds-h-4 ds-w-4 ds-transition-transform"]),viewBox:"0 0 320 512",xmlns:"http://www.w3.org/2000/svg"},Q,2))],10,A)),e.withDirectives(e.createElementVNode("div",{id:`${c.value}Menu`,ref_key:"selectMenuEl",ref:u,class:e.normalizeClass([s.menuCssClass,"ds-absolute ds-z-50 ds-min-w-[8rem] ds-py-1"]),"data-cy":s.$attrs["data-cy"]?`${s.$attrs["data-cy"]}Menu`:void 0,"data-ut":s.$attrs["data-ut"]?`${s.$attrs["data-ut"]}Menu`:void 0},[e.createElementVNode("div",Y,[e.createElementVNode("ul",Z,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.items,(o,m)=>(e.openBlock(),e.createElementBlock("li",{key:`item${m}`,class:"ds-cursor-pointer",onClick:le=>S(o)},[e.createElementVNode("a",{class:e.normalizeClass([o.cssClass+`${o.value===a.value?" ds-bg-gray-150":""}`,"ds-block ds-px-4 ds-py-2 hover:ds-bg-gray-150"])},e.toDisplayString(o==null?void 0:o.text),3)],8,ee))),128))])])],10,X),[[e.vShow,n.value]])],512),s.hideDetails?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(F,{key:0,"error-message":e.unref(w).errorMessage(),class:"ds-mt-1"},null,8,["error-message"]))])}}});module.exports=se;
+"use strict";const e=require("vue"),T=require("./design-system3.js"),v=require("./design-system6.js"),D=require("./design-system48.js"),F=require("./design-system29.js"),O=require("./design-system30.js"),U=require("./design-system39.js"),W=require("./design-system93.js"),j=e.createElementVNode("path",{d:"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"},null,-1),H=[j],A=["id","disabled"],G={key:0},J={key:1,class:"ds-text-black/[0.4]"},K=e.createElementVNode("path",{d:"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"},null,-1),Q=[K],X=["id","data-cy","data-ut"],Y={class:"ds-max-h-72 ds-overflow-y-auto ds-rounded-lg ds-bg-white ds-shadow"},Z={class:"ds-py-1 ds-text-sm ds-text-black/[0.85]"},ee=["onClick"],se=e.defineComponent({__name:"BSelect",props:{inputId:{default:""},modelValue:{},label:{default:""},items:{},disabled:{type:Boolean,default:!1},placeholder:{default:""},valueCssClass:{default:""},menuCssClass:{default:""},validationRules:{default:void 0},required:{type:Boolean,default:!1},requiredErrorMessage:{default:""},hideDetails:{type:Boolean,default:!1},allowInput:{type:Boolean,default:!1}},emits:["change","open","close","change:input","update:modelValue"],setup(x,{expose:V,emit:d}){const t=x,r=e.ref(null),k=e.ref(null),u=e.ref(null),n=e.ref(!1),{t:M}=D.useI18n(),q={validateRule:s=>!!s,errorMessage:()=>t.requiredErrorMessage||M("ds.global.field_required")},h=e.ref(""),i=e.ref(),c=e.computed(()=>t.inputId||`id-${W()}`),a=e.computed({get(){return t.modelValue},set(s){d("update:modelValue",s)}}),$=e.computed(()=>{let s="ds-border ds-drop-shadow-light ds-text-sm ds-h-[40px] ds-px-3 ds-rounded-lg ds-block ds-w-full ds-inline-flex ds-items-center ds-justify-between ";return s+=t.disabled?"ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4] ":"ds-bg-white ds-text-black/[0.85] ",s+=w.value.valid?"ds-border-black/10 focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus ":"ds-border-error focus:ds-ring-1 focus:ds-ring-error ",s}),I=e.computed(()=>{let s=[];return t.required&&s.push(q),t.validationRules&&(s=s.concat(t.validationRules)),s.length?s:void 0}),{validate:B,validationResult:w}=T.useValidationField(c.value,a,I.value);e.watch(n,s=>{s?(v.lockScrollBody(),R(),d("open")):(v.unlockScrollBody(),C(),d("close"))}),e.watch(a,()=>{g(),p()}),e.watch(()=>t.items,()=>{var s;a.value&&!((s=i.value)!=null&&s.value)&&(g(),p())},{deep:!0});const g=()=>{i.value=t.items.find(s=>s.value===a.value)},p=()=>{var s;t.allowInput&&(h.value=((s=i.value)==null?void 0:s.text)||"")},N=()=>{document.addEventListener("keydown",E)},E=s=>{s.key==="Escape"&&b()},L=()=>{document.addEventListener("click",_)},_=s=>{[r.value,u.value].some(f=>s.composedPath().includes(f))||b()},S=s=>{a.value=s.value,b(),d("change",s.value),e.nextTick(()=>{B()})},z=(s,l)=>{l.style.width=`${s.offsetWidth}px`},R=()=>{e.nextTick(()=>{v.ensureVisiblePosition(r.value,u.value),z(r.value,u.value)})},C=()=>{v.resetPosition(r.value,u.value)},P=s=>{d("change:input",s)},b=()=>{var s;n.value=!1,(s=k.value)==null||s.blur(),p()};return(()=>{g(),p()})(),e.onMounted(()=>{N(),L()}),e.onBeforeUnmount(()=>{document.removeEventListener("keydown",E),document.removeEventListener("click",_),v.unlockScrollBody(),C()}),V({validate:B,selectMenu:n}),(s,l)=>{var y,f;return e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("div",{ref_key:"selectEl",ref:r},[e.createVNode(O,{id:c.value,label:s.label,required:s.required},null,8,["id","label","required"]),t.allowInput?(e.openBlock(),e.createBlock(U,{key:0,id:c.value,ref_key:"inputRef",ref:k,modelValue:h.value,"onUpdate:modelValue":[l[0]||(l[0]=o=>h.value=o),P],disabled:t.disabled,placeholder:t.placeholder,"hide-details":"",onFocus:l[1]||(l[1]=o=>n.value=!0),"onClick:append":l[2]||(l[2]=o=>{var m;return(m=k.value)==null?void 0:m.focus()})},{appendIcon:e.withCtx(()=>[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass([[n.value?"ds-rotate-180":""],"ds-h-4 ds-w-4 ds-transition-transform"]),viewBox:"0 0 320 512",xmlns:"http://www.w3.org/2000/svg"},H,2))]),_:1},8,["id","modelValue","disabled","placeholder"])):(e.openBlock(),e.createElementBlock("button",{key:1,id:c.value,class:e.normalizeClass($.value),disabled:t.disabled,type:"button",onClick:l[3]||(l[3]=o=>n.value=!n.value)},[e.createElementVNode("span",{class:e.normalizeClass([s.valueCssClass,"ds-truncate"])},[(y=i.value)!=null&&y.text?(e.openBlock(),e.createElementBlock("span",G,e.toDisplayString((f=i.value)==null?void 0:f.text),1)):(e.openBlock(),e.createElementBlock("span",J,e.toDisplayString(t.placeholder),1))],2),e.createTextVNode("   "),(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass([[n.value?"ds-rotate-180":""],"ds-h-4 ds-w-4 ds-transition-transform"]),viewBox:"0 0 320 512",xmlns:"http://www.w3.org/2000/svg"},Q,2))],10,A)),e.withDirectives(e.createElementVNode("div",{id:`${c.value}Menu`,ref_key:"selectMenuEl",ref:u,class:e.normalizeClass([s.menuCssClass,"ds-absolute ds-z-50 ds-min-w-[8rem] ds-py-1"]),"data-cy":s.$attrs["data-cy"]?`${s.$attrs["data-cy"]}Menu`:void 0,"data-ut":s.$attrs["data-ut"]?`${s.$attrs["data-ut"]}Menu`:void 0},[e.createElementVNode("div",Y,[e.createElementVNode("ul",Z,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.items,(o,m)=>(e.openBlock(),e.createElementBlock("li",{key:`item${m}`,class:"ds-cursor-pointer",onClick:le=>S(o)},[e.createElementVNode("a",{class:e.normalizeClass([o.cssClass+`${o.value===a.value?" ds-bg-gray-150":""}`,"ds-block ds-px-4 ds-py-2 hover:ds-bg-gray-150"])},e.toDisplayString(o==null?void 0:o.text),3)],8,ee))),128))])])],10,X),[[e.vShow,n.value]])],512),s.hideDetails?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(F,{key:0,"error-message":e.unref(w).errorMessage(),class:"ds-mt-1"},null,8,["error-message"]))])}}});module.exports=se;
 //# sourceMappingURL=design-system22.js.map

package/dist/design-system22.mjs

@@ -5,7 +5,7 @@ import { useI18n as re } from "./design-system48.mjs";
 import ie from "./design-system29.mjs";
 import ce from "./design-system30.mjs";
 import ve from "./design-system39.mjs";
-import pe from "./design-system95.mjs";
+import pe from "./design-system93.mjs";
 const fe = /* @__PURE__ */ n("path", { d: "M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z" }, null, -1), me = [
   fe
 ], he = ["id", "disabled"], be = { key: 0 }, ge = {

package/dist/design-system23.js

@@ -1,2 +1,2 @@
-"use strict";const l=require("vue"),b=require("./design-system3.js"),g=require("./design-system48.js"),_=require("./design-system29.js"),q=require("./design-system30.js"),y=require("./design-system95.js"),B=["id","autocomplete","disabled","placeholder","readonly","rows"],h=l.defineComponent({__name:"BTextarea",props:{inputId:{default:""},inputCssClass:{default:""},modelValue:{},validationRules:{default:void 0},label:{default:""},placeholder:{default:""},autocomplete:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},rows:{default:3},required:{type:Boolean,default:!1},requiredErrorMessage:{default:""},hideDetails:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(a,{expose:u,emit:i}){const s=a,{t:n}=g.useI18n(),c={validateRule:e=>typeof e=="number"?!!e:!!(e&&(e!=null&&e.trim())),errorMessage:()=>s.requiredErrorMessage||n("ds.global.field_required")},r=l.computed(()=>s.inputId||`id-${y()}`),t=l.computed({get(){return s.modelValue},set(e){i("update:modelValue",e)}}),p=l.computed(()=>[{"ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/40":s.disabled,"ds-text-black/[0.85]":!s.disabled,"ds-border-error focus:ds-ring-1 focus:ds-ring-error":!d.value.valid,"ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus":d.value.valid},s.inputCssClass]),f=l.computed(()=>{let e=[];return s.required&&e.push(c),s.validationRules&&(e=e.concat(s.validationRules)),e.length?e:void 0}),{validate:m,validationResult:d}=b.useValidationField(r.value,t,f.value);return u({validate:m}),(e,o)=>(l.openBlock(),l.createElementBlock("div",null,[l.createVNode(q,{id:r.value,label:e.label,required:e.required},null,8,["id","label","required"]),l.withDirectives(l.createElementVNode("textarea",{id:r.value,"onUpdate:modelValue":o[0]||(o[0]=v=>t.value=v),autocomplete:s.autocomplete?"on":"off",class:l.normalizeClass([p.value,"ds-block ds-w-full ds-rounded-lg ds-border ds-px-3 ds-py-1 ds-text-sm ds-drop-shadow-light"]),disabled:s.disabled,placeholder:s.placeholder,readonly:s.readonly,rows:s.rows},null,10,B),[[l.vModelText,t.value]]),e.hideDetails?l.createCommentVNode("",!0):(l.openBlock(),l.createBlock(_,{key:0,"error-message":l.unref(d).errorMessage(),class:"ds-mt-1"},null,8,["error-message"]))]))}});module.exports=h;
+"use strict";const l=require("vue"),b=require("./design-system3.js"),g=require("./design-system48.js"),_=require("./design-system29.js"),q=require("./design-system30.js"),y=require("./design-system93.js"),B=["id","autocomplete","disabled","placeholder","readonly","rows"],h=l.defineComponent({__name:"BTextarea",props:{inputId:{default:""},inputCssClass:{default:""},modelValue:{},validationRules:{default:void 0},label:{default:""},placeholder:{default:""},autocomplete:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},rows:{default:3},required:{type:Boolean,default:!1},requiredErrorMessage:{default:""},hideDetails:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(a,{expose:u,emit:i}){const s=a,{t:n}=g.useI18n(),c={validateRule:e=>typeof e=="number"?!!e:!!(e&&(e!=null&&e.trim())),errorMessage:()=>s.requiredErrorMessage||n("ds.global.field_required")},r=l.computed(()=>s.inputId||`id-${y()}`),t=l.computed({get(){return s.modelValue},set(e){i("update:modelValue",e)}}),p=l.computed(()=>[{"ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/40":s.disabled,"ds-text-black/[0.85]":!s.disabled,"ds-border-error focus:ds-ring-1 focus:ds-ring-error":!d.value.valid,"ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus":d.value.valid},s.inputCssClass]),f=l.computed(()=>{let e=[];return s.required&&e.push(c),s.validationRules&&(e=e.concat(s.validationRules)),e.length?e:void 0}),{validate:m,validationResult:d}=b.useValidationField(r.value,t,f.value);return u({validate:m}),(e,o)=>(l.openBlock(),l.createElementBlock("div",null,[l.createVNode(q,{id:r.value,label:e.label,required:e.required},null,8,["id","label","required"]),l.withDirectives(l.createElementVNode("textarea",{id:r.value,"onUpdate:modelValue":o[0]||(o[0]=v=>t.value=v),autocomplete:s.autocomplete?"on":"off",class:l.normalizeClass([p.value,"ds-block ds-w-full ds-rounded-lg ds-border ds-px-3 ds-py-1 ds-text-sm ds-drop-shadow-light"]),disabled:s.disabled,placeholder:s.placeholder,readonly:s.readonly,rows:s.rows},null,10,B),[[l.vModelText,t.value]]),e.hideDetails?l.createCommentVNode("",!0):(l.openBlock(),l.createBlock(_,{key:0,"error-message":l.unref(d).errorMessage(),class:"ds-mt-1"},null,8,["error-message"]))]))}});module.exports=h;
 //# sourceMappingURL=design-system23.js.map

package/dist/design-system23.mjs

@@ -3,7 +3,7 @@ import { useValidationField as x } from "./design-system3.mjs";
 import { useI18n as R } from "./design-system48.mjs";
 import M from "./design-system29.mjs";
 import E from "./design-system30.mjs";
-import D from "./design-system95.mjs";
+import D from "./design-system93.mjs";
 const I = ["id", "autocomplete", "disabled", "placeholder", "readonly", "rows"], j = /* @__PURE__ */ g({
   __name: "BTextarea",
   props: {

package/dist/design-system25.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("./design-system53.js");require("./design-system54.js");const r=require("./design-system55.js"),t=r(e,[["__scopeId","data-v-826818c4"]]);module.exports=t;
+"use strict";const e=require("./design-system50.js");require("./design-system51.js");const r=require("./design-system52.js"),t=r(e,[["__scopeId","data-v-826818c4"]]);module.exports=t;
 //# sourceMappingURL=design-system25.js.map

package/dist/design-system25.mjs

@@ -1,6 +1,6 @@
-import o from "./design-system53.mjs";
-import "./design-system54.mjs";
-import r from "./design-system55.mjs";
+import o from "./design-system50.mjs";
+import "./design-system51.mjs";
+import r from "./design-system52.mjs";
 const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-826818c4"]]);
 export {
   p as default

package/dist/design-system26.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue");require("./design-system56.js");require("./design-system57.js");const t=require("./design-system55.js"),s={},c={class:"carousel-item"};function n(r,u){return e.openBlock(),e.createElementBlock("div",c,[e.renderSlot(r.$slots,"default",{},void 0,!0)])}const o=t(s,[["render",n],["__scopeId","data-v-a82242b4"]]);module.exports=o;
+"use strict";const e=require("vue");require("./design-system53.js");require("./design-system54.js");const t=require("./design-system52.js"),s={},c={class:"carousel-item"};function n(r,u){return e.openBlock(),e.createElementBlock("div",c,[e.renderSlot(r.$slots,"default",{},void 0,!0)])}const o=t(s,[["render",n],["__scopeId","data-v-a82242b4"]]);module.exports=o;
 //# sourceMappingURL=design-system26.js.map

package/dist/design-system26.mjs

@@ -1,7 +1,7 @@
 import { openBlock as t, createElementBlock as o, renderSlot as r } from "vue";
-import "./design-system56.mjs";
-import "./design-system57.mjs";
-import c from "./design-system55.mjs";
+import "./design-system53.mjs";
+import "./design-system54.mjs";
+import c from "./design-system52.mjs";
 const s = {}, n = { class: "carousel-item" };
 function a(e, d) {
   return t(), o("div", n, [

package/dist/design-system27.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("./design-system58.js");require("./design-system59.js");const r=require("./design-system55.js"),t=r(e,[["__scopeId","data-v-897b98c2"]]);module.exports=t;
+"use strict";const e=require("./design-system55.js");require("./design-system56.js");const r=require("./design-system52.js"),t=r(e,[["__scopeId","data-v-897b98c2"]]);module.exports=t;
 //# sourceMappingURL=design-system27.js.map

package/dist/design-system27.mjs

@@ -1,6 +1,6 @@
-import o from "./design-system58.mjs";
-import "./design-system59.mjs";
-import t from "./design-system55.mjs";
+import o from "./design-system55.mjs";
+import "./design-system56.mjs";
+import t from "./design-system52.mjs";
 const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-897b98c2"]]);
 export {
   p as default

package/dist/design-system28.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue"),t=require("./design-system55.js"),n={},o={class:"ds-rounded-lg ds-bg-white ds-p-2 ds-shadow"};function r(s,d){return e.openBlock(),e.createElementBlock("ul",o,[e.renderSlot(s.$slots,"default")])}const c=t(n,[["render",r]]);module.exports=c;
+"use strict";const e=require("vue"),t=require("./design-system52.js"),n={},o={class:"ds-rounded-lg ds-bg-white ds-p-2 ds-shadow"};function r(s,d){return e.openBlock(),e.createElementBlock("ul",o,[e.renderSlot(s.$slots,"default")])}const c=t(n,[["render",r]]);module.exports=c;
 //# sourceMappingURL=design-system28.js.map

package/dist/design-system28.mjs

@@ -1,5 +1,5 @@
 import { openBlock as o, createElementBlock as t, renderSlot as r } from "vue";
-import s from "./design-system55.mjs";
+import s from "./design-system52.mjs";
 const n = {}, d = { class: "ds-rounded-lg ds-bg-white ds-p-2 ds-shadow" };
 function c(e, l) {
   return o(), t("ul", d, [

package/dist/design-system31.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("./design-system67.js");require("./design-system68.js");const r=require("./design-system55.js"),t=r(e,[["__scopeId","data-v-31348ccc"]]);module.exports=t;
+"use strict";const e=require("./design-system64.js");require("./design-system65.js");const r=require("./design-system52.js"),t=r(e,[["__scopeId","data-v-31348ccc"]]);module.exports=t;
 //# sourceMappingURL=design-system31.js.map

package/dist/design-system31.mjs

@@ -1,6 +1,6 @@
-import o from "./design-system67.mjs";
-import "./design-system68.mjs";
-import r from "./design-system55.mjs";
+import o from "./design-system64.mjs";
+import "./design-system65.mjs";
+import r from "./design-system52.mjs";
 const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-31348ccc"]]);
 export {
   m as default

package/dist/design-system32.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("./design-system69.js");require("./design-system70.js");const r=require("./design-system55.js"),t=r(e,[["__scopeId","data-v-c49c635e"]]);module.exports=t;
+"use strict";const e=require("./design-system66.js");require("./design-system67.js");const r=require("./design-system52.js"),t=r(e,[["__scopeId","data-v-c49c635e"]]);module.exports=t;
 //# sourceMappingURL=design-system32.js.map

package/dist/design-system32.mjs

@@ -1,6 +1,6 @@
-import o from "./design-system69.mjs";
-import "./design-system70.mjs";
-import r from "./design-system55.mjs";
+import o from "./design-system66.mjs";
+import "./design-system67.mjs";
+import r from "./design-system52.mjs";
 const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-c49c635e"]]);
 export {
   e as default

package/dist/design-system33.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue"),t=require("./design-system55.js"),o={},s={class:"ds-p-4"};function c(r,l){return e.openBlock(),e.createElementBlock("div",s,[e.renderSlot(r.$slots,"default")])}const n=t(o,[["render",c]]);module.exports=n;
+"use strict";const e=require("vue"),t=require("./design-system52.js"),o={},s={class:"ds-p-4"};function c(r,l){return e.openBlock(),e.createElementBlock("div",s,[e.renderSlot(r.$slots,"default")])}const n=t(o,[["render",c]]);module.exports=n;
 //# sourceMappingURL=design-system33.js.map

package/dist/design-system33.mjs

@@ -1,5 +1,5 @@
 import { openBlock as o, createElementBlock as t, renderSlot as r } from "vue";
-import c from "./design-system55.mjs";
+import c from "./design-system52.mjs";
 const s = {}, n = { class: "ds-p-4" };
 function d(e, l) {
   return o(), t("div", n, [

package/dist/design-system34.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue"),t=require("./design-system55.js"),r={},n={class:"ds-flex ds-items-center ds-justify-end ds-rounded-b-lg ds-p-4"};function o(s,d){return e.openBlock(),e.createElementBlock("div",n,[e.renderSlot(s.$slots,"default")])}const c=t(r,[["render",o]]);module.exports=c;
+"use strict";const e=require("vue"),t=require("./design-system52.js"),r={},n={class:"ds-flex ds-items-center ds-justify-end ds-rounded-b-lg ds-p-4"};function o(s,d){return e.openBlock(),e.createElementBlock("div",n,[e.renderSlot(s.$slots,"default")])}const c=t(r,[["render",o]]);module.exports=c;
 //# sourceMappingURL=design-system34.js.map

package/dist/design-system34.mjs

@@ -1,5 +1,5 @@
 import { openBlock as o, createElementBlock as t, renderSlot as s } from "vue";
-import r from "./design-system55.mjs";
+import r from "./design-system52.mjs";
 const d = {}, n = { class: "ds-flex ds-items-center ds-justify-end ds-rounded-b-lg ds-p-4" };
 function c(e, l) {
   return o(), t("div", n, [

package/dist/design-system35.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue"),t=require("./design-system55.js"),r={},n={class:"ds-flex ds-items-start ds-justify-between ds-rounded-t-lg ds-p-4"};function o(s,d){return e.openBlock(),e.createElementBlock("div",n,[e.renderSlot(s.$slots,"default")])}const c=t(r,[["render",o]]);module.exports=c;
+"use strict";const e=require("vue"),t=require("./design-system52.js"),r={},n={class:"ds-flex ds-items-start ds-justify-between ds-rounded-t-lg ds-p-4"};function o(s,d){return e.openBlock(),e.createElementBlock("div",n,[e.renderSlot(s.$slots,"default")])}const c=t(r,[["render",o]]);module.exports=c;
 //# sourceMappingURL=design-system35.js.map

package/dist/design-system35.mjs

@@ -1,5 +1,5 @@
 import { openBlock as t, createElementBlock as s, renderSlot as o } from "vue";
-import r from "./design-system55.mjs";
+import r from "./design-system52.mjs";
 const d = {}, n = { class: "ds-flex ds-items-start ds-justify-between ds-rounded-t-lg ds-p-4" };
 function c(e, l) {
   return t(), s("div", n, [

package/dist/design-system36.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue"),r=require("./design-system55.js"),t={},d={class:"ds-fixed ds-left-0 ds-right-0 ds-top-0 ds-z-[100] ds-flex ds-h-full ds-w-full ds-items-center ds-justify-center ds-overflow-y-auto ds-overflow-x-hidden ds-bg-black/[0.65] ds-backdrop-blur-sm"};function o(s,c){return e.openBlock(),e.createElementBlock("div",d,[e.renderSlot(s.$slots,"default")])}const l=r(t,[["render",o]]);module.exports=l;
+"use strict";const e=require("vue"),r=require("./design-system52.js"),t={},d={class:"ds-fixed ds-left-0 ds-right-0 ds-top-0 ds-z-[100] ds-flex ds-h-full ds-w-full ds-items-center ds-justify-center ds-overflow-y-auto ds-overflow-x-hidden ds-bg-black/[0.65] ds-backdrop-blur-sm"};function o(s,c){return e.openBlock(),e.createElementBlock("div",d,[e.renderSlot(s.$slots,"default")])}const l=r(t,[["render",o]]);module.exports=l;
 //# sourceMappingURL=design-system36.js.map

package/dist/design-system36.mjs

@@ -1,5 +1,5 @@
 import { openBlock as s, createElementBlock as d, renderSlot as t } from "vue";
-import o from "./design-system55.mjs";
+import o from "./design-system52.mjs";
 const r = {}, l = { class: "ds-fixed ds-left-0 ds-right-0 ds-top-0 ds-z-[100] ds-flex ds-h-full ds-w-full ds-items-center ds-justify-center ds-overflow-y-auto ds-overflow-x-hidden ds-bg-black/[0.65] ds-backdrop-blur-sm" };
 function c(e, f) {
   return s(), d("div", l, [

package/dist/design-system37.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue");require("./design-system77.js");const t=require("./design-system55.js"),c={},n={class:"tab"};function s(r,u){return e.openBlock(),e.createElementBlock("div",n,[e.renderSlot(r.$slots,"default",{},void 0,!0)])}const o=t(c,[["render",s],["__scopeId","data-v-797a82dc"]]);module.exports=o;
+"use strict";const e=require("vue");require("./design-system74.js");const t=require("./design-system52.js"),c={},n={class:"tab"};function s(r,u){return e.openBlock(),e.createElementBlock("div",n,[e.renderSlot(r.$slots,"default",{},void 0,!0)])}const o=t(c,[["render",s],["__scopeId","data-v-797a82dc"]]);module.exports=o;
 //# sourceMappingURL=design-system37.js.map

package/dist/design-system37.mjs

@@ -1,6 +1,6 @@
 import { openBlock as t, createElementBlock as o, renderSlot as r } from "vue";
-import "./design-system77.mjs";
-import c from "./design-system55.mjs";
+import "./design-system74.mjs";
+import c from "./design-system52.mjs";
 const n = {}, s = { class: "tab" };
 function a(e, d) {
   return t(), o("div", s, [

package/dist/design-system38.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("./design-system78.js");require("./design-system79.js");const r=require("./design-system55.js"),t=r(e,[["__scopeId","data-v-646ae8c4"]]);module.exports=t;
+"use strict";const e=require("./design-system75.js");require("./design-system76.js");const r=require("./design-system52.js"),t=r(e,[["__scopeId","data-v-646ae8c4"]]);module.exports=t;
 //# sourceMappingURL=design-system38.js.map

package/dist/design-system38.mjs

@@ -1,6 +1,6 @@
-import o from "./design-system78.mjs";
-import "./design-system79.mjs";
-import t from "./design-system55.mjs";
+import o from "./design-system75.mjs";
+import "./design-system76.mjs";
+import t from "./design-system52.mjs";
 const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-646ae8c4"]]);
 export {
   p as default

package/dist/design-system39.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("./design-system81.js");require("./design-system82.js");const t=require("./design-system55.js"),r=t(e,[["__scopeId","data-v-d47b93d4"]]);module.exports=r;
+"use strict";const e=require("./design-system78.js");require("./design-system79.js");const t=require("./design-system52.js"),r=t(e,[["__scopeId","data-v-d47b93d4"]]);module.exports=r;
 //# sourceMappingURL=design-system39.js.map

package/dist/design-system39.mjs

@@ -1,6 +1,6 @@
-import o from "./design-system81.mjs";
-import "./design-system82.mjs";
-import t from "./design-system55.mjs";
+import o from "./design-system78.mjs";
+import "./design-system79.mjs";
+import t from "./design-system52.mjs";
 const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-d47b93d4"]]);
 export {
   m as default

package/dist/design-system41.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("./design-system85.js");require("./design-system86.js");const t=require("./design-system55.js"),r=t(e,[["__scopeId","data-v-8e5f01f5"]]);module.exports=r;
+"use strict";const e=require("./design-system82.js");require("./design-system83.js");const t=require("./design-system52.js"),r=t(e,[["__scopeId","data-v-8e5f01f5"]]);module.exports=r;
 //# sourceMappingURL=design-system41.js.map

package/dist/design-system41.mjs

@@ -1,6 +1,6 @@
-import o from "./design-system85.mjs";
-import "./design-system86.mjs";
-import t from "./design-system55.mjs";
+import o from "./design-system82.mjs";
+import "./design-system83.mjs";
+import t from "./design-system52.mjs";
 const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-8e5f01f5"]]);
 export {
   m as default

package/dist/design-system42.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue"),s=require("./design-system55.js"),t={},o={class:"ds-relative ds-w-full ds-border-l-2 ds-border-primary-f/50"};function n(r,l){return e.openBlock(),e.createElementBlock("ol",o,[e.renderSlot(r.$slots,"default")])}const c=s(t,[["render",n]]);module.exports=c;
+"use strict";const e=require("vue"),s=require("./design-system52.js"),t={},o={class:"ds-relative ds-w-full ds-border-l-2 ds-border-primary-f/50"};function n(r,l){return e.openBlock(),e.createElementBlock("ol",o,[e.renderSlot(r.$slots,"default")])}const c=s(t,[["render",n]]);module.exports=c;
 //# sourceMappingURL=design-system42.js.map

package/dist/design-system42.mjs

@@ -1,5 +1,5 @@
 import { openBlock as r, createElementBlock as o, renderSlot as t } from "vue";
-import s from "./design-system55.mjs";
+import s from "./design-system52.mjs";
 const l = {}, c = { class: "ds-relative ds-w-full ds-border-l-2 ds-border-primary-f/50" };
 function n(e, d) {
   return r(), o("ol", c, [

package/dist/design-system43.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue"),t=require("./design-system55.js"),l={},d={class:"ds-ml-4 ds-flex ds-w-full ds-items-center"},n=e.createElementVNode("div",null,[e.createElementVNode("div",{class:"-ds-ml-[25px] ds-h-4 ds-w-4 ds-rounded-full ds-bg-primary-f"})],-1),r={class:"ds-flex-auto"};function c(s,i){return e.openBlock(),e.createElementBlock("li",d,[n,e.createElementVNode("div",r,[e.renderSlot(s.$slots,"default")])])}const o=t(l,[["render",c]]);module.exports=o;
+"use strict";const e=require("vue"),t=require("./design-system52.js"),l={},d={class:"ds-ml-4 ds-flex ds-w-full ds-items-center"},n=e.createElementVNode("div",null,[e.createElementVNode("div",{class:"-ds-ml-[25px] ds-h-4 ds-w-4 ds-rounded-full ds-bg-primary-f"})],-1),r={class:"ds-flex-auto"};function c(s,i){return e.openBlock(),e.createElementBlock("li",d,[n,e.createElementVNode("div",r,[e.renderSlot(s.$slots,"default")])])}const o=t(l,[["render",c]]);module.exports=o;
 //# sourceMappingURL=design-system43.js.map

package/dist/design-system43.mjs

@@ -1,5 +1,5 @@
 import { openBlock as t, createElementBlock as d, createElementVNode as e, renderSlot as l } from "vue";
-import o from "./design-system55.mjs";
+import o from "./design-system52.mjs";
 const r = {}, c = { class: "ds-ml-4 ds-flex ds-w-full ds-items-center" }, n = /* @__PURE__ */ e("div", null, [
   /* @__PURE__ */ e("div", { class: "-ds-ml-[25px] ds-h-4 ds-w-4 ds-rounded-full ds-bg-primary-f" })
 ], -1), i = { class: "ds-flex-auto" };

package/dist/design-system44.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("./design-system87.js");require("./design-system88.js");const r=require("./design-system55.js"),t=r(e,[["__scopeId","data-v-c68e1d7d"]]);module.exports=t;
+"use strict";const e=require("./design-system84.js");require("./design-system85.js");const r=require("./design-system52.js"),t=r(e,[["__scopeId","data-v-b0361fb6"]]);module.exports=t;
 //# sourceMappingURL=design-system44.js.map

package/dist/design-system44.mjs

@@ -1,8 +1,8 @@
-import o from "./design-system87.mjs";
-import "./design-system88.mjs";
-import r from "./design-system55.mjs";
-const a = /* @__PURE__ */ r(o, [["__scopeId", "data-v-c68e1d7d"]]);
+import o from "./design-system84.mjs";
+import "./design-system85.mjs";
+import r from "./design-system52.mjs";
+const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-b0361fb6"]]);
 export {
-  a as default
+  e as default
 };
 //# sourceMappingURL=design-system44.mjs.map

package/dist/design-system45.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue"),d=require("./design-system97.js"),r=require("./design-system6.js"),u=require("./design-system36.js"),i=e.defineComponent({__name:"BImagePreview",props:{modelValue:{type:Boolean},url:{}},emits:["update:modelValue"],setup(s,{emit:a}){const n=s,o=e.computed({get(){return n.modelValue},set(t){a("update:modelValue",t)}});e.watch(o,t=>{t?r.lockScrollBody():r.unlockScrollBody()});const c=()=>{o.value=!1},l=t=>{t.key==="Escape"&&c()};return e.onMounted(()=>{document.addEventListener("keydown",l)}),e.onBeforeUnmount(()=>{document.removeEventListener("keydown",l)}),(t,m)=>(e.openBlock(),e.createBlock(e.Transition,{name:"fade"},{default:e.withCtx(()=>[o.value?(e.openBlock(),e.createBlock(u,{key:0},{default:e.withCtx(()=>[e.createVNode(d,{class:"ds-right-4 ds-top-4 ds-h-8 ds-w-8",onClick:c}),e.createElementVNode("div",{style:e.normalizeStyle({backgroundImage:`url('${n.url}')`,height:"calc(100vh - 16px)",width:"calc(100vw - 16px)"}),class:"ds-bg-contain ds-bg-center ds-bg-no-repeat"},null,4)]),_:1})):e.createCommentVNode("",!0)]),_:1}))}});module.exports=i;
+"use strict";const e=require("vue"),d=require("./design-system100.js"),r=require("./design-system6.js"),u=require("./design-system36.js"),i=e.defineComponent({__name:"BImagePreview",props:{modelValue:{type:Boolean},url:{}},emits:["update:modelValue"],setup(s,{emit:a}){const n=s,o=e.computed({get(){return n.modelValue},set(t){a("update:modelValue",t)}});e.watch(o,t=>{t?r.lockScrollBody():r.unlockScrollBody()});const c=()=>{o.value=!1},l=t=>{t.key==="Escape"&&c()};return e.onMounted(()=>{document.addEventListener("keydown",l)}),e.onBeforeUnmount(()=>{document.removeEventListener("keydown",l)}),(t,m)=>(e.openBlock(),e.createBlock(e.Transition,{name:"fade"},{default:e.withCtx(()=>[o.value?(e.openBlock(),e.createBlock(u,{key:0},{default:e.withCtx(()=>[e.createVNode(d,{class:"ds-right-4 ds-top-4 ds-h-8 ds-w-8",onClick:c}),e.createElementVNode("div",{style:e.normalizeStyle({backgroundImage:`url('${n.url}')`,height:"calc(100vh - 16px)",width:"calc(100vw - 16px)"}),class:"ds-bg-contain ds-bg-center ds-bg-no-repeat"},null,4)]),_:1})):e.createCommentVNode("",!0)]),_:1}))}});module.exports=i;
 //# sourceMappingURL=design-system45.js.map

package/dist/design-system45.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system45.js","sources":["../src/components/BImagePicker/BImagePreview.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createVNode as _createVNode, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, Transition as _Transition } from \"vue\"\n\nimport {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  type StyleValue,\n  watch,\n} from 'vue';\nimport BImagePickerCloseButton from './BImagePickerCloseButton.vue';\nimport { lockScrollBody, unlockScrollBody } from '@/helpers/ComponentHelper';\nimport BOverlay from '../BOverlay.vue';\n\n//#region Props\nexport interface Props {\n  modelValue: boolean;\n  url: string;\n}\n\n\nexport default /*#__PURE__*/_defineComponent({\n  __name: 'BImagePreview',\n  props: {\n    modelValue: { type: Boolean },\n    url: {}\n  },\n  emits: [\"update:modelValue\"],\n  setup(__props: any, { emit }) {\n\nconst props = __props;\n\n\n//#endregion\n\n//#region Events\n\n//#endregion\n\n//#region Data\nconst value = computed({\n  get() {\n    return props.modelValue;\n  },\n  set(val: boolean) {\n    emit('update:modelValue', val);\n  },\n});\n//#endregion\n\n//#region Watchers\nwatch(value, (val: boolean) => {\n  if (val) {\n    lockScrollBody();\n  } else {\n    unlockScrollBody();\n  }\n});\n//#endregion\n\n//#region Methods\nconst closePreview = () => {\n  value.value = false;\n};\nconst closeOnEscapePressed = (event: KeyboardEvent) => {\n  if (event.key === 'Escape') {\n    closePreview();\n  }\n};\n//#endregion\n\n//#region Lifecycle Hooks\nonMounted(() => {\n  document.addEventListener('keydown', closeOnEscapePressed);\n});\nonBeforeUnmount(() => {\n  document.removeEventListener('keydown', closeOnEscapePressed);\n});\n//#endregion\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createBlock(_Transition, { name: \"fade\" }, {\n    default: _withCtx(() => [\n      (value.value)\n        ? (_openBlock(), _createBlock(BOverlay, { key: 0 }, {\n            default: _withCtx(() => [\n              _createVNode(BImagePickerCloseButton, {\n                class: \"ds-right-4 ds-top-4 ds-h-8 ds-w-8\",\n                onClick: closePreview\n              }),\n              _createElementVNode(\"div\", {\n                style: _normalizeStyle(\n          {\n            backgroundImage: `url('${props.url}')`,\n            height: 'calc(100vh - 16px)',\n            width: 'calc(100vw - 16px)',\n          } as StyleValue\n        ),\n                class: \"ds-bg-contain ds-bg-center ds-bg-no-repeat\"\n              }, null, 4)\n            ]),\n            _: 1\n          }))\n        : _createCommentVNode(\"\", true)\n    ]),\n    _: 1\n  }))\n}\n}\n\n})"],"names":["_sfc_main","_defineComponent","__props","emit","props","value","computed","val","watch","lockScrollBody","unlockScrollBody","closePreview","closeOnEscapePressed","event","onMounted","onBeforeUnmount","_ctx","_cache","_openBlock","_createBlock","_Transition","_withCtx","BOverlay","_createVNode","BImagePickerCloseButton","_createElementVNode","_normalizeStyle","_createCommentVNode"],"mappings":"yIAqB4BA,EAAiBC,kBAAA,CAC3C,OAAQ,gBACR,MAAO,CACL,WAAY,CAAE,KAAM,OAAQ,EAC5B,IAAK,CAAC,CACR,EACA,MAAO,CAAC,mBAAmB,EAC3B,MAAMC,EAAc,CAAE,KAAAC,GAAQ,CAEhC,MAAMC,EAAQF,EAURG,EAAQC,EAAAA,SAAS,CACrB,KAAM,CACJ,OAAOF,EAAM,UACf,EACA,IAAIG,EAAc,CAChBJ,EAAK,oBAAqBI,CAAG,CAC/B,CAAA,CACD,EAIKC,QAAAH,EAAQE,GAAiB,CACzBA,EACaE,EAAAA,iBAEEC,EAAAA,kBACnB,CACD,EAID,MAAMC,EAAe,IAAM,CACzBN,EAAM,MAAQ,EAAA,EAEVO,EAAwBC,GAAyB,CACjDA,EAAM,MAAQ,UACHF,GACf,EAKFG,OAAAA,EAAAA,UAAU,IAAM,CACL,SAAA,iBAAiB,UAAWF,CAAoB,CAAA,CAC1D,EACDG,EAAAA,gBAAgB,IAAM,CACX,SAAA,oBAAoB,UAAWH,CAAoB,CAAA,CAC7D,EAGM,CAACI,EAAUC,KACRC,EAAAA,UAAc,EAAAC,EAAA,YAAaC,aAAa,CAAE,KAAM,QAAU,CAChE,QAASC,UAAS,IAAM,CACrBhB,EAAM,OACFa,EAAAA,YAAcC,EAAAA,YAAaG,EAAU,CAAE,IAAK,GAAK,CAChD,QAASD,UAAS,IAAM,CACtBE,EAAAA,YAAaC,EAAyB,CACpC,MAAO,oCACP,QAASb,CAAA,CACV,EACDc,EAAAA,mBAAoB,MAAO,CACzB,MAAOC,EAAA,eACb,CACE,gBAAiB,QAAQtB,EAAM,GAAG,KAClC,OAAQ,qBACR,MAAO,oBACT,CACF,EACQ,MAAO,4CAAA,EACN,KAAM,CAAC,CAAA,CACX,EACD,EAAG,CAAA,CACJ,GACDuB,EAAAA,mBAAoB,GAAI,EAAI,CAAA,CACjC,EACD,EAAG,CAAA,CACJ,EAEH,CAEA,CAAC"}
+{"version":3,"file":"design-system45.js","sources":["../src/components/BImagePicker/BImagePreview.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createVNode as _createVNode, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, Transition as _Transition } from \"vue\"\n\nimport {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  type StyleValue,\n  watch,\n} from 'vue';\nimport BImagePickerCloseButton from './BImagePickerCloseButton.vue';\nimport { lockScrollBody, unlockScrollBody } from '@/helpers/ComponentHelper';\nimport BOverlay from '../BOverlay.vue';\n\n//#region Props\nexport interface Props {\n  modelValue: boolean;\n  url: string;\n}\n\n\nexport default /*#__PURE__*/_defineComponent({\n  __name: 'BImagePreview',\n  props: {\n    modelValue: { type: Boolean },\n    url: {}\n  },\n  emits: [\"update:modelValue\"],\n  setup(__props: any, { emit }) {\n\nconst props = __props;\n\n\n//#endregion\n\n//#region Events\n\n//#endregion\n\n//#region Data\nconst value = computed({\n  get() {\n    return props.modelValue;\n  },\n  set(val: boolean) {\n    emit('update:modelValue', val);\n  },\n});\n//#endregion\n\n//#region Watchers\nwatch(value, (val: boolean) => {\n  if (val) {\n    lockScrollBody();\n  } else {\n    unlockScrollBody();\n  }\n});\n//#endregion\n\n//#region Methods\nconst closePreview = () => {\n  value.value = false;\n};\nconst closeOnEscapePressed = (event: KeyboardEvent) => {\n  if (event.key === 'Escape') {\n    closePreview();\n  }\n};\n//#endregion\n\n//#region Lifecycle Hooks\nonMounted(() => {\n  document.addEventListener('keydown', closeOnEscapePressed);\n});\nonBeforeUnmount(() => {\n  document.removeEventListener('keydown', closeOnEscapePressed);\n});\n//#endregion\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createBlock(_Transition, { name: \"fade\" }, {\n    default: _withCtx(() => [\n      (value.value)\n        ? (_openBlock(), _createBlock(BOverlay, { key: 0 }, {\n            default: _withCtx(() => [\n              _createVNode(BImagePickerCloseButton, {\n                class: \"ds-right-4 ds-top-4 ds-h-8 ds-w-8\",\n                onClick: closePreview\n              }),\n              _createElementVNode(\"div\", {\n                style: _normalizeStyle(\n          {\n            backgroundImage: `url('${props.url}')`,\n            height: 'calc(100vh - 16px)',\n            width: 'calc(100vw - 16px)',\n          } as StyleValue\n        ),\n                class: \"ds-bg-contain ds-bg-center ds-bg-no-repeat\"\n              }, null, 4)\n            ]),\n            _: 1\n          }))\n        : _createCommentVNode(\"\", true)\n    ]),\n    _: 1\n  }))\n}\n}\n\n})"],"names":["_sfc_main","_defineComponent","__props","emit","props","value","computed","val","watch","lockScrollBody","unlockScrollBody","closePreview","closeOnEscapePressed","event","onMounted","onBeforeUnmount","_ctx","_cache","_openBlock","_createBlock","_Transition","_withCtx","BOverlay","_createVNode","BImagePickerCloseButton","_createElementVNode","_normalizeStyle","_createCommentVNode"],"mappings":"0IAqB4BA,EAAiBC,kBAAA,CAC3C,OAAQ,gBACR,MAAO,CACL,WAAY,CAAE,KAAM,OAAQ,EAC5B,IAAK,CAAC,CACR,EACA,MAAO,CAAC,mBAAmB,EAC3B,MAAMC,EAAc,CAAE,KAAAC,GAAQ,CAEhC,MAAMC,EAAQF,EAURG,EAAQC,EAAAA,SAAS,CACrB,KAAM,CACJ,OAAOF,EAAM,UACf,EACA,IAAIG,EAAc,CAChBJ,EAAK,oBAAqBI,CAAG,CAC/B,CAAA,CACD,EAIKC,QAAAH,EAAQE,GAAiB,CACzBA,EACaE,EAAAA,iBAEEC,EAAAA,kBACnB,CACD,EAID,MAAMC,EAAe,IAAM,CACzBN,EAAM,MAAQ,EAAA,EAEVO,EAAwBC,GAAyB,CACjDA,EAAM,MAAQ,UACHF,GACf,EAKFG,OAAAA,EAAAA,UAAU,IAAM,CACL,SAAA,iBAAiB,UAAWF,CAAoB,CAAA,CAC1D,EACDG,EAAAA,gBAAgB,IAAM,CACX,SAAA,oBAAoB,UAAWH,CAAoB,CAAA,CAC7D,EAGM,CAACI,EAAUC,KACRC,EAAAA,UAAc,EAAAC,EAAA,YAAaC,aAAa,CAAE,KAAM,QAAU,CAChE,QAASC,UAAS,IAAM,CACrBhB,EAAM,OACFa,EAAAA,YAAcC,EAAAA,YAAaG,EAAU,CAAE,IAAK,GAAK,CAChD,QAASD,UAAS,IAAM,CACtBE,EAAAA,YAAaC,EAAyB,CACpC,MAAO,oCACP,QAASb,CAAA,CACV,EACDc,EAAAA,mBAAoB,MAAO,CACzB,MAAOC,EAAA,eACb,CACE,gBAAiB,QAAQtB,EAAM,GAAG,KAClC,OAAQ,qBACR,MAAO,oBACT,CACF,EACQ,MAAO,4CAAA,EACN,KAAM,CAAC,CAAA,CACX,EACD,EAAG,CAAA,CACJ,GACDuB,EAAAA,mBAAoB,GAAI,EAAI,CAAA,CACjC,EACD,EAAG,CAAA,CACJ,EAEH,CAEA,CAAC"}