@dialpad/dialtone-vue 3.220.0 → 3.221.0-next.1

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.cjs","names":[],"sources":["../../../components/checkbox_group/checkbox_group.vue"],"sourcesContent":["<script>\nimport { warn } from 'vue';\nimport { DtInputGroup } from '../input_group';\n\n/**\n * Checkbox Groups are convenience components for a grouping of related Checkboxes.\n * While each Checkbox within the group is independent, the `v-model` on the group provides\n * a convenient interface for determining which Checkboxes within the group are checked.\n * @see https://dialtone.dialpad.com/components/checkbox_group.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCheckboxGroup',\n\n  extends: DtInputGroup,\n\n  props: {\n    /**\n     * Not supported by this component, please use selectedValues\n     */\n    modelValue: {\n      type: [],\n      default: null,\n      validator: value => {\n        if (!value) {\n          return true;\n        }\n\n        warn(\n          'Component uses selectedValues to initialize the model, modelValue is not supported by this component',\n          this,\n        );\n\n        return false;\n      },\n    },\n\n    /**\n     * A provided list of selected values(s) for the checkbox group\n     * @model selectedValues\n     */\n    selectedValues: {\n      type: Array,\n      default () {\n        return [];\n      },\n    },\n\n    /**\n     * A data qa tag for the radio group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'checkbox-group',\n    },\n\n    /**\n     * A data qa tag for the radio group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'checkbox-group-legend',\n    },\n\n    /**\n     * A data qa tag for the radio group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'checkbox-group-messages',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {Array}\n     */\n    'input',\n    /**\n     * Selected values for the checkbox group\n     *\n     * @event input\n     * @type {Array}\n     */\n    'update:selectedValues',\n  ],\n\n  data () {\n    return {\n      internalValue: this.selectedValues,\n    };\n  },\n\n  watch: {\n    selectedValues (newSelectedValues) {\n      this.internalValue = newSelectedValues;\n    },\n\n    /*\n    * watching value to support 2 way binding for slotted checkboxes.\n    * need this to pass value to slotted checkboxes if modified outside\n    * checkbox group.\n    */\n    internalValue: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.selectedValues = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted checkboxes.\n     * slotted checkbox will change this value and need to emit new value up.\n     */\n    setGroupValue (value, checked) {\n      if (!checked) {\n        this.internalValue = this.internalValue.filter(checkedValue => checkedValue !== value);\n      } else if (!this.internalValue.includes(value)) {\n        this.internalValue.push(value);\n      }\n\n      this.$emit('input', this.internalValue);\n      this.$emit('update:selectedValues', this.internalValue);\n    },\n\n    getMessageKey (type, index) {\n      return `checkbox-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"mappings":"0MAUA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,kBAEN,QAAS,EAAA,QAET,MAAO,CAIL,WAAY,CACV,KAAM,EAAE,CACR,QAAS,KACT,UAAW,GACJ,IAIL,EAAA,EAAA,MACE,uGAAA,IAAA,GAED,CAEM,IARE,GAUZ,CAMD,eAAgB,CACd,KAAM,MACN,SAAW,CACT,MAAO,EAAE,EAEZ,CAKD,YAAa,CACX,KAAM,OACN,QAAS,iBACV,CAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,wBACV,CAKD,oBAAqB,CACnB,KAAM,OACN,QAAS,0BACV,CACF,CAED,MAAO,CAOL,QAOA,wBACD,CAED,MAAQ,CACN,MAAO,CACL,cAAe,KAAK,eACrB,EAGH,MAAO,CACL,eAAgB,EAAmB,CACjC,KAAK,cAAgB,GAQvB,cAAe,CACb,UAAW,GACX,QAAS,EAAkB,CACzB,KAAK,WAAW,eAAiB,GAEpC,CACF,CAED,QAAS,CAKP,cAAe,EAAO,EAAS,CACxB,EAEO,KAAK,cAAc,SAAS,EAAM,EAC5C,KAAK,cAAc,KAAK,EAAM,CAF9B,KAAK,cAAgB,KAAK,cAAc,OAAO,GAAgB,IAAiB,EAAM,CAKxF,KAAK,MAAM,QAAS,KAAK,cAAc,CACvC,KAAK,MAAM,wBAAyB,KAAK,cAAc,EAGzD,cAAe,EAAM,EAAO,CAC1B,MAAO,0BAA0B,EAAK,GAAG,EAAM,GAAG,KAAK,MAE1D,CACF"}
+{"version":3,"file":"checkbox-group.cjs","names":[],"sources":["../../../components/CheckboxGroup/CheckboxGroup.vue"],"sourcesContent":["<script>\nimport { DtInputGroup } from '../InputGroup';\n\n/**\n * Checkbox Groups are convenience components for a grouping of related Checkboxes.\n * While each Checkbox within the group is independent, the `v-model` on the group provides\n * a convenient interface for determining which Checkboxes within the group are checked.\n * @see https://dialtone.dialpad.com/components/checkbox_group.html\n */\nexport default {\n  name: 'DtCheckboxGroup',\n\n  extends: DtInputGroup,\n\n  props: {\n    /**\n     * A provided list of selected values(s) for the checkbox group\n     */\n    modelValue: {\n      type: Array,\n      default () {\n        return [];\n      },\n    },\n\n    /**\n     * A data qa tag for the radio group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'checkbox-group',\n    },\n\n    /**\n     * A data qa tag for the radio group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'checkbox-group-legend',\n    },\n\n    /**\n     * A data qa tag for the radio group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'checkbox-group-messages',\n    },\n  },\n\n  emits: [\n    /**\n     * Selected values for the checkbox group\n     *\n     * @event update:modelValue\n     * @type {Array}\n     */\n    'update:modelValue',\n  ],\n\n  data () {\n    return {\n      internalValue: this.modelValue,\n    };\n  },\n\n  watch: {\n    modelValue (newModelValue) {\n      this.internalValue = newModelValue;\n    },\n\n    /*\n    * watching value to support 2 way binding for slotted checkboxes.\n    * need this to pass value to slotted checkboxes if modified outside\n    * checkbox group.\n    */\n    internalValue: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.selectedValues = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted checkboxes.\n     * slotted checkbox will change this value and need to emit new value up.\n     */\n    setGroupValue (value, checked) {\n      if (!checked) {\n        this.internalValue = this.internalValue.filter(checkedValue => checkedValue !== value);\n      } else if (!this.internalValue.includes(value)) {\n        this.internalValue.push(value);\n      }\n\n      this.$emit('update:modelValue', this.internalValue);\n    },\n\n    getMessageKey (type, index) {\n      return `checkbox-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"mappings":"+FASA,IAAK,EAAU,CACb,KAAM,kBAEN,kDAAS,QAET,MAAO,CAIL,WAAY,CACV,KAAM,MACN,SAAW,CACT,MAAO,EAAE,EAEZ,CAKD,YAAa,CACX,KAAM,OACN,QAAS,iBACV,CAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,wBACV,CAKD,oBAAqB,CACnB,KAAM,OACN,QAAS,0BACV,CACF,CAED,MAAO,CAOL,oBACD,CAED,MAAQ,CACN,MAAO,CACL,cAAe,KAAK,WACrB,EAGH,MAAO,CACL,WAAY,EAAe,CACzB,KAAK,cAAgB,GAQvB,cAAe,CACb,UAAW,GACX,QAAS,EAAkB,CACzB,KAAK,WAAW,eAAiB,GAEpC,CACF,CAED,QAAS,CAKP,cAAe,EAAO,EAAS,CACxB,EAEO,KAAK,cAAc,SAAS,EAAM,EAC5C,KAAK,cAAc,KAAK,EAAM,CAF9B,KAAK,cAAgB,KAAK,cAAc,OAAO,GAAgB,IAAiB,EAAM,CAKxF,KAAK,MAAM,oBAAqB,KAAK,cAAc,EAGrD,cAAe,EAAM,EAAO,CAC1B,MAAO,0BAA0B,EAAK,GAAG,EAAM,GAAG,KAAK,MAE1D,CACF"}

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

@@ -1,17 +1,10 @@
 import e from "../input-group/input-group.js";
-import { warn as t } from "vue";
-//#region components/checkbox_group/checkbox_group.vue
-var n = {
-	compatConfig: { MODE: 3 },
+//#region components/CheckboxGroup/CheckboxGroup.vue
+var t = {
 	name: "DtCheckboxGroup",
 	extends: e,
 	props: {
 		modelValue: {
-			type: [],
-			default: null,
-			validator: (e) => e ? (t("Component uses selectedValues to initialize the model, modelValue is not supported by this component", void 0), !1) : !0
-		},
-		selectedValues: {
 			type: Array,
 			default() {
 				return [];
@@ -30,12 +23,12 @@ var n = {
 			default: "checkbox-group-messages"
 		}
 	},
-	emits: ["input", "update:selectedValues"],
+	emits: ["update:modelValue"],
 	data() {
-		return { internalValue: this.selectedValues };
+		return { internalValue: this.modelValue };
 	},
 	watch: {
-		selectedValues(e) {
+		modelValue(e) {
 			this.internalValue = e;
 		},
 		internalValue: {
@@ -47,7 +40,7 @@ var n = {
 	},
 	methods: {
 		setGroupValue(e, t) {
-			t ? this.internalValue.includes(e) || this.internalValue.push(e) : this.internalValue = this.internalValue.filter((t) => t !== e), this.$emit("input", this.internalValue), this.$emit("update:selectedValues", this.internalValue);
+			t ? this.internalValue.includes(e) || this.internalValue.push(e) : this.internalValue = this.internalValue.filter((t) => t !== e), this.$emit("update:modelValue", this.internalValue);
 		},
 		getMessageKey(e, t) {
 			return `checkbox-group-message-${e}-${t}-${this.id}`;
@@ -55,6 +48,6 @@ var n = {
 	}
 };
 //#endregion
-export { n as default };
+export { t as default };
 
 //# sourceMappingURL=checkbox-group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.js","names":[],"sources":["../../../components/checkbox_group/checkbox_group.vue"],"sourcesContent":["<script>\nimport { warn } from 'vue';\nimport { DtInputGroup } from '../input_group';\n\n/**\n * Checkbox Groups are convenience components for a grouping of related Checkboxes.\n * While each Checkbox within the group is independent, the `v-model` on the group provides\n * a convenient interface for determining which Checkboxes within the group are checked.\n * @see https://dialtone.dialpad.com/components/checkbox_group.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCheckboxGroup',\n\n  extends: DtInputGroup,\n\n  props: {\n    /**\n     * Not supported by this component, please use selectedValues\n     */\n    modelValue: {\n      type: [],\n      default: null,\n      validator: value => {\n        if (!value) {\n          return true;\n        }\n\n        warn(\n          'Component uses selectedValues to initialize the model, modelValue is not supported by this component',\n          this,\n        );\n\n        return false;\n      },\n    },\n\n    /**\n     * A provided list of selected values(s) for the checkbox group\n     * @model selectedValues\n     */\n    selectedValues: {\n      type: Array,\n      default () {\n        return [];\n      },\n    },\n\n    /**\n     * A data qa tag for the radio group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'checkbox-group',\n    },\n\n    /**\n     * A data qa tag for the radio group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'checkbox-group-legend',\n    },\n\n    /**\n     * A data qa tag for the radio group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'checkbox-group-messages',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {Array}\n     */\n    'input',\n    /**\n     * Selected values for the checkbox group\n     *\n     * @event input\n     * @type {Array}\n     */\n    'update:selectedValues',\n  ],\n\n  data () {\n    return {\n      internalValue: this.selectedValues,\n    };\n  },\n\n  watch: {\n    selectedValues (newSelectedValues) {\n      this.internalValue = newSelectedValues;\n    },\n\n    /*\n    * watching value to support 2 way binding for slotted checkboxes.\n    * need this to pass value to slotted checkboxes if modified outside\n    * checkbox group.\n    */\n    internalValue: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.selectedValues = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted checkboxes.\n     * slotted checkbox will change this value and need to emit new value up.\n     */\n    setGroupValue (value, checked) {\n      if (!checked) {\n        this.internalValue = this.internalValue.filter(checkedValue => checkedValue !== value);\n      } else if (!this.internalValue.includes(value)) {\n        this.internalValue.push(value);\n      }\n\n      this.$emit('input', this.internalValue);\n      this.$emit('update:selectedValues', this.internalValue);\n    },\n\n    getMessageKey (type, index) {\n      return `checkbox-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"mappings":";;;AAUA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,SAAS;CAET,OAAO;EAIL,YAAY;GACV,MAAM,EAAE;GACR,SAAS;GACT,YAAW,MACJ,KAIL,EACE,wGAAA,KAAA,EAED,EAEM,MARE;GAUZ;EAMD,gBAAgB;GACd,MAAM;GACN,UAAW;AACT,WAAO,EAAE;;GAEZ;EAKD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAKD,mBAAmB;GACjB,MAAM;GACN,SAAS;GACV;EAKD,qBAAqB;GACnB,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAO,CAOL,SAOA,wBACD;CAED,OAAQ;AACN,SAAO,EACL,eAAe,KAAK,gBACrB;;CAGH,OAAO;EACL,eAAgB,GAAmB;AACjC,QAAK,gBAAgB;;EAQvB,eAAe;GACb,WAAW;GACX,QAAS,GAAkB;AACzB,SAAK,WAAW,iBAAiB;;GAEpC;EACF;CAED,SAAS;EAKP,cAAe,GAAO,GAAS;AAQ7B,GAPK,IAEO,KAAK,cAAc,SAAS,EAAM,IAC5C,KAAK,cAAc,KAAK,EAAM,GAF9B,KAAK,gBAAgB,KAAK,cAAc,QAAO,MAAgB,MAAiB,EAAM,EAKxF,KAAK,MAAM,SAAS,KAAK,cAAc,EACvC,KAAK,MAAM,yBAAyB,KAAK,cAAc;;EAGzD,cAAe,GAAM,GAAO;AAC1B,UAAO,0BAA0B,EAAK,GAAG,EAAM,GAAG,KAAK;;EAE1D;CACF"}
+{"version":3,"file":"checkbox-group.js","names":[],"sources":["../../../components/CheckboxGroup/CheckboxGroup.vue"],"sourcesContent":["<script>\nimport { DtInputGroup } from '../InputGroup';\n\n/**\n * Checkbox Groups are convenience components for a grouping of related Checkboxes.\n * While each Checkbox within the group is independent, the `v-model` on the group provides\n * a convenient interface for determining which Checkboxes within the group are checked.\n * @see https://dialtone.dialpad.com/components/checkbox_group.html\n */\nexport default {\n  name: 'DtCheckboxGroup',\n\n  extends: DtInputGroup,\n\n  props: {\n    /**\n     * A provided list of selected values(s) for the checkbox group\n     */\n    modelValue: {\n      type: Array,\n      default () {\n        return [];\n      },\n    },\n\n    /**\n     * A data qa tag for the radio group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'checkbox-group',\n    },\n\n    /**\n     * A data qa tag for the radio group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'checkbox-group-legend',\n    },\n\n    /**\n     * A data qa tag for the radio group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'checkbox-group-messages',\n    },\n  },\n\n  emits: [\n    /**\n     * Selected values for the checkbox group\n     *\n     * @event update:modelValue\n     * @type {Array}\n     */\n    'update:modelValue',\n  ],\n\n  data () {\n    return {\n      internalValue: this.modelValue,\n    };\n  },\n\n  watch: {\n    modelValue (newModelValue) {\n      this.internalValue = newModelValue;\n    },\n\n    /*\n    * watching value to support 2 way binding for slotted checkboxes.\n    * need this to pass value to slotted checkboxes if modified outside\n    * checkbox group.\n    */\n    internalValue: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.selectedValues = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted checkboxes.\n     * slotted checkbox will change this value and need to emit new value up.\n     */\n    setGroupValue (value, checked) {\n      if (!checked) {\n        this.internalValue = this.internalValue.filter(checkedValue => checkedValue !== value);\n      } else if (!this.internalValue.includes(value)) {\n        this.internalValue.push(value);\n      }\n\n      this.$emit('update:modelValue', this.internalValue);\n    },\n\n    getMessageKey (type, index) {\n      return `checkbox-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"mappings":";;AASA,IAAK,IAAU;CACb,MAAM;CAEN,SAAS;CAET,OAAO;EAIL,YAAY;GACV,MAAM;GACN,UAAW;AACT,WAAO,EAAE;;GAEZ;EAKD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAKD,mBAAmB;GACjB,MAAM;GACN,SAAS;GACV;EAKD,qBAAqB;GACnB,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAO,CAOL,oBACD;CAED,OAAQ;AACN,SAAO,EACL,eAAe,KAAK,YACrB;;CAGH,OAAO;EACL,WAAY,GAAe;AACzB,QAAK,gBAAgB;;EAQvB,eAAe;GACb,WAAW;GACX,QAAS,GAAkB;AACzB,SAAK,WAAW,iBAAiB;;GAEpC;EACF;CAED,SAAS;EAKP,cAAe,GAAO,GAAS;AAO7B,GANK,IAEO,KAAK,cAAc,SAAS,EAAM,IAC5C,KAAK,cAAc,KAAK,EAAM,GAF9B,KAAK,gBAAgB,KAAK,cAAc,QAAO,MAAgB,MAAiB,EAAM,EAKxF,KAAK,MAAM,qBAAqB,KAAK,cAAc;;EAGrD,cAAe,GAAM,GAAO;AAC1B,UAAO,0BAA0B,EAAK,GAAG,EAAM,GAAG,KAAK;;EAE1D;CACF"}

package/dist/lib/checkbox-group/checkboxes-decorator.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../checkbox/checkbox.cjs`);require(`../checkbox/index.cjs`);let n=require(`vue`);var r={compatConfig:{MODE:3},name:`CheckboxesDecorator`,components:{DtCheckbox:t.default},created(){this.options=[{label:`Apple`,value:`apple`},{label:`Banana`,value:`banana`},{label:`Other`,value:`other`}]}};function i(e,t,r,i,a,o){let s=(0,n.resolveComponent)(`dt-checkbox`);return(0,n.openBlock)(),(0,n.createElementBlock)(`div`,null,[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(e.options,e=>((0,n.openBlock)(),(0,n.createBlock)(s,{key:e.value,value:e.value},{default:(0,n.withCtx)(()=>[(0,n.createElementVNode)(`span`,null,(0,n.toDisplayString)(e.label),1)]),_:2},1032,[`value`]))),128))])}var a=e.t(r,[[`render`,i]]);exports.default=a;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../checkbox/checkbox.cjs`);let n=require(`vue`);var r={name:`CheckboxesDecorator`,components:{DtCheckbox:t.default},created(){this.options=[{label:`Apple`,value:`apple`},{label:`Banana`,value:`banana`},{label:`Other`,value:`other`}]}};function i(e,t,r,i,a,o){let s=(0,n.resolveComponent)(`dt-checkbox`);return(0,n.openBlock)(),(0,n.createElementBlock)(`div`,null,[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(e.options,e=>((0,n.openBlock)(),(0,n.createBlock)(s,{key:e.value,value:e.value},{default:(0,n.withCtx)(()=>[(0,n.createElementVNode)(`span`,null,(0,n.toDisplayString)(e.label),1)]),_:2},1032,[`value`]))),128))])}var a=e.t(r,[[`render`,i]]);exports.default=a;
 //# sourceMappingURL=checkboxes-decorator.cjs.map

package/dist/lib/checkbox-group/checkboxes-decorator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkboxes-decorator.cjs","names":[],"sources":["../../../components/checkbox_group/checkboxes_decorator.vue"],"sourcesContent":["<template>\n  <div>\n    <dt-checkbox\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      :value=\"option.value\"\n    >\n      <span>{{ option.label }}</span>\n    </dt-checkbox>\n  </div>\n</template>\n\n<script>\nimport { DtCheckbox } from '../checkbox';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'CheckboxesDecorator',\n  components: { DtCheckbox },\n  created () {\n    this.options = [\n      { label: 'Apple', value: 'apple' },\n      { label: 'Banana', value: 'banana' },\n      { label: 'Other', value: 'other' },\n    ];\n  },\n};\n</script>\n"],"mappings":"+RAeA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,sBACN,WAAY,CAAE,WAAA,EAAA,QAAY,CAC1B,SAAW,CACT,KAAK,QAAU,CACb,CAAE,MAAO,QAAS,MAAO,QAAS,CAClC,CAAE,MAAO,SAAU,MAAO,SAAU,CACpC,CAAE,MAAO,QAAS,MAAO,QAAS,CACnC,EAEJ,sHAjBO,MAAA,KAAA,GAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,EAAA,oBADU,EAAA,SAAA,MAAA,EAAA,EAAA,YALK,EAAA,QAAV,wCAKK,EAAA,CAJX,IAAK,EAAO,MACZ,MAAO,EAAO,kCAEgB,EAAA,EAAA,EAAA,oBAAA,OAAA,MAAA,EAAA,EAAA,iBAAtB,EAAO,MAAK,CAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"checkboxes-decorator.cjs","names":[],"sources":["../../../components/CheckboxGroup/CheckboxesDecorator.vue"],"sourcesContent":["<template>\n  <div>\n    <dt-checkbox\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      :value=\"option.value\"\n    >\n      <span>{{ option.label }}</span>\n    </dt-checkbox>\n  </div>\n</template>\n\n<script>\nimport { DtCheckbox } from '../Checkbox';\n\nexport default {\n  name: 'CheckboxesDecorator',\n  components: { DtCheckbox },\n  created () {\n    this.options = [\n      { label: 'Apple', value: 'apple' },\n      { label: 'Banana', value: 'banana' },\n      { label: 'Other', value: 'other' },\n    ];\n  },\n};\n</script>\n"],"mappings":"8PAeA,IAAK,EAAU,CACb,KAAM,sBACN,WAAY,CAAE,WAAA,EAAA,QAAY,CAC1B,SAAW,CACT,KAAK,QAAU,CACb,CAAE,MAAO,QAAS,MAAO,QAAS,CAClC,CAAE,MAAO,SAAU,MAAO,SAAU,CACpC,CAAE,MAAO,QAAS,MAAO,QAAS,CACnC,EAEJ,sHAhBO,MAAA,KAAA,GAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,EAAA,oBADU,EAAA,SAAA,MAAA,EAAA,EAAA,YALK,EAAA,QAAV,wCAKK,EAAA,CAJX,IAAK,EAAO,MACZ,MAAO,EAAO,kCAEgB,EAAA,EAAA,EAAA,oBAAA,OAAA,MAAA,EAAA,EAAA,iBAAtB,EAAO,MAAK,CAAA,EAAA,CAAA,CAAA"}

package/dist/lib/checkbox-group/checkboxes-decorator.js

@@ -1,10 +1,8 @@
 import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
 import t from "../checkbox/checkbox.js";
-import "../checkbox/index.js";
 import { Fragment as n, createBlock as r, createElementBlock as i, createElementVNode as a, openBlock as o, renderList as s, resolveComponent as c, toDisplayString as l, withCtx as u } from "vue";
-//#region components/checkbox_group/checkboxes_decorator.vue
+//#region components/CheckboxGroup/CheckboxesDecorator.vue
 var d = {
-	compatConfig: { MODE: 3 },
 	name: "CheckboxesDecorator",
 	components: { DtCheckbox: t },
 	created() {

package/dist/lib/checkbox-group/checkboxes-decorator.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkboxes-decorator.js","names":[],"sources":["../../../components/checkbox_group/checkboxes_decorator.vue"],"sourcesContent":["<template>\n  <div>\n    <dt-checkbox\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      :value=\"option.value\"\n    >\n      <span>{{ option.label }}</span>\n    </dt-checkbox>\n  </div>\n</template>\n\n<script>\nimport { DtCheckbox } from '../checkbox';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'CheckboxesDecorator',\n  components: { DtCheckbox },\n  created () {\n    this.options = [\n      { label: 'Apple', value: 'apple' },\n      { label: 'Banana', value: 'banana' },\n      { label: 'Other', value: 'other' },\n    ];\n  },\n};\n</script>\n"],"mappings":";;;;;AAeA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CACN,YAAY,EAAE,YAAA,GAAY;CAC1B,UAAW;AACT,OAAK,UAAU;GACb;IAAE,OAAO;IAAS,OAAO;IAAS;GAClC;IAAE,OAAO;IAAU,OAAO;IAAU;GACpC;IAAE,OAAO;IAAS,OAAO;IAAS;GACnC;;CAEJ;;;aAzBC,EAQM,OAAA,MAAA,EAAA,EAAA,GAAA,EAPJ,EAMc,GAAA,MAAA,EALK,EAAA,UAAV,YADT,EAMc,GAAA;EAJX,KAAK,EAAO;EACZ,OAAO,EAAO;;mBAEgB,CAA/B,EAA+B,QAAA,MAAA,EAAtB,EAAO,MAAK,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"checkboxes-decorator.js","names":[],"sources":["../../../components/CheckboxGroup/CheckboxesDecorator.vue"],"sourcesContent":["<template>\n  <div>\n    <dt-checkbox\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      :value=\"option.value\"\n    >\n      <span>{{ option.label }}</span>\n    </dt-checkbox>\n  </div>\n</template>\n\n<script>\nimport { DtCheckbox } from '../Checkbox';\n\nexport default {\n  name: 'CheckboxesDecorator',\n  components: { DtCheckbox },\n  created () {\n    this.options = [\n      { label: 'Apple', value: 'apple' },\n      { label: 'Banana', value: 'banana' },\n      { label: 'Other', value: 'other' },\n    ];\n  },\n};\n</script>\n"],"mappings":";;;;AAeA,IAAK,IAAU;CACb,MAAM;CACN,YAAY,EAAE,YAAA,GAAY;CAC1B,UAAW;AACT,OAAK,UAAU;GACb;IAAE,OAAO;IAAS,OAAO;IAAS;GAClC;IAAE,OAAO;IAAU,OAAO;IAAU;GACpC;IAAE,OAAO;IAAS,OAAO;IAAS;GACnC;;CAEJ;;;aAxBC,EAQM,OAAA,MAAA,EAAA,EAAA,GAAA,EAPJ,EAMc,GAAA,MAAA,EALK,EAAA,UAAV,YADT,EAMc,GAAA;EAJX,KAAK,EAAO;EACZ,OAAO,EAAO;;mBAEgB,CAA/B,EAA+B,QAAA,MAAA,EAAtB,EAAO,MAAK,EAAA,EAAA,CAAA,CAAA"}

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

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={xs:`d-chip__label--xs`,sm:`d-chip__label--sm`,md:``},t={xs:`d-chip__close--xs`,sm:`d-chip__close--sm`,md:``},n={xs:`200`,sm:`200`,md:`200`},r={CHIP_SIZE_MODIFIERS:e,CHIP_CLOSE_BUTTON_SIZE_MODIFIERS:t,CHIP_ICON_SIZES:n};exports.CHIP_CLOSE_BUTTON_SIZE_MODIFIERS=t,exports.CHIP_ICON_SIZES=n,exports.CHIP_SIZE_MODIFIERS=e,exports.default=r;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={100:`d-chip__label--xs`,200:`d-chip__label--sm`,300:``,xs:`d-chip__label--xs`,sm:`d-chip__label--sm`,md:``},t={100:`d-chip__close--xs`,200:`d-chip__close--sm`,300:``,xs:`d-chip__close--xs`,sm:`d-chip__close--sm`,md:``},n={100:`200`,200:`200`,300:`200`,xs:`200`,sm:`200`,md:`200`},r={CHIP_SIZE_MODIFIERS:e,CHIP_CLOSE_BUTTON_SIZE_MODIFIERS:t,CHIP_ICON_SIZES:n};exports.CHIP_CLOSE_BUTTON_SIZE_MODIFIERS=t,exports.CHIP_ICON_SIZES=n,exports.CHIP_SIZE_MODIFIERS=e,exports.default=r;
 //# sourceMappingURL=chip-constants.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"chip-constants.cjs","names":[],"sources":["../../../components/chip/chip_constants.js"],"sourcesContent":["export const CHIP_SIZE_MODIFIERS = {\n  xs: 'd-chip__label--xs',\n  sm: 'd-chip__label--sm',\n  md: '',\n};\n\nexport const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-chip__close--xs',\n  sm: 'd-chip__close--sm',\n  md: '',\n};\n\nexport const CHIP_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '200',\n};\n\nexport default {\n  CHIP_SIZE_MODIFIERS,\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n};\n"],"mappings":"+FAAA,IAAa,EAAsB,CACjC,GAAI,oBACJ,GAAI,oBACJ,GAAI,GACL,CAEY,EAAmC,CAC9C,GAAI,oBACJ,GAAI,oBACJ,GAAI,GACL,CAEY,EAAkB,CAC7B,GAAI,MACJ,GAAI,MACJ,GAAI,MACL,CAED,EAAe,CACb,sBACA,mCACA,kBACD"}
+{"version":3,"file":"chip-constants.cjs","names":[],"sources":["../../../components/Chip/ChipConstants.js"],"sourcesContent":["export const CHIP_SIZE_MODIFIERS = {\n  // Numeric (preferred)\n  100: 'd-chip__label--xs',\n  200: 'd-chip__label--sm',\n  300: '',\n  // T-shirt aliases (deprecated)\n  xs: 'd-chip__label--xs',\n  sm: 'd-chip__label--sm',\n  md: '',\n};\n\nexport const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {\n  // Numeric (preferred)\n  100: 'd-chip__close--xs',\n  200: 'd-chip__close--sm',\n  300: '',\n  // T-shirt aliases (deprecated)\n  xs: 'd-chip__close--xs',\n  sm: 'd-chip__close--sm',\n  md: '',\n};\n\nexport const CHIP_ICON_SIZES = {\n  // Numeric (preferred)\n  100: '200',\n  200: '200',\n  300: '200',\n  // T-shirt aliases (deprecated)\n  xs: '200',\n  sm: '200',\n  md: '200',\n};\n\nexport default {\n  CHIP_SIZE_MODIFIERS,\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n};\n"],"mappings":"+FAAA,IAAa,EAAsB,CAEjC,IAAK,oBACL,IAAK,oBACL,IAAK,GAEL,GAAI,oBACJ,GAAI,oBACJ,GAAI,GACL,CAEY,EAAmC,CAE9C,IAAK,oBACL,IAAK,oBACL,IAAK,GAEL,GAAI,oBACJ,GAAI,oBACJ,GAAI,GACL,CAEY,EAAkB,CAE7B,IAAK,MACL,IAAK,MACL,IAAK,MAEL,GAAI,MACJ,GAAI,MACJ,GAAI,MACL,CAED,EAAe,CACb,sBACA,mCACA,kBACD"}

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

@@ -1,13 +1,22 @@
-//#region components/chip/chip_constants.js
+//#region components/Chip/ChipConstants.js
 var e = {
+	100: "d-chip__label--xs",
+	200: "d-chip__label--sm",
+	300: "",
 	xs: "d-chip__label--xs",
 	sm: "d-chip__label--sm",
 	md: ""
 }, t = {
+	100: "d-chip__close--xs",
+	200: "d-chip__close--sm",
+	300: "",
 	xs: "d-chip__close--xs",
 	sm: "d-chip__close--sm",
 	md: ""
 }, n = {
+	100: "200",
+	200: "200",
+	300: "200",
 	xs: "200",
 	sm: "200",
 	md: "200"

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

@@ -1 +1 @@
-{"version":3,"file":"chip-constants.js","names":[],"sources":["../../../components/chip/chip_constants.js"],"sourcesContent":["export const CHIP_SIZE_MODIFIERS = {\n  xs: 'd-chip__label--xs',\n  sm: 'd-chip__label--sm',\n  md: '',\n};\n\nexport const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-chip__close--xs',\n  sm: 'd-chip__close--sm',\n  md: '',\n};\n\nexport const CHIP_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '200',\n};\n\nexport default {\n  CHIP_SIZE_MODIFIERS,\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n};\n"],"mappings":";AAAA,IAAa,IAAsB;CACjC,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAAmC;CAC9C,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAAkB;CAC7B,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAED,IAAe;CACb;CACA;CACA;CACD"}
+{"version":3,"file":"chip-constants.js","names":[],"sources":["../../../components/Chip/ChipConstants.js"],"sourcesContent":["export const CHIP_SIZE_MODIFIERS = {\n  // Numeric (preferred)\n  100: 'd-chip__label--xs',\n  200: 'd-chip__label--sm',\n  300: '',\n  // T-shirt aliases (deprecated)\n  xs: 'd-chip__label--xs',\n  sm: 'd-chip__label--sm',\n  md: '',\n};\n\nexport const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {\n  // Numeric (preferred)\n  100: 'd-chip__close--xs',\n  200: 'd-chip__close--sm',\n  300: '',\n  // T-shirt aliases (deprecated)\n  xs: 'd-chip__close--xs',\n  sm: 'd-chip__close--sm',\n  md: '',\n};\n\nexport const CHIP_ICON_SIZES = {\n  // Numeric (preferred)\n  100: '200',\n  200: '200',\n  300: '200',\n  // T-shirt aliases (deprecated)\n  xs: '200',\n  sm: '200',\n  md: '200',\n};\n\nexport default {\n  CHIP_SIZE_MODIFIERS,\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n};\n"],"mappings":";AAAA,IAAa,IAAsB;CAEjC,KAAK;CACL,KAAK;CACL,KAAK;CAEL,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAAmC;CAE9C,KAAK;CACL,KAAK;CACL,KAAK;CAEL,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAAkB;CAE7B,KAAK;CACL,KAAK;CACL,KAAK;CAEL,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAED,IAAe;CACb;CACA;CACA;CACD"}

package/dist/lib/chip/chip.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../../localization/index.cjs`),r=require(`../button/button.cjs`),i=require(`./chip-constants.cjs`);let a=require(`vue`),o=require(`@dialpad/dialtone-icons/vue3`);var s={compatConfig:{MODE:3},name:`DtChip`,components:{DtButton:r.default,DtIconClose:o.DtIconClose},props:{disabled:{type:Boolean,default:!1},hideClose:{type:Boolean,default:!1},size:{type:String,default:`md`,validator:e=>Object.keys(i.CHIP_SIZE_MODIFIERS).includes(e)},interactive:{type:Boolean,default:!0},id:{type:String,default:function(){return e.getUniqueString()}},ariaLabel:{type:String,default:``},contentClass:{type:[String,Array,Object],default:``},labelClass:{type:[String,Array,Object],default:``}},emits:[`click`,`close`,`keyup`,`keydown`],data(){return{isActive:!1,hasSlotContent:e.hasSlotContent,i18n:new n.DialtoneLocalization}},computed:{chipListeners(){return{click:e=>{this.interactive&&this.$emit(`click`,e)},keydown:e=>{e.code?.toLowerCase()===`delete`?this.onClose():this.$emit(`keydown`,e)},keyup:e=>{this.$emit(`keyup`,e)}}},closeButtonIconSize(){return i.CHIP_ICON_SIZES[this.size]},closeButtonTitle(){return this.i18n.$t(`DIALTONE_CLOSE_BUTTON`)}},methods:{chipClasses(){return[this.$attrs[`grouped-chip`]?`d-chip`:`d-chip__label`,i.CHIP_SIZE_MODIFIERS[this.size],this.labelClass,this.disabled&&`d-chip--disabled`]},chipCloseButtonClasses(){return[`d-chip__close`,i.CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size],this.disabled&&`d-chip__close--disabled`]},onClose(){this.hideClose||this.$emit(`close`)}}},c={class:`d-chip`},l={key:0,class:`d-chip__icon`,"data-qa":`dt-chip-icon`},u={key:1,"data-qa":`dt-chip-avatar`},d=[`id`];function f(e,t,n,r,i,o){let s=(0,a.resolveComponent)(`dt-icon-close`),f=(0,a.resolveComponent)(`dt-button`);return(0,a.openBlock)(),(0,a.createElementBlock)(`span`,c,[((0,a.openBlock)(),(0,a.createBlock)((0,a.resolveDynamicComponent)(n.interactive?`button`:`span`),(0,a.mergeProps)({id:n.id,"aria-label":n.ariaLabel,"aria-labelledby":n.ariaLabel?void 0:`${n.id}-content`,"aria-disabled":n.disabled,class:o.chipClasses(),type:n.interactive&&`button`,"data-qa":`dt-chip`,tabindex:n.disabled?-1:null},(0,a.toHandlers)(o.chipListeners)),{default:(0,a.withCtx)(()=>[i.hasSlotContent(e.$slots.icon)?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,l,[(0,a.renderSlot)(e.$slots,`icon`)])):i.hasSlotContent(e.$slots.avatar)?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,u,[(0,a.renderSlot)(e.$slots,`avatar`)])):(0,a.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.default)?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:2,id:`${n.id}-content`,class:(0,a.normalizeClass)([`d-chip__text`,n.contentClass]),"data-qa":`dt-chip-label`},[(0,a.renderSlot)(e.$slots,`default`)],10,d)):(0,a.createCommentVNode)(``,!0)]),_:3},16,[`id`,`aria-label`,`aria-labelledby`,`aria-disabled`,`class`,`type`,`tabindex`])),n.hideClose?(0,a.createCommentVNode)(``,!0):((0,a.openBlock)(),(0,a.createBlock)(f,{key:0,class:(0,a.normalizeClass)(o.chipCloseButtonClasses()),"data-qa":`dt-chip-close`,"aria-label":o.closeButtonTitle,"aria-disabled":n.disabled,title:o.closeButtonTitle,tabindex:n.disabled?-1:null,onClick:t[0]||(t[0]=t=>e.$emit(`close`))},{icon:(0,a.withCtx)(()=>[(0,a.createVNode)(s,{size:o.closeButtonIconSize},null,8,[`size`])]),_:1},8,[`class`,`aria-label`,`aria-disabled`,`title`,`tabindex`]))])}var p=t.t(s,[[`render`,f]]);exports.default=p;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../../localization/index.cjs`),r=require(`../button/button.cjs`),i=require(`./chip-constants.cjs`);let a=require(`vue`),o=require(`@dialpad/dialtone-icons/vue`);var s={name:`DtChip`,components:{DtButton:r.default,DtIconClose:o.DtIconClose},props:{disabled:{type:Boolean,default:!1},showClose:{type:Boolean,default:!0},size:{type:[String,Number],default:300,validator:e=>Object.keys(i.CHIP_SIZE_MODIFIERS).includes(String(e))},interactive:{type:Boolean,default:!1},id:{type:String,default:function(){return e.getUniqueString()}},ariaLabel:{type:String,default:``},contentClass:{type:[String,Array,Object],default:``},labelClass:{type:[String,Array,Object],default:``},iconClass:{type:[String,Array,Object],default:``},avatarClass:{type:[String,Array,Object],default:``}},emits:[`click`,`close`,`keyup`,`keydown`],data(){return{isActive:!1,hasSlotContent:e.hasSlotContent,i18n:new n.DialtoneLocalization}},computed:{chipListeners(){return{click:e=>{this.interactive&&this.$emit(`click`,e)},keydown:e=>{e.code?.toLowerCase()===`delete`?this.onClose():this.$emit(`keydown`,e)},keyup:e=>{this.$emit(`keyup`,e)}}},closeButtonIconSize(){return i.CHIP_ICON_SIZES[String(this.size)]},closeButtonTitle(){return this.i18n.$t(`DIALTONE_CLOSE_BUTTON`)}},methods:{chipClasses(){return[this.$attrs[`grouped-chip`]?`d-chip`:`d-chip__label`,i.CHIP_SIZE_MODIFIERS[String(this.size)],this.labelClass,this.disabled&&`d-chip--disabled`]},chipCloseButtonClasses(){return[`d-chip__close`,i.CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[String(this.size)],this.disabled&&`d-chip__close--disabled`]},onClose(){this.showClose&&this.$emit(`close`)}}},c={class:`d-chip`},l=[`id`];function u(e,t,n,r,i,o){let s=(0,a.resolveComponent)(`dt-icon-close`),u=(0,a.resolveComponent)(`dt-button`);return(0,a.openBlock)(),(0,a.createElementBlock)(`span`,c,[((0,a.openBlock)(),(0,a.createBlock)((0,a.resolveDynamicComponent)(n.interactive?`button`:`span`),(0,a.mergeProps)({id:n.id,"aria-label":n.ariaLabel,"aria-labelledby":n.ariaLabel?void 0:`${n.id}-content`,"aria-disabled":n.disabled,class:o.chipClasses(),type:n.interactive&&`button`,"data-qa":`dt-chip`,tabindex:n.disabled?-1:null},(0,a.toHandlers)(o.chipListeners)),{default:(0,a.withCtx)(()=>[i.hasSlotContent(e.$slots.icon)?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:0,class:(0,a.normalizeClass)([`d-chip__icon`,n.iconClass]),"data-qa":`dt-chip-icon`},[(0,a.renderSlot)(e.$slots,`icon`)],2)):i.hasSlotContent(e.$slots.avatar)?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:1,class:(0,a.normalizeClass)(n.avatarClass),"data-qa":`dt-chip-avatar`},[(0,a.renderSlot)(e.$slots,`avatar`)],2)):(0,a.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.default)?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:2,id:`${n.id}-content`,class:(0,a.normalizeClass)([`d-chip__text`,n.contentClass]),"data-qa":`dt-chip-label`},[(0,a.renderSlot)(e.$slots,`default`)],10,l)):(0,a.createCommentVNode)(``,!0)]),_:3},16,[`id`,`aria-label`,`aria-labelledby`,`aria-disabled`,`class`,`type`,`tabindex`])),n.showClose?((0,a.openBlock)(),(0,a.createBlock)(u,{key:0,class:(0,a.normalizeClass)(o.chipCloseButtonClasses()),"data-qa":`dt-chip-close`,"aria-label":o.closeButtonTitle,"aria-disabled":n.disabled,title:o.closeButtonTitle,tabindex:n.disabled?-1:null,onClick:t[0]||(t[0]=t=>e.$emit(`close`))},{startIcon:(0,a.withCtx)(()=>[(0,a.createVNode)(s,{size:o.closeButtonIconSize},null,8,[`size`])]),_:1},8,[`class`,`aria-label`,`aria-disabled`,`title`,`tabindex`])):(0,a.createCommentVNode)(``,!0)])}var d=t.t(s,[[`render`,u]]);exports.default=d;
 //# sourceMappingURL=chip.cjs.map

