@atlaskit/lozenge 12.2.5 → 13.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/lozenge
 
+## 13.0.0
+
+### Major Changes
+
+- [#157573](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/157573)
+  [`e9334c37a9e16`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e9334c37a9e16) -
+  Removes Emotion variant of the Lozenge and replaces contents with styles from Compiled CSS.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.2.5
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -4,24 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _compiled = _interopRequireDefault(require("./compiled"));
-var _Lozenge = _interopRequireDefault(require("./Lozenge"));
-/**
- * __Lozenge__
- *
- * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
- *
- * - [Examples](https://atlassian.design/components/lozenge/examples)
- * - [Code](https://atlassian.design/components/lozenge/code)
- * - [Usage](https://atlassian.design/components/lozenge/usage)
- */
-var Lozenge = /*#__PURE__*/_react.default.memo(function (props) {
-  return (0, _platformFeatureFlags.fg)('platform_dst_lozenge_fg') ? /*#__PURE__*/_react.default.createElement(_compiled.default, props) : /*#__PURE__*/_react.default.createElement(_Lozenge.default, props);
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _lozenge.default;
+  }
 });
-
-// NOTE: Remove this and just directly `export { default } from '…';` when tidying `platform_dst_lozenge_fg`
-Lozenge.displayName = 'Lozenge';
-var _default = exports.default = Lozenge;
+var _lozenge = _interopRequireDefault(require("./lozenge"));

package/dist/cjs/{compiled/index.js → lozenge.js}

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* lozenge.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-require("./index.compiled.css");
+require("./lozenge.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");

package/dist/es2019/index.js

@@ -1,18 +1 @@
-import React from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
-import CompiledLozenge from './compiled';
-import EmotionLozenge from './Lozenge';
-/**
- * __Lozenge__
- *
- * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
- *
- * - [Examples](https://atlassian.design/components/lozenge/examples)
- * - [Code](https://atlassian.design/components/lozenge/code)
- * - [Usage](https://atlassian.design/components/lozenge/usage)
- */
-const Lozenge = /*#__PURE__*/React.memo(props => fg('platform_dst_lozenge_fg') ? /*#__PURE__*/React.createElement(CompiledLozenge, props) : /*#__PURE__*/React.createElement(EmotionLozenge, props));
-
-// NOTE: Remove this and just directly `export { default } from '…';` when tidying `platform_dst_lozenge_fg`
-Lozenge.displayName = 'Lozenge';
-export default Lozenge;
+export { default } from './lozenge';

package/dist/es2019/{compiled/index.js → lozenge.js}

@@ -1,5 +1,5 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
-import "./index.compiled.css";
+/* lozenge.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./lozenge.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { memo, useMemo } from 'react';

package/dist/esm/index.js

@@ -1,20 +1 @@
-import React from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
-import CompiledLozenge from './compiled';
-import EmotionLozenge from './Lozenge';
-/**
- * __Lozenge__
- *
- * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
- *
- * - [Examples](https://atlassian.design/components/lozenge/examples)
- * - [Code](https://atlassian.design/components/lozenge/code)
- * - [Usage](https://atlassian.design/components/lozenge/usage)
- */
-var Lozenge = /*#__PURE__*/React.memo(function (props) {
-  return fg('platform_dst_lozenge_fg') ? /*#__PURE__*/React.createElement(CompiledLozenge, props) : /*#__PURE__*/React.createElement(EmotionLozenge, props);
-});
-
-// NOTE: Remove this and just directly `export { default } from '…';` when tidying `platform_dst_lozenge_fg`
-Lozenge.displayName = 'Lozenge';
-export default Lozenge;
+export { default } from './lozenge';

package/dist/esm/{compiled/index.js → lozenge.js}

@@ -1,5 +1,5 @@
-/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
-import "./index.compiled.css";
+/* lozenge.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./lozenge.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { memo, useMemo } from 'react';

package/dist/types/index.d.ts

@@ -1,14 +1,2 @@
-import EmotionLozenge from './Lozenge';
-export type { ThemeAppearance } from './Lozenge';
-export type { LozengeProps } from './Lozenge';
-/**
- * __Lozenge__
- *
- * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
- *
- * - [Examples](https://atlassian.design/components/lozenge/examples)
- * - [Code](https://atlassian.design/components/lozenge/code)
- * - [Usage](https://atlassian.design/components/lozenge/usage)
- */
-declare const Lozenge: typeof EmotionLozenge;
-export default Lozenge;
+export { default } from './lozenge';
+export type { ThemeAppearance, LozengeProps } from './lozenge';

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

