cozy-ui 136.3.0 → 137.0.1

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [137.0.1](https://github.com/cozy/cozy-ui/compare/v137.0.0...v137.0.1) (2026-03-20)
+
+
+### Bug Fixes
+
+* Adjust assistant color icon :bug: ([525911b](https://github.com/cozy/cozy-ui/commit/525911b))
+
+# [137.0.0](https://github.com/cozy/cozy-ui/compare/v136.3.0...v137.0.0) (2026-03-19)
+
+
+### Features
+
+* Pass appIcon and appTextIcon instead of slug to AppTitle ([8b5c6cf](https://github.com/cozy/cozy-ui/commit/8b5c6cf))
+* Remove app text icons ([abea61b](https://github.com/cozy/cozy-ui/commit/abea61b))
+
+
+### BREAKING CHANGES
+
+* All app text icons have been changed. If you imported them, copy the code from cozy-ui to your app.
+* Replace <AppTitle slug="drive" /> by <AppTitle appIcon={DriveIcon} appTextIcon={DriveTextIcon} />. tag and children prop are also removed but were unused.
+
 # [136.3.0](https://github.com/cozy/cozy-ui/compare/v136.2.2...v136.3.0) (2026-03-18)
 
 

package/assets/icons/illus/assistant-color.svg

@@ -1 +1 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_19251_33606)"><path d="M6.626 10.332a1.333 1.333 0 0 0-.958-.958L1.578 8.32a.333.333 0 0 1 0-.642l4.09-1.055a1.333 1.333 0 0 0 .958-.957l1.055-4.09a.333.333 0 0 1 .642 0l1.054 4.09a1.333 1.333 0 0 0 .958.958l4.09 1.054a.333.333 0 0 1 0 .642l-4.09 1.054a1.333 1.333 0 0 0-.958.958l-1.055 4.09a.333.333 0 0 1-.642 0l-1.054-4.09Z" stroke="#868687" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"/><path d="M6.626 10.332a1.333 1.333 0 0 0-.958-.958L1.578 8.32a.333.333 0 0 1 0-.642l4.09-1.055a1.333 1.333 0 0 0 .958-.957l1.055-4.09a.333.333 0 0 1 .642 0l1.054 4.09a1.333 1.333 0 0 0 .958.958l4.09 1.054a.333.333 0 0 1 0 .642l-4.09 1.054a1.333 1.333 0 0 0-.958.958l-1.055 4.09a.333.333 0 0 1-.642 0l-1.054-4.09Z" stroke="url(#paint0_linear_19251_33606)" stroke-opacity=".9" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.335 1.334c.368 0 .667.3.667.667v.666h.668a.667.667 0 0 1 0 1.334h-.668v.667a.667.667 0 0 1-1.334 0v-.667h-.665a.667.667 0 0 1 0-1.334h.665v-.666c0-.368.299-.667.667-.667Z" fill="url(#paint1_linear_19251_33606)" fill-opacity=".9"/><path d="M2.667 10.667c.368 0 .665.298.666.665a.667.667 0 0 1 .001 1.333v.002a.667.667 0 0 1-1.334 0v-.001h-.001a.667.667 0 0 1 0-1.334H2a.667.667 0 0 1 .667-.665Z" fill="url(#paint2_linear_19251_33606)" fill-opacity=".9"/></g><defs><linearGradient id="paint0_linear_19251_33606" x1="1.336" y1="7.999" x2="19.625" y2="7.999" gradientUnits="userSpaceOnUse"><stop stop-color="#00B7FF"/><stop offset=".567" stop-color="#E06DD1"/><stop offset="1" stop-color="#FF0"/></linearGradient><linearGradient id="paint1_linear_19251_33606" x1="11.336" y1="3.334" x2="16.822" y2="3.334" gradientUnits="userSpaceOnUse"><stop stop-color="#00B7FF"/><stop offset=".567" stop-color="#E06DD1"/><stop offset="1" stop-color="#FF0"/></linearGradient><linearGradient id="paint2_linear_19251_33606" x1="1.332" y1="12.001" x2="4.99" y2="12.001" gradientUnits="userSpaceOnUse"><stop stop-color="#00B7FF"/><stop offset=".567" stop-color="#E06DD1"/><stop offset="1" stop-color="#FF0"/></linearGradient><clipPath id="clip0_19251_33606"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_25355_124591)"><path d="M6.626 10.332a1.333 1.333 0 0 0-.958-.958L1.578 8.32a.333.333 0 0 1 0-.642l4.09-1.055a1.333 1.333 0 0 0 .958-.957l1.055-4.09a.333.333 0 0 1 .642 0l1.054 4.09a1.333 1.333 0 0 0 .958.958l4.09 1.054a.333.333 0 0 1 0 .642l-4.09 1.054a1.333 1.333 0 0 0-.958.958l-1.055 4.09a.333.333 0 0 1-.642 0l-1.054-4.09Z" stroke="url(#paint0_linear_25355_124591)" stroke-opacity=".9" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.335 1.336c.368 0 .667.299.667.667v.665h.668a.667.667 0 0 1 0 1.334h-.668v.668a.667.667 0 0 1-1.334 0v-.668h-.665a.667.667 0 0 1 0-1.334h.665v-.665c0-.368.299-.667.667-.667Z" fill="url(#paint1_linear_25355_124591)" fill-opacity=".9"/><path d="M2.667 10.668c.367 0 .664.297.666.664a.667.667 0 0 1 .001 1.333v.003a.667.667 0 0 1-1.334 0v-.002h-.001a.667.667 0 0 1 0-1.334H2a.667.667 0 0 1 .667-.664Z" fill="url(#paint2_linear_25355_124591)" fill-opacity=".9"/></g><defs><linearGradient id="paint0_linear_25355_124591" x1="1.336" y1="7.999" x2="19.625" y2="7.999" gradientUnits="userSpaceOnUse"><stop stop-color="#00B7FF"/><stop offset=".567" stop-color="#E06DD1"/><stop offset="1" stop-color="#FF0"/></linearGradient><linearGradient id="paint1_linear_25355_124591" x1="11.336" y1="3.336" x2="16.822" y2="3.336" gradientUnits="userSpaceOnUse"><stop stop-color="#00B7FF"/><stop offset=".567" stop-color="#E06DD1"/><stop offset="1" stop-color="#FF0"/></linearGradient><linearGradient id="paint2_linear_25355_124591" x1="1.332" y1="12.002" x2="4.99" y2="12.002" gradientUnits="userSpaceOnUse"><stop stop-color="#00B7FF"/><stop offset=".567" stop-color="#E06DD1"/><stop offset="1" stop-color="#FF0"/></linearGradient><clipPath id="clip0_25355_124591"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "136.3.0",
+  "version": "137.0.1",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/AppTitle/Readme.md

@@ -1,21 +1,15 @@
-Display the app title of an app with icon, brand name and app name. Support Twake theme only.
-
-You can pass a child that will be used as default value is app is not supported.
+Display the app title of an app with app icon, brand icon and app text icon.
 
 ### Default
 
 ```jsx
 import AppTitle from 'cozy-ui/transpiled/react/AppTitle';
+import DriveIcon from 'cozy-ui/transpiled/react/Icons/Drive';
 
-const slugs = ["calendar", "chat", "contacts", "drive", "mail", "notes", "pass", "store", "photos", "home"];
+// This should be an a nice icon with "Drive" written with Twake font and gradient
+const DriveTextMock = () => <div>Drive</div>;
 
-<div class="u-flex u-flex-column">
-  {
-    slugs.map(slug => <AppTitle slug={slug} />)
-  }
-  <AppTitle slug="coachco2" />
-  <AppTitle slug="coachco2">CoachCO2</AppTitle>
-  <AppTitle>Drive</AppTitle>
+<div className="u-flex u-flex-column">
+  <AppTitle appIcon={DriveIcon} appTextIcon={DriveTextMock} />
 </div>
-
 ```

package/react/AppTitle/index.jsx

@@ -4,99 +4,20 @@ import React from 'react'
 
 import styles from './styles.styl'
 import Icon from '../Icon'
-import AITextIcon from '../Icons/AiText'
-import CalendarAppIcon from '../Icons/CalendarApp'
-import CalendarTextIcon from '../Icons/CalendarText'
-import ChatIcon from '../Icons/Chat'
-import ChatTextIcon from '../Icons/ChatText'
-import ContactsIcon from '../Icons/Contacts'
-import ContactsTextIcon from '../Icons/ContactsText'
-import DriveIcon from '../Icons/Drive'
-import DriveTextIcon from '../Icons/DriveText'
-import MailIcon from '../Icons/Mail'
-import MailTextIcon from '../Icons/MailText'
-import NotesIcon from '../Icons/Notes'
-import NotesTextIcon from '../Icons/NotesText'
-import PassIcon from '../Icons/Pass'
-import PassTextIcon from '../Icons/PassText'
-import PhotosIcon from '../Icons/Photos'
-import PhotosTextIcon from '../Icons/PhotosText'
-import StoreIcon from '../Icons/Store'
-import StoreTextIcon from '../Icons/StoreText'
 import TwakeTextIcon from '../Icons/TwakeText'
-import TwakeWorkplaceIcon from '../Icons/TwakeWorkplace'
-import WorkplaceTextIcon from '../Icons/WorkplaceText'
-import Typography from '../Typography'
 import { useCozyTheme } from '../providers/CozyTheme'
 
-const SLUG_TO_ICONS = {
-  calendar: {
-    icon: CalendarAppIcon,
-    text: CalendarTextIcon
-  },
-  chat: {
-    icon: ChatIcon,
-    text: ChatTextIcon
-  },
-  contacts: {
-    icon: ContactsIcon,
-    text: ContactsTextIcon
-  },
-  drive: {
-    icon: DriveIcon,
-    text: DriveTextIcon
-  },
-  mail: {
-    icon: MailIcon,
-    text: MailTextIcon
-  },
-  notes: {
-    icon: NotesIcon,
-    text: NotesTextIcon
-  },
-  passwords: {
-    icon: PassIcon,
-    text: PassTextIcon
-  },
-  store: {
-    icon: StoreIcon,
-    text: StoreTextIcon
-  },
-  photos: {
-    icon: PhotosIcon,
-    text: PhotosTextIcon
-  },
-  home: {
-    icon: TwakeWorkplaceIcon,
-    text: WorkplaceTextIcon
-  },
-  assistant: {
-    icon: null,
-    text: AITextIcon
-  }
-}
-
-const AppTitle = ({ slug, tag, className, children, ...otherProps }) => {
+const AppTitle = ({ appIcon, appTextIcon }) => {
   const { isLight } = useCozyTheme()
 
-  const titleData = SLUG_TO_ICONS[slug]
-
-  if (!titleData)
-    return (
-      <Typography
-        component={tag}
-        variant="h4"
-        className={cx(styles['c-apptitle'], className)}
-        {...otherProps}
-      >
-        {children}
-      </Typography>
-    )
+  if (!appIcon || !appTextIcon) {
+    return null
+  }
 
   return (
     <div className="u-flex u-flex-items-center">
       <Icon
-        icon={titleData.icon}
+        icon={appIcon}
         size="32"
         className={styles['c-apptitle-app-icon']}
       />
@@ -110,27 +31,14 @@ const AppTitle = ({ slug, tag, className, children, ...otherProps }) => {
           isLight ? styles['c-apptitle-light'] : styles['c-apptitle-dark']
         )}
       />
-      <Icon
-        icon={titleData.text}
-        width="auto"
-        height="22"
-        className={cx(
-          'u-w-auto',
-          slug === 'home' ? styles['c-apptitle-home-icon'] : undefined
-        )}
-      />
+      <Icon icon={appTextIcon} width="auto" height="22" className="u-w-auto" />
     </div>
   )
 }
 
 AppTitle.propTypes = {
-  slug: PropTypes.string,
-  tag: PropTypes.string,
-  className: PropTypes.string
-}
-
-AppTitle.defaultProps = {
-  tag: 'h1'
+  appIcon: PropTypes.func,
+  appTextIcon: PropTypes.func
 }
 
 export default AppTitle

package/react/AppTitle/styles.styl

@@ -11,9 +11,3 @@
 
 .c-apptitle-app-icon
     margin-right: 4px
-
-// We need a custom height and positioning
-// because of the 'p' that decenter the svg
-.c-apptitle-home-icon
-    margin-top: 5px
-    height: 26px

package/react/Icon/Readme.md

@@ -723,7 +723,6 @@ import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import cx from 'classnames'
 
 import AccountIcon from 'cozy-ui/transpiled/react/Icons/Account'
-import AITextIcon from 'cozy-ui/transpiled/react/Icons/AiText'
 import AssistantColorIcon from 'cozy-ui/transpiled/react/Icons/AssistantColor'
 import BottomSelectIcon from 'cozy-ui/transpiled/react/Icons/BottomSelect'
 import CreditCardLargeIcon from 'cozy-ui/transpiled/react/Icons/CreditCardLarge'
@@ -780,7 +779,6 @@ import TwakeWorkplace from 'cozy-ui/transpiled/react/Icons/TwakeWorkplace'
 
 const icons = [
   AccountIcon,
-  AITextIcon,
   AssistantColorIcon,
   BottomSelectIcon,
   ChatIcon,

package/react/Icons/AssistantColor.jsx

@@ -3,37 +3,30 @@ import React from 'react'
 
 function SvgAssistantColor(props) {
   return (
-    <svg viewBox="0 0 16 16" fill="none" {...props}>
-      <g clipPath="url(#assistant-color_svg__clip0_19251_33606)">
+    <svg viewBox="0 0 16 16" fill="transparent" color="transparent" {...props}>
+      <g clipPath="url(#assistant-color_svg__clip0_25355_124591)">
         <path
           d="M6.626 10.332a1.333 1.333 0 00-.958-.958L1.578 8.32a.333.333 0 010-.642l4.09-1.055a1.333 1.333 0 00.958-.957l1.055-4.09a.333.333 0 01.642 0l1.054 4.09a1.333 1.333 0 00.958.958l4.09 1.054a.333.333 0 010 .642l-4.09 1.054a1.333 1.333 0 00-.958.958l-1.055 4.09a.333.333 0 01-.642 0l-1.054-4.09z"
-          stroke="#868687"
-          strokeWidth={1.333}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M6.626 10.332a1.333 1.333 0 00-.958-.958L1.578 8.32a.333.333 0 010-.642l4.09-1.055a1.333 1.333 0 00.958-.957l1.055-4.09a.333.333 0 01.642 0l1.054 4.09a1.333 1.333 0 00.958.958l4.09 1.054a.333.333 0 010 .642l-4.09 1.054a1.333 1.333 0 00-.958.958l-1.055 4.09a.333.333 0 01-.642 0l-1.054-4.09z"
-          stroke="url(#assistant-color_svg__paint0_linear_19251_33606)"
+          stroke="url(#assistant-color_svg__paint0_linear_25355_124591)"
           strokeOpacity={0.9}
           strokeWidth={1.333}
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
-          d="M13.335 1.334c.368 0 .667.3.667.667v.666h.668a.667.667 0 010 1.334h-.668v.667a.667.667 0 01-1.334 0v-.667h-.665a.667.667 0 010-1.334h.665v-.666c0-.368.299-.667.667-.667z"
-          fill="url(#assistant-color_svg__paint1_linear_19251_33606)"
+          d="M13.335 1.336c.368 0 .667.299.667.667v.665h.668a.667.667 0 010 1.334h-.668v.668a.667.667 0 01-1.334 0v-.668h-.665a.667.667 0 010-1.334h.665v-.665c0-.368.299-.667.667-.667z"
+          fill="url(#assistant-color_svg__paint1_linear_25355_124591)"
           fillOpacity={0.9}
         />
         <path
-          d="M2.667 10.667c.368 0 .665.298.666.665a.667.667 0 01.001 1.333v.002a.667.667 0 01-1.334 0v-.001h-.001a.667.667 0 010-1.334H2a.667.667 0 01.667-.665z"
-          fill="url(#assistant-color_svg__paint2_linear_19251_33606)"
+          d="M2.667 10.668c.367 0 .664.297.666.664a.667.667 0 01.001 1.333v.003a.667.667 0 01-1.334 0v-.002h-.001a.667.667 0 010-1.334H2a.667.667 0 01.667-.664z"
+          fill="url(#assistant-color_svg__paint2_linear_25355_124591)"
           fillOpacity={0.9}
         />
       </g>
       <defs>
         <linearGradient
-          id="assistant-color_svg__paint0_linear_19251_33606"
+          id="assistant-color_svg__paint0_linear_25355_124591"
           x1={1.336}
           y1={7.999}
           x2={19.625}
@@ -45,11 +38,11 @@ function SvgAssistantColor(props) {
           <stop offset={1} stopColor="#FF0" />
         </linearGradient>
         <linearGradient
-          id="assistant-color_svg__paint1_linear_19251_33606"
+          id="assistant-color_svg__paint1_linear_25355_124591"
           x1={11.336}
-          y1={3.334}
+          y1={3.336}
           x2={16.822}
-          y2={3.334}
+          y2={3.336}
           gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#00B7FF" />
@@ -57,18 +50,18 @@ function SvgAssistantColor(props) {
           <stop offset={1} stopColor="#FF0" />
         </linearGradient>
         <linearGradient
-          id="assistant-color_svg__paint2_linear_19251_33606"
+          id="assistant-color_svg__paint2_linear_25355_124591"
           x1={1.332}
-          y1={12.001}
+          y1={12.002}
           x2={4.99}
-          y2={12.001}
+          y2={12.002}
           gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#00B7FF" />
           <stop offset={0.567} stopColor="#E06DD1" />
           <stop offset={1} stopColor="#FF0" />
         </linearGradient>
-        <clipPath id="assistant-color_svg__clip0_19251_33606">
+        <clipPath id="assistant-color_svg__clip0_25355_124591">
           <path fill="#fff" d="M0 0h16v16H0z" />
         </clipPath>
       </defs>

package/transpiled/react/AppTitle/index.d.ts

@@ -1,20 +1,12 @@
 export default AppTitle;
-declare function AppTitle({ slug, tag, className, children, ...otherProps }: {
-    [x: string]: any;
-    slug: any;
-    tag: any;
-    className: any;
-    children: any;
-}): JSX.Element;
+declare function AppTitle({ appIcon, appTextIcon }: {
+    appIcon: any;
+    appTextIcon: any;
+}): JSX.Element | null;
 declare namespace AppTitle {
     namespace propTypes {
-        const slug: PropTypes.Requireable<string>;
-        const tag: PropTypes.Requireable<string>;
-        const className: PropTypes.Requireable<string>;
-    }
-    namespace defaultProps {
-        const tag_1: string;
-        export { tag_1 as tag };
+        const appIcon: PropTypes.Requireable<(...args: any[]) => any>;
+        const appTextIcon: PropTypes.Requireable<(...args: any[]) => any>;
     }
 }
 import PropTypes from "prop-types";

package/transpiled/react/AppTitle/index.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["slug", "tag", "className", "children"];
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -8,101 +5,27 @@ var styles = {
   "c-apptitle": "styles__c-apptitle___eqV9l",
   "c-apptitle-light": "styles__c-apptitle-light___49VIZ",
   "c-apptitle-dark": "styles__c-apptitle-dark___13RM5",
-  "c-apptitle-app-icon": "styles__c-apptitle-app-icon___oQp8q",
-  "c-apptitle-home-icon": "styles__c-apptitle-home-icon___1xJsd"
+  "c-apptitle-app-icon": "styles__c-apptitle-app-icon___oQp8q"
 };
 import Icon from "cozy-ui/transpiled/react/Icon";
-import AITextIcon from "cozy-ui/transpiled/react/Icons/AiText";
-import CalendarAppIcon from "cozy-ui/transpiled/react/Icons/CalendarApp";
-import CalendarTextIcon from "cozy-ui/transpiled/react/Icons/CalendarText";
-import ChatIcon from "cozy-ui/transpiled/react/Icons/Chat";
-import ChatTextIcon from "cozy-ui/transpiled/react/Icons/ChatText";
-import ContactsIcon from "cozy-ui/transpiled/react/Icons/Contacts";
-import ContactsTextIcon from "cozy-ui/transpiled/react/Icons/ContactsText";
-import DriveIcon from "cozy-ui/transpiled/react/Icons/Drive";
-import DriveTextIcon from "cozy-ui/transpiled/react/Icons/DriveText";
-import MailIcon from "cozy-ui/transpiled/react/Icons/Mail";
-import MailTextIcon from "cozy-ui/transpiled/react/Icons/MailText";
-import NotesIcon from "cozy-ui/transpiled/react/Icons/Notes";
-import NotesTextIcon from "cozy-ui/transpiled/react/Icons/NotesText";
-import PassIcon from "cozy-ui/transpiled/react/Icons/Pass";
-import PassTextIcon from "cozy-ui/transpiled/react/Icons/PassText";
-import PhotosIcon from "cozy-ui/transpiled/react/Icons/Photos";
-import PhotosTextIcon from "cozy-ui/transpiled/react/Icons/PhotosText";
-import StoreIcon from "cozy-ui/transpiled/react/Icons/Store";
-import StoreTextIcon from "cozy-ui/transpiled/react/Icons/StoreText";
 import TwakeTextIcon from "cozy-ui/transpiled/react/Icons/TwakeText";
-import TwakeWorkplaceIcon from "cozy-ui/transpiled/react/Icons/TwakeWorkplace";
-import WorkplaceTextIcon from "cozy-ui/transpiled/react/Icons/WorkplaceText";
-import Typography from "cozy-ui/transpiled/react/Typography";
 import { useCozyTheme } from "cozy-ui/transpiled/react/providers/CozyTheme";
-var SLUG_TO_ICONS = {
-  calendar: {
-    icon: CalendarAppIcon,
-    text: CalendarTextIcon
-  },
-  chat: {
-    icon: ChatIcon,
-    text: ChatTextIcon
-  },
-  contacts: {
-    icon: ContactsIcon,
-    text: ContactsTextIcon
-  },
-  drive: {
-    icon: DriveIcon,
-    text: DriveTextIcon
-  },
-  mail: {
-    icon: MailIcon,
-    text: MailTextIcon
-  },
-  notes: {
-    icon: NotesIcon,
-    text: NotesTextIcon
-  },
-  passwords: {
-    icon: PassIcon,
-    text: PassTextIcon
-  },
-  store: {
-    icon: StoreIcon,
-    text: StoreTextIcon
-  },
-  photos: {
-    icon: PhotosIcon,
-    text: PhotosTextIcon
-  },
-  home: {
-    icon: TwakeWorkplaceIcon,
-    text: WorkplaceTextIcon
-  },
-  assistant: {
-    icon: null,
-    text: AITextIcon
-  }
-};
 
 var AppTitle = function AppTitle(_ref) {
-  var slug = _ref.slug,
-      tag = _ref.tag,
-      className = _ref.className,
-      children = _ref.children,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
+  var appIcon = _ref.appIcon,
+      appTextIcon = _ref.appTextIcon;
 
   var _useCozyTheme = useCozyTheme(),
       isLight = _useCozyTheme.isLight;
 
-  var titleData = SLUG_TO_ICONS[slug];
-  if (!titleData) return /*#__PURE__*/React.createElement(Typography, _extends({
-    component: tag,
-    variant: "h4",
-    className: cx(styles['c-apptitle'], className)
-  }, otherProps), children);
+  if (!appIcon || !appTextIcon) {
+    return null;
+  }
+
   return /*#__PURE__*/React.createElement("div", {
     className: "u-flex u-flex-items-center"
   }, /*#__PURE__*/React.createElement(Icon, {
-    icon: titleData.icon,
+    icon: appIcon,
     size: "32",
     className: styles['c-apptitle-app-icon']
   }), /*#__PURE__*/React.createElement(Icon, {
@@ -111,19 +34,15 @@ var AppTitle = function AppTitle(_ref) {
     height: "22",
     className: cx('u-mr-half', 'u-w-auto', isLight ? styles['c-apptitle-light'] : styles['c-apptitle-dark'])
   }), /*#__PURE__*/React.createElement(Icon, {
-    icon: titleData.text,
+    icon: appTextIcon,
     width: "auto",
     height: "22",
-    className: cx('u-w-auto', slug === 'home' ? styles['c-apptitle-home-icon'] : undefined)
+    className: "u-w-auto"
   }));
 };
 
 AppTitle.propTypes = {
-  slug: PropTypes.string,
-  tag: PropTypes.string,
-  className: PropTypes.string
-};
-AppTitle.defaultProps = {
-  tag: 'h1'
+  appIcon: PropTypes.func,
+  appTextIcon: PropTypes.func
 };
 export default AppTitle;