package/dist/lib/chip/chip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"chip.cjs","names":[],"sources":["../../../components/chip/chip.vue"],"sourcesContent":["<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :aria-label=\"ariaLabel\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :aria-disabled=\"disabled\"\n      :class=\"chipClasses()\"\n      :type=\"interactive && 'button'\"\n      data-qa=\"dt-chip\"\n      :tabindex=\"disabled ? -1 : null\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"hasSlotContent($slots.icon)\"\n        class=\"d-chip__icon\"\n        data-qa=\"dt-chip-icon\"\n      >\n        <!-- @slot slot for Chip icon -->\n        <slot name=\"icon\" />\n      </span>\n      <span\n        v-else-if=\"hasSlotContent($slots.avatar)\"\n        data-qa=\"dt-chip-avatar\"\n      >\n        <!-- @slot slot for Chip avatar -->\n        <slot name=\"avatar\" />\n      </span>\n      <span\n        v-if=\"hasSlotContent($slots.default)\"\n        :id=\"`${id}-content`\"\n        :class=\"['d-chip__text', contentClass]\"\n        data-qa=\"dt-chip-label\"\n      >\n        <!-- @slot slot for Content within chip -->\n        <slot />\n      </span>\n    </component>\n    <dt-button\n      v-if=\"!hideClose\"\n      :class=\"chipCloseButtonClasses()\"\n      data-qa=\"dt-chip-close\"\n      :aria-label=\"closeButtonTitle\"\n      :aria-disabled=\"disabled\"\n      :title=\"closeButtonTitle\"\n      :tabindex=\"disabled ? -1 : null\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon-close\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIconClose,\n  },\n\n  props: {\n    /**\n     * Whether the chip is disabled\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the close button on the chip\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The size of the chip.\n     * @values xs, sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n\n    /**\n     * Native chip key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        click: event => {\n          if (this.interactive) this.$emit('click', event);\n        },\n\n        keydown: event => {\n          if (event.code?.toLowerCase() === 'delete') {\n            this.onClose();\n          } else {\n            this.$emit('keydown', event);\n          }\n        },\n\n        keyup: event => {\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    closeButtonIconSize () {\n      return CHIP_ICON_SIZES[this.size];\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    chipClasses () {\n      return [\n        this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label',\n        CHIP_SIZE_MODIFIERS[this.size],\n        this.labelClass,\n        this.disabled && 'd-chip--disabled',\n      ];\n    },\n\n    chipCloseButtonClasses () {\n      return [\n        'd-chip__close',\n        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size],\n        this.disabled && 'd-chip__close--disabled',\n      ];\n    },\n\n    onClose () {\n      if (!this.hideClose) {\n        this.$emit('close');\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"chip.cjs","names":[],"sources":["../../../components/Chip/Chip.vue"],"sourcesContent":["<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :aria-label=\"ariaLabel\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :aria-disabled=\"disabled\"\n      :class=\"chipClasses()\"\n      :type=\"interactive && 'button'\"\n      data-qa=\"dt-chip\"\n      :tabindex=\"disabled ? -1 : null\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"hasSlotContent($slots.icon)\"\n        :class=\"['d-chip__icon', iconClass]\"\n        data-qa=\"dt-chip-icon\"\n      >\n        <!-- @slot slot for Chip icon -->\n        <slot name=\"icon\" />\n      </span>\n      <span\n        v-else-if=\"hasSlotContent($slots.avatar)\"\n        :class=\"avatarClass\"\n        data-qa=\"dt-chip-avatar\"\n      >\n        <!-- @slot slot for Chip avatar -->\n        <slot name=\"avatar\" />\n      </span>\n      <span\n        v-if=\"hasSlotContent($slots.default)\"\n        :id=\"`${id}-content`\"\n        :class=\"['d-chip__text', contentClass]\"\n        data-qa=\"dt-chip-label\"\n      >\n        <!-- @slot slot for Content within chip -->\n        <slot />\n      </span>\n    </component>\n    <dt-button\n      v-if=\"showClose\"\n      :class=\"chipCloseButtonClasses()\"\n      data-qa=\"dt-chip-close\"\n      :aria-label=\"closeButtonTitle\"\n      :aria-disabled=\"disabled\"\n      :title=\"closeButtonTitle\"\n      :tabindex=\"disabled ? -1 : null\"\n      @click=\"$emit('close')\"\n    >\n      <template #startIcon>\n        <dt-icon-close\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/Button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './ChipConstants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n */\nexport default {\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIconClose,\n  },\n\n  props: {\n    /**\n     * Whether the chip is disabled\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows the close button on the chip\n     * @values true, false\n     */\n    showClose: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the chip.\n     * @values 100, 200, 300\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(String(s)),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the icon wrapper element.\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the avatar wrapper element.\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n\n    /**\n     * Native chip key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        click: event => {\n          if (this.interactive) this.$emit('click', event);\n        },\n\n        keydown: event => {\n          if (event.code?.toLowerCase() === 'delete') {\n            this.onClose();\n          } else {\n            this.$emit('keydown', event);\n          }\n        },\n\n        keyup: event => {\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    closeButtonIconSize () {\n      return CHIP_ICON_SIZES[String(this.size)];\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    chipClasses () {\n      return [\n        this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label',\n        CHIP_SIZE_MODIFIERS[String(this.size)],\n        this.labelClass,\n        this.disabled && 'd-chip--disabled',\n      ];\n    },\n\n    chipCloseButtonClasses () {\n      return [\n        'd-chip__close',\n        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[String(this.size)],\n        this.disabled && 'd-chip__close--disabled',\n      ];\n    },\n\n    onClose () {\n      if (this.showClose) {\n        this.$emit('close');\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"yZA4EA,IAAK,EAAU,CACb,KAAM,SAEN,WAAY,CACV,SAAA,EAAA,QACA,YAAA,EAAA,YACD,CAED,MAAO,CAKL,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,UAAY,GAAM,OAAO,KAAK,EAAA,oBAAoB,CAAC,SAAS,OAAO,EAAE,CAAC,CACvE,CAOD,YAAa,CACX,KAAM,QACN,QAAS,GACV,CAKD,GAAI,CACF,KAAM,OACN,QAAS,UAAY,CAAE,OAAO,EAAA,iBAAiB,EAChD,CAMD,UAAW,CACT,KAAM,OACN,QAAS,GACV,CAKD,aAAc,CACZ,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,UAAW,CACT,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CACF,CAED,MAAO,CAOL,QAOA,QAQA,QAQA,UACD,CAED,MAAQ,CACN,MAAO,CACL,SAAU,GACV,eAAA,EAAA,eACA,KAAM,IAAI,EAAA,qBACX,EAGH,SAAU,CACR,eAAiB,CACf,MAAO,CACL,MAAO,GAAS,CACV,KAAK,aAAa,KAAK,MAAM,QAAS,EAAM,EAGlD,QAAS,GAAS,CACZ,EAAM,MAAM,aAAY,GAAM,SAChC,KAAK,SAAS,CAEd,KAAK,MAAM,UAAW,EAAM,EAIhC,MAAO,GAAS,CACd,KAAK,MAAM,QAAS,EAAM,EAE7B,EAGH,qBAAuB,CACrB,OAAO,EAAA,gBAAgB,OAAO,KAAK,KAAK,GAG1C,kBAAoB,CAClB,OAAO,KAAK,KAAK,GAAG,wBAAwB,EAE/C,CAED,QAAS,CACP,aAAe,CACb,MAAO,CACL,KAAK,OAAO,gBAAkB,SAAW,gBACzC,EAAA,oBAAoB,OAAO,KAAK,KAAK,EACrC,KAAK,WACL,KAAK,UAAY,mBAClB,EAGH,wBAA0B,CACxB,MAAO,CACL,gBACA,EAAA,iCAAiC,OAAO,KAAK,KAAK,EAClD,KAAK,UAAY,0BAClB,EAGH,SAAW,CACL,KAAK,WACP,KAAK,MAAM,QAAQ,EAGxB,CACF,IA3QO,MAAM,SAAQ,uKAuDb,OAvDP,EAuDO,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBArDE,EAAA,YAAW,SAAA,OAAA,EAAA,EAAA,EAAA,YAoCN,CAnCT,GAAI,EAAA,GACJ,aAAY,EAAA,UACZ,kBAAiB,EAAA,UAAY,IAAA,GAAS,GAAM,EAAA,GAAE,UAC9C,gBAAe,EAAA,SACf,MAAO,EAAA,aAAW,CAClB,KAAM,EAAA,aAAW,SAClB,UAAQ,UACP,SAAU,EAAA,SAAQ,GAAA,uBACC,EAAd,cAAa,CAAA,CAAA,2BASZ,CANC,EAAA,eAAe,EAAA,OAAO,KAAI,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAM3B,OAAA,OALJ,OAAA,EAAA,EAAA,gBAAK,CAAA,eAAmB,EAAA,UAAS,CAAA,CAClC,UAAQ,kCAGY,EAAA,OAAA,OAAA,CAAA,CAAA,EAAA,EAGT,EAAA,eAAe,EAAA,OAAO,OAAM,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAMlC,OAAA,OALJ,OAAA,EAAA,EAAA,gBAAO,EAAA,YAAW,CACnB,UAAQ,oCAGc,EAAA,OAAA,SAAA,CAAA,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAGhB,EAAA,eAAe,EAAA,OAAO,QAAO,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAO9B,OAAA,OANJ,GAAE,GAAK,EAAA,GAAE,UACT,OAAA,EAAA,EAAA,gBAAK,CAAA,eAAmB,EAAA,aAAY,CAAA,CACrC,UAAQ,mCAGA,EAAA,OAAA,UAAA,CAAA,CAAA,GAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAAA,CAAA,2FAIJ,EAAA,YAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAcI,EAAA,OAbT,OAAA,EAAA,EAAA,gBAAO,EAAA,wBAAsB,CAAA,CAC9B,UAAQ,gBACP,aAAY,EAAA,iBACZ,gBAAe,EAAA,SACf,MAAO,EAAA,iBACP,SAAU,EAAA,SAAQ,GAAA,KAClB,QAAK,EAAA,KAAA,EAAA,GAAA,GAAE,EAAA,MAAK,QAAA,IAEF,WAAA,EAAA,EAAA,aAGP,EAAA,EAAA,EAAA,aAAA,EAAA,CADC,KAAM,EAAA,oBAAmB,CAAA,KAAA,EAAA,CAAA,OAAA,CAAA,CAAA,CAAA"}

package/dist/lib/chip/chip.js

@@ -4,10 +4,9 @@ import { DialtoneLocalization as r } from "../../localization/index.js";
 import i from "../button/button.js";
 import { CHIP_CLOSE_BUTTON_SIZE_MODIFIERS as a, CHIP_ICON_SIZES as o, CHIP_SIZE_MODIFIERS as s } from "./chip-constants.js";
 import { createBlock as c, createCommentVNode as l, createElementBlock as u, createVNode as d, mergeProps as f, normalizeClass as p, openBlock as m, renderSlot as h, resolveComponent as g, resolveDynamicComponent as _, toHandlers as v, withCtx as y } from "vue";
-import { DtIconClose as b } from "@dialpad/dialtone-icons/vue3";
-//#region components/chip/chip.vue
+import { DtIconClose as b } from "@dialpad/dialtone-icons/vue";
+//#region components/Chip/Chip.vue
 var x = {
-	compatConfig: { MODE: 3 },
 	name: "DtChip",
 	components: {
 		DtButton: i,
@@ -18,18 +17,18 @@ var x = {
 			type: Boolean,
 			default: !1
 		},
-		hideClose: {
+		showClose: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
 		size: {
-			type: String,
-			default: "md",
-			validator: (e) => Object.keys(s).includes(e)
+			type: [String, Number],
+			default: 300,
+			validator: (e) => Object.keys(s).includes(String(e))
 		},
 		interactive: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
 		id: {
 			type: String,
@@ -56,6 +55,22 @@ var x = {
 				Object
 			],
 			default: ""
+		},
+		iconClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: ""
+		},
+		avatarClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: ""
 		}
 	},
 	emits: [
@@ -86,7 +101,7 @@ var x = {
 			};
 		},
 		closeButtonIconSize() {
-			return o[this.size];
+			return o[String(this.size)];
 		},
 		closeButtonTitle() {
 			return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
@@ -96,7 +111,7 @@ var x = {
 		chipClasses() {
 			return [
 				this.$attrs["grouped-chip"] ? "d-chip" : "d-chip__label",
-				s[this.size],
+				s[String(this.size)],
 				this.labelClass,
 				this.disabled && "d-chip--disabled"
 			];
@@ -104,23 +119,16 @@ var x = {
 		chipCloseButtonClasses() {
 			return [
 				"d-chip__close",
-				a[this.size],
+				a[String(this.size)],
 				this.disabled && "d-chip__close--disabled"
 			];
 		},
 		onClose() {
-			this.hideClose || this.$emit("close");
+			this.showClose && this.$emit("close");
 		}
 	}
-}, S = { class: "d-chip" }, C = {
-	key: 0,
-	class: "d-chip__icon",
-	"data-qa": "dt-chip-icon"
-}, w = {
-	key: 1,
-	"data-qa": "dt-chip-avatar"
-}, T = ["id"];
-function E(e, t, n, r, i, a) {
+}, S = { class: "d-chip" }, C = ["id"];
+function w(e, t, n, r, i, a) {
 	let o = g("dt-icon-close"), s = g("dt-button");
 	return m(), u("span", S, [(m(), c(_(n.interactive ? "button" : "span"), f({
 		id: n.id,
@@ -132,12 +140,20 @@ function E(e, t, n, r, i, a) {
 		"data-qa": "dt-chip",
 		tabindex: n.disabled ? -1 : null
 	}, v(a.chipListeners)), {
-		default: y(() => [i.hasSlotContent(e.$slots.icon) ? (m(), u("span", C, [h(e.$slots, "icon")])) : i.hasSlotContent(e.$slots.avatar) ? (m(), u("span", w, [h(e.$slots, "avatar")])) : l("", !0), i.hasSlotContent(e.$slots.default) ? (m(), u("span", {
+		default: y(() => [i.hasSlotContent(e.$slots.icon) ? (m(), u("span", {
+			key: 0,
+			class: p(["d-chip__icon", n.iconClass]),
+			"data-qa": "dt-chip-icon"
+		}, [h(e.$slots, "icon")], 2)) : i.hasSlotContent(e.$slots.avatar) ? (m(), u("span", {
+			key: 1,
+			class: p(n.avatarClass),
+			"data-qa": "dt-chip-avatar"
+		}, [h(e.$slots, "avatar")], 2)) : l("", !0), i.hasSlotContent(e.$slots.default) ? (m(), u("span", {
 			key: 2,
 			id: `${n.id}-content`,
 			class: p(["d-chip__text", n.contentClass]),
 			"data-qa": "dt-chip-label"
-		}, [h(e.$slots, "default")], 10, T)) : l("", !0)]),
+		}, [h(e.$slots, "default")], 10, C)) : l("", !0)]),
 		_: 3
 	}, 16, [
 		"id",
@@ -147,7 +163,7 @@ function E(e, t, n, r, i, a) {
 		"class",
 		"type",
 		"tabindex"
-	])), n.hideClose ? l("", !0) : (m(), c(s, {
+	])), n.showClose ? (m(), c(s, {
 		key: 0,
 		class: p(a.chipCloseButtonClasses()),
 		"data-qa": "dt-chip-close",
@@ -157,7 +173,7 @@ function E(e, t, n, r, i, a) {
 		tabindex: n.disabled ? -1 : null,
 		onClick: t[0] || (t[0] = (t) => e.$emit("close"))
 	}, {
-		icon: y(() => [d(o, { size: a.closeButtonIconSize }, null, 8, ["size"])]),
+		startIcon: y(() => [d(o, { size: a.closeButtonIconSize }, null, 8, ["size"])]),
 		_: 1
 	}, 8, [
 		"class",
@@ -165,10 +181,10 @@ function E(e, t, n, r, i, a) {
 		"aria-disabled",
 		"title",
 		"tabindex"
-	]))]);
+	])) : l("", !0)]);
 }
-var D = /* @__PURE__ */ n(x, [["render", E]]);
+var T = /* @__PURE__ */ n(x, [["render", w]]);
 //#endregion
-export { D as default };
+export { T as default };
 
 //# sourceMappingURL=chip.js.map

package/dist/lib/chip/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","names":[],"sources":["../../../components/chip/chip.vue"],"sourcesContent":["<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :aria-label=\"ariaLabel\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :aria-disabled=\"disabled\"\n      :class=\"chipClasses()\"\n      :type=\"interactive && 'button'\"\n      data-qa=\"dt-chip\"\n      :tabindex=\"disabled ? -1 : null\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"hasSlotContent($slots.icon)\"\n        class=\"d-chip__icon\"\n        data-qa=\"dt-chip-icon\"\n      >\n        <!-- @slot slot for Chip icon -->\n        <slot name=\"icon\" />\n      </span>\n      <span\n        v-else-if=\"hasSlotContent($slots.avatar)\"\n        data-qa=\"dt-chip-avatar\"\n      >\n        <!-- @slot slot for Chip avatar -->\n        <slot name=\"avatar\" />\n      </span>\n      <span\n        v-if=\"hasSlotContent($slots.default)\"\n        :id=\"`${id}-content`\"\n        :class=\"['d-chip__text', contentClass]\"\n        data-qa=\"dt-chip-label\"\n      >\n        <!-- @slot slot for Content within chip -->\n        <slot />\n      </span>\n    </component>\n    <dt-button\n      v-if=\"!hideClose\"\n      :class=\"chipCloseButtonClasses()\"\n      data-qa=\"dt-chip-close\"\n      :aria-label=\"closeButtonTitle\"\n      :aria-disabled=\"disabled\"\n      :title=\"closeButtonTitle\"\n      :tabindex=\"disabled ? -1 : null\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon-close\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIconClose,\n  },\n\n  props: {\n    /**\n     * Whether the chip is disabled\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the close button on the chip\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The size of the chip.\n     * @values xs, sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n\n    /**\n     * Native chip key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        click: event => {\n          if (this.interactive) this.$emit('click', event);\n        },\n\n        keydown: event => {\n          if (event.code?.toLowerCase() === 'delete') {\n            this.onClose();\n          } else {\n            this.$emit('keydown', event);\n          }\n        },\n\n        keyup: event => {\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    closeButtonIconSize () {\n      return CHIP_ICON_SIZES[this.size];\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    chipClasses () {\n      return [\n        this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label',\n        CHIP_SIZE_MODIFIERS[this.size],\n        this.labelClass,\n        this.disabled && 'd-chip--disabled',\n      ];\n    },\n\n    chipCloseButtonClasses () {\n      return [\n        'd-chip__close',\n        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size],\n        this.disabled && 'd-chip__close--disabled',\n      ];\n    },\n\n    onClose () {\n      if (!this.hideClose) {\n        this.$emit('close');\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"chip.js","names":[],"sources":["../../../components/Chip/Chip.vue"],"sourcesContent":["<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :aria-label=\"ariaLabel\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :aria-disabled=\"disabled\"\n      :class=\"chipClasses()\"\n      :type=\"interactive && 'button'\"\n      data-qa=\"dt-chip\"\n      :tabindex=\"disabled ? -1 : null\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"hasSlotContent($slots.icon)\"\n        :class=\"['d-chip__icon', iconClass]\"\n        data-qa=\"dt-chip-icon\"\n      >\n        <!-- @slot slot for Chip icon -->\n        <slot name=\"icon\" />\n      </span>\n      <span\n        v-else-if=\"hasSlotContent($slots.avatar)\"\n        :class=\"avatarClass\"\n        data-qa=\"dt-chip-avatar\"\n      >\n        <!-- @slot slot for Chip avatar -->\n        <slot name=\"avatar\" />\n      </span>\n      <span\n        v-if=\"hasSlotContent($slots.default)\"\n        :id=\"`${id}-content`\"\n        :class=\"['d-chip__text', contentClass]\"\n        data-qa=\"dt-chip-label\"\n      >\n        <!-- @slot slot for Content within chip -->\n        <slot />\n      </span>\n    </component>\n    <dt-button\n      v-if=\"showClose\"\n      :class=\"chipCloseButtonClasses()\"\n      data-qa=\"dt-chip-close\"\n      :aria-label=\"closeButtonTitle\"\n      :aria-disabled=\"disabled\"\n      :title=\"closeButtonTitle\"\n      :tabindex=\"disabled ? -1 : null\"\n      @click=\"$emit('close')\"\n    >\n      <template #startIcon>\n        <dt-icon-close\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/Button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './ChipConstants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n */\nexport default {\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIconClose,\n  },\n\n  props: {\n    /**\n     * Whether the chip is disabled\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows the close button on the chip\n     * @values true, false\n     */\n    showClose: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the chip.\n     * @values 100, 200, 300\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(String(s)),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the icon wrapper element.\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the avatar wrapper element.\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n\n    /**\n     * Native chip key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        click: event => {\n          if (this.interactive) this.$emit('click', event);\n        },\n\n        keydown: event => {\n          if (event.code?.toLowerCase() === 'delete') {\n            this.onClose();\n          } else {\n            this.$emit('keydown', event);\n          }\n        },\n\n        keyup: event => {\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    closeButtonIconSize () {\n      return CHIP_ICON_SIZES[String(this.size)];\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    chipClasses () {\n      return [\n        this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label',\n        CHIP_SIZE_MODIFIERS[String(this.size)],\n        this.labelClass,\n        this.disabled && 'd-chip--disabled',\n      ];\n    },\n\n    chipCloseButtonClasses () {\n      return [\n        'd-chip__close',\n        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[String(this.size)],\n        this.disabled && 'd-chip__close--disabled',\n      ];\n    },\n\n    onClose () {\n      if (this.showClose) {\n        this.$emit('close');\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[`100`,`200`,`300`,`400`,`xs`,`sm`,`md`,`lg`],t=200,n={100:`xs`,200:`sm`,300:`md`,400:`lg`};exports.CODEBLOCK_SIZES=e,exports.CODEBLOCK_SIZE_DEFAULT=t,exports.CODEBLOCK_SIZE_MAP=n;
+//# sourceMappingURL=codeblock-constants.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"codeblock-constants.cjs","names":[],"sources":["../../../components/Codeblock/CodeblockConstants.js"],"sourcesContent":["export const CODEBLOCK_SIZES = ['100', '200', '300', '400', 'xs', 'sm', 'md', 'lg'];\nexport const CODEBLOCK_SIZE_DEFAULT = 200;\n\n// Numeric → CSS class suffix mapping (numeric values use the t-shirt class suffix)\nexport const CODEBLOCK_SIZE_MAP = {\n  100: 'xs',\n  200: 'sm',\n  300: 'md',\n  400: 'lg',\n};\n"],"mappings":"mEAAA,IAAa,EAAkB,CAAC,MAAO,MAAO,MAAO,MAAO,KAAM,KAAM,KAAM,KAAK,CACtE,EAAyB,IAGzB,EAAqB,CAChC,IAAK,KACL,IAAK,KACL,IAAK,KACL,IAAK,KACN"}

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

@@ -0,0 +1,20 @@
+//#region components/Codeblock/CodeblockConstants.js
+var e = [
+	"100",
+	"200",
+	"300",
+	"400",
+	"xs",
+	"sm",
+	"md",
+	"lg"
+], t = 200, n = {
+	100: "xs",
+	200: "sm",
+	300: "md",
+	400: "lg"
+};
+//#endregion
+export { e as CODEBLOCK_SIZES, t as CODEBLOCK_SIZE_DEFAULT, n as CODEBLOCK_SIZE_MAP };
+
+//# sourceMappingURL=codeblock-constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"codeblock-constants.js","names":[],"sources":["../../../components/Codeblock/CodeblockConstants.js"],"sourcesContent":["export const CODEBLOCK_SIZES = ['100', '200', '300', '400', 'xs', 'sm', 'md', 'lg'];\nexport const CODEBLOCK_SIZE_DEFAULT = 200;\n\n// Numeric → CSS class suffix mapping (numeric values use the t-shirt class suffix)\nexport const CODEBLOCK_SIZE_MAP = {\n  100: 'xs',\n  200: 'sm',\n  300: 'md',\n  400: 'lg',\n};\n"],"mappings":";AAAA,IAAa,IAAkB;CAAC;CAAO;CAAO;CAAO;CAAO;CAAM;CAAM;CAAM;CAAK,EACtE,IAAyB,KAGzB,IAAqB;CAChC,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACN"}

package/dist/lib/codeblock/codeblock.cjs

@@ -1,3 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`);let t=require(`vue`);var n={compatConfig:{MODE:3},name:`DtCodeblock`,props:{text:{type:String,required:!0}}},r={class:`d-codeblock`};function i(e,n,i,a,o,s){return(0,t.openBlock)(),(0,t.createElementBlock)(`pre`,null,[n[0]||(n[0]=(0,t.createTextVNode)(`    `,-1)),(0,t.createElementVNode)(`code`,r,(0,t.toDisplayString)(i.text),1),n[1]||(n[1]=(0,t.createTextVNode)(`
-  `,-1))])}var a=e.t(n,[[`render`,i]]);exports.default=a;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./codeblock-constants.cjs`);let n=require(`vue`);var r={name:`DtCodeblock`,props:{text:{type:String,required:!0},bordered:{type:Boolean,default:!1},size:{type:[String,Number],default:200,validator:e=>t.CODEBLOCK_SIZES.includes(String(e))}},computed:{sizeClass(){return t.CODEBLOCK_SIZE_MAP[String(this.size)]||String(this.size)}}};function i(e,t,r,i,a,o){return(0,n.openBlock)(),(0,n.createElementBlock)(`pre`,{class:(0,n.normalizeClass)([`d-codeblock`,{"d-codeblock--bordered":r.bordered}])},[(0,n.createElementVNode)(`code`,{class:(0,n.normalizeClass)([`d-codeblock__code`,`d-codeblock__code--${o.sizeClass}`])},(0,n.toDisplayString)(r.text),3)],2)}var a=e.t(r,[[`render`,i]]);exports.default=a;
 //# sourceMappingURL=codeblock.cjs.map

package/dist/lib/codeblock/codeblock.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"codeblock.cjs","names":[],"sources":["../../../components/codeblock/codeblock.vue"],"sourcesContent":["<template>\n  <pre>\n    <code\n      class=\"d-codeblock\"\n    >{{ text }}</code>\n  </pre>\n</template>\n\n<script>\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCodeblock',\n\n  props: {\n    text: {\n      type: String,\n      required: true,\n    },\n  },\n};\n</script>\n"],"mappings":"wNASA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,cAEN,MAAO,CACL,KAAM,CACJ,KAAM,OACN,SAAU,GACX,CACF,CACF,IAhBK,MAAM,cAAa,0EAEjB,MAAA,KAAA,mCAJD,OACH,GAAA,2BAEkB,OAFlB,GAAA,EAAA,EAAA,iBAEI,EAAA,KAAI,CAAA,EAAA,mCAAU;IACpB,GAAA"}
+{"version":3,"file":"codeblock.cjs","names":[],"sources":["../../../components/Codeblock/Codeblock.vue"],"sourcesContent":["<template>\n  <pre\n    class=\"d-codeblock\"\n    :class=\"{ 'd-codeblock--bordered': bordered }\"\n  ><code\n    class=\"d-codeblock__code\"\n    :class=\"`d-codeblock__code--${sizeClass}`\"\n  >{{ text }}</code></pre> <!-- this must be a single line -->\n</template>\n\n<script>\nimport { CODEBLOCK_SIZES, CODEBLOCK_SIZE_MAP } from './CodeblockConstants';\n\nexport default {\n  name: 'DtCodeblock',\n\n  props: {\n    /**\n     * The text to display in the codeblock.\n     */\n    text: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Whether to render as a styled container block.\n     */\n    bordered: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Font size of the code block.\n     * @values 100, 200, 300, 400\n     */\n    size: {\n      type: [String, Number],\n      default: 200,\n      validator: (val) => CODEBLOCK_SIZES.includes(String(val)),\n    },\n  },\n\n  computed: {\n    sizeClass () {\n      return CODEBLOCK_SIZE_MAP[String(this.size)] || String(this.size);\n    },\n  },\n};\n</script>\n"],"mappings":"+PAaA,IAAK,EAAU,CACb,KAAM,cAEN,MAAO,CAIL,KAAM,CACJ,KAAM,OACN,SAAU,GACX,CAKD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,UAAY,GAAQ,EAAA,gBAAgB,SAAS,OAAO,EAAI,CAAC,CAC1D,CACF,CAED,SAAU,CACR,WAAa,CACX,OAAO,EAAA,mBAAmB,OAAO,KAAK,KAAK,GAAK,OAAO,KAAK,KAAK,EAEpE,CACF,0EA1CyB,MAAA,CALtB,OAAA,EAAA,EAAA,gBAAK,CAAC,cAAa,CAAA,wBACgB,EAAA,SAAQ,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,oBAI3B,OAAA,CAFhB,OAAA,EAAA,EAAA,gBAAK,CAAC,oBAAmB,sBACK,EAAA,YAAS,CAAA,CAAA,EAAA,EAAA,EAAA,iBACrC,EAAA,KAAI,CAAA,EAAA,CAAA,CAAA,EAAA"}

