@dialpad/dialtone 9.64.0 → 9.65.0

package/dist/vue3/lib/stack.cjs

@@ -16,25 +16,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") {
@@ -47,7 +74,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",
@@ -73,11 +106,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)
     }
@@ -90,14 +127,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);
     }
   }
 };
@@ -106,8 +143,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     class: vue.normalizeClass([
       "d-stack",
       $options.defaultDirection,
-      $options.stackResponsive,
-      $options.stackGap
+      $options.defaultGap,
+      $options.stackResponsive
     ])
   }, {
     default: vue.withCtx(() => [

package/dist/vue3/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","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_renderSlot"],"mappings":"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"}
+{"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","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_renderSlot"],"mappings":"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"}

package/dist/vue3/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 { openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot } from "vue";
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
 function _isDefaultDirection(direction) {
@@ -14,25 +14,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") {
@@ -45,7 +72,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",
@@ -71,11 +104,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)
     }
@@ -88,14 +125,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);
     }
   }
 };
@@ -104,8 +141,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     class: normalizeClass([
       "d-stack",
       $options.defaultDirection,
-      $options.stackResponsive,
-      $options.stackGap
+      $options.defaultGap,
+      $options.stackResponsive
     ])
   }, {
     default: withCtx(() => [

package/dist/vue3/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":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_renderSlot"],"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,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASL,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAW,CAAC,cAAc,mBAAmB,SAAS;AAAA,IACvD;AAAA;AAAA;AAAA;AAAA,IAKD,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,KAAK;AAAA,MACH,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,QAAQ,aAAa,GAAG;AAAA,IACrC;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA;EAEH;AAAA,EAED,UAAU;AAAA,IACR,WAAY;AACV,aAAO,YAAY,KAAK,GAAG;AAAA,IAC5B;AAAA,IAED,mBAAoB;AAClB,aAAO,yBAAyB,KAAK,SAAS;AAAA,IAC/C;AAAA,IAED,kBAAmB;AACjB,aAAO,qBAAqB,KAAK,SAAS;AAAA,IAC3C;AAAA,EACF;AACH;;AA7EE,SAAAA,UAAA,GAAAC,YAWYC,wBAVL,OAAE,EAAA,GAAA;AAAA,IACN,OAAKC,eAAA;AAAA;MAA2B,SAAgB;AAAA,MAAQ,SAAe;AAAA,MAAQ,SAAQ;AAAA;;qBAQxF,MAAQ;AAAA,MAARC,WAAQ,KAAA,QAAA,SAAA;AAAA;;;;;"}
+{"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":["_openBlock","_createBlock","_resolveDynamicComponent","_normalizeClass","_renderSlot"],"mappings":"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"}

package/dist/vue3/style.css

@@ -1265,7 +1265,7 @@ body > .os-scrollbar {
 }
 }
 /* stylelint-disable selector-pseudo-class-no-unknown */