@@ -1,14 +1,2 @@
-import EmotionLozenge from './Lozenge';
-export type { ThemeAppearance } from './Lozenge';
-export type { LozengeProps } from './Lozenge';
-/**
- * __Lozenge__
- *
- * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
- *
- * - [Examples](https://atlassian.design/components/lozenge/examples)
- * - [Code](https://atlassian.design/components/lozenge/code)
- * - [Usage](https://atlassian.design/components/lozenge/usage)
- */
-declare const Lozenge: typeof EmotionLozenge;
-export default Lozenge;
+export { default } from './lozenge';
+export type { ThemeAppearance, LozengeProps } from './lozenge';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/lozenge",
-	"version": "12.2.5",
+	"version": "13.0.0",
 	"description": "A lozenge is a visual indicator used to highlight an item's status for quick recognition.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -25,8 +25,7 @@
 	],
 	"atlaskit:src": "src/index.tsx",
 	"af:exports": {
-		".": "./src/index.tsx",
-		"./compiled": "./src/compiled/index.tsx"
+		".": "./src/index.tsx"
 	},
 	"atlassian": {
 		"team": "Design System Team",
@@ -44,8 +43,7 @@
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tokens": "^5.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.3",
-		"@emotion/react": "^11.7.1"
+		"@compiled/react": "^0.18.3"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0"
@@ -75,8 +73,7 @@
 			"dom-events": "use-bind-event-listener",
 			"design-system": "v1",
 			"styling": [
-				"static",
-				"emotion"
+				"static"
 			],
 			"ui-components": [
 				"primitives",
@@ -99,9 +96,6 @@
 		},
 		"platform-lozenge-custom-letterspacing": {
 			"type": "boolean"
-		},
-		"platform_dst_lozenge_fg": {
-			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/lozenge/"

package/compiled/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "@atlaskit/lozenge/compiled",
-  "main": "../dist/cjs/compiled/index.js",
-  "module": "../dist/esm/compiled/index.js",
-  "module:es2019": "../dist/es2019/compiled/index.js",
-  "sideEffects": [
-    "**/*.compiled.css"
-  ],
-  "types": "../dist/types/compiled/index.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.4": {
-      "*": [
-        "../dist/types-ts4.5/compiled/index.d.ts"
-      ]
-    }
-  }
-}

package/dist/cjs/Lozenge/index.js

