@dialpad/dialtone-vue 2.205.0 → 2.205.4

package/dist/lib/stack/stack-constants.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={default:"column",column:"column",row:"row","row-reverse":"row-reverse","column-reverse":"column-reverse"},t=["sm","md","lg","xl"],T=["0","50","100","200","300","350","400","450","500","525","550","600","625","650","700"],_=["start","center","end","stretch","baseline"],n=["start","center","end","around","between","evenly"],r={DT_STACK_DIRECTION:e,DT_STACK_RESPONSIVE_BREAKPOINTS:t,DT_STACK_GAP:T,DT_STACK_ALIGN:_,DT_STACK_JUSTIFY:n};exports.DT_STACK_ALIGN=_;exports.DT_STACK_DIRECTION=e;exports.DT_STACK_GAP=T;exports.DT_STACK_JUSTIFY=n;exports.DT_STACK_RESPONSIVE_BREAKPOINTS=t;exports.default=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={default:"column",column:"column",row:"row","row-reverse":"row-reverse","column-reverse":"column-reverse"},t=["sm","md","lg","xl"],T=["0","50","100","200","300","350","400","450","500","525","550","600","625","650","700"],n=["start","center","end","stretch","baseline"],s=["start","center","end","space-around","space-between","space-evenly","around","between","evenly"],_={DT_STACK_DIRECTION:e,DT_STACK_RESPONSIVE_BREAKPOINTS:t,DT_STACK_GAP:T,DT_STACK_ALIGN:n,DT_STACK_JUSTIFY:s};exports.DT_STACK_ALIGN=n;exports.DT_STACK_DIRECTION=e;exports.DT_STACK_GAP=T;exports.DT_STACK_JUSTIFY=s;exports.DT_STACK_RESPONSIVE_BREAKPOINTS=t;exports.default=_;
 //# sourceMappingURL=stack-constants.cjs.map

package/dist/lib/stack/stack-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"stack-constants.cjs","sources":["../../../components/stack/stack_constants.js"],"sourcesContent":["/**\n * Direction values for the stack component.\n * Uses object format for historical compatibility - changing to array would be breaking.\n * The object keys are the valid values, and the values are the CSS class suffixes.\n * @type {Object<string, string>}\n */\nexport const DT_STACK_DIRECTION = {\n  default: 'column',\n  column: 'column',\n  row: 'row',\n  'row-reverse': 'row-reverse',\n  'column-reverse': 'column-reverse',\n};\n\n/**\n * Responsive breakpoint names used for all responsive props.\n * @type {string[]}\n */\nexport const DT_STACK_RESPONSIVE_BREAKPOINTS = ['sm', 'md', 'lg', 'xl'];\n\n/**\n * Gap values for spacing between stack items.\n * Uses array format.\n * @type {string[]}\n */\nexport const DT_STACK_GAP = ['0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'];\n\n/**\n * Align values for the stack component (cross-axis alignment).\n * Uses array format - simpler structure for newer props.\n * @type {string[]}\n */\nexport const DT_STACK_ALIGN = ['start', 'center', 'end', 'stretch', 'baseline'];\n\n/**\n * Justify values for the stack component (main-axis distribution).\n * Uses array format - simpler structure for newer props.\n * @type {string[]}\n */\nexport const DT_STACK_JUSTIFY = ['start', 'center', 'end', 'around', 'between', 'evenly'];\n\nexport default {\n  DT_STACK_DIRECTION,\n  DT_STACK_RESPONSIVE_BREAKPOINTS,\n  DT_STACK_GAP,\n  DT_STACK_ALIGN,\n  DT_STACK_JUSTIFY,\n};\n"],"names":["DT_STACK_DIRECTION","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_GAP","DT_STACK_ALIGN","DT_STACK_JUSTIFY","stack_constants"],"mappings":"4GAMY,MAACA,EAAqB,CAChC,QAAS,SACT,OAAQ,SACR,IAAK,MACL,cAAe,cACf,iBAAkB,gBACpB,EAMaC,EAAkC,CAAC,KAAM,KAAM,KAAM,IAAI,EAOzDC,EAAe,CAAC,IAAK,KAAM,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,KAAK,EAOpHC,EAAiB,CAAC,QAAS,SAAU,MAAO,UAAW,UAAU,EAOjEC,EAAmB,CAAC,QAAS,SAAU,MAAO,SAAU,UAAW,QAAQ,EAExFC,EAAe,CACb,mBAAAL,EACA,gCAAAC,EACA,aAAAC,EACA,eAAAC,EACA,iBAAAC,CACF"}
+{"version":3,"file":"stack-constants.cjs","sources":["../../../components/stack/stack_constants.js"],"sourcesContent":["/**\n * Direction values for the stack component.\n * Uses object format for historical compatibility - changing to array would be breaking.\n * The object keys are the valid values, and the values are the CSS class suffixes.\n * @type {Object<string, string>}\n */\nexport const DT_STACK_DIRECTION = {\n  default: 'column',\n  column: 'column',\n  row: 'row',\n  'row-reverse': 'row-reverse',\n  'column-reverse': 'column-reverse',\n};\n\n/**\n * Responsive breakpoint names used for all responsive props.\n * @type {string[]}\n */\nexport const DT_STACK_RESPONSIVE_BREAKPOINTS = ['sm', 'md', 'lg', 'xl'];\n\n/**\n * Gap values for spacing between stack items.\n * Uses array format.\n * @type {string[]}\n */\nexport const DT_STACK_GAP = ['0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'];\n\n/**\n * Align values for the stack component (cross-axis alignment).\n * Uses array format - simpler structure for newer props.\n * @type {string[]}\n */\nexport const DT_STACK_ALIGN = ['start', 'center', 'end', 'stretch', 'baseline'];\n\n/**\n * Justify values for the stack component (main-axis distribution).\n * Uses array format - simpler structure for newer props.\n * Primary values align with CSS justify-content values.\n * @type {string[]}\n */\nexport const DT_STACK_JUSTIFY = ['start', 'center', 'end', 'space-around', 'space-between', 'space-evenly', 'around', 'between', 'evenly'];\n\nexport default {\n  DT_STACK_DIRECTION,\n  DT_STACK_RESPONSIVE_BREAKPOINTS,\n  DT_STACK_GAP,\n  DT_STACK_ALIGN,\n  DT_STACK_JUSTIFY,\n};\n"],"names":["DT_STACK_DIRECTION","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_GAP","DT_STACK_ALIGN","DT_STACK_JUSTIFY","stack_constants"],"mappings":"4GAMY,MAACA,EAAqB,CAChC,QAAS,SACT,OAAQ,SACR,IAAK,MACL,cAAe,cACf,iBAAkB,gBACpB,EAMaC,EAAkC,CAAC,KAAM,KAAM,KAAM,IAAI,EAOzDC,EAAe,CAAC,IAAK,KAAM,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,KAAK,EAOpHC,EAAiB,CAAC,QAAS,SAAU,MAAO,UAAW,UAAU,EAQjEC,EAAmB,CAAC,QAAS,SAAU,MAAO,eAAgB,gBAAiB,eAAgB,SAAU,UAAW,QAAQ,EAEzIC,EAAe,CACb,mBAAAL,EACA,gCAAAC,EACA,aAAAC,EACA,eAAAC,EACA,iBAAAC,CACF"}

package/dist/lib/stack/stack-constants.js

@@ -4,19 +4,19 @@ const e = {
   row: "row",
   "row-reverse": "row-reverse",
   "column-reverse": "column-reverse"
-}, n = ["sm", "md", "lg", "xl"], t = ["0", "50", "100", "200", "300", "350", "400", "450", "500", "525", "550", "600", "625", "650", "700"], r = ["start", "center", "end", "stretch", "baseline"], s = ["start", "center", "end", "around", "between", "evenly"], o = {
+}, n = ["sm", "md", "lg", "xl"], s = ["0", "50", "100", "200", "300", "350", "400", "450", "500", "525", "550", "600", "625", "650", "700"], t = ["start", "center", "end", "stretch", "baseline"], r = ["start", "center", "end", "space-around", "space-between", "space-evenly", "around", "between", "evenly"], c = {
   DT_STACK_DIRECTION: e,
   DT_STACK_RESPONSIVE_BREAKPOINTS: n,
-  DT_STACK_GAP: t,
-  DT_STACK_ALIGN: r,
-  DT_STACK_JUSTIFY: s
+  DT_STACK_GAP: s,
+  DT_STACK_ALIGN: t,
+  DT_STACK_JUSTIFY: r
 };
 export {
-  r as DT_STACK_ALIGN,
+  t as DT_STACK_ALIGN,
   e as DT_STACK_DIRECTION,
-  t as DT_STACK_GAP,
-  s as DT_STACK_JUSTIFY,
+  s as DT_STACK_GAP,
+  r as DT_STACK_JUSTIFY,
   n as DT_STACK_RESPONSIVE_BREAKPOINTS,
-  o as default
+  c as default
 };
 //# sourceMappingURL=stack-constants.js.map

package/dist/lib/stack/stack-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack-constants.js","sources":["../../../components/stack/stack_constants.js"],"sourcesContent":["/**\n * Direction values for the stack component.\n * Uses object format for historical compatibility - changing to array would be breaking.\n * The object keys are the valid values, and the values are the CSS class suffixes.\n * @type {Object<string, string>}\n */\nexport const DT_STACK_DIRECTION = {\n  default: 'column',\n  column: 'column',\n  row: 'row',\n  'row-reverse': 'row-reverse',\n  'column-reverse': 'column-reverse',\n};\n\n/**\n * Responsive breakpoint names used for all responsive props.\n * @type {string[]}\n */\nexport const DT_STACK_RESPONSIVE_BREAKPOINTS = ['sm', 'md', 'lg', 'xl'];\n\n/**\n * Gap values for spacing between stack items.\n * Uses array format.\n * @type {string[]}\n */\nexport const DT_STACK_GAP = ['0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'];\n\n/**\n * Align values for the stack component (cross-axis alignment).\n * Uses array format - simpler structure for newer props.\n * @type {string[]}\n */\nexport const DT_STACK_ALIGN = ['start', 'center', 'end', 'stretch', 'baseline'];\n\n/**\n * Justify values for the stack component (main-axis distribution).\n * Uses array format - simpler structure for newer props.\n * @type {string[]}\n */\nexport const DT_STACK_JUSTIFY = ['start', 'center', 'end', 'around', 'between', 'evenly'];\n\nexport default {\n  DT_STACK_DIRECTION,\n  DT_STACK_RESPONSIVE_BREAKPOINTS,\n  DT_STACK_GAP,\n  DT_STACK_ALIGN,\n  DT_STACK_JUSTIFY,\n};\n"],"names":["DT_STACK_DIRECTION","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_GAP","DT_STACK_ALIGN","DT_STACK_JUSTIFY","stack_constants"],"mappings":"AAMY,MAACA,IAAqB;AAAA,EAChC,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,eAAe;AAAA,EACf,kBAAkB;AACpB,GAMaC,IAAkC,CAAC,MAAM,MAAM,MAAM,IAAI,GAOzDC,IAAe,CAAC,KAAK,MAAM,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,KAAK,GAOpHC,IAAiB,CAAC,SAAS,UAAU,OAAO,WAAW,UAAU,GAOjEC,IAAmB,CAAC,SAAS,UAAU,OAAO,UAAU,WAAW,QAAQ,GAExFC,IAAe;AAAA,EACb,oBAAAL;AAAA,EACA,iCAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AACF;"}
+{"version":3,"file":"stack-constants.js","sources":["../../../components/stack/stack_constants.js"],"sourcesContent":["/**\n * Direction values for the stack component.\n * Uses object format for historical compatibility - changing to array would be breaking.\n * The object keys are the valid values, and the values are the CSS class suffixes.\n * @type {Object<string, string>}\n */\nexport const DT_STACK_DIRECTION = {\n  default: 'column',\n  column: 'column',\n  row: 'row',\n  'row-reverse': 'row-reverse',\n  'column-reverse': 'column-reverse',\n};\n\n/**\n * Responsive breakpoint names used for all responsive props.\n * @type {string[]}\n */\nexport const DT_STACK_RESPONSIVE_BREAKPOINTS = ['sm', 'md', 'lg', 'xl'];\n\n/**\n * Gap values for spacing between stack items.\n * Uses array format.\n * @type {string[]}\n */\nexport const DT_STACK_GAP = ['0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'];\n\n/**\n * Align values for the stack component (cross-axis alignment).\n * Uses array format - simpler structure for newer props.\n * @type {string[]}\n */\nexport const DT_STACK_ALIGN = ['start', 'center', 'end', 'stretch', 'baseline'];\n\n/**\n * Justify values for the stack component (main-axis distribution).\n * Uses array format - simpler structure for newer props.\n * Primary values align with CSS justify-content values.\n * @type {string[]}\n */\nexport const DT_STACK_JUSTIFY = ['start', 'center', 'end', 'space-around', 'space-between', 'space-evenly', 'around', 'between', 'evenly'];\n\nexport default {\n  DT_STACK_DIRECTION,\n  DT_STACK_RESPONSIVE_BREAKPOINTS,\n  DT_STACK_GAP,\n  DT_STACK_ALIGN,\n  DT_STACK_JUSTIFY,\n};\n"],"names":["DT_STACK_DIRECTION","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_GAP","DT_STACK_ALIGN","DT_STACK_JUSTIFY","stack_constants"],"mappings":"AAMY,MAACA,IAAqB;AAAA,EAChC,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,eAAe;AAAA,EACf,kBAAkB;AACpB,GAMaC,IAAkC,CAAC,MAAM,MAAM,MAAM,IAAI,GAOzDC,IAAe,CAAC,KAAK,MAAM,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,KAAK,GAOpHC,IAAiB,CAAC,SAAS,UAAU,OAAO,WAAW,UAAU,GAQjEC,IAAmB,CAAC,SAAS,UAAU,OAAO,gBAAgB,iBAAiB,gBAAgB,UAAU,WAAW,QAAQ,GAEzIC,IAAe;AAAA,EACb,oBAAAL;AAAA,EACA,iCAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AACF;"}