-.dt-leftbar-row[data-v-094eaef1] {
+.dt-leftbar-row[data-v-cc2f5ae8] {
   --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);
@@ -1296,49 +1296,49 @@ body > .os-scrollbar {
   transition-duration: var(--td200);
   transition-property: background-color, border, box-shadow;
 }
-.dt-leftbar-row[data-v-094eaef1]:not(.dt-leftbar-row--no-action):hover,
-.dt-leftbar-row[data-v-094eaef1]:not(.dt-leftbar-row--no-action):focus-within {
+.dt-leftbar-row[data-v-cc2f5ae8]:not(.dt-leftbar-row--no-action):hover,
+.dt-leftbar-row[data-v-cc2f5ae8]:not(.dt-leftbar-row--no-action):focus-within {
   --leftbar-row-unread-badge-display: none;
 }
-.dt-leftbar-row[data-v-094eaef1]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action,
-.dt-leftbar-row[data-v-094eaef1]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action {
+.dt-leftbar-row[data-v-cc2f5ae8]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action,
+.dt-leftbar-row[data-v-cc2f5ae8]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action {
   display: inline-flex;
 }
-.dt-leftbar-row[data-v-094eaef1]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action-button,
-.dt-leftbar-row[data-v-094eaef1]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action-button {
+.dt-leftbar-row[data-v-cc2f5ae8]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action-button,
+.dt-leftbar-row[data-v-cc2f5ae8]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action-button {
   opacity: 1;
 }
-.dt-leftbar-row[data-v-094eaef1]:hover,
-.dt-leftbar-row[data-v-094eaef1]:focus-within {
+.dt-leftbar-row[data-v-cc2f5ae8]:hover,
+.dt-leftbar-row[data-v-cc2f5ae8]:focus-within {
   --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-hover);
 }
-.dt-leftbar-row[data-v-094eaef1]:hover .d-presence,
-.dt-leftbar-row[data-v-094eaef1]:focus-within .d-presence {
+.dt-leftbar-row[data-v-cc2f5ae8]:hover .d-presence,
+.dt-leftbar-row[data-v-cc2f5ae8]:focus-within .d-presence {
   --presence-color-border-base: var(--dt-color-black-200);
 }
-.dt-leftbar-row[data-v-094eaef1]:hover .d-avatar__count,
-.dt-leftbar-row[data-v-094eaef1]:focus-within .d-avatar__count {
+.dt-leftbar-row[data-v-cc2f5ae8]:hover .d-avatar__count,
+.dt-leftbar-row[data-v-cc2f5ae8]:focus-within .d-avatar__count {
   --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
 }
-.dt-leftbar-row--has-unread[data-v-094eaef1] {
+.dt-leftbar-row--has-unread[data-v-cc2f5ae8] {
   --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-094eaef1] {
+.dt-leftbar-row--muted[data-v-cc2f5ae8] {
   --leftbar-row-opacity: 60%;
 }
-.dt-leftbar-row--selected[data-v-094eaef1] {
+.dt-leftbar-row--selected[data-v-cc2f5ae8] {
   --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-094eaef1] .d-presence {
+.dt-leftbar-row--selected[data-v-cc2f5ae8] .d-presence {
   --presence-color-border-base: var(--dt-color-black-200);
 }
-.dt-leftbar-row--selected[data-v-094eaef1] .d-avatar__count {
+.dt-leftbar-row--selected[data-v-cc2f5ae8] .d-avatar__count {
   --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
 }
-.dt-leftbar-row__is-typing[data-v-094eaef1] {
+.dt-leftbar-row__is-typing[data-v-cc2f5ae8] {
   --is-typing-size-shape: var(--dt-size-550);
   position: absolute;
   display: flex;
@@ -1350,7 +1350,7 @@ body > .os-scrollbar {
   border-radius: var(--dt-size-radius-pill);
   opacity: 0.75;
 }
-.dt-leftbar-row__is-typing span[data-v-094eaef1] {
+.dt-leftbar-row__is-typing span[data-v-cc2f5ae8] {
   display: inline-block;
   width: var(--dt-size-300);
   height: var(--dt-size-300);
@@ -1359,18 +1359,18 @@ body > .os-scrollbar {
   border-radius: var(--dt-size-radius-pill);
   opacity: 0.3;
   transition: all 500ms ease;
-  animation: wave-094eaef1 1.5s ease infinite;
+  animation: wave-cc2f5ae8 1.5s ease infinite;
 }
-.dt-leftbar-row__is-typing span[data-v-094eaef1]:nth-child(1) {
+.dt-leftbar-row__is-typing span[data-v-cc2f5ae8]:nth-child(1) {
   animation-delay: 0ms;
 }
-.dt-leftbar-row__is-typing span[data-v-094eaef1]:nth-child(2) {
+.dt-leftbar-row__is-typing span[data-v-cc2f5ae8]:nth-child(2) {
   animation-delay: var(--td100);
 }
-.dt-leftbar-row__is-typing span[data-v-094eaef1]:nth-child(3) {
+.dt-leftbar-row__is-typing span[data-v-cc2f5ae8]:nth-child(3) {
   animation-delay: var(--td200);
 }
-.dt-leftbar-row__primary[data-v-094eaef1] {
+.dt-leftbar-row__primary[data-v-cc2f5ae8] {
   display: flex;
   flex: 1;
   align-items: center;
@@ -1387,18 +1387,18 @@ body > .os-scrollbar {
   border-radius: var(--leftbar-row-radius);
   appearance: none;
 }
-.dt-leftbar-row__primary[data-v-094eaef1]:active {
+.dt-leftbar-row__primary[data-v-cc2f5ae8]:active {
   --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-active);
 }
-.dt-leftbar-row__primary[data-v-094eaef1]:focus-visible {
+.dt-leftbar-row__primary[data-v-cc2f5ae8]:focus-visible {
   box-shadow: var(--dt-shadow-focus-inset);
 }
-.dt-leftbar-row__action-button[data-v-094eaef1] {
+.dt-leftbar-row__action-button[data-v-cc2f5ae8] {
   width: var(--leftbar-row-action-width);
   height: var(--leftbar-row-action-height);
   opacity: 0;
 }
-.dt-leftbar-row__alpha[data-v-094eaef1] {
+.dt-leftbar-row__alpha[data-v-cc2f5ae8] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1410,11 +1410,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-094eaef1] {
+.dt-leftbar-row__label[data-v-cc2f5ae8] {
   flex: 0 1;
   min-width: 0;
 }
-.dt-leftbar-row__omega[data-v-094eaef1] {
+.dt-leftbar-row__omega[data-v-cc2f5ae8] {
   position: absolute;
   top: var(--leftbar-row-action-position-bottom);
   right: var(--leftbar-row-action-position-right);
@@ -1426,34 +1426,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-094eaef1] {
+.dt-leftbar-row__unread-badge[data-v-cc2f5ae8] {
   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-094eaef1] .dt-leftbar-row__action {
+.dt-leftbar-row--unread-count[data-v-cc2f5ae8] .dt-leftbar-row__action {
   display: none;
 }
-.dt-leftbar-row__unread-count-badge[data-v-094eaef1] {
+.dt-leftbar-row__unread-count-badge[data-v-cc2f5ae8] {
   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-094eaef1] {
+.dt-leftbar-row__unread-mention-count-badge[data-v-cc2f5ae8] {
   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-094eaef1] {
+.dt-leftbar-row__unread-mention-only-count-badge[data-v-cc2f5ae8] {
   color: var(--dt-theme-mention-color-foreground-strong);
   background-color: var(--dt-theme-mention-color-background-strong);
 }
-.dt-leftbar-row__active-voice[data-v-094eaef1] {
+.dt-leftbar-row__active-voice[data-v-cc2f5ae8] {
   display: inline-flex;
   color: var(--dt-color-purple-400);
-  -webkit-animation-name: opacity-pulsate-094eaef1;
-  -moz-animation-name: opacity-pulsate-094eaef1;
-  animation-name: opacity-pulsate-094eaef1;
+  -webkit-animation-name: opacity-pulsate-cc2f5ae8;
+  -moz-animation-name: opacity-pulsate-cc2f5ae8;
+  animation-name: opacity-pulsate-cc2f5ae8;
   -webkit-animation-duration: 1s;
   -moz-animation-duration: 1s;
   animation-duration: 1s;
@@ -1464,7 +1464,7 @@ body > .os-scrollbar {
   -moz-animation-fill-mode: both;
   animation-fill-mode: both;
 }
-.dt-leftbar-row__dnd[data-v-094eaef1] {
+.dt-leftbar-row__dnd[data-v-cc2f5ae8] {
   padding-top: var(--dt-space-200);
   padding-right: var(--dt-space-300);
   color: var(--dt-color-foreground-tertiary);
@@ -1472,26 +1472,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-094eaef1] {
+.dt-leftbar-row__container--off-duty[data-v-cc2f5ae8] {
   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-094eaef1] .dt-leftbar-row__primary {
+.dt-leftbar-row__container--off-duty[data-v-cc2f5ae8] .dt-leftbar-row__primary {
   margin: calc(var(--dt-size-100) * -1);
 }
-.dt-leftbar-row--contact-centers[data-v-094eaef1] .dt-leftbar-row__alpha {
+.dt-leftbar-row--contact-centers[data-v-cc2f5ae8] .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-094eaef1] {
+.dt-leftbar-row--contact-centers .dt-leftbar-row__action-container[data-v-cc2f5ae8] {
   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-094eaef1] .dt-leftbar-row__description {
+.dt-leftbar-row[data-v-cc2f5ae8] .dt-leftbar-row__description {
   overflow: hidden;
   color: var(--leftbar-row-description-color-foreground);
   font-weight: var(--leftbar-row-description-font-weight);
@@ -1500,7 +1500,7 @@ body > .os-scrollbar {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.dt-leftbar-row[data-v-094eaef1] .dt-leftbar-row__status {
+.dt-leftbar-row[data-v-cc2f5ae8] .dt-leftbar-row__status {
   padding-bottom: var(--dt-space-100);
   overflow: hidden;
   color: var(--leftbar-row-status-color-foreground);
@@ -1509,19 +1509,19 @@ body > .os-scrollbar {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.dt-leftbar-row[data-v-094eaef1] .dt-leftbar-row__meta-context ~ .dt-leftbar-row__meta-custom:not(:empty)::before {
+.dt-leftbar-row[data-v-cc2f5ae8] .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-094eaef1] {
+.dt-leftbar-row__icon-cc[data-v-cc2f5ae8] {
   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-094eaef1] {
-  -webkit-animation-name: opacity-pulsate-094eaef1;
-  -moz-animation-name: opacity-pulsate-094eaef1;
-  animation-name: opacity-pulsate-094eaef1;
+.opacity-pulsate[data-v-cc2f5ae8] {
+  -webkit-animation-name: opacity-pulsate-cc2f5ae8;
+  -moz-animation-name: opacity-pulsate-cc2f5ae8;
+  animation-name: opacity-pulsate-cc2f5ae8;
   -webkit-animation-duration: 1s;
   -moz-animation-duration: 1s;
   animation-duration: 1s;
@@ -1532,7 +1532,7 @@ body > .os-scrollbar {
   -moz-animation-fill-mode: both;
   animation-fill-mode: both;
 }
-@keyframes opacity-pulsate-094eaef1 {
+@keyframes opacity-pulsate-cc2f5ae8 {
 0%,
   100% {
     opacity: 0.2;
@@ -1541,7 +1541,7 @@ body > .os-scrollbar {
     opacity: 1;
 }
 }
-@keyframes opacity-pulsate-094eaef1 {
+@keyframes opacity-pulsate-cc2f5ae8 {
 0%,
   100% {
     opacity: 0.2;
@@ -1550,7 +1550,7 @@ body > .os-scrollbar {
     opacity: 1;
 }
 }
-@keyframes opacity-pulsate-094eaef1 {
+@keyframes opacity-pulsate-cc2f5ae8 {
 0%,
   100% {
     opacity: 0.2;
@@ -1559,7 +1559,7 @@ body > .os-scrollbar {
     opacity: 1;
 }
 }
-@keyframes wave-094eaef1 {
+@keyframes wave-cc2f5ae8 {
 0%,
   50%,
   100% {

package/dist/vue3/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/vue3/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/vue3/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/vue3/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"}