@@ -1,275 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _primitives = require("@atlaskit/primitives");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var baseStylesOld = (0, _primitives.xcss)({
-  display: 'inline-flex',
-  borderRadius: 'border.radius',
-  blockSize: 'min-content',
-  position: 'static',
-  overflow: 'hidden'
-});
-var styles = {
-  container: (0, _react2.css)({
-    display: 'inline-flex',
-    boxSizing: 'border-box',
-    position: 'static',
-    blockSize: 'min-content',
-    borderRadius: '3px',
-    overflow: 'hidden',
-    paddingInline: "var(--ds-space-050, 4px)"
-  }),
-  containerSubtle: (0, _react2.css)({
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-    outlineOffset: -1
-  }),
-  background: {
-    bold: {
-      default: (0, _react2.css)({
-        backgroundColor: '#DDDEE1'
-      }),
-      inprogress: (0, _react2.css)({
-        backgroundColor: '#8FB8F6'
-      }),
-      moved: (0, _react2.css)({
-        backgroundColor: '#F9C84E'
-      }),
-      new: (0, _react2.css)({
-        backgroundColor: '#D8A0F7'
-      }),
-      removed: (0, _react2.css)({
-        backgroundColor: '#FD9891'
-      }),
-      success: (0, _react2.css)({
-        backgroundColor: '#B3DF72'
-      })
-    },
-    subtle: {
-      default: (0, _react2.css)({
-        backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
-      }),
-      inprogress: (0, _react2.css)({
-        backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
-      }),
-      moved: (0, _react2.css)({
-        backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
-      }),
-      new: (0, _react2.css)({
-        backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
-      }),
-      removed: (0, _react2.css)({
-        backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
-      }),
-      success: (0, _react2.css)({
-        backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
-      })
-    }
-  },
-  border: {
-    subtle: {
-      default: (0, _react2.css)({
-        border: "1px solid #B7B9BE"
-      }),
-      inprogress: (0, _react2.css)({
-        border: "1px solid #669DF1"
-      }),
-      moved: (0, _react2.css)({
-        border: "1px solid #FCA700"
-      }),
-      new: (0, _react2.css)({
-        border: "1px solid #C97CF4"
-      }),
-      removed: (0, _react2.css)({
-        border: "1px solid #F87168"
-      }),
-      success: (0, _react2.css)({
-        border: "1px solid #94C748"
-      })
-    }
-  },
-  outline: {
-    subtle: {
-      default: (0, _react2.css)({
-        outline: "1px solid #B7B9BE"
-      }),
-      inprogress: (0, _react2.css)({
-        outline: "1px solid #669DF1"
-      }),
-      moved: (0, _react2.css)({
-        outline: "1px solid #FCA700"
-      }),
-      new: (0, _react2.css)({
-        outline: "1px solid #C97CF4"
-      }),
-      removed: (0, _react2.css)({
-        outline: "1px solid #F87168"
-      }),
-      success: (0, _react2.css)({
-        outline: "1px solid #94C748"
-      })
-    }
-  },
-  text: {
-    subtle: (0, _react2.css)({
-      color: "var(--ds-text, #172B4D)"
-    }),
-    bold: (0, _react2.css)({
-      color: '#292A2E'
-    })
-  }
-};
-var textStyles = (0, _react2.css)({
-  fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  fontSize: '11px',
-  fontStyle: 'normal',
-  fontWeight: "var(--ds-font-weight-bold, 700)",
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '16px',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  textTransform: 'uppercase',
-  whiteSpace: 'nowrap'
-});
-var customLetterspacingStyles = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  letterSpacing: 0.165
-});
-/**
- * __Lozenge__
- *
- * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
- *
- * - [Examples](https://atlassian.design/components/lozenge/examples)
- * - [Code](https://atlassian.design/components/lozenge/code)
- * - [Usage](https://atlassian.design/components/lozenge/usage)
- */
-var Lozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var children = _ref.children,
-    testId = _ref.testId,
-    _ref$isBold = _ref.isBold,
-    isBold = _ref$isBold === void 0 ? false : _ref$isBold,
-    _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
-    _ref$maxWidth = _ref.maxWidth,
-    maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
-    style = _ref.style;
-  var appearanceStyle = isBold ? 'bold' : 'subtle';
-  var appearanceType = appearance in styles.background[appearanceStyle] ? appearance : 'default';
-  var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
-  var maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);
-  if ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh')) {
-    return (0, _react2.jsx)("span", {
-      style: {
-        backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
-        maxWidth: maxWidthIsPc ? maxWidth : '100%'
-      },
-      css: [styles.container, styles.background[appearanceStyle][appearanceType], appearanceStyle === 'subtle' && !(0, _platformFeatureFlags.fg)('visual-refresh_drop_5') && styles.border.subtle[appearanceType], appearanceStyle === 'subtle' && (0, _platformFeatureFlags.fg)('visual-refresh_drop_5') && styles.outline.subtle[appearanceType], appearanceStyle === 'subtle' && (0, _platformFeatureFlags.fg)('visual-refresh_drop_5') && styles.containerSubtle],
-      "data-testid": testId
-    }, (0, _react2.jsx)("span", {
-      css: [textStyles, (0, _platformFeatureFlags.fg)('platform-lozenge-custom-letterspacing') && customLetterspacingStyles, styles.text[appearanceStyle]],
-      style: {
-        color: style === null || style === void 0 ? void 0 : style.color,
-        // to negate paddingInline specified on Box above
-        maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
-      },
-      "data-testid": testId && "".concat(testId, "--text")
-    }, children));
-  }
-  var appearanceTypeOld = appearance in backgroundColorsOld[appearanceStyle] ? appearance : 'default';
-  return (0, _react2.jsx)(_primitives.Box, {
-    as: "span",
-    backgroundColor: backgroundColorsOld[appearanceStyle][appearanceTypeOld],
-    style: {
-      backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
-      maxWidth: maxWidthIsPc ? maxWidth : '100%'
-    },
-    paddingInline: "space.050",
-    xcss: baseStylesOld,
-    testId: testId
-  }, (0, _react2.jsx)("span", {
-    css: [textStyles, (0, _platformFeatureFlags.fg)('platform-lozenge-custom-letterspacing') && customLetterspacingStyles, textColorsOld[appearanceStyle][appearanceType]],
-    style: {
-      color: style === null || style === void 0 ? void 0 : style.color,
-      // to negate paddingInline specified on Box above
-      maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
-    },
-    "data-testid": testId && "".concat(testId, "--text")
-  }, children));
-});
-Lozenge.displayName = 'Lozenge';
-var _default = exports.default = Lozenge;
-var backgroundColorsOld = {
-  bold: {
-    default: 'color.background.neutral.bold',
-    inprogress: 'color.background.information.bold',
-    moved: 'color.background.warning.bold',
-    new: 'color.background.discovery.bold',
-    removed: 'color.background.danger.bold',
-    success: 'color.background.success.bold'
-  },
-  subtle: {
-    default: 'color.background.neutral',
-    inprogress: 'color.background.information',
-    moved: 'color.background.warning',
-    new: 'color.background.discovery',
-    removed: 'color.background.danger',
-    success: 'color.background.success'
-  }
-};
-var textColorsOld = {
-  bold: {
-    default: (0, _react2.css)({
-      color: "var(--ds-text-inverse, #FFFFFF)"
-    }),
-    inprogress: (0, _react2.css)({
-      color: "var(--ds-text-inverse, #FFFFFF)"
-    }),
-    moved: (0, _react2.css)({
-      color: "var(--ds-text-warning-inverse, #172B4D)"
-    }),
-    new: (0, _react2.css)({
-      color: "var(--ds-text-inverse, #FFFFFF)"
-    }),
-    removed: (0, _react2.css)({
-      color: "var(--ds-text-inverse, #FFFFFF)"
-    }),
-    success: (0, _react2.css)({
-      color: "var(--ds-text-inverse, #FFFFFF)"
-    })
-  },
-  subtle: {
-    default: (0, _react2.css)({
-      color: "var(--ds-text-subtle, #42526E)"
-    }),
-    inprogress: (0, _react2.css)({
-      color: "var(--ds-text-information, #0052CC)"
-    }),
-    moved: (0, _react2.css)({
-      color: "var(--ds-text-warning, #974F0C)"
-    }),
-    new: (0, _react2.css)({
-      color: "var(--ds-text-discovery, #403294)"
-    }),
-    removed: (0, _react2.css)({
-      color: "var(--ds-text-danger, #DE350B)"
-    }),
-    success: (0, _react2.css)({
-      color: "var(--ds-text-success, #006644)"
-    })
-  }
-};