package/dist/lib/codeblock/codeblock.js

@@ -1,23 +1,33 @@
 import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { createElementBlock as t, createElementVNode as n, createTextVNode as r, openBlock as i, toDisplayString as a } from "vue";
-//#region components/codeblock/codeblock.vue
-var o = {
-	compatConfig: { MODE: 3 },
+import { CODEBLOCK_SIZES as t, CODEBLOCK_SIZE_MAP as n } from "./codeblock-constants.js";
+import { createElementBlock as r, createElementVNode as i, normalizeClass as a, openBlock as o, toDisplayString as s } from "vue";
+//#region components/Codeblock/Codeblock.vue
+var c = {
 	name: "DtCodeblock",
-	props: { text: {
-		type: String,
-		required: !0
+	props: {
+		text: {
+			type: String,
+			required: !0
+		},
+		bordered: {
+			type: Boolean,
+			default: !1
+		},
+		size: {
+			type: [String, Number],
+			default: 200,
+			validator: (e) => t.includes(String(e))
+		}
+	},
+	computed: { sizeClass() {
+		return n[String(this.size)] || String(this.size);
 	} }
-}, s = { class: "d-codeblock" };
-function c(e, o, c, l, u, d) {
-	return i(), t("pre", null, [
-		o[0] || (o[0] = r("    ", -1)),
-		n("code", s, a(c.text), 1),
-		o[1] || (o[1] = r("\n  ", -1))
-	]);
+};
+function l(e, t, n, c, l, u) {
+	return o(), r("pre", { class: a(["d-codeblock", { "d-codeblock--bordered": n.bordered }]) }, [i("code", { class: a(["d-codeblock__code", `d-codeblock__code--${u.sizeClass}`]) }, s(n.text), 3)], 2);
 }
-var l = /* @__PURE__ */ e(o, [["render", c]]);
+var u = /* @__PURE__ */ e(c, [["render", l]]);
 //#endregion
-export { l as default };
+export { u as default };
 
 //# sourceMappingURL=codeblock.js.map

package/dist/lib/codeblock/codeblock.js.map

@@ -1 +1 @@
-{"version":3,"file":"codeblock.js","names":[],"sources":["../../../components/codeblock/codeblock.vue"],"sourcesContent":["<template>\n  <pre>\n    <code\n      class=\"d-codeblock\"\n    >{{ text }}</code>\n  </pre>\n</template>\n\n<script>\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCodeblock',\n\n  props: {\n    text: {\n      type: String,\n      required: true,\n    },\n  },\n};\n</script>\n"],"mappings":";;;AASA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,OAAO,EACL,MAAM;EACJ,MAAM;EACN,UAAU;EACX,EACF;CACF,QAhBK,OAAM,eAAa;;aAFvB,EAIM,OAAA,MAAA;oBAJD,QACH,GAAA;EAAA,EAEkB,QAFlB,GAEkB,EAAd,EAAA,KAAI,EAAA,EAAA;oBAAU,QACpB,GAAA"}
+{"version":3,"file":"codeblock.js","names":[],"sources":["../../../components/Codeblock/Codeblock.vue"],"sourcesContent":["<template>\n  <pre\n    class=\"d-codeblock\"\n    :class=\"{ 'd-codeblock--bordered': bordered }\"\n  ><code\n    class=\"d-codeblock__code\"\n    :class=\"`d-codeblock__code--${sizeClass}`\"\n  >{{ text }}</code></pre> <!-- this must be a single line -->\n</template>\n\n<script>\nimport { CODEBLOCK_SIZES, CODEBLOCK_SIZE_MAP } from './CodeblockConstants';\n\nexport default {\n  name: 'DtCodeblock',\n\n  props: {\n    /**\n     * The text to display in the codeblock.\n     */\n    text: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Whether to render as a styled container block.\n     */\n    bordered: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Font size of the code block.\n     * @values 100, 200, 300, 400\n     */\n    size: {\n      type: [String, Number],\n      default: 200,\n      validator: (val) => CODEBLOCK_SIZES.includes(String(val)),\n    },\n  },\n\n  computed: {\n    sizeClass () {\n      return CODEBLOCK_SIZE_MAP[String(this.size)] || String(this.size);\n    },\n  },\n};\n</script>\n"],"mappings":";;;;AAaA,IAAK,IAAU;CACb,MAAM;CAEN,OAAO;EAIL,MAAM;GACJ,MAAM;GACN,UAAU;GACX;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,YAAY,MAAQ,EAAgB,SAAS,OAAO,EAAI,CAAC;GAC1D;EACF;CAED,UAAU,EACR,YAAa;AACX,SAAO,EAAmB,OAAO,KAAK,KAAK,KAAK,OAAO,KAAK,KAAK;IAEpE;CACF;;aAhDC,EAMwB,OAAA,EALtB,OAAK,EAAA,CAAC,eAAa,EAAA,yBACgB,EAAA,UAAQ,CAAA,CAAA,EAAA,EAAA,CAC5C,EAGiB,QAAA,EAFhB,OAAK,EAAA,CAAC,qBAAmB,sBACK,EAAA,YAAS,CAAA,EAAA,EAAA,EACrC,EAAA,KAAI,EAAA,EAAA,CAAA,EAAA,EAAA"}