@dialpad/dialtone 9.115.1 → 9.116.0

package/dist/vue3/lib/button/button-constants.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={xs:"d-btn--xs",sm:"d-btn--sm",md:"",lg:"d-btn--lg",xl:"d-btn--xl"},n={default:"",muted:"d-btn--muted",danger:"d-btn--danger",positive:"d-btn--positive",inverted:"d-btn--inverted"},i={clear:"",outlined:"d-btn--outlined",primary:"d-btn--primary"},o=["submit","reset","button"],d={left:"d-btn__icon--left",right:"d-btn__icon--right",top:"d-btn__icon--top",bottom:"d-btn__icon--bottom"},r=[{circle:!0,kind:"default",importance:"primary",message:t(!0,"default","primary")},{circle:!0,kind:"danger",importance:"outlined",message:t(!0,"danger","outlined")},{circle:!0,kind:"muted",importance:"primary",message:t(!0,"muted","primary")},{circle:!1,kind:"muted",importance:"primary",message:t(!1,"muted","primary")}],a={xs:"200",sm:"200",md:"300",lg:"400",xl:"500"};function t(s,I,l){return`You cannot have a ${s?"circle ":""}button with kind: ${I} and importance: ${l} as it does not exist in our design system. See https://dialtone.dialpad.com/components/button.html for a list of available button styles`}const m={BUTTON_SIZE_MODIFIERS:e,BUTTON_KIND_MODIFIERS:n,BUTTON_IMPORTANCE_MODIFIERS:i,BUTTON_TYPES:o,ICON_POSITION_MODIFIERS:d,INVALID_COMBINATION:r,BUTTON_ICON_SIZES:a};exports.BUTTON_ICON_SIZES=a;exports.BUTTON_IMPORTANCE_MODIFIERS=i;exports.BUTTON_KIND_MODIFIERS=n;exports.BUTTON_SIZE_MODIFIERS=e;exports.BUTTON_TYPES=o;exports.ICON_POSITION_MODIFIERS=d;exports.INVALID_COMBINATION=r;exports.default=m;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="d-btn--unstyled",n={xs:"d-btn--xs",sm:"d-btn--sm",md:"",lg:"d-btn--lg",xl:"d-btn--xl"},i={default:"",muted:"d-btn--muted",danger:"d-btn--danger",positive:"d-btn--positive",inverted:"d-btn--inverted",unstyled:"d-btn--unstyled"},d={clear:"",outlined:"d-btn--outlined",primary:"d-btn--primary"},o=["submit","reset","button"],r={left:"d-btn__icon--left",right:"d-btn__icon--right",top:"d-btn__icon--top",bottom:"d-btn__icon--bottom"},s=[{circle:!0,kind:"default",importance:"primary",message:t(!0,"default","primary")},{circle:!0,kind:"danger",importance:"outlined",message:t(!0,"danger","outlined")},{circle:!0,kind:"muted",importance:"primary",message:t(!0,"muted","primary")},{circle:!1,kind:"muted",importance:"primary",message:t(!1,"muted","primary")}],a={xs:"200",sm:"200",md:"300",lg:"400",xl:"500"};function t(l,I,_){return`You cannot have a ${l?"circle ":""}button with kind: ${I} and importance: ${_} as it does not exist in our design system. See https://dialtone.dialpad.com/components/button.html for a list of available button styles`}const u={BUTTON_SIZE_MODIFIERS:n,BUTTON_KIND_MODIFIERS:i,BUTTON_IMPORTANCE_MODIFIERS:d,BUTTON_TYPES:o,BUTTON_UNSTYLED_CLASS:e,ICON_POSITION_MODIFIERS:r,INVALID_COMBINATION:s,BUTTON_ICON_SIZES:a};exports.BUTTON_ICON_SIZES=a;exports.BUTTON_IMPORTANCE_MODIFIERS=d;exports.BUTTON_KIND_MODIFIERS=i;exports.BUTTON_SIZE_MODIFIERS=n;exports.BUTTON_TYPES=o;exports.BUTTON_UNSTYLED_CLASS=e;exports.ICON_POSITION_MODIFIERS=r;exports.INVALID_COMBINATION=s;exports.default=u;
 //# sourceMappingURL=button-constants.cjs.map