package/dist/lib/stack/stack.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"stack.cjs","sources":["../../../components/stack/stack.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    data-qa=\"dt-stack\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      defaultAlign,\n      defaultJustify,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from './stack_constants';\nimport { directionValidator, gapValidator, alignValidator, justifyValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass, getDefaultAlignClass, getDefaultJustifyClass } from './utils';\n\nexport default {\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overridden\n     * using the `align` and `justify` props.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n\n    /**\n     * The align property controls the alignment of items along the cross axis.\n     * The align can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default align with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * If not specified, alignment uses CSS defaults: stretch for column direction,\n     * center for row/row-reverse directions (set by CSS).\n     * Valid values are 'start', 'center', 'end', 'stretch', 'baseline'.\n     */\n    align: {\n      type: [String, Object],\n      validator: (align) => alignValidator(align),\n    },\n\n    /**\n     * The justify property controls the justification of items along the main axis.\n     * The justify can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default justify with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are 'start', 'center', 'end', 'around', 'between', 'evenly'.\n     */\n    justify: {\n      type: [String, Object],\n      default: 'start',\n      validator: (justify) => justifyValidator(justify),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n      DT_STACK_ALIGN,\n      DT_STACK_JUSTIFY,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    defaultAlign () {\n      return getDefaultAlignClass(this.align);\n    },\n\n    defaultJustify () {\n      return getDefaultJustifyClass(this.justify);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap, this.align, this.justify);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","direction","directionValidator","gap","gapValidator","align","alignValidator","justify","justifyValidator","DT_STACK_DIRECTION","DT_STACK_GAP","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_ALIGN","DT_STACK_JUSTIFY","getDefaultGapClass","getDefaultDirectionClass","getDefaultAlignClass","getDefaultJustifyClass","getResponsiveClasses"],"mappings":"oQAuBAA,EAAA,CACA,KAAA,UAEA,MAAA,CASA,UAAA,CACA,KAAA,CAAA,OAAA,MAAA,EACA,QAAA,SACA,UAAAC,GAAAC,EAAAA,mBAAAD,CAAA,CACA,EAKA,GAAA,CACA,KAAA,OACA,QAAA,KACA,EAUA,IAAA,CACA,KAAA,CAAA,OAAA,MAAA,EACA,QAAA,IACA,UAAAE,GAAAC,EAAAA,aAAAD,CAAA,CACA,EAYA,MAAA,CACA,KAAA,CAAA,OAAA,MAAA,EACA,UAAAE,GAAAC,EAAAA,eAAAD,CAAA,CACA,EAUA,QAAA,CACA,KAAA,CAAA,OAAA,MAAA,EACA,QAAA,QACA,UAAAE,GAAAC,EAAAA,iBAAAD,CAAA,CACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,mBAAAE,EAAAA,mBACA,aAAAC,EAAAA,aACA,gCAAAC,EAAAA,gCACA,eAAAC,EAAAA,eACA,iBAAAC,EAAAA,gBACA,CACA,EAEA,SAAA,CACA,YAAA,CACA,OAAAC,EAAAA,mBAAA,KAAA,GAAA,CACA,EAEA,kBAAA,CACA,OAAAC,EAAAA,yBAAA,KAAA,SAAA,CACA,EAEA,cAAA,CACA,OAAAC,EAAAA,qBAAA,KAAA,KAAA,CACA,EAEA,gBAAA,CACA,OAAAC,EAAAA,uBAAA,KAAA,OAAA,CACA,EAEA,iBAAA,CACA,OAAAC,EAAAA,qBAAA,KAAA,UAAA,KAAA,IAAA,KAAA,MAAA,KAAA,OAAA,CACA,CACA,CACA"}
+{"version":3,"file":"stack.cjs","sources":["../../../components/stack/stack.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    data-qa=\"dt-stack\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      defaultAlign,\n      defaultJustify,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from './stack_constants';\nimport { directionValidator, gapValidator, alignValidator, justifyValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass, getDefaultAlignClass, getDefaultJustifyClass } from './utils';\n\nexport default {\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overridden\n     * using the `align` and `justify` props.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n\n    /**\n     * The align property controls the alignment of items along the cross axis.\n     * The align can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default align with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * If not specified, alignment uses CSS defaults: stretch for column direction,\n     * center for row/row-reverse directions (set by CSS).\n     * Valid values are 'start', 'center', 'end', 'stretch', 'baseline'.\n     */\n    align: {\n      type: [String, Object],\n      validator: (align) => alignValidator(align),\n    },\n\n    /**\n     * The justify property controls the justification of items along the main axis.\n     * The justify can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default justify with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are 'start', 'center', 'end', 'space-around', 'space-between', 'space-evenly'.\n     */\n    justify: {\n      type: [String, Object],\n      default: 'start',\n      validator: (justify) => justifyValidator(justify),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n      DT_STACK_ALIGN,\n      DT_STACK_JUSTIFY,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    defaultAlign () {\n      return getDefaultAlignClass(this.align);\n    },\n\n    defaultJustify () {\n      return getDefaultJustifyClass(this.justify);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap, this.align, this.justify);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","direction","directionValidator","gap","gapValidator","align","alignValidator","justify","justifyValidator","DT_STACK_DIRECTION","DT_STACK_GAP","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_ALIGN","DT_STACK_JUSTIFY","getDefaultGapClass","getDefaultDirectionClass","getDefaultAlignClass","getDefaultJustifyClass","getResponsiveClasses"],"mappings":"oQAuBAA,EAAA,CACA,KAAA,UAEA,MAAA,CASA,UAAA,CACA,KAAA,CAAA,OAAA,MAAA,EACA,QAAA,SACA,UAAAC,GAAAC,EAAAA,mBAAAD,CAAA,CACA,EAKA,GAAA,CACA,KAAA,OACA,QAAA,KACA,EAUA,IAAA,CACA,KAAA,CAAA,OAAA,MAAA,EACA,QAAA,IACA,UAAAE,GAAAC,EAAAA,aAAAD,CAAA,CACA,EAYA,MAAA,CACA,KAAA,CAAA,OAAA,MAAA,EACA,UAAAE,GAAAC,EAAAA,eAAAD,CAAA,CACA,EAUA,QAAA,CACA,KAAA,CAAA,OAAA,MAAA,EACA,QAAA,QACA,UAAAE,GAAAC,EAAAA,iBAAAD,CAAA,CACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,mBAAAE,EAAAA,mBACA,aAAAC,EAAAA,aACA,gCAAAC,EAAAA,gCACA,eAAAC,EAAAA,eACA,iBAAAC,EAAAA,gBACA,CACA,EAEA,SAAA,CACA,YAAA,CACA,OAAAC,EAAAA,mBAAA,KAAA,GAAA,CACA,EAEA,kBAAA,CACA,OAAAC,EAAAA,yBAAA,KAAA,SAAA,CACA,EAEA,cAAA,CACA,OAAAC,EAAAA,qBAAA,KAAA,KAAA,CACA,EAEA,gBAAA,CACA,OAAAC,EAAAA,uBAAA,KAAA,OAAA,CACA,EAEA,iBAAA,CACA,OAAAC,EAAAA,qBAAA,KAAA,UAAA,KAAA,IAAA,KAAA,MAAA,KAAA,OAAA,CACA,CACA,CACA"}

package/dist/lib/stack/stack.js

@@ -58,7 +58,7 @@ const D = {
      * All the undefined breakpoints will have the 'default' value.
      * You can override the default justify with 'default' key.
      * In case of string, it will be applied to all the breakpoints.
-     * Valid values are 'start', 'center', 'end', 'around', 'between', 'evenly'.
+     * Valid values are 'start', 'center', 'end', 'space-around', 'space-between', 'space-evenly'.
      */
     justify: {
       type: [String, Object],

package/dist/lib/stack/stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.js","sources":["../../../components/stack/stack.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    data-qa=\"dt-stack\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      defaultAlign,\n      defaultJustify,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from './stack_constants';\nimport { directionValidator, gapValidator, alignValidator, justifyValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass, getDefaultAlignClass, getDefaultJustifyClass } from './utils';\n\nexport default {\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overridden\n     * using the `align` and `justify` props.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n\n    /**\n     * The align property controls the alignment of items along the cross axis.\n     * The align can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default align with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * If not specified, alignment uses CSS defaults: stretch for column direction,\n     * center for row/row-reverse directions (set by CSS).\n     * Valid values are 'start', 'center', 'end', 'stretch', 'baseline'.\n     */\n    align: {\n      type: [String, Object],\n      validator: (align) => alignValidator(align),\n    },\n\n    /**\n     * The justify property controls the justification of items along the main axis.\n     * The justify can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default justify with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are 'start', 'center', 'end', 'around', 'between', 'evenly'.\n     */\n    justify: {\n      type: [String, Object],\n      default: 'start',\n      validator: (justify) => justifyValidator(justify),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n      DT_STACK_ALIGN,\n      DT_STACK_JUSTIFY,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    defaultAlign () {\n      return getDefaultAlignClass(this.align);\n    },\n\n    defaultJustify () {\n      return getDefaultJustifyClass(this.justify);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap, this.align, this.justify);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","direction","directionValidator","gap","gapValidator","align","alignValidator","justify","justifyValidator","DT_STACK_DIRECTION","DT_STACK_GAP","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_ALIGN","DT_STACK_JUSTIFY","getDefaultGapClass","getDefaultDirectionClass","getDefaultAlignClass","getDefaultJustifyClass","getResponsiveClasses"],"mappings":";;;;AAuBA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,WAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAAC,EAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,KAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAE,MAAAC,EAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYA,OAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,WAAA,CAAAE,MAAAC,EAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,SAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAE,MAAAC,EAAAD,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,oBAAAE;AAAA,MACA,cAAAC;AAAA,MACA,iCAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAAC,EAAA,KAAA,GAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAAC,EAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAAC,EAAA,KAAA,KAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAAC,EAAA,KAAA,OAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAAC,EAAA,KAAA,WAAA,KAAA,KAAA,KAAA,OAAA,KAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"stack.js","sources":["../../../components/stack/stack.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    data-qa=\"dt-stack\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      defaultAlign,\n      defaultJustify,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from './stack_constants';\nimport { directionValidator, gapValidator, alignValidator, justifyValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass, getDefaultAlignClass, getDefaultJustifyClass } from './utils';\n\nexport default {\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overridden\n     * using the `align` and `justify` props.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n\n    /**\n     * The align property controls the alignment of items along the cross axis.\n     * The align can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default align with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * If not specified, alignment uses CSS defaults: stretch for column direction,\n     * center for row/row-reverse directions (set by CSS).\n     * Valid values are 'start', 'center', 'end', 'stretch', 'baseline'.\n     */\n    align: {\n      type: [String, Object],\n      validator: (align) => alignValidator(align),\n    },\n\n    /**\n     * The justify property controls the justification of items along the main axis.\n     * The justify can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default justify with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are 'start', 'center', 'end', 'space-around', 'space-between', 'space-evenly'.\n     */\n    justify: {\n      type: [String, Object],\n      default: 'start',\n      validator: (justify) => justifyValidator(justify),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n      DT_STACK_ALIGN,\n      DT_STACK_JUSTIFY,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    defaultAlign () {\n      return getDefaultAlignClass(this.align);\n    },\n\n    defaultJustify () {\n      return getDefaultJustifyClass(this.justify);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap, this.align, this.justify);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","direction","directionValidator","gap","gapValidator","align","alignValidator","justify","justifyValidator","DT_STACK_DIRECTION","DT_STACK_GAP","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_ALIGN","DT_STACK_JUSTIFY","getDefaultGapClass","getDefaultDirectionClass","getDefaultAlignClass","getDefaultJustifyClass","getResponsiveClasses"],"mappings":";;;;AAuBA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,WAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAAC,EAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,KAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAE,MAAAC,EAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYA,OAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,WAAA,CAAAE,MAAAC,EAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,SAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAE,MAAAC,EAAAD,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,oBAAAE;AAAA,MACA,cAAAC;AAAA,MACA,iCAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAAC,EAAA,KAAA,GAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAAC,EAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAAC,EAAA,KAAA,KAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAAC,EAAA,KAAA,OAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAAC,EAAA,KAAA,WAAA,KAAA,KAAA,KAAA,OAAA,KAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/lib/stack/utils.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./stack-constants.cjs");function f(t){return t===n.DT_STACK_DIRECTION.default}function a(t){return typeof t=="string"?t:typeof t=="object"&&t!==null?t.default:null}function c(t){if(typeof t=="string")return f(t)?null:n.DT_STACK_DIRECTION[t];if(typeof t=="object"){const{default:e}=t;return f(e)?null:n.DT_STACK_DIRECTION[e]}else return null}function i(t,e,s,u="d-stack"){return typeof t!="object"||t===null?[]:n.DT_STACK_RESPONSIVE_BREAKPOINTS.map(r=>{const l=t[r];if(!l)return null;const o=Array.isArray(s)?s.includes(l):l in s,C=e===""?`${u}--${r}-${l}`:`${u}--${r}-${e}-${l}`;return o?C:null})}function T(t){return c(t)?`d-stack--${n.DT_STACK_DIRECTION[c(t)]}`:null}function D(t){return i(t,"",n.DT_STACK_DIRECTION)}function _(t){return i(t,"gap",n.DT_STACK_GAP)}function g(t){return i(t,"align",n.DT_STACK_ALIGN)}function A(t){return i(t,"justify",n.DT_STACK_JUSTIFY)}function S(t,e,s,u){return[...D(t),..._(e),...g(s),...A(u)]}function y(t){const e=a(t);return n.DT_STACK_GAP.includes(e)?`d-stack--gap-${e}`:null}function I(t){const e=a(t);return n.DT_STACK_ALIGN.includes(e)?`d-stack--align-${e}`:null}function R(t){const e=a(t);return n.DT_STACK_JUSTIFY.includes(e)?`d-stack--justify-${e}`:null}exports.getDefaultAlignClass=I;exports.getDefaultDirectionClass=T;exports.getDefaultGapClass=y;exports.getDefaultJustifyClass=R;exports.getResponsiveClasses=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./stack-constants.cjs");function o(t){return t===n.DT_STACK_DIRECTION.default}function a(t){return typeof t=="string"?t:typeof t=="object"&&t!==null?t.default:null}function c(t){if(typeof t=="string")return o(t)?null:n.DT_STACK_DIRECTION[t];if(typeof t=="object"){const{default:e}=t;return o(e)?null:n.DT_STACK_DIRECTION[e]}else return null}function r(t,e,s,l="d-stack"){return typeof t!="object"||t===null?[]:n.DT_STACK_RESPONSIVE_BREAKPOINTS.map(u=>{const i=t[u];if(!i)return null;const T=Array.isArray(s)?s.includes(i):i in s,C=e===""?`${l}--${u}-${i}`:`${l}--${u}-${e}-${i}`;return T?C:null})}function _(t){return c(t)?`d-stack--${n.DT_STACK_DIRECTION[c(t)]}`:null}function D(t){return r(t,"",n.DT_STACK_DIRECTION)}function g(t){return r(t,"gap",n.DT_STACK_GAP)}function A(t){return r(t,"align",n.DT_STACK_ALIGN)}function S(t){return typeof t!="object"||t===null?[]:n.DT_STACK_RESPONSIVE_BREAKPOINTS.map(e=>{const s=t[e];if(!s)return null;const l=n.DT_STACK_JUSTIFY.includes(s),u=f(s);return l?`d-stack--${e}-justify-${u}`:null})}function d(t,e,s,l){return[...D(t),...g(e),...A(s),...S(l)]}function y(t){const e=a(t);return n.DT_STACK_GAP.includes(e)?`d-stack--gap-${e}`:null}function p(t){const e=a(t);return n.DT_STACK_ALIGN.includes(e)?`d-stack--align-${e}`:null}function f(t){return{"space-around":"around","space-between":"between","space-evenly":"evenly"}[t]||t}function I(t){const e=a(t),s=f(e);return n.DT_STACK_JUSTIFY.includes(e)?`d-stack--justify-${s}`:null}exports.getDefaultAlignClass=p;exports.getDefaultDirectionClass=_;exports.getDefaultGapClass=y;exports.getDefaultJustifyClass=I;exports.getResponsiveClasses=d;
 //# sourceMappingURL=utils.cjs.map