package/dist/es2019/Lozenge/index.js

@@ -1,266 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { memo } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, xcss } from '@atlaskit/primitives';
-const baseStylesOld = xcss({
-  display: 'inline-flex',
-  borderRadius: 'border.radius',
-  blockSize: 'min-content',
-  position: 'static',
-  overflow: 'hidden'
-});
-const styles = {
-  container: css({
-    display: 'inline-flex',
-    boxSizing: 'border-box',
-    position: 'static',
-    blockSize: 'min-content',
-    borderRadius: '3px',
-    overflow: 'hidden',
-    paddingInline: "var(--ds-space-050, 4px)"
-  }),
-  containerSubtle: css({
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-    outlineOffset: -1
-  }),
-  background: {
-    bold: {
-      default: css({
-        backgroundColor: '#DDDEE1'
-      }),
-      inprogress: css({
-        backgroundColor: '#8FB8F6'
-      }),
-      moved: css({
-        backgroundColor: '#F9C84E'
-      }),
-      new: css({
-        backgroundColor: '#D8A0F7'
-      }),
-      removed: css({
-        backgroundColor: '#FD9891'
-      }),
-      success: css({
-        backgroundColor: '#B3DF72'
-      })
-    },
-    subtle: {
-      default: css({
-        backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
-      }),
-      inprogress: css({
-        backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
-      }),
-      moved: css({
-        backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
-      }),
-      new: css({
-        backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
-      }),
-      removed: css({
-        backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
-      }),
-      success: css({
-        backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
-      })
-    }
-  },
-  border: {
-    subtle: {
-      default: css({
-        border: `1px solid #B7B9BE`
-      }),
-      inprogress: css({
-        border: `1px solid #669DF1`
-      }),
-      moved: css({
-        border: `1px solid #FCA700`
-      }),
-      new: css({
-        border: `1px solid #C97CF4`
-      }),
-      removed: css({
-        border: `1px solid #F87168`
-      }),
-      success: css({
-        border: `1px solid #94C748`
-      })
-    }
-  },
-  outline: {
-    subtle: {
-      default: css({
-        outline: `1px solid #B7B9BE`
-      }),
-      inprogress: css({
-        outline: `1px solid #669DF1`
-      }),
-      moved: css({
-        outline: `1px solid #FCA700`
-      }),
-      new: css({
-        outline: `1px solid #C97CF4`
-      }),
-      removed: css({
-        outline: `1px solid #F87168`
-      }),
-      success: css({
-        outline: `1px solid #94C748`
-      })
-    }
-  },
-  text: {
-    subtle: css({
-      color: "var(--ds-text, #172B4D)"
-    }),
-    bold: css({
-      color: '#292A2E'
-    })
-  }
-};
-const textStyles = css({
-  fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  fontSize: '11px',
-  fontStyle: 'normal',
-  fontWeight: "var(--ds-font-weight-bold, 700)",
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '16px',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  textTransform: 'uppercase',
-  whiteSpace: 'nowrap'
-});
-const customLetterspacingStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  letterSpacing: 0.165
-});
-/**
- * __Lozenge__
- *
- * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
- *
- * - [Examples](https://atlassian.design/components/lozenge/examples)
- * - [Code](https://atlassian.design/components/lozenge/code)
- * - [Usage](https://atlassian.design/components/lozenge/usage)
- */
-const Lozenge = /*#__PURE__*/memo(({
-  children,
-  testId,
-  isBold = false,
-  appearance = 'default',
-  maxWidth = 200,
-  style
-}) => {
-  const appearanceStyle = isBold ? 'bold' : 'subtle';
-  const appearanceType = appearance in styles.background[appearanceStyle] ? appearance : 'default';
-  const maxWidthValue = typeof maxWidth === 'string' ? maxWidth : `${maxWidth}px`;
-  const maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);
-  if (fg('platform-component-visual-refresh')) {
-    return jsx("span", {
-      style: {
-        backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
-        maxWidth: maxWidthIsPc ? maxWidth : '100%'
-      },
-      css: [styles.container, styles.background[appearanceStyle][appearanceType], appearanceStyle === 'subtle' && !fg('visual-refresh_drop_5') && styles.border.subtle[appearanceType], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && styles.outline.subtle[appearanceType], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && styles.containerSubtle],
-      "data-testid": testId
-    }, jsx("span", {
-      css: [textStyles, fg('platform-lozenge-custom-letterspacing') && customLetterspacingStyles, styles.text[appearanceStyle]],
-      style: {
-        color: style === null || style === void 0 ? void 0 : style.color,
-        // to negate paddingInline specified on Box above
-        maxWidth: maxWidthIsPc ? '100%' : `calc(${maxWidthValue} - ${"var(--ds-space-100, 8px)"})`
-      },
-      "data-testid": testId && `${testId}--text`
-    }, children));
-  }
-  const appearanceTypeOld = appearance in backgroundColorsOld[appearanceStyle] ? appearance : 'default';
-  return jsx(Box, {
-    as: "span",
-    backgroundColor: backgroundColorsOld[appearanceStyle][appearanceTypeOld],
-    style: {
-      backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
-      maxWidth: maxWidthIsPc ? maxWidth : '100%'
-    },
-    paddingInline: "space.050",
-    xcss: baseStylesOld,
-    testId: testId
-  }, jsx("span", {
-    css: [textStyles, fg('platform-lozenge-custom-letterspacing') && customLetterspacingStyles, textColorsOld[appearanceStyle][appearanceType]],
-    style: {
-      color: style === null || style === void 0 ? void 0 : style.color,
-      // to negate paddingInline specified on Box above
-      maxWidth: maxWidthIsPc ? '100%' : `calc(${maxWidthValue} - ${"var(--ds-space-100, 8px)"})`
-    },
-    "data-testid": testId && `${testId}--text`
-  }, children));
-});
-Lozenge.displayName = 'Lozenge';
-export default Lozenge;
-const backgroundColorsOld = {
-  bold: {
-    default: 'color.background.neutral.bold',
-    inprogress: 'color.background.information.bold',
-    moved: 'color.background.warning.bold',
-    new: 'color.background.discovery.bold',
-    removed: 'color.background.danger.bold',
-    success: 'color.background.success.bold'
-  },
-  subtle: {
-    default: 'color.background.neutral',
-    inprogress: 'color.background.information',
-    moved: 'color.background.warning',
-    new: 'color.background.discovery',
-    removed: 'color.background.danger',
-    success: 'color.background.success'
-  }
-};
-const textColorsOld = {
-  bold: {
-    default: css({
-      color: "var(--ds-text-inverse, #FFFFFF)"
-    }),
-    inprogress: css({
-      color: "var(--ds-text-inverse, #FFFFFF)"
-    }),
-    moved: css({
-      color: "var(--ds-text-warning-inverse, #172B4D)"
-    }),
-    new: css({
-      color: "var(--ds-text-inverse, #FFFFFF)"
-    }),
-    removed: css({
-      color: "var(--ds-text-inverse, #FFFFFF)"
-    }),
-    success: css({
-      color: "var(--ds-text-inverse, #FFFFFF)"
-    })
-  },
-  subtle: {
-    default: css({
-      color: "var(--ds-text-subtle, #42526E)"
-    }),
-    inprogress: css({
-      color: "var(--ds-text-information, #0052CC)"
-    }),
-    moved: css({
-      color: "var(--ds-text-warning, #974F0C)"
-    }),
-    new: css({
-      color: "var(--ds-text-discovery, #403294)"
-    }),
-    removed: css({
-      color: "var(--ds-text-danger, #DE350B)"
-    }),
-    success: css({
-      color: "var(--ds-text-success, #006644)"
-    })
-  }
-};