package/dist/vue3/lib/button/button-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button-constants.cjs","sources":["../../../components/button/button_constants.js"],"sourcesContent":["export const BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-btn--xs',\n  sm: 'd-btn--sm',\n  md: '',\n  lg: 'd-btn--lg',\n  xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n  default: '',\n  muted: 'd-btn--muted',\n  danger: 'd-btn--danger',\n  positive: 'd-btn--positive',\n  inverted: 'd-btn--inverted',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n  clear: '',\n  outlined: 'd-btn--outlined',\n  primary: 'd-btn--primary',\n};\n\nexport const BUTTON_TYPES = ['submit', 'reset', 'button'];\n\nexport const ICON_POSITION_MODIFIERS = {\n  left: 'd-btn__icon--left',\n  right: 'd-btn__icon--right',\n  top: 'd-btn__icon--top',\n  bottom: 'd-btn__icon--bottom',\n};\n\nexport const INVALID_COMBINATION = [\n  {\n    circle: true,\n    kind: 'default',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'default', 'primary'),\n  },\n  {\n    circle: true,\n    kind: 'danger',\n    importance: 'outlined',\n    message: _invalidCombinationMessage(true, 'danger', 'outlined'),\n  },\n  {\n    circle: true,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'muted', 'primary'),\n  },\n  {\n    circle: false,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(false, 'muted', 'primary'),\n  },\n];\n\nexport const BUTTON_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '300',\n  lg: '400',\n  xl: '500',\n};\n\nfunction _invalidCombinationMessage (circle, kind, importance) {\n  return `You cannot have a ${circle ? 'circle ' : ''}button \\\nwith kind: ${kind} and importance: ${importance} as it \\\ndoes not exist in our design system. \\\nSee https://dialtone.dialpad.com/components/button.html for a \\\nlist of available button styles`;\n}\n\nexport default {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n  BUTTON_ICON_SIZES,\n};\n"],"names":["BUTTON_SIZE_MODIFIERS","BUTTON_KIND_MODIFIERS","BUTTON_IMPORTANCE_MODIFIERS","BUTTON_TYPES","ICON_POSITION_MODIFIERS","INVALID_COMBINATION","_invalidCombinationMessage","BUTTON_ICON_SIZES","circle","kind","importance","button_constants"],"mappings":"4GAAY,MAACA,EAAwB,CACnC,GAAI,YACJ,GAAI,YACJ,GAAI,GACJ,GAAI,YACJ,GAAI,WACN,EAEaC,EAAwB,CACnC,QAAS,GACT,MAAO,eACP,OAAQ,gBACR,SAAU,kBACV,SAAU,iBACZ,EAEaC,EAA8B,CACzC,MAAO,GACP,SAAU,kBACV,QAAS,gBACX,EAEaC,EAAe,CAAC,SAAU,QAAS,QAAQ,EAE3CC,EAA0B,CACrC,KAAM,oBACN,MAAO,qBACP,IAAK,mBACL,OAAQ,qBACV,EAEaC,EAAsB,CACjC,CACE,OAAQ,GACR,KAAM,UACN,WAAY,UACZ,QAASC,EAA2B,GAAM,UAAW,SAAS,CAC/D,EACD,CACE,OAAQ,GACR,KAAM,SACN,WAAY,WACZ,QAASA,EAA2B,GAAM,SAAU,UAAU,CAC/D,EACD,CACE,OAAQ,GACR,KAAM,QACN,WAAY,UACZ,QAASA,EAA2B,GAAM,QAAS,SAAS,CAC7D,EACD,CACE,OAAQ,GACR,KAAM,QACN,WAAY,UACZ,QAASA,EAA2B,GAAO,QAAS,SAAS,CAC9D,CACH,EAEaC,EAAoB,CAC/B,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,KACN,EAEA,SAASD,EAA4BE,EAAQC,EAAMC,EAAY,CAC7D,MAAO,qBAAqBF,EAAS,UAAY,EAAE,qBACxCC,CAAI,oBAAoBC,CAAU,2IAI/C,CAEA,MAAeC,EAAA,CACb,sBAAAX,EACA,sBAAAC,EACA,4BAAAC,EACA,aAAAC,EACA,wBAAAC,EACA,oBAAAC,EACA,kBAAAE,CACF"}
+{"version":3,"file":"button-constants.cjs","sources":["../../../components/button/button_constants.js"],"sourcesContent":["export const BUTTON_UNSTYLED_CLASS = 'd-btn--unstyled';\n\nexport const BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-btn--xs',\n  sm: 'd-btn--sm',\n  md: '',\n  lg: 'd-btn--lg',\n  xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n  default: '',\n  muted: 'd-btn--muted',\n  danger: 'd-btn--danger',\n  positive: 'd-btn--positive',\n  inverted: 'd-btn--inverted',\n  unstyled: 'd-btn--unstyled',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n  clear: '',\n  outlined: 'd-btn--outlined',\n  primary: 'd-btn--primary',\n};\n\nexport const BUTTON_TYPES = ['submit', 'reset', 'button'];\n\nexport const ICON_POSITION_MODIFIERS = {\n  left: 'd-btn__icon--left',\n  right: 'd-btn__icon--right',\n  top: 'd-btn__icon--top',\n  bottom: 'd-btn__icon--bottom',\n};\n\nexport const INVALID_COMBINATION = [\n  {\n    circle: true,\n    kind: 'default',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'default', 'primary'),\n  },\n  {\n    circle: true,\n    kind: 'danger',\n    importance: 'outlined',\n    message: _invalidCombinationMessage(true, 'danger', 'outlined'),\n  },\n  {\n    circle: true,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'muted', 'primary'),\n  },\n  {\n    circle: false,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(false, 'muted', 'primary'),\n  },\n];\n\nexport const BUTTON_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '300',\n  lg: '400',\n  xl: '500',\n};\n\nfunction _invalidCombinationMessage (circle, kind, importance) {\n  return `You cannot have a ${circle ? 'circle ' : ''}button \\\nwith kind: ${kind} and importance: ${importance} as it \\\ndoes not exist in our design system. \\\nSee https://dialtone.dialpad.com/components/button.html for a \\\nlist of available button styles`;\n}\n\nexport default {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_TYPES,\n  BUTTON_UNSTYLED_CLASS,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n  BUTTON_ICON_SIZES,\n};\n"],"names":["BUTTON_UNSTYLED_CLASS","BUTTON_SIZE_MODIFIERS","BUTTON_KIND_MODIFIERS","BUTTON_IMPORTANCE_MODIFIERS","BUTTON_TYPES","ICON_POSITION_MODIFIERS","INVALID_COMBINATION","_invalidCombinationMessage","BUTTON_ICON_SIZES","circle","kind","importance","button_constants"],"mappings":"4GAAY,MAACA,EAAwB,kBAExBC,EAAwB,CACnC,GAAI,YACJ,GAAI,YACJ,GAAI,GACJ,GAAI,YACJ,GAAI,WACN,EAEaC,EAAwB,CACnC,QAAS,GACT,MAAO,eACP,OAAQ,gBACR,SAAU,kBACV,SAAU,kBACV,SAAU,iBACZ,EAEaC,EAA8B,CACzC,MAAO,GACP,SAAU,kBACV,QAAS,gBACX,EAEaC,EAAe,CAAC,SAAU,QAAS,QAAQ,EAE3CC,EAA0B,CACrC,KAAM,oBACN,MAAO,qBACP,IAAK,mBACL,OAAQ,qBACV,EAEaC,EAAsB,CACjC,CACE,OAAQ,GACR,KAAM,UACN,WAAY,UACZ,QAASC,EAA2B,GAAM,UAAW,SAAS,CAC/D,EACD,CACE,OAAQ,GACR,KAAM,SACN,WAAY,WACZ,QAASA,EAA2B,GAAM,SAAU,UAAU,CAC/D,EACD,CACE,OAAQ,GACR,KAAM,QACN,WAAY,UACZ,QAASA,EAA2B,GAAM,QAAS,SAAS,CAC7D,EACD,CACE,OAAQ,GACR,KAAM,QACN,WAAY,UACZ,QAASA,EAA2B,GAAO,QAAS,SAAS,CAC9D,CACH,EAEaC,EAAoB,CAC/B,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,KACN,EAEA,SAASD,EAA4BE,EAAQC,EAAMC,EAAY,CAC7D,MAAO,qBAAqBF,EAAS,UAAY,EAAE,qBACxCC,CAAI,oBAAoBC,CAAU,2IAI/C,CAEA,MAAeC,EAAA,CACb,sBAAAX,EACA,sBAAAC,EACA,4BAAAC,EACA,aAAAC,EACA,sBAAAJ,EACA,wBAAAK,EACA,oBAAAC,EACA,kBAAAE,CACF"}

package/dist/vue3/lib/button/button-constants.js

