@dialpad/dialtone 9.64.0 → 9.65.0

package/dist/vue2/lib/stack.cjs

@@ -15,25 +15,52 @@ function _getValidDirection(direction) {
     return null;
   }
 }
+function _getValidGap(gap) {
+  if (typeof gap === "string") {
+    return gap;
+  } else if (typeof gap === "object") {
+    return gap.default;
+  } else {
+    return null;
+  }
+}
 function directionPropType(value) {
   return typeof value;
 }
 function getDefaultDirectionClass(direction) {
   return _getValidDirection(direction) ? `d-stack--${stack_constants.DT_STACK_DIRECTION[_getValidDirection(direction)]}` : null;
 }
-function getResponsiveClasses(direction) {
+function getResposiveDirectionClasses(direction) {
   if (directionPropType(direction) === "object") {
     return [
       ...stack_constants.DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
-        return direction[breakpoint] ? `d-stack--${breakpoint}--${direction[breakpoint]}` : null;
+        return direction[breakpoint] ? `d-stack--${breakpoint}-${direction[breakpoint]}` : null;
       })
     ];
   } else {
-    return null;
+    return [];
   }
 }
-function getGapClass(gap) {
-  return stack_constants.DT_STACK_GAP.includes(gap) ? `d-stack--gap-${gap}` : null;
+function getResposiveGapClasses(gap) {
+  if (typeof gap === "object") {
+    return [
+      ...stack_constants.DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
+        return stack_constants.DT_STACK_GAP.includes(gap[breakpoint]) ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}` : null;
+      })
+    ];
+  } else {
+    return [];
+  }
+}
+function getResponsiveClasses(direction, gap) {
+  return [
+    ...getResposiveDirectionClasses(direction),
+    ...getResposiveGapClasses(gap)
+  ];
+}
+function getDefaultGapClass(gap) {
+  const validGap = _getValidGap(gap);
+  return stack_constants.DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;
 }
 function directionValidator(direction) {
   if (directionPropType(direction) === "string") {
@@ -46,7 +73,13 @@ function directionValidator(direction) {
   }
 }
 function gapValidator(gap) {
-  return stack_constants.DT_STACK_GAP.includes(gap);
+  if (typeof gap === "string") {
+    return stack_constants.DT_STACK_GAP.includes(gap);
+  }
+  if (typeof gap === "object") {
+    const { default: defaultStyle } = gap;
+    return stack_constants.DT_STACK_GAP.includes(defaultStyle);
+  }
 }
 const _sfc_main = {
   name: "DtStack",
@@ -72,11 +105,15 @@ const _sfc_main = {
       default: "div"
     },
     /**
-     * Set this prop to have the space between each stack item
-     * @values 0, 100, 200, 300, 400, 500, 600
+     * The gap property controls the spacing between items in the stack.
+     * The gap can be set to a string, or object with breakpoints.
+     * All the undefined breakpoints will have the 'default' value.
+     * You can override the default gap with 'default' key.
+     * In case of string, it will be applied to all the breakpoints.
+     * Valid values are '0', '100', '200', '300', '400', '450', '500', '600'.
      */
     gap: {
-      type: String,
+      type: [String, Object],
       default: "0",
       validator: (gap) => gapValidator(gap)
     }
@@ -89,14 +126,14 @@ const _sfc_main = {
     };
   },
   computed: {
-    stackGap() {
-      return getGapClass(this.gap);
+    defaultGap() {
+      return getDefaultGapClass(this.gap);
     },
     defaultDirection() {
       return getDefaultDirectionClass(this.direction);
     },
     stackResponsive() {
-      return getResponsiveClasses(this.direction);
+      return getResponsiveClasses(this.direction, this.gap);
     }
   }
 };
@@ -105,8 +142,8 @@ var _sfc_render = function render() {
   return _c(_vm.as, { tag: "component", class: [
     "d-stack",
     _vm.defaultDirection,
-    _vm.stackResponsive,
-    _vm.stackGap
+    _vm.defaultGap,
+    _vm.stackResponsive
   ] }, [_vm._t("default")], 2);
 };
 var _sfc_staticRenderFns = [];

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

@@ -1 +1 @@
-{"version":3,"file":"stack.cjs","sources":["../../components/stack/utils.js","../../components/stack/validators.js","../../components/stack/stack.vue"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\nfunction _getValidDirection (direction) {\n  if (directionPropType(direction) === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\nexport function directionPropType (value) {\n  return typeof value;\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nexport function getResponsiveClasses (direction) {\n  if (directionPropType(direction) === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return direction[breakpoint]\n          ? `d-stack--${breakpoint}--${direction[breakpoint]}`\n          : null;\n      })];\n  } else { return null; }\n}\n\nexport function getGapClass (gap) {\n  return DT_STACK_GAP.includes(gap) ? `d-stack--gap-${gap}` : null;\n}\n","import { DT_STACK_DIRECTION, DT_STACK_GAP } from '@/components/stack/stack_constants';\nimport { directionPropType } from './utils';\n\nexport function directionValidator (direction) {\n  if (directionPropType(direction) === 'string') {\n    return Object.keys(DT_STACK_DIRECTION).includes(direction);\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n  } else { return null; }\n}\n\nexport function gapValidator (gap) {\n  return DT_STACK_GAP.includes(gap);\n}\n","<template>\n  <component\n    :is=\"as\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      stackResponsive,\n      stackGap,\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 } from './stack_constants';\nimport { directionValidator, gapValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getGapClass } 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 overriden\n     * by utility classes.\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     * Set this prop to have the space between each stack item\n     * @values 0, 100, 200, 300, 400, 500, 600\n     */\n    gap: {\n      type: String,\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n    };\n  },\n\n  computed: {\n    stackGap () {\n      return getGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction);\n    },\n  },\n};\n</script>\n"],"names":["DT_STACK_DIRECTION","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_GAP"],"mappings":";;;;AAEA,SAAS,oBAAqB,WAAW;AACvC,SAAO,cAAcA,gBAAkB,mBAAC;AAC1C;AAEA,SAAS,mBAAoB,WAAW;AACtC,MAAI,kBAAkB,SAAS,MAAM,UAAU;AAC7C,WAAO,CAAC,oBAAoB,SAAS,IAAIA,gBAAAA,mBAAmB,SAAS,IAAI;AAAA,EAC1E,WAAU,kBAAkB,SAAS,MAAM,UAAU;AACpD,UAAM,EAAE,SAAS,aAAc,IAAG;AAElC,WAAO,CAAC,oBAAoB,YAAY,IAAIA,gBAAAA,mBAAmB,YAAY,IAAI;AAAA,EACnF,OAAS;AAAE,WAAO;AAAA,EAAO;AACzB;AAEO,SAAS,kBAAmB,OAAO;AACxC,SAAO,OAAO;AAChB;AAEO,SAAS,yBAA0B,WAAW;AACnD,SAAO,mBAAmB,SAAS,IAC/B,YAAYA,gBAAkB,mBAAC,mBAAmB,SAAS,CAAC,CAAC,KAC7D;AACN;AAEO,SAAS,qBAAsB,WAAW;AAC/C,MAAI,kBAAkB,SAAS,MAAM,UAAU;AAC7C,WAAO;AAAA,MACL,GAAGC,gBAA+B,gCAAC,IAAI,CAAC,eAAe;AACrD,eAAO,UAAU,UAAU,IACvB,YAAY,UAAU,KAAK,UAAU,UAAU,CAAC,KAChD;AAAA,MACL,CAAA;AAAA,IAAC;AAAA,EACR,OAAS;AAAE,WAAO;AAAA,EAAO;AACzB;AAEO,SAAS,YAAa,KAAK;AAChC,SAAOC,gBAAY,aAAC,SAAS,GAAG,IAAI,gBAAgB,GAAG,KAAK;AAC9D;ACpCO,SAAS,mBAAoB,WAAW;AAC7C,MAAI,kBAAkB,SAAS,MAAM,UAAU;AAC7C,WAAO,OAAO,KAAKF,gBAAAA,kBAAkB,EAAE,SAAS,SAAS;AAAA,EAC1D,WAAU,kBAAkB,SAAS,MAAM,UAAU;AACpD,UAAM,EAAE,SAAS,aAAc,IAAG;AAElC,WAAO,OAAO,KAAKA,gBAAAA,kBAAkB,EAAE,SAAS,YAAY;AAAA,EAChE,OAAS;AAAE,WAAO;AAAA,EAAO;AACzB;AAEO,SAAS,aAAc,KAAK;AACjC,SAAOE,gBAAY,aAAC,SAAS,GAAG;AAClC;ACKA,MAAA,YAAA;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,CAAA,cAAA,mBAAA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,QAAA,aAAA,GAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,oBAAAF,gBAAA;AAAA,MACA,cAAAE,gBAAA;AAAA,MACA,iCAAAD,gBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,aAAA,YAAA,KAAA,GAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAA,yBAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,qBAAA,KAAA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"stack.cjs","sources":["../../components/stack/utils.js","../../components/stack/validators.js","../../components/stack/stack.vue"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\nfunction _getValidDirection (direction) {\n  if (directionPropType(direction) === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\nfunction _getValidGap (gap) {\n  if (typeof gap === 'string') {\n    return gap;\n  } else if (typeof gap === 'object') {\n    return gap.default;\n  } else { return null; }\n}\n\nexport function directionPropType (value) {\n  return typeof value;\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nfunction getResposiveDirectionClasses (direction) {\n  if (directionPropType(direction) === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return direction[breakpoint]\n          ? `d-stack--${breakpoint}-${direction[breakpoint]}`\n          : null;\n      })];\n  } else { return []; }\n}\n\nfunction getResposiveGapClasses (gap) {\n  if (typeof gap === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return DT_STACK_GAP.includes(gap[breakpoint])\n          ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}`\n          : null;\n      })];\n  } else { return []; }\n}\n\nexport function getResponsiveClasses (direction, gap) {\n  return [\n    ...getResposiveDirectionClasses(direction),\n    ...getResposiveGapClasses(gap),\n  ];\n}\n\nexport function getDefaultGapClass (gap) {\n  const validGap = _getValidGap(gap);\n  return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;\n}\n","import { DT_STACK_DIRECTION, DT_STACK_GAP } from '@/components/stack/stack_constants';\nimport { directionPropType } from './utils';\n\nexport function directionValidator (direction) {\n  if (directionPropType(direction) === 'string') {\n    return Object.keys(DT_STACK_DIRECTION).includes(direction);\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n  } else { return null; }\n}\n\nexport function gapValidator (gap) {\n  if (typeof gap === 'string') {\n    return DT_STACK_GAP.includes(gap);\n  }\n  if (typeof gap === 'object') {\n    const { default: defaultStyle } = gap;\n\n    return DT_STACK_GAP.includes(defaultStyle);\n  }\n}\n","<template>\n  <component\n    :is=\"as\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\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 } from './stack_constants';\nimport { directionValidator, gapValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass } 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 overriden\n     * by utility classes.\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', '100', '200', '300', '400', '450', '500', '600'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap);\n    },\n  },\n};\n</script>\n"],"names":["DT_STACK_DIRECTION","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_GAP"],"mappings":"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"}