package/dist/esm/Lozenge/index.js

@@ -1,268 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { memo } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, xcss } from '@atlaskit/primitives';
-var baseStylesOld = xcss({
-  display: 'inline-flex',
-  borderRadius: 'border.radius',
-  blockSize: 'min-content',
-  position: 'static',
-  overflow: 'hidden'
-});
-var styles = {
-  container: css({
-    display: 'inline-flex',
-    boxSizing: 'border-box',
-    position: 'static',
-    blockSize: 'min-content',
-    borderRadius: '3px',
-    overflow: 'hidden',
-    paddingInline: "var(--ds-space-050, 4px)"
-  }),
-  containerSubtle: css({
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-    outlineOffset: -1
-  }),
-  background: {
-    bold: {
-      default: css({
-        backgroundColor: '#DDDEE1'
-      }),
-      inprogress: css({
-        backgroundColor: '#8FB8F6'
-      }),
-      moved: css({
-        backgroundColor: '#F9C84E'
-      }),
-      new: css({
-        backgroundColor: '#D8A0F7'
-      }),
-      removed: css({
-        backgroundColor: '#FD9891'
-      }),
-      success: css({
-        backgroundColor: '#B3DF72'
-      })
-    },
-    subtle: {
-      default: css({
-        backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
-      }),
-      inprogress: css({
-        backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
-      }),
-      moved: css({
-        backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
-      }),
-      new: css({
-        backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
-      }),
-      removed: css({
-        backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
-      }),
-      success: css({
-        backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
-      })
-    }
-  },
-  border: {
-    subtle: {
-      default: css({
-        border: "1px solid #B7B9BE"
-      }),
-      inprogress: css({
-        border: "1px solid #669DF1"
-      }),
-      moved: css({
-        border: "1px solid #FCA700"
-      }),
-      new: css({
-        border: "1px solid #C97CF4"
-      }),
-      removed: css({
-        border: "1px solid #F87168"
-      }),
-      success: css({
-        border: "1px solid #94C748"
-      })
-    }
-  },
-  outline: {
-    subtle: {
-      default: css({
-        outline: "1px solid #B7B9BE"
-      }),
-      inprogress: css({
-        outline: "1px solid #669DF1"
-      }),
-      moved: css({
-        outline: "1px solid #FCA700"
-      }),
-      new: css({
-        outline: "1px solid #C97CF4"
-      }),
-      removed: css({
-        outline: "1px solid #F87168"
-      }),
-      success: css({
-        outline: "1px solid #94C748"
-      })
-    }
-  },
-  text: {
-    subtle: css({
-      color: "var(--ds-text, #172B4D)"
-    }),
-    bold: css({
-      color: '#292A2E'
-    })
-  }
-};
-var textStyles = css({
-  fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  fontSize: '11px',
-  fontStyle: 'normal',
-  fontWeight: "var(--ds-font-weight-bold, 700)",
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '16px',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  textTransform: 'uppercase',
-  whiteSpace: 'nowrap'
-});
-var customLetterspacingStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  letterSpacing: 0.165
-});
-/**
- * __Lozenge__
- *
- * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
- *
- * - [Examples](https://atlassian.design/components/lozenge/examples)
- * - [Code](https://atlassian.design/components/lozenge/code)
- * - [Usage](https://atlassian.design/components/lozenge/usage)
- */
-var Lozenge = /*#__PURE__*/memo(function (_ref) {
-  var children = _ref.children,
-    testId = _ref.testId,
-    _ref$isBold = _ref.isBold,
-    isBold = _ref$isBold === void 0 ? false : _ref$isBold,
-    _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
-    _ref$maxWidth = _ref.maxWidth,
-    maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
-    style = _ref.style;
-  var appearanceStyle = isBold ? 'bold' : 'subtle';
-  var appearanceType = appearance in styles.background[appearanceStyle] ? appearance : 'default';
-  var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
-  var maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);
-  if (fg('platform-component-visual-refresh')) {
-    return jsx("span", {
-      style: {
-        backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
-        maxWidth: maxWidthIsPc ? maxWidth : '100%'
-      },
-      css: [styles.container, styles.background[appearanceStyle][appearanceType], appearanceStyle === 'subtle' && !fg('visual-refresh_drop_5') && styles.border.subtle[appearanceType], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && styles.outline.subtle[appearanceType], appearanceStyle === 'subtle' && fg('visual-refresh_drop_5') && styles.containerSubtle],
-      "data-testid": testId
-    }, jsx("span", {
-      css: [textStyles, fg('platform-lozenge-custom-letterspacing') && customLetterspacingStyles, styles.text[appearanceStyle]],
-      style: {
-        color: style === null || style === void 0 ? void 0 : style.color,
-        // to negate paddingInline specified on Box above
-        maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
-      },
-      "data-testid": testId && "".concat(testId, "--text")
-    }, children));
-  }
-  var appearanceTypeOld = appearance in backgroundColorsOld[appearanceStyle] ? appearance : 'default';
-  return jsx(Box, {
-    as: "span",
-    backgroundColor: backgroundColorsOld[appearanceStyle][appearanceTypeOld],
-    style: {
-      backgroundColor: style === null || style === void 0 ? void 0 : style.backgroundColor,
-      maxWidth: maxWidthIsPc ? maxWidth : '100%'
-    },
-    paddingInline: "space.050",
-    xcss: baseStylesOld,
-    testId: testId
-  }, jsx("span", {
-    css: [textStyles, fg('platform-lozenge-custom-letterspacing') && customLetterspacingStyles, textColorsOld[appearanceStyle][appearanceType]],
-    style: {
-      color: style === null || style === void 0 ? void 0 : style.color,
-      // to negate paddingInline specified on Box above
-      maxWidth: maxWidthIsPc ? '100%' : "calc(".concat(maxWidthValue, " - ", "var(--ds-space-100, 8px)", ")")
-    },
-    "data-testid": testId && "".concat(testId, "--text")
-  }, children));
-});
-Lozenge.displayName = 'Lozenge';
-export default Lozenge;
-var backgroundColorsOld = {
-  bold: {
-    default: 'color.background.neutral.bold',
-    inprogress: 'color.background.information.bold',
-    moved: 'color.background.warning.bold',
-    new: 'color.background.discovery.bold',
-    removed: 'color.background.danger.bold',
-    success: 'color.background.success.bold'
-  },
-  subtle: {
-    default: 'color.background.neutral',
-    inprogress: 'color.background.information',
-    moved: 'color.background.warning',
-    new: 'color.background.discovery',
-    removed: 'color.background.danger',
-    success: 'color.background.success'
-  }
-};
-var textColorsOld = {
-  bold: {
-    default: css({
-      color: "var(--ds-text-inverse, #FFFFFF)"
-    }),
-    inprogress: css({
-      color: "var(--ds-text-inverse, #FFFFFF)"
-    }),
-    moved: css({
-      color: "var(--ds-text-warning-inverse, #172B4D)"
-    }),
-    new: css({
-      color: "var(--ds-text-inverse, #FFFFFF)"
-    }),
-    removed: css({
-      color: "var(--ds-text-inverse, #FFFFFF)"
-    }),
-    success: css({
-      color: "var(--ds-text-inverse, #FFFFFF)"
-    })
-  },
-  subtle: {
-    default: css({
-      color: "var(--ds-text-subtle, #42526E)"
-    }),
-    inprogress: css({
-      color: "var(--ds-text-information, #0052CC)"
-    }),
-    moved: css({
-      color: "var(--ds-text-warning, #974F0C)"
-    }),
-    new: css({
-      color: "var(--ds-text-discovery, #403294)"
-    }),
-    removed: css({
-      color: "var(--ds-text-danger, #DE350B)"
-    }),
-    success: css({
-      color: "var(--ds-text-success, #006644)"
-    })
-  }
-};

