@atlaskit/lozenge 13.3.3 → 13.4.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/lozenge
 
+## 13.4.0
+
+### Minor Changes
+
+- [`2828d1ffb6a1e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2828d1ffb6a1e) -
+  Added a `spacing` prop which takes `default` and `spacious`. `spacious` increases padding and sets
+  the lozenge height to 32px.
+
+## 13.3.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 13.3.3
 
 ### Patch Changes

package/dist/cjs/new/icon-renderer.js

@@ -61,12 +61,13 @@ var IconRenderer = exports.IconRenderer = function IconRenderer(_ref) {
   var Icon = _ref.icon,
     color = _ref.color,
     isSelected = _ref.isSelected,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    size = _ref.size;
   var iconColor = getIconColor(color, isSelected);
   return /*#__PURE__*/_react.default.createElement(Icon, {
     color: iconColor,
     label: "",
-    size: "small",
+    size: size,
     testId: testId
   });
 };

package/dist/cjs/new/lozenge-base.compiled.css

@@ -1,12 +1,17 @@
 
+._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
+._zulp12x7{gap:var(--ds-space-075,6px)}
 ._zulp1b66{gap:var(--ds-space-050,4px)}
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._18zr1b66{padding-inline:var(--ds-space-050,4px)}
+._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}
 ._1h6dzs9d{border-color:color-mix(in oklch,var(--border-color) 100%,var(--cm-border-color) var(--cm-border-value))!important}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}
 ._1rjcv77o{padding-block:var(--ds-space-025,2px)}._111i1h4e{--icon-pressed-l-factor:0.7}
 ._13muu67f{--cm-border-color:#fff}
 ._168qx19p{--cm-icon-value:20%}
@@ -35,6 +40,7 @@
 ._1iel6xdd{--icon-hovered-l-factor:0.8}
 ._1k671038{--border-l-factor:1.33}
 ._1reo15vq{overflow-x:hidden}
+._1tkeviql{min-height:2rem}
 ._1xe213rw>span:first-of-type>svg{color:color-mix(in oklch,var(--icon-color) 100%,var(--cm-icon-color) var(--cm-icon-value))}
 ._3wu016y8{--border-color:var(--ds-border-accent-red,#e2483d)}
 ._3wu01b2s{--border-color:var(--ds-border-accent-orange,#e06c00)}
@@ -77,6 +83,7 @@
 ._bg3q9by0{--cm-border-pressed-value:10%}
 ._fdt01r5k{--cm-icon-hovered-value:30%}
 ._hyog26zw{--border-pressed-l-factor:1.08}
+._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._m71tr3uz{--cm-icon-color:#000}
 ._o5721q9c{white-space:nowrap}
 ._oe6mmko7{--cm-border-value:45%}

package/dist/cjs/new/lozenge-base.js

@@ -22,9 +22,11 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var styles = {
   container: "_2rko12b0 _1reo15vq _18m915vq _zulp1b66 _1rjcv77o _18zr1b66 _189ee4h9 _1dqonqa1 _1h6d1j28 _1e0c116y _4cvr1h6o _vchhusvi _4t3i1k92",
+  containerSpacious: "_2rko1qi0 _zulp12x7 _1rjc1b66 _18zrutpp _1tkeviql",
   containerInteractive: "_80omtlke _mizu1v1w _1ah3v77o _ra3xnqa1 _128mdkaa",
   containerSelected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp",
   text: "_11c8wadc _1reo15vq _18m915vq _1bto1l2s _o5721q9c",
+  textSpacious: "_11c8fhey _k48p1wq8",
   textSelected: "_syaz6x5g",
   'semantic.success': "_1b3i4pcx _3wu01mps _bfhk14j0 _syaz1p1e",
   'semantic.warning': "_1b3iervl _3wu01xiv _bfhk10f4 _syazmgs1",
@@ -76,6 +78,8 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
     iconBefore = _ref.iconBefore,
     _ref$maxWidth = _ref.maxWidth,
     maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
     isSelected = _ref.isSelected,
     onClick = _ref.onClick,
     style = _ref.style,
@@ -97,6 +101,7 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
     maxWidth: maxWidthIsPc ? maxWidth : '100%'
   };
   var innerContent = /*#__PURE__*/React.createElement(_react.Fragment, null, iconBefore && /*#__PURE__*/React.createElement(_iconRenderer.default, {
+    size: spacing === 'spacious' ? 'medium' : 'small',
     icon: iconBefore,
     color: resolvedColor,
     isSelected: isInteractive ? isSelected : undefined,
@@ -107,7 +112,7 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
       color: style === null || style === void 0 ? void 0 : style.color
     },
     "data-testid": testId && "".concat(testId, "--text"),
-    className: (0, _runtime.ax)([styles.text])
+    className: (0, _runtime.ax)([styles.text, spacing === 'spacious' && styles.textSpacious])
   }, children), isInteractive && /*#__PURE__*/React.createElement(_chevronDown.default, {
     label: "",
     size: "small",
@@ -117,7 +122,7 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
   if (isInteractive) {
     return /*#__PURE__*/React.createElement(_pressable.default, {
       ref: ref,
-      xcss: (0, _css.cx)(styles.container, !isSelected && styles.iconBorderFilter, !isSelected && styles.iconBorderInteractiveFilter, styles[colorStyleKey], styles[interactiveStyleKey], isSelected && styles.containerSelected),
+      xcss: (0, _css.cx)(styles.container, spacing === 'spacious' && styles.containerSpacious, !isSelected && styles.iconBorderFilter, !isSelected && styles.iconBorderInteractiveFilter, styles[colorStyleKey], styles[interactiveStyleKey], isSelected && styles.containerSelected),
       onClick: onClick,
       style: _objectSpread(_objectSpread({}, commonStyleOverrides), {}, {
         // Specified because Pressable has a default border:none which overrides the border specified on the container
@@ -134,7 +139,7 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
     ref: ref,
     style: commonStyleOverrides,
     "data-testid": testId,
-    className: (0, _runtime.ax)([styles.container, styles[colorStyleKey], styles.iconBorderFilter])
+    className: (0, _runtime.ax)([styles.container, spacing === 'spacious' && styles.containerSpacious, styles[colorStyleKey], styles.iconBorderFilter])
   }, innerContent);
 }));
 var _default = exports.default = LozengeBase;

package/dist/cjs/new/lozenge-dropdown-trigger.js

@@ -30,6 +30,8 @@ var LozengeDropdownTrigger = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _re
     testId = _ref.testId,
     _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'neutral' : _ref$appearance,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
     iconBefore = _ref.iconBefore,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
@@ -43,6 +45,7 @@ var LozengeDropdownTrigger = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _re
   return /*#__PURE__*/React.createElement(_lozengeBase.default, {
     ref: ref,
     appearance: appearance,
+    spacing: spacing,
     iconBefore: iconBefore,
     isSelected: isSelected,
     maxWidth: maxWidth

package/dist/cjs/new/lozenge.js

@@ -23,6 +23,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var Lozenge = function Lozenge(_ref) {
   var _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'neutral' : _ref$appearance,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
     _ref$maxWidth = _ref.maxWidth,
     maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
     style = _ref.style,
@@ -31,6 +33,7 @@ var Lozenge = function Lozenge(_ref) {
     iconBefore = _ref.iconBefore;
   return /*#__PURE__*/React.createElement(_lozengeBase.default, {
     appearance: appearance,
+    spacing: spacing,
     iconBefore: iconBefore,
     maxWidth: maxWidth
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop

package/dist/es2019/new/icon-renderer.js

@@ -54,13 +54,14 @@ export const IconRenderer = ({
   icon: Icon,
   color,
   isSelected,
-  testId
+  testId,
+  size
 }) => {
   const iconColor = getIconColor(color, isSelected);
   return /*#__PURE__*/React.createElement(Icon, {
     color: iconColor,
     label: "",
-    size: "small",
+    size: size,
     testId: testId
   });
 };

package/dist/es2019/new/lozenge-base.compiled.css

@@ -1,12 +1,17 @@
 
+._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
+._zulp12x7{gap:var(--ds-space-075,6px)}
 ._zulp1b66{gap:var(--ds-space-050,4px)}
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._18zr1b66{padding-inline:var(--ds-space-050,4px)}
+._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}
 ._1h6dzs9d{border-color:color-mix(in oklch,var(--border-color) 100%,var(--cm-border-color) var(--cm-border-value))!important}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}
 ._1rjcv77o{padding-block:var(--ds-space-025,2px)}._111i1h4e{--icon-pressed-l-factor:0.7}
 ._13muu67f{--cm-border-color:#fff}
 ._168qx19p{--cm-icon-value:20%}
@@ -35,6 +40,7 @@
 ._1iel6xdd{--icon-hovered-l-factor:0.8}
 ._1k671038{--border-l-factor:1.33}
 ._1reo15vq{overflow-x:hidden}
+._1tkeviql{min-height:2rem}
 ._1xe213rw>span:first-of-type>svg{color:color-mix(in oklch,var(--icon-color) 100%,var(--cm-icon-color) var(--cm-icon-value))}
 ._3wu016y8{--border-color:var(--ds-border-accent-red,#e2483d)}
 ._3wu01b2s{--border-color:var(--ds-border-accent-orange,#e06c00)}
@@ -77,6 +83,7 @@
 ._bg3q9by0{--cm-border-pressed-value:10%}
 ._fdt01r5k{--cm-icon-hovered-value:30%}
 ._hyog26zw{--border-pressed-l-factor:1.08}
+._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._m71tr3uz{--cm-icon-color:#000}
 ._o5721q9c{white-space:nowrap}
 ._oe6mmko7{--cm-border-value:45%}

package/dist/es2019/new/lozenge-base.js

@@ -10,9 +10,11 @@ import IconRenderer from './icon-renderer';
 import { getThemeStyles, resolveLozengeColor } from './utils';
 const styles = {
   container: "_2rko12b0 _1reo15vq _18m915vq _zulp1b66 _1rjcv77o _18zr1b66 _189ee4h9 _1dqonqa1 _1h6d1j28 _1e0c116y _4cvr1h6o _vchhusvi _4t3i1k92",
+  containerSpacious: "_2rko1qi0 _zulp12x7 _1rjc1b66 _18zrutpp _1tkeviql",
   containerInteractive: "_80omtlke _mizu1v1w _1ah3v77o _ra3xnqa1 _128mdkaa",
   containerSelected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp",
   text: "_11c8wadc _1reo15vq _18m915vq _1bto1l2s _o5721q9c",
+  textSpacious: "_11c8fhey _k48p1wq8",
   textSelected: "_syaz6x5g",
   'semantic.success': "_1b3i4pcx _3wu01mps _bfhk14j0 _syaz1p1e",
   'semantic.warning': "_1b3iervl _3wu01xiv _bfhk10f4 _syazmgs1",
@@ -63,6 +65,7 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   appearance,
   iconBefore,
   maxWidth = 200,
+  spacing = 'default',
   isSelected,
   // for dropdown trigger
   onClick,
@@ -88,6 +91,7 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     maxWidth: maxWidthIsPc ? maxWidth : '100%'
   };
   const innerContent = /*#__PURE__*/React.createElement(Fragment, null, iconBefore && /*#__PURE__*/React.createElement(IconRenderer, {
+    size: spacing === 'spacious' ? 'medium' : 'small',
     icon: iconBefore,
     color: resolvedColor,
     isSelected: isInteractive ? isSelected : undefined,
@@ -98,7 +102,7 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       color: style === null || style === void 0 ? void 0 : style.color
     },
     "data-testid": testId && `${testId}--text`,
-    className: ax([styles.text])
+    className: ax([styles.text, spacing === 'spacious' && styles.textSpacious])
   }, children), isInteractive && /*#__PURE__*/React.createElement(ChevronDownIcon, {
     label: "",
     size: "small",
@@ -108,7 +112,7 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (isInteractive) {
     return /*#__PURE__*/React.createElement(Pressable, {
       ref: ref,
-      xcss: cx(styles.container, !isSelected && styles.iconBorderFilter, !isSelected && styles.iconBorderInteractiveFilter, styles[colorStyleKey], styles[interactiveStyleKey], isSelected && styles.containerSelected),
+      xcss: cx(styles.container, spacing === 'spacious' && styles.containerSpacious, !isSelected && styles.iconBorderFilter, !isSelected && styles.iconBorderInteractiveFilter, styles[colorStyleKey], styles[interactiveStyleKey], isSelected && styles.containerSelected),
       onClick: onClick,
       style: {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
@@ -127,7 +131,7 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ref: ref,
     style: commonStyleOverrides,
     "data-testid": testId,
-    className: ax([styles.container, styles[colorStyleKey], styles.iconBorderFilter])
+    className: ax([styles.container, spacing === 'spacious' && styles.containerSpacious, styles[colorStyleKey], styles.iconBorderFilter])
   }, innerContent);
 }));
 export default LozengeBase;

package/dist/es2019/new/lozenge-dropdown-trigger.js

@@ -20,6 +20,7 @@ const LozengeDropdownTrigger = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   testId,
   appearance = 'neutral',
+  spacing = 'default',
   iconBefore,
   isSelected = false,
   maxWidth = 200,
@@ -31,6 +32,7 @@ const LozengeDropdownTrigger = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/React.createElement(LozengeBase, {
     ref: ref,
     appearance: appearance,
+    spacing: spacing,
     iconBefore: iconBefore,
     isSelected: isSelected,
     maxWidth: maxWidth

package/dist/es2019/new/lozenge.js

@@ -13,6 +13,7 @@ import LozengeBase from './lozenge-base';
  */
 const Lozenge = ({
   appearance = 'neutral',
+  spacing = 'default',
   maxWidth = 200,
   style,
   testId,
@@ -21,6 +22,7 @@ const Lozenge = ({
 }) => {
   return /*#__PURE__*/React.createElement(LozengeBase, {
     appearance: appearance,
+    spacing: spacing,
     iconBefore: iconBefore,
     maxWidth: maxWidth
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop

package/dist/esm/new/icon-renderer.js

@@ -54,12 +54,13 @@ export var IconRenderer = function IconRenderer(_ref) {
   var Icon = _ref.icon,
     color = _ref.color,
     isSelected = _ref.isSelected,
-    testId = _ref.testId;
+    testId = _ref.testId,
+    size = _ref.size;
   var iconColor = getIconColor(color, isSelected);
   return /*#__PURE__*/React.createElement(Icon, {
     color: iconColor,
     label: "",
-    size: "small",
+    size: size,
     testId: testId
   });
 };

package/dist/esm/new/lozenge-base.compiled.css

@@ -1,12 +1,17 @@
 
+._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
+._zulp12x7{gap:var(--ds-space-075,6px)}
 ._zulp1b66{gap:var(--ds-space-050,4px)}
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._18zr1b66{padding-inline:var(--ds-space-050,4px)}
+._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}
 ._1h6dzs9d{border-color:color-mix(in oklch,var(--border-color) 100%,var(--cm-border-color) var(--cm-border-value))!important}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}
 ._1rjcv77o{padding-block:var(--ds-space-025,2px)}._111i1h4e{--icon-pressed-l-factor:0.7}
 ._13muu67f{--cm-border-color:#fff}
 ._168qx19p{--cm-icon-value:20%}
@@ -35,6 +40,7 @@
 ._1iel6xdd{--icon-hovered-l-factor:0.8}
 ._1k671038{--border-l-factor:1.33}
 ._1reo15vq{overflow-x:hidden}
+._1tkeviql{min-height:2rem}
 ._1xe213rw>span:first-of-type>svg{color:color-mix(in oklch,var(--icon-color) 100%,var(--cm-icon-color) var(--cm-icon-value))}
 ._3wu016y8{--border-color:var(--ds-border-accent-red,#e2483d)}
 ._3wu01b2s{--border-color:var(--ds-border-accent-orange,#e06c00)}
@@ -77,6 +83,7 @@
 ._bg3q9by0{--cm-border-pressed-value:10%}
 ._fdt01r5k{--cm-icon-hovered-value:30%}
 ._hyog26zw{--border-pressed-l-factor:1.08}
+._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._m71tr3uz{--cm-icon-color:#000}
 ._o5721q9c{white-space:nowrap}
 ._oe6mmko7{--cm-border-value:45%}

package/dist/esm/new/lozenge-base.js

@@ -13,9 +13,11 @@ import IconRenderer from './icon-renderer';
 import { getThemeStyles, resolveLozengeColor } from './utils';
 var styles = {
   container: "_2rko12b0 _1reo15vq _18m915vq _zulp1b66 _1rjcv77o _18zr1b66 _189ee4h9 _1dqonqa1 _1h6d1j28 _1e0c116y _4cvr1h6o _vchhusvi _4t3i1k92",
+  containerSpacious: "_2rko1qi0 _zulp12x7 _1rjc1b66 _18zrutpp _1tkeviql",
   containerInteractive: "_80omtlke _mizu1v1w _1ah3v77o _ra3xnqa1 _128mdkaa",
   containerSelected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp",
   text: "_11c8wadc _1reo15vq _18m915vq _1bto1l2s _o5721q9c",
+  textSpacious: "_11c8fhey _k48p1wq8",
   textSelected: "_syaz6x5g",
   'semantic.success': "_1b3i4pcx _3wu01mps _bfhk14j0 _syaz1p1e",
   'semantic.warning': "_1b3iervl _3wu01xiv _bfhk10f4 _syazmgs1",
@@ -67,6 +69,8 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
     iconBefore = _ref.iconBefore,
     _ref$maxWidth = _ref.maxWidth,
     maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
     isSelected = _ref.isSelected,
     onClick = _ref.onClick,
     style = _ref.style,
@@ -88,6 +92,7 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
     maxWidth: maxWidthIsPc ? maxWidth : '100%'
   };
   var innerContent = /*#__PURE__*/React.createElement(Fragment, null, iconBefore && /*#__PURE__*/React.createElement(IconRenderer, {
+    size: spacing === 'spacious' ? 'medium' : 'small',
     icon: iconBefore,
     color: resolvedColor,
     isSelected: isInteractive ? isSelected : undefined,
@@ -98,7 +103,7 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
       color: style === null || style === void 0 ? void 0 : style.color
     },
     "data-testid": testId && "".concat(testId, "--text"),
-    className: ax([styles.text])
+    className: ax([styles.text, spacing === 'spacious' && styles.textSpacious])
   }, children), isInteractive && /*#__PURE__*/React.createElement(ChevronDownIcon, {
     label: "",
     size: "small",
@@ -108,7 +113,7 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
   if (isInteractive) {
     return /*#__PURE__*/React.createElement(Pressable, {
       ref: ref,
-      xcss: cx(styles.container, !isSelected && styles.iconBorderFilter, !isSelected && styles.iconBorderInteractiveFilter, styles[colorStyleKey], styles[interactiveStyleKey], isSelected && styles.containerSelected),
+      xcss: cx(styles.container, spacing === 'spacious' && styles.containerSpacious, !isSelected && styles.iconBorderFilter, !isSelected && styles.iconBorderInteractiveFilter, styles[colorStyleKey], styles[interactiveStyleKey], isSelected && styles.containerSelected),
       onClick: onClick,
       style: _objectSpread(_objectSpread({}, commonStyleOverrides), {}, {
         // Specified because Pressable has a default border:none which overrides the border specified on the container
@@ -125,7 +130,7 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
     ref: ref,
     style: commonStyleOverrides,
     "data-testid": testId,
-    className: ax([styles.container, styles[colorStyleKey], styles.iconBorderFilter])
+    className: ax([styles.container, spacing === 'spacious' && styles.containerSpacious, styles[colorStyleKey], styles.iconBorderFilter])
   }, innerContent);
 }));
 export default LozengeBase;

package/dist/esm/new/lozenge-dropdown-trigger.js

@@ -21,6 +21,8 @@ var LozengeDropdownTrigger = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function
     testId = _ref.testId,
     _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'neutral' : _ref$appearance,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
     iconBefore = _ref.iconBefore,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
@@ -34,6 +36,7 @@ var LozengeDropdownTrigger = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function
   return /*#__PURE__*/React.createElement(LozengeBase, {
     ref: ref,
     appearance: appearance,
+    spacing: spacing,
     iconBefore: iconBefore,
     isSelected: isSelected,
     maxWidth: maxWidth

package/dist/esm/new/lozenge.js

@@ -14,6 +14,8 @@ import LozengeBase from './lozenge-base';
 var Lozenge = function Lozenge(_ref) {
   var _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'neutral' : _ref$appearance,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
     _ref$maxWidth = _ref.maxWidth,
     maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
     style = _ref.style,
@@ -22,6 +24,7 @@ var Lozenge = function Lozenge(_ref) {
     iconBefore = _ref.iconBefore;
   return /*#__PURE__*/React.createElement(LozengeBase, {
     appearance: appearance,
+    spacing: spacing,
     iconBefore: iconBefore,
     maxWidth: maxWidth
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
 export { default } from './lozenge';
 export type { ThemeAppearance, LozengeProps } from './lozenge';
 export { default as LozengeDropdownTrigger } from './new/lozenge-dropdown-trigger';
-export type { NewLozengeProps, LozengeColor as NewLozengeColor, LozengeDropdownTriggerProps, } from './new/types';
+export type { NewLozengeProps, LozengeColor as NewLozengeColor, LozengeDropdownTriggerProps, LozengeSpacing, } from './new/types';

package/dist/types/new/icon-renderer.d.ts

@@ -17,10 +17,14 @@ export interface IconRendererProps {
      * Test ID for the icon
      */
     testId?: string;
+    /**
+     * Size of the icon
+     */
+    size?: 'small' | 'medium';
 }
 /**
  * Icon renderer for lozenge components
  * Handles proper sizing and color theming for icons
  */
-export declare const IconRenderer: ({ icon: Icon, color, isSelected, testId }: IconRendererProps) => React.JSX.Element;
+export declare const IconRenderer: ({ icon: Icon, color, isSelected, testId, size, }: IconRendererProps) => React.JSX.Element;
 export default IconRenderer;

package/dist/types/new/lozenge.d.ts

@@ -9,7 +9,7 @@ import { type NewLozengeProps } from './types';
  * - [Usage](https://atlassian.design/components/lozenge/usage)
  */
 declare const Lozenge: {
-    ({ appearance, maxWidth, style, testId, children, iconBefore, }: NewLozengeProps): JSX.Element;
+    ({ appearance, spacing, maxWidth, style, testId, children, iconBefore, }: NewLozengeProps): JSX.Element;
     displayName: string;
 };
 export default Lozenge;

package/dist/types/new/types.d.ts

@@ -21,6 +21,7 @@ export type IconProp = ComponentType<Omit<NewIconProps, 'spacing'>>;
 /**
  * Props for the NewLozenge component
  */
+export type LozengeSpacing = 'default' | 'spacious';
 export interface NewLozengeProps {
     /**
      * The appearance of the lozenge. Supports both legacy semantic appearances and new accent/semantic colors.
@@ -35,6 +36,13 @@ export interface NewLozengeProps {
      * Icon to display before the text content. Should be an ADS icon component.
      */
     iconBefore?: IconProp;
+    /**
+     * Controls the overall spacing (padding + height) of the lozenge.
+     *
+     * - `default` matches the current visual appearance.
+     * - `spacious` increases padding and sets the lozenge height to 32px.
+     */
+    spacing?: LozengeSpacing;
     /**
      * max-width of lozenge container. Default to 200px.
      */

package/dist/types-ts4.5/index.d.ts

@@ -1,4 +1,4 @@
 export { default } from './lozenge';
 export type { ThemeAppearance, LozengeProps } from './lozenge';
 export { default as LozengeDropdownTrigger } from './new/lozenge-dropdown-trigger';
-export type { NewLozengeProps, LozengeColor as NewLozengeColor, LozengeDropdownTriggerProps, } from './new/types';
+export type { NewLozengeProps, LozengeColor as NewLozengeColor, LozengeDropdownTriggerProps, LozengeSpacing, } from './new/types';

package/dist/types-ts4.5/new/icon-renderer.d.ts

@@ -17,10 +17,14 @@ export interface IconRendererProps {
      * Test ID for the icon
      */
     testId?: string;
+    /**
+     * Size of the icon
+     */
+    size?: 'small' | 'medium';
 }
 /**
  * Icon renderer for lozenge components
  * Handles proper sizing and color theming for icons
  */
-export declare const IconRenderer: ({ icon: Icon, color, isSelected, testId }: IconRendererProps) => React.JSX.Element;
+export declare const IconRenderer: ({ icon: Icon, color, isSelected, testId, size, }: IconRendererProps) => React.JSX.Element;
 export default IconRenderer;

package/dist/types-ts4.5/new/lozenge.d.ts

@@ -9,7 +9,7 @@ import { type NewLozengeProps } from './types';
  * - [Usage](https://atlassian.design/components/lozenge/usage)
  */
 declare const Lozenge: {
-    ({ appearance, maxWidth, style, testId, children, iconBefore, }: NewLozengeProps): JSX.Element;
+    ({ appearance, spacing, maxWidth, style, testId, children, iconBefore, }: NewLozengeProps): JSX.Element;
     displayName: string;
 };
 export default Lozenge;

package/dist/types-ts4.5/new/types.d.ts

@@ -21,6 +21,7 @@ export type IconProp = ComponentType<Omit<NewIconProps, 'spacing'>>;
 /**
  * Props for the NewLozenge component
  */
+export type LozengeSpacing = 'default' | 'spacious';
 export interface NewLozengeProps {
     /**
      * The appearance of the lozenge. Supports both legacy semantic appearances and new accent/semantic colors.
@@ -35,6 +36,13 @@ export interface NewLozengeProps {
      * Icon to display before the text content. Should be an ADS icon component.
      */
     iconBefore?: IconProp;
+    /**
+     * Controls the overall spacing (padding + height) of the lozenge.
+     *
+     * - `default` matches the current visual appearance.
+     * - `spacious` increases padding and sets the lozenge height to 32px.
+     */
+    spacing?: LozengeSpacing;
     /**
      * max-width of lozenge container. Default to 200px.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/lozenge",
-	"version": "13.3.3",
+	"version": "13.4.0",
 	"description": "A lozenge is a visual indicator used to highlight an item's status for quick recognition.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -54,8 +54,8 @@
 		"@atlaskit/ds-lib": "^5.3.0",
 		"@atlaskit/icon": "^30.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^17.1.0",
-		"@atlaskit/tokens": "^10.1.0",
+		"@atlaskit/primitives": "^18.0.0",
+		"@atlaskit/tokens": "^11.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6"
 	},