package/dist/vue2/lib/stack.js

@@ -1,4 +1,4 @@
-import { DT_STACK_DIRECTION, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_GAP } from "../chunks/stack_constants-HraCekPm.js";
+import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from "../chunks/stack_constants-HraCekPm.js";
 import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
 function _isDefaultDirection(direction) {
   return direction === DT_STACK_DIRECTION.default;
@@ -13,25 +13,52 @@ function _getValidDirection(direction) {
     return null;
   }
 }
+function _getValidGap(gap) {
+  if (typeof gap === "string") {
+    return gap;
+  } else if (typeof gap === "object") {
+    return gap.default;
+  } else {
+    return null;
+  }
+}
 function directionPropType(value) {
   return typeof value;
 }
 function getDefaultDirectionClass(direction) {
   return _getValidDirection(direction) ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}` : null;
 }
-function getResponsiveClasses(direction) {
+function getResposiveDirectionClasses(direction) {
   if (directionPropType(direction) === "object") {
     return [
       ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
-        return direction[breakpoint] ? `d-stack--${breakpoint}--${direction[breakpoint]}` : null;
+        return direction[breakpoint] ? `d-stack--${breakpoint}-${direction[breakpoint]}` : null;
       })
     ];
   } else {
-    return null;
+    return [];
   }
 }
-function getGapClass(gap) {
-  return DT_STACK_GAP.includes(gap) ? `d-stack--gap-${gap}` : null;
+function getResposiveGapClasses(gap) {
+  if (typeof gap === "object") {
+    return [
+      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {
+        return DT_STACK_GAP.includes(gap[breakpoint]) ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}` : null;
+      })
+    ];
+  } else {
+    return [];
+  }
+}
+function getResponsiveClasses(direction, gap) {
+  return [
+    ...getResposiveDirectionClasses(direction),
+    ...getResposiveGapClasses(gap)
+  ];
+}
+function getDefaultGapClass(gap) {
+  const validGap = _getValidGap(gap);
+  return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;
 }
 function directionValidator(direction) {
   if (directionPropType(direction) === "string") {
@@ -44,7 +71,13 @@ function directionValidator(direction) {
   }
 }
 function gapValidator(gap) {
-  return DT_STACK_GAP.includes(gap);
+  if (typeof gap === "string") {
+    return DT_STACK_GAP.includes(gap);
+  }
+  if (typeof gap === "object") {
+    const { default: defaultStyle } = gap;
+    return DT_STACK_GAP.includes(defaultStyle);
+  }
 }
 const _sfc_main = {
   name: "DtStack",
@@ -70,11 +103,15 @@ const _sfc_main = {
       default: "div"
     },
     /**
-     * Set this prop to have the space between each stack item
-     * @values 0, 100, 200, 300, 400, 500, 600
+     * The gap property controls the spacing between items in the stack.
+     * The gap can be set to a string, or object with breakpoints.
+     * All the undefined breakpoints will have the 'default' value.
+     * You can override the default gap with 'default' key.
+     * In case of string, it will be applied to all the breakpoints.
+     * Valid values are '0', '100', '200', '300', '400', '450', '500', '600'.
      */
     gap: {
-      type: String,
+      type: [String, Object],
       default: "0",
       validator: (gap) => gapValidator(gap)
     }
@@ -87,14 +124,14 @@ const _sfc_main = {
     };
   },
   computed: {
-    stackGap() {
-      return getGapClass(this.gap);
+    defaultGap() {
+      return getDefaultGapClass(this.gap);
     },
     defaultDirection() {
       return getDefaultDirectionClass(this.direction);
     },
     stackResponsive() {
-      return getResponsiveClasses(this.direction);
+      return getResponsiveClasses(this.direction, this.gap);
     }
   }
 };
@@ -103,8 +140,8 @@ var _sfc_render = function render() {
   return _c(_vm.as, { tag: "component", class: [
     "d-stack",
     _vm.defaultDirection,
-    _vm.stackResponsive,
-    _vm.stackGap
+    _vm.defaultGap,
+    _vm.stackResponsive
   ] }, [_vm._t("default")], 2);
 };
 var _sfc_staticRenderFns = [];

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

@@ -1 +1 @@
-{"version":3,"file":"stack.js","sources":["../../components/stack/utils.js","../../components/stack/validators.js","../../components/stack/stack.vue"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\nfunction _getValidDirection (direction) {\n  if (directionPropType(direction) === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\nexport function directionPropType (value) {\n  return typeof value;\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nexport function getResponsiveClasses (direction) {\n  if (directionPropType(direction) === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return direction[breakpoint]\n          ? `d-stack--${breakpoint}--${direction[breakpoint]}`\n          : null;\n      })];\n  } else { return null; }\n}\n\nexport function getGapClass (gap) {\n  return DT_STACK_GAP.includes(gap) ? `d-stack--gap-${gap}` : null;\n}\n","import { DT_STACK_DIRECTION, DT_STACK_GAP } from '@/components/stack/stack_constants';\nimport { directionPropType } from './utils';\n\nexport function directionValidator (direction) {\n  if (directionPropType(direction) === 'string') {\n    return Object.keys(DT_STACK_DIRECTION).includes(direction);\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n  } else { return null; }\n}\n\nexport function gapValidator (gap) {\n  return DT_STACK_GAP.includes(gap);\n}\n","<template>\n  <component\n    :is=\"as\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      stackResponsive,\n      stackGap,\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 } from './stack_constants';\nimport { directionValidator, gapValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getGapClass } 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 overriden\n     * by utility classes.\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     * Set this prop to have the space between each stack item\n     * @values 0, 100, 200, 300, 400, 500, 600\n     */\n    gap: {\n      type: String,\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n    };\n  },\n\n  computed: {\n    stackGap () {\n      return getGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction);\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;AAEA,SAAS,oBAAqB,WAAW;AACvC,SAAO,cAAc,mBAAmB;AAC1C;AAEA,SAAS,mBAAoB,WAAW;AACtC,MAAI,kBAAkB,SAAS,MAAM,UAAU;AAC7C,WAAO,CAAC,oBAAoB,SAAS,IAAI,mBAAmB,SAAS,IAAI;AAAA,EAC1E,WAAU,kBAAkB,SAAS,MAAM,UAAU;AACpD,UAAM,EAAE,SAAS,aAAc,IAAG;AAElC,WAAO,CAAC,oBAAoB,YAAY,IAAI,mBAAmB,YAAY,IAAI;AAAA,EACnF,OAAS;AAAE,WAAO;AAAA,EAAO;AACzB;AAEO,SAAS,kBAAmB,OAAO;AACxC,SAAO,OAAO;AAChB;AAEO,SAAS,yBAA0B,WAAW;AACnD,SAAO,mBAAmB,SAAS,IAC/B,YAAY,mBAAmB,mBAAmB,SAAS,CAAC,CAAC,KAC7D;AACN;AAEO,SAAS,qBAAsB,WAAW;AAC/C,MAAI,kBAAkB,SAAS,MAAM,UAAU;AAC7C,WAAO;AAAA,MACL,GAAG,gCAAgC,IAAI,CAAC,eAAe;AACrD,eAAO,UAAU,UAAU,IACvB,YAAY,UAAU,KAAK,UAAU,UAAU,CAAC,KAChD;AAAA,MACL,CAAA;AAAA,IAAC;AAAA,EACR,OAAS;AAAE,WAAO;AAAA,EAAO;AACzB;AAEO,SAAS,YAAa,KAAK;AAChC,SAAO,aAAa,SAAS,GAAG,IAAI,gBAAgB,GAAG,KAAK;AAC9D;ACpCO,SAAS,mBAAoB,WAAW;AAC7C,MAAI,kBAAkB,SAAS,MAAM,UAAU;AAC7C,WAAO,OAAO,KAAK,kBAAkB,EAAE,SAAS,SAAS;AAAA,EAC1D,WAAU,kBAAkB,SAAS,MAAM,UAAU;AACpD,UAAM,EAAE,SAAS,aAAc,IAAG;AAElC,WAAO,OAAO,KAAK,kBAAkB,EAAE,SAAS,YAAY;AAAA,EAChE,OAAS;AAAE,WAAO;AAAA,EAAO;AACzB;AAEO,SAAS,aAAc,KAAK;AACjC,SAAO,aAAa,SAAS,GAAG;AAClC;ACKA,MAAA,YAAA;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,CAAA,cAAA,mBAAA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,QAAA,aAAA,GAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,aAAA,YAAA,KAAA,GAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAA,yBAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,qBAAA,KAAA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"stack.js","sources":["../../components/stack/utils.js","../../components/stack/validators.js","../../components/stack/stack.vue"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\nfunction _getValidDirection (direction) {\n  if (directionPropType(direction) === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\nfunction _getValidGap (gap) {\n  if (typeof gap === 'string') {\n    return gap;\n  } else if (typeof gap === 'object') {\n    return gap.default;\n  } else { return null; }\n}\n\nexport function directionPropType (value) {\n  return typeof value;\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nfunction getResposiveDirectionClasses (direction) {\n  if (directionPropType(direction) === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return direction[breakpoint]\n          ? `d-stack--${breakpoint}-${direction[breakpoint]}`\n          : null;\n      })];\n  } else { return []; }\n}\n\nfunction getResposiveGapClasses (gap) {\n  if (typeof gap === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return DT_STACK_GAP.includes(gap[breakpoint])\n          ? `d-stack--${breakpoint}-gap-${gap[breakpoint]}`\n          : null;\n      })];\n  } else { return []; }\n}\n\nexport function getResponsiveClasses (direction, gap) {\n  return [\n    ...getResposiveDirectionClasses(direction),\n    ...getResposiveGapClasses(gap),\n  ];\n}\n\nexport function getDefaultGapClass (gap) {\n  const validGap = _getValidGap(gap);\n  return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;\n}\n","import { DT_STACK_DIRECTION, DT_STACK_GAP } from '@/components/stack/stack_constants';\nimport { directionPropType } from './utils';\n\nexport function directionValidator (direction) {\n  if (directionPropType(direction) === 'string') {\n    return Object.keys(DT_STACK_DIRECTION).includes(direction);\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n  } else { return null; }\n}\n\nexport function gapValidator (gap) {\n  if (typeof gap === 'string') {\n    return DT_STACK_GAP.includes(gap);\n  }\n  if (typeof gap === 'object') {\n    const { default: defaultStyle } = gap;\n\n    return DT_STACK_GAP.includes(defaultStyle);\n  }\n}\n","<template>\n  <component\n    :is=\"as\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\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 } from './stack_constants';\nimport { directionValidator, gapValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass } 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 overriden\n     * by utility classes.\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', '100', '200', '300', '400', '450', '500', '600'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap);\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":"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"}

package/dist/vue2/style.css

@@ -1225,7 +1225,7 @@ body > .os-scrollbar {
 }
 }
 /* stylelint-disable selector-pseudo-class-no-unknown */
-.dt-leftbar-row[data-v-f44e0386] {
+.dt-leftbar-row[data-v-aeb8c657] {
   --leftbar-row-color-foreground: var(--dt-theme-sidebar-color-foreground);
   --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background);
   --leftbar-row-radius: var(--dt-size-radius-pill);
@@ -1256,49 +1256,49 @@ body > .os-scrollbar {
   transition-duration: var(--td200);
   transition-property: background-color, border, box-shadow;
 }
-.dt-leftbar-row[data-v-f44e0386]:not(.dt-leftbar-row--no-action):hover,
-.dt-leftbar-row[data-v-f44e0386]:not(.dt-leftbar-row--no-action):focus-within {
+.dt-leftbar-row[data-v-aeb8c657]:not(.dt-leftbar-row--no-action):hover,
+.dt-leftbar-row[data-v-aeb8c657]:not(.dt-leftbar-row--no-action):focus-within {
   --leftbar-row-unread-badge-display: none;
 }
-.dt-leftbar-row[data-v-f44e0386]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action,
-.dt-leftbar-row[data-v-f44e0386]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action {
+.dt-leftbar-row[data-v-aeb8c657]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action,
+.dt-leftbar-row[data-v-aeb8c657]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action {
   display: inline-flex;
 }
-.dt-leftbar-row[data-v-f44e0386]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action-button,
-.dt-leftbar-row[data-v-f44e0386]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action-button {
+.dt-leftbar-row[data-v-aeb8c657]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action-button,
+.dt-leftbar-row[data-v-aeb8c657]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action-button {
   opacity: 1;
 }
-.dt-leftbar-row[data-v-f44e0386]:hover,
-.dt-leftbar-row[data-v-f44e0386]:focus-within {
+.dt-leftbar-row[data-v-aeb8c657]:hover,
+.dt-leftbar-row[data-v-aeb8c657]:focus-within {
   --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-hover);
 }
-.dt-leftbar-row[data-v-f44e0386]:hover .d-presence,
-.dt-leftbar-row[data-v-f44e0386]:focus-within .d-presence {
+.dt-leftbar-row[data-v-aeb8c657]:hover .d-presence,
+.dt-leftbar-row[data-v-aeb8c657]:focus-within .d-presence {
   --presence-color-border-base: var(--dt-color-black-200);
 }
-.dt-leftbar-row[data-v-f44e0386]:hover .d-avatar__count,
-.dt-leftbar-row[data-v-f44e0386]:focus-within .d-avatar__count {
+.dt-leftbar-row[data-v-aeb8c657]:hover .d-avatar__count,
+.dt-leftbar-row[data-v-aeb8c657]:focus-within .d-avatar__count {
   --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
 }
-.dt-leftbar-row--has-unread[data-v-f44e0386] {
+.dt-leftbar-row--has-unread[data-v-aeb8c657] {
   --leftbar-row-description-font-weight: var(--dt-font-weight-bold);
   --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
   --leftbar-row-alpha-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
 }
-.dt-leftbar-row--muted[data-v-f44e0386] {
+.dt-leftbar-row--muted[data-v-aeb8c657] {
   --leftbar-row-opacity: 60%;
 }
-.dt-leftbar-row--selected[data-v-f44e0386] {
+.dt-leftbar-row--selected[data-v-aeb8c657] {
   --leftbar-row-color-background: var(--dt-theme-sidebar-selected-row-color-background);
   --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-selected-row-color-foreground);
 }
-.dt-leftbar-row--selected[data-v-f44e0386] .d-presence {
+.dt-leftbar-row--selected[data-v-aeb8c657] .d-presence {
   --presence-color-border-base: var(--dt-color-black-200);
 }
-.dt-leftbar-row--selected[data-v-f44e0386] .d-avatar__count {
+.dt-leftbar-row--selected[data-v-aeb8c657] .d-avatar__count {
   --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
 }
-.dt-leftbar-row__is-typing[data-v-f44e0386] {
+.dt-leftbar-row__is-typing[data-v-aeb8c657] {
   --is-typing-size-shape: var(--dt-size-550);
   position: absolute;
   display: flex;
@@ -1310,7 +1310,7 @@ body > .os-scrollbar {
   border-radius: var(--dt-size-radius-pill);
   opacity: 0.75;
 }
-.dt-leftbar-row__is-typing span[data-v-f44e0386] {
+.dt-leftbar-row__is-typing span[data-v-aeb8c657] {
   display: inline-block;
   width: var(--dt-size-300);
   height: var(--dt-size-300);
@@ -1319,18 +1319,18 @@ body > .os-scrollbar {
   border-radius: var(--dt-size-radius-pill);
   opacity: 0.3;
   transition: all 500ms ease;
-  animation: wave-f44e0386 1.5s ease infinite;
+  animation: wave-aeb8c657 1.5s ease infinite;
 }
-.dt-leftbar-row__is-typing span[data-v-f44e0386]:nth-child(1) {
+.dt-leftbar-row__is-typing span[data-v-aeb8c657]:nth-child(1) {
   animation-delay: 0ms;
 }
-.dt-leftbar-row__is-typing span[data-v-f44e0386]:nth-child(2) {
+.dt-leftbar-row__is-typing span[data-v-aeb8c657]:nth-child(2) {
   animation-delay: var(--td100);
 }
-.dt-leftbar-row__is-typing span[data-v-f44e0386]:nth-child(3) {
+.dt-leftbar-row__is-typing span[data-v-aeb8c657]:nth-child(3) {
   animation-delay: var(--td200);
 }
-.dt-leftbar-row__primary[data-v-f44e0386] {
+.dt-leftbar-row__primary[data-v-aeb8c657] {
   display: flex;
   flex: 1;
   align-items: center;
@@ -1347,18 +1347,18 @@ body > .os-scrollbar {
   border-radius: var(--leftbar-row-radius);
   appearance: none;
 }
-.dt-leftbar-row__primary[data-v-f44e0386]:active {
+.dt-leftbar-row__primary[data-v-aeb8c657]:active {
   --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-active);
 }
-.dt-leftbar-row__primary[data-v-f44e0386]:focus-visible {
+.dt-leftbar-row__primary[data-v-aeb8c657]:focus-visible {
   box-shadow: var(--dt-shadow-focus-inset);
 }
-.dt-leftbar-row__action-button[data-v-f44e0386] {
+.dt-leftbar-row__action-button[data-v-aeb8c657] {
   width: var(--leftbar-row-action-width);
   height: var(--leftbar-row-action-height);
   opacity: 0;
 }
-.dt-leftbar-row__alpha[data-v-f44e0386] {
+.dt-leftbar-row__alpha[data-v-aeb8c657] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1370,11 +1370,11 @@ body > .os-scrollbar {
   color: var(--leftbar-row-alpha-color-foreground);
   border-radius: var(--leftbar-row-radius) 0 0 var(--leftbar-row-radius);
 }
-.dt-leftbar-row__label[data-v-f44e0386] {
+.dt-leftbar-row__label[data-v-aeb8c657] {
   flex: 0 1;
   min-width: 0;
 }
-.dt-leftbar-row__omega[data-v-f44e0386] {
+.dt-leftbar-row__omega[data-v-aeb8c657] {
   position: absolute;
   top: var(--leftbar-row-action-position-bottom);
   right: var(--leftbar-row-action-position-right);
@@ -1386,34 +1386,34 @@ body > .os-scrollbar {
   border-radius: var(--leftbar-row-radius);
   transform: translateY(calc(var(--leftbar-row-action-position-bottom) * -1));
 }
-.dt-leftbar-row__unread-badge[data-v-f44e0386] {
+.dt-leftbar-row__unread-badge[data-v-aeb8c657] {
   display: var(--leftbar-row-unread-badge-display);
   color: var(--dt-theme-mention-color-foreground);
   background-color: var(--dt-theme-mention-color-background);
 }
-.dt-leftbar-row--unread-count[data-v-f44e0386] .dt-leftbar-row__action {
+.dt-leftbar-row--unread-count[data-v-aeb8c657] .dt-leftbar-row__action {
   display: none;
 }
-.dt-leftbar-row__unread-count-badge[data-v-f44e0386] {
+.dt-leftbar-row__unread-count-badge[data-v-aeb8c657] {
   border-top-right-radius: var(--dt-size-radius-0);
   border-bottom-right-radius: var(--dt-size-radius-0);
 }
-.dt-leftbar-row__unread-mention-count-badge[data-v-f44e0386] {
+.dt-leftbar-row__unread-mention-count-badge[data-v-aeb8c657] {
   color: var(--dt-theme-mention-color-foreground-strong);
   background-color: var(--dt-theme-mention-color-background-strong);
   border-top-left-radius: var(--dt-size-radius-0);
   border-bottom-left-radius: var(--dt-size-radius-0);
 }
-.dt-leftbar-row__unread-mention-only-count-badge[data-v-f44e0386] {
+.dt-leftbar-row__unread-mention-only-count-badge[data-v-aeb8c657] {
   color: var(--dt-theme-mention-color-foreground-strong);
   background-color: var(--dt-theme-mention-color-background-strong);
 }
-.dt-leftbar-row__active-voice[data-v-f44e0386] {
+.dt-leftbar-row__active-voice[data-v-aeb8c657] {
   display: inline-flex;
   color: var(--dt-color-purple-400);
-  -webkit-animation-name: opacity-pulsate-f44e0386;
-  -moz-animation-name: opacity-pulsate-f44e0386;
-  animation-name: opacity-pulsate-f44e0386;
+  -webkit-animation-name: opacity-pulsate-aeb8c657;
+  -moz-animation-name: opacity-pulsate-aeb8c657;
+  animation-name: opacity-pulsate-aeb8c657;
   -webkit-animation-duration: 1s;
   -moz-animation-duration: 1s;
   animation-duration: 1s;
@@ -1424,7 +1424,7 @@ body > .os-scrollbar {
   -moz-animation-fill-mode: both;
   animation-fill-mode: both;
 }
-.dt-leftbar-row__dnd[data-v-f44e0386] {
+.dt-leftbar-row__dnd[data-v-aeb8c657] {
   padding-top: var(--dt-space-200);
   padding-right: var(--dt-space-300);
   color: var(--dt-color-foreground-tertiary);
@@ -1432,26 +1432,26 @@ body > .os-scrollbar {
   font-size: var(--dt-font-size-100);
   line-height: var(--dt-font-line-height-400);
 }
-.dt-leftbar-row__container--off-duty[data-v-f44e0386] {
+.dt-leftbar-row__container--off-duty[data-v-aeb8c657] {
   background-color: var(--dt-badge-color-background-critical);
   border: var(--dt-size-100) solid var(--dt-color-border-subtle);
   border-radius: var(--dt-size-radius-500);
 }
-.dt-leftbar-row__container--off-duty[data-v-f44e0386] .dt-leftbar-row__primary {
+.dt-leftbar-row__container--off-duty[data-v-aeb8c657] .dt-leftbar-row__primary {
   margin: calc(var(--dt-size-100) * -1);
 }
-.dt-leftbar-row--contact-centers[data-v-f44e0386] .dt-leftbar-row__alpha {
+.dt-leftbar-row--contact-centers[data-v-aeb8c657] .dt-leftbar-row__alpha {
   padding-right: var(--dt-space-450);
   padding-left: var(--dt-space-450);
 }
-.dt-leftbar-row--contact-centers .dt-leftbar-row__action-container[data-v-f44e0386] {
+.dt-leftbar-row--contact-centers .dt-leftbar-row__action-container[data-v-aeb8c657] {
   display: inline-flex;
   align-items: center;
   justify-content: flex-end;
   min-width: var(--dt-size-600);
   height: var(--dt-size-500);
 }
-.dt-leftbar-row[data-v-f44e0386] .dt-leftbar-row__description {
+.dt-leftbar-row[data-v-aeb8c657] .dt-leftbar-row__description {
   overflow: hidden;
   color: var(--leftbar-row-description-color-foreground);
   font-weight: var(--leftbar-row-description-font-weight);
@@ -1460,7 +1460,7 @@ body > .os-scrollbar {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.dt-leftbar-row[data-v-f44e0386] .dt-leftbar-row__status {
+.dt-leftbar-row[data-v-aeb8c657] .dt-leftbar-row__status {
   padding-bottom: var(--dt-space-100);
   overflow: hidden;
   color: var(--leftbar-row-status-color-foreground);
@@ -1469,19 +1469,19 @@ body > .os-scrollbar {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.dt-leftbar-row[data-v-f44e0386] .dt-leftbar-row__meta-context ~ .dt-leftbar-row__meta-custom:not(:empty)::before {
+.dt-leftbar-row[data-v-aeb8c657] .dt-leftbar-row__meta-context ~ .dt-leftbar-row__meta-custom:not(:empty)::before {
   color: var(--dt-theme-sidebar-status-color-foreground);
   content: " • ";
 }
-.dt-leftbar-row__icon-cc[data-v-f44e0386] {
+.dt-leftbar-row__icon-cc[data-v-aeb8c657] {
   width: calc(var(--dt-size-300) * 3.5);
   height: calc(var(--dt-size-300) * 3.5);
   border-radius: var(--dt-size-200);
 }
-.opacity-pulsate[data-v-f44e0386] {
-  -webkit-animation-name: opacity-pulsate-f44e0386;
-  -moz-animation-name: opacity-pulsate-f44e0386;
-  animation-name: opacity-pulsate-f44e0386;
+.opacity-pulsate[data-v-aeb8c657] {
+  -webkit-animation-name: opacity-pulsate-aeb8c657;
+  -moz-animation-name: opacity-pulsate-aeb8c657;
+  animation-name: opacity-pulsate-aeb8c657;
   -webkit-animation-duration: 1s;
   -moz-animation-duration: 1s;
   animation-duration: 1s;
@@ -1492,7 +1492,7 @@ body > .os-scrollbar {
   -moz-animation-fill-mode: both;
   animation-fill-mode: both;
 }
-@keyframes opacity-pulsate-f44e0386 {
+@keyframes opacity-pulsate-aeb8c657 {
 0%,
   100% {
     opacity: 0.2;
@@ -1501,7 +1501,7 @@ body > .os-scrollbar {
     opacity: 1;
 }
 }
-@keyframes opacity-pulsate-f44e0386 {
+@keyframes opacity-pulsate-aeb8c657 {
 0%,
   100% {
     opacity: 0.2;
@@ -1510,7 +1510,7 @@ body > .os-scrollbar {
     opacity: 1;
 }
 }
-@keyframes opacity-pulsate-f44e0386 {
+@keyframes opacity-pulsate-aeb8c657 {
 0%,
   100% {
     opacity: 0.2;
@@ -1519,7 +1519,7 @@ body > .os-scrollbar {
     opacity: 1;
 }
 }
-@keyframes wave-f44e0386 {
+@keyframes wave-aeb8c657 {
 0%,
   50%,
   100% {

package/dist/vue2/types/components/stack/utils.d.ts

@@ -1,5 +1,5 @@
 export function directionPropType(value: any): "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
 export function getDefaultDirectionClass(direction: any): string | null;
-export function getResponsiveClasses(direction: any): (string | null)[] | null;
-export function getGapClass(gap: any): string | null;
+export function getResponsiveClasses(direction: any, gap: any): (string | null)[];
+export function getDefaultGapClass(gap: any): string | null;
 //# sourceMappingURL=utils.d.ts.map

package/dist/vue2/types/components/stack/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../components/stack/utils.js"],"names":[],"mappings":"AAgBA,2IAEC;AAED,wEAIC;AAED,+EASC;AAED,qDAEC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../components/stack/utils.js"],"names":[],"mappings":"AAwBA,2IAEC;AAED,wEAIC;AAwBD,kFAKC;AAED,4DAGC"}

package/dist/vue2/types/components/stack/validators.d.ts

@@ -1,3 +1,3 @@
 export function directionValidator(direction: any): boolean | null;
-export function gapValidator(gap: any): boolean;
+export function gapValidator(gap: any): boolean | undefined;
 //# sourceMappingURL=validators.d.ts.map

package/dist/vue2/types/components/stack/validators.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"validators.d.ts","sourceRoot":"","sources":["../../../../components/stack/validators.js"],"names":[],"mappings":"AAGA,mEAQC;AAED,gDAEC"}
+{"version":3,"file":"validators.d.ts","sourceRoot":"","sources":["../../../../components/stack/validators.js"],"names":[],"mappings":"AAGA,mEAQC;AAED,4DASC"}