package/dist/types/Lozenge/index.d.ts

@@ -1,46 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type CSSProperties, type ReactNode } from 'react';
-import { jsx } from '@emotion/react';
-export type ThemeAppearance = 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
-export interface LozengeProps {
-    /**
-     * The appearance type.
-     */
-    appearance?: ThemeAppearance;
-    /**
-     * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
-     */
-    children?: ReactNode;
-    /**
-     * Determines whether to apply the bold style or not.
-     */
-    isBold?: boolean;
-    /**
-     * max-width of lozenge container. Default to 200px.
-     */
-    maxWidth?: number | string;
-    /**
-     * Style customization to apply to the badge. Only `backgroundColor` and `color` are supported.
-     */
-    style?: Pick<CSSProperties, 'backgroundColor' | 'color'>;
-    /**
-     * A `testId` prop is provided for specified elements, which is a unique
-     * string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests
-     */
-    testId?: string;
-}
-/**
- * __Lozenge__
- *
- * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
- *
- * - [Examples](https://atlassian.design/components/lozenge/examples)
- * - [Code](https://atlassian.design/components/lozenge/code)
- * - [Usage](https://atlassian.design/components/lozenge/usage)
- */
-declare const Lozenge: import("react").MemoExoticComponent<({ children, testId, isBold, appearance, maxWidth, style, }: LozengeProps) => jsx.JSX.Element>;
-export default Lozenge;

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

