@atlaskit/logo 19.9.1 → 19.9.2

package/dist/es2019/utils/icon-wrapper.js

@@ -0,0 +1,111 @@
+/* icon-wrapper.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./icon-wrapper.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useThemeObserver } from '@atlaskit/tokens';
+const styles = {
+  root: "_1e0c1o8l",
+  TEMP_assets: "_9aea1fkg"
+};
+
+/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
+const cloudLightAppearanceMap = {
+  brand: "_1b3i18uv _9aea18uv",
+  neutral: "_1b3i1e01 _9aea1fkg",
+  inverse: "_1b3i5a6q _9aeau67f",
+  legacy: "_1b3iu67f _9aeadoyu"
+};
+
+/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
+const cloudDarkAppearanceMap = {
+  brand: "_1b3i18uv _9aea18uv",
+  neutral: "_1b3i1gvk _9aea8hz0",
+  inverse: "_1b3iu67f _9aea5a6q",
+  legacy: "_1b3iu67f _9aeadoyu"
+};
+
+/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
+const dataCenterLightAppearanceMap = {
+  brand: "_1b3idoyu _9aeau67f _3wu01fkg",
+  neutral: "_1b3i1e01 _9aea1fkg _3wu01e01",
+  inverse: "_1b3iu67f _9aeaqlpt _3wu0u67f",
+  legacy: "_1b3idoyu _9aeau67f _3wu01fkg"
+};
+
+/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
+const dataCenterDarkAppearanceMap = {
+  brand: "_1b3idoyu _9aeaqlpt _3wu08hz0",
+  neutral: "_1b3i1gvk _9aea8hz0 _3wu01gvk",
+  inverse: "_1b3i1501 _9aeau67f _3wu01501",
+  legacy: "_1b3idoyu _9aeaqlpt _3wu08hz0"
+};
+const rovoDarkAppearanceMap = {
+  brand: "_170318uv _1evo18uv _epb518uv _1osd18uv",
+  neutral: "_17031gvk _1evo1gvk _epb51gvk _1osd1gvk",
+  inverse: "_1703qlpt _1evoqlpt _epb5qlpt _1osdqlpt",
+  legacy: "_1703doyu _1evodoyu _epb5doyu _1osddoyu"
+};
+const rovoLightAppearanceMap = {
+  brand: "_170318uv _1evo18uv _epb518uv _1osd18uv",
+  neutral: "_17031e01 _1evo1e01 _epb51e01 _1osd1e01",
+  inverse: "_1703u67f _1evou67f _epb5u67f _1osdu67f",
+  legacy: "_1703doyu _1evodoyu _epb5doyu _1osddoyu"
+};
+
+/* eslint-enable @atlaskit/ui-styling-standard/no-imported-style-values */
+/* eslint-enable @atlaskit/ui-styling-standard/no-unsafe-values */
+const sizeMap = {
+  xxsmall: "_4t3i7vkz",
+  xsmall: "_4t3igktf",
+  small: "_4t3i1tcg",
+  medium: "_4t3izwfg",
+  large: "_4t3i1ylp",
+  xlarge: "_4t3ickbl",
+  '12': "_4t3i1crf",
+  '16': "_4t3i7vkz",
+  '20': "_4t3igktf",
+  '24': "_4t3i1tcg",
+  '32': "_4t3izwfg"
+};
+export function IconWrapper({
+  size = '20',
+  label,
+  svg,
+  customThemeSvg,
+  testId: userDefinedTestId,
+  appearance = 'brand',
+  iconColor: customIconColor,
+  isAssets = false,
+  type = 'tile'
+}) {
+  const testId = userDefinedTestId && `${userDefinedTestId}--wrapper`;
+  const isCustomThemed = customThemeSvg && customIconColor;
+  const {
+    colorMode
+  } = useThemeObserver();
+  return /*#__PURE__*/React.createElement("span", {
+    "data-testid": testId,
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      '--themed-icon-color': customIconColor || 'initial'
+    }
+    // If the label is provided an empty string, we want to remove the element from the accessibility tree.
+    ,
+    "aria-label": label ? label : undefined,
+    role: label ? 'img' : undefined,
+    "aria-hidden": label === '' ? true : undefined
+    // We are using dangerouslySetInnerHTML here to tell React not to track changes to the SVG elements.
+    // This is because the SVG elements are static and will not change, so we get a little performance benefit by
+    // bypassing React.
+    ,
+    dangerouslySetInnerHTML: {
+      __html: isCustomThemed ? customThemeSvg : svg
+    },
+    className: ax([styles.root, sizeMap[size], colorMode === 'dark' ? dataCenterDarkAppearanceMap[appearance] : dataCenterLightAppearanceMap[appearance], type === 'rovo' ? colorMode === 'dark' ? rovoDarkAppearanceMap[appearance] : rovoLightAppearanceMap[appearance] : colorMode === 'dark' ? cloudDarkAppearanceMap[appearance] : cloudLightAppearanceMap[appearance], isAssets && appearance === 'brand' && fg('assets-platform-branding') && styles.TEMP_assets])
+  });
+}

package/dist/es2019/utils/logo-wrapper.compiled.css

