@atlaskit/logo 14.2.1 → 14.3.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/logo
 
+## 14.3.0
+
+### Minor Changes
+
+- [`a51c26afee964`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a51c26afee964) -
+  Adds the loom attribution logo to the logo package.
+
+## 14.2.2
+
+### Patch Changes
+
+- [#134918](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/134918)
+  [`702121b21483a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/702121b21483a) -
+  Remove react-uid
+
 ## 14.2.1
 
 ### Patch Changes

package/dist/cjs/atlassian-analytics-logo/icon.js

@@ -6,20 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AtlassianAnalyticsIcon = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactUid = require("react-uid");
+var _reactUid = require("@atlaskit/ds-lib/react-uid");
 var _tokens = require("@atlaskit/tokens");
 var _constants = require("../constants");
 var _utils = require("../utils");
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 /* eslint-disable max-len */
 
-var svg = function svg(_ref, colorMode) {
+var svg = function svg(_ref, colorMode, id) {
   var appearance = _ref.appearance;
-  // Replace with React 18's useId() hook when we update.
-  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
-  var id = (0, _reactUid.uid)({
-    appearance: appearance
-  });
   var colors = (0, _utils.getColorsFromAppearanceOldLogos)(appearance, colorMode);
   return "<svg height=\"32\" viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n  <defs>\n    <linearGradient id=\"".concat(id, "-a\" x1=\"12.595\" x2=\"12.595\" y1=\"40\" y2=\"30\" gradientUnits=\"userSpaceOnUse\">\n      <stop offset=\"0\" stop-color=\"").concat(colors.iconGradientStart, "\"/>\n      <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\"/>\n    </linearGradient>\n    <linearGradient id=\"").concat(id, "-b\" x1=\"28.595\" x2=\"28.595\" y1=\"40\" y2=\"27\" gradientUnits=\"userSpaceOnUse\">\n      <stop offset=\"0\" stop-color=\"").concat(colors.iconGradientStart, "\"/>\n      <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\"/>\n    </linearGradient>\n    <linearGradient xlink:href=\"#").concat(id, "-b\" id=\"").concat(id, "-c\" x1=\"20.595\" x2=\"20.595\" y2=\"22\"/>\n    <linearGradient xlink:href=\"#").concat(id, "-b\" id=\"").concat(id, "-d\" x1=\"36.595\" x2=\"36.595\" y2=\"20\"/>\n  </defs>\n  <path d=\"M10.595 30h4v10h-4z\" fill=\"url(#").concat(id, "-a)\"/>\n  <path d=\"M26.595 27h4v13h-4z\" fill=\"url(#").concat(id, "-b)\"/>\n  <path d=\"M18.595 22h4v18h-4z\" fill=\"url(#").concat(id, "-c)\"/>\n  <path d=\"M34.595 20h4v20h-4z\" fill=\"url(#").concat(id, "-d)\"/>\n  <path fill=\"").concat(colors.iconColor, "\" d=\"m9.009 25.414-2.828-2.828 10.127-10.128a5 5 0 0 1 6.605-.411l4.471 3.477a1.5 1.5 0 0 0 1.982-.123l9.815-9.815 2.828 2.828-10.127 10.128a5 5 0 0 1-6.605.411l-4.471-3.477a1.5 1.5 0 0 0-1.982.123l-9.815 9.815Z\" />\n</svg>");
 };
@@ -42,12 +37,13 @@ var AtlassianAnalyticsIcon = exports.AtlassianAnalyticsIcon = function Atlassian
     testId = _ref2.testId;
   var _useThemeObserver = (0, _tokens.useThemeObserver)(),
     colorMode = _useThemeObserver.colorMode;
+  var id = (0, _reactUid.useId)();
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
     appearance: appearance,
     label: label,
     svg: svg({
       appearance: appearance
-    }, colorMode),
+    }, colorMode, id),
     size: size,
     testId: testId
   });

package/dist/cjs/atlassian-analytics-logo/logo.js

@@ -6,21 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AtlassianAnalyticsLogo = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactUid = require("react-uid");
+var _reactUid = require("@atlaskit/ds-lib/react-uid");
 var _tokens = require("@atlaskit/tokens");
 var _constants = require("../constants");
 var _utils = require("../utils");
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 /* eslint-disable max-len */
 
-var svg = function svg(_ref, colorMode) {
+var svg = function svg(_ref, colorMode, id) {
   var appearance = _ref.appearance;
-  // Will be fixed upon removal of deprecated iconGradientStart and
-  // iconGradientStop props, or with React 18's useId() hook when we update.
-  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
-  var id = (0, _reactUid.uid)({
-    appearance: appearance
-  });
   var colors = (0, _utils.getColorsFromAppearanceOldLogos)(appearance, colorMode);
   return "\n  <svg height=\"32\" viewBox=\"0 0 477 48\" xmlns=\"http://www.w3.org/2000/svg\">\n  <defs>\n    <linearGradient id=\"".concat(id, "-a\" x1=\"447.285\" x2=\"447.285\" y1=\"40\" y2=\"30\" gradientUnits=\"userSpaceOnUse\">\n      <stop offset=\"0\" stop-color=\"").concat(colors.iconGradientStart, "\"/>\n      <stop offset=\"1\" stop-color=\"").concat(colors.iconGradientStop, "\"/>\n    </linearGradient>\n    <linearGradient xlink:href=\"#").concat(id, "-a\" id=\"").concat(id, "-b\" x1=\"463.285\" x2=\"463.285\" y2=\"27\"/>\n    <linearGradient xlink:href=\"#").concat(id, "-a\" id=\"").concat(id, "-c\" x1=\"455.285\" x2=\"455.285\" y2=\"22\"/>\n    <linearGradient xlink:href=\"#").concat(id, "-a\" id=\"").concat(id, "-d\" x1=\"471.285\" x2=\"471.285\" y2=\"20\"/>\n  </defs>\n  <g fill=\"").concat(colors.atlassianLogoTextColor, "\">\n    <path d=\"M106.72 18.359c0 4.201 1.949 7.536 9.572 9.008 4.548.953 5.5 1.689 5.5 3.205 0 1.473-.953 2.425-4.158 2.425-3.725 0-8.142-1.256-11.044-2.988v6.843c2.295 1.126 5.327 2.382 10.957 2.382 7.969 0 11.131-3.551 11.131-8.835m0 0c0-4.981-2.642-7.319-10.091-8.922-4.114-.91-5.111-1.819-5.111-3.118 0-1.646 1.473-2.339 4.201-2.339 3.292 0 6.54.996 9.615 2.382v-6.54c-2.166-1.083-5.5-1.949-9.398-1.949-7.363 0-11.174 3.205-11.174 8.445M209.1 10.346v28.455h6.063V17.103l2.556 5.76 8.575 15.938h7.623V10.346h-6.064V28.71l-2.295-5.327-6.886-13.037H209.1zM163.909 10.346h6.626v28.455h-6.626zM156.263 30.399c0-4.981-2.642-7.319-10.091-8.922-4.114-.91-5.111-1.819-5.111-3.118 0-1.646 1.473-2.339 4.201-2.339 3.292 0 6.54.996 9.615 2.382v-6.54c-2.166-1.083-5.5-1.949-9.398-1.949-7.363 0-11.174 3.205-11.174 8.445 0 4.201 1.949 7.536 9.572 9.008 4.548.953 5.5 1.689 5.5 3.205 0 1.473-.953 2.425-4.158 2.425-3.725 0-8.142-1.256-11.044-2.988v6.843c2.295 1.126 5.327 2.382 10.957 2.382 7.969 0 11.131-3.551 11.131-8.835M55.243 10.346v28.455h13.62l2.145-6.15h-9.095V10.346h-6.67zM28.334 10.346v6.15h7.363v22.305h6.67V16.496h7.882v-6.15H28.334zM18.663 10.346h-8.74L0 38.801h7.579l1.407-4.792a18.852 18.852 0 0 0 10.612 0l1.407 4.792h7.579l-9.922-28.455Zm-4.37 18.533c-1.267 0-2.49-.185-3.647-.524l3.647-12.422 3.647 12.422c-1.157.339-2.38.524-3.647.524ZM92.344 10.346h-8.74l-9.922 28.455h7.579l1.407-4.792a18.852 18.852 0 0 0 10.612 0l1.407 4.792h7.579l-9.922-28.455Zm-4.37 18.533c-1.267 0-2.49-.185-3.647-.524l3.647-12.422 3.647 12.422c-1.157.339-2.38.524-3.647.524ZM194.414 10.346h-8.74l-9.922 28.455h7.579l1.407-4.792a18.852 18.852 0 0 0 10.612 0l1.407 4.792h7.579l-9.922-28.455Zm-4.37 18.533c-1.267 0-2.49-.185-3.647-.524l3.647-12.422 3.647 12.422c-1.157.339-2.38.524-3.647.524Z\"/>\n  </g>\n  <g fill=\"").concat(colors.textColor, "\">\n    <path d=\"m254.776 31.987-2.53 6.809H247.6l11.916-30.225h5.244l11.916 30.225h-4.646l-2.53-6.855c-2.714.552-5.061.828-7.499.828-2.3 0-4.646-.276-7.223-.782Zm13.479-3.496-6.119-16.562-6.119 16.608c2.254.368 4.141.552 5.98.552 1.933 0 3.911-.23 6.257-.598ZM298.984 38.796h-3.957V24.902c0-4.141-1.656-5.981-5.428-5.981-3.681 0-6.211 2.438-6.211 7.085v12.79h-3.957V15.794h3.957v3.772c1.472-2.715 4.187-4.232 7.269-4.232 5.291 0 8.327 3.634 8.327 9.983v13.479ZM320.097 34.656c-1.472 3.036-4.232 4.6-7.775 4.6-6.119 0-9.201-5.199-9.201-11.961 0-6.486 3.22-11.961 9.661-11.961 3.358 0 5.935 1.518 7.314 4.508v-4.048h3.957v23.002h-3.957v-4.14Zm-6.717.92c3.542 0 6.717-2.254 6.717-7.361v-1.84c0-5.106-2.898-7.361-6.256-7.361-4.463 0-6.763 2.944-6.763 8.281 0 5.521 2.208 8.281 6.303 8.281ZM336.196 38.935c-3.772 0-6.165-1.794-6.165-6.027V6.179h3.957v26.269c0 2.07 1.38 2.806 3.083 2.806.414 0 .69 0 1.15-.046v3.542c-.322.092-1.012.184-2.024.184ZM347.328 37.324l-8.327-21.53h4.232l7.361 19.69 7.361-19.69h4.232l-8.695 22.267c-2.576 6.579-4.048 9.983-9.891 9.983-1.979 0-3.083-.184-4.232-.644v-3.404c1.334.414 2.852.552 4.002.552 3.22 0 4.646-2.208 6.533-7.223h-2.576ZM374.698 35.07c.92 0 1.794-.185 2.484-.322v3.818c-.69.184-1.472.368-2.668.368-4.923 0-7.315-2.898-7.315-7.177V19.473h-3.727v-3.68h3.727v-4.877h3.864v4.877h6.119v3.68h-6.119v12.191c0 2.024 1.196 3.405 3.635 3.405ZM384.265 6.961c1.61 0 2.76 1.012 2.76 2.76s-1.15 2.76-2.76 2.76-2.76-1.012-2.76-2.76 1.15-2.76 2.76-2.76Zm-2.024 8.833h3.957v23.002h-3.957V15.794ZM408.416 38.198c-1.38.736-3.496 1.058-5.612 1.058-8.189 0-12.007-4.968-12.007-12.007 0-6.947 3.818-11.915 12.007-11.915 2.07 0 3.68.276 5.475 1.104v3.681c-1.472-.69-3.037-1.104-5.199-1.104-5.98 0-8.419 3.772-8.419 8.235s2.484 8.235 8.511 8.235c2.346 0 3.818-.322 5.244-.828v3.542ZM420.144 39.256c-3.451 0-6.257-.782-8.005-1.702v-4.187c1.978 1.15 5.291 2.254 8.188 2.254 3.037 0 4.601-1.242 4.601-3.036 0-1.749-1.334-2.761-5.705-3.818-5.106-1.242-7.269-3.221-7.269-6.993 0-4.002 3.082-6.44 8.327-6.44 2.99 0 5.705.736 7.407 1.656v4.094c-2.76-1.38-5.014-2.117-7.453-2.117-2.898 0-4.462 1.013-4.462 2.807 0 1.61 1.104 2.622 5.336 3.635 5.106 1.242 7.683 3.128 7.683 7.13 0 3.819-2.484 6.717-8.649 6.717Z\"/>\n  </g>\n  <path fill=\"url(#").concat(id, "-a)\" d=\"M445.285 30h4v10h-4z\"/>\n  <path fill=\"url(#").concat(id, "-b)\" d=\"M461.285 27h4v13h-4z\"/>\n  <path fill=\"url(#").concat(id, "-c)\" d=\"M453.285 22h4v18h-4z\"/>\n  <path fill=\"url(#").concat(id, "-d)\" d=\"M469.285 20h4v20h-4z\"/>\n  <path fill=\"").concat(colors.iconColor, "\" d=\"m443.699 25.414-2.828-2.828 10.127-10.128a5 5 0 0 1 6.605-.411l4.471 3.477a1.5 1.5 0 0 0 1.982-.123l9.815-9.815 2.828 2.828-10.127 10.128a5 5 0 0 1-6.605.411l-4.471-3.477a1.5 1.5 0 0 0-1.982.123l-9.815 9.815Z\"/>\n</svg>");
 };
@@ -43,13 +37,14 @@ var AtlassianAnalyticsLogo = exports.AtlassianAnalyticsLogo = function Atlassian
     testId = _ref2.testId;
   var _useThemeObserver = (0, _tokens.useThemeObserver)(),
     colorMode = _useThemeObserver.colorMode;
+  var id = (0, _reactUid.useId)();
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
     appearance: appearance,
     label: label,
     size: size,
     svg: svg({
       appearance: appearance
-    }, colorMode),
+    }, colorMode, id),
     testId: testId
   });
 };

package/dist/cjs/atlassian-start-logo/logo.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AtlassianStartLogo = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactUid = require("react-uid");
+var _reactUid = require("@atlaskit/ds-lib/react-uid");
 var _tokens = require("@atlaskit/tokens");
 var _constants = require("../constants");
 var _utils = require("../utils");
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 /* eslint-disable max-len */
 
-var svg = function svg(_ref, colorMode) {
+var svg = function svg(_ref, colorMode, id) {
   var appearance = _ref.appearance,
     iconColor = _ref.iconColor,
     textColor = _ref.textColor;
@@ -25,12 +25,6 @@ var svg = function svg(_ref, colorMode) {
     // We treat the word "Atlassian" differently to normal product logos, it has a bold brand look
     atlassianLogoTextColor: textColor
   };
-  // Will be fixed upon removal of deprecated iconGradientStart and
-  // iconGradientStop props, or with React 18's useId() hook when we update.
-  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
-  var id = (0, _reactUid.uid)({
-    iconGradientStart: colors.iconGradientStop
-  });
   if (appearance) {
     colors = (0, _utils.getColorsFromAppearanceOldLogos)(appearance, colorMode);
   }
@@ -62,6 +56,7 @@ var AtlassianStartLogo = exports.AtlassianStartLogo = function AtlassianStartLog
     textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor;
   var _useThemeObserver = (0, _tokens.useThemeObserver)(),
     colorMode = _useThemeObserver.colorMode;
+  var id = (0, _reactUid.useId)();
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
     appearance: appearance,
     label: label,
@@ -72,7 +67,7 @@ var AtlassianStartLogo = exports.AtlassianStartLogo = function AtlassianStartLog
       label: label,
       iconColor: iconColor,
       textColor: textColor
-    }, colorMode),
+    }, colorMode, id),
     testId: testId,
     textColor: textColor
   });

package/dist/cjs/halp-logo/icon.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.HalpIcon = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactUid = require("react-uid");
+var _reactUid = require("@atlaskit/ds-lib/react-uid");
 var _tokens = require("@atlaskit/tokens");
 var _constants = require("../constants");
 var _utils = require("../utils");
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 /* eslint-disable max-len */
 
-var svg = function svg(_ref, colorMode) {
+var svg = function svg(_ref, colorMode, id) {
   var appearance = _ref.appearance,
     iconColor = _ref.iconColor;
   var colors = {
@@ -21,12 +21,6 @@ var svg = function svg(_ref, colorMode) {
     iconGradientStop: _constants.legacyDefaultLogoParams.iconGradientStart,
     iconColor: iconColor
   };
-  // Will be fixed upon removal of deprecated iconGradientStart and
-  // iconGradientStop props, or with React 18's useId() hook when we update.
-  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
-  var id = (0, _reactUid.uid)({
-    iconGradientStart: colors.iconGradientStop
-  });
   if (appearance) {
     colors = (0, _utils.getColorsFromAppearanceOldLogos)(appearance, colorMode);
   }
@@ -58,13 +52,14 @@ var HalpIcon = exports.HalpIcon = function HalpIcon(_ref2) {
     iconColor = _ref2$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref2$iconColor;
   var _useThemeObserver = (0, _tokens.useThemeObserver)(),
     colorMode = _useThemeObserver.colorMode;
+  var id = (0, _reactUid.useId)();
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
     appearance: appearance,
     label: label,
     svg: svg({
       appearance: appearance,
       iconColor: iconColor
-    }, colorMode),
+    }, colorMode, id),
     iconColor: iconColor,
     size: size,
     testId: testId,

package/dist/cjs/halp-logo/logo.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.HalpLogo = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactUid = require("react-uid");
+var _reactUid = require("@atlaskit/ds-lib/react-uid");
 var _tokens = require("@atlaskit/tokens");
 var _constants = require("../constants");
 var _utils = require("../utils");
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 /* eslint-disable max-len */
 
-var svg = function svg(_ref, colorMode) {
+var svg = function svg(_ref, colorMode, id) {
   var appearance = _ref.appearance,
     iconColor = _ref.iconColor,
     textColor = _ref.textColor;
@@ -23,12 +23,6 @@ var svg = function svg(_ref, colorMode) {
     iconColor: iconColor,
     textColor: textColor
   };
-  // Will be fixed upon removal of deprecated iconGradientStart and
-  // iconGradientStop props, or with React 18's useId() hook when we update.
-  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
-  var id = (0, _reactUid.uid)({
-    iconGradientStart: colors.iconGradientStop
-  });
   if (appearance) {
     colors = (0, _utils.getColorsFromAppearanceOldLogos)(appearance, colorMode);
   }
@@ -60,6 +54,7 @@ var HalpLogo = exports.HalpLogo = function HalpLogo(_ref2) {
     textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor;
   var _useThemeObserver = (0, _tokens.useThemeObserver)(),
     colorMode = _useThemeObserver.colorMode;
+  var id = (0, _reactUid.useId)();
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
     appearance: appearance,
     label: label,
@@ -69,7 +64,7 @@ var HalpLogo = exports.HalpLogo = function HalpLogo(_ref2) {
       appearance: appearance,
       iconColor: iconColor,
       textColor: textColor
-    }, colorMode),
+    }, colorMode, id),
     testId: testId,
     textColor: textColor
   });

package/dist/cjs/index.js

@@ -225,6 +225,18 @@ Object.defineProperty(exports, "JiraWorkManagementLogo", {
     return _jiraWorkManagementLogo.JiraWorkManagementLogo;
   }
 });
+Object.defineProperty(exports, "LoomAttributionIcon", {
+  enumerable: true,
+  get: function get() {
+    return _loomAttributionLogo.LoomAttributionIcon;
+  }
+});
+Object.defineProperty(exports, "LoomAttributionLogo", {
+  enumerable: true,
+  get: function get() {
+    return _loomAttributionLogo.LoomAttributionLogo;
+  }
+});
 Object.defineProperty(exports, "LoomIcon", {
   enumerable: true,
   get: function get() {
@@ -298,6 +310,7 @@ var _jiraProductDiscoveryLogo = require("./jira-product-discovery-logo");
 var _jiraServiceManagementLogo = require("./jira-service-management-logo");
 var _jiraSoftwareLogo = require("./jira-software-logo");
 var _jiraWorkManagementLogo = require("./jira-work-management-logo");
+var _loomAttributionLogo = require("./loom-attribution-logo");
 var _loomLogo = require("./loom-logo");
 var _opsgenieLogo = require("./opsgenie-logo");
 var _statuspageLogo = require("./statuspage-logo");

package/dist/cjs/jira-software-logo/icon.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.JiraSoftwareIcon = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactUid = require("react-uid");
+var _reactUid = require("@atlaskit/ds-lib/react-uid");
 var _tokens = require("@atlaskit/tokens");
 var _constants = require("../constants");
 var _utils = require("../utils");
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 /* eslint-disable max-len */
 
-var svg = function svg(_ref, colorMode) {
+var svg = function svg(_ref, colorMode, id) {
   var appearance = _ref.appearance,
     iconColor = _ref.iconColor;
   var colors = {
@@ -21,12 +21,6 @@ var svg = function svg(_ref, colorMode) {
     iconGradientStop: _constants.legacyDefaultLogoParams.iconGradientStart,
     iconColor: iconColor
   };
-  // Will be fixed upon removal of deprecated iconGradientStart and
-  // iconGradientStop props, or with React 18's useId() hook when we update.
-  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
-  var id = (0, _reactUid.uid)({
-    iconGradientStart: colors.iconGradientStop
-  });
   if (appearance) {
     colors = (0, _utils.getColorsFromAppearanceOldLogos)(appearance, colorMode);
   }
@@ -58,13 +52,14 @@ var JiraSoftwareIcon = exports.JiraSoftwareIcon = function JiraSoftwareIcon(_ref
     textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor;
   var _useThemeObserver = (0, _tokens.useThemeObserver)(),
     colorMode = _useThemeObserver.colorMode;
+  var id = (0, _reactUid.useId)();
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
     appearance: appearance,
     label: label,
     svg: svg({
       appearance: appearance,
       iconColor: iconColor
-    }, colorMode),
+    }, colorMode, id),
     iconColor: iconColor,
     size: size,
     testId: testId,

package/dist/cjs/jira-software-logo/logo.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.JiraSoftwareLogo = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactUid = require("react-uid");
+var _reactUid = require("@atlaskit/ds-lib/react-uid");
 var _tokens = require("@atlaskit/tokens");
 var _constants = require("../constants");
 var _utils = require("../utils");
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 /* eslint-disable max-len */
 
-var svg = function svg(_ref, colorMode) {
+var svg = function svg(_ref, colorMode, id) {
   var appearance = _ref.appearance,
     iconColor = _ref.iconColor,
     textColor = _ref.textColor;
@@ -23,12 +23,6 @@ var svg = function svg(_ref, colorMode) {
     iconColor: iconColor,
     textColor: textColor
   };
-  // Will be fixed upon removal of deprecated iconGradientStart and
-  // iconGradientStop props, or with React 18's useId() hook when we update.
-  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
-  var id = (0, _reactUid.uid)({
-    iconGradientStart: colors.iconGradientStop
-  });
   if (appearance) {
     colors = (0, _utils.getColorsFromAppearanceOldLogos)(appearance, colorMode);
   }
@@ -60,6 +54,7 @@ var JiraSoftwareLogo = exports.JiraSoftwareLogo = function JiraSoftwareLogo(_ref
     textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor;
   var _useThemeObserver = (0, _tokens.useThemeObserver)(),
     colorMode = _useThemeObserver.colorMode;
+  var id = (0, _reactUid.useId)();
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
     appearance: appearance,
     label: label,
@@ -69,7 +64,7 @@ var JiraSoftwareLogo = exports.JiraSoftwareLogo = function JiraSoftwareLogo(_ref
       appearance: appearance,
       iconColor: iconColor,
       textColor: textColor
-    }, colorMode),
+    }, colorMode, id),
     testId: testId,
     textColor: textColor
   });

package/dist/cjs/jira-work-management-logo/icon.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.JiraWorkManagementIcon = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactUid = require("react-uid");
+var _reactUid = require("@atlaskit/ds-lib/react-uid");
 var _tokens = require("@atlaskit/tokens");
 var _constants = require("../constants");
 var _utils = require("../utils");
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 /* eslint-disable max-len */
 
-var svg = function svg(_ref, colorMode) {
+var svg = function svg(_ref, colorMode, id) {
   var appearance = _ref.appearance,
     iconColor = _ref.iconColor;
   var colors = {
@@ -21,12 +21,6 @@ var svg = function svg(_ref, colorMode) {
     iconGradientStop: _constants.legacyDefaultLogoParams.iconGradientStart,
     iconColor: iconColor
   };
-  // Will be fixed upon removal of deprecated iconGradientStart and
-  // iconGradientStop props, or with React 18's useId() hook when we update.
-  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
-  var id = (0, _reactUid.uid)({
-    iconGradientStart: colors.iconGradientStop
-  });
   if (appearance) {
     colors = (0, _utils.getColorsFromAppearanceOldLogos)(appearance, colorMode);
   }
@@ -58,13 +52,14 @@ var JiraWorkManagementIcon = exports.JiraWorkManagementIcon = function JiraWorkM
     textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor;
   var _useThemeObserver = (0, _tokens.useThemeObserver)(),
     colorMode = _useThemeObserver.colorMode;
+  var id = (0, _reactUid.useId)();
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
     appearance: appearance,
     label: label,
     svg: svg({
       appearance: appearance,
       iconColor: iconColor
-    }, colorMode),
+    }, colorMode, id),
     iconColor: iconColor,
     size: size,
     testId: testId,

package/dist/cjs/jira-work-management-logo/logo.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.JiraWorkManagementLogo = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactUid = require("react-uid");
+var _reactUid = require("@atlaskit/ds-lib/react-uid");
 var _tokens = require("@atlaskit/tokens");
 var _constants = require("../constants");
 var _utils = require("../utils");
 var _wrapper = _interopRequireDefault(require("../wrapper"));
 /* eslint-disable max-len */
 
-var svg = function svg(_ref, colorMode) {
+var svg = function svg(_ref, colorMode, id) {
   var appearance = _ref.appearance,
     iconColor = _ref.iconColor,
     textColor = _ref.textColor;
@@ -23,12 +23,6 @@ var svg = function svg(_ref, colorMode) {
     iconColor: iconColor,
     textColor: textColor
   };
-  // Will be fixed upon removal of deprecated iconGradientStart and
-  // iconGradientStop props, or with React 18's useId() hook when we update.
-  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
-  var id = (0, _reactUid.uid)({
-    iconGradientStart: colors.iconGradientStop
-  });
   if (appearance) {
     colors = (0, _utils.getColorsFromAppearanceOldLogos)(appearance, colorMode);
   }
@@ -60,6 +54,7 @@ var JiraWorkManagementLogo = exports.JiraWorkManagementLogo = function JiraWorkM
     textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor;
   var _useThemeObserver = (0, _tokens.useThemeObserver)(),
     colorMode = _useThemeObserver.colorMode;
+  var id = (0, _reactUid.useId)();
   return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
     appearance: appearance,
     label: label,
@@ -70,7 +65,7 @@ var JiraWorkManagementLogo = exports.JiraWorkManagementLogo = function JiraWorkM
       size: size,
       iconColor: iconColor,
       textColor: textColor
-    }, colorMode),
+    }, colorMode, id),
     testId: testId,
     textColor: textColor
   });

package/dist/cjs/loom-attribution-logo/icon.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LoomAttributionIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _constants = require("../constants");
+var _loomLogo = require("../loom-logo");
+/* eslint-disable max-len */
+
+/**
+ * __Loom Attribution icon__
+ *
+ * The Loom attribution icon without an accompanying wordmark.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+var LoomAttributionIcon = exports.LoomAttributionIcon = function LoomAttributionIcon(_ref) {
+  var appearance = _ref.appearance,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Loom Attribution' : _ref$label,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? _constants.defaultLogoParams.size : _ref$size,
+    testId = _ref.testId,
+    _ref$iconColor = _ref.iconColor,
+    iconColor = _ref$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref$iconColor,
+    _ref$textColor = _ref.textColor,
+    textColor = _ref$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref$textColor;
+  return /*#__PURE__*/_react.default.createElement(_loomLogo.LoomIcon, {
+    appearance: appearance,
+    label: label,
+    size: size,
+    testId: testId,
+    iconColor: iconColor,
+    textColor: textColor
+  });
+};

package/dist/cjs/loom-attribution-logo/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "LoomAttributionIcon", {
+  enumerable: true,
+  get: function get() {
+    return _icon.LoomAttributionIcon;
+  }
+});
+Object.defineProperty(exports, "LoomAttributionLogo", {
+  enumerable: true,
+  get: function get() {
+    return _logo.LoomAttributionLogo;
+  }
+});
+var _icon = require("./icon");
+var _logo = require("./logo");

package/dist/cjs/loom-attribution-logo/logo.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LoomAttributionLogo = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _tokens = require("@atlaskit/tokens");
+var _constants = require("../constants");
+var _utils = require("../utils");
+var _wrapper = _interopRequireDefault(require("../wrapper"));
+/* eslint-disable max-len */
+
+var svg = function svg(_ref, colorMode) {
+  var appearance = _ref.appearance,
+    iconColor = _ref.iconColor,
+    textColor = _ref.textColor;
+  var colors = {
+    iconColor: iconColor,
+    textColor: textColor
+  };
+  if (appearance) {
+    colors = (0, _utils.getColorsForLoom)(appearance, colorMode);
+  }
+  return "<svg\n\t\tfill=\"none\"\n\t\theight=\"32\"\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\tfocusable=\"false\"\n\t\taria-hidden=\"true\"\n\t\tviewBox=\"0 0 88 32\"\n\t>\n\t\t<path\n\t\t\td=\"M29.488 12.765h-8.983l7.78-4.344-1.544-2.585-7.78 4.344 4.492-7.523-2.674-1.493-4.491 7.522V0H13.2v8.687L8.71 1.164 6.035 2.657l4.49 7.522-7.778-4.343L1.204 8.42l7.779 4.344H0v2.986h8.982l-7.778 4.343 1.543 2.585 7.78-4.342-4.492 7.522 2.674 1.493L13.2 19.83v8.687h3.087v-8.873l4.574 7.663 2.507-1.4-4.575-7.663 7.946 4.437 1.544-2.586-7.779-4.343h8.982v-2.986h.001Zm-14.744 5.552c-2.318 0-4.197-1.817-4.197-4.059s1.88-4.059 4.197-4.059 4.198 1.817 4.198 4.06c0 2.24-1.88 4.058-4.198 4.058\"\n\t\t\tfill=\"".concat(colors.iconColor, "\"\n\t\t/>\n\t\t<path\n\t\t\td=\"M38.379 26.847V10.094h3.18v16.753zm30.503-11.79h3.036v1.438c.646-1.15 2.153-1.773 3.444-1.773 1.602 0 2.893.695 3.49 1.964.932-1.438 2.177-1.964 3.731-1.964 2.175 0 4.256 1.318 4.256 4.48v7.642h-3.084V19.85c0-1.27-.623-2.228-2.081-2.228-1.363 0-2.177 1.054-2.177 2.324v6.9h-3.155V19.85c0-1.27-.646-2.228-2.081-2.228-1.387 0-2.2 1.03-2.2 2.324v6.9h-3.18V15.057Zm-20.134 12.13c-3.582 0-6.176-2.66-6.176-6.234 0-3.517 2.585-6.242 6.176-6.242 3.609 0 6.177 2.75 6.177 6.242 0 3.547-2.596 6.234-6.177 6.234m0-9.59a3.357 3.357 0 0 0 0 6.713 3.357 3.357 0 0 0 0-6.713m12.966 9.59c-3.583 0-6.177-2.66-6.177-6.234 0-3.517 2.586-6.242 6.177-6.242 3.608 0 6.176 2.75 6.176 6.242 0 3.547-2.597 6.234-6.176 6.234m0-9.63a3.397 3.397 0 0 0-3.39 3.395 3.397 3.397 0 0 0 3.39 3.395 3.396 3.396 0 0 0 0-6.79M64.933 5.63c0-1.102-.697-1.522-1.983-1.837-.803-.21-1.018-.368-1.018-.63q0-.473.804-.473c.643 0 1.286.21 1.93.473V1.798a4.5 4.5 0 0 0-1.876-.42c-1.447 0-2.25.682-2.25 1.785 0 1.05.696 1.575 1.928 1.838.804.157 1.072.315 1.072.682 0 .263-.215.473-.804.473a4.46 4.46 0 0 1-2.197-.63v1.417c.483.263 1.233.473 2.197.473 1.5.052 2.197-.683 2.197-1.785Zm16.662-4.067v5.988h1.3V3.007l.542 1.23 1.841 3.368h1.626V1.563h-1.3v3.85l-.488-1.123-1.463-2.727zm-8.056 0h-1.465v6.042h1.465zm-23.981 0v6.042h2.863l.432-1.295h-1.945V1.563zm-5.671 0v1.295h1.604v4.747h1.44V2.858h1.715V1.563zm-2.177 0h-1.802l-2.066 6.042h1.59l.317-1.025a4 4 0 0 0 1.113.162q.556 0 1.113-.162l.318 1.025h1.59zm-.9 3.938a3 3 0 0 1-.743-.108l.742-2.643.742 2.643c-.265.054-.477.108-.742.108Zm16.577-3.938H55.53L53.4 7.605h1.638l.328-1.025q.573.162 1.146.162.574 0 1.147-.162l.328 1.025h1.638l-2.24-6.042Zm-.928 3.938c-.273 0-.546-.054-.765-.108l.765-2.643.764 2.643a3.3 3.3 0 0 1-.764.108m21.98-3.938h-1.857l-2.13 6.042h1.638l.328-1.025q.574.162 1.147.162c.573 0 .764-.054 1.146-.162l.328 1.025h1.638zm-.93 3.938c-.272 0-.545-.054-.763-.108l.764-2.643.765 2.643a3.3 3.3 0 0 1-.765.108Zm-6.894.129c0-1.102-.697-1.522-1.983-1.837-.803-.21-1.018-.368-1.018-.63q0-.473.804-.473c.643 0 1.286.21 1.93.473V1.798a4.5 4.5 0 0 0-1.876-.42c-1.447 0-2.25.682-2.25 1.785 0 1.05.696 1.575 1.928 1.838.804.157 1.072.315 1.072.682 0 .263-.215.473-.804.473-.75 0-1.608-.263-2.197-.63v1.417c.482.263 1.233.473 2.197.473 1.447.052 2.197-.683 2.197-1.785Z\"\n\t\t\tfill=\"").concat(colors.textColor, "\"\n\t\t/>\n\t</svg>");
+};
+
+/**
+ * __Loom Attribution logo__
+ *
+ * The Loom logo with both the wordmark and the icon combined.
+ *
+ * - [Examples](https://atlassian.design/components/logo/examples)
+ * - [Code](https://atlassian.design/components/logo/code)
+ * - [Usage](https://atlassian.design/components/logo/usage)
+ */
+var LoomAttributionLogo = exports.LoomAttributionLogo = function LoomAttributionLogo(_ref2) {
+  var appearance = _ref2.appearance,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? 'Loom Attribution' : _ref2$label,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? _constants.defaultLogoParams.size : _ref2$size,
+    testId = _ref2.testId,
+    _ref2$iconColor = _ref2.iconColor,
+    iconColor = _ref2$iconColor === void 0 ? _constants.defaultLogoParams.iconColor : _ref2$iconColor,
+    _ref2$textColor = _ref2.textColor,
+    textColor = _ref2$textColor === void 0 ? _constants.defaultLogoParams.textColor : _ref2$textColor;
+  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
+    colorMode = _useThemeObserver.colorMode;
+  return /*#__PURE__*/_react.default.createElement(_wrapper.default, {
+    appearance: appearance,
+    label: label,
+    iconColor: iconColor,
+    size: size,
+    svg: svg({
+      appearance: appearance,
+      iconColor: iconColor,
+      textColor: textColor
+    }, colorMode),
+    testId: testId,
+    textColor: textColor
+  });
+};

package/dist/es2019/atlassian-analytics-logo/icon.js

@@ -1,18 +1,13 @@
 /* eslint-disable max-len */
 import React from 'react';
-import { uid } from 'react-uid';
+import { useId } from '@atlaskit/ds-lib/react-uid';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { defaultLogoParams } from '../constants';
 import { getColorsFromAppearanceOldLogos } from '../utils';
 import Wrapper from '../wrapper';
 const svg = ({
   appearance
-}, colorMode) => {
-  // Replace with React 18's useId() hook when we update.
-  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
-  const id = uid({
-    appearance
-  });
+}, colorMode, id) => {
   const colors = getColorsFromAppearanceOldLogos(appearance, colorMode);
   return `<svg height="32" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
   <defs>
@@ -53,12 +48,13 @@ export const AtlassianAnalyticsIcon = ({
   const {
     colorMode
   } = useThemeObserver();
+  const id = useId();
   return /*#__PURE__*/React.createElement(Wrapper, {
     appearance: appearance,
     label: label,
     svg: svg({
       appearance
-    }, colorMode),
+    }, colorMode, id),
     size: size,
     testId: testId
   });