@@ -1,25 +1,26 @@
-const o = {
+const d = "d-btn--unstyled", o = {
   xs: "d-btn--xs",
   sm: "d-btn--sm",
   md: "",
   lg: "d-btn--lg",
   xl: "d-btn--xl"
-}, d = {
+}, s = {
   default: "",
   muted: "d-btn--muted",
   danger: "d-btn--danger",
   positive: "d-btn--positive",
-  inverted: "d-btn--inverted"
+  inverted: "d-btn--inverted",
+  unstyled: "d-btn--unstyled"
 }, r = {
   clear: "",
   outlined: "d-btn--outlined",
   primary: "d-btn--primary"
-}, a = ["submit", "reset", "button"], s = {
+}, a = ["submit", "reset", "button"], m = {
   left: "d-btn__icon--left",
   right: "d-btn__icon--right",
   top: "d-btn__icon--top",
   bottom: "d-btn__icon--bottom"
-}, m = [
+}, l = [
   {
     circle: !0,
     kind: "default",
@@ -51,26 +52,28 @@ const o = {
   lg: "400",
   xl: "500"
 };
-function t(e, n, i) {
-  return `You cannot have a ${e ? "circle " : ""}button with kind: ${n} and importance: ${i} as it does not exist in our design system. See https://dialtone.dialpad.com/components/button.html for a list of available button styles`;
+function t(n, e, i) {
+  return `You cannot have a ${n ? "circle " : ""}button with kind: ${e} and importance: ${i} as it does not exist in our design system. See https://dialtone.dialpad.com/components/button.html for a list of available button styles`;
 }
-const l = {
+const u = {
   BUTTON_SIZE_MODIFIERS: o,
-  BUTTON_KIND_MODIFIERS: d,
+  BUTTON_KIND_MODIFIERS: s,
   BUTTON_IMPORTANCE_MODIFIERS: r,
   BUTTON_TYPES: a,
-  ICON_POSITION_MODIFIERS: s,
-  INVALID_COMBINATION: m,
+  BUTTON_UNSTYLED_CLASS: d,
+  ICON_POSITION_MODIFIERS: m,
+  INVALID_COMBINATION: l,
   BUTTON_ICON_SIZES: c
 };
 export {
   c as BUTTON_ICON_SIZES,
   r as BUTTON_IMPORTANCE_MODIFIERS,
-  d as BUTTON_KIND_MODIFIERS,
+  s as BUTTON_KIND_MODIFIERS,
   o as BUTTON_SIZE_MODIFIERS,
   a as BUTTON_TYPES,
-  s as ICON_POSITION_MODIFIERS,
-  m as INVALID_COMBINATION,
-  l as default
+  d as BUTTON_UNSTYLED_CLASS,
+  m as ICON_POSITION_MODIFIERS,
+  l as INVALID_COMBINATION,
+  u as default
 };
 //# sourceMappingURL=button-constants.js.map

package/dist/vue3/lib/button/button-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-constants.js","sources":["../../../components/button/button_constants.js"],"sourcesContent":["export const BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-btn--xs',\n  sm: 'd-btn--sm',\n  md: '',\n  lg: 'd-btn--lg',\n  xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n  default: '',\n  muted: 'd-btn--muted',\n  danger: 'd-btn--danger',\n  positive: 'd-btn--positive',\n  inverted: 'd-btn--inverted',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n  clear: '',\n  outlined: 'd-btn--outlined',\n  primary: 'd-btn--primary',\n};\n\nexport const BUTTON_TYPES = ['submit', 'reset', 'button'];\n\nexport const ICON_POSITION_MODIFIERS = {\n  left: 'd-btn__icon--left',\n  right: 'd-btn__icon--right',\n  top: 'd-btn__icon--top',\n  bottom: 'd-btn__icon--bottom',\n};\n\nexport const INVALID_COMBINATION = [\n  {\n    circle: true,\n    kind: 'default',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'default', 'primary'),\n  },\n  {\n    circle: true,\n    kind: 'danger',\n    importance: 'outlined',\n    message: _invalidCombinationMessage(true, 'danger', 'outlined'),\n  },\n  {\n    circle: true,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'muted', 'primary'),\n  },\n  {\n    circle: false,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(false, 'muted', 'primary'),\n  },\n];\n\nexport const BUTTON_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '300',\n  lg: '400',\n  xl: '500',\n};\n\nfunction _invalidCombinationMessage (circle, kind, importance) {\n  return `You cannot have a ${circle ? 'circle ' : ''}button \\\nwith kind: ${kind} and importance: ${importance} as it \\\ndoes not exist in our design system. \\\nSee https://dialtone.dialpad.com/components/button.html for a \\\nlist of available button styles`;\n}\n\nexport default {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n  BUTTON_ICON_SIZES,\n};\n"],"names":["BUTTON_SIZE_MODIFIERS","BUTTON_KIND_MODIFIERS","BUTTON_IMPORTANCE_MODIFIERS","BUTTON_TYPES","ICON_POSITION_MODIFIERS","INVALID_COMBINATION","_invalidCombinationMessage","BUTTON_ICON_SIZES","circle","kind","importance","button_constants"],"mappings":"AAAY,MAACA,IAAwB;AAAA,EACnC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAwB;AAAA,EACnC,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AACZ,GAEaC,IAA8B;AAAA,EACzC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AACX,GAEaC,IAAe,CAAC,UAAU,SAAS,QAAQ,GAE3CC,IAA0B;AAAA,EACrC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AACV,GAEaC,IAAsB;AAAA,EACjC;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAASC,EAA2B,IAAM,WAAW,SAAS;AAAA,EAC/D;AAAA,EACD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAASA,EAA2B,IAAM,UAAU,UAAU;AAAA,EAC/D;AAAA,EACD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAASA,EAA2B,IAAM,SAAS,SAAS;AAAA,EAC7D;AAAA,EACD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAASA,EAA2B,IAAO,SAAS,SAAS;AAAA,EAC9D;AACH,GAEaC,IAAoB;AAAA,EAC/B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAASD,EAA4BE,GAAQC,GAAMC,GAAY;AAC7D,SAAO,qBAAqBF,IAAS,YAAY,EAAE,qBACxCC,CAAI,oBAAoBC,CAAU;AAI/C;AAEA,MAAeC,IAAA;AAAA,EACb,uBAAAX;AAAA,EACA,uBAAAC;AAAA,EACA,6BAAAC;AAAA,EACA,cAAAC;AAAA,EACA,yBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,mBAAAE;AACF;"}
+{"version":3,"file":"button-constants.js","sources":["../../../components/button/button_constants.js"],"sourcesContent":["export const BUTTON_UNSTYLED_CLASS = 'd-btn--unstyled';\n\nexport const BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-btn--xs',\n  sm: 'd-btn--sm',\n  md: '',\n  lg: 'd-btn--lg',\n  xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n  default: '',\n  muted: 'd-btn--muted',\n  danger: 'd-btn--danger',\n  positive: 'd-btn--positive',\n  inverted: 'd-btn--inverted',\n  unstyled: 'd-btn--unstyled',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n  clear: '',\n  outlined: 'd-btn--outlined',\n  primary: 'd-btn--primary',\n};\n\nexport const BUTTON_TYPES = ['submit', 'reset', 'button'];\n\nexport const ICON_POSITION_MODIFIERS = {\n  left: 'd-btn__icon--left',\n  right: 'd-btn__icon--right',\n  top: 'd-btn__icon--top',\n  bottom: 'd-btn__icon--bottom',\n};\n\nexport const INVALID_COMBINATION = [\n  {\n    circle: true,\n    kind: 'default',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'default', 'primary'),\n  },\n  {\n    circle: true,\n    kind: 'danger',\n    importance: 'outlined',\n    message: _invalidCombinationMessage(true, 'danger', 'outlined'),\n  },\n  {\n    circle: true,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'muted', 'primary'),\n  },\n  {\n    circle: false,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(false, 'muted', 'primary'),\n  },\n];\n\nexport const BUTTON_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '300',\n  lg: '400',\n  xl: '500',\n};\n\nfunction _invalidCombinationMessage (circle, kind, importance) {\n  return `You cannot have a ${circle ? 'circle ' : ''}button \\\nwith kind: ${kind} and importance: ${importance} as it \\\ndoes not exist in our design system. \\\nSee https://dialtone.dialpad.com/components/button.html for a \\\nlist of available button styles`;\n}\n\nexport default {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_TYPES,\n  BUTTON_UNSTYLED_CLASS,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n  BUTTON_ICON_SIZES,\n};\n"],"names":["BUTTON_UNSTYLED_CLASS","BUTTON_SIZE_MODIFIERS","BUTTON_KIND_MODIFIERS","BUTTON_IMPORTANCE_MODIFIERS","BUTTON_TYPES","ICON_POSITION_MODIFIERS","INVALID_COMBINATION","_invalidCombinationMessage","BUTTON_ICON_SIZES","circle","kind","importance","button_constants"],"mappings":"AAAY,MAACA,IAAwB,mBAExBC,IAAwB;AAAA,EACnC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAwB;AAAA,EACnC,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ,GAEaC,IAA8B;AAAA,EACzC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AACX,GAEaC,IAAe,CAAC,UAAU,SAAS,QAAQ,GAE3CC,IAA0B;AAAA,EACrC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AACV,GAEaC,IAAsB;AAAA,EACjC;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAASC,EAA2B,IAAM,WAAW,SAAS;AAAA,EAC/D;AAAA,EACD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAASA,EAA2B,IAAM,UAAU,UAAU;AAAA,EAC/D;AAAA,EACD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAASA,EAA2B,IAAM,SAAS,SAAS;AAAA,EAC7D;AAAA,EACD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAASA,EAA2B,IAAO,SAAS,SAAS;AAAA,EAC9D;AACH,GAEaC,IAAoB;AAAA,EAC/B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAASD,EAA4BE,GAAQC,GAAMC,GAAY;AAC7D,SAAO,qBAAqBF,IAAS,YAAY,EAAE,qBACxCC,CAAI,oBAAoBC,CAAU;AAI/C;AAEA,MAAeC,IAAA;AAAA,EACb,uBAAAX;AAAA,EACA,uBAAAC;AAAA,EACA,6BAAAC;AAAA,EACA,cAAAC;AAAA,EACA,uBAAAJ;AAAA,EACA,yBAAAK;AAAA,EACA,qBAAAC;AAAA,EACA,mBAAAE;AACF;"}

package/dist/vue3/lib/button/button.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a=require("../../common/utils/index.cjs"),i=require("./button-constants.cjs"),c=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),u=require("../link/link-constants.cjs"),d={compatConfig:{MODE:3},name:"DtButton",props:{circle:{type:Boolean,default:!1},iconPosition:{type:String,default:"left",validator:t=>Object.keys(i.ICON_POSITION_MODIFIERS).includes(t)},importance:{type:String,default:"primary",validator:t=>Object.keys(i.BUTTON_IMPORTANCE_MODIFIERS).includes(t)},link:{type:Boolean,default:!1},linkKind:{type:String,default:"default",validator:t=>Object.keys(u.LINK_KIND_MODIFIERS).includes(t)},linkInverted:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},type:{type:String,default:"button",validator:t=>i.BUTTON_TYPES.includes(t)},width:{type:String,default:null},size:{type:String,default:"md",validator:t=>Object.keys(i.BUTTON_SIZE_MODIFIERS).includes(t)},labelClass:{type:[String,Array,Object],default:""},loading:{type:Boolean,default:!1},kind:{type:String,default:"default",validator:t=>Object.keys(i.BUTTON_KIND_MODIFIERS).includes(t)},assertiveOnFocus:{type:Boolean,default:!1},active:{type:Boolean,default:!1}},emits:["focusin","focusout"],data(){return{ICON_POSITION_MODIFIERS:i.ICON_POSITION_MODIFIERS,isInFocus:!1,hasSlotContent:a.hasSlotContent}},computed:{buttonListeners(){return{focusin:t=>{this.isInFocus=this.assertiveOnFocus,this.$emit("focusin",t)},focusout:t=>{this.isInFocus=!1,this.$emit("focusout",t)}}},computedAriaLive(){return this.assertiveOnFocus&&this.isInFocus?"assertive":this.$attrs.ariaLive},iconSize(){return i.BUTTON_ICON_SIZES[this.size]}},watch:{$props:{deep:!0,immediate:!0,handler(){process.env.NODE_ENV!=="production"&&(this.circle&&this.link&&e.warn("You cannot enable circle and link at the same time",this),this.isInvalidPropCombination(this.circle,this.kind,this.importance))}}},methods:{buttonClasses(){return this.link?["d-link",u.getLinkKindModifier(this.linkKind,this.linkInverted),i.BUTTON_SIZE_MODIFIERS[this.size]]:["d-btn",i.BUTTON_IMPORTANCE_MODIFIERS[this.importance],i.BUTTON_KIND_MODIFIERS[this.kind],i.BUTTON_SIZE_MODIFIERS[this.size],{"d-btn--circle":this.circle,"d-btn--loading":this.loading,"d-btn--icon-only":this.isIconOnly(),"d-btn--vertical":this.isVerticalIconLayout(),"d-btn--active":this.active}]},isInvalidPropCombination(t,l,n){for(const s of i.INVALID_COMBINATION)if(t===s.circle&&l===s.kind&&n===s.importance)return console.warn(s.message),!1;return!0},shouldRenderIcon(){return a.hasSlotContent(this.$slots.icon)&&!this.link},isIconOnly(){return this.shouldRenderIcon()&&!a.hasSlotContent(this.$slots.default)},isVerticalIconLayout(){return!this.isIconOnly()&&["top","bottom"].includes(this.iconPosition)}}},I=["type","disabled","aria-live","aria-label"];function _(t,l,n,s,r,o){return e.openBlock(),e.createElementBlock("button",e.mergeProps({class:["base-button__button",o.buttonClasses()],"data-qa":"dt-button",type:n.type,disabled:n.disabled,style:{width:n.width},"aria-live":o.computedAriaLive,"aria-label":n.loading?"loading":t.$attrs["aria-label"]},e.toHandlers(o.buttonListeners,!0)),[o.shouldRenderIcon()?(e.openBlock(),e.createElementBlock("span",{key:0,"data-qa":"dt-button-icon",class:e.normalizeClass(["base-button__icon","d-btn__icon",r.ICON_POSITION_MODIFIERS[n.iconPosition]])},[e.renderSlot(t.$slots,"icon",{iconSize:o.iconSize})],2)):e.createCommentVNode("",!0),r.hasSlotContent(t.$slots.default)?(e.openBlock(),e.createElementBlock("span",{key:1,"data-qa":"dt-button-label",class:e.normalizeClass(["d-btn__label","base-button__label",n.labelClass])},[e.renderSlot(t.$slots,"default")],2)):e.createCommentVNode("",!0)],16,I)}const O=c._(d,[["render",_]]);exports.default=O;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a=require("../../common/utils/index.cjs"),n=require("./button-constants.cjs"),u=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),d=require("../link/link-constants.cjs"),c={compatConfig:{MODE:3},name:"DtButton",props:{circle:{type:Boolean,default:!1},iconPosition:{type:String,default:"left",validator:t=>Object.keys(n.ICON_POSITION_MODIFIERS).includes(t)},importance:{type:String,default:"primary",validator:t=>Object.keys(n.BUTTON_IMPORTANCE_MODIFIERS).includes(t)},link:{type:Boolean,default:!1},linkKind:{type:String,default:"default",validator:t=>Object.keys(d.LINK_KIND_MODIFIERS).includes(t)},linkInverted:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},type:{type:String,default:"button",validator:t=>n.BUTTON_TYPES.includes(t)},width:{type:String,default:null},size:{type:String,default:"md",validator:t=>Object.keys(n.BUTTON_SIZE_MODIFIERS).includes(t)},labelClass:{type:[String,Array,Object],default:""},loading:{type:Boolean,default:!1},kind:{type:String,default:"default",validator:t=>Object.keys(n.BUTTON_KIND_MODIFIERS).includes(t)},assertiveOnFocus:{type:Boolean,default:!1},active:{type:Boolean,default:!1}},emits:["focusin","focusout"],data(){return{ICON_POSITION_MODIFIERS:n.ICON_POSITION_MODIFIERS,isInFocus:!1,hasSlotContent:a.hasSlotContent}},computed:{buttonListeners(){return{focusin:t=>{this.isInFocus=this.assertiveOnFocus,this.$emit("focusin",t)},focusout:t=>{this.isInFocus=!1,this.$emit("focusout",t)}}},computedAriaLive(){return this.assertiveOnFocus&&this.isInFocus?"assertive":this.$attrs.ariaLive},iconSize(){return n.BUTTON_ICON_SIZES[this.size]}},watch:{$props:{deep:!0,immediate:!0,handler(){process.env.NODE_ENV!=="production"&&(this.circle&&this.link&&e.warn("You cannot enable circle and link at the same time",this),this.isInvalidPropCombination(this.circle,this.kind,this.importance))}}},methods:{buttonClasses(){return this.link?["d-link",d.getLinkKindModifier(this.linkKind,this.linkInverted),n.BUTTON_SIZE_MODIFIERS[this.size]]:this.kind==="unstyled"?["d-btn--unstyled"]:["d-btn",n.BUTTON_IMPORTANCE_MODIFIERS[this.importance],n.BUTTON_KIND_MODIFIERS[this.kind],n.BUTTON_SIZE_MODIFIERS[this.size],{"d-btn--circle":this.circle,"d-btn--loading":this.loading,"d-btn--icon-only":this.isIconOnly(),"d-btn--vertical":this.isVerticalIconLayout(),"d-btn--active":this.active}]},isInvalidPropCombination(t,o,i){if(this.kind==="unstyled")return!0;for(const s of n.INVALID_COMBINATION)if(t===s.circle&&o===s.kind&&i===s.importance)return console.warn(s.message),!1;return!0},shouldRenderIcon(){return a.hasSlotContent(this.$slots.icon)&&!this.link},isIconOnly(){return this.shouldRenderIcon()&&!a.hasSlotContent(this.$slots.default)},isVerticalIconLayout(){return!this.isIconOnly()&&["top","bottom"].includes(this.iconPosition)}}},I=["type","disabled","aria-live","aria-label"];function _(t,o,i,s,r,l){return e.openBlock(),e.createElementBlock("button",e.mergeProps({class:["base-button__button",l.buttonClasses()],"data-qa":"dt-button",type:i.type,disabled:i.disabled,style:{width:i.width},"aria-live":l.computedAriaLive,"aria-label":i.loading?"loading":t.$attrs["aria-label"]},e.toHandlers(l.buttonListeners,!0)),[l.shouldRenderIcon()?(e.openBlock(),e.createElementBlock("span",{key:0,"data-qa":"dt-button-icon",class:e.normalizeClass(["base-button__icon",{"d-btn__icon":i.kind!=="unstyled",[r.ICON_POSITION_MODIFIERS[i.iconPosition]]:i.kind!=="unstyled"}])},[e.renderSlot(t.$slots,"icon",{iconSize:l.iconSize})],2)):e.createCommentVNode("",!0),r.hasSlotContent(t.$slots.default)?(e.openBlock(),e.createElementBlock("span",{key:1,"data-qa":"dt-button-label",class:e.normalizeClass(["base-button__label",{"d-btn__label":i.kind!=="unstyled"},i.labelClass])},[e.renderSlot(t.$slots,"default")],2)):e.createCommentVNode("",!0)],16,I)}const b=u._(c,[["render",_]]);exports.default=b;
 //# sourceMappingURL=button.cjs.map

package/dist/vue3/lib/button/button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button.cjs","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n    v-on=\"buttonListeners\"\n  >\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        'd-btn__icon',\n        ICON_POSITION_MODIFIERS[iconPosition],\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtButton',\n\n  props: {\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @values left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, warning, danger, success, muted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, muted, danger, positive, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n\n    buttonListeners () {\n      return {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[this.size],\n        ];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[this.size],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          console.warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    shouldRenderIcon () {\n      return hasSlotContent(this.$slots.icon) && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !hasSlotContent(this.$slots.default);\n    },\n\n    isVerticalIconLayout () {\n      return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","position","ICON_POSITION_MODIFIERS","i","BUTTON_IMPORTANCE_MODIFIERS","lk","LINK_KIND_MODIFIERS","BUTTON_TYPES","s","BUTTON_SIZE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","hasSlotContent","e","BUTTON_ICON_SIZES","warn","getLinkKindModifier","circle","kind","importance","row","INVALID_COMBINATION","_hoisted_1","_openBlock","_createElementBlock","_mergeProps","$options","$props","_ctx","_toHandlers","_normalizeClass","$data","_renderSlot","_createCommentVNode"],"mappings":"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"}
+{"version":3,"file":"button.cjs","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n    v-on=\"buttonListeners\"\n  >\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          [ICON_POSITION_MODIFIERS[iconPosition]]: kind !== 'unstyled',\n        },\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"[\n        'base-button__label',\n        { 'd-btn__label': kind !== 'unstyled' },\n        labelClass,\n      ]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtButton',\n\n  props: {\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @values left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, warning, danger, success, muted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, unstyled, muted, danger, positive, inverted, unstyled\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n\n    buttonListeners () {\n      return {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[this.size],\n        ];\n      }\n      if (this.kind === 'unstyled') {\n        return ['d-btn--unstyled'];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[this.size],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      // Skip validation if unstyled is true\n      if (this.kind === 'unstyled') {\n        return true;\n      }\n\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          console.warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    shouldRenderIcon () {\n      return hasSlotContent(this.$slots.icon) && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !hasSlotContent(this.$slots.default);\n    },\n\n    isVerticalIconLayout () {\n      return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","position","ICON_POSITION_MODIFIERS","i","BUTTON_IMPORTANCE_MODIFIERS","lk","LINK_KIND_MODIFIERS","BUTTON_TYPES","s","BUTTON_SIZE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","hasSlotContent","e","BUTTON_ICON_SIZES","warn","getLinkKindModifier","circle","kind","importance","row","INVALID_COMBINATION","_hoisted_1","_openBlock","_createElementBlock","_mergeProps","$options","$props","_ctx","_toHandlers","_normalizeClass","$data","_renderSlot","_createCommentVNode"],"mappings":"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"}

package/dist/vue3/lib/button/button.js

@@ -1,7 +1,7 @@
-import { warn as m, openBlock as s, createElementBlock as a, mergeProps as p, toHandlers as y, normalizeClass as c, renderSlot as u, createCommentVNode as f } from "vue";
-import { hasSlotContent as o } from "../../common/utils/index.js";
-import { ICON_POSITION_MODIFIERS as h, BUTTON_IMPORTANCE_MODIFIERS as b, BUTTON_TYPES as O, BUTTON_SIZE_MODIFIERS as l, BUTTON_KIND_MODIFIERS as I, BUTTON_ICON_SIZES as _, INVALID_COMBINATION as S } from "./button-constants.js";
-import { _ as k } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import { warn as y, openBlock as s, createElementBlock as a, mergeProps as m, toHandlers as O, normalizeClass as u, renderSlot as c, createCommentVNode as f } from "vue";
+import { hasSlotContent as l } from "../../common/utils/index.js";
+import { ICON_POSITION_MODIFIERS as h, BUTTON_IMPORTANCE_MODIFIERS as b, BUTTON_TYPES as _, BUTTON_SIZE_MODIFIERS as o, BUTTON_KIND_MODIFIERS as I, BUTTON_ICON_SIZES as p, INVALID_COMBINATION as k } from "./button-constants.js";
+import { _ as S } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 import { LINK_KIND_MODIFIERS as v, getLinkKindModifier as N } from "../link/link-constants.js";
 const g = {
   compatConfig: { MODE: 3 },
@@ -84,7 +84,7 @@ const g = {
     type: {
       type: String,
       default: "button",
-      validator: (t) => O.includes(t)
+      validator: (t) => _.includes(t)
     },
     /**
      * Button width, accepts
@@ -104,7 +104,7 @@ const g = {
     size: {
       type: String,
       default: "md",
-      validator: (t) => Object.keys(l).includes(t)
+      validator: (t) => Object.keys(o).includes(t)
     },
     /**
      * Used to customize the label container
@@ -123,7 +123,7 @@ const g = {
     },
     /**
      * The color of the button.
-     * @values default, muted, danger, positive, inverted
+     * @values default, unstyled, muted, danger, positive, inverted, unstyled
      */
     kind: {
       type: String,
@@ -171,7 +171,7 @@ const g = {
       ICON_POSITION_MODIFIERS: h,
       // whether the button is currently in focus
       isInFocus: !1,
-      hasSlotContent: o
+      hasSlotContent: l
     };
   },
   computed: {
@@ -189,7 +189,7 @@ const g = {
       return this.assertiveOnFocus && this.isInFocus ? "assertive" : this.$attrs.ariaLive;
     },
     iconSize() {
-      return _[this.size];
+      return p[this.size];
     }
   },
   watch: {
@@ -197,7 +197,7 @@ const g = {
       deep: !0,
       immediate: !0,
       handler() {
-        process.env.NODE_ENV !== "production" && (this.circle && this.link && m("You cannot enable circle and link at the same time", this), this.isInvalidPropCombination(this.circle, this.kind, this.importance));
+        process.env.NODE_ENV !== "production" && (this.circle && this.link && y("You cannot enable circle and link at the same time", this), this.isInvalidPropCombination(this.circle, this.kind, this.importance));
       }
     }
   },
@@ -206,12 +206,12 @@ const g = {
       return this.link ? [
         "d-link",
         N(this.linkKind, this.linkInverted),
-        l[this.size]
-      ] : [
+        o[this.size]
+      ] : this.kind === "unstyled" ? ["d-btn--unstyled"] : [
         "d-btn",
         b[this.importance],
         I[this.kind],
-        l[this.size],
+        o[this.size],
         {
           "d-btn--circle": this.circle,
           "d-btn--loading": this.loading,
@@ -222,16 +222,18 @@ const g = {
       ];
     },
     isInvalidPropCombination(t, r, e) {
-      for (const i of S)
+      if (this.kind === "unstyled")
+        return !0;
+      for (const i of k)
         if (t === i.circle && r === i.kind && e === i.importance)
           return console.warn(i.message), !1;
       return !0;
     },
     shouldRenderIcon() {
-      return o(this.$slots.icon) && !this.link;
+      return l(this.$slots.icon) && !this.link;
     },
     isIconOnly() {
-      return this.shouldRenderIcon() && !o(this.$slots.default);
+      return this.shouldRenderIcon() && !l(this.$slots.default);
     },
     isVerticalIconLayout() {
       return !this.isIconOnly() && ["top", "bottom"].includes(this.iconPosition);
@@ -239,7 +241,7 @@ const g = {
   }
 }, B = ["type", "disabled", "aria-live", "aria-label"];
 function C(t, r, e, i, d, n) {
-  return s(), a("button", p({
+  return s(), a("button", m({
     class: [
       "base-button__button",
       n.buttonClasses()
@@ -250,28 +252,34 @@ function C(t, r, e, i, d, n) {
     style: { width: e.width },
     "aria-live": n.computedAriaLive,
     "aria-label": e.loading ? "loading" : t.$attrs["aria-label"]
-  }, y(n.buttonListeners, !0)), [
+  }, O(n.buttonListeners, !0)), [
     n.shouldRenderIcon() ? (s(), a("span", {
       key: 0,
       "data-qa": "dt-button-icon",
-      class: c([
+      class: u([
         "base-button__icon",
-        "d-btn__icon",
-        d.ICON_POSITION_MODIFIERS[e.iconPosition]
+        {
+          "d-btn__icon": e.kind !== "unstyled",
+          [d.ICON_POSITION_MODIFIERS[e.iconPosition]]: e.kind !== "unstyled"
+        }
       ])
     }, [
-      u(t.$slots, "icon", { iconSize: n.iconSize })
+      c(t.$slots, "icon", { iconSize: n.iconSize })
     ], 2)) : f("", !0),
     d.hasSlotContent(t.$slots.default) ? (s(), a("span", {
       key: 1,
       "data-qa": "dt-button-label",
-      class: c(["d-btn__label", "base-button__label", e.labelClass])
+      class: u([
+        "base-button__label",
+        { "d-btn__label": e.kind !== "unstyled" },
+        e.labelClass
+      ])
     }, [
-      u(t.$slots, "default")
+      c(t.$slots, "default")
     ], 2)) : f("", !0)
   ], 16, B);
 }
-const M = /* @__PURE__ */ k(g, [["render", C]]);
+const M = /* @__PURE__ */ S(g, [["render", C]]);
 export {
   M as default
 };

package/dist/vue3/lib/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n    v-on=\"buttonListeners\"\n  >\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        'd-btn__icon',\n        ICON_POSITION_MODIFIERS[iconPosition],\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtButton',\n\n  props: {\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @values left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, warning, danger, success, muted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, muted, danger, positive, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n\n    buttonListeners () {\n      return {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[this.size],\n        ];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[this.size],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          console.warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    shouldRenderIcon () {\n      return hasSlotContent(this.$slots.icon) && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !hasSlotContent(this.$slots.default);\n    },\n\n    isVerticalIconLayout () {\n      return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","position","ICON_POSITION_MODIFIERS","i","BUTTON_IMPORTANCE_MODIFIERS","lk","LINK_KIND_MODIFIERS","BUTTON_TYPES","s","BUTTON_SIZE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","hasSlotContent","e","BUTTON_ICON_SIZES","warn","getLinkKindModifier","circle","kind","importance","row","INVALID_COMBINATION","_hoisted_1","_openBlock","_createElementBlock","_mergeProps","$options","$props","_ctx","_toHandlers","_normalizeClass","$data","_renderSlot","_createCommentVNode"],"mappings":";;;;;AA+DA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAACC,MAAa,OAAO,KAAKC,CAAuB,EAAE,SAASD,CAAQ;AAAA,IAChF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAACE,MAAM,OAAO,KAAKC,CAA2B,EAAE,SAASD,CAAC;AAAA,IACtE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAACE,MAAO,OAAO,KAAKC,CAAmB,EAAE,SAASD,CAAE;AAAA,IAChE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,MAAME,EAAa,SAAS,CAAC;AAAA,IAC1C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAACC,MAAM,OAAO,KAAKC,CAAqB,EAAE,SAASD,CAAC;AAAA,IAChE;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAACE,MAAM,OAAO,KAAKC,CAAqB,EAAE,SAASD,CAAC;AAAA,IAChE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,yBAAAR;AAAA;AAAA,MAEA,WAAW;AAAA,MACX,gBAAAU;AAAA;EAEH;AAAA,EAED,UAAU;AAAA,IAER,kBAAmB;AACjB,aAAO;AAAA,QACL,SAAS,CAACC,MAAM;AACd,eAAK,YAAY,KAAK,kBACtB,KAAK,MAAM,WAAWA,CAAC;AAAA,QACxB;AAAA,QAED,UAAU,CAACA,MAAM;AACf,eAAK,YAAY,IACjB,KAAK,MAAM,YAAYA,CAAC;AAAA,QACzB;AAAA;IAEJ;AAAA,IAED,mBAAoB;AAClB,aAAO,KAAK,oBAAoB,KAAK,YAAY,cAAc,KAAK,OAAO;AAAA,IAC5E;AAAA,IAED,WAAY;AACV,aAAOC,EAAkB,KAAK,IAAI;AAAA,IACnC;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,WAAW;AAAA,MACX,UAAW;AACT,QAAI,QAAQ,IAAI,aAAa,iBAEzB,KAAK,UAAU,KAAK,QACtBC,EAAK,sDAAsD,IAAI,GAGjE,KAAK,yBAAyB,KAAK,QAAQ,KAAK,MAAM,KAAK,UAAU;AAAA,MACtE;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,gBAAiB;AACf,aAAI,KAAK,OACA;AAAA,QACL;AAAA,QACAC,EAAoB,KAAK,UAAU,KAAK,YAAY;AAAA,QACpDP,EAAsB,KAAK,IAAI;AAAA,UAG5B;AAAA,QACL;AAAA,QACAL,EAA4B,KAAK,UAAU;AAAA,QAC3CO,EAAsB,KAAK,IAAI;AAAA,QAC/BF,EAAsB,KAAK,IAAI;AAAA,QAC/B;AAAA,UACE,iBAAiB,KAAK;AAAA,UACtB,kBAAkB,KAAK;AAAA,UACvB,oBAAoB,KAAK,WAAY;AAAA,UACrC,mBAAmB,KAAK,qBAAsB;AAAA,UAC9C,iBAAiB,KAAK;AAAA,QACvB;AAAA;IAEJ;AAAA,IAED,yBAA0BQ,GAAQC,GAAMC,GAAY;AAClD,iBAAWC,KAAOC;AAChB,YAAIJ,MAAWG,EAAI,UAAUF,MAASE,EAAI,QAAQD,MAAeC,EAAI;AACnE,yBAAQ,KAAKA,EAAI,OAAO,GACjB;AAGX,aAAO;AAAA,IACR;AAAA,IAED,mBAAoB;AAClB,aAAOR,EAAe,KAAK,OAAO,IAAI,KAAK,CAAC,KAAK;AAAA,IAClD;AAAA,IAED,aAAc;AACZ,aAAO,KAAK,sBAAsB,CAACA,EAAe,KAAK,OAAO,OAAO;AAAA,IACtE;AAAA,IAED,uBAAwB;AACtB,aAAO,CAAC,KAAK,WAAU,KAAM,CAAC,OAAO,QAAQ,EAAE,SAAS,KAAK,YAAY;AAAA,IAC1E;AAAA,EACF;AACH,GApVAU,IAAA,CAAA,QAAA,YAAA,aAAA,YAAA;;AACE,SAAAC,EAAA,GAAAC,EAqCS,UArCTC,EAqCS;AAAA,IApCN,OAAK;AAAA;MAAuCC,EAAa,cAAA;AAAA;IAI1D,WAAQ;AAAA,IACP,MAAMC,EAAI;AAAA,IACV,UAAUA,EAAQ;AAAA,IAClB,gBAAgBA,EAAK,MAAA;AAAA,IACrB,aAAWD,EAAgB;AAAA,IAC3B,cAAYC,EAAO,UAAA,YAAeC,EAAM,OAAA,YAAA;AAAA,EACzC,GAAAC,EAAsBH,EAAD,iBAAA,EAAA,CAAA,GAAA;AAAA,IAIbA,EAAgB,iBAAA,UADxBF,EAcO,QAAA;AAAA,MA7BX,KAAA;AAAA,MAiBM,WAAQ;AAAA,MACP,OAlBPM,EAAA;AAAA;;QAkB4EC,EAAA,wBAAwBJ,EAAY,YAAA;AAAA;;MAO1GK,EAGEJ,EAAA,QAAA,QAAA,EADC,UAAWF,EAAQ,UAAA;AAAA,aA3B5BO,EAAA,IAAA,EAAA;AAAA,IA+BYF,EAAc,eAACH,EAAM,OAAC,OAAO,UADrCJ,EAOO,QAAA;AAAA,MArCX,KAAA;AAAA,MAgCM,WAAQ;AAAA,MACP,OAjCPM,yCAiCqDH,EAAU,UAAA,CAAA;AAAA;MAGzDK,EAAQJ,EAAA,QAAA,SAAA;AAAA,aApCdK,EAAA,IAAA,EAAA;AAAA,EAAA,GAAA,IAAAX,CAAA;;;"}
+{"version":3,"file":"button.js","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n    v-on=\"buttonListeners\"\n  >\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          [ICON_POSITION_MODIFIERS[iconPosition]]: kind !== 'unstyled',\n        },\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"[\n        'base-button__label',\n        { 'd-btn__label': kind !== 'unstyled' },\n        labelClass,\n      ]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtButton',\n\n  props: {\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @values left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, warning, danger, success, muted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, unstyled, muted, danger, positive, inverted, unstyled\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n\n    buttonListeners () {\n      return {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[this.size],\n        ];\n      }\n      if (this.kind === 'unstyled') {\n        return ['d-btn--unstyled'];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[this.size],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      // Skip validation if unstyled is true\n      if (this.kind === 'unstyled') {\n        return true;\n      }\n\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          console.warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    shouldRenderIcon () {\n      return hasSlotContent(this.$slots.icon) && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !hasSlotContent(this.$slots.default);\n    },\n\n    isVerticalIconLayout () {\n      return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","position","ICON_POSITION_MODIFIERS","i","BUTTON_IMPORTANCE_MODIFIERS","lk","LINK_KIND_MODIFIERS","BUTTON_TYPES","s","BUTTON_SIZE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","hasSlotContent","e","BUTTON_ICON_SIZES","warn","getLinkKindModifier","circle","kind","importance","row","INVALID_COMBINATION","_hoisted_1","_openBlock","_createElementBlock","_mergeProps","$options","$props","_ctx","_toHandlers","_normalizeClass","$data","_renderSlot","_createCommentVNode"],"mappings":"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"}

package/dist/vue3/types/components/button/button.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.vue.d.ts","sourceRoot":"","sources":["../../../../components/button/button.vue"],"names":[],"mappings":"AAwCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAyV+B,gBAAgB"}
+{"version":3,"file":"button.vue.d.ts","sourceRoot":"","sources":["../../../../components/button/button.vue"],"names":[],"mappings":"AA8CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAuW+B,gBAAgB"}

package/dist/vue3/types/components/button/button_constants.d.ts

@@ -1,3 +1,4 @@
+export const BUTTON_UNSTYLED_CLASS: "d-btn--unstyled";
 export namespace BUTTON_SIZE_MODIFIERS {
     let xs: string;
     let sm: string;
@@ -12,6 +13,7 @@ export namespace BUTTON_KIND_MODIFIERS {
     export let danger: string;
     export let positive: string;
     export let inverted: string;
+    export let unstyled: string;
 }
 export namespace BUTTON_IMPORTANCE_MODIFIERS {
     let clear: string;
@@ -48,6 +50,7 @@ declare namespace _default {
     export { BUTTON_KIND_MODIFIERS };
     export { BUTTON_IMPORTANCE_MODIFIERS };
     export { BUTTON_TYPES };
+    export { BUTTON_UNSTYLED_CLASS };
     export { ICON_POSITION_MODIFIERS };
     export { INVALID_COMBINATION };
     export { BUTTON_ICON_SIZES };

package/dist/vue3/types/components/button/button_constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button_constants.d.ts","sourceRoot":"","sources":["../../../../components/button/button_constants.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAsBA,oCAA0D;;;;;;;AAS1D;;;;;IAyBE"}
+{"version":3,"file":"button_constants.d.ts","sourceRoot":"","sources":["../../../../components/button/button_constants.js"],"names":[],"mappings":"AAAA,sDAAuD;;;;;;;;;;;;;;;;;;;;;;AAyBvD,oCAA0D;;;;;;;AAS1D;;;;;IAyBE"}

package/dist/vue3/types/components/item_layout/item_layout.vue.d.ts

@@ -77,9 +77,9 @@ declare const _default: import('vue').DefineComponent<{
         default: string;
     };
 }>>, {
+    unstyled: boolean;
     contentClass: string;
     as: string;
-    unstyled: boolean;
     leftClass: string;
     titleClass: string;
     subtitleClass: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/dialtone",
-  "version": "9.115.1",
+  "version": "9.116.0",
   "description": "Dialpad's Dialtone design system monorepo",
   "files": [
     "dist"