package/dist/lib/stack/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../../components/stack/utils.js"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\n/**\n * Generic helper to extract default value from string or object props\n * @param {string|Object} value - The prop value\n * @returns {string|null} The default value or null\n */\nfunction _getDefaultValue (value) {\n  if (typeof value === 'string') return value;\n  if (typeof value === 'object' && value !== null) return value.default;\n  return null;\n}\n\nfunction _getValidDirection (direction) {\n  if (typeof direction === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (typeof direction === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\n/**\n * Generic helper to generate responsive classes for any prop\n * @param {Object} propValue - The prop value object with breakpoint keys\n * @param {string} propName - The name of the prop (e.g., 'gap', 'align')\n * @param {Array|Object} validValues - Valid values (array or object for direction)\n * @param {string} classPrefix - CSS class prefix (default: 'd-stack')\n * @returns {Array} Array of CSS class names\n */\nfunction _getResponsiveClasses (propValue, propName, validValues, classPrefix = 'd-stack') {\n  if (typeof propValue !== 'object' || propValue === null) return [];\n\n  return DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n    const value = propValue[breakpoint];\n    if (!value) return null;\n\n    // Handle both array (gap, align, justify) and object (direction) validValues\n    const isValid = Array.isArray(validValues)\n      ? validValues.includes(value)\n      : value in validValues;\n\n    // For direction, we don't need the prop name in the class\n    const className = propName === ''\n      ? `${classPrefix}--${breakpoint}-${value}`\n      : `${classPrefix}--${breakpoint}-${propName}-${value}`;\n\n    return isValid ? className : null;\n  });\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nfunction getResponsiveDirectionClasses (direction) {\n  return _getResponsiveClasses(direction, '', DT_STACK_DIRECTION);\n}\n\nfunction getResponsiveGapClasses (gap) {\n  return _getResponsiveClasses(gap, 'gap', DT_STACK_GAP);\n}\n\nfunction getResponsiveAlignClasses (align) {\n  return _getResponsiveClasses(align, 'align', DT_STACK_ALIGN);\n}\n\nfunction getResponsiveJustifyClasses (justify) {\n  return _getResponsiveClasses(justify, 'justify', DT_STACK_JUSTIFY);\n}\n\nexport function getResponsiveClasses (direction, gap, align, justify) {\n  return [\n    ...getResponsiveDirectionClasses(direction),\n    ...getResponsiveGapClasses(gap),\n    ...getResponsiveAlignClasses(align),\n    ...getResponsiveJustifyClasses(justify),\n  ];\n}\n\nexport function getDefaultGapClass (gap) {\n  const validGap = _getDefaultValue(gap);\n  return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;\n}\n\nexport function getDefaultAlignClass (align) {\n  const validAlign = _getDefaultValue(align);\n  return DT_STACK_ALIGN.includes(validAlign) ? `d-stack--align-${validAlign}` : null;\n}\n\nexport function getDefaultJustifyClass (justify) {\n  const validJustify = _getDefaultValue(justify);\n  return DT_STACK_JUSTIFY.includes(validJustify) ? `d-stack--justify-${validJustify}` : null;\n}"],"names":["_isDefaultDirection","direction","DT_STACK_DIRECTION","_getDefaultValue","value","_getValidDirection","defaultStyle","_getResponsiveClasses","propValue","propName","validValues","classPrefix","DT_STACK_RESPONSIVE_BREAKPOINTS","breakpoint","isValid","className","getDefaultDirectionClass","getResponsiveDirectionClasses","getResponsiveGapClasses","gap","DT_STACK_GAP","getResponsiveAlignClasses","align","DT_STACK_ALIGN","getResponsiveJustifyClasses","justify","DT_STACK_JUSTIFY","getResponsiveClasses","getDefaultGapClass","validGap","getDefaultAlignClass","validAlign","getDefaultJustifyClass","validJustify"],"mappings":"yHAEA,SAASA,EAAqBC,EAAW,CACvC,OAAOA,IAAcC,EAAAA,mBAAmB,OAC1C,CAOA,SAASC,EAAkBC,EAAO,CAChC,OAAI,OAAOA,GAAU,SAAiBA,EAClC,OAAOA,GAAU,UAAYA,IAAU,KAAaA,EAAM,QACvD,IACT,CAEA,SAASC,EAAoBJ,EAAW,CACtC,GAAI,OAAOA,GAAc,SACvB,OAAQD,EAAoBC,CAAS,EAAoC,KAAhCC,EAAAA,mBAAmBD,CAAS,EAChE,GAAI,OAAOA,GAAc,SAAU,CACxC,KAAM,CAAE,QAASK,CAAY,EAAKL,EAElC,OAAQD,EAAoBM,CAAY,EAAuC,KAAnCJ,EAAAA,mBAAmBI,CAAY,CAC7E,KAAS,QAAO,IAClB,CAUA,SAASC,EAAuBC,EAAWC,EAAUC,EAAaC,EAAc,UAAW,CACzF,OAAI,OAAOH,GAAc,UAAYA,IAAc,KAAa,CAAA,EAEzDI,EAAAA,gCAAgC,IAAKC,GAAe,CACzD,MAAMT,EAAQI,EAAUK,CAAU,EAClC,GAAI,CAACT,EAAO,OAAO,KAGnB,MAAMU,EAAU,MAAM,QAAQJ,CAAW,EACrCA,EAAY,SAASN,CAAK,EAC1BA,KAASM,EAGPK,EAAYN,IAAa,GAC3B,GAAGE,CAAW,KAAKE,CAAU,IAAIT,CAAK,GACtC,GAAGO,CAAW,KAAKE,CAAU,IAAIJ,CAAQ,IAAIL,CAAK,GAEtD,OAAOU,EAAUC,EAAY,IAC/B,CAAC,CACH,CAEO,SAASC,EAA0Bf,EAAW,CACnD,OAAOI,EAAmBJ,CAAS,EAC/B,YAAYC,EAAAA,mBAAmBG,EAAmBJ,CAAS,CAAC,CAAC,GAC7D,IACN,CAEA,SAASgB,EAA+BhB,EAAW,CACjD,OAAOM,EAAsBN,EAAW,GAAIC,oBAAkB,CAChE,CAEA,SAASgB,EAAyBC,EAAK,CACrC,OAAOZ,EAAsBY,EAAK,MAAOC,cAAY,CACvD,CAEA,SAASC,EAA2BC,EAAO,CACzC,OAAOf,EAAsBe,EAAO,QAASC,gBAAc,CAC7D,CAEA,SAASC,EAA6BC,EAAS,CAC7C,OAAOlB,EAAsBkB,EAAS,UAAWC,kBAAgB,CACnE,CAEO,SAASC,EAAsB1B,EAAWkB,EAAKG,EAAOG,EAAS,CACpE,MAAO,CACL,GAAGR,EAA8BhB,CAAS,EAC1C,GAAGiB,EAAwBC,CAAG,EAC9B,GAAGE,EAA0BC,CAAK,EAClC,GAAGE,EAA4BC,CAAO,CAC1C,CACA,CAEO,SAASG,EAAoBT,EAAK,CACvC,MAAMU,EAAW1B,EAAiBgB,CAAG,EACrC,OAAOC,EAAAA,aAAa,SAASS,CAAQ,EAAI,gBAAgBA,CAAQ,GAAK,IACxE,CAEO,SAASC,EAAsBR,EAAO,CAC3C,MAAMS,EAAa5B,EAAiBmB,CAAK,EACzC,OAAOC,EAAAA,eAAe,SAASQ,CAAU,EAAI,kBAAkBA,CAAU,GAAK,IAChF,CAEO,SAASC,EAAwBP,EAAS,CAC/C,MAAMQ,EAAe9B,EAAiBsB,CAAO,EAC7C,OAAOC,EAAAA,iBAAiB,SAASO,CAAY,EAAI,oBAAoBA,CAAY,GAAK,IACxF"}
+{"version":3,"file":"utils.cjs","sources":["../../../components/stack/utils.js"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\n/**\n * Generic helper to extract default value from string or object props\n * @param {string|Object} value - The prop value\n * @returns {string|null} The default value or null\n */\nfunction _getDefaultValue (value) {\n  if (typeof value === 'string') return value;\n  if (typeof value === 'object' && value !== null) return value.default;\n  return null;\n}\n\nfunction _getValidDirection (direction) {\n  if (typeof direction === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (typeof direction === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\n/**\n * Generic helper to generate responsive classes for any prop\n * @param {Object} propValue - The prop value object with breakpoint keys\n * @param {string} propName - The name of the prop (e.g., 'gap', 'align')\n * @param {Array|Object} validValues - Valid values (array or object for direction)\n * @param {string} classPrefix - CSS class prefix (default: 'd-stack')\n * @returns {Array} Array of CSS class names\n */\nfunction _getResponsiveClasses (propValue, propName, validValues, classPrefix = 'd-stack') {\n  if (typeof propValue !== 'object' || propValue === null) return [];\n\n  return DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n    const value = propValue[breakpoint];\n    if (!value) return null;\n\n    // Handle both array (gap, align, justify) and object (direction) validValues\n    const isValid = Array.isArray(validValues)\n      ? validValues.includes(value)\n      : value in validValues;\n\n    // For direction, we don't need the prop name in the class\n    const className = propName === ''\n      ? `${classPrefix}--${breakpoint}-${value}`\n      : `${classPrefix}--${breakpoint}-${propName}-${value}`;\n\n    return isValid ? className : null;\n  });\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nfunction getResponsiveDirectionClasses (direction) {\n  return _getResponsiveClasses(direction, '', DT_STACK_DIRECTION);\n}\n\nfunction getResponsiveGapClasses (gap) {\n  return _getResponsiveClasses(gap, 'gap', DT_STACK_GAP);\n}\n\nfunction getResponsiveAlignClasses (align) {\n  return _getResponsiveClasses(align, 'align', DT_STACK_ALIGN);\n}\n\nfunction getResponsiveJustifyClasses (justify) {\n  if (typeof justify !== 'object' || justify === null) return [];\n\n  return DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n    const value = justify[breakpoint];\n    if (!value) return null;\n\n    const isValid = DT_STACK_JUSTIFY.includes(value);\n    const normalizedValue = _normalizeJustifyForClass(value);\n\n    return isValid ? `d-stack--${breakpoint}-justify-${normalizedValue}` : null;\n  });\n}\n\nexport function getResponsiveClasses (direction, gap, align, justify) {\n  return [\n    ...getResponsiveDirectionClasses(direction),\n    ...getResponsiveGapClasses(gap),\n    ...getResponsiveAlignClasses(align),\n    ...getResponsiveJustifyClasses(justify),\n  ];\n}\n\nexport function getDefaultGapClass (gap) {\n  const validGap = _getDefaultValue(gap);\n  return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;\n}\n\nexport function getDefaultAlignClass (align) {\n  const validAlign = _getDefaultValue(align);\n  return DT_STACK_ALIGN.includes(validAlign) ? `d-stack--align-${validAlign}` : null;\n}\n\n/**\n * Normalizes justify value to CSS class suffix.\n * Maps CSS-aligned values (space-around, space-between, space-evenly) to shorthand\n * (around, between, evenly) for CSS class generation.\n * @param {string} value - The justify value\n * @returns {string} The normalized value for CSS class\n */\nfunction _normalizeJustifyForClass (value) {\n  const normalizeMap = {\n    'space-around': 'around',\n    'space-between': 'between',\n    'space-evenly': 'evenly',\n  };\n  return normalizeMap[value] || value;\n}\n\nexport function getDefaultJustifyClass (justify) {\n  const validJustify = _getDefaultValue(justify);\n  const normalizedJustify = _normalizeJustifyForClass(validJustify);\n  return DT_STACK_JUSTIFY.includes(validJustify) ? `d-stack--justify-${normalizedJustify}` : null;\n}"],"names":["_isDefaultDirection","direction","DT_STACK_DIRECTION","_getDefaultValue","value","_getValidDirection","defaultStyle","_getResponsiveClasses","propValue","propName","validValues","classPrefix","DT_STACK_RESPONSIVE_BREAKPOINTS","breakpoint","isValid","className","getDefaultDirectionClass","getResponsiveDirectionClasses","getResponsiveGapClasses","gap","DT_STACK_GAP","getResponsiveAlignClasses","align","DT_STACK_ALIGN","getResponsiveJustifyClasses","justify","DT_STACK_JUSTIFY","normalizedValue","_normalizeJustifyForClass","getResponsiveClasses","getDefaultGapClass","validGap","getDefaultAlignClass","validAlign","getDefaultJustifyClass","validJustify","normalizedJustify"],"mappings":"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"}

package/dist/lib/stack/utils.js

@@ -1,67 +1,79 @@
-import { DT_STACK_DIRECTION as u, DT_STACK_GAP as a, DT_STACK_ALIGN as g, DT_STACK_JUSTIFY as C, DT_STACK_RESPONSIVE_BREAKPOINTS as y } from "./stack-constants.js";
-function c(t) {
-  return t === u.default;
+import { DT_STACK_DIRECTION as r, DT_STACK_GAP as f, DT_STACK_ALIGN as g, DT_STACK_JUSTIFY as d, DT_STACK_RESPONSIVE_BREAKPOINTS as p } from "./stack-constants.js";
+function o(n) {
+  return n === r.default;
 }
-function f(t) {
-  return typeof t == "string" ? t : typeof t == "object" && t !== null ? t.default : null;
+function i(n) {
+  return typeof n == "string" ? n : typeof n == "object" && n !== null ? n.default : null;
 }
-function o(t) {
-  if (typeof t == "string")
-    return c(t) ? null : u[t];
-  if (typeof t == "object") {
-    const { default: n } = t;
-    return c(n) ? null : u[n];
+function c(n) {
+  if (typeof n == "string")
+    return o(n) ? null : r[n];
+  if (typeof n == "object") {
+    const { default: t } = n;
+    return o(t) ? null : r[t];
   } else
     return null;
 }
-function i(t, n, e, l = "d-stack") {
-  return typeof t != "object" || t === null ? [] : y.map((r) => {
-    const s = t[r];
-    if (!s) return null;
-    const D = Array.isArray(e) ? e.includes(s) : s in e, _ = n === "" ? `${l}--${r}-${s}` : `${l}--${r}-${n}-${s}`;
-    return D ? _ : null;
+function a(n, t, e, s = "d-stack") {
+  return typeof n != "object" || n === null ? [] : p.map((l) => {
+    const u = n[l];
+    if (!u) return null;
+    const y = Array.isArray(e) ? e.includes(u) : u in e, D = t === "" ? `${s}--${l}-${u}` : `${s}--${l}-${t}-${u}`;
+    return y ? D : null;
   });
 }
-function S(t) {
-  return o(t) ? `d-stack--${u[o(t)]}` : null;
+function m(n) {
+  return c(n) ? `d-stack--${r[c(n)]}` : null;
 }
-function A(t) {
-  return i(t, "", u);
+function _(n) {
+  return a(n, "", r);
 }
-function T(t) {
-  return i(t, "gap", a);
+function A(n) {
+  return a(n, "gap", f);
 }
-function d(t) {
-  return i(t, "align", g);
+function T(n) {
+  return a(n, "align", g);
 }
-function p(t) {
-  return i(t, "justify", C);
+function $(n) {
+  return typeof n != "object" || n === null ? [] : p.map((t) => {
+    const e = n[t];
+    if (!e) return null;
+    const s = d.includes(e), l = C(e);
+    return s ? `d-stack--${t}-justify-${l}` : null;
+  });
 }
-function R(t, n, e, l) {
+function R(n, t, e, s) {
   return [
+    ..._(n),
     ...A(t),
-    ...T(n),
-    ...d(e),
-    ...p(l)
+    ...T(e),
+    ...$(s)
   ];
 }
-function I(t) {
-  const n = f(t);
-  return a.includes(n) ? `d-stack--gap-${n}` : null;
+function v(n) {
+  const t = i(n);
+  return f.includes(t) ? `d-stack--gap-${t}` : null;
+}
+function I(n) {
+  const t = i(n);
+  return g.includes(t) ? `d-stack--align-${t}` : null;
 }
-function K(t) {
-  const n = f(t);
-  return g.includes(n) ? `d-stack--align-${n}` : null;
+function C(n) {
+  return {
+    "space-around": "around",
+    "space-between": "between",
+    "space-evenly": "evenly"
+  }[n] || n;
 }
-function j(t) {
-  const n = f(t);
-  return C.includes(n) ? `d-stack--justify-${n}` : null;
+function J(n) {
+  const t = i(n), e = C(t);
+  return d.includes(t) ? `d-stack--justify-${e}` : null;
 }
 export {
-  K as getDefaultAlignClass,
-  S as getDefaultDirectionClass,
-  I as getDefaultGapClass,
-  j as getDefaultJustifyClass,
+  I as getDefaultAlignClass,
+  m as getDefaultDirectionClass,
+  v as getDefaultGapClass,
+  J as getDefaultJustifyClass,
   R as getResponsiveClasses
 };
 //# sourceMappingURL=utils.js.map

package/dist/lib/stack/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../components/stack/utils.js"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\n/**\n * Generic helper to extract default value from string or object props\n * @param {string|Object} value - The prop value\n * @returns {string|null} The default value or null\n */\nfunction _getDefaultValue (value) {\n  if (typeof value === 'string') return value;\n  if (typeof value === 'object' && value !== null) return value.default;\n  return null;\n}\n\nfunction _getValidDirection (direction) {\n  if (typeof direction === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (typeof direction === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\n/**\n * Generic helper to generate responsive classes for any prop\n * @param {Object} propValue - The prop value object with breakpoint keys\n * @param {string} propName - The name of the prop (e.g., 'gap', 'align')\n * @param {Array|Object} validValues - Valid values (array or object for direction)\n * @param {string} classPrefix - CSS class prefix (default: 'd-stack')\n * @returns {Array} Array of CSS class names\n */\nfunction _getResponsiveClasses (propValue, propName, validValues, classPrefix = 'd-stack') {\n  if (typeof propValue !== 'object' || propValue === null) return [];\n\n  return DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n    const value = propValue[breakpoint];\n    if (!value) return null;\n\n    // Handle both array (gap, align, justify) and object (direction) validValues\n    const isValid = Array.isArray(validValues)\n      ? validValues.includes(value)\n      : value in validValues;\n\n    // For direction, we don't need the prop name in the class\n    const className = propName === ''\n      ? `${classPrefix}--${breakpoint}-${value}`\n      : `${classPrefix}--${breakpoint}-${propName}-${value}`;\n\n    return isValid ? className : null;\n  });\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nfunction getResponsiveDirectionClasses (direction) {\n  return _getResponsiveClasses(direction, '', DT_STACK_DIRECTION);\n}\n\nfunction getResponsiveGapClasses (gap) {\n  return _getResponsiveClasses(gap, 'gap', DT_STACK_GAP);\n}\n\nfunction getResponsiveAlignClasses (align) {\n  return _getResponsiveClasses(align, 'align', DT_STACK_ALIGN);\n}\n\nfunction getResponsiveJustifyClasses (justify) {\n  return _getResponsiveClasses(justify, 'justify', DT_STACK_JUSTIFY);\n}\n\nexport function getResponsiveClasses (direction, gap, align, justify) {\n  return [\n    ...getResponsiveDirectionClasses(direction),\n    ...getResponsiveGapClasses(gap),\n    ...getResponsiveAlignClasses(align),\n    ...getResponsiveJustifyClasses(justify),\n  ];\n}\n\nexport function getDefaultGapClass (gap) {\n  const validGap = _getDefaultValue(gap);\n  return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;\n}\n\nexport function getDefaultAlignClass (align) {\n  const validAlign = _getDefaultValue(align);\n  return DT_STACK_ALIGN.includes(validAlign) ? `d-stack--align-${validAlign}` : null;\n}\n\nexport function getDefaultJustifyClass (justify) {\n  const validJustify = _getDefaultValue(justify);\n  return DT_STACK_JUSTIFY.includes(validJustify) ? `d-stack--justify-${validJustify}` : null;\n}"],"names":["_isDefaultDirection","direction","DT_STACK_DIRECTION","_getDefaultValue","value","_getValidDirection","defaultStyle","_getResponsiveClasses","propValue","propName","validValues","classPrefix","DT_STACK_RESPONSIVE_BREAKPOINTS","breakpoint","isValid","className","getDefaultDirectionClass","getResponsiveDirectionClasses","getResponsiveGapClasses","gap","DT_STACK_GAP","getResponsiveAlignClasses","align","DT_STACK_ALIGN","getResponsiveJustifyClasses","justify","DT_STACK_JUSTIFY","getResponsiveClasses","getDefaultGapClass","validGap","getDefaultAlignClass","validAlign","getDefaultJustifyClass","validJustify"],"mappings":";AAEA,SAASA,EAAqBC,GAAW;AACvC,SAAOA,MAAcC,EAAmB;AAC1C;AAOA,SAASC,EAAkBC,GAAO;AAChC,SAAI,OAAOA,KAAU,WAAiBA,IAClC,OAAOA,KAAU,YAAYA,MAAU,OAAaA,EAAM,UACvD;AACT;AAEA,SAASC,EAAoBJ,GAAW;AACtC,MAAI,OAAOA,KAAc;AACvB,WAAQD,EAAoBC,CAAS,IAAoC,OAAhCC,EAAmBD,CAAS;AAChE,MAAI,OAAOA,KAAc,UAAU;AACxC,UAAM,EAAE,SAASK,EAAY,IAAKL;AAElC,WAAQD,EAAoBM,CAAY,IAAuC,OAAnCJ,EAAmBI,CAAY;AAAA,EAC7E;AAAS,WAAO;AAClB;AAUA,SAASC,EAAuBC,GAAWC,GAAUC,GAAaC,IAAc,WAAW;AACzF,SAAI,OAAOH,KAAc,YAAYA,MAAc,OAAa,CAAA,IAEzDI,EAAgC,IAAI,CAACC,MAAe;AACzD,UAAMT,IAAQI,EAAUK,CAAU;AAClC,QAAI,CAACT,EAAO,QAAO;AAGnB,UAAMU,IAAU,MAAM,QAAQJ,CAAW,IACrCA,EAAY,SAASN,CAAK,IAC1BA,KAASM,GAGPK,IAAYN,MAAa,KAC3B,GAAGE,CAAW,KAAKE,CAAU,IAAIT,CAAK,KACtC,GAAGO,CAAW,KAAKE,CAAU,IAAIJ,CAAQ,IAAIL,CAAK;AAEtD,WAAOU,IAAUC,IAAY;AAAA,EAC/B,CAAC;AACH;AAEO,SAASC,EAA0Bf,GAAW;AACnD,SAAOI,EAAmBJ,CAAS,IAC/B,YAAYC,EAAmBG,EAAmBJ,CAAS,CAAC,CAAC,KAC7D;AACN;AAEA,SAASgB,EAA+BhB,GAAW;AACjD,SAAOM,EAAsBN,GAAW,IAAIC,CAAkB;AAChE;AAEA,SAASgB,EAAyBC,GAAK;AACrC,SAAOZ,EAAsBY,GAAK,OAAOC,CAAY;AACvD;AAEA,SAASC,EAA2BC,GAAO;AACzC,SAAOf,EAAsBe,GAAO,SAASC,CAAc;AAC7D;AAEA,SAASC,EAA6BC,GAAS;AAC7C,SAAOlB,EAAsBkB,GAAS,WAAWC,CAAgB;AACnE;AAEO,SAASC,EAAsB1B,GAAWkB,GAAKG,GAAOG,GAAS;AACpE,SAAO;AAAA,IACL,GAAGR,EAA8BhB,CAAS;AAAA,IAC1C,GAAGiB,EAAwBC,CAAG;AAAA,IAC9B,GAAGE,EAA0BC,CAAK;AAAA,IAClC,GAAGE,EAA4BC,CAAO;AAAA,EAC1C;AACA;AAEO,SAASG,EAAoBT,GAAK;AACvC,QAAMU,IAAW1B,EAAiBgB,CAAG;AACrC,SAAOC,EAAa,SAASS,CAAQ,IAAI,gBAAgBA,CAAQ,KAAK;AACxE;AAEO,SAASC,EAAsBR,GAAO;AAC3C,QAAMS,IAAa5B,EAAiBmB,CAAK;AACzC,SAAOC,EAAe,SAASQ,CAAU,IAAI,kBAAkBA,CAAU,KAAK;AAChF;AAEO,SAASC,EAAwBP,GAAS;AAC/C,QAAMQ,IAAe9B,EAAiBsB,CAAO;AAC7C,SAAOC,EAAiB,SAASO,CAAY,IAAI,oBAAoBA,CAAY,KAAK;AACxF;"}
+{"version":3,"file":"utils.js","sources":["../../../components/stack/utils.js"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\n/**\n * Generic helper to extract default value from string or object props\n * @param {string|Object} value - The prop value\n * @returns {string|null} The default value or null\n */\nfunction _getDefaultValue (value) {\n  if (typeof value === 'string') return value;\n  if (typeof value === 'object' && value !== null) return value.default;\n  return null;\n}\n\nfunction _getValidDirection (direction) {\n  if (typeof direction === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (typeof direction === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\n/**\n * Generic helper to generate responsive classes for any prop\n * @param {Object} propValue - The prop value object with breakpoint keys\n * @param {string} propName - The name of the prop (e.g., 'gap', 'align')\n * @param {Array|Object} validValues - Valid values (array or object for direction)\n * @param {string} classPrefix - CSS class prefix (default: 'd-stack')\n * @returns {Array} Array of CSS class names\n */\nfunction _getResponsiveClasses (propValue, propName, validValues, classPrefix = 'd-stack') {\n  if (typeof propValue !== 'object' || propValue === null) return [];\n\n  return DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n    const value = propValue[breakpoint];\n    if (!value) return null;\n\n    // Handle both array (gap, align, justify) and object (direction) validValues\n    const isValid = Array.isArray(validValues)\n      ? validValues.includes(value)\n      : value in validValues;\n\n    // For direction, we don't need the prop name in the class\n    const className = propName === ''\n      ? `${classPrefix}--${breakpoint}-${value}`\n      : `${classPrefix}--${breakpoint}-${propName}-${value}`;\n\n    return isValid ? className : null;\n  });\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nfunction getResponsiveDirectionClasses (direction) {\n  return _getResponsiveClasses(direction, '', DT_STACK_DIRECTION);\n}\n\nfunction getResponsiveGapClasses (gap) {\n  return _getResponsiveClasses(gap, 'gap', DT_STACK_GAP);\n}\n\nfunction getResponsiveAlignClasses (align) {\n  return _getResponsiveClasses(align, 'align', DT_STACK_ALIGN);\n}\n\nfunction getResponsiveJustifyClasses (justify) {\n  if (typeof justify !== 'object' || justify === null) return [];\n\n  return DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n    const value = justify[breakpoint];\n    if (!value) return null;\n\n    const isValid = DT_STACK_JUSTIFY.includes(value);\n    const normalizedValue = _normalizeJustifyForClass(value);\n\n    return isValid ? `d-stack--${breakpoint}-justify-${normalizedValue}` : null;\n  });\n}\n\nexport function getResponsiveClasses (direction, gap, align, justify) {\n  return [\n    ...getResponsiveDirectionClasses(direction),\n    ...getResponsiveGapClasses(gap),\n    ...getResponsiveAlignClasses(align),\n    ...getResponsiveJustifyClasses(justify),\n  ];\n}\n\nexport function getDefaultGapClass (gap) {\n  const validGap = _getDefaultValue(gap);\n  return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;\n}\n\nexport function getDefaultAlignClass (align) {\n  const validAlign = _getDefaultValue(align);\n  return DT_STACK_ALIGN.includes(validAlign) ? `d-stack--align-${validAlign}` : null;\n}\n\n/**\n * Normalizes justify value to CSS class suffix.\n * Maps CSS-aligned values (space-around, space-between, space-evenly) to shorthand\n * (around, between, evenly) for CSS class generation.\n * @param {string} value - The justify value\n * @returns {string} The normalized value for CSS class\n */\nfunction _normalizeJustifyForClass (value) {\n  const normalizeMap = {\n    'space-around': 'around',\n    'space-between': 'between',\n    'space-evenly': 'evenly',\n  };\n  return normalizeMap[value] || value;\n}\n\nexport function getDefaultJustifyClass (justify) {\n  const validJustify = _getDefaultValue(justify);\n  const normalizedJustify = _normalizeJustifyForClass(validJustify);\n  return DT_STACK_JUSTIFY.includes(validJustify) ? `d-stack--justify-${normalizedJustify}` : null;\n}"],"names":["_isDefaultDirection","direction","DT_STACK_DIRECTION","_getDefaultValue","value","_getValidDirection","defaultStyle","_getResponsiveClasses","propValue","propName","validValues","classPrefix","DT_STACK_RESPONSIVE_BREAKPOINTS","breakpoint","isValid","className","getDefaultDirectionClass","getResponsiveDirectionClasses","getResponsiveGapClasses","gap","DT_STACK_GAP","getResponsiveAlignClasses","align","DT_STACK_ALIGN","getResponsiveJustifyClasses","justify","DT_STACK_JUSTIFY","normalizedValue","_normalizeJustifyForClass","getResponsiveClasses","getDefaultGapClass","validGap","getDefaultAlignClass","validAlign","getDefaultJustifyClass","validJustify","normalizedJustify"],"mappings":"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"}

package/dist/lib/tab/tab-group.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("./tabs-constants.cjs"),a=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),r={name:"DtTabGroup",provide(){return{groupContext:this.provideObj,setFocus:this.setFocus}},props:{label:{type:String,default:""},selected:{type:String,default:""},disabled:{type:Boolean,default:!1},inverted:{type:Boolean,default:!1},borderless:{type:Boolean,default:!1},size:{type:String,default:"default",validate(t){return i.TAB_LIST_SIZES.includes(t)}},tabListClass:{type:[String,Array,Object],default:""},tabListChildProps:{type:Object,default:()=>({})}},emits:["change","before-change"],data(){return{provideObj:{selected:"",disabled:!1},focusId:null,tabs:[],TAB_LIST_SIZE_MODIFIERS:i.TAB_LIST_SIZE_MODIFIERS,TAB_LIST_KIND_MODIFIERS:i.TAB_LIST_KIND_MODIFIERS,TAB_LIST_IMPORTANCE_MODIFIERS:i.TAB_LIST_IMPORTANCE_MODIFIERS}},watch:{disabled:{immediate:!0,handler(){this.provideObj.disabled=this.disabled}},selected:{immediate:!0,handler(){this.provideObj.selected=this.selected}}},mounted(){this.updateSelected()},beforeUpdate(){this.updateSelected()},methods:{updateSelected(){this.provideObj.selected||(this.provideObj.selected=this.selected),this.tabs=this.getTabChildren()},setFocus(t){this.focusId=t},getTabChildren(){return Array.from(this.$el.querySelectorAll(".d-tab")).map(t=>{var e,n;return{context:t,panelId:(e=t.getAttribute("aria-controls"))==null?void 0:e.replace("dt-panel-",""),tabId:(n=t.getAttribute("id"))==null?void 0:n.replace("dt-tab-",""),isSelected:t.getAttribute("aria-selected")==="true"}})},onChange(){this.$emit("change",{...this.provideObj})},tabLeft(){const t=this.getFocusedTabIndex();if(t===-1)return;const e=t-1<0?this.tabs.length-1:t-1;this.selectFocusOnTab(e)},tabRight(){const t=this.getFocusedTabIndex();if(t===-1)return;const e=t+1>this.tabs.length-1?0:t+1;this.selectFocusOnTab(e)},selectFocusOnTab(t){const{context:e}=this.tabs[t];e.focus()},selectTab(t){if(this.isSameTabClicked()||(this.$emit("before-change",t),t.defaultPrevented))return;const e=this.getFocusedTabIndex();this.selectTabByIndex(e),this.onChange()},selectTabByIndex(t){const{context:e,panelId:n}=this.tabs[t];this.provideObj.selected=n,e.focus()},getFocusedTabIndex(){const t=this.tabs.findIndex(e=>this.focusId?e.tabId===`${this.focusId}`:e.isSelected);return t===-1?0:t},onHomeButton(){var t,e;this.tabs.length!==0&&((e=(t=this.tabs[0])==null?void 0:t.context)==null||e.focus())},onEndButton(){var t,e;this.tabs.length!==0&&((e=(t=this.tabs[this.tabs.length-1])==null?void 0:t.context)==null||e.focus())},isSameTabClicked(){const t=this.tabs[this.getFocusedTabIndex()];return this.provideObj.selected===t.panelId}}};var d=function(){var e=this,n=e._self._c;return n("div",{attrs:{"data-qa":"dt-tab-group"}},[n("div",e._b({class:["d-tablist",e.TAB_LIST_SIZE_MODIFIERS[e.size],{[e.TAB_LIST_KIND_MODIFIERS.inverted]:e.inverted,[e.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]:e.borderless},e.tabListClass],attrs:{role:"tablist","aria-label":e.label},on:{keyup:[function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"left",37,s.key,["Left","ArrowLeft"])||"button"in s&&s.button!==0?null:e.tabLeft.apply(null,arguments)},function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"right",39,s.key,["Right","ArrowRight"])||"button"in s&&s.button!==2?null:e.tabRight.apply(null,arguments)},function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"enter",13,s.key,"Enter")?null:e.selectTab.apply(null,arguments)},function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"space",32,s.key,[" ","Spacebar"])?null:e.selectTab.apply(null,arguments)}],click:e.selectTab,keydown:[function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"home",void 0,s.key,void 0)?null:e.onHomeButton.apply(null,arguments)},function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"end",void 0,s.key,void 0)?null:e.onEndButton.apply(null,arguments)}]}},"div",e.tabListChildProps,!1),[e._t("tabs")],2),e._t("default")],2)},l=[],u=a.n(r,d,l);const o=u.exports;exports.default=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("./tabs-constants.cjs"),a=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),r={name:"DtTabGroup",provide(){return{groupContext:this.provideObj,setFocus:this.setFocus}},props:{label:{type:String,default:""},selected:{type:String,default:""},disabled:{type:Boolean,default:!1},inverted:{type:Boolean,default:!1},borderless:{type:Boolean,default:!1},size:{type:String,default:"default",validate(t){return i.TAB_LIST_SIZES.includes(t)}},tabListClass:{type:[String,Array,Object],default:""},tabListChildProps:{type:Object,default:()=>({})}},emits:["change","before-change"],data(){return{provideObj:{selected:"",disabled:!1},focusId:null,tabs:[],TAB_LIST_SIZE_MODIFIERS:i.TAB_LIST_SIZE_MODIFIERS,TAB_LIST_KIND_MODIFIERS:i.TAB_LIST_KIND_MODIFIERS,TAB_LIST_IMPORTANCE_MODIFIERS:i.TAB_LIST_IMPORTANCE_MODIFIERS}},watch:{disabled:{immediate:!0,handler(){this.provideObj.disabled=this.disabled}},selected:{immediate:!0,handler(){this.provideObj.selected=this.selected}}},mounted(){this.updateSelected()},updated(){this.updateSelected()},methods:{updateSelected(){this.provideObj.selected||(this.provideObj.selected=this.selected),this.tabs=this.getTabChildren()},setFocus(t){this.focusId=t},getTabChildren(){return Array.from(this.$el.querySelectorAll(".d-tab")).map(t=>{var e,n;return{context:t,panelId:(e=t.getAttribute("aria-controls"))==null?void 0:e.replace("dt-panel-",""),tabId:(n=t.getAttribute("id"))==null?void 0:n.replace("dt-tab-",""),isSelected:t.getAttribute("aria-selected")==="true"}})},onChange(){this.$emit("change",{...this.provideObj})},tabLeft(){const t=this.getFocusedTabIndex();if(t===-1)return;const e=t-1<0?this.tabs.length-1:t-1;this.selectFocusOnTab(e)},tabRight(){const t=this.getFocusedTabIndex();if(t===-1)return;const e=t+1>this.tabs.length-1?0:t+1;this.selectFocusOnTab(e)},selectFocusOnTab(t){const{context:e}=this.tabs[t];e.focus()},selectTab(t){if(this.isSameTabClicked()||(this.$emit("before-change",t),t.defaultPrevented))return;const e=this.getFocusedTabIndex();this.selectTabByIndex(e),this.onChange()},selectTabByIndex(t){const{context:e,panelId:n}=this.tabs[t];this.provideObj.selected=n,e.focus()},getFocusedTabIndex(){const t=this.tabs.findIndex(e=>this.focusId?e.tabId===`${this.focusId}`:e.isSelected);return t===-1?0:t},onHomeButton(){var t,e;this.tabs.length!==0&&((e=(t=this.tabs[0])==null?void 0:t.context)==null||e.focus())},onEndButton(){var t,e;this.tabs.length!==0&&((e=(t=this.tabs[this.tabs.length-1])==null?void 0:t.context)==null||e.focus())},isSameTabClicked(){const t=this.tabs[this.getFocusedTabIndex()];return this.provideObj.selected===t.panelId}}};var d=function(){var e=this,n=e._self._c;return n("div",{attrs:{"data-qa":"dt-tab-group"}},[n("div",e._b({class:["d-tablist",e.TAB_LIST_SIZE_MODIFIERS[e.size],{[e.TAB_LIST_KIND_MODIFIERS.inverted]:e.inverted,[e.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]:e.borderless},e.tabListClass],attrs:{role:"tablist","aria-label":e.label},on:{keyup:[function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"left",37,s.key,["Left","ArrowLeft"])||"button"in s&&s.button!==0?null:e.tabLeft.apply(null,arguments)},function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"right",39,s.key,["Right","ArrowRight"])||"button"in s&&s.button!==2?null:e.tabRight.apply(null,arguments)},function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"enter",13,s.key,"Enter")?null:e.selectTab.apply(null,arguments)},function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"space",32,s.key,[" ","Spacebar"])?null:e.selectTab.apply(null,arguments)}],click:e.selectTab,keydown:[function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"home",void 0,s.key,void 0)?null:e.onHomeButton.apply(null,arguments)},function(s){return!s.type.indexOf("key")&&e._k(s.keyCode,"end",void 0,s.key,void 0)?null:e.onEndButton.apply(null,arguments)}]}},"div",e.tabListChildProps,!1),[e._t("tabs")],2),e._t("default")],2)},l=[],u=a.n(r,d,l);const o=u.exports;exports.default=o;
 //# sourceMappingURL=tab-group.cjs.map

package/dist/lib/tab/tab-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tab-group.cjs","sources":["../../../components/tab/tab_group.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-tab-group\"\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n    <div\n      :class=\"[\n        'd-tablist',\n        TAB_LIST_SIZE_MODIFIERS[size],\n        {\n          [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n          [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n        },\n        tabListClass,\n      ]\"\n      v-bind=\"tabListChildProps\"\n      role=\"tablist\"\n      :aria-label=\"label\"\n      @keyup.left=\"tabLeft\"\n      @keyup.right=\"tabRight\"\n      @keyup.enter=\"selectTab\"\n      @keyup.space=\"selectTab\"\n      @click=\"selectTab\"\n      @keydown.home=\"onHomeButton\"\n      @keydown.end=\"onEndButton\"\n    >\n      <!-- @slot Slot for Tabs -->\n      <slot name=\"tabs\" />\n    </div>\n    <!-- @slot Default slot for Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport {\n  TAB_LIST_SIZES,\n  TAB_LIST_KIND_MODIFIERS,\n  TAB_LIST_IMPORTANCE_MODIFIERS,\n  TAB_LIST_SIZE_MODIFIERS,\n} from './tabs_constants';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  name: 'DtTabGroup',\n\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      setFocus: this.setFocus,\n    };\n  },\n\n  props: {\n    /**\n     * Identifies the tab group\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The id of the selected tab panel which should be displayed\n     */\n    selected: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * If true, disables the tab group\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies inverted styles to the tab group\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies borderless styles to the tab group\n     * @values true, false\n     */\n    borderless: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If provided, applies size styles to the tab group\n     * @values default, sm\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validate (size) {\n        return TAB_LIST_SIZES.includes(size);\n      },\n    },\n\n    /**\n     * Pass through classes, used to customize the tab list\n     */\n    tabListClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through props, used to customize the tab list\n     */\n    tabListChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Change tab event with the arguments: selected id of the current tab and disabled value\n     *\n     * @event change\n     * @type {Object}\n     */\n    'change',\n\n    /**\n     * Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.\n     *\n     * @event before-change\n     * @type {Event}\n     */\n    'before-change',\n  ],\n\n  data () {\n    return {\n      provideObj: {\n        selected: '', // the currently displayed tab id\n        disabled: false, // disable group\n      },\n\n      focusId: null,\n      tabs: [],\n      TAB_LIST_SIZE_MODIFIERS,\n      TAB_LIST_KIND_MODIFIERS,\n      TAB_LIST_IMPORTANCE_MODIFIERS,\n    };\n  },\n\n  watch: {\n    disabled: {\n      immediate: true,\n      handler () {\n        this.provideObj.disabled = this.disabled;\n      },\n    },\n\n    selected: {\n      immediate: true,\n      handler () {\n        this.provideObj.selected = this.selected;\n      },\n    },\n  },\n\n  mounted () {\n    this.updateSelected();\n  },\n\n  beforeUpdate () {\n    this.updateSelected();\n  },\n\n  methods: {\n    updateSelected () {\n      /**\n       * Prevent override tab selected by default\n       */\n      if (!this.provideObj.selected) {\n        this.provideObj.selected = this.selected;\n      }\n      this.tabs = this.getTabChildren();\n    },\n\n    setFocus (focusId) {\n      this.focusId = focusId;\n    },\n\n    getTabChildren () {\n      return Array.from(this.$el.querySelectorAll('.d-tab'))\n        .map(el => {\n          return ({\n            context: el,\n            panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n            tabId: el.getAttribute('id')?.replace('dt-tab-', ''),\n            isSelected: el.getAttribute('aria-selected') === 'true',\n          });\n        });\n    },\n\n    onChange () {\n      this.$emit('change', { ...this.provideObj });\n    },\n\n    tabLeft () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const indexElement = index - 1 < 0 ? this.tabs.length - 1 : index - 1;\n      this.selectFocusOnTab(indexElement);\n    },\n\n    tabRight () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const indexElement = index + 1 > this.tabs.length - 1 ? 0 : index + 1;\n      this.selectFocusOnTab(indexElement);\n    },\n\n    selectFocusOnTab (index) {\n      const { context } = this.tabs[index];\n      context.focus();\n    },\n\n    selectTab (event) {\n      if (this.isSameTabClicked()) return;\n\n      this.$emit('before-change', event);\n      if (event.defaultPrevented) return;\n\n      const index = this.getFocusedTabIndex();\n\n      this.selectTabByIndex(index);\n      this.onChange();\n    },\n\n    selectTabByIndex (index) {\n      const { context, panelId } = this.tabs[index];\n      this.provideObj.selected = panelId;\n      context.focus();\n    },\n\n    getFocusedTabIndex () {\n      // Hot fix https://github.com/dialpad/dialtone/pull/849\n      // The main issue is that this.tabs is not being updated at the time this is being triggered.\n\n      const index = this.tabs.findIndex((context) =>\n        this.focusId ? context.tabId === `${this.focusId}` : context.isSelected,\n      );\n\n      return index === -1 ? 0 : index;\n    },\n\n    onHomeButton () {\n      if (this.tabs.length === 0) return;\n      this.tabs[0]?.context?.focus();\n    },\n\n    onEndButton () {\n      if (this.tabs.length === 0) return;\n      this.tabs[this.tabs.length - 1]?.context?.focus();\n    },\n\n    isSameTabClicked () {\n      const tab = this.tabs[this.getFocusedTabIndex()];\n      return this.provideObj.selected === tab.panelId;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","size","TAB_LIST_SIZES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS","focusId","el","_a","_b","index","indexElement","context","event","panelId","tab"],"mappings":"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"}
+{"version":3,"file":"tab-group.cjs","sources":["../../../components/tab/tab_group.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-tab-group\"\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n    <div\n      :class=\"[\n        'd-tablist',\n        TAB_LIST_SIZE_MODIFIERS[size],\n        {\n          [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n          [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n        },\n        tabListClass,\n      ]\"\n      v-bind=\"tabListChildProps\"\n      role=\"tablist\"\n      :aria-label=\"label\"\n      @keyup.left=\"tabLeft\"\n      @keyup.right=\"tabRight\"\n      @keyup.enter=\"selectTab\"\n      @keyup.space=\"selectTab\"\n      @click=\"selectTab\"\n      @keydown.home=\"onHomeButton\"\n      @keydown.end=\"onEndButton\"\n    >\n      <!-- @slot Slot for Tabs -->\n      <slot name=\"tabs\" />\n    </div>\n    <!-- @slot Default slot for Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport {\n  TAB_LIST_SIZES,\n  TAB_LIST_KIND_MODIFIERS,\n  TAB_LIST_IMPORTANCE_MODIFIERS,\n  TAB_LIST_SIZE_MODIFIERS,\n} from './tabs_constants';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  name: 'DtTabGroup',\n\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      setFocus: this.setFocus,\n    };\n  },\n\n  props: {\n    /**\n     * Identifies the tab group\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The id of the selected tab panel which should be displayed\n     */\n    selected: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * If true, disables the tab group\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies inverted styles to the tab group\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies borderless styles to the tab group\n     * @values true, false\n     */\n    borderless: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If provided, applies size styles to the tab group\n     * @values default, sm\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validate (size) {\n        return TAB_LIST_SIZES.includes(size);\n      },\n    },\n\n    /**\n     * Pass through classes, used to customize the tab list\n     */\n    tabListClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through props, used to customize the tab list\n     */\n    tabListChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Change tab event with the arguments: selected id of the current tab and disabled value\n     *\n     * @event change\n     * @type {Object}\n     */\n    'change',\n\n    /**\n     * Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.\n     *\n     * @event before-change\n     * @type {Event}\n     */\n    'before-change',\n  ],\n\n  data () {\n    return {\n      provideObj: {\n        selected: '', // the currently displayed tab id\n        disabled: false, // disable group\n      },\n\n      focusId: null,\n      tabs: [],\n      TAB_LIST_SIZE_MODIFIERS,\n      TAB_LIST_KIND_MODIFIERS,\n      TAB_LIST_IMPORTANCE_MODIFIERS,\n    };\n  },\n\n  watch: {\n    disabled: {\n      immediate: true,\n      handler () {\n        this.provideObj.disabled = this.disabled;\n      },\n    },\n\n    selected: {\n      immediate: true,\n      handler () {\n        this.provideObj.selected = this.selected;\n      },\n    },\n  },\n\n  mounted () {\n    this.updateSelected();\n  },\n\n  updated () {\n    this.updateSelected();\n  },\n\n  methods: {\n    updateSelected () {\n      /**\n       * Prevent override tab selected by default\n       */\n      if (!this.provideObj.selected) {\n        this.provideObj.selected = this.selected;\n      }\n      this.tabs = this.getTabChildren();\n    },\n\n    setFocus (focusId) {\n      this.focusId = focusId;\n    },\n\n    getTabChildren () {\n      return Array.from(this.$el.querySelectorAll('.d-tab'))\n        .map(el => {\n          return ({\n            context: el,\n            panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n            tabId: el.getAttribute('id')?.replace('dt-tab-', ''),\n            isSelected: el.getAttribute('aria-selected') === 'true',\n          });\n        });\n    },\n\n    onChange () {\n      this.$emit('change', { ...this.provideObj });\n    },\n\n    tabLeft () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const indexElement = index - 1 < 0 ? this.tabs.length - 1 : index - 1;\n      this.selectFocusOnTab(indexElement);\n    },\n\n    tabRight () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const indexElement = index + 1 > this.tabs.length - 1 ? 0 : index + 1;\n      this.selectFocusOnTab(indexElement);\n    },\n\n    selectFocusOnTab (index) {\n      const { context } = this.tabs[index];\n      context.focus();\n    },\n\n    selectTab (event) {\n      if (this.isSameTabClicked()) return;\n\n      this.$emit('before-change', event);\n      if (event.defaultPrevented) return;\n\n      const index = this.getFocusedTabIndex();\n\n      this.selectTabByIndex(index);\n      this.onChange();\n    },\n\n    selectTabByIndex (index) {\n      const { context, panelId } = this.tabs[index];\n      this.provideObj.selected = panelId;\n      context.focus();\n    },\n\n    getFocusedTabIndex () {\n      const index = this.tabs.findIndex((context) =>\n        this.focusId ? context.tabId === `${this.focusId}` : context.isSelected,\n      );\n\n      // Safe guard if tab is not found\n      return index === -1 ? 0 : index;\n    },\n\n    onHomeButton () {\n      if (this.tabs.length === 0) return;\n      this.tabs[0]?.context?.focus();\n    },\n\n    onEndButton () {\n      if (this.tabs.length === 0) return;\n      this.tabs[this.tabs.length - 1]?.context?.focus();\n    },\n\n    isSameTabClicked () {\n      const tab = this.tabs[this.getFocusedTabIndex()];\n      return this.provideObj.selected === tab.panelId;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","size","TAB_LIST_SIZES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS","focusId","el","_a","_b","index","indexElement","context","event","panelId","tab"],"mappings":"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"}

