@7pmlabs/design-system 0.2.6 → 0.2.7

package/dist/design-system40.mjs

@@ -1,12 +1,12 @@
 import { openBlock as r, createElementBlock as o, renderSlot as t } from "vue";
 import s from "./design-system49.mjs";
-const c = {}, n = { class: "ds-relative ds-border-l-2 ds-border-primary-f/50" };
-function l(e, d) {
-  return r(), o("ol", n, [
+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, [
     t(e.$slots, "default")
   ]);
 }
-const i = /* @__PURE__ */ s(c, [["render", l]]);
+const i = /* @__PURE__ */ s(l, [["render", n]]);
 export {
   i as default
 };

package/dist/design-system41.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue"),t=require("./design-system49.js"),d={},l={class:"ds-ml-4 ds-flex 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",l,[n,e.createElementVNode("div",r,[e.renderSlot(s.$slots,"default")])])}const o=t(d,[["render",c]]);module.exports=o;
+"use strict";const e=require("vue"),t=require("./design-system49.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-system41.js.map

package/dist/design-system41.mjs

@@ -1,17 +1,17 @@
-import { openBlock as t, createElementBlock as d, createElementVNode as e, renderSlot as o } from "vue";
-import l from "./design-system49.mjs";
-const r = {}, c = { class: "ds-ml-4 ds-flex ds-items-center" }, n = /* @__PURE__ */ e("div", null, [
+import { openBlock as t, createElementBlock as d, createElementVNode as e, renderSlot as l } from "vue";
+import o from "./design-system49.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" };
-function m(s, _) {
+function f(s, m) {
   return t(), d("li", c, [
     n,
     e("div", i, [
-      o(s.$slots, "default")
+      l(s.$slots, "default")
     ])
   ]);
 }
-const u = /* @__PURE__ */ l(r, [["render", m]]);
+const u = /* @__PURE__ */ o(r, [["render", f]]);
 export {
   u as default
 };

package/dist/design-system90.js

@@ -1,2 +1,2 @@
-"use strict";const i=require("./design-system115.js"),s=require("./design-system116.js"),n=require("./design-system105.js"),o=require("./design-system108.js"),c=require("./design-system109.js"),f=require("./design-system112.js"),p=require("./design-system117.js"),y=require("./design-system118.js");var g="[object Map]",q="[object Set]",u=Object.prototype,a=u.hasOwnProperty;function b(r){if(r==null)return!0;if(c(r)&&(o(r)||typeof r=="string"||typeof r.splice=="function"||f(r)||y(r)||n(r)))return!r.length;var t=s(r);if(t==g||t==q)return!r.size;if(p(r))return!i(r).length;for(var e in r)if(a.call(r,e))return!1;return!0}module.exports=b;
+"use strict";const i=require("./design-system114.js"),s=require("./design-system115.js"),n=require("./design-system104.js"),o=require("./design-system107.js"),c=require("./design-system108.js"),f=require("./design-system111.js"),p=require("./design-system116.js"),y=require("./design-system117.js");var g="[object Map]",q="[object Set]",u=Object.prototype,a=u.hasOwnProperty;function b(r){if(r==null)return!0;if(c(r)&&(o(r)||typeof r=="string"||typeof r.splice=="function"||f(r)||y(r)||n(r)))return!r.length;var t=s(r);if(t==g||t==q)return!r.size;if(p(r))return!i(r).length;for(var e in r)if(a.call(r,e))return!1;return!0}module.exports=b;
 //# sourceMappingURL=design-system90.js.map

package/dist/design-system90.mjs

@@ -1,11 +1,11 @@
-import i from "./design-system115.mjs";
-import f from "./design-system116.mjs";
-import p from "./design-system105.mjs";
-import e from "./design-system108.mjs";
-import m from "./design-system109.mjs";
-import n from "./design-system112.mjs";
-import s from "./design-system117.mjs";
-import y from "./design-system118.mjs";
+import i from "./design-system114.mjs";
+import f from "./design-system115.mjs";
+import p from "./design-system104.mjs";
+import e from "./design-system107.mjs";
+import m from "./design-system108.mjs";
+import n from "./design-system111.mjs";
+import s from "./design-system116.mjs";
+import y from "./design-system117.mjs";
 var g = "[object Map]", c = "[object Set]", a = Object.prototype, b = a.hasOwnProperty;
 function k(r) {
   if (r == null)

package/dist/design-system91.js

@@ -1,2 +1,2 @@
-"use strict";const s=require("vue"),n=require("./design-system5.js"),v=require("./design-system34.js"),w=s.defineComponent({__name:"BModalContainer",props:{size:{default:n.BModalSize.Medium},fullscreen:{type:Boolean,default:!1},persistent:{type:Boolean,default:!1}},emits:["close"],setup(a,{emit:o}){const t=a,r=s.ref(null),c=s.computed(()=>{let e="ds-relative ds-w-full ds-h-auto ds-m-auto ds-flex ds-items-center ";if(t.fullscreen)e+="ds-w-screen ds-h-screen ";else switch(e+="ds-p-4 ",t.size){case n.BModalSize.Small:e+="ds-max-w-md ";break;case n.BModalSize.Large:e+="ds-max-w-4xl ";break;case n.BModalSize.Medium:default:e+="ds-max-w-2xl ";break}return e}),i=s.computed(()=>{let e="ds-relative ds-bg-white ds-rounded-lg ds-shadow ";return e+=t.fullscreen?"ds-w-screen ds-h-screen ds-rounded-none ":"",e}),u=()=>{document.addEventListener("keydown",l)},l=e=>{e.key==="Escape"&&o("close")},m=()=>{document.addEventListener("click",d)},d=e=>{[r.value].some(f=>e.composedPath().includes(f))||o("close")};return s.onMounted(()=>{t.persistent||setTimeout(()=>{u(),m()},200)}),s.onBeforeUnmount(()=>{t.persistent||(document.removeEventListener("keydown",l),document.removeEventListener("click",d))}),(e,p)=>(s.openBlock(),s.createBlock(v,null,{default:s.withCtx(()=>[s.createElementVNode("div",{class:s.normalizeClass(["modal-wrapper",c.value])},[s.createElementVNode("div",{ref_key:"modalWrapperContentRef",ref:r,class:s.normalizeClass(["modal-wrapper-content ds-w-full",i.value])},[s.renderSlot(e.$slots,"default")],2)],2)]),_:3}))}});module.exports=w;
+"use strict";const l=require("vue"),k=["disabled"],w=l.defineComponent({__name:"BOtpFieldBox",props:{value:{default:""},focus:{type:Boolean,default:!1},isDisabled:{type:Boolean,default:!1}},emits:["on-change","on-keydown","on-keyup","on-paste","on-focus","on-blur"],setup(c,{expose:d,emit:t}){const u=c,n=l.ref(u.value||""),o=l.ref(null),a=["0","1","2","3","4","5","6","7","8","9"],r=()=>{if(!a.includes(n.value)){n.value="";return}return n.value=n.value.toString(),n.value.length>1&&(n.value=n.value.slice(0,1)),t("on-change",n.value)},i=e=>{u.isDisabled&&e.preventDefault();const s=e;["Alt","Control","Meta","Backspace","ArrowLeft","ArrowRight","v",...a].includes(s.key)?t("on-keydown",e):s.preventDefault()},f=e=>{t("on-keyup",e)},p=e=>{t("on-paste",e)},v=()=>(o.value.select(),t("on-focus")),h=()=>t("on-blur"),y=()=>{o.value.focus(),o.value.select()};return l.watch(()=>u.value,(e,s)=>{e!==s&&(n.value=e)}),l.watch(()=>u.focus,(e,s)=>{s!==e&&o.value&&u.focus&&(o.value.focus(),o.value.select())}),l.onMounted(()=>{o.value&&u.focus&&(o.value.focus(),o.value.select())}),d({focus:y}),(e,s)=>l.withDirectives((l.openBlock(),l.createElementBlock("input",{ref_key:"inputRef",ref:o,"onUpdate:modelValue":s[0]||(s[0]=g=>n.value=g),inputmode:"numeric",disabled:e.isDisabled,maxlength:"1",class:"ds-h-11 ds-w-11 ds-rounded-lg ds-border ds-text-center ds-drop-shadow-light ds-transition-all ds-duration-200",onInput:r,onKeydown:i,onKeyup:f,onPaste:p,onFocus:v,onBlur:h},null,40,k)),[[l.vModelText,n.value]])}});module.exports=w;
 //# sourceMappingURL=design-system91.js.map

package/dist/design-system91.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system91.js","sources":["../src/components/BModal/BModalContainer.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from \"vue\"\n\nimport { BModalSize } from '@/constants/Enums';\nimport { computed, onBeforeUnmount, onMounted, ref } from 'vue';\nimport BOverlay from '../BOverlay.vue';\n\n/**\n * Props\n */\nexport interface Props {\n  size?: BModalSize;\n  fullscreen?: boolean;\n  persistent?: boolean;\n}\n\nexport default /*#__PURE__*/_defineComponent({\n  __name: 'BModalContainer',\n  props: {\n    size: { default: BModalSize.Medium },\n    fullscreen: { type: Boolean, default: false },\n    persistent: { type: Boolean, default: false }\n  },\n  emits: ['close'],\n  setup(__props: any, { emit }) {\n\nconst props = __props;\n\n\n\n/**\n * Events\n */\n\n\n/**\n * Data\n */\nconst modalWrapperContentRef = ref<HTMLDivElement | null>(null);\nconst modalWrapperCssClass = computed(() => {\n  let result = `ds-relative ds-w-full ds-h-auto ds-m-auto ds-flex ds-items-center `;\n\n  if (props.fullscreen) {\n    result += `ds-w-screen ds-h-screen `;\n  } else {\n    result += `ds-p-4 `;\n    switch (props.size) {\n      case BModalSize.Small:\n        result += `ds-max-w-md `;\n        break;\n      case BModalSize.Large:\n        result += `ds-max-w-4xl `;\n        break;\n      case BModalSize.Medium:\n      default:\n        result += `ds-max-w-2xl `;\n        break;\n    }\n  }\n\n  return result;\n});\nconst modalWrapperContentCssClass = computed(() => {\n  let result = `ds-relative ds-bg-white ds-rounded-lg ds-shadow `;\n  result += props.fullscreen ? `ds-w-screen ds-h-screen ds-rounded-none ` : ``;\n\n  return result;\n});\n\n/**\n * Methods\n */\nconst initPressEscapeEventListener = () => {\n  document.addEventListener('keydown', closeOnEscapePressed);\n};\nconst closeOnEscapePressed = (event: KeyboardEvent) => {\n  if (event.key === 'Escape') {\n    emit('close');\n  }\n};\nconst initClickOutsideEventListener = () => {\n  document.addEventListener('click', closeOnClickOutside);\n};\nconst closeOnClickOutside = (event: any) => {\n  const refs = [modalWrapperContentRef.value];\n  const withinBoundaries = refs.some((r) => event.composedPath().includes(r));\n  if (!withinBoundaries) {\n    emit('close');\n  }\n};\n\n/**\n * Lifecycle Hooks\n */\nonMounted(() => {\n  if (!props.persistent) {\n    setTimeout(() => {\n      initPressEscapeEventListener();\n      initClickOutsideEventListener();\n    }, 200);\n  }\n});\nonBeforeUnmount(() => {\n  if (!props.persistent) {\n    document.removeEventListener('keydown', closeOnEscapePressed);\n    document.removeEventListener('click', closeOnClickOutside);\n  }\n});\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createBlock(BOverlay, null, {\n    default: _withCtx(() => [\n      _createElementVNode(\"div\", {\n        class: _normalizeClass([\"modal-wrapper\", modalWrapperCssClass.value])\n      }, [\n        _createElementVNode(\"div\", {\n          ref_key: \"modalWrapperContentRef\",\n          ref: modalWrapperContentRef,\n          class: _normalizeClass([\"modal-wrapper-content ds-w-full\", modalWrapperContentCssClass.value])\n        }, [\n          _renderSlot(_ctx.$slots, \"default\")\n        ], 2)\n      ], 2)\n    ]),\n    _: 3\n  }))\n}\n}\n\n})"],"names":["_sfc_main","_defineComponent","BModalSize","__props","emit","props","modalWrapperContentRef","ref","modalWrapperCssClass","computed","result","modalWrapperContentCssClass","initPressEscapeEventListener","closeOnEscapePressed","event","initClickOutsideEventListener","closeOnClickOutside","r","onMounted","onBeforeUnmount","_ctx","_cache","_openBlock","_createBlock","BOverlay","_withCtx","_createElementVNode","_normalizeClass","_renderSlot"],"mappings":"uGAgB4BA,EAAiBC,kBAAA,CAC3C,OAAQ,kBACR,MAAO,CACL,KAAM,CAAE,QAASC,EAAA,WAAW,MAAO,EACnC,WAAY,CAAE,KAAM,QAAS,QAAS,EAAM,EAC5C,WAAY,CAAE,KAAM,QAAS,QAAS,EAAM,CAC9C,EACA,MAAO,CAAC,OAAO,EACf,MAAMC,EAAc,CAAE,KAAAC,GAAQ,CAEhC,MAAMC,EAAQF,EAYRG,EAAyBC,MAA2B,IAAI,EACxDC,EAAuBC,EAAAA,SAAS,IAAM,CAC1C,IAAIC,EAAS,qEAEb,GAAIL,EAAM,WACEK,GAAA,+BAGV,QADUA,GAAA,UACFL,EAAM,KAAM,CAClB,KAAKH,EAAW,WAAA,MACJQ,GAAA,eACV,MACF,KAAKR,EAAW,WAAA,MACJQ,GAAA,gBACV,MACF,KAAKR,EAAAA,WAAW,OAChB,QACYQ,GAAA,gBACV,KACJ,CAGK,OAAAA,CAAA,CACR,EACKC,EAA8BF,EAAAA,SAAS,IAAM,CACjD,IAAIC,EAAS,mDACH,OAAAA,GAAAL,EAAM,WAAa,2CAA6C,GAEnEK,CAAA,CACR,EAKKE,EAA+B,IAAM,CAChC,SAAA,iBAAiB,UAAWC,CAAoB,CAAA,EAErDA,EAAwBC,GAAyB,CACjDA,EAAM,MAAQ,UAChBV,EAAK,OAAO,CACd,EAEIW,EAAgC,IAAM,CACjC,SAAA,iBAAiB,QAASC,CAAmB,CAAA,EAElDA,EAAuBF,GAAe,CAC7B,CAACR,EAAuB,KAAK,EACZ,KAAMW,GAAMH,EAAM,eAAe,SAASG,CAAC,CAAC,GAExEb,EAAK,OAAO,CACd,EAMFc,OAAAA,EAAAA,UAAU,IAAM,CACTb,EAAM,YACT,WAAW,IAAM,CACcO,IACCG,KAC7B,GAAG,CACR,CACD,EACDI,EAAAA,gBAAgB,IAAM,CACfd,EAAM,aACA,SAAA,oBAAoB,UAAWQ,CAAoB,EACnD,SAAA,oBAAoB,QAASG,CAAmB,EAC3D,CACD,EAEM,CAACI,EAAUC,KACRC,YAAW,EAAGC,cAAaC,EAAU,KAAM,CACjD,QAASC,UAAS,IAAM,CACtBC,EAAAA,mBAAoB,MAAO,CACzB,MAAOC,EAAAA,eAAgB,CAAC,gBAAiBnB,EAAqB,KAAK,CAAC,CAAA,EACnE,CACDkB,EAAAA,mBAAoB,MAAO,CACzB,QAAS,yBACT,IAAKpB,EACL,MAAOqB,EAAAA,eAAgB,CAAC,kCAAmChB,EAA4B,KAAK,CAAC,CAAA,EAC5F,CACDiB,aAAYR,EAAK,OAAQ,SAAS,GACjC,CAAC,GACH,CAAC,CAAA,CACL,EACD,EAAG,CAAA,CACJ,EAEH,CAEA,CAAC"}
+{"version":3,"file":"design-system91.js","sources":["../src/components/BOtpField/BOtpFieldBox.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { vModelText as _vModelText, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = [\"disabled\"]\n\nimport { onMounted, ref, watch, type Ref } from 'vue';\n\n/**\n * Props\n */\nexport interface Props {\n  value?: string;\n  focus?: boolean;\n  isDisabled?: boolean;\n}\n\nexport default /*#__PURE__*/_defineComponent({\n  __name: 'BOtpFieldBox',\n  props: {\n    value: { default: '' },\n    focus: { type: Boolean, default: false },\n    isDisabled: { type: Boolean, default: false }\n  },\n  emits: [\n  'on-change',\n  'on-keydown',\n  'on-keyup',\n  'on-paste',\n  'on-focus',\n  'on-blur',\n],\n  setup(__props: any, { expose: __expose, emit }) {\n\nconst props = __props;\n\n\n\n/**\n * Events\n */\n\n\n/**\n * Data\n */\nconst model = ref(props.value || '');\nconst inputRef = ref<HTMLInputElement | null>(null) as Ref<HTMLInputElement>;\nconst digits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];\n\n/**\n * Methods\n */\nconst handleOnChange = () => {\n  if (!digits.includes(model.value)) {\n    model.value = '';\n    return;\n  }\n\n  model.value = model.value.toString();\n  if (model.value.length > 1) {\n    model.value = model.value.slice(0, 1);\n  }\n  return emit('on-change', model.value);\n};\n\nconst handleOnKeyDown = (event: KeyboardEvent) => {\n  if (props.isDisabled) {\n    event.preventDefault();\n  }\n  // Only allow characters 0-9, DEL, Backspace, Enter, Right and Left Arrows, and Pasting\n  const keyEvent = event;\n  if (\n    [\n      'Alt',\n      'Control',\n      'Meta',\n      'Backspace',\n      'ArrowLeft',\n      'ArrowRight',\n      'v',\n      ...digits,\n    ].includes(keyEvent.key)\n  ) {\n    emit('on-keydown', event);\n  } else {\n    keyEvent.preventDefault();\n  }\n};\nconst handleOnKeyUp = (event: KeyboardEvent) => {\n  emit('on-keyup', event);\n};\nconst handleOnPaste = (event: ClipboardEvent) => {\n  emit('on-paste', event);\n};\nconst handleOnFocus = () => {\n  inputRef.value.select();\n  return emit('on-focus');\n};\nconst handleOnBlur = () => emit('on-blur');\nconst focusFn = () => {\n  inputRef.value.focus();\n  inputRef.value.select();\n};\n\n/**\n * Watch\n */\nwatch(\n  () => props.value,\n  (newValue, oldValue) => {\n    if (newValue !== oldValue) {\n      model.value = newValue;\n    }\n  },\n);\nwatch(\n  () => props.focus,\n  (newFocusValue, oldFocusValue) => {\n    // Check if focusedInput changed\n    // Prevent calling function if input already in focus\n    if (oldFocusValue !== newFocusValue && inputRef.value && props.focus) {\n      inputRef.value.focus();\n      inputRef.value.select();\n    }\n  },\n);\n\n/**\n * Lifecycle Hooks\n */\nonMounted(() => {\n  if (inputRef.value && props.focus) {\n    inputRef.value.focus();\n    inputRef.value.select();\n  }\n});\n\n__expose({ focus: focusFn });\n\nreturn (_ctx: any,_cache: any) => {\n  return _withDirectives((_openBlock(), _createElementBlock(\"input\", {\n    ref_key: \"inputRef\",\n    ref: inputRef,\n    \"onUpdate:modelValue\": _cache[0] || (_cache[0] = ($event: any) => ((model).value = $event)),\n    inputmode: \"numeric\",\n    disabled: _ctx.isDisabled,\n    maxlength: \"1\",\n    class: \"ds-h-11 ds-w-11 ds-rounded-lg ds-border ds-text-center ds-drop-shadow-light ds-transition-all ds-duration-200\",\n    onInput: handleOnChange,\n    onKeydown: handleOnKeyDown,\n    onKeyup: handleOnKeyUp,\n    onPaste: handleOnPaste,\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur\n  }, null, 40, _hoisted_1)), [\n    [_vModelText, model.value]\n  ])\n}\n}\n\n})"],"names":["_hoisted_1","_sfc_main","_defineComponent","__props","__expose","emit","props","model","ref","inputRef","digits","handleOnChange","handleOnKeyDown","event","keyEvent","handleOnKeyUp","handleOnPaste","handleOnFocus","handleOnBlur","focusFn","watch","newValue","oldValue","newFocusValue","oldFocusValue","onMounted","_ctx","_cache","_withDirectives","_openBlock","_createElementBlock","$event","_vModelText"],"mappings":"oCAGMA,EAAa,CAAC,UAAU,EAaFC,EAAiBC,kBAAA,CAC3C,OAAQ,eACR,MAAO,CACL,MAAO,CAAE,QAAS,EAAG,EACrB,MAAO,CAAE,KAAM,QAAS,QAAS,EAAM,EACvC,WAAY,CAAE,KAAM,QAAS,QAAS,EAAM,CAC9C,EACA,MAAO,CACP,YACA,aACA,WACA,WACA,WACA,SACF,EACE,MAAMC,EAAc,CAAE,OAAQC,EAAU,KAAAC,GAAQ,CAElD,MAAMC,EAAQH,EAYRI,EAAQC,EAAA,IAAIF,EAAM,OAAS,EAAE,EAC7BG,EAAWD,MAA6B,IAAI,EAC5CE,EAAS,CAAC,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,GAAG,EAK1DC,EAAiB,IAAM,CAC3B,GAAI,CAACD,EAAO,SAASH,EAAM,KAAK,EAAG,CACjCA,EAAM,MAAQ,GACd,MACF,CAEM,OAAAA,EAAA,MAAQA,EAAM,MAAM,SAAS,EAC/BA,EAAM,MAAM,OAAS,IACvBA,EAAM,MAAQA,EAAM,MAAM,MAAM,EAAG,CAAC,GAE/BF,EAAK,YAAaE,EAAM,KAAK,CAAA,EAGhCK,EAAmBC,GAAyB,CAC5CP,EAAM,YACRO,EAAM,eAAe,EAGvB,MAAMC,EAAWD,EAEf,CACE,MACA,UACA,OACA,YACA,YACA,aACA,IACA,GAAGH,CAAA,EACH,SAASI,EAAS,GAAG,EAEvBT,EAAK,aAAcQ,CAAK,EAExBC,EAAS,eAAe,CAC1B,EAEIC,EAAiBF,GAAyB,CAC9CR,EAAK,WAAYQ,CAAK,CAAA,EAElBG,EAAiBH,GAA0B,CAC/CR,EAAK,WAAYQ,CAAK,CAAA,EAElBI,EAAgB,KACpBR,EAAS,MAAM,SACRJ,EAAK,UAAU,GAElBa,EAAe,IAAMb,EAAK,SAAS,EACnCc,EAAU,IAAM,CACpBV,EAAS,MAAM,QACfA,EAAS,MAAM,QAAO,EAMxBW,OAAAA,EAAA,MACE,IAAMd,EAAM,MACZ,CAACe,EAAUC,IAAa,CAClBD,IAAaC,IACff,EAAM,MAAQc,EAElB,CAAA,EAEFD,EAAA,MACE,IAAMd,EAAM,MACZ,CAACiB,EAAeC,IAAkB,CAG5BA,IAAkBD,GAAiBd,EAAS,OAASH,EAAM,QAC7DG,EAAS,MAAM,QACfA,EAAS,MAAM,SAEnB,CAAA,EAMFgB,EAAAA,UAAU,IAAM,CACVhB,EAAS,OAASH,EAAM,QAC1BG,EAAS,MAAM,QACfA,EAAS,MAAM,SACjB,CACD,EAEQL,EAAA,CAAE,MAAOe,CAAA,CAAS,EAEpB,CAACO,EAAUC,IACTC,kBAAiBC,EAAAA,YAAcC,EAAAA,mBAAoB,QAAS,CACjE,QAAS,WACT,IAAKrB,EACL,sBAAuBkB,EAAO,CAAC,IAAMA,EAAO,CAAC,EAAKI,GAAkBxB,EAAO,MAAQwB,GACnF,UAAW,UACX,SAAUL,EAAK,WACf,UAAW,IACX,MAAO,gHACP,QAASf,EACT,UAAWC,EACX,QAASG,EACT,QAASC,EACT,QAASC,EACT,OAAQC,CAAA,EACP,KAAM,GAAIlB,CAAU,GAAI,CACzB,CAACgC,EAAa,WAAAzB,EAAM,KAAK,CAAA,CAC1B,CAEH,CAEA,CAAC"}

package/dist/design-system91.mjs

@@ -1,70 +1,78 @@
-import { defineComponent as k, ref as C, computed as d, onMounted as h, onBeforeUnmount as B, openBlock as E, createBlock as x, withCtx as y, createElementVNode as a, normalizeClass as c, renderSlot as L } from "vue";
-import { BModalSize as t } from "./design-system5.mjs";
-import _ from "./design-system34.mjs";
-const W = /* @__PURE__ */ k({
-  __name: "BModalContainer",
+import { defineComponent as w, ref as a, watch as d, onMounted as B, withDirectives as b, openBlock as m, createElementBlock as D, vModelText as O } from "vue";
+const x = ["disabled"], F = /* @__PURE__ */ w({
+  __name: "BOtpFieldBox",
   props: {
-    size: { default: t.Medium },
-    fullscreen: { type: Boolean, default: !1 },
-    persistent: { type: Boolean, default: !1 }
+    value: { default: "" },
+    focus: { type: Boolean, default: !1 },
+    isDisabled: { type: Boolean, default: !1 }
   },
-  emits: ["close"],
-  setup(i, { emit: n }) {
-    const s = i, o = C(null), u = d(() => {
-      let e = "ds-relative ds-w-full ds-h-auto ds-m-auto ds-flex ds-items-center ";
-      if (s.fullscreen)
-        e += "ds-w-screen ds-h-screen ";
-      else
-        switch (e += "ds-p-4 ", s.size) {
-          case t.Small:
-            e += "ds-max-w-md ";
-            break;
-          case t.Large:
-            e += "ds-max-w-4xl ";
-            break;
-          case t.Medium:
-          default:
-            e += "ds-max-w-2xl ";
-            break;
-        }
-      return e;
-    }), m = d(() => {
-      let e = "ds-relative ds-bg-white ds-rounded-lg ds-shadow ";
-      return e += s.fullscreen ? "ds-w-screen ds-h-screen ds-rounded-none " : "", e;
-    }), p = () => {
-      document.addEventListener("keydown", r);
-    }, r = (e) => {
-      e.key === "Escape" && n("close");
-    }, f = () => {
-      document.addEventListener("click", l);
-    }, l = (e) => {
-      [o.value].some((v) => e.composedPath().includes(v)) || n("close");
+  emits: [
+    "on-change",
+    "on-keydown",
+    "on-keyup",
+    "on-paste",
+    "on-focus",
+    "on-blur"
+  ],
+  setup(c, { expose: r, emit: s }) {
+    const t = c, n = a(t.value || ""), o = a(null), u = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"], f = () => {
+      if (!u.includes(n.value)) {
+        n.value = "";
+        return;
+      }
+      return n.value = n.value.toString(), n.value.length > 1 && (n.value = n.value.slice(0, 1)), s("on-change", n.value);
+    }, i = (e) => {
+      t.isDisabled && e.preventDefault();
+      const l = e;
+      [
+        "Alt",
+        "Control",
+        "Meta",
+        "Backspace",
+        "ArrowLeft",
+        "ArrowRight",
+        "v",
+        ...u
+      ].includes(l.key) ? s("on-keydown", e) : l.preventDefault();
+    }, p = (e) => {
+      s("on-keyup", e);
+    }, v = (e) => {
+      s("on-paste", e);
+    }, h = () => (o.value.select(), s("on-focus")), y = () => s("on-blur"), g = () => {
+      o.value.focus(), o.value.select();
     };
-    return h(() => {
-      s.persistent || setTimeout(() => {
-        p(), f();
-      }, 200);
-    }), B(() => {
-      s.persistent || (document.removeEventListener("keydown", r), document.removeEventListener("click", l));
-    }), (e, w) => (E(), x(_, null, {
-      default: y(() => [
-        a("div", {
-          class: c(["modal-wrapper", u.value])
-        }, [
-          a("div", {
-            ref_key: "modalWrapperContentRef",
-            ref: o,
-            class: c(["modal-wrapper-content ds-w-full", m.value])
-          }, [
-            L(e.$slots, "default")
-          ], 2)
-        ], 2)
-      ]),
-      _: 3
-    }));
+    return d(
+      () => t.value,
+      (e, l) => {
+        e !== l && (n.value = e);
+      }
+    ), d(
+      () => t.focus,
+      (e, l) => {
+        l !== e && o.value && t.focus && (o.value.focus(), o.value.select());
+      }
+    ), B(() => {
+      o.value && t.focus && (o.value.focus(), o.value.select());
+    }), r({ focus: g }), (e, l) => b((m(), D("input", {
+      ref_key: "inputRef",
+      ref: o,
+      "onUpdate:modelValue": l[0] || (l[0] = (k) => n.value = k),
+      inputmode: "numeric",
+      disabled: e.isDisabled,
+      maxlength: "1",
+      class: "ds-h-11 ds-w-11 ds-rounded-lg ds-border ds-text-center ds-drop-shadow-light ds-transition-all ds-duration-200",
+      onInput: f,
+      onKeydown: i,
+      onKeyup: p,
+      onPaste: v,
+      onFocus: h,
+      onBlur: y
+    }, null, 40, x)), [
+      [O, n.value]
+    ]);
   }
 });
 export {
-  W as default
+  F as default
 };
 //# sourceMappingURL=design-system91.mjs.map

package/dist/design-system91.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"design-system91.mjs","sources":["../src/components/BModal/BModalContainer.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from \"vue\"\n\nimport { BModalSize } from '@/constants/Enums';\nimport { computed, onBeforeUnmount, onMounted, ref } from 'vue';\nimport BOverlay from '../BOverlay.vue';\n\n/**\n * Props\n */\nexport interface Props {\n  size?: BModalSize;\n  fullscreen?: boolean;\n  persistent?: boolean;\n}\n\nexport default /*#__PURE__*/_defineComponent({\n  __name: 'BModalContainer',\n  props: {\n    size: { default: BModalSize.Medium },\n    fullscreen: { type: Boolean, default: false },\n    persistent: { type: Boolean, default: false }\n  },\n  emits: ['close'],\n  setup(__props: any, { emit }) {\n\nconst props = __props;\n\n\n\n/**\n * Events\n */\n\n\n/**\n * Data\n */\nconst modalWrapperContentRef = ref<HTMLDivElement | null>(null);\nconst modalWrapperCssClass = computed(() => {\n  let result = `ds-relative ds-w-full ds-h-auto ds-m-auto ds-flex ds-items-center `;\n\n  if (props.fullscreen) {\n    result += `ds-w-screen ds-h-screen `;\n  } else {\n    result += `ds-p-4 `;\n    switch (props.size) {\n      case BModalSize.Small:\n        result += `ds-max-w-md `;\n        break;\n      case BModalSize.Large:\n        result += `ds-max-w-4xl `;\n        break;\n      case BModalSize.Medium:\n      default:\n        result += `ds-max-w-2xl `;\n        break;\n    }\n  }\n\n  return result;\n});\nconst modalWrapperContentCssClass = computed(() => {\n  let result = `ds-relative ds-bg-white ds-rounded-lg ds-shadow `;\n  result += props.fullscreen ? `ds-w-screen ds-h-screen ds-rounded-none ` : ``;\n\n  return result;\n});\n\n/**\n * Methods\n */\nconst initPressEscapeEventListener = () => {\n  document.addEventListener('keydown', closeOnEscapePressed);\n};\nconst closeOnEscapePressed = (event: KeyboardEvent) => {\n  if (event.key === 'Escape') {\n    emit('close');\n  }\n};\nconst initClickOutsideEventListener = () => {\n  document.addEventListener('click', closeOnClickOutside);\n};\nconst closeOnClickOutside = (event: any) => {\n  const refs = [modalWrapperContentRef.value];\n  const withinBoundaries = refs.some((r) => event.composedPath().includes(r));\n  if (!withinBoundaries) {\n    emit('close');\n  }\n};\n\n/**\n * Lifecycle Hooks\n */\nonMounted(() => {\n  if (!props.persistent) {\n    setTimeout(() => {\n      initPressEscapeEventListener();\n      initClickOutsideEventListener();\n    }, 200);\n  }\n});\nonBeforeUnmount(() => {\n  if (!props.persistent) {\n    document.removeEventListener('keydown', closeOnEscapePressed);\n    document.removeEventListener('click', closeOnClickOutside);\n  }\n});\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createBlock(BOverlay, null, {\n    default: _withCtx(() => [\n      _createElementVNode(\"div\", {\n        class: _normalizeClass([\"modal-wrapper\", modalWrapperCssClass.value])\n      }, [\n        _createElementVNode(\"div\", {\n          ref_key: \"modalWrapperContentRef\",\n          ref: modalWrapperContentRef,\n          class: _normalizeClass([\"modal-wrapper-content ds-w-full\", modalWrapperContentCssClass.value])\n        }, [\n          _renderSlot(_ctx.$slots, \"default\")\n        ], 2)\n      ], 2)\n    ]),\n    _: 3\n  }))\n}\n}\n\n})"],"names":["_sfc_main","_defineComponent","BModalSize","__props","emit","props","modalWrapperContentRef","ref","modalWrapperCssClass","computed","result","modalWrapperContentCssClass","initPressEscapeEventListener","closeOnEscapePressed","event","initClickOutsideEventListener","closeOnClickOutside","r","onMounted","onBeforeUnmount","_ctx","_cache","_openBlock","_createBlock","BOverlay","_withCtx","_createElementVNode","_normalizeClass","_renderSlot"],"mappings":";;;AAgBA,MAA4BA,IAAiBC,gBAAAA,EAAA;AAAA,EAC3C,QAAQ;AAAA,EACR,OAAO;AAAA,IACL,MAAM,EAAE,SAASC,EAAW,OAAO;AAAA,IACnC,YAAY,EAAE,MAAM,SAAS,SAAS,GAAM;AAAA,IAC5C,YAAY,EAAE,MAAM,SAAS,SAAS,GAAM;AAAA,EAC9C;AAAA,EACA,OAAO,CAAC,OAAO;AAAA,EACf,MAAMC,GAAc,EAAE,MAAAC,KAAQ;AAEhC,UAAMC,IAAQF,GAYRG,IAAyBC,EAA2B,IAAI,GACxDC,IAAuBC,EAAS,MAAM;AAC1C,UAAIC,IAAS;AAEb,UAAIL,EAAM;AACE,QAAAK,KAAA;AAAA;AAGV,gBADUA,KAAA,WACFL,EAAM,MAAM;AAAA,UAClB,KAAKH,EAAW;AACJ,YAAAQ,KAAA;AACV;AAAA,UACF,KAAKR,EAAW;AACJ,YAAAQ,KAAA;AACV;AAAA,UACF,KAAKR,EAAW;AAAA,UAChB;AACY,YAAAQ,KAAA;AACV;AAAA,QACJ;AAGK,aAAAA;AAAA,IAAA,CACR,GACKC,IAA8BF,EAAS,MAAM;AACjD,UAAIC,IAAS;AACH,aAAAA,KAAAL,EAAM,aAAa,6CAA6C,IAEnEK;AAAA,IAAA,CACR,GAKKE,IAA+B,MAAM;AAChC,eAAA,iBAAiB,WAAWC,CAAoB;AAAA,IAAA,GAErDA,IAAuB,CAACC,MAAyB;AACjD,MAAAA,EAAM,QAAQ,YAChBV,EAAK,OAAO;AAAA,IACd,GAEIW,IAAgC,MAAM;AACjC,eAAA,iBAAiB,SAASC,CAAmB;AAAA,IAAA,GAElDA,IAAsB,CAACF,MAAe;AAG1C,MAFa,CAACR,EAAuB,KAAK,EACZ,KAAK,CAACW,MAAMH,EAAM,eAAe,SAASG,CAAC,CAAC,KAExEb,EAAK,OAAO;AAAA,IACd;AAMF,WAAAc,EAAU,MAAM;AACV,MAACb,EAAM,cACT,WAAW,MAAM;AACc,QAAAO,KACCG;SAC7B,GAAG;AAAA,IACR,CACD,GACDI,EAAgB,MAAM;AAChB,MAACd,EAAM,eACA,SAAA,oBAAoB,WAAWQ,CAAoB,GACnD,SAAA,oBAAoB,SAASG,CAAmB;AAAA,IAC3D,CACD,GAEM,CAACI,GAAUC,OACRC,EAAW,GAAGC,EAAaC,GAAU,MAAM;AAAA,MACjD,SAASC,EAAS,MAAM;AAAA,QACtBC,EAAoB,OAAO;AAAA,UACzB,OAAOC,EAAgB,CAAC,iBAAiBnB,EAAqB,KAAK,CAAC;AAAA,QAAA,GACnE;AAAA,UACDkB,EAAoB,OAAO;AAAA,YACzB,SAAS;AAAA,YACT,KAAKpB;AAAA,YACL,OAAOqB,EAAgB,CAAC,mCAAmChB,EAA4B,KAAK,CAAC;AAAA,UAAA,GAC5F;AAAA,YACDiB,EAAYR,EAAK,QAAQ,SAAS;AAAA,aACjC,CAAC;AAAA,WACH,CAAC;AAAA,MAAA,CACL;AAAA,MACD,GAAG;AAAA,IAAA,CACJ;AAAA,EAEH;AAEA,CAAC;"}
+{"version":3,"file":"design-system91.mjs","sources":["../src/components/BOtpField/BOtpFieldBox.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { vModelText as _vModelText, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = [\"disabled\"]\n\nimport { onMounted, ref, watch, type Ref } from 'vue';\n\n/**\n * Props\n */\nexport interface Props {\n  value?: string;\n  focus?: boolean;\n  isDisabled?: boolean;\n}\n\nexport default /*#__PURE__*/_defineComponent({\n  __name: 'BOtpFieldBox',\n  props: {\n    value: { default: '' },\n    focus: { type: Boolean, default: false },\n    isDisabled: { type: Boolean, default: false }\n  },\n  emits: [\n  'on-change',\n  'on-keydown',\n  'on-keyup',\n  'on-paste',\n  'on-focus',\n  'on-blur',\n],\n  setup(__props: any, { expose: __expose, emit }) {\n\nconst props = __props;\n\n\n\n/**\n * Events\n */\n\n\n/**\n * Data\n */\nconst model = ref(props.value || '');\nconst inputRef = ref<HTMLInputElement | null>(null) as Ref<HTMLInputElement>;\nconst digits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];\n\n/**\n * Methods\n */\nconst handleOnChange = () => {\n  if (!digits.includes(model.value)) {\n    model.value = '';\n    return;\n  }\n\n  model.value = model.value.toString();\n  if (model.value.length > 1) {\n    model.value = model.value.slice(0, 1);\n  }\n  return emit('on-change', model.value);\n};\n\nconst handleOnKeyDown = (event: KeyboardEvent) => {\n  if (props.isDisabled) {\n    event.preventDefault();\n  }\n  // Only allow characters 0-9, DEL, Backspace, Enter, Right and Left Arrows, and Pasting\n  const keyEvent = event;\n  if (\n    [\n      'Alt',\n      'Control',\n      'Meta',\n      'Backspace',\n      'ArrowLeft',\n      'ArrowRight',\n      'v',\n      ...digits,\n    ].includes(keyEvent.key)\n  ) {\n    emit('on-keydown', event);\n  } else {\n    keyEvent.preventDefault();\n  }\n};\nconst handleOnKeyUp = (event: KeyboardEvent) => {\n  emit('on-keyup', event);\n};\nconst handleOnPaste = (event: ClipboardEvent) => {\n  emit('on-paste', event);\n};\nconst handleOnFocus = () => {\n  inputRef.value.select();\n  return emit('on-focus');\n};\nconst handleOnBlur = () => emit('on-blur');\nconst focusFn = () => {\n  inputRef.value.focus();\n  inputRef.value.select();\n};\n\n/**\n * Watch\n */\nwatch(\n  () => props.value,\n  (newValue, oldValue) => {\n    if (newValue !== oldValue) {\n      model.value = newValue;\n    }\n  },\n);\nwatch(\n  () => props.focus,\n  (newFocusValue, oldFocusValue) => {\n    // Check if focusedInput changed\n    // Prevent calling function if input already in focus\n    if (oldFocusValue !== newFocusValue && inputRef.value && props.focus) {\n      inputRef.value.focus();\n      inputRef.value.select();\n    }\n  },\n);\n\n/**\n * Lifecycle Hooks\n */\nonMounted(() => {\n  if (inputRef.value && props.focus) {\n    inputRef.value.focus();\n    inputRef.value.select();\n  }\n});\n\n__expose({ focus: focusFn });\n\nreturn (_ctx: any,_cache: any) => {\n  return _withDirectives((_openBlock(), _createElementBlock(\"input\", {\n    ref_key: \"inputRef\",\n    ref: inputRef,\n    \"onUpdate:modelValue\": _cache[0] || (_cache[0] = ($event: any) => ((model).value = $event)),\n    inputmode: \"numeric\",\n    disabled: _ctx.isDisabled,\n    maxlength: \"1\",\n    class: \"ds-h-11 ds-w-11 ds-rounded-lg ds-border ds-text-center ds-drop-shadow-light ds-transition-all ds-duration-200\",\n    onInput: handleOnChange,\n    onKeydown: handleOnKeyDown,\n    onKeyup: handleOnKeyUp,\n    onPaste: handleOnPaste,\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur\n  }, null, 40, _hoisted_1)), [\n    [_vModelText, model.value]\n  ])\n}\n}\n\n})"],"names":["_hoisted_1","_sfc_main","_defineComponent","__props","__expose","emit","props","model","ref","inputRef","digits","handleOnChange","handleOnKeyDown","event","keyEvent","handleOnKeyUp","handleOnPaste","handleOnFocus","handleOnBlur","focusFn","watch","newValue","oldValue","newFocusValue","oldFocusValue","onMounted","_ctx","_cache","_withDirectives","_openBlock","_createElementBlock","$event","_vModelText"],"mappings":";AAGA,MAAMA,IAAa,CAAC,UAAU,GAaFC,IAAiBC,gBAAAA,EAAA;AAAA,EAC3C,QAAQ;AAAA,EACR,OAAO;AAAA,IACL,OAAO,EAAE,SAAS,GAAG;AAAA,IACrB,OAAO,EAAE,MAAM,SAAS,SAAS,GAAM;AAAA,IACvC,YAAY,EAAE,MAAM,SAAS,SAAS,GAAM;AAAA,EAC9C;AAAA,EACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACE,MAAMC,GAAc,EAAE,QAAQC,GAAU,MAAAC,KAAQ;AAElD,UAAMC,IAAQH,GAYRI,IAAQC,EAAIF,EAAM,SAAS,EAAE,GAC7BG,IAAWD,EAA6B,IAAI,GAC5CE,IAAS,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,GAAG,GAK1DC,IAAiB,MAAM;AAC3B,UAAI,CAACD,EAAO,SAASH,EAAM,KAAK,GAAG;AACjC,QAAAA,EAAM,QAAQ;AACd;AAAA,MACF;AAEM,aAAAA,EAAA,QAAQA,EAAM,MAAM,SAAS,GAC/BA,EAAM,MAAM,SAAS,MACvBA,EAAM,QAAQA,EAAM,MAAM,MAAM,GAAG,CAAC,IAE/BF,EAAK,aAAaE,EAAM,KAAK;AAAA,IAAA,GAGhCK,IAAkB,CAACC,MAAyB;AAChD,MAAIP,EAAM,cACRO,EAAM,eAAe;AAGvB,YAAMC,IAAWD;AAEf,MAAA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAGH;AAAA,MAAA,EACH,SAASI,EAAS,GAAG,IAEvBT,EAAK,cAAcQ,CAAK,IAExBC,EAAS,eAAe;AAAA,IAC1B,GAEIC,IAAgB,CAACF,MAAyB;AAC9C,MAAAR,EAAK,YAAYQ,CAAK;AAAA,IAAA,GAElBG,IAAgB,CAACH,MAA0B;AAC/C,MAAAR,EAAK,YAAYQ,CAAK;AAAA,IAAA,GAElBI,IAAgB,OACpBR,EAAS,MAAM,UACRJ,EAAK,UAAU,IAElBa,IAAe,MAAMb,EAAK,SAAS,GACnCc,IAAU,MAAM;AACpB,MAAAV,EAAS,MAAM,SACfA,EAAS,MAAM;IAAO;AAMxB,WAAAW;AAAA,MACE,MAAMd,EAAM;AAAA,MACZ,CAACe,GAAUC,MAAa;AACtB,QAAID,MAAaC,MACff,EAAM,QAAQc;AAAA,MAElB;AAAA,IAAA,GAEFD;AAAA,MACE,MAAMd,EAAM;AAAA,MACZ,CAACiB,GAAeC,MAAkB;AAGhC,QAAIA,MAAkBD,KAAiBd,EAAS,SAASH,EAAM,UAC7DG,EAAS,MAAM,SACfA,EAAS,MAAM;MAEnB;AAAA,IAAA,GAMFgB,EAAU,MAAM;AACV,MAAAhB,EAAS,SAASH,EAAM,UAC1BG,EAAS,MAAM,SACfA,EAAS,MAAM;IACjB,CACD,GAEQL,EAAA,EAAE,OAAOe,EAAA,CAAS,GAEpB,CAACO,GAAUC,MACTC,GAAiBC,KAAcC,EAAoB,SAAS;AAAA,MACjE,SAAS;AAAA,MACT,KAAKrB;AAAA,MACL,uBAAuBkB,EAAO,CAAC,MAAMA,EAAO,CAAC,IAAI,CAACI,MAAkBxB,EAAO,QAAQwB;AAAA,MACnF,WAAW;AAAA,MACX,UAAUL,EAAK;AAAA,MACf,WAAW;AAAA,MACX,OAAO;AAAA,MACP,SAASf;AAAA,MACT,WAAWC;AAAA,MACX,SAASG;AAAA,MACT,SAASC;AAAA,MACT,SAASC;AAAA,MACT,QAAQC;AAAA,IAAA,GACP,MAAM,IAAIlB,CAAU,IAAI;AAAA,MACzB,CAACgC,GAAazB,EAAM,KAAK;AAAA,IAAA,CAC1B;AAAA,EAEH;AAEA,CAAC;"}

package/dist/design-system92.js

@@ -1,2 +1,2 @@
-"use strict";const l=require("vue"),k=["disabled"],w=l.defineComponent({__name:"BOtpFieldBox",props:{value:{default:""},focus:{type:Boolean,default:!1},isDisabled:{type:Boolean,default:!1}},emits:["on-change","on-keydown","on-keyup","on-paste","on-focus","on-blur"],setup(c,{expose:d,emit:t}){const u=c,n=l.ref(u.value||""),o=l.ref(null),a=["0","1","2","3","4","5","6","7","8","9"],r=()=>{if(!a.includes(n.value)){n.value="";return}return n.value=n.value.toString(),n.value.length>1&&(n.value=n.value.slice(0,1)),t("on-change",n.value)},i=e=>{u.isDisabled&&e.preventDefault();const s=e;["Alt","Control","Meta","Backspace","ArrowLeft","ArrowRight","v",...a].includes(s.key)?t("on-keydown",e):s.preventDefault()},f=e=>{t("on-keyup",e)},p=e=>{t("on-paste",e)},v=()=>(o.value.select(),t("on-focus")),h=()=>t("on-blur"),y=()=>{o.value.focus(),o.value.select()};return l.watch(()=>u.value,(e,s)=>{e!==s&&(n.value=e)}),l.watch(()=>u.focus,(e,s)=>{s!==e&&o.value&&u.focus&&(o.value.focus(),o.value.select())}),l.onMounted(()=>{o.value&&u.focus&&(o.value.focus(),o.value.select())}),d({focus:y}),(e,s)=>l.withDirectives((l.openBlock(),l.createElementBlock("input",{ref_key:"inputRef",ref:o,"onUpdate:modelValue":s[0]||(s[0]=g=>n.value=g),inputmode:"numeric",disabled:e.isDisabled,maxlength:"1",class:"ds-h-11 ds-w-11 ds-rounded-lg ds-border ds-text-center ds-drop-shadow-light ds-transition-all ds-duration-200",onInput:r,onKeydown:i,onKeyup:f,onPaste:p,onFocus:v,onBlur:h},null,40,k)),[[l.vModelText,n.value]])}});module.exports=w;
+"use strict";const r=require("./design-system102.js");var n=1,t=4;function o(e){return r(e,n|t)}module.exports=o;
 //# sourceMappingURL=design-system92.js.map

package/dist/design-system92.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system92.js","sources":["../src/components/BOtpField/BOtpFieldBox.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { vModelText as _vModelText, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = [\"disabled\"]\n\nimport { onMounted, ref, watch, type Ref } from 'vue';\n\n/**\n * Props\n */\nexport interface Props {\n  value?: string;\n  focus?: boolean;\n  isDisabled?: boolean;\n}\n\nexport default /*#__PURE__*/_defineComponent({\n  __name: 'BOtpFieldBox',\n  props: {\n    value: { default: '' },\n    focus: { type: Boolean, default: false },\n    isDisabled: { type: Boolean, default: false }\n  },\n  emits: [\n  'on-change',\n  'on-keydown',\n  'on-keyup',\n  'on-paste',\n  'on-focus',\n  'on-blur',\n],\n  setup(__props: any, { expose: __expose, emit }) {\n\nconst props = __props;\n\n\n\n/**\n * Events\n */\n\n\n/**\n * Data\n */\nconst model = ref(props.value || '');\nconst inputRef = ref<HTMLInputElement | null>(null) as Ref<HTMLInputElement>;\nconst digits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];\n\n/**\n * Methods\n */\nconst handleOnChange = () => {\n  if (!digits.includes(model.value)) {\n    model.value = '';\n    return;\n  }\n\n  model.value = model.value.toString();\n  if (model.value.length > 1) {\n    model.value = model.value.slice(0, 1);\n  }\n  return emit('on-change', model.value);\n};\n\nconst handleOnKeyDown = (event: KeyboardEvent) => {\n  if (props.isDisabled) {\n    event.preventDefault();\n  }\n  // Only allow characters 0-9, DEL, Backspace, Enter, Right and Left Arrows, and Pasting\n  const keyEvent = event;\n  if (\n    [\n      'Alt',\n      'Control',\n      'Meta',\n      'Backspace',\n      'ArrowLeft',\n      'ArrowRight',\n      'v',\n      ...digits,\n    ].includes(keyEvent.key)\n  ) {\n    emit('on-keydown', event);\n  } else {\n    keyEvent.preventDefault();\n  }\n};\nconst handleOnKeyUp = (event: KeyboardEvent) => {\n  emit('on-keyup', event);\n};\nconst handleOnPaste = (event: ClipboardEvent) => {\n  emit('on-paste', event);\n};\nconst handleOnFocus = () => {\n  inputRef.value.select();\n  return emit('on-focus');\n};\nconst handleOnBlur = () => emit('on-blur');\nconst focusFn = () => {\n  inputRef.value.focus();\n  inputRef.value.select();\n};\n\n/**\n * Watch\n */\nwatch(\n  () => props.value,\n  (newValue, oldValue) => {\n    if (newValue !== oldValue) {\n      model.value = newValue;\n    }\n  },\n);\nwatch(\n  () => props.focus,\n  (newFocusValue, oldFocusValue) => {\n    // Check if focusedInput changed\n    // Prevent calling function if input already in focus\n    if (oldFocusValue !== newFocusValue && inputRef.value && props.focus) {\n      inputRef.value.focus();\n      inputRef.value.select();\n    }\n  },\n);\n\n/**\n * Lifecycle Hooks\n */\nonMounted(() => {\n  if (inputRef.value && props.focus) {\n    inputRef.value.focus();\n    inputRef.value.select();\n  }\n});\n\n__expose({ focus: focusFn });\n\nreturn (_ctx: any,_cache: any) => {\n  return _withDirectives((_openBlock(), _createElementBlock(\"input\", {\n    ref_key: \"inputRef\",\n    ref: inputRef,\n    \"onUpdate:modelValue\": _cache[0] || (_cache[0] = ($event: any) => ((model).value = $event)),\n    inputmode: \"numeric\",\n    disabled: _ctx.isDisabled,\n    maxlength: \"1\",\n    class: \"ds-h-11 ds-w-11 ds-rounded-lg ds-border ds-text-center ds-drop-shadow-light ds-transition-all ds-duration-200\",\n    onInput: handleOnChange,\n    onKeydown: handleOnKeyDown,\n    onKeyup: handleOnKeyUp,\n    onPaste: handleOnPaste,\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur\n  }, null, 40, _hoisted_1)), [\n    [_vModelText, model.value]\n  ])\n}\n}\n\n})"],"names":["_hoisted_1","_sfc_main","_defineComponent","__props","__expose","emit","props","model","ref","inputRef","digits","handleOnChange","handleOnKeyDown","event","keyEvent","handleOnKeyUp","handleOnPaste","handleOnFocus","handleOnBlur","focusFn","watch","newValue","oldValue","newFocusValue","oldFocusValue","onMounted","_ctx","_cache","_withDirectives","_openBlock","_createElementBlock","$event","_vModelText"],"mappings":"oCAGMA,EAAa,CAAC,UAAU,EAaFC,EAAiBC,kBAAA,CAC3C,OAAQ,eACR,MAAO,CACL,MAAO,CAAE,QAAS,EAAG,EACrB,MAAO,CAAE,KAAM,QAAS,QAAS,EAAM,EACvC,WAAY,CAAE,KAAM,QAAS,QAAS,EAAM,CAC9C,EACA,MAAO,CACP,YACA,aACA,WACA,WACA,WACA,SACF,EACE,MAAMC,EAAc,CAAE,OAAQC,EAAU,KAAAC,GAAQ,CAElD,MAAMC,EAAQH,EAYRI,EAAQC,EAAA,IAAIF,EAAM,OAAS,EAAE,EAC7BG,EAAWD,MAA6B,IAAI,EAC5CE,EAAS,CAAC,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,GAAG,EAK1DC,EAAiB,IAAM,CAC3B,GAAI,CAACD,EAAO,SAASH,EAAM,KAAK,EAAG,CACjCA,EAAM,MAAQ,GACd,MACF,CAEM,OAAAA,EAAA,MAAQA,EAAM,MAAM,SAAS,EAC/BA,EAAM,MAAM,OAAS,IACvBA,EAAM,MAAQA,EAAM,MAAM,MAAM,EAAG,CAAC,GAE/BF,EAAK,YAAaE,EAAM,KAAK,CAAA,EAGhCK,EAAmBC,GAAyB,CAC5CP,EAAM,YACRO,EAAM,eAAe,EAGvB,MAAMC,EAAWD,EAEf,CACE,MACA,UACA,OACA,YACA,YACA,aACA,IACA,GAAGH,CAAA,EACH,SAASI,EAAS,GAAG,EAEvBT,EAAK,aAAcQ,CAAK,EAExBC,EAAS,eAAe,CAC1B,EAEIC,EAAiBF,GAAyB,CAC9CR,EAAK,WAAYQ,CAAK,CAAA,EAElBG,EAAiBH,GAA0B,CAC/CR,EAAK,WAAYQ,CAAK,CAAA,EAElBI,EAAgB,KACpBR,EAAS,MAAM,SACRJ,EAAK,UAAU,GAElBa,EAAe,IAAMb,EAAK,SAAS,EACnCc,EAAU,IAAM,CACpBV,EAAS,MAAM,QACfA,EAAS,MAAM,QAAO,EAMxBW,OAAAA,EAAA,MACE,IAAMd,EAAM,MACZ,CAACe,EAAUC,IAAa,CAClBD,IAAaC,IACff,EAAM,MAAQc,EAElB,CAAA,EAEFD,EAAA,MACE,IAAMd,EAAM,MACZ,CAACiB,EAAeC,IAAkB,CAG5BA,IAAkBD,GAAiBd,EAAS,OAASH,EAAM,QAC7DG,EAAS,MAAM,QACfA,EAAS,MAAM,SAEnB,CAAA,EAMFgB,EAAAA,UAAU,IAAM,CACVhB,EAAS,OAASH,EAAM,QAC1BG,EAAS,MAAM,QACfA,EAAS,MAAM,SACjB,CACD,EAEQL,EAAA,CAAE,MAAOe,CAAA,CAAS,EAEpB,CAACO,EAAUC,IACTC,kBAAiBC,EAAAA,YAAcC,EAAAA,mBAAoB,QAAS,CACjE,QAAS,WACT,IAAKrB,EACL,sBAAuBkB,EAAO,CAAC,IAAMA,EAAO,CAAC,EAAKI,GAAkBxB,EAAO,MAAQwB,GACnF,UAAW,UACX,SAAUL,EAAK,WACf,UAAW,IACX,MAAO,gHACP,QAASf,EACT,UAAWC,EACX,QAASG,EACT,QAASC,EACT,QAASC,EACT,OAAQC,CAAA,EACP,KAAM,GAAIlB,CAAU,GAAI,CACzB,CAACgC,EAAa,WAAAzB,EAAM,KAAK,CAAA,CAC1B,CAEH,CAEA,CAAC"}
+{"version":3,"file":"design-system92.js","sources":["../node_modules/lodash-es/cloneDeep.js"],"sourcesContent":["import baseClone from './_baseClone.js';\n\n/** Used to compose bitmasks for cloning. */\nvar CLONE_DEEP_FLAG = 1,\n    CLONE_SYMBOLS_FLAG = 4;\n\n/**\n * This method is like `_.clone` except that it recursively clones `value`.\n *\n * @static\n * @memberOf _\n * @since 1.0.0\n * @category Lang\n * @param {*} value The value to recursively clone.\n * @returns {*} Returns the deep cloned value.\n * @see _.clone\n * @example\n *\n * var objects = [{ 'a': 1 }, { 'b': 2 }];\n *\n * var deep = _.cloneDeep(objects);\n * console.log(deep[0] === objects[0]);\n * // => false\n */\nfunction cloneDeep(value) {\n  return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG);\n}\n\nexport default cloneDeep;\n"],"names":["CLONE_DEEP_FLAG","CLONE_SYMBOLS_FLAG","cloneDeep","value","baseClone"],"mappings":"sDAGA,IAAIA,EAAkB,EAClBC,EAAqB,EAoBzB,SAASC,EAAUC,EAAO,CACxB,OAAOC,EAAUD,EAAOH,EAAkBC,CAAkB,CAC9D","x_google_ignoreList":[0]}

package/dist/design-system92.mjs

@@ -1,78 +1,9 @@
-import { defineComponent as w, ref as a, watch as d, onMounted as B, withDirectives as b, openBlock as m, createElementBlock as D, vModelText as O } from "vue";
-const x = ["disabled"], F = /* @__PURE__ */ w({
-  __name: "BOtpFieldBox",
-  props: {
-    value: { default: "" },
-    focus: { type: Boolean, default: !1 },
-    isDisabled: { type: Boolean, default: !1 }
-  },
-  emits: [
-    "on-change",
-    "on-keydown",
-    "on-keyup",
-    "on-paste",
-    "on-focus",
-    "on-blur"
-  ],
-  setup(c, { expose: r, emit: s }) {
-    const t = c, n = a(t.value || ""), o = a(null), u = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"], f = () => {
-      if (!u.includes(n.value)) {
-        n.value = "";
-        return;
-      }
-      return n.value = n.value.toString(), n.value.length > 1 && (n.value = n.value.slice(0, 1)), s("on-change", n.value);
-    }, i = (e) => {
-      t.isDisabled && e.preventDefault();
-      const l = e;
-      [
-        "Alt",
-        "Control",
-        "Meta",
-        "Backspace",
-        "ArrowLeft",
-        "ArrowRight",
-        "v",
-        ...u
-      ].includes(l.key) ? s("on-keydown", e) : l.preventDefault();
-    }, p = (e) => {
-      s("on-keyup", e);
-    }, v = (e) => {
-      s("on-paste", e);
-    }, h = () => (o.value.select(), s("on-focus")), y = () => s("on-blur"), g = () => {
-      o.value.focus(), o.value.select();
-    };
-    return d(
-      () => t.value,
-      (e, l) => {
-        e !== l && (n.value = e);
-      }
-    ), d(
-      () => t.focus,
-      (e, l) => {
-        l !== e && o.value && t.focus && (o.value.focus(), o.value.select());
-      }
-    ), B(() => {
-      o.value && t.focus && (o.value.focus(), o.value.select());
-    }), r({ focus: g }), (e, l) => b((m(), D("input", {
-      ref_key: "inputRef",
-      ref: o,
-      "onUpdate:modelValue": l[0] || (l[0] = (k) => n.value = k),
-      inputmode: "numeric",
-      disabled: e.isDisabled,
-      maxlength: "1",
-      class: "ds-h-11 ds-w-11 ds-rounded-lg ds-border ds-text-center ds-drop-shadow-light ds-transition-all ds-duration-200",
-      onInput: f,
-      onKeydown: i,
-      onKeyup: p,
-      onPaste: v,
-      onFocus: h,
-      onBlur: y
-    }, null, 40, x)), [
-      [O, n.value]
-    ]);
-  }
-});
+import o from "./design-system102.mjs";
+var r = 1, n = 4;
+function L(e) {
+  return o(e, r | n);
+}
 export {
-  F as default
+  L as default
 };
 //# sourceMappingURL=design-system92.mjs.map

package/dist/design-system92.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"design-system92.mjs","sources":["../src/components/BOtpField/BOtpFieldBox.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { vModelText as _vModelText, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nconst _hoisted_1 = [\"disabled\"]\n\nimport { onMounted, ref, watch, type Ref } from 'vue';\n\n/**\n * Props\n */\nexport interface Props {\n  value?: string;\n  focus?: boolean;\n  isDisabled?: boolean;\n}\n\nexport default /*#__PURE__*/_defineComponent({\n  __name: 'BOtpFieldBox',\n  props: {\n    value: { default: '' },\n    focus: { type: Boolean, default: false },\n    isDisabled: { type: Boolean, default: false }\n  },\n  emits: [\n  'on-change',\n  'on-keydown',\n  'on-keyup',\n  'on-paste',\n  'on-focus',\n  'on-blur',\n],\n  setup(__props: any, { expose: __expose, emit }) {\n\nconst props = __props;\n\n\n\n/**\n * Events\n */\n\n\n/**\n * Data\n */\nconst model = ref(props.value || '');\nconst inputRef = ref<HTMLInputElement | null>(null) as Ref<HTMLInputElement>;\nconst digits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];\n\n/**\n * Methods\n */\nconst handleOnChange = () => {\n  if (!digits.includes(model.value)) {\n    model.value = '';\n    return;\n  }\n\n  model.value = model.value.toString();\n  if (model.value.length > 1) {\n    model.value = model.value.slice(0, 1);\n  }\n  return emit('on-change', model.value);\n};\n\nconst handleOnKeyDown = (event: KeyboardEvent) => {\n  if (props.isDisabled) {\n    event.preventDefault();\n  }\n  // Only allow characters 0-9, DEL, Backspace, Enter, Right and Left Arrows, and Pasting\n  const keyEvent = event;\n  if (\n    [\n      'Alt',\n      'Control',\n      'Meta',\n      'Backspace',\n      'ArrowLeft',\n      'ArrowRight',\n      'v',\n      ...digits,\n    ].includes(keyEvent.key)\n  ) {\n    emit('on-keydown', event);\n  } else {\n    keyEvent.preventDefault();\n  }\n};\nconst handleOnKeyUp = (event: KeyboardEvent) => {\n  emit('on-keyup', event);\n};\nconst handleOnPaste = (event: ClipboardEvent) => {\n  emit('on-paste', event);\n};\nconst handleOnFocus = () => {\n  inputRef.value.select();\n  return emit('on-focus');\n};\nconst handleOnBlur = () => emit('on-blur');\nconst focusFn = () => {\n  inputRef.value.focus();\n  inputRef.value.select();\n};\n\n/**\n * Watch\n */\nwatch(\n  () => props.value,\n  (newValue, oldValue) => {\n    if (newValue !== oldValue) {\n      model.value = newValue;\n    }\n  },\n);\nwatch(\n  () => props.focus,\n  (newFocusValue, oldFocusValue) => {\n    // Check if focusedInput changed\n    // Prevent calling function if input already in focus\n    if (oldFocusValue !== newFocusValue && inputRef.value && props.focus) {\n      inputRef.value.focus();\n      inputRef.value.select();\n    }\n  },\n);\n\n/**\n * Lifecycle Hooks\n */\nonMounted(() => {\n  if (inputRef.value && props.focus) {\n    inputRef.value.focus();\n    inputRef.value.select();\n  }\n});\n\n__expose({ focus: focusFn });\n\nreturn (_ctx: any,_cache: any) => {\n  return _withDirectives((_openBlock(), _createElementBlock(\"input\", {\n    ref_key: \"inputRef\",\n    ref: inputRef,\n    \"onUpdate:modelValue\": _cache[0] || (_cache[0] = ($event: any) => ((model).value = $event)),\n    inputmode: \"numeric\",\n    disabled: _ctx.isDisabled,\n    maxlength: \"1\",\n    class: \"ds-h-11 ds-w-11 ds-rounded-lg ds-border ds-text-center ds-drop-shadow-light ds-transition-all ds-duration-200\",\n    onInput: handleOnChange,\n    onKeydown: handleOnKeyDown,\n    onKeyup: handleOnKeyUp,\n    onPaste: handleOnPaste,\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur\n  }, null, 40, _hoisted_1)), [\n    [_vModelText, model.value]\n  ])\n}\n}\n\n})"],"names":["_hoisted_1","_sfc_main","_defineComponent","__props","__expose","emit","props","model","ref","inputRef","digits","handleOnChange","handleOnKeyDown","event","keyEvent","handleOnKeyUp","handleOnPaste","handleOnFocus","handleOnBlur","focusFn","watch","newValue","oldValue","newFocusValue","oldFocusValue","onMounted","_ctx","_cache","_withDirectives","_openBlock","_createElementBlock","$event","_vModelText"],"mappings":"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"}
+{"version":3,"file":"design-system92.mjs","sources":["../node_modules/lodash-es/cloneDeep.js"],"sourcesContent":["import baseClone from './_baseClone.js';\n\n/** Used to compose bitmasks for cloning. */\nvar CLONE_DEEP_FLAG = 1,\n    CLONE_SYMBOLS_FLAG = 4;\n\n/**\n * This method is like `_.clone` except that it recursively clones `value`.\n *\n * @static\n * @memberOf _\n * @since 1.0.0\n * @category Lang\n * @param {*} value The value to recursively clone.\n * @returns {*} Returns the deep cloned value.\n * @see _.clone\n * @example\n *\n * var objects = [{ 'a': 1 }, { 'b': 2 }];\n *\n * var deep = _.cloneDeep(objects);\n * console.log(deep[0] === objects[0]);\n * // => false\n */\nfunction cloneDeep(value) {\n  return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG);\n}\n\nexport default cloneDeep;\n"],"names":["CLONE_DEEP_FLAG","CLONE_SYMBOLS_FLAG","cloneDeep","value","baseClone"],"mappings":";AAGA,IAAIA,IAAkB,GAClBC,IAAqB;AAoBzB,SAASC,EAAUC,GAAO;AACxB,SAAOC,EAAUD,GAAOH,IAAkBC,CAAkB;AAC9D;","x_google_ignoreList":[0]}

package/dist/design-system93.js

@@ -1,2 +1,2 @@
-"use strict";const r=require("./design-system103.js");var n=1,t=4;function o(e){return r(e,n|t)}module.exports=o;
+"use strict";const s=require("vue"),n=require("./design-system5.js"),v=require("./design-system34.js"),w=s.defineComponent({__name:"BModalContainer",props:{size:{default:n.BModalSize.Medium},fullscreen:{type:Boolean,default:!1},persistent:{type:Boolean,default:!1}},emits:["close"],setup(a,{emit:o}){const t=a,r=s.ref(null),c=s.computed(()=>{let e="ds-relative ds-w-full ds-h-auto ds-m-auto ds-flex ds-items-center ";if(t.fullscreen)e+="ds-w-screen ds-h-screen ";else switch(e+="ds-p-4 ",t.size){case n.BModalSize.Small:e+="ds-max-w-md ";break;case n.BModalSize.Large:e+="ds-max-w-4xl ";break;case n.BModalSize.Medium:default:e+="ds-max-w-2xl ";break}return e}),i=s.computed(()=>{let e="ds-relative ds-bg-white ds-rounded-lg ds-shadow ";return e+=t.fullscreen?"ds-w-screen ds-h-screen ds-rounded-none ":"",e}),u=()=>{document.addEventListener("keydown",l)},l=e=>{e.key==="Escape"&&o("close")},m=()=>{document.addEventListener("click",d)},d=e=>{[r.value].some(f=>e.composedPath().includes(f))||o("close")};return s.onMounted(()=>{t.persistent||setTimeout(()=>{u(),m()},200)}),s.onBeforeUnmount(()=>{t.persistent||(document.removeEventListener("keydown",l),document.removeEventListener("click",d))}),(e,p)=>(s.openBlock(),s.createBlock(v,null,{default:s.withCtx(()=>[s.createElementVNode("div",{class:s.normalizeClass(["modal-wrapper",c.value])},[s.createElementVNode("div",{ref_key:"modalWrapperContentRef",ref:r,class:s.normalizeClass(["modal-wrapper-content ds-w-full",i.value])},[s.renderSlot(e.$slots,"default")],2)],2)]),_:3}))}});module.exports=w;
 //# sourceMappingURL=design-system93.js.map

package/dist/design-system93.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system93.js","sources":["../node_modules/lodash-es/cloneDeep.js"],"sourcesContent":["import baseClone from './_baseClone.js';\n\n/** Used to compose bitmasks for cloning. */\nvar CLONE_DEEP_FLAG = 1,\n    CLONE_SYMBOLS_FLAG = 4;\n\n/**\n * This method is like `_.clone` except that it recursively clones `value`.\n *\n * @static\n * @memberOf _\n * @since 1.0.0\n * @category Lang\n * @param {*} value The value to recursively clone.\n * @returns {*} Returns the deep cloned value.\n * @see _.clone\n * @example\n *\n * var objects = [{ 'a': 1 }, { 'b': 2 }];\n *\n * var deep = _.cloneDeep(objects);\n * console.log(deep[0] === objects[0]);\n * // => false\n */\nfunction cloneDeep(value) {\n  return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG);\n}\n\nexport default cloneDeep;\n"],"names":["CLONE_DEEP_FLAG","CLONE_SYMBOLS_FLAG","cloneDeep","value","baseClone"],"mappings":"sDAGA,IAAIA,EAAkB,EAClBC,EAAqB,EAoBzB,SAASC,EAAUC,EAAO,CACxB,OAAOC,EAAUD,EAAOH,EAAkBC,CAAkB,CAC9D","x_google_ignoreList":[0]}
+{"version":3,"file":"design-system93.js","sources":["../src/components/BModal/BModalContainer.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from \"vue\"\n\nimport { BModalSize } from '@/constants/Enums';\nimport { computed, onBeforeUnmount, onMounted, ref } from 'vue';\nimport BOverlay from '../BOverlay.vue';\n\n/**\n * Props\n */\nexport interface Props {\n  size?: BModalSize;\n  fullscreen?: boolean;\n  persistent?: boolean;\n}\n\nexport default /*#__PURE__*/_defineComponent({\n  __name: 'BModalContainer',\n  props: {\n    size: { default: BModalSize.Medium },\n    fullscreen: { type: Boolean, default: false },\n    persistent: { type: Boolean, default: false }\n  },\n  emits: ['close'],\n  setup(__props: any, { emit }) {\n\nconst props = __props;\n\n\n\n/**\n * Events\n */\n\n\n/**\n * Data\n */\nconst modalWrapperContentRef = ref<HTMLDivElement | null>(null);\nconst modalWrapperCssClass = computed(() => {\n  let result = `ds-relative ds-w-full ds-h-auto ds-m-auto ds-flex ds-items-center `;\n\n  if (props.fullscreen) {\n    result += `ds-w-screen ds-h-screen `;\n  } else {\n    result += `ds-p-4 `;\n    switch (props.size) {\n      case BModalSize.Small:\n        result += `ds-max-w-md `;\n        break;\n      case BModalSize.Large:\n        result += `ds-max-w-4xl `;\n        break;\n      case BModalSize.Medium:\n      default:\n        result += `ds-max-w-2xl `;\n        break;\n    }\n  }\n\n  return result;\n});\nconst modalWrapperContentCssClass = computed(() => {\n  let result = `ds-relative ds-bg-white ds-rounded-lg ds-shadow `;\n  result += props.fullscreen ? `ds-w-screen ds-h-screen ds-rounded-none ` : ``;\n\n  return result;\n});\n\n/**\n * Methods\n */\nconst initPressEscapeEventListener = () => {\n  document.addEventListener('keydown', closeOnEscapePressed);\n};\nconst closeOnEscapePressed = (event: KeyboardEvent) => {\n  if (event.key === 'Escape') {\n    emit('close');\n  }\n};\nconst initClickOutsideEventListener = () => {\n  document.addEventListener('click', closeOnClickOutside);\n};\nconst closeOnClickOutside = (event: any) => {\n  const refs = [modalWrapperContentRef.value];\n  const withinBoundaries = refs.some((r) => event.composedPath().includes(r));\n  if (!withinBoundaries) {\n    emit('close');\n  }\n};\n\n/**\n * Lifecycle Hooks\n */\nonMounted(() => {\n  if (!props.persistent) {\n    setTimeout(() => {\n      initPressEscapeEventListener();\n      initClickOutsideEventListener();\n    }, 200);\n  }\n});\nonBeforeUnmount(() => {\n  if (!props.persistent) {\n    document.removeEventListener('keydown', closeOnEscapePressed);\n    document.removeEventListener('click', closeOnClickOutside);\n  }\n});\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createBlock(BOverlay, null, {\n    default: _withCtx(() => [\n      _createElementVNode(\"div\", {\n        class: _normalizeClass([\"modal-wrapper\", modalWrapperCssClass.value])\n      }, [\n        _createElementVNode(\"div\", {\n          ref_key: \"modalWrapperContentRef\",\n          ref: modalWrapperContentRef,\n          class: _normalizeClass([\"modal-wrapper-content ds-w-full\", modalWrapperContentCssClass.value])\n        }, [\n          _renderSlot(_ctx.$slots, \"default\")\n        ], 2)\n      ], 2)\n    ]),\n    _: 3\n  }))\n}\n}\n\n})"],"names":["_sfc_main","_defineComponent","BModalSize","__props","emit","props","modalWrapperContentRef","ref","modalWrapperCssClass","computed","result","modalWrapperContentCssClass","initPressEscapeEventListener","closeOnEscapePressed","event","initClickOutsideEventListener","closeOnClickOutside","r","onMounted","onBeforeUnmount","_ctx","_cache","_openBlock","_createBlock","BOverlay","_withCtx","_createElementVNode","_normalizeClass","_renderSlot"],"mappings":"uGAgB4BA,EAAiBC,kBAAA,CAC3C,OAAQ,kBACR,MAAO,CACL,KAAM,CAAE,QAASC,EAAA,WAAW,MAAO,EACnC,WAAY,CAAE,KAAM,QAAS,QAAS,EAAM,EAC5C,WAAY,CAAE,KAAM,QAAS,QAAS,EAAM,CAC9C,EACA,MAAO,CAAC,OAAO,EACf,MAAMC,EAAc,CAAE,KAAAC,GAAQ,CAEhC,MAAMC,EAAQF,EAYRG,EAAyBC,MAA2B,IAAI,EACxDC,EAAuBC,EAAAA,SAAS,IAAM,CAC1C,IAAIC,EAAS,qEAEb,GAAIL,EAAM,WACEK,GAAA,+BAGV,QADUA,GAAA,UACFL,EAAM,KAAM,CAClB,KAAKH,EAAW,WAAA,MACJQ,GAAA,eACV,MACF,KAAKR,EAAW,WAAA,MACJQ,GAAA,gBACV,MACF,KAAKR,EAAAA,WAAW,OAChB,QACYQ,GAAA,gBACV,KACJ,CAGK,OAAAA,CAAA,CACR,EACKC,EAA8BF,EAAAA,SAAS,IAAM,CACjD,IAAIC,EAAS,mDACH,OAAAA,GAAAL,EAAM,WAAa,2CAA6C,GAEnEK,CAAA,CACR,EAKKE,EAA+B,IAAM,CAChC,SAAA,iBAAiB,UAAWC,CAAoB,CAAA,EAErDA,EAAwBC,GAAyB,CACjDA,EAAM,MAAQ,UAChBV,EAAK,OAAO,CACd,EAEIW,EAAgC,IAAM,CACjC,SAAA,iBAAiB,QAASC,CAAmB,CAAA,EAElDA,EAAuBF,GAAe,CAC7B,CAACR,EAAuB,KAAK,EACZ,KAAMW,GAAMH,EAAM,eAAe,SAASG,CAAC,CAAC,GAExEb,EAAK,OAAO,CACd,EAMFc,OAAAA,EAAAA,UAAU,IAAM,CACTb,EAAM,YACT,WAAW,IAAM,CACcO,IACCG,KAC7B,GAAG,CACR,CACD,EACDI,EAAAA,gBAAgB,IAAM,CACfd,EAAM,aACA,SAAA,oBAAoB,UAAWQ,CAAoB,EACnD,SAAA,oBAAoB,QAASG,CAAmB,EAC3D,CACD,EAEM,CAACI,EAAUC,KACRC,YAAW,EAAGC,cAAaC,EAAU,KAAM,CACjD,QAASC,UAAS,IAAM,CACtBC,EAAAA,mBAAoB,MAAO,CACzB,MAAOC,EAAAA,eAAgB,CAAC,gBAAiBnB,EAAqB,KAAK,CAAC,CAAA,EACnE,CACDkB,EAAAA,mBAAoB,MAAO,CACzB,QAAS,yBACT,IAAKpB,EACL,MAAOqB,EAAAA,eAAgB,CAAC,kCAAmChB,EAA4B,KAAK,CAAC,CAAA,EAC5F,CACDiB,aAAYR,EAAK,OAAQ,SAAS,GACjC,CAAC,GACH,CAAC,CAAA,CACL,EACD,EAAG,CAAA,CACJ,EAEH,CAEA,CAAC"}

package/dist/design-system93.mjs

@@ -1,9 +1,70 @@
-import o from "./design-system103.mjs";
-var r = 1, n = 4;
-function L(e) {
-  return o(e, r | n);
-}
+import { defineComponent as k, ref as C, computed as d, onMounted as h, onBeforeUnmount as B, openBlock as E, createBlock as x, withCtx as y, createElementVNode as a, normalizeClass as c, renderSlot as L } from "vue";
+import { BModalSize as t } from "./design-system5.mjs";
+import _ from "./design-system34.mjs";
+const W = /* @__PURE__ */ k({
+  __name: "BModalContainer",
+  props: {
+    size: { default: t.Medium },
+    fullscreen: { type: Boolean, default: !1 },
+    persistent: { type: Boolean, default: !1 }
+  },
+  emits: ["close"],
+  setup(i, { emit: n }) {
+    const s = i, o = C(null), u = d(() => {
+      let e = "ds-relative ds-w-full ds-h-auto ds-m-auto ds-flex ds-items-center ";
+      if (s.fullscreen)
+        e += "ds-w-screen ds-h-screen ";
+      else
+        switch (e += "ds-p-4 ", s.size) {
+          case t.Small:
+            e += "ds-max-w-md ";
+            break;
+          case t.Large:
+            e += "ds-max-w-4xl ";
+            break;
+          case t.Medium:
+          default:
+            e += "ds-max-w-2xl ";
+            break;
+        }
+      return e;
+    }), m = d(() => {
+      let e = "ds-relative ds-bg-white ds-rounded-lg ds-shadow ";
+      return e += s.fullscreen ? "ds-w-screen ds-h-screen ds-rounded-none " : "", e;
+    }), p = () => {
+      document.addEventListener("keydown", r);
+    }, r = (e) => {
+      e.key === "Escape" && n("close");
+    }, f = () => {
+      document.addEventListener("click", l);
+    }, l = (e) => {
+      [o.value].some((v) => e.composedPath().includes(v)) || n("close");
+    };
+    return h(() => {
+      s.persistent || setTimeout(() => {
+        p(), f();
+      }, 200);
+    }), B(() => {
+      s.persistent || (document.removeEventListener("keydown", r), document.removeEventListener("click", l));
+    }), (e, w) => (E(), x(_, null, {
+      default: y(() => [
+        a("div", {
+          class: c(["modal-wrapper", u.value])
+        }, [
+          a("div", {
+            ref_key: "modalWrapperContentRef",
+            ref: o,
+            class: c(["modal-wrapper-content ds-w-full", m.value])
+          }, [
+            L(e.$slots, "default")
+          ], 2)
+        ], 2)
+      ]),
+      _: 3
+    }));
+  }
+});
 export {
-  L as default
+  W as default
 };
 //# sourceMappingURL=design-system93.mjs.map