@@ -1,46 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type CSSProperties, type ReactNode } from 'react';
-import { jsx } from '@emotion/react';
-export type ThemeAppearance = 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
-export interface LozengeProps {
-    /**
-     * The appearance type.
-     */
-    appearance?: ThemeAppearance;
-    /**
-     * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
-     */
-    children?: ReactNode;
-    /**
-     * Determines whether to apply the bold style or not.
-     */
-    isBold?: boolean;
-    /**
-     * max-width of lozenge container. Default to 200px.
-     */
-    maxWidth?: number | string;
-    /**
-     * Style customization to apply to the badge. Only `backgroundColor` and `color` are supported.
-     */
-    style?: Pick<CSSProperties, 'backgroundColor' | 'color'>;
-    /**
-     * A `testId` prop is provided for specified elements, which is a unique
-     * string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests
-     */
-    testId?: string;
-}
-/**
- * __Lozenge__
- *
- * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
- *
- * - [Examples](https://atlassian.design/components/lozenge/examples)
- * - [Code](https://atlassian.design/components/lozenge/code)
- * - [Usage](https://atlassian.design/components/lozenge/usage)
- */
-declare const Lozenge: import("react").MemoExoticComponent<({ children, testId, isBold, appearance, maxWidth, style, }: LozengeProps) => jsx.JSX.Element>;
-export default Lozenge;