@@ -0,0 +1,63 @@
+._170318uv{--rovo-blue-color:initial}
+._17031e01{--rovo-blue-color:#505258}
+._17031gvk{--rovo-blue-color:#a9abaf}
+._1703doyu{--rovo-blue-color:#1868db}
+._1703lrxy{--rovo-blue-color:#357de8}
+._1703qlpt{--rovo-blue-color:#101214}
+._1703u67f{--rovo-blue-color:#fff}
+._1b3i1501{--icon-color:#1f1f21}
+._1b3i18uv{--icon-color:initial}
+._1b3i1e01{--icon-color:#505258}
+._1b3i1gvk{--icon-color:#a9abaf}
+._1b3i5a6q{--icon-color:#1e1f21}
+._1b3idoyu{--icon-color:#1868db}
+._1b3iu67f{--icon-color:#fff}
+._1e0c1o8l{display:inline-block}
+._1evo18uv{--rovo-yellow-color:initial}
+._1evo1e01{--rovo-yellow-color:#505258}
+._1evo1gvk{--rovo-yellow-color:#a9abaf}
+._1evodoyu{--rovo-yellow-color:#1868db}
+._1evoh727{--rovo-yellow-color:#fca700}
+._1evoqlpt{--rovo-yellow-color:#101214}
+._1evou67f{--rovo-yellow-color:#fff}
+._1osd18uv{--rovo-green-color:initial}
+._1osd1e01{--rovo-green-color:#505258}
+._1osd1gvk{--rovo-green-color:#a9abaf}
+._1osddoyu{--rovo-green-color:#1868db}
+._1osdqlpt{--rovo-green-color:#101214}
+._1osdu67f{--rovo-green-color:#fff}
+._1osdxeun{--rovo-green-color:#82b536}
+._1wyc1e01{--text-color:#505258}
+._1wyc1fxt{--text-color:var(--ds-text,#172b4d)}
+._1wyc1gvk{--text-color:#a9abaf}
+._1wyc5a6q{--text-color:#1e1f21}
+._1wycu67f{--text-color:#fff}
+._3wu01501{--border-color:#1f1f21}
+._3wu01e01{--border-color:#505258}
+._3wu01fkg{--border-color:#dddee1}
+._3wu01gvk{--border-color:#a9abaf}
+._3wu08hz0{--border-color:#4b4d51}
+._3wu0u67f{--border-color:#fff}
+._4t3i1tcg{height:24px}
+._4t3i1ylp{height:40px}
+._4t3i7vkz{height:1pc}
+._4t3ickbl{height:3pc}
+._4t3igktf{height:20px}
+._4t3izwfg{height:2pc}
+._9aea18uv{--tile-color:initial}
+._9aea1fkg{--tile-color:#dddee1}
+._9aea5a6q{--tile-color:#1e1f21}
+._9aea8hz0{--tile-color:#4b4d51}
+._9aeadoyu{--tile-color:#1868db}
+._9aeaqlpt{--tile-color:#101214}
+._9aeau67f{--tile-color:#fff}
+._epb518uv{--rovo-purple-color:initial}
+._epb51e01{--rovo-purple-color:#505258}
+._epb51gvk{--rovo-purple-color:#a9abaf}
+._epb51yy8{--rovo-purple-color:#bf63f3}
+._epb5doyu{--rovo-purple-color:#1868db}
+._epb5qlpt{--rovo-purple-color:#101214}
+._epb5u67f{--rovo-purple-color:#fff}
+._syazqlpt{color:#101214}
+._syazz6c6{color:#e2e3e4}
+._vwz4idpf{line-height:0}

package/dist/es2019/utils/logo-wrapper.js

@@ -0,0 +1,137 @@
+/* logo-wrapper.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
+import "./logo-wrapper.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useThemeObserver } from '@atlaskit/tokens';
+const styles = {
+  root: "_1e0c1o8l _vwz4idpf",
+  TEMP_assets: "_9aea1fkg"
+};
+
+// These styles set the `color` property so that the child SVG can inherit the correct text color using "currentColor"
+const logoTextColorMap = {
+  light: "_syazqlpt",
+  dark: "_syazz6c6"
+};
+const sizeMap = {
+  xxsmall: "_4t3i7vkz",
+  xsmall: "_4t3igktf",
+  small: "_4t3i1tcg",
+  medium: "_4t3izwfg",
+  large: "_4t3i1ylp",
+  xlarge: "_4t3ickbl"
+};
+
+/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
+const textLightAppearanceMap = {
+  brand: "_1wyc1fxt",
+  neutral: "_1wyc1e01",
+  inverse: "_1wycu67f",
+  legacy: "_1wycu67f"
+};
+
+/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
+const textDarkAppearanceMap = {
+  brand: "_1wyc1fxt",
+  neutral: "_1wyc1gvk",
+  inverse: "_1wyc5a6q",
+  legacy: "_1wycu67f"
+};
+
+/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
+const cloudLightAppearanceMap = {
+  brand: "_1b3i18uv _9aea18uv",
+  neutral: "_1b3i1e01 _9aea1fkg",
+  inverse: "_1b3i5a6q _9aeau67f",
+  legacy: "_1b3iu67f _9aeadoyu"
+};
+/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
+const cloudDarkAppearanceMap = {
+  brand: "_1b3i18uv _9aea18uv",
+  neutral: "_1b3i1gvk _9aea8hz0",
+  inverse: "_1b3iu67f _9aea5a6q",
+  legacy: "_1b3iu67f _9aeadoyu"
+};
+
+/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
+const dataCenterLightAppearanceMap = {
+  brand: "_1b3idoyu _9aeau67f _3wu01fkg",
+  neutral: "_1b3i1e01 _9aea1fkg _3wu01e01",
+  inverse: "_1b3iu67f _9aeaqlpt _3wu0u67f",
+  legacy: "_1b3idoyu _9aeau67f _3wu01fkg"
+};
+
+/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
+const dataCenterDarkAppearanceMap = {
+  brand: "_1b3idoyu _9aeaqlpt _3wu08hz0",
+  neutral: "_1b3i1gvk _9aea8hz0 _3wu01gvk",
+  inverse: "_1b3i1501 _9aeau67f _3wu01501",
+  legacy: "_1b3idoyu _9aeaqlpt _3wu08hz0"
+};
+const rovoDarkAppearanceMap = {
+  brand: "_1703lrxy _1evoh727 _epb51yy8 _1osdxeun",
+  neutral: "_17031gvk _1evo1gvk _epb51gvk _1osd1gvk",
+  inverse: "_1703qlpt _1evoqlpt _epb5qlpt _1osdqlpt",
+  legacy: "_1703doyu _1evodoyu _epb5doyu _1osddoyu"
+};
+const rovoLightAppearanceMap = {
+  brand: "_170318uv _1evo18uv _epb518uv _1osd18uv",
+  neutral: "_17031e01 _1evo1e01 _epb51e01 _1osd1e01",
+  inverse: "_1703u67f _1evou67f _epb5u67f _1osdu67f",
+  legacy: "_1703doyu _1evodoyu _epb5doyu _1osddoyu"
+};
+
+/* eslint-enable @atlaskit/ui-styling-standard/no-imported-style-values */
+/* eslint-enable @atlaskit/ui-styling-standard/no-unsafe-values */
+
+export function LogoWrapper({
+  appearance = 'brand',
+  size = 'small',
+  svg,
+  customThemeSvg,
+  label,
+  testId: userDefinedTestId,
+  iconColor: customIconColor,
+  textColor: customTextColor,
+  isAssets = false,
+  type = 'tile'
+}) {
+  const {
+    colorMode
+  } = useThemeObserver();
+  const testId = userDefinedTestId && `${userDefinedTestId}--wrapper`;
+  const isCustomThemed = customThemeSvg && (customIconColor || customTextColor);
+  return /*#__PURE__*/React.createElement("span", {
+    style: {
+      // Nav v3 passes in "inherit" incorrectly for iconColor, so we fall back to textColor when this happens.
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      '--themed-icon-color': customIconColor === 'inherit' ? customTextColor : customIconColor,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      '--themed-text-color': customTextColor || 'inherit'
+    },
+    "data-testid": testId
+    // If the label is provided an empty string, we want to remove the element from the accessibility tree.
+    ,
+    "aria-label": label ? label : undefined,
+    role: label ? 'img' : undefined,
+    "aria-hidden": label === '' ? true : undefined
+    // We are using dangerouslySetInnerHTML here to tell React not to track changes to the SVG elements.
+    // This is because the SVG elements are static and will not change, so we get a little performance benefit by
+    // bypassing React.
+    ,
+    dangerouslySetInnerHTML: {
+      __html: isCustomThemed ? customThemeSvg : svg
+    },
+    className: ax([styles.root,
+    // Setting the color so that the SVG can inherit the correct text color using "currentColor"
+    logoTextColorMap[colorMode !== null && colorMode !== void 0 ? colorMode : 'light'], sizeMap[size], colorMode === 'dark' ? textDarkAppearanceMap[appearance] : textLightAppearanceMap[appearance], colorMode === 'dark' ? dataCenterDarkAppearanceMap[appearance] : dataCenterLightAppearanceMap[appearance], type === 'rovo' ? colorMode === 'dark' ? rovoDarkAppearanceMap[appearance] : rovoLightAppearanceMap[appearance] : colorMode === 'dark' ? cloudDarkAppearanceMap[appearance] : cloudLightAppearanceMap[appearance], isAssets && appearance === 'brand' && fg('assets-platform-branding') && styles.TEMP_assets])
+  });
+}

package/dist/esm/artifacts/logo-components/admin/icon.js

@@ -0,0 +1,34 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::978af025984c14496c17f030fc144641>>
+ * @codegenCommand yarn workspace @atlaskit/logo generate:components
+ */
+import React from 'react';
+import { IconWrapper } from '../../../utils/icon-wrapper';
+// `height` is set to 100% to allow the SVG to scale with the parent element
+var svg = "<svg height=\"100%\" viewBox=\"0 0 24 24\">\n    <path fill=\"var(--tile-color,#dddee1)\" d=\"M0 6a6 6 0 0 1 6-6h12a6 6 0 0 1 6 6v12a6 6 0 0 1-6 6H6a6 6 0 0 1-6-6z\"/>\n    <path fill=\"var(--icon-color, #101214)\" fill-rule=\"evenodd\" d=\"M10.444 5h3.111l.98 2.61 2.75-.457 1.555 2.694L17.07 12l1.77 2.153-1.555 2.694-2.75-.457-.979 2.61h-3.11l-.98-2.61-2.75.457-1.555-2.694L6.931 12 5.16 9.847l1.555-2.694 2.75.457zM12 14.625a2.625 2.625 0 1 0 0-5.25 2.625 2.625 0 0 0 0 5.25\" clip-rule=\"evenodd\"/>\n</svg>\n";
+
+/**
+ * __AdminIcon__
+ *
+ * A temporary component to represent the icon for Admin.
+ * @deprecated This component has been replaced by the component `AdminIcon` in `@atlaskit/logo`.
+ * Please migrate any usages of this temporary component, using the prop `shouldUseNewLogoDesign` where necessary
+ * to enable the new design by default.
+ *
+ */
+export function AdminIcon(_ref) {
+  var size = _ref.size,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'brand' : _ref$appearance,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Admin' : _ref$label,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(IconWrapper, {
+    svg: svg,
+    label: label,
+    appearance: appearance,
+    size: size,
+    testId: testId
+  });
+}

package/dist/esm/artifacts/logo-components/admin/index.js

@@ -0,0 +1,8 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::b8ef81714331e2b6a17e51f13bbda379>>
+ * @codegenCommand yarn workspace @atlaskit/logo generate:components
+ */
+export { AdminLogo } from './logo';
+export { AdminLogoCS } from './logo-cs';
+export { AdminIcon } from './icon';

package/dist/esm/artifacts/logo-components/admin/logo-cs.js

@@ -0,0 +1,32 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::f6b875f42d16c31c8841f1ef82618390>>
+ * @codegenCommand yarn workspace @atlaskit/logo generate:components
+ */
+import React from 'react';
+import { LogoWrapper } from '../../../utils/logo-wrapper';
+// `height` is set to 100% to allow the SVG to scale with the parent element
+// The text color is set to "currentColor" to allow the SVG to inherit the color set by the parent based on the theme.
+var svg = "<svg height=\"100%\" viewBox=\"0 0 126 32\">\n    <path fill=\"var(--text-color, #1e1f21)\" d=\"M124.84 16.35v8.99h-2.64v-9.26c0-2.76-1.1-3.99-3.62-3.99-2.45 0-4.14 1.63-4.14 4.72v8.53h-2.64V10h2.64v2.51c.98-1.81 2.79-2.82 4.85-2.82 3.53 0 5.55 2.42 5.55 6.66m-20.15-10.4c0-1.17.77-1.84 1.84-1.84s1.84.67 1.84 1.84-.77 1.84-1.84 1.84-1.84-.67-1.84-1.84m.49 19.38V10h2.64v15.33zm-14.07-8.52v8.53h-2.64v-9.26c0-2.76-1.1-3.99-3.62-3.99-2.45 0-4.14 1.63-4.14 4.72v8.53h-2.64V10h2.64v2.51c.98-1.81 2.79-2.82 4.85-2.82 2.61 0 4.39 1.32 5.15 3.74.86-2.36 2.91-3.74 5.46-3.74 3.44 0 5.34 2.33 5.34 6.66v8.99h-2.64v-8.52c0-3.16-1.1-4.72-3.62-4.72-2.45 0-4.14 1.63-4.14 4.72m-28.32.85c0 3.68 1.47 5.52 4.2 5.52 2.36 0 4.48-1.5 4.48-4.91v-1.23c0-3.4-1.93-4.91-4.17-4.91-2.97 0-4.51 1.96-4.51 5.52m8.68 7.67v-2.76c-.98 2.02-2.82 3.07-5.18 3.07-4.08 0-6.13-3.46-6.13-7.97 0-4.32 2.15-7.97 6.44-7.97 2.24 0 3.96 1.01 4.88 3.01V3.59h2.64v21.74zm-22.02-4.01c-1.53 0-3.1-.18-4.81-.52l-1.69 4.54h-3.1l7.94-20.15h3.5l7.94 20.15h-3.1l-1.69-4.57c-1.81.37-3.37.55-5 .55m0-2.45c1.29 0 2.61-.15 4.17-.4L49.53 7.43 45.45 18.5c1.5.25 2.76.37 3.99.37\"/>\n    <path fill=\"var(--tile-color,#dddee1)\" d=\"M0 8a8 8 0 0 1 8-8h16a8 8 0 0 1 8 8v16a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8z\"/>\n    <path fill=\"var(--icon-color, #101214)\" fill-rule=\"evenodd\" d=\"M13.826 6.4h4.255l1.338 3.569 3.76-.626 2.128 3.684-2.422 2.945 2.421 2.943L23.18 22.6l-3.76-.626-1.338 3.57h-4.255l-1.338-3.57-3.76.625L6.6 18.915l2.421-2.943L6.6 13.028l2.127-3.685 3.76.626zm2.128 13.16a3.59 3.59 0 1 0 0-7.178 3.59 3.59 0 0 0 0 7.179\" clip-rule=\"evenodd\"/>\n</svg>\n";
+
+/**
+ * __AdminLogoCS__
+ *
+ * A temporary component to represent the logo for Admin.
+ *
+ */
+export function AdminLogoCS(_ref) {
+  var size = _ref.size,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'brand' : _ref$appearance,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Admin' : _ref$label,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(LogoWrapper, {
+    svg: svg,
+    label: label,
+    appearance: appearance,
+    size: size,
+    testId: testId
+  });
+}

package/dist/esm/artifacts/logo-components/admin/logo.js

@@ -0,0 +1,32 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::2828a23fb0bd3ea60b2195a18ef5090d>>
+ * @codegenCommand yarn workspace @atlaskit/logo generate:components
+ */
+import React from 'react';
+import { LogoWrapper } from '../../../utils/logo-wrapper';
+// `height` is set to 100% to allow the SVG to scale with the parent element
+// The text color is set to "currentColor" to allow the SVG to inherit the color set by the parent based on the theme.
+var svg = "<svg height=\"100%\" viewBox=\"0 0 73 24\">\n    <path fill=\"var(--tile-color,#dddee1)\" d=\"M0 6a6 6 0 0 1 6-6h12a6 6 0 0 1 6 6v12a6 6 0 0 1-6 6H6a6 6 0 0 1-6-6z\"/>\n    <path fill=\"var(--icon-color, #101214)\" fill-rule=\"evenodd\" d=\"M10.444 5h3.111l.98 2.61 2.75-.457 1.555 2.694L17.07 12l1.77 2.153-1.555 2.694-2.75-.457-.979 2.61h-3.11l-.98-2.61-2.75.457-1.555-2.694L6.931 12 5.16 9.847l1.555-2.694 2.75.457zM12 14.625a2.625 2.625 0 1 0 0-5.25 2.625 2.625 0 0 0 0 5.25\" clip-rule=\"evenodd\"/>\n    <path fill=\"var(--text-color, #292a2e)\" d=\"M67.12 12.55V17h-1.93V9.36h1.82l.03 1.9h-.13q.31-.97.92-1.48.62-.51 1.57-.51.79 0 1.37.34.6.34.92.98.33.64.33 1.55V17H70.1v-4.54q0-.74-.38-1.16t-1.05-.42q-.45 0-.81.2a1.34 1.34 0 0 0-.55.57q-.2.37-.2.9M61.46 17V9.36h1.93V17zm-.02-8.73V6.52h1.98v1.75zM48.76 17V9.36h1.8l.08 1.87h-.14q.17-.7.51-1.13.35-.44.81-.64.47-.21.97-.21.83 0 1.33.52.51.52.73 1.57h-.22q.16-.71.55-1.18.39-.46.91-.69.53-.23 1.12-.23.69 0 1.24.3.56.3.87.88.32.58.32 1.42V17h-1.92v-4.82q0-.67-.37-1a1.32 1.32 0 0 0-.89-.32q-.4 0-.7.18a1.2 1.2 0 0 0-.46.49q-.16.32-.16.73V17h-1.87v-4.89q0-.57-.35-.91-.34-.34-.89-.34-.37 0-.68.17a1.2 1.2 0 0 0-.49.51q-.18.33-.18.81V17zm-5.99.13a2.9 2.9 0 0 1-1.6-.46q-.71-.46-1.12-1.33-.41-.88-.41-2.15 0-1.29.42-2.17.42-.87 1.14-1.32a2.9 2.9 0 0 1 1.57-.44q.66 0 1.09.23.43.22.69.54.27.32.4.61h.07V6.81h1.92V17h-1.89v-1.22h-.1a2.8 2.8 0 0 1-.4.61q-.27.31-.7.53-.43.21-1.07.21m.56-1.55q.55 0 .94-.3.38-.3.58-.84a3.5 3.5 0 0 0 .21-1.25q0-.72-.2-1.25t-.59-.83q-.38-.29-.94-.29-.57 0-.95.31a1.85 1.85 0 0 0-.58.83 3.6 3.6 0 0 0-.19 1.22q0 .69.19 1.23.2.54.58.85.39.31.95.31m-14 1.43 3.52-10.19h2.54L38.99 17h-2.17l-1.71-5.09a58 58 0 0 1-.58-1.97q-.29-1.09-.63-2.41h.42a546 546 0 0 1-.62 2.43q-.28 1.09-.55 1.96L31.5 17zm2.13-2.44V13h5.4v1.56z\"/>\n</svg>\n";
+
+/**
+ * __AdminLogo__
+ *
+ * A temporary component to represent the logo for Admin.
+ *
+ */
+export function AdminLogo(_ref) {
+  var size = _ref.size,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'brand' : _ref$appearance,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Admin' : _ref$label,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(LogoWrapper, {
+    svg: svg,
+    label: label,
+    appearance: appearance,
+    size: size,
+    testId: testId
+  });
+}

package/dist/esm/artifacts/logo-components/align/icon.js

@@ -0,0 +1,34 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::722075a08a8f598253aef877e81d3776>>
+ * @codegenCommand yarn workspace @atlaskit/logo generate:components
+ */
+import React from 'react';
+import { IconWrapper } from '../../../utils/icon-wrapper';
+// `height` is set to 100% to allow the SVG to scale with the parent element
+var svg = "<svg height=\"100%\" viewBox=\"0 0 24 24\">\n    <path fill=\"var(--tile-color,#fb9700)\" d=\"M0 6a6 6 0 0 1 6-6h12a6 6 0 0 1 6 6v12a6 6 0 0 1-6 6H6a6 6 0 0 1-6-6z\"/>\n    <path fill=\"var(--icon-color, #101214)\" d=\"M18.545 18.545a4.49 4.49 0 0 0-4.48-4.48h-4.13v-3.78h-4.48v7.434c0 .576.25.826.826.826zM5.455 5.455a4.454 4.454 0 0 0 4.455 4.48h4.155v3.78h4.48V6.28q0-.825-.826-.826z\"/>\n</svg>\n";
+
+/**
+ * __AlignIcon__
+ *
+ * A temporary component to represent the icon for Align.
+ * @deprecated This component has been replaced by the component `AlignIcon` in `@atlaskit/logo`.
+ * Please migrate any usages of this temporary component, using the prop `shouldUseNewLogoDesign` where necessary
+ * to enable the new design by default.
+ *
+ */
+export function AlignIcon(_ref) {
+  var size = _ref.size,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'brand' : _ref$appearance,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Align' : _ref$label,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(IconWrapper, {
+    svg: svg,
+    label: label,
+    appearance: appearance,
+    size: size,
+    testId: testId
+  });
+}

package/dist/esm/artifacts/logo-components/align/index.js

@@ -0,0 +1,8 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::bdf9a3c3b08ca612d9f52262cea74fac>>
+ * @codegenCommand yarn workspace @atlaskit/logo generate:components
+ */
+export { AlignLogo } from './logo';
+export { AlignLogoCS } from './logo-cs';
+export { AlignIcon } from './icon';

package/dist/esm/artifacts/logo-components/align/logo-cs.js

@@ -0,0 +1,32 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::3765620b2b4a8b62ff9327c31a8491d2>>
+ * @codegenCommand yarn workspace @atlaskit/logo generate:components
+ */
+import React from 'react';
+import { LogoWrapper } from '../../../utils/logo-wrapper';
+// `height` is set to 100% to allow the SVG to scale with the parent element
+// The text color is set to "currentColor" to allow the SVG to inherit the color set by the parent based on the theme.
+var svg = "<svg height=\"100%\" viewBox=\"0 0 106 32\">\n    <path fill=\"var(--text-color, #1e1f21)\" d=\"M105.76 16.35v8.99h-2.64v-9.26c0-2.76-1.1-3.99-3.62-3.99-2.45 0-4.14 1.63-4.14 4.72v8.53h-2.63V10h2.64v2.52c.98-1.81 2.79-2.82 4.85-2.82 3.53 0 5.55 2.42 5.55 6.66m-19.6 7.75v-1.53c-.98 2.02-2.82 3.07-5.18 3.07-4.05 0-6.07-3.46-6.07-7.97 0-4.32 2.12-7.97 6.38-7.97 2.24 0 3.96 1.01 4.88 3.01V10h2.58v13.95c0 4.51-2.12 7.54-7.61 7.54-2.58 0-3.99-.34-5.46-.83v-2.58c1.69.55 3.43.92 5.34.92 3.83 0 5.15-2.05 5.15-4.91m-8.68-6.44c0 3.68 1.47 5.52 4.2 5.52 2.36 0 4.48-1.5 4.48-4.91v-1.23c0-3.4-1.93-4.91-4.17-4.91-2.97 0-4.51 1.96-4.51 5.52M68.73 5.95c0-1.17.77-1.84 1.84-1.84s1.84.67 1.84 1.84-.77 1.84-1.84 1.84-1.84-.67-1.84-1.84m.49 19.38V10h2.64v15.33zm-2.54-.03c-.21.06-.67.12-1.35.12-2.51 0-4.11-1.19-4.11-4.02V3.59h2.64V21.1c0 1.38.92 1.87 2.06 1.87.28 0 .46 0 .77-.03zM49.6 21.32c-1.53 0-3.1-.18-4.82-.52l-1.69 4.54H40l7.94-20.15h3.5l7.94 20.15h-3.1l-1.69-4.57c-1.81.37-3.37.55-5 .55m0-2.45c1.29 0 2.61-.15 4.17-.4L49.68 7.43 45.6 18.5c1.5.25 2.76.37 3.99.37\"/>\n    <path fill=\"var(--tile-color,#fb9700)\" d=\"M0 8a8 8 0 0 1 8-8h16a8 8 0 0 1 8 8v16a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8z\"/>\n    <path fill=\"var(--icon-color, #101214)\" d=\"M23.735 23.735c0-2.928-2.396-5.295-5.295-5.295h-4.88v-4.466H8.265v8.785c0 .68.296.976.976.976zM8.265 8.265c0 2.928 2.337 5.295 5.265 5.295h4.91v4.466h5.295V9.241q0-.976-.976-.976z\"/>\n</svg>\n";
+
+/**
+ * __AlignLogoCS__
+ *
+ * A temporary component to represent the logo for Align.
+ *
+ */
+export function AlignLogoCS(_ref) {
+  var size = _ref.size,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'brand' : _ref$appearance,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Align' : _ref$label,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(LogoWrapper, {
+    svg: svg,
+    label: label,
+    appearance: appearance,
+    size: size,
+    testId: testId
+  });
+}

package/dist/esm/artifacts/logo-components/align/logo.js

@@ -0,0 +1,32 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::594e5a862d6bc87ae00c57315dfddef4>>
+ * @codegenCommand yarn workspace @atlaskit/logo generate:components
+ */
+import React from 'react';
+import { LogoWrapper } from '../../../utils/logo-wrapper';
+// `height` is set to 100% to allow the SVG to scale with the parent element
+// The text color is set to "currentColor" to allow the SVG to inherit the color set by the parent based on the theme.
+var svg = "<svg height=\"100%\" viewBox=\"0 0 66 24\">\n    <path fill=\"var(--tile-color,#fb9700)\" d=\"M0 6a6 6 0 0 1 6-6h12a6 6 0 0 1 6 6v12a6 6 0 0 1-6 6H6a6 6 0 0 1-6-6z\"/>\n    <path fill=\"var(--icon-color, #101214)\" d=\"M18.545 18.545a4.49 4.49 0 0 0-4.48-4.48h-4.13v-3.78h-4.48v7.434c0 .576.25.826.826.826zM5.455 5.455a4.454 4.454 0 0 0 4.455 4.48h4.155v3.78h4.48V6.28q0-.825-.826-.826z\"/>\n    <path fill=\"var(--text-color, #292a2e)\" d=\"M59.96 12.55V17h-1.93V9.36h1.82l.03 1.9h-.13q.31-.97.92-1.48.62-.51 1.57-.51.79 0 1.37.34.6.34.92.98.33.64.33 1.55V17h-1.92v-4.54q0-.74-.38-1.16t-1.05-.42q-.45 0-.81.2a1.34 1.34 0 0 0-.55.57q-.2.37-.2.9m-7.38 7.47q-.94 0-1.63-.24-.69-.23-1.13-.65a2.3 2.3 0 0 1-.62-.94l1.64-.51q.11.21.32.42.2.21.55.35t.87.14q.81 0 1.28-.38.47-.37.47-1.16v-1.41h-.15q-.14.29-.4.58-.25.29-.68.48-.42.19-1.07.19a3.1 3.1 0 0 1-1.58-.41q-.7-.41-1.13-1.24-.42-.83-.42-2.08 0-1.28.42-2.15t1.14-1.31a2.9 2.9 0 0 1 1.58-.44q.66 0 1.09.23.44.22.7.54.27.32.4.61h.09V9.36h1.89v7.62q0 1.02-.47 1.7-.46.68-1.29 1-.82.33-1.88.33m.04-4.61q.55 0 .94-.27.38-.27.58-.77.21-.5.21-1.21 0-.7-.2-1.22-.2-.53-.58-.81-.38-.29-.94-.29-.57 0-.96.3-.38.3-.58.83a3.5 3.5 0 0 0-.19 1.2q0 .68.2 1.19t.58.79q.39.27.95.27M45.49 17V9.36h1.93V17zm-.02-8.73V6.52h1.98v1.75zm-2.04 8.78q-1.12 0-1.65-.5t-.53-1.49V6.82h1.93v7.96q0 .39.12.57.13.17.45.17.17 0 .26-.01.1-.01.16-.03l.31 1.42q-.16.06-.44.11a3.5 3.5 0 0 1-.61.05M30.34 17l3.52-10.19h2.54L39.99 17h-2.17l-1.71-5.09a58 58 0 0 1-.58-1.97q-.29-1.09-.63-2.41h.42a546 546 0 0 1-.62 2.43q-.28 1.09-.55 1.96L32.49 17zm2.13-2.44V13h5.4v1.56z\"/>\n</svg>\n";
+
+/**
+ * __AlignLogo__
+ *
+ * A temporary component to represent the logo for Align.
+ *
+ */
+export function AlignLogo(_ref) {
+  var size = _ref.size,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'brand' : _ref$appearance,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Align' : _ref$label,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(LogoWrapper, {
+    svg: svg,
+    label: label,
+    appearance: appearance,
+    size: size,
+    testId: testId
+  });
+}

package/dist/esm/artifacts/logo-components/analytics/icon.js

@@ -0,0 +1,34 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::cb69048bab05ca24708a4807daf973fa>>
+ * @codegenCommand yarn workspace @atlaskit/logo generate:components
+ */
+import React from 'react';
+import { IconWrapper } from '../../../utils/icon-wrapper';
+// `height` is set to 100% to allow the SVG to scale with the parent element
+var svg = "<svg height=\"100%\" viewBox=\"0 0 24 24\">\n    <path fill=\"var(--tile-color,#dddee1)\" d=\"M0 6a6 6 0 0 1 6-6h12a6 6 0 0 1 6 6v12a6 6 0 0 1-6 6H6a6 6 0 0 1-6-6z\"/>\n    <path fill=\"var(--icon-color, #101214)\" d=\"M14.63 5.88v9.19h3.06v-9.2zM5.88 18.13h11.81v-1.75H5.87zm0-3.07v-4.81h3.06v4.81zm4.37-6.56v6.56h3.06V8.5z\"/>\n</svg>\n";
+
+/**
+ * __AnalyticsIcon__
+ *
+ * A temporary component to represent the icon for Analytics.
+ * @deprecated This component has been replaced by the component `AnalyticsIcon` in `@atlaskit/logo`.
+ * Please migrate any usages of this temporary component, using the prop `shouldUseNewLogoDesign` where necessary
+ * to enable the new design by default.
+ *
+ */
+export function AnalyticsIcon(_ref) {
+  var size = _ref.size,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'brand' : _ref$appearance,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Analytics' : _ref$label,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(IconWrapper, {
+    svg: svg,
+    label: label,
+    appearance: appearance,
+    size: size,
+    testId: testId
+  });
+}

package/dist/esm/artifacts/logo-components/analytics/index.js

@@ -0,0 +1,8 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::931105c13c713a79bce00ce74b2483f7>>
+ * @codegenCommand yarn workspace @atlaskit/logo generate:components
+ */
+export { AnalyticsLogo } from './logo';
+export { AnalyticsLogoCS } from './logo-cs';
+export { AnalyticsIcon } from './icon';

package/dist/esm/artifacts/logo-components/analytics/logo-cs.js

@@ -0,0 +1,32 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::bacdce044c632033f444ff3fb8aec626>>
+ * @codegenCommand yarn workspace @atlaskit/logo generate:components
+ */
+import React from 'react';
+import { LogoWrapper } from '../../../utils/logo-wrapper';
+// `height` is set to 100% to allow the SVG to scale with the parent element
+// The text color is set to "currentColor" to allow the SVG to inherit the color set by the parent based on the theme.
+var svg = "<svg height=\"100%\" viewBox=\"0 0 161 32\">\n    <path fill=\"var(--text-color, #1e1f21)\" d=\"M160.66 21.16c0 2.55-1.66 4.48-5.76 4.48-2.3 0-4.17-.52-5.34-1.13v-2.79c1.32.77 3.53 1.5 5.46 1.5 2.02 0 3.07-.83 3.07-2.02 0-1.17-.89-1.84-3.8-2.55-3.4-.83-4.85-2.15-4.85-4.66 0-2.67 2.06-4.29 5.55-4.29 1.99 0 3.8.49 4.94 1.1v2.73c-1.84-.92-3.34-1.41-4.97-1.41-1.93 0-2.97.67-2.97 1.87 0 1.07.74 1.75 3.56 2.42 3.4.83 5.12 2.09 5.12 4.75m-13.6 1.41v2.36c-.92.49-2.33.71-3.74.71-5.46 0-8-3.31-8-8 0-4.63 2.55-7.94 8-7.94 1.38 0 2.45.18 3.65.74v2.45c-.98-.46-2.02-.74-3.47-.74-3.99 0-5.61 2.52-5.61 5.49s1.66 5.49 5.67 5.49c1.56 0 2.55-.21 3.5-.55M129.13 5.95c0-1.16.77-1.84 1.84-1.84s1.84.68 1.84 1.84-.77 1.84-1.84 1.84-1.84-.67-1.84-1.84m.49 19.38V10h2.64v15.33zm-7.46-4.75c0 1.35.8 2.27 2.42 2.27.61 0 1.2-.12 1.66-.21v2.55c-.46.12-.98.25-1.78.25-3.28 0-4.88-1.93-4.88-4.78v-8.19h-2.48V10h2.48V6.75h2.58V10h4.08v2.45h-4.08zm-14.12 3.77h-1.72L100.77 10h2.82l4.91 13.13L113.41 10h2.82l-5.8 14.84c-1.72 4.39-2.7 6.66-6.59 6.66-1.32 0-2.05-.12-2.82-.43V28.8c.89.28 1.9.37 2.67.37 2.15 0 3.1-1.47 4.36-4.81m-7.8.94c-.21.06-.67.12-1.35.12-2.51 0-4.11-1.19-4.11-4.02V3.59h2.64V21.1c0 1.38.92 1.87 2.06 1.87.28 0 .46 0 .77-.03zM79.5 17.67c0 3.68 1.47 5.52 4.2 5.52 2.36 0 4.48-1.5 4.48-4.91v-1.23c0-3.4-1.93-4.91-4.17-4.91-2.97 0-4.51 1.96-4.51 5.52m8.68 7.67v-2.76c-.98 2.02-2.82 3.07-5.18 3.07-4.08 0-6.13-3.47-6.13-7.97 0-4.32 2.15-7.97 6.44-7.97 2.24 0 3.96 1.01 4.88 3.01V10h2.64v15.33zM74.1 16.35v8.99h-2.64v-9.26c0-2.76-1.1-3.99-3.62-3.99-2.45 0-4.14 1.63-4.14 4.72v8.53h-2.63V10h2.64v2.51c.98-1.81 2.79-2.82 4.85-2.82 3.53 0 5.55 2.42 5.55 6.66m-24.66 4.97c-1.53 0-3.1-.18-4.81-.52l-1.69 4.54h-3.1l7.94-20.15h3.5l7.94 20.15h-3.1l-1.69-4.57c-1.81.37-3.37.55-5 .55m0-2.45c1.29 0 2.61-.15 4.17-.4L49.53 7.43 45.45 18.5c1.5.25 2.76.37 3.99.37\"/>\n    <path fill=\"var(--tile-color,#dddee1)\" d=\"M0 8a8 8 0 0 1 8-8h16a8 8 0 0 1 8 8v16a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8z\"/>\n    <path fill=\"var(--icon-color, #101214)\" d=\"M19.5 7.83v12.25h4.08V7.83zM7.83 24.17h15.75v-2.33H7.83zm0-4.09v-6.42h4.08v6.42zm5.84-8.75v8.75h4.08v-8.75z\"/>\n</svg>\n";
+
+/**
+ * __AnalyticsLogoCS__
+ *
+ * A temporary component to represent the logo for Analytics.
+ *
+ */
+export function AnalyticsLogoCS(_ref) {
+  var size = _ref.size,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'brand' : _ref$appearance,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? 'Analytics' : _ref$label,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(LogoWrapper, {
+    svg: svg,
+    label: label,
+    appearance: appearance,
+    size: size,
+    testId: testId
+  });
+}