package/dist/lib/tab/tab-group.js

@@ -1,6 +1,6 @@
 import { TAB_LIST_IMPORTANCE_MODIFIERS as i, TAB_LIST_KIND_MODIFIERS as a, TAB_LIST_SIZE_MODIFIERS as r, TAB_LIST_SIZES as d } from "./tabs-constants.js";
 import { n as l } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-const o = {
+const u = {
   name: "DtTabGroup",
   provide() {
     return {
@@ -121,7 +121,7 @@ const o = {
   mounted() {
     this.updateSelected();
   },
-  beforeUpdate() {
+  updated() {
     this.updateSelected();
   },
   methods: {
@@ -190,7 +190,7 @@ const o = {
     }
   }
 };
-var u = function() {
+var o = function() {
   var e = this, n = e._self._c;
   return n("div", { attrs: { "data-qa": "dt-tab-group" } }, [n("div", e._b({ class: [
     "d-tablist",
@@ -214,8 +214,8 @@ var u = function() {
     return !s.type.indexOf("key") && e._k(s.keyCode, "end", void 0, s.key, void 0) ? null : e.onEndButton.apply(null, arguments);
   }] } }, "div", e.tabListChildProps, !1), [e._t("tabs")], 2), e._t("default")], 2);
 }, c = [], b = /* @__PURE__ */ l(
-  o,
   u,
+  o,
   c
 );
 const p = b.exports;

package/dist/lib/tab/tab-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-group.js","sources":["../../../components/tab/tab_group.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-tab-group\"\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n    <div\n      :class=\"[\n        'd-tablist',\n        TAB_LIST_SIZE_MODIFIERS[size],\n        {\n          [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n          [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n        },\n        tabListClass,\n      ]\"\n      v-bind=\"tabListChildProps\"\n      role=\"tablist\"\n      :aria-label=\"label\"\n      @keyup.left=\"tabLeft\"\n      @keyup.right=\"tabRight\"\n      @keyup.enter=\"selectTab\"\n      @keyup.space=\"selectTab\"\n      @click=\"selectTab\"\n      @keydown.home=\"onHomeButton\"\n      @keydown.end=\"onEndButton\"\n    >\n      <!-- @slot Slot for Tabs -->\n      <slot name=\"tabs\" />\n    </div>\n    <!-- @slot Default slot for Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport {\n  TAB_LIST_SIZES,\n  TAB_LIST_KIND_MODIFIERS,\n  TAB_LIST_IMPORTANCE_MODIFIERS,\n  TAB_LIST_SIZE_MODIFIERS,\n} from './tabs_constants';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  name: 'DtTabGroup',\n\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      setFocus: this.setFocus,\n    };\n  },\n\n  props: {\n    /**\n     * Identifies the tab group\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The id of the selected tab panel which should be displayed\n     */\n    selected: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * If true, disables the tab group\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies inverted styles to the tab group\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies borderless styles to the tab group\n     * @values true, false\n     */\n    borderless: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If provided, applies size styles to the tab group\n     * @values default, sm\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validate (size) {\n        return TAB_LIST_SIZES.includes(size);\n      },\n    },\n\n    /**\n     * Pass through classes, used to customize the tab list\n     */\n    tabListClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through props, used to customize the tab list\n     */\n    tabListChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Change tab event with the arguments: selected id of the current tab and disabled value\n     *\n     * @event change\n     * @type {Object}\n     */\n    'change',\n\n    /**\n     * Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.\n     *\n     * @event before-change\n     * @type {Event}\n     */\n    'before-change',\n  ],\n\n  data () {\n    return {\n      provideObj: {\n        selected: '', // the currently displayed tab id\n        disabled: false, // disable group\n      },\n\n      focusId: null,\n      tabs: [],\n      TAB_LIST_SIZE_MODIFIERS,\n      TAB_LIST_KIND_MODIFIERS,\n      TAB_LIST_IMPORTANCE_MODIFIERS,\n    };\n  },\n\n  watch: {\n    disabled: {\n      immediate: true,\n      handler () {\n        this.provideObj.disabled = this.disabled;\n      },\n    },\n\n    selected: {\n      immediate: true,\n      handler () {\n        this.provideObj.selected = this.selected;\n      },\n    },\n  },\n\n  mounted () {\n    this.updateSelected();\n  },\n\n  beforeUpdate () {\n    this.updateSelected();\n  },\n\n  methods: {\n    updateSelected () {\n      /**\n       * Prevent override tab selected by default\n       */\n      if (!this.provideObj.selected) {\n        this.provideObj.selected = this.selected;\n      }\n      this.tabs = this.getTabChildren();\n    },\n\n    setFocus (focusId) {\n      this.focusId = focusId;\n    },\n\n    getTabChildren () {\n      return Array.from(this.$el.querySelectorAll('.d-tab'))\n        .map(el => {\n          return ({\n            context: el,\n            panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n            tabId: el.getAttribute('id')?.replace('dt-tab-', ''),\n            isSelected: el.getAttribute('aria-selected') === 'true',\n          });\n        });\n    },\n\n    onChange () {\n      this.$emit('change', { ...this.provideObj });\n    },\n\n    tabLeft () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const indexElement = index - 1 < 0 ? this.tabs.length - 1 : index - 1;\n      this.selectFocusOnTab(indexElement);\n    },\n\n    tabRight () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const indexElement = index + 1 > this.tabs.length - 1 ? 0 : index + 1;\n      this.selectFocusOnTab(indexElement);\n    },\n\n    selectFocusOnTab (index) {\n      const { context } = this.tabs[index];\n      context.focus();\n    },\n\n    selectTab (event) {\n      if (this.isSameTabClicked()) return;\n\n      this.$emit('before-change', event);\n      if (event.defaultPrevented) return;\n\n      const index = this.getFocusedTabIndex();\n\n      this.selectTabByIndex(index);\n      this.onChange();\n    },\n\n    selectTabByIndex (index) {\n      const { context, panelId } = this.tabs[index];\n      this.provideObj.selected = panelId;\n      context.focus();\n    },\n\n    getFocusedTabIndex () {\n      // Hot fix https://github.com/dialpad/dialtone/pull/849\n      // The main issue is that this.tabs is not being updated at the time this is being triggered.\n\n      const index = this.tabs.findIndex((context) =>\n        this.focusId ? context.tabId === `${this.focusId}` : context.isSelected,\n      );\n\n      return index === -1 ? 0 : index;\n    },\n\n    onHomeButton () {\n      if (this.tabs.length === 0) return;\n      this.tabs[0]?.context?.focus();\n    },\n\n    onEndButton () {\n      if (this.tabs.length === 0) return;\n      this.tabs[this.tabs.length - 1]?.context?.focus();\n    },\n\n    isSameTabClicked () {\n      const tab = this.tabs[this.getFocusedTabIndex()];\n      return this.provideObj.selected === tab.panelId;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","size","TAB_LIST_SIZES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS","focusId","el","_a","_b","index","indexElement","context","event","panelId","tab"],"mappings":"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"}
+{"version":3,"file":"tab-group.js","sources":["../../../components/tab/tab_group.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-tab-group\"\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n    <div\n      :class=\"[\n        'd-tablist',\n        TAB_LIST_SIZE_MODIFIERS[size],\n        {\n          [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n          [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n        },\n        tabListClass,\n      ]\"\n      v-bind=\"tabListChildProps\"\n      role=\"tablist\"\n      :aria-label=\"label\"\n      @keyup.left=\"tabLeft\"\n      @keyup.right=\"tabRight\"\n      @keyup.enter=\"selectTab\"\n      @keyup.space=\"selectTab\"\n      @click=\"selectTab\"\n      @keydown.home=\"onHomeButton\"\n      @keydown.end=\"onEndButton\"\n    >\n      <!-- @slot Slot for Tabs -->\n      <slot name=\"tabs\" />\n    </div>\n    <!-- @slot Default slot for Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport {\n  TAB_LIST_SIZES,\n  TAB_LIST_KIND_MODIFIERS,\n  TAB_LIST_IMPORTANCE_MODIFIERS,\n  TAB_LIST_SIZE_MODIFIERS,\n} from './tabs_constants';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  name: 'DtTabGroup',\n\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      setFocus: this.setFocus,\n    };\n  },\n\n  props: {\n    /**\n     * Identifies the tab group\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The id of the selected tab panel which should be displayed\n     */\n    selected: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * If true, disables the tab group\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies inverted styles to the tab group\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies borderless styles to the tab group\n     * @values true, false\n     */\n    borderless: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If provided, applies size styles to the tab group\n     * @values default, sm\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validate (size) {\n        return TAB_LIST_SIZES.includes(size);\n      },\n    },\n\n    /**\n     * Pass through classes, used to customize the tab list\n     */\n    tabListClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through props, used to customize the tab list\n     */\n    tabListChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Change tab event with the arguments: selected id of the current tab and disabled value\n     *\n     * @event change\n     * @type {Object}\n     */\n    'change',\n\n    /**\n     * Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.\n     *\n     * @event before-change\n     * @type {Event}\n     */\n    'before-change',\n  ],\n\n  data () {\n    return {\n      provideObj: {\n        selected: '', // the currently displayed tab id\n        disabled: false, // disable group\n      },\n\n      focusId: null,\n      tabs: [],\n      TAB_LIST_SIZE_MODIFIERS,\n      TAB_LIST_KIND_MODIFIERS,\n      TAB_LIST_IMPORTANCE_MODIFIERS,\n    };\n  },\n\n  watch: {\n    disabled: {\n      immediate: true,\n      handler () {\n        this.provideObj.disabled = this.disabled;\n      },\n    },\n\n    selected: {\n      immediate: true,\n      handler () {\n        this.provideObj.selected = this.selected;\n      },\n    },\n  },\n\n  mounted () {\n    this.updateSelected();\n  },\n\n  updated () {\n    this.updateSelected();\n  },\n\n  methods: {\n    updateSelected () {\n      /**\n       * Prevent override tab selected by default\n       */\n      if (!this.provideObj.selected) {\n        this.provideObj.selected = this.selected;\n      }\n      this.tabs = this.getTabChildren();\n    },\n\n    setFocus (focusId) {\n      this.focusId = focusId;\n    },\n\n    getTabChildren () {\n      return Array.from(this.$el.querySelectorAll('.d-tab'))\n        .map(el => {\n          return ({\n            context: el,\n            panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n            tabId: el.getAttribute('id')?.replace('dt-tab-', ''),\n            isSelected: el.getAttribute('aria-selected') === 'true',\n          });\n        });\n    },\n\n    onChange () {\n      this.$emit('change', { ...this.provideObj });\n    },\n\n    tabLeft () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const indexElement = index - 1 < 0 ? this.tabs.length - 1 : index - 1;\n      this.selectFocusOnTab(indexElement);\n    },\n\n    tabRight () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const indexElement = index + 1 > this.tabs.length - 1 ? 0 : index + 1;\n      this.selectFocusOnTab(indexElement);\n    },\n\n    selectFocusOnTab (index) {\n      const { context } = this.tabs[index];\n      context.focus();\n    },\n\n    selectTab (event) {\n      if (this.isSameTabClicked()) return;\n\n      this.$emit('before-change', event);\n      if (event.defaultPrevented) return;\n\n      const index = this.getFocusedTabIndex();\n\n      this.selectTabByIndex(index);\n      this.onChange();\n    },\n\n    selectTabByIndex (index) {\n      const { context, panelId } = this.tabs[index];\n      this.provideObj.selected = panelId;\n      context.focus();\n    },\n\n    getFocusedTabIndex () {\n      const index = this.tabs.findIndex((context) =>\n        this.focusId ? context.tabId === `${this.focusId}` : context.isSelected,\n      );\n\n      // Safe guard if tab is not found\n      return index === -1 ? 0 : index;\n    },\n\n    onHomeButton () {\n      if (this.tabs.length === 0) return;\n      this.tabs[0]?.context?.focus();\n    },\n\n    onEndButton () {\n      if (this.tabs.length === 0) return;\n      this.tabs[this.tabs.length - 1]?.context?.focus();\n    },\n\n    isSameTabClicked () {\n      const tab = this.tabs[this.getFocusedTabIndex()];\n      return this.provideObj.selected === tab.panelId;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","size","TAB_LIST_SIZES","TAB_LIST_SIZE_MODIFIERS","TAB_LIST_KIND_MODIFIERS","TAB_LIST_IMPORTANCE_MODIFIERS","focusId","el","_a","_b","index","indexElement","context","event","panelId","tab"],"mappings":"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"}

package/dist/localization/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("@dialpad/i18n-vue2"),u=require("./en-US.cjs"),d=require("./zh-CN.cjs"),f=require("./nl-NL.cjs"),g=require("./fr-FR.cjs"),S=require("./de-DE.cjs"),N=require("./it-IT.cjs"),w=require("./ja-JP.cjs"),L=require("./pt-BR.cjs"),R=require("./ru-RU.cjs"),h=require("./es-LA.cjs"),e="dialtone",o={ENGLISH:"en-US",CHINESE:"zh-CN",DUTCH:"nl-NL",FRENCH:"fr-FR",GERMAN:"de-DE",ITALIAN:"it-IT",JAPANESE:"ja-JP",PORTUGUESE:"pt-BR",RUSSIAN:"ru-RU",SPANISH:"es-LA"},n="en-US",s="user-locale";class l{constructor(t=null){if(typeof l.instance=="object")return l.instance;this._locale=t||l.getPreferredLocale();const r=new a.RawBundleSource({resources:a.RawBundleSource.builtResources([["en-US",e,u.default],["zh-CN",e,d.default],["nl-NL",e,f.default],["fr-FR",e,g.default],["de-DE",e,S.default],["it-IT",e,N.default],["ja-JP",e,w.default],["pt-BR",e,L.default],["ru-RU",e,R.default],["es-LA",e,h.default]])});return new a.LocaleManager({bundleSource:r,allowedLocales:Object.values(o),fallbackLocale:n,preferredLocale:this._locale,namespaces:[e]}).install(e),l.instance=this,typeof window<"u"&&(window.onstorage=i=>{i.key===s&&(this.currentLocale=i.newValue)}),this}static getPreferredLocale(){if(typeof window>"u"||!window.localStorage)return n;const t=window.localStorage.getItem(s),r=Object.values(o).find(c=>c.startsWith(navigator.language.slice(0,2)));return t||r||n}static getAllowedLocales(){return o}$t(...t){return a.useI18N(e).$t(...t)}$ta(...t){return a.useI18N(e).$ta(...t)}get currentLocale(){return this._locale}set currentLocale(t){if(t!==this._locale){if(!Object.values(o).includes(t))throw new Error(`Locale ${t} is not allowed, please use one of the following: ${Object.values(o).join(", ")}`);this._locale=t,a.useI18N(e).setI18N({preferredLocale:t},e)}}}exports.DialtoneLocalization=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("@dialpad/i18n-vue2"),u=require("./en-US.cjs"),d=require("./zh-CN.cjs"),f=require("./nl-NL.cjs"),g=require("./fr-FR.cjs"),S=require("./de-DE.cjs"),h=require("./it-IT.cjs"),w=require("./ja-JP.cjs"),L=require("./pt-BR.cjs"),N=require("./ru-RU.cjs"),R=require("./es-LA.cjs"),t="dialtone",o={ENGLISH:"en-US",CHINESE:"zh-CN",DUTCH:"nl-NL",FRENCH:"fr-FR",GERMAN:"de-DE",ITALIAN:"it-IT",JAPANESE:"ja-JP",PORTUGUESE:"pt-BR",RUSSIAN:"ru-RU",SPANISH:"es-LA"},i="en-US",s="user-locale";class a{constructor(e=null){if(typeof a.instance=="object")return a.instance;this._locale=e||a.getPreferredLocale();const l=new n.RawBundleSource({resources:n.RawBundleSource.builtResources([["en-US",t,u.default],["zh-CN",t,d.default],["nl-NL",t,f.default],["fr-FR",t,g.default],["de-DE",t,S.default],["it-IT",t,h.default],["ja-JP",t,w.default],["pt-BR",t,L.default],["ru-RU",t,N.default],["es-LA",t,R.default]])}),r=new n.LocaleManager({bundleSource:l,allowedLocales:Object.values(o),fallbackLocale:i,preferredLocale:this._locale,namespaces:[t]});return this.i18n=r.useI18N(t),a.instance=this,typeof window<"u"&&(window.onstorage=c=>{c.key===s&&(this.currentLocale=c.newValue)}),this}static getPreferredLocale(){if(typeof window>"u"||!window.localStorage)return i;const e=window.localStorage.getItem(s),l=Object.values(o).find(r=>r.startsWith(navigator.language.slice(0,2)));return e||l||i}static getAllowedLocales(){return o}$t(...e){return this.i18n.$t(...e)}$ta(...e){return this.i18n.$ta(...e)}get currentLocale(){return this._locale}set currentLocale(e){if(e!==this._locale){if(!Object.values(o).includes(e))throw new Error(`Locale ${e} is not allowed, please use one of the following: ${Object.values(o).join(", ")}`);this._locale=e,this.i18n.setI18N({preferredLocale:e},t)}}}exports.DialtoneLocalization=a;
 //# sourceMappingURL=index.cjs.map

package/dist/localization/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../localization/index.js"],"sourcesContent":["import { LocaleManager, RawBundleSource, useI18N } from '@dialpad/i18n-vue2';\n\nimport enUS from './en-US.ftl?raw';\nimport zhCN from './zh-CN.ftl?raw';\nimport nlNL from './nl-NL.ftl?raw';\nimport frFR from './fr-FR.ftl?raw';\nimport deDE from './de-DE.ftl?raw';\nimport itIT from './it-IT.ftl?raw';\nimport jaJP from './ja-JP.ftl?raw';\nimport ptBR from './pt-BR.ftl?raw';\nimport ruRU from './ru-RU.ftl?raw';\nimport esLA from './es-LA.ftl?raw';\n\nconst dialtoneNamespace = 'dialtone';\nconst allowedLocales = {\n  ENGLISH: 'en-US',\n  CHINESE: 'zh-CN',\n  DUTCH: 'nl-NL',\n  FRENCH: 'fr-FR',\n  GERMAN: 'de-DE',\n  ITALIAN: 'it-IT',\n  JAPANESE: 'ja-JP',\n  PORTUGUESE: 'pt-BR',\n  RUSSIAN: 'ru-RU',\n  SPANISH: 'es-LA',\n};\nconst fallbackLocale = 'en-US';\n/**\n * Default key name used by the LocaleManager to store the user's preferred locale in localStorage\n */\nconst localeManagerStorageKey = 'user-locale';\n\n/**\n * Dialtone localization class, follows the singleton pattern to make sure only one instance of the class is created.\n * Initializes the localeManager and looks for changes on the browser storage to update the current locale.\n * https://github.com/dialpad/goblin-client-tools/tree/main/packages/i18n#i18n-vue-3-compatible\n */\nexport class DialtoneLocalization {\n  constructor (locale = null) {\n    if (typeof DialtoneLocalization.instance === 'object') {\n      return DialtoneLocalization.instance;\n    }\n\n    this._locale = locale || DialtoneLocalization.getPreferredLocale();\n\n    const bundleSource = new RawBundleSource({\n      resources: RawBundleSource.builtResources([\n        ['en-US', dialtoneNamespace, enUS],\n        ['zh-CN', dialtoneNamespace, zhCN],\n        ['nl-NL', dialtoneNamespace, nlNL],\n        ['fr-FR', dialtoneNamespace, frFR],\n        ['de-DE', dialtoneNamespace, deDE],\n        ['it-IT', dialtoneNamespace, itIT],\n        ['ja-JP', dialtoneNamespace, jaJP],\n        ['pt-BR', dialtoneNamespace, ptBR],\n        ['ru-RU', dialtoneNamespace, ruRU],\n        ['es-LA', dialtoneNamespace, esLA],\n      ]),\n    });\n\n    const localeManager = new LocaleManager({\n      bundleSource,\n      allowedLocales: Object.values(allowedLocales),\n      fallbackLocale,\n      preferredLocale: this._locale,\n      namespaces: [dialtoneNamespace],\n    });\n\n    localeManager.install(dialtoneNamespace);\n\n    DialtoneLocalization.instance = this;\n\n    if (typeof window !== 'undefined') {\n      /**\n       * @description\n       * When the browser storage changes, update the current locale\n       * @param event\n       */\n      window.onstorage = (event) => {\n        if (event.key === localeManagerStorageKey) {\n          this.currentLocale = event.newValue;\n        }\n      };\n    }\n\n    return this;\n  }\n\n  /**\n   * Gets the preferred locale from user's locale stored in localStorage or the browser language\n   * @returns { string }\n   */\n  static getPreferredLocale () {\n    /**\n     * Early return if we're not in the browser or if localStorage is not available\n     */\n    if (typeof window === 'undefined' || !window.localStorage) {\n      return fallbackLocale;\n    }\n\n    const localStorageLanguage = window.localStorage.getItem(localeManagerStorageKey);\n\n    // Get the first two letters of the navigator language and check if it's in the allowed locales\n    const navigatorLanguage = Object.values(allowedLocales)\n      .find(locale => locale.startsWith(navigator.language.slice(0, 2)));\n\n    return localStorageLanguage || navigatorLanguage || fallbackLocale;\n  }\n\n  static getAllowedLocales () {\n    return allowedLocales;\n  }\n\n  /**\n   * Passthrough function to the i18n $t function including the dialtone namespace\n   * Returns a translated string based on a key and optional variables.\n   * It’s used for simple text translations.\n   * https://github.com/dialpad/goblin-client-tools/tree/main/packages/i18n#t\n   */\n  $t (...args) {\n    return useI18N(dialtoneNamespace).$t(...args);\n  }\n\n  /**\n   * Passthrough function to the i18n $ta function including the dialtone namespace\n   * Returns an object containing translated attributes to pass directly as props to components, it can contain\n   * aria-label, title, etc, rather than just a plain text. It’s useful for handling element attributes in the UI.\n   * https://github.com/dialpad/goblin-client-tools/tree/main/packages/i18n#ta\n   */\n  $ta (...args) {\n    return useI18N(dialtoneNamespace).$ta(...args);\n  }\n\n  get currentLocale () {\n    return this._locale;\n  }\n\n  set currentLocale (newLocale) {\n    if (newLocale === this._locale) return;\n    if (!Object.values(allowedLocales).includes(newLocale)) {\n      throw new Error(`Locale ${newLocale} is not allowed, please use one of the following: ${Object.values(allowedLocales).join(', ')}`);\n    }\n\n    this._locale = newLocale;\n    useI18N(dialtoneNamespace).setI18N({ preferredLocale: newLocale }, dialtoneNamespace);\n  }\n}\n"],"names":["dialtoneNamespace","allowedLocales","fallbackLocale","localeManagerStorageKey","DialtoneLocalization","locale","bundleSource","RawBundleSource","enUS","zhCN","nlNL","frFR","deDE","itIT","jaJP","ptBR","ruRU","esLA","LocaleManager","event","localStorageLanguage","navigatorLanguage","args","useI18N","newLocale"],"mappings":"gXAaMA,EAAoB,WACpBC,EAAiB,CACrB,QAAS,QACT,QAAS,QACT,MAAO,QACP,OAAQ,QACR,OAAQ,QACR,QAAS,QACT,SAAU,QACV,WAAY,QACZ,QAAS,QACT,QAAS,OACX,EACMC,EAAiB,QAIjBC,EAA0B,cAOzB,MAAMC,CAAqB,CAChC,YAAaC,EAAS,KAAM,CAC1B,GAAI,OAAOD,EAAqB,UAAa,SAC3C,OAAOA,EAAqB,SAG9B,KAAK,QAAUC,GAAUD,EAAqB,mBAAkB,EAEhE,MAAME,EAAe,IAAIC,kBAAgB,CACvC,UAAWA,EAAAA,gBAAgB,eAAe,CACxC,CAAC,QAASP,EAAmBQ,SAAI,EACjC,CAAC,QAASR,EAAmBS,SAAI,EACjC,CAAC,QAAST,EAAmBU,SAAI,EACjC,CAAC,QAASV,EAAmBW,SAAI,EACjC,CAAC,QAASX,EAAmBY,SAAI,EACjC,CAAC,QAASZ,EAAmBa,SAAI,EACjC,CAAC,QAASb,EAAmBc,SAAI,EACjC,CAAC,QAASd,EAAmBe,SAAI,EACjC,CAAC,QAASf,EAAmBgB,SAAI,EACjC,CAAC,QAAShB,EAAmBiB,SAAI,CACzC,CAAO,CACP,CAAK,EAUD,OARsB,IAAIC,gBAAc,CACtC,aAAAZ,EACA,eAAgB,OAAO,OAAOL,CAAc,EAC5C,eAAAC,EACA,gBAAiB,KAAK,QACtB,WAAY,CAACF,CAAiB,CACpC,CAAK,EAEa,QAAQA,CAAiB,EAEvCI,EAAqB,SAAW,KAE5B,OAAO,OAAW,MAMpB,OAAO,UAAae,GAAU,CACxBA,EAAM,MAAQhB,IAChB,KAAK,cAAgBgB,EAAM,SAE/B,GAGK,IACT,CAMA,OAAO,oBAAsB,CAI3B,GAAI,OAAO,OAAW,KAAe,CAAC,OAAO,aAC3C,OAAOjB,EAGT,MAAMkB,EAAuB,OAAO,aAAa,QAAQjB,CAAuB,EAG1EkB,EAAoB,OAAO,OAAOpB,CAAc,EACnD,KAAKI,GAAUA,EAAO,WAAW,UAAU,SAAS,MAAM,EAAG,CAAC,CAAC,CAAC,EAEnE,OAAOe,GAAwBC,GAAqBnB,CACtD,CAEA,OAAO,mBAAqB,CAC1B,OAAOD,CACT,CAQA,MAAOqB,EAAM,CACX,OAAOC,EAAAA,QAAQvB,CAAiB,EAAE,GAAG,GAAGsB,CAAI,CAC9C,CAQA,OAAQA,EAAM,CACZ,OAAOC,EAAAA,QAAQvB,CAAiB,EAAE,IAAI,GAAGsB,CAAI,CAC/C,CAEA,IAAI,eAAiB,CACnB,OAAO,KAAK,OACd,CAEA,IAAI,cAAeE,EAAW,CAC5B,GAAIA,IAAc,KAAK,QACvB,IAAI,CAAC,OAAO,OAAOvB,CAAc,EAAE,SAASuB,CAAS,EACnD,MAAM,IAAI,MAAM,UAAUA,CAAS,qDAAqD,OAAO,OAAOvB,CAAc,EAAE,KAAK,IAAI,CAAC,EAAE,EAGpI,KAAK,QAAUuB,EACfD,EAAAA,QAAQvB,CAAiB,EAAE,QAAQ,CAAE,gBAAiBwB,CAAS,EAAIxB,CAAiB,EACtF,CACF"}
+{"version":3,"file":"index.cjs","sources":["../../localization/index.js"],"sourcesContent":["import { LocaleManager, RawBundleSource } from '@dialpad/i18n-vue2';\n\nimport enUS from './en-US.ftl?raw';\nimport zhCN from './zh-CN.ftl?raw';\nimport nlNL from './nl-NL.ftl?raw';\nimport frFR from './fr-FR.ftl?raw';\nimport deDE from './de-DE.ftl?raw';\nimport itIT from './it-IT.ftl?raw';\nimport jaJP from './ja-JP.ftl?raw';\nimport ptBR from './pt-BR.ftl?raw';\nimport ruRU from './ru-RU.ftl?raw';\nimport esLA from './es-LA.ftl?raw';\n\nconst dialtoneNamespace = 'dialtone';\nconst allowedLocales = {\n  ENGLISH: 'en-US',\n  CHINESE: 'zh-CN',\n  DUTCH: 'nl-NL',\n  FRENCH: 'fr-FR',\n  GERMAN: 'de-DE',\n  ITALIAN: 'it-IT',\n  JAPANESE: 'ja-JP',\n  PORTUGUESE: 'pt-BR',\n  RUSSIAN: 'ru-RU',\n  SPANISH: 'es-LA',\n};\nconst fallbackLocale = 'en-US';\n/**\n * Default key name used by the LocaleManager to store the user's preferred locale in localStorage\n */\nconst localeManagerStorageKey = 'user-locale';\n\n/**\n * Dialtone localization class, follows the singleton pattern to make sure only one instance of the class is created.\n * Initializes the localeManager and looks for changes on the browser storage to update the current locale.\n * https://github.com/dialpad/goblin-client-tools/tree/main/packages/i18n#i18n-vue-3-compatible\n */\nexport class DialtoneLocalization {\n  /**\n   * @prop {import('@dialpad/i18n').UseI18N} i18n\n   * @private\n   */\n  constructor (locale = null) {\n    if (typeof DialtoneLocalization.instance === 'object') {\n      return DialtoneLocalization.instance;\n    }\n\n    this._locale = locale || DialtoneLocalization.getPreferredLocale();\n\n    const bundleSource = new RawBundleSource({\n      resources: RawBundleSource.builtResources([\n        ['en-US', dialtoneNamespace, enUS],\n        ['zh-CN', dialtoneNamespace, zhCN],\n        ['nl-NL', dialtoneNamespace, nlNL],\n        ['fr-FR', dialtoneNamespace, frFR],\n        ['de-DE', dialtoneNamespace, deDE],\n        ['it-IT', dialtoneNamespace, itIT],\n        ['ja-JP', dialtoneNamespace, jaJP],\n        ['pt-BR', dialtoneNamespace, ptBR],\n        ['ru-RU', dialtoneNamespace, ruRU],\n        ['es-LA', dialtoneNamespace, esLA],\n      ]),\n    });\n\n    const localeManager = new LocaleManager({\n      bundleSource,\n      allowedLocales: Object.values(allowedLocales),\n      fallbackLocale,\n      preferredLocale: this._locale,\n      namespaces: [dialtoneNamespace],\n    });\n\n    this.i18n = localeManager.useI18N(dialtoneNamespace);\n\n    DialtoneLocalization.instance = this;\n\n    if (typeof window !== 'undefined') {\n      /**\n       * @description\n       * When the browser storage changes, update the current locale\n       * @param event\n       */\n      window.onstorage = (event) => {\n        if (event.key === localeManagerStorageKey) {\n          this.currentLocale = event.newValue;\n        }\n      };\n    }\n\n    return this;\n  }\n\n  /**\n   * Gets the preferred locale from user's locale stored in localStorage or the browser language\n   * @returns { string }\n   */\n  static getPreferredLocale () {\n    /**\n     * Early return if we're not in the browser or if localStorage is not available\n     */\n    if (typeof window === 'undefined' || !window.localStorage) {\n      return fallbackLocale;\n    }\n\n    const localStorageLanguage = window.localStorage.getItem(localeManagerStorageKey);\n\n    // Get the first two letters of the navigator language and check if it's in the allowed locales\n    const navigatorLanguage = Object.values(allowedLocales)\n      .find(locale => locale.startsWith(navigator.language.slice(0, 2)));\n\n    return localStorageLanguage || navigatorLanguage || fallbackLocale;\n  }\n\n  static getAllowedLocales () {\n    return allowedLocales;\n  }\n\n  /**\n   * Passthrough function to the i18n $t function including the dialtone namespace\n   * Returns a translated string based on a key and optional variables.\n   * It’s used for simple text translations.\n   * https://github.com/dialpad/goblin-client-tools/tree/main/packages/i18n#t\n   */\n  $t (...args) {\n    return this.i18n.$t(...args);\n  }\n\n  /**\n   * Passthrough function to the i18n $ta function including the dialtone namespace\n   * Returns an object containing translated attributes to pass directly as props to components, it can contain\n   * aria-label, title, etc, rather than just a plain text. It’s useful for handling element attributes in the UI.\n   * https://github.com/dialpad/goblin-client-tools/tree/main/packages/i18n#ta\n   */\n  $ta (...args) {\n    return this.i18n.$ta(...args);\n  }\n\n  get currentLocale () {\n    return this._locale;\n  }\n\n  set currentLocale (newLocale) {\n    if (newLocale === this._locale) return;\n    if (!Object.values(allowedLocales).includes(newLocale)) {\n      throw new Error(`Locale ${newLocale} is not allowed, please use one of the following: ${Object.values(allowedLocales).join(', ')}`);\n    }\n\n    this._locale = newLocale;\n    this.i18n.setI18N({ preferredLocale: newLocale }, dialtoneNamespace);\n  }\n}\n"],"names":["dialtoneNamespace","allowedLocales","fallbackLocale","localeManagerStorageKey","DialtoneLocalization","locale","bundleSource","RawBundleSource","enUS","zhCN","nlNL","frFR","deDE","itIT","jaJP","ptBR","ruRU","esLA","localeManager","LocaleManager","event","localStorageLanguage","navigatorLanguage","args","newLocale"],"mappings":"gXAaMA,EAAoB,WACpBC,EAAiB,CACrB,QAAS,QACT,QAAS,QACT,MAAO,QACP,OAAQ,QACR,OAAQ,QACR,QAAS,QACT,SAAU,QACV,WAAY,QACZ,QAAS,QACT,QAAS,OACX,EACMC,EAAiB,QAIjBC,EAA0B,cAOzB,MAAMC,CAAqB,CAKhC,YAAaC,EAAS,KAAM,CAC1B,GAAI,OAAOD,EAAqB,UAAa,SAC3C,OAAOA,EAAqB,SAG9B,KAAK,QAAUC,GAAUD,EAAqB,mBAAkB,EAEhE,MAAME,EAAe,IAAIC,kBAAgB,CACvC,UAAWA,EAAAA,gBAAgB,eAAe,CACxC,CAAC,QAASP,EAAmBQ,SAAI,EACjC,CAAC,QAASR,EAAmBS,SAAI,EACjC,CAAC,QAAST,EAAmBU,SAAI,EACjC,CAAC,QAASV,EAAmBW,SAAI,EACjC,CAAC,QAASX,EAAmBY,SAAI,EACjC,CAAC,QAASZ,EAAmBa,SAAI,EACjC,CAAC,QAASb,EAAmBc,SAAI,EACjC,CAAC,QAASd,EAAmBe,SAAI,EACjC,CAAC,QAASf,EAAmBgB,SAAI,EACjC,CAAC,QAAShB,EAAmBiB,SAAI,CACzC,CAAO,CACP,CAAK,EAEKC,EAAgB,IAAIC,gBAAc,CACtC,aAAAb,EACA,eAAgB,OAAO,OAAOL,CAAc,EAC5C,eAAAC,EACA,gBAAiB,KAAK,QACtB,WAAY,CAACF,CAAiB,CACpC,CAAK,EAED,YAAK,KAAOkB,EAAc,QAAQlB,CAAiB,EAEnDI,EAAqB,SAAW,KAE5B,OAAO,OAAW,MAMpB,OAAO,UAAagB,GAAU,CACxBA,EAAM,MAAQjB,IAChB,KAAK,cAAgBiB,EAAM,SAE/B,GAGK,IACT,CAMA,OAAO,oBAAsB,CAI3B,GAAI,OAAO,OAAW,KAAe,CAAC,OAAO,aAC3C,OAAOlB,EAGT,MAAMmB,EAAuB,OAAO,aAAa,QAAQlB,CAAuB,EAG1EmB,EAAoB,OAAO,OAAOrB,CAAc,EACnD,KAAKI,GAAUA,EAAO,WAAW,UAAU,SAAS,MAAM,EAAG,CAAC,CAAC,CAAC,EAEnE,OAAOgB,GAAwBC,GAAqBpB,CACtD,CAEA,OAAO,mBAAqB,CAC1B,OAAOD,CACT,CAQA,MAAOsB,EAAM,CACX,OAAO,KAAK,KAAK,GAAG,GAAGA,CAAI,CAC7B,CAQA,OAAQA,EAAM,CACZ,OAAO,KAAK,KAAK,IAAI,GAAGA,CAAI,CAC9B,CAEA,IAAI,eAAiB,CACnB,OAAO,KAAK,OACd,CAEA,IAAI,cAAeC,EAAW,CAC5B,GAAIA,IAAc,KAAK,QACvB,IAAI,CAAC,OAAO,OAAOvB,CAAc,EAAE,SAASuB,CAAS,EACnD,MAAM,IAAI,MAAM,UAAUA,CAAS,qDAAqD,OAAO,OAAOvB,CAAc,EAAE,KAAK,IAAI,CAAC,EAAE,EAGpI,KAAK,QAAUuB,EACf,KAAK,KAAK,QAAQ,CAAE,gBAAiBA,CAAS,EAAIxB,CAAiB,EACrE,CACF"}