@stack-spot/portal-components 0.0.18 → 1.0.0-dev.1770393008395

package/src/hooks/date.ts

@@ -0,0 +1,68 @@
+import { Language, useLanguage } from '@stack-spot/portal-translate'
+import { format, formatDistanceToNow } from 'date-fns'
+import { enUS, ptBR } from 'date-fns/locale'
+
+function toValidDate(date?: string | Date): Date | undefined {
+  if (!date) return undefined
+  const d = typeof date === 'string' ? new Date(date) : date
+  return isNaN(d.getTime()) ? undefined : d
+}
+
+function formatDate(date: string | Date, locale: Language, includeTime: boolean) {
+  const d = toValidDate(date)
+  if (!d) return undefined
+  return locale === 'pt'
+    ? format(d, includeTime ? "dd/MM/yyyy 'às' HH:mm" : 'dd/MM/yyyy', { locale: ptBR })
+    : format(d, includeTime ? "MMM dd yyyy 'at' HH:mm" : 'MMM dd yyyy', { locale: enUS })
+}
+
+function formatSimpleDate(date: string | Date, locale: Language) {
+  const d = toValidDate(date)
+  if (!d) return undefined
+  return locale === 'pt'
+    ? format(d, 'dd/MM/yyyy', { locale: ptBR })
+    : format(d, 'MMM dd yyyy', { locale: enUS })
+}
+
+function formatMonthYear(date: string | Date, locale: Language) {
+  const d = toValidDate(date)
+  if (!d) return undefined
+  return locale === 'pt' 
+    ? format(d, "MMMM 'de' yyyy", { locale: ptBR })
+    : format(d, 'MMMM yyyy', { locale: enUS })
+}
+
+function formatISODate(date: string | Date) {
+  const d = toValidDate(date)
+  return d ? d.toISOString() : undefined
+}
+
+function formatISOSDateShort(date: string | Date) {
+  const d = toValidDate(date)
+  return d ? format(d, 'yyyy-MM-dd') : undefined
+}
+
+/**
+ * A utility for formatting dates.
+ * @param date
+ * @returns a date formatter object.
+ */
+export function useDateFormatter() {
+  const locale = useLanguage()
+  return {
+    formatDate: (date?: string | Date) => date ? formatDate(date, locale, false) : undefined,
+    formatDateWithTime: (date?: string | Date) => date ? formatDate(date, locale, true) : undefined,
+    formatSimpleDate: (date?: string | Date) => date ? formatSimpleDate(date, locale) : undefined,
+    formatMonthYear: (date?: string | Date) => date ? formatMonthYear(date, locale) : undefined,
+    formatRelativeWithTooltip: (date?: string | Date) => 
+    {const d = toValidDate(date)
+      if (!d) return undefined
+      return {
+        relative: locale === 'pt'
+          ? formatDistanceToNow(d, { addSuffix: true, locale: ptBR })
+          : formatDistanceToNow(d, { addSuffix: true, locale: enUS }), tooltip: formatDate(d, locale, true),
+      }},
+    formatISODate: (date?: string | Date) => date ? formatISODate(date) : undefined,
+    formatISOSDateShort: (date?: string | Date) => date ? formatISOSDateShort(date) : undefined,  
+  }
+}

package/src/hooks/keyboard.tsx

@@ -0,0 +1,128 @@
+import { useCallback, useEffect, useRef } from 'react'
+
+interface Options<T extends HTMLElement = HTMLDivElement> {
+  /**
+   * A query selector that returns every html element that must be navigable through the keyboard.
+   */
+  querySelectors: string,
+  /**
+   * Function to call when ESC is pressed. or when TAB is pressed at the last item in the list of items returned by the query selector.
+   */
+  onPressEscape?: () => void,
+  /**
+   * Function to call when TAB is pressed at the last item in the list of items returned by the query selector. Will be the same as
+   * onPressEscape if not specified.
+   * 
+   * Attention: has no effect if `disableTabBehavior` is true.
+   */
+  onPressLastTab?: () => void,
+  /**
+   * Pass this function if you want any behavior when the user presses the arrow left.
+   */
+  onPressArrowLeft?: () => void,
+  /**
+   * Pass this function if you want any behavior when the user presses the arrow right.
+   */
+  onPressArrowRight?: () => void,
+  /**
+   * Disables any alteration to the tab key.
+   * @default false
+   */
+  disableTabBehavior?: boolean,
+  /**
+   * If you already have a ref to the element you want to attach the events to, you can pass it in this prop.
+   * 
+   * If you pass a ref. The events won't be attached to the document, instead, they will be attached to the element referred by the ref.
+   */
+  ref?: React.RefObject<T>,
+}
+
+/**
+ * Creates listeners for controlling a Menu UI through the keyboard.
+ * - Arrow down: next element in the iterator returned by the query selectors. First element, if the current element is the last.
+ * - Arrow up: previous element in the iterator returned by the query selectors. Last element, if the current element is the first.
+ * - Tab: same as Arrow down, but has a different behavior if the element is the last (see onPressLastTab).
+ * - Esc: determined by onPressEscape.
+ * @param props {@link Options}.
+ * @returns an object with the element controlled by the keyboard (useRef); a function to attach the keyboard events and a function to
+ * detach the keyboard events.
+ */
+export function useKeyboardControls<T extends HTMLElement = HTMLDivElement>(
+  /**
+   * Options for the keyboard controls.
+   */
+  {
+    querySelectors, onPressEscape, onPressLastTab = onPressEscape, onPressArrowLeft, onPressArrowRight, disableTabBehavior, ref,
+  }: Options<T>,
+  /**
+   * Calls `attachKeyboardListeners` (mount) and `detachKeyboardListeners` (unmount) whenever the deps passed as parameter changes.
+   * 
+   * If deps are undefined, this component doesn't automatically add these listeners and you have to use the functions returned in the
+   * result.
+   */
+  deps?: any[],
+) {
+  const localRef = useRef<T>(null)
+  const keyboardControlledElement = ref ?? localRef
+  const listeners = useRef<Pick<Options, 'onPressEscape' | 'onPressLastTab'>>({})
+  listeners.current = { onPressEscape, onPressLastTab }
+
+  const keyboardControls = useCallback((event: Event) => {
+    const eventKey = (event as KeyboardEvent).key
+    const target = event?.target as HTMLElement | null
+
+    function getSelectableAnchors() {
+      return keyboardControlledElement.current?.querySelectorAll(querySelectors) ?? []
+    }
+
+    function handleArrows(key = eventKey) {
+      const anchors = getSelectableAnchors()
+      let i = 0
+      while (i < anchors.length && document.activeElement !== anchors[i]) i++
+      const next: any = key === 'ArrowDown' ? (anchors[i + 1] ?? anchors[0]) : (anchors[i - 1] ?? anchors[anchors.length - 1])
+      next?.focus?.()
+    }
+      
+    const handlers: Record<string, (() => void) | undefined> = {
+      Escape: () => {
+        listeners.current.onPressEscape?.()
+        event.stopPropagation()
+        event.preventDefault()
+      },
+      Enter: () => {
+        target?.click()
+      },
+      Tab: () => {
+        if (disableTabBehavior) return
+        const anchors = getSelectableAnchors()
+        if (document.activeElement === anchors[anchors.length - 1]) listeners.current.onPressLastTab?.()
+        else  handleArrows('ArrowDown')
+        event.preventDefault()
+      },
+      ArrowUp: handleArrows,
+      ArrowDown: handleArrows,
+      ArrowLeft: onPressArrowLeft,
+      ArrowRight: onPressArrowRight,
+    }
+
+    handlers[eventKey]?.()
+  }, [])
+
+  const attachKeyboardListeners = useCallback(() => {
+    const element = ref?.current ?? document
+    element.addEventListener('keydown', keyboardControls)
+  }, [])
+
+  const detachKeyboardListeners = useCallback(() => {
+    const element = ref?.current ?? document
+    element.removeEventListener('keydown', keyboardControls)
+  }, [])
+
+  useEffect(() => {
+    if (!deps) return
+    attachKeyboardListeners()
+    return detachKeyboardListeners
+  }, deps)
+
+  return { keyboardControlledElement, attachKeyboardListeners, detachKeyboardListeners }
+}

package/src/hooks/manual-render.tsx

@@ -0,0 +1,10 @@
+import { useCallback, useState } from 'react'
+
+/**
+ * Use this hook to manually trigger a re-render from React.
+ * @returns an object with a function to re-render the component.
+ */
+export function useManualRender() {
+  const [, setCount] = useState(0)
+  return { repaint: useCallback(() => setCount(v => v + 1), []) }
+}

package/src/hooks/service-now.tsx

@@ -1,9 +1,13 @@
 
-import { Dictionary, getLanguage, translate } from '@stack-spot/portal-translate'
+import { Dictionary, getLanguage, ptEn, translate } from '@stack-spot/portal-translate'
 import { pull } from 'lodash'
 import { useState } from 'react'
 import { useEffectOnce } from './use-effect-once'
 
+const CHAT_IFRAME_ID = 'sn_va_web_client'
+export const CHAT_BUTTON_ID = 'service-now-button'
+export const CHAT_BUTTON_WRAPPER_ID = 'service-now-content'
+
 const closeButtonStyle = `
   position: absolute;
   bottom: -64px;
@@ -39,6 +43,10 @@ const iframeStyle = `
 type ChatVisibilityListener = (visible: boolean) => void
 
 interface Options {
+  /**
+   * Function to run when the chat button is hidden, i.e. when the user clicks the close button that appears when the chat button is
+   * hovered.
+   */
   onClose?: () => void,
 }
 
@@ -51,8 +59,8 @@ const serviceNowReference = 'https://zup.service-now.com/sn_va_web_client_app_em
 function loadScript(src: string): Promise<void> {
   return new Promise<void>((resolve, reject) => {
     const iframe = document.createElement('iframe')
-    const serviceNowContent = document.getElementById('service-now-content')
-    iframe.setAttribute('id', 'sn_va_web_client')
+    const serviceNowContent = document.getElementById(CHAT_BUTTON_WRAPPER_ID)
+    iframe.setAttribute('id', CHAT_IFRAME_ID)
     iframe.setAttribute('src', src)
     iframe.style.cssText = iframeStyle
 
@@ -63,39 +71,64 @@ function loadScript(src: string): Promise<void> {
   })
 }
 
+/**
+ * @returns the iframe loaded by service now, i.e. the chat window; or null if the chat window doesn't exist.
+ */
 export function getServiceNowLauncher() {
-  return document.getElementById('sn_va_web_client')
+  return document.getElementById(CHAT_IFRAME_ID)
 }
 
+/**
+ * Opens the chat window and makes the chat button visible.
+ */
 export function openServiceNowChat() {
   hideOrShowServiceNowContent('visible')
-  addOrRemoveServiceNowLauncher('add')
+  showChatWindow()
   showServiceNowChatButton()
 }
 
 function getServiceNowButton() {
-  return document.getElementById('service-now-button')
+  return document.getElementById(CHAT_BUTTON_ID)
 }
 
-function hideOrShowServiceNowContent(action: string) {
-  const content = document.getElementById('service-now-content')
+function hideOrShowServiceNowContent(action: 'visible' | 'hidden') {
+  const content = document.getElementById(CHAT_BUTTON_WRAPPER_ID)
   if (content) {
     content.style.visibility = action
   }
 }
 
-export function addOrRemoveServiceNowLauncher(action: string) {
+function toggleChatWindow(show: boolean) {
   const launcher = getServiceNowLauncher()
-  const isAdd = action === 'add'
+  const content = document.getElementById(CHAT_BUTTON_WRAPPER_ID)
+  if (!launcher || !content) return
+  const [action, display] = show ? ['add', 'block'] as const : ['remove', 'none'] as const
+  launcher.classList[action]('show')
+  content.classList[action]('opened')
+  launcher.style.display = display
+}
 
-  if (launcher) {
-    isAdd ? launcher.classList.add('show') : launcher.classList.remove('show')
-    const content = document.getElementById('service-now-content')
-    isAdd ? content?.classList.add('opened') : content?.classList.remove('opened')
-    launcher.style.display = isAdd ? 'block' : 'none'
-  }
+/**
+ * Shows the chat window, i.e. shows the service now iframe and switch the icon in the chat button to "close".
+ */
+export function showChatWindow() {
+  toggleChatWindow(true)
+}
+
+/**
+ * Hides the chat window, i.e. hides the service now iframe and switch the icon in the chat button to "chat".
+ */
+export function hideChatWindow() {
+  toggleChatWindow(false)
 }
 
+/**
+ * Adds a listener that is called whenever the visibility of the chat button changes.
+ * 
+ * The listener is called with a single parameter which indicates if the button is visible or not.
+ * @param listener the listener to register.
+ * @returns a function that, when called, removes the listener.
+ */
 function addChatVisibilityListener(listener: ChatVisibilityListener) {
   chatVisibilityListeners.push(listener)
   return () => pull(chatVisibilityListeners, listener)
@@ -114,7 +147,7 @@ function renderCloseButton(onClose?: () => void) {
   anchor.appendChild(close)
 
   serviceNowButton.addEventListener('mouseenter', () => {
-    const t = translate(dictionary, getLanguage())
+    const t = translate(dictionary, getLanguage(ptEn))
     close.setAttribute('title', t.hide)
     close.style.transform = 'scale(1)'
 
@@ -136,7 +169,7 @@ function showServiceNowChatButton() {
 
 function hideServiceNowChatButton(onClose?: () => void) {
   hideOrShowServiceNowContent('hidden')
-  addOrRemoveServiceNowLauncher('remove')
+  hideChatWindow()
   getServiceNowButton()?.classList?.remove('show')
   localStorage.setItem(LOCAL_STORAGE_SERVICE_NOW_VALUE, 'false')
   onClose?.()
@@ -154,18 +187,30 @@ async function initializeChat({ onClose }: Options = {}) {
     else hideServiceNowChatButton()
     renderCloseButton(onClose)
   } catch {
-    const t = translate(dictionary, getLanguage())
+    const t = translate(dictionary, getLanguage(ptEn))
     // eslint-disable-next-line no-console
     console.warn(t.errorLoadScript)
   }
 }
 
+/**
+ * A react hook that indicates whether the chat button is visible or not. This is updated whenever the value changes.
+ * @returns true if the chat button is visible and false otherwise.
+ */
 export function useServiceNowChatButtonVisibility() {
   const [visible, setVisible] = useState(isServiceNowChatButtonVisible())
   useEffectOnce(() => addChatVisibilityListener(setVisible))
   return visible
 }
 
+/**
+ * Starts Service Now:
+ * 
+ * - Creates the chat window feature by loading the required script.
+ * - Adds a "minimize" button on top of the chat button (left bottom corner). This button appears whenever the user hovers the chat button.
+ * If clicked, the chat button is hidden. 
+ * @param options 
+ */
 export function useServiceNowEffect(options?: Options) {
   useEffectOnce(() => {
     initializeChat(options)

package/src/hooks/text.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useRef, useState } from 'react'
+
+/**
+ * Checks if the text fits completely in the space available.
+ * @returns true if it fits, false otherwise.
+ */
+export function useCheckTextOverflow() {
+  const [overflow, setOverflow] = useState<boolean>(false)
+  const ref = useRef<HTMLParagraphElement>(null) 
+
+  const checkOverflow = () => {
+    if (!ref.current) {
+      return
+    }
+
+    const hasOverflow = ref.current.offsetWidth < ref.current.scrollWidth
+    
+    if (hasOverflow === overflow) {
+      return
+    }
+
+    setOverflow(hasOverflow)  
+  }
+
+  useEffect(() => {    
+    checkOverflow()
+  }, [ref.current])
+
+  return { overflow, ref }
+}

package/src/hooks/title.tsx

@@ -2,6 +2,13 @@ import { useEffect } from 'react'
 
 let originalTitle: string | undefined
 
+/**
+ * A React effect for prefixing the page title with the string passed as parameter followed by " - ".
+ * 
+ * This returns a dispose function that changes the title back to its original value.
+ * @param title the prefix to add to the page title.
+ * @returns a dispose function.
+ */
 export function titleEffect(title: string | undefined | null) {
   originalTitle ??= document.title
   document.title = title ? `${title} - ${originalTitle}` : originalTitle
@@ -10,6 +17,12 @@ export function titleEffect(title: string | undefined | null) {
   }
 }
 
+/**
+ * Changes the page title to have the string passed as parameter as a prefix followed by " - " and the original title.
+ * 
+ * Once disposed, this hook changes the title back to its original value.
+ * @param title the prefix to add to the page title.
+ */
 export function useTitleEffect(title: string | undefined | null) {
   useEffect(() => titleEffect(title), [title])
 }

package/src/index.ts

@@ -1,11 +1,19 @@
+export { AsyncContent } from './components/AsyncContent'
 export { BannerWarning } from './components/BannerWarning'
-export { BreadcrumbList } from './components/Breadcrumb'
+export { ButtonLoading } from './components/ButtonLoading'
 export { ChatBot } from './components/ChatBot'
-export { Login } from './components/Login'
-export * from './components/tour'
-export {
-  openServiceNowChat, dictionary as serviceNowDictionary, useServiceNowChatButtonVisibility, useServiceNowEffect,
-} from './hooks/service-now'
+export { InfoMaintenanceBanner } from './components/InfoMaintenanceBanner'
+export * from './components/Select'
+export * from './components/Select/types'
+export { useDateFormatter } from './hooks/date'
+export { useKeyboardControls } from './hooks/keyboard'
+export { useManualRender } from './hooks/manual-render'
+export { openServiceNowChat, dictionary as serviceNowDictionary, useServiceNowChatButtonVisibility, useServiceNowEffect } from './hooks/service-now'
+export { useCheckTextOverflow } from './hooks/text'
 export { titleEffect, useTitleEffect } from './hooks/title'
 export { useEffectOnce } from './hooks/use-effect-once'
+export * from './utils/accessibility'
+export * from './utils/cookie'
+export { delay } from './utils/promise'
+export { readFile } from './utils/read-file'
 

package/src/notifications.ts

@@ -0,0 +1,11 @@
+export { NotificationComponent } from './components/notification/NotificationComponent'
+export { NotificationItem } from './components/notification/NotificationItem'
+export { NotificationList, NotificationListProps } from './components/notification/NotificationList'
+export * from './components/notification/types'
+export { NotificationsPage } from './containers/NotificationsPage'
+export { NotificationProvider, useNotificationController } from './context/notification/context'
+export { useNotificationList, useUnreadNotifications } from './context/notification/hooks'
+export { LazyNotificationList } from './context/notification/LazyNotificationList'
+export { NotificationController } from './context/notification/NotificationController'
+export { LoadNotificationsFilters } from './context/notification/types'
+

package/src/svg/AI.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable max-len */
+
+import { theme } from '@stack-spot/portal-theme'
+import { useTranslate } from '@stack-spot/portal-translate'
+
+/**
+ * The Stackspot logo followed by the text "AI". This is the specific logo for the AI Portal.
+ */
+export const AI = ({ className, style }: { className?: string, style?: React.CSSProperties }) => {
+  const t = useTranslate({ 
+    en: { title: 'Logo StackSpot AI (Artificial Intelligence)', description: 'StackSpot logo on the left and right side written "StackSpot" in white and "AI" in orange.' }, 
+    pt: { title: 'Logo StackSpot AI (Inteligência Artificial)', description: 'Logo da StackSpot do lado esquerdo e do lado direito escrito "StackSpot" na cor branca e "AI" na cor laranja.' },
+  })
+  return (
+    <svg id="logo-ai" aria-labelledby="logo-ai-title logo-ai-desc" className={className} style={style} width="139" height="24" viewBox="0 0 139 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <title id="logo-ai-title">{t.title}</title>
+      <desc id="logo-ai-desc">{t.description}</desc>
+      <g clipPath="url(#clip0_7262_63725)">
+        <path d="M73.7006 8.97522H71.2213L68.0266 13.0292C67.5949 13.5363 67.6121 14.0062 68.0266 14.5306L71.4557 18.879H74.1299L69.8941 13.6723L73.7006 8.97522Z" fill={theme.color.light.contrastText}/>
+        <path d="M76.878 8.8194C76.878 7.78302 77.6774 6.99893 79.1427 6.99893C80.5218 6.99893 81.4025 7.85722 81.5456 9.09395H83.8127C83.6203 6.75158 81.8663 4.94348 79.1427 4.94348C76.4192 4.94348 74.6134 6.60812 74.6134 8.77982C74.6134 13.6525 81.7577 12.2254 81.7577 15.2578C81.7577 16.2571 80.9584 17.0585 79.3179 17.0585C77.6774 17.0585 76.7029 16.079 76.5647 14.6716H74.3C74.416 17.2366 76.2712 19.1139 79.2982 19.1139C82.3251 19.1139 84.0224 17.4295 84.0224 15.1985C84.0224 10.2664 76.878 11.7925 76.878 8.81692V8.8194Z" fill={theme.color.light.contrastText}/>
+        <path d="M90.2812 8.74023C88.9663 8.74023 88.1547 9.46743 87.6785 10.1575C87.4664 10.4642 86.9878 10.3381 86.9508 9.96707L86.8472 8.97521H85.2461V22.4036H87.3924V18.4609C87.3924 18.1245 87.8068 17.9564 88.0338 18.2037C88.4655 18.6761 89.1661 19.1164 90.2837 19.1164C92.7235 19.1164 94.8328 16.9447 94.8328 13.9296C94.8328 10.9144 92.7235 8.74271 90.2837 8.74271L90.2812 8.74023ZM90.0468 17.1178C88.6209 17.1178 87.3924 15.8267 87.3924 13.9271C87.3924 12.0275 88.6234 10.7363 90.0468 10.7363C91.4703 10.7363 92.7013 12.0275 92.7013 13.9271C92.7013 15.8267 91.4728 17.1178 90.0468 17.1178Z" fill={theme.color.light.contrastText}/>
+        <path d="M100.66 8.74023C97.9857 8.74023 95.7605 11.0307 95.7605 13.9271C95.7605 16.8235 97.9857 19.1139 100.66 19.1139C103.334 19.1139 105.559 16.8037 105.559 13.9271C105.559 11.0504 103.334 8.74023 100.66 8.74023ZM100.66 17.1178C99.1378 17.1178 97.887 15.8069 97.887 13.9271C97.887 12.0473 99.1353 10.7363 100.66 10.7363C102.185 10.7363 103.433 12.0473 103.433 13.9271C103.433 15.8069 102.185 17.1178 100.66 17.1178Z" fill={theme.color.light.contrastText}/>
+        <path d="M109.696 6.43005H107.841V7.9166C107.841 8.6809 107.432 9.0915 106.65 9.0915H105.947V10.912H107.567V15.6684C107.567 17.8401 108.875 19.114 110.671 19.114C111.199 19.114 111.589 19.015 111.843 18.9186V16.9621C111.648 17.061 111.413 17.0981 111.159 17.0981C110.281 17.0981 109.694 16.5886 109.694 15.4928V10.912H111.84V8.97525H109.694V6.43005H109.696Z" fill={theme.color.light.contrastText}/>
+        <path d="M58.6421 10.7363C60.0483 10.7363 60.8279 11.8123 61.0622 12.6161H63.2085C62.8187 10.6794 61.0992 8.74023 58.6397 8.74023C55.9655 8.74023 53.7402 11.0307 53.7402 13.9271C53.7402 16.8235 55.9655 19.1139 58.6397 19.1139C61.0992 19.1139 62.8187 17.1574 63.2085 15.238H61.0622C60.8279 16.0394 60.0458 17.1178 58.6421 17.1178C57.12 17.1178 55.8692 15.8069 55.8692 13.9271C55.8692 12.0473 57.1175 10.7363 58.6421 10.7363Z" fill={theme.color.light.contrastText}/>
+        <path d="M66.7906 5.17847H64.6418V18.8814H66.7906V5.17847Z" fill={theme.color.light.contrastText}/>
+        <path d="M39.8611 6.43005H38.006V7.9166C38.006 8.6809 37.5965 9.0915 36.8144 9.0915H36.1113V10.912H37.7321V15.6684C37.7321 17.8401 39.0396 19.114 40.8356 19.114C41.3635 19.114 41.7533 19.015 42.0074 18.9186V16.9621C41.8125 17.061 41.5782 17.0981 41.3241 17.0981C40.4458 17.0981 39.8611 16.5886 39.8611 15.4928V10.912H42.0074V8.97525H39.8611V6.43005Z" fill={theme.color.light.contrastText}/>
+        <path d="M50.59 9.92502C50.5702 10.2342 50.173 10.3455 49.9979 10.0883C49.5489 9.42786 48.72 8.74023 47.2151 8.74023C44.7753 8.74023 42.666 10.9119 42.666 13.9271C42.666 16.9422 44.7753 19.1139 47.2151 19.1139C48.6978 19.1139 49.5366 18.3843 49.993 17.709C50.1656 17.4542 50.5653 17.5705 50.585 17.8772L50.6492 18.879H52.3144V8.97521H50.6492L50.5875 9.92502H50.59ZM47.452 17.1178C46.026 17.1178 44.7975 15.8267 44.7975 13.9271C44.7975 12.0275 46.0285 10.7363 47.452 10.7363C48.8754 10.7363 50.1064 12.0275 50.1064 13.9271C50.1064 15.8267 48.8754 17.1178 47.452 17.1178Z" fill={theme.color.light.contrastText}/>
+        <path d="M28.1527 8.8194C28.1527 7.78302 28.952 6.99893 30.4174 6.99893C31.7965 6.99893 32.6772 7.85722 32.8203 9.09395H35.085C34.8925 6.75158 33.1385 4.94348 30.415 4.94348C27.6914 4.94348 25.8856 6.60812 25.8856 8.77982C25.8856 13.6525 33.03 12.2254 33.03 15.2578C33.03 16.2571 32.2307 17.0585 30.5901 17.0585C28.9496 17.0585 27.9751 16.079 27.837 14.6716H25.5723C25.6882 17.2366 27.5434 19.1139 30.5704 19.1139C33.5974 19.1139 35.2946 17.4295 35.2946 15.1985C35.2946 10.2664 28.1503 11.7925 28.1503 8.81692L28.1527 8.8194Z" fill={theme.color.light.contrastText}/>
+        <path d="M133.017 6.66505V5.17603H127.616V6.66505H129.417V17.3925H127.616V18.8815H133.017V17.3925H131.216V6.66505H133.017Z" fill="#FF6900"/>
+        <path d="M119.505 5.17603L114.349 18.8864H116.185L120.327 7.60496L124.466 18.8864H126.381L121.225 5.17603H119.505Z" fill="#FF6900"/>
+        <path d="M120.265 16.4821C120.837 16.4821 121.301 16.017 121.301 15.4433C121.301 14.8695 120.837 14.4044 120.265 14.4044C119.693 14.4044 119.229 14.8695 119.229 15.4433C119.229 16.017 119.693 16.4821 120.265 16.4821Z" fill="#FF6900"/>
+        <path d="M19.0521 8.60424C19.9969 8.60424 20.7617 7.83746 20.7617 6.89013C20.7617 5.94279 19.9969 5.17602 19.0521 5.17602C18.1072 5.17602 17.3425 5.94279 17.3425 6.89013C17.3425 7.83746 18.1072 8.60424 19.0521 8.60424ZM19.0521 15.4607C18.1072 15.4607 17.3425 16.2274 17.3425 17.1748C17.3425 18.1221 18.1072 18.8889 19.0521 18.8889C19.9969 18.8889 20.7617 18.1221 20.7617 17.1748C20.7617 16.2274 19.9969 15.4607 19.0521 15.4607ZM10.388 20.6055C9.44319 20.6055 8.67842 21.3722 8.67842 22.3196C8.67842 23.2669 9.44319 24.0337 10.388 24.0337C11.3329 24.0337 12.0977 23.2669 12.0977 22.3196C12.0977 21.3722 11.3329 20.6055 10.388 20.6055ZM18.4526 13.6377C19.1064 13.8826 19.8761 13.7119 20.3621 13.1381C20.9418 12.448 20.8777 11.3943 20.219 10.7784C19.733 10.3258 19.057 10.2095 18.4723 10.4222C18.0332 10.5805 17.5497 10.5434 17.1476 10.306C16.743 10.0661 16.4815 9.65051 16.4075 9.1855C16.3335 8.7378 16.0843 8.31979 15.6797 8.04523C15.2135 7.72863 14.6485 7.67421 14.1551 7.84983C13.7111 8.00566 13.2226 7.97845 12.8156 7.73852C12.4085 7.4986 12.1495 7.08058 12.073 6.6131C11.9965 6.15551 11.7375 5.73007 11.3181 5.45552C10.5731 4.97072 9.55174 5.15376 9.02133 5.86611C8.43173 6.65515 8.62662 7.76821 9.43085 8.31484C9.89711 8.63144 10.4621 8.68586 10.9555 8.51025C11.3995 8.35442 11.888 8.38163 12.295 8.62155C12.6996 8.86148 12.9611 9.27702 13.0376 9.7445C13.1116 10.1922 13.3608 10.6102 13.7653 10.8848C14.2316 11.2014 14.7965 11.2558 15.2899 11.0802C15.322 11.0678 15.8105 10.8427 16.0596 10.8427C16.7159 10.8427 17.2487 11.377 17.2487 12.0349C17.2487 12.6929 16.7159 13.2271 16.0596 13.2271C15.8105 13.2271 15.3245 12.9996 15.2924 12.9897C14.8064 12.8165 14.2513 12.866 13.7875 13.1702C13.3682 13.4448 13.1141 13.8727 13.0401 14.3328C12.9636 14.7953 12.7045 15.2109 12.2975 15.4533C11.8929 15.6932 11.4044 15.7229 10.9579 15.5646C10.4645 15.3914 9.89958 15.4458 9.43332 15.76C8.62908 16.3066 8.43419 17.4197 9.0238 18.2087C9.55667 18.921 10.5755 19.1041 11.3206 18.6193C11.7424 18.3447 12.0015 17.9193 12.0755 17.4617C12.1519 16.9942 12.411 16.5787 12.818 16.3363C13.2226 16.0964 13.827 16.1409 14.1527 16.22C14.6535 16.3412 15.1937 16.3437 15.6575 16.0395C16.0769 15.7649 16.3335 15.337 16.4075 14.8769C16.4815 14.4144 16.743 14.0013 17.1476 13.7614C17.5423 13.5264 18.0234 13.4745 18.4526 13.6377ZM9.79103 13.6377C10.4448 13.8826 11.2145 13.7119 11.7005 13.1381C12.2802 12.448 12.2161 11.3943 11.5574 10.7784C11.0714 10.3258 10.3954 10.2095 9.81077 10.4222C9.37165 10.5805 8.88812 10.5434 8.486 10.306C8.08142 10.0661 7.81991 9.65051 7.7459 9.1855C7.74344 9.16324 7.4474 7.75337 6.05849 7.75337C5.11363 7.75337 4.34887 8.52014 4.34887 9.46747C4.34887 10.4148 5.11363 11.1816 6.05849 11.1816C6.33972 11.1816 6.60369 11.1123 6.83805 10.9911C7.01074 10.9243 7.24511 10.8427 7.39559 10.8427C8.05181 10.8427 8.58468 11.377 8.58468 12.0349C8.58468 12.6929 8.05181 13.2271 7.39559 13.2271C7.23031 13.2271 6.96387 13.1282 6.79118 13.0589C6.73444 13.0367 6.35206 12.8907 6.05602 12.8907C5.11117 12.8907 4.3464 13.6575 4.3464 14.6049C4.3464 15.5522 5.11117 16.319 6.05602 16.319C6.89973 16.319 7.60035 15.7055 7.7385 14.8967C7.7385 14.8893 7.74344 14.8819 7.7459 14.8745C7.81991 14.4119 8.08142 13.9989 8.486 13.7589C8.88072 13.524 9.36178 13.472 9.79103 13.6353V13.6377ZM14.7201 18.0331C13.7752 18.0331 13.0104 18.7998 13.0104 19.7472C13.0104 20.6945 13.7752 21.4613 14.7201 21.4613C15.6649 21.4613 16.4297 20.6945 16.4297 19.7472C16.4297 18.7998 15.6649 18.0331 14.7201 18.0331ZM10.388 3.46191C11.3329 3.46191 12.0977 2.69514 12.0977 1.7478C12.0977 0.800465 11.3329 0.0336914 10.388 0.0336914C9.44319 0.0336914 8.67842 0.800465 8.67842 1.7478C8.67842 2.69514 9.44319 3.46191 10.388 3.46191ZM6.05849 18.0331C5.11363 18.0331 4.34887 18.7998 4.34887 19.7472C4.34887 20.6945 5.11363 21.4613 6.05849 21.4613C7.00334 21.4613 7.76811 20.6945 7.76811 19.7472C7.76811 18.7998 7.00334 18.0331 6.05849 18.0331ZM14.7201 6.03431C15.6649 6.03431 16.4297 5.26754 16.4297 4.3202C16.4297 3.37286 15.6649 2.60609 14.7201 2.60609C13.7752 2.60609 13.0104 3.37286 13.0104 4.3202C13.0104 5.26754 13.7752 6.03431 14.7201 6.03431ZM6.05849 6.03431C7.00334 6.03431 7.76811 5.26754 7.76811 4.3202C7.76811 3.37286 7.00334 2.60609 6.05849 2.60609C5.11363 2.60609 4.34887 3.37286 4.34887 4.3202C4.34887 5.26754 5.11363 6.03431 6.05849 6.03431ZM1.72647 5.17602C0.78161 5.17602 0.0168457 5.94279 0.0168457 6.89013C0.0168457 7.83746 0.78161 8.60424 1.72647 8.60424C2.67132 8.60424 3.43608 7.83746 3.43608 6.89013C3.43608 5.94279 2.67132 5.17602 1.72647 5.17602ZM1.72647 15.4607C0.78161 15.4607 0.0168457 16.2274 0.0168457 17.1748C0.0168457 18.1221 0.78161 18.8889 1.72647 18.8889C2.67132 18.8889 3.43608 18.1221 3.43608 17.1748C3.43608 16.2274 2.67132 15.4607 1.72647 15.4607ZM1.72647 10.3183C0.78161 10.3183 0.0168457 11.0851 0.0168457 12.0325C0.0168457 12.9798 0.78161 13.7466 1.72647 13.7466C2.67132 13.7466 3.43608 12.9798 3.43608 12.0325C3.43608 11.0851 2.67132 10.3183 1.72647 10.3183Z" fill="#FF6900"/>
+      </g>
+      <defs>
+        <clipPath id="clip0_7262_63725">
+          <rect width="133" height="24" fill="white" transform="translate(0.0168457 0.0336914)"/>
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

package/src/svg/CS.tsx

@@ -0,0 +1,48 @@
+/* eslint-disable max-len */
+
+import { theme } from '@stack-spot/portal-theme'
+import { useTranslate } from '@stack-spot/portal-translate'
+
+/**
+ * The Stackspot logo followed by the text "EDP". This is the specific logo for the EDP Portal.
+ */
+export const CS = ({ className, style }: { className?: string, style?: React.CSSProperties }) => {
+  const t = useTranslate({ 
+    en: { title: 'Logo StackSpot CS (Cloud Services)', description: 'StackSpot logo on the left and right side written "StackSpot" in white and "CS" in orange.' }, 
+    pt: { title: 'Logo StackSpot CS (Serviços de Cloud)', description: 'Logo da StackSpot do lado esquerdo e do lado direito escrito "StackSpot" na cor branca e "CS" na cor laranja.' },
+  })
+  return (
+    <svg id="logo-cs" aria-labelledby="logo-cs-title logo-cs-desc" className={className} style={style} xmlns="http://www.w3.org/2000/svg" width="143" height="25" viewBox="0 0 143 25" fill="none">
+      <title id="logo-cs-title">{t.title}</title>
+      <desc id="logo-cs-desc">{t.description}</desc>
+      <g clipPath="url(#clip0_7310_17825)">
+        <path d="M13.5276 20.6222C13.4128 20.6222 13.303 20.6446 13.2031 20.6821C13.1183 20.7145 13.0285 20.7345 12.9361 20.742C12.9187 20.742 12.9012 20.742 12.8862 20.742C12.2299 20.742 11.6584 20.3726 11.3689 19.8311L11.3639 19.8236C11.324 19.7488 11.2991 19.6689 11.2841 19.5865C11.2042 19.1299 10.8099 18.7855 10.3308 18.7855C10.2185 18.7855 10.1112 18.8054 10.0114 18.8429C9.92154 18.8753 9.8292 18.8978 9.73687 18.9053C9.7194 18.9053 9.70193 18.9053 9.68696 18.9053C9.01317 18.9053 8.4392 18.5309 8.1572 17.9694C8.12476 17.9021 8.1023 17.8297 8.08983 17.7573C8.01246 17.2982 7.61568 16.9463 7.13404 16.9463C7.02424 16.9463 6.91693 16.9662 6.81961 17.0012C6.73975 17.0286 6.65989 17.0486 6.57505 17.0536C6.5476 17.0536 6.52015 17.0561 6.49769 17.0561C5.78147 17.0561 5.16508 16.5395 4.90555 15.9181L4.87061 15.8208C4.83068 15.6811 4.7633 15.5538 4.67097 15.449C4.5986 15.3666 4.53122 15.2793 4.47133 15.1869C4.41642 15.1021 4.35653 15.0048 4.32659 14.9399C4.22427 14.7153 4.14192 14.4707 4.14192 14.2436C4.14192 13.9691 4.2068 13.7096 4.32159 13.48C4.32908 13.465 4.33906 13.4476 4.34905 13.4301C4.41393 13.3128 4.49878 13.2105 4.5961 13.1182C4.79824 12.931 4.92052 12.659 4.90804 12.3595C4.88558 11.8579 4.47632 11.4512 3.97472 11.4312C3.41822 11.4087 2.96154 11.8529 2.96154 12.4044C2.96154 12.6864 3.08132 12.941 3.27348 13.1182C3.38078 13.218 3.47811 13.3328 3.54798 13.4625C3.56046 13.4875 3.57294 13.51 3.58292 13.5274C3.68274 13.7445 3.74014 13.9866 3.74014 14.2436C3.74014 14.5007 3.72267 14.9574 3.36332 15.2943C3.12375 15.5188 2.93159 15.8083 2.96403 16.1702C3.00147 16.5869 3.30841 16.9313 3.71518 17.0286C3.91483 17.0761 4.09949 17.0561 4.26669 16.9937C4.35404 16.9613 4.44388 16.9413 4.53621 16.9363C4.55368 16.9363 4.56865 16.9363 4.58113 16.9363C5.23246 16.9363 5.80643 17.2832 6.0984 17.8147C6.13584 17.8821 6.1583 17.9545 6.16578 18.0293C6.22068 18.516 6.63244 18.8928 7.13155 18.8928C7.24884 18.8928 7.35864 18.8703 7.46096 18.8329C7.54331 18.8029 7.62816 18.7805 7.7155 18.7755C7.74045 18.7755 7.76042 18.773 7.77789 18.773C8.40177 18.773 8.95078 19.1099 9.25274 19.6115C9.25274 19.614 9.25773 19.619 9.26022 19.624C9.31512 19.7188 9.35505 19.8236 9.37502 19.9309C9.45487 20.3876 9.85166 20.732 10.3283 20.732C10.4481 20.732 10.5604 20.7095 10.6652 20.6696C10.7625 20.6322 10.8648 20.6147 10.9697 20.6122C10.9746 20.6122 10.9796 20.6122 10.9846 20.6122C11.6035 20.6122 12.1351 20.9316 12.4345 21.4183C12.437 21.4232 12.4395 21.4257 12.442 21.4307C12.5069 21.5405 12.5518 21.6603 12.5768 21.7851C12.6666 22.2468 13.0784 22.5911 13.57 22.5687C14.0716 22.5462 14.4783 22.137 14.5008 21.6354C14.5233 21.0789 14.0791 20.6222 13.5276 20.6222ZM3.93729 9.6993C4.47382 9.6993 4.91054 9.26259 4.91054 8.72605C4.91054 8.18952 4.47382 7.7528 3.93729 7.7528C3.40075 7.7528 2.96403 8.18952 2.96403 8.72605C2.96403 9.26259 3.40075 9.6993 3.93729 9.6993ZM3.93729 6.02341C4.47382 6.02341 4.91054 5.58669 4.91054 5.05016C4.91054 4.51362 4.47382 4.0769 3.93729 4.0769C3.40075 4.0769 2.96403 4.51362 2.96403 5.05016C2.96403 5.58669 3.40075 6.02341 3.93729 6.02341Z" fill="#FF9800"/>
+        <path d="M16.8545 18.5507C16.6648 18.5307 16.4827 18.5557 16.318 18.6156C16.2381 18.6455 16.1557 18.6705 16.0734 18.6904C15.991 18.7104 15.8962 18.7279 15.8263 18.7279C15.3971 18.7279 15.0253 18.4833 14.8431 18.124C14.8157 18.0715 14.7882 17.9792 14.7657 17.9019C14.7483 17.842 14.7333 17.7796 14.7233 17.7172C14.626 17.1432 14.1294 16.7065 13.528 16.7065C13.3633 16.7065 13.206 16.7414 13.0638 16.7988C13.0388 16.8088 13.0164 16.8188 12.9914 16.8288C12.8766 16.8687 12.7569 16.8912 12.6271 16.8912C12.1754 16.8912 11.7886 16.6192 11.6164 16.2324C11.569 16.125 11.5266 15.8855 11.5266 15.8855C11.4342 15.309 10.9351 14.8673 10.3312 14.8673C10.184 14.8673 10.0442 14.8948 9.91446 14.9422C9.91446 14.9422 9.60501 15.047 9.43532 15.047C8.96866 15.047 8.56937 14.755 8.40966 14.3457C8.36973 14.2434 8.32731 14.0138 8.32731 14.0138C8.2749 13.7368 8.12767 13.4948 7.92054 13.3201C7.86314 13.2702 7.80575 13.2178 7.75584 13.1604C7.69844 13.0955 7.63106 13.0156 7.59612 12.9557C7.50129 12.7935 7.44889 12.6064 7.44889 12.4067C7.44889 12.1721 7.52126 11.955 7.64603 11.7754C7.67348 11.7379 7.7184 11.6855 7.76083 11.6406C7.81074 11.5882 7.86314 11.5408 7.91804 11.4959C8.18257 11.2738 8.35226 10.9419 8.35226 10.5675C8.35226 10.1932 8.18257 9.8613 7.91804 9.6392C7.85815 9.58929 7.80325 9.53938 7.74835 9.48198C7.72839 9.45952 7.70842 9.43956 7.69345 9.42209C7.54122 9.23243 7.44889 8.99036 7.44889 8.72833C7.44889 8.53119 7.50129 8.34402 7.59363 8.18431C7.63106 8.11693 7.70842 8.02709 7.77081 7.95971C7.81573 7.9098 7.86564 7.86239 7.91804 7.81997C8.20253 7.58289 8.37472 7.21605 8.34977 6.81178C8.30984 6.19538 7.80325 5.70377 7.18686 5.67881C6.4956 5.65136 5.92413 6.20537 5.92413 6.89163C5.92413 7.26347 6.09382 7.59786 6.35835 7.81997C6.41075 7.86488 6.46316 7.9123 6.51057 7.96221C6.56298 8.01711 6.62287 8.08699 6.65531 8.13939C6.76262 8.30909 6.8275 8.51372 6.8275 8.73083C6.8275 8.99286 6.73517 9.23492 6.58045 9.42458C6.56547 9.44205 6.54801 9.46202 6.52804 9.48448C6.47564 9.53938 6.41824 9.59178 6.35835 9.64169C6.09382 9.86379 5.92413 10.1957 5.92413 10.57C5.92413 10.9444 6.09382 11.2788 6.36084 11.5009C6.41574 11.5458 6.46565 11.5932 6.51556 11.6431C6.5505 11.6805 6.58544 11.7205 6.6079 11.7504C6.74515 11.9351 6.8275 12.1622 6.8275 12.4092C6.8275 12.6388 6.75763 12.8509 6.63784 13.0281C6.61039 13.0705 6.55799 13.1279 6.51556 13.1753C6.46815 13.2277 6.41574 13.2752 6.36084 13.3201C6.07635 13.5572 5.90416 13.9215 5.92912 14.3283C5.96905 14.9397 6.46815 15.4313 7.07955 15.4612C7.26172 15.4712 7.43641 15.4388 7.59612 15.3739C7.70093 15.3315 7.80824 15.299 7.92054 15.2866C7.96546 15.2816 8.01038 15.2766 8.04282 15.2766C8.42463 15.2766 8.76153 15.4712 8.96117 15.7682C8.97864 15.7956 8.9986 15.8331 9.01857 15.8755C9.07846 16.0028 9.11839 16.14 9.14085 16.2798C9.23069 16.8587 9.73229 17.3029 10.3387 17.3029C10.4934 17.3029 10.6382 17.273 10.7729 17.2206C10.8677 17.1831 10.9651 17.1557 11.0649 17.1407C11.1273 17.1307 11.1922 17.1257 11.2371 17.1257C11.6339 17.1257 11.9832 17.3354 12.1779 17.6523C12.2053 17.6947 12.2328 17.7621 12.2577 17.8245C12.2977 17.9243 12.3226 18.0291 12.3401 18.1364C12.4374 18.7079 12.934 19.1421 13.5355 19.1421C13.6877 19.1421 13.8349 19.1122 13.9697 19.0623C14.082 19.0198 14.1993 18.9899 14.319 18.9724C14.3615 18.9649 14.4039 18.9624 14.4363 18.9624C14.878 18.9624 15.2574 19.222 15.4345 19.5963C15.4545 19.6387 15.4745 19.7036 15.4919 19.7635C15.5119 19.8309 15.5244 19.9008 15.5369 19.9706C15.6317 20.5446 16.1308 20.9838 16.7347 20.9838C17.4334 20.9838 17.9949 20.3924 17.945 19.6837C17.9051 19.0997 17.4434 18.6256 16.8645 18.5632M7.13445 4.42357C7.80325 4.42357 8.34727 3.87954 8.34727 3.21075C8.34727 2.54195 7.80325 1.99792 7.13445 1.99792C6.46565 1.99792 5.92163 2.54195 5.92163 3.21075C5.92163 3.87954 6.46565 4.42357 7.13445 4.42357Z" fill="#FF9800"/>
+        <path d="M0.740546 14.9748C1.13983 14.9748 1.46425 14.6454 1.46425 14.2411C1.46425 13.8368 1.13983 13.5074 0.740546 13.5074C0.341263 13.5074 0.0168457 13.8368 0.0168457 14.2411C0.0168457 14.6454 0.341263 14.9748 0.740546 14.9748ZM0.740546 11.2989C1.13983 11.2989 1.46425 10.9695 1.46425 10.5652C1.46425 10.1609 1.13983 9.83154 0.740546 9.83154C0.341263 9.83154 0.0168457 10.1609 0.0168457 10.5652C0.0168457 10.9695 0.341263 11.2989 0.740546 11.2989ZM0.740546 7.623C1.13983 7.623 1.46425 7.2936 1.46425 6.88932C1.46425 6.48505 1.13983 6.15564 0.740546 6.15564C0.341263 6.15564 0.0168457 6.48505 0.0168457 6.88932C0.0168457 7.2936 0.341263 7.623 0.740546 7.623ZM10.3308 22.7009C10.3034 22.7009 10.0788 22.7159 9.99642 22.7159C9.07807 22.7159 8.28449 22.2093 7.88521 21.4656C7.85527 21.4107 7.78789 21.286 7.78789 21.286C7.67309 21.0364 7.42354 20.8617 7.13406 20.8617C7.10911 20.8617 6.887 20.8842 6.79717 20.8842C5.91126 20.8842 5.14014 20.41 4.72838 19.7088C4.67847 19.6239 4.58614 19.4368 4.58614 19.4368C4.46885 19.1922 4.22429 19.0225 3.9373 19.0225C3.91734 19.0225 3.68526 19.0425 3.58793 19.0425C2.6596 19.0425 1.85854 18.5234 1.46425 17.7673C1.44428 17.7298 1.42681 17.6924 1.41184 17.6525C1.30703 17.378 1.04749 17.1833 0.740546 17.1833C0.341263 17.1833 0.0168457 17.5127 0.0168457 17.917C0.0168457 18.3213 0.341263 18.6507 0.740546 18.6507C0.772987 18.6507 1.00257 18.6332 1.08243 18.6332C1.92592 18.6332 2.66708 19.0625 3.08883 19.7088C3.1587 19.8161 3.27599 20.0507 3.27599 20.0507C3.38829 20.3077 3.64034 20.4874 3.9373 20.4874C3.96475 20.4874 4.19185 20.4749 4.2742 20.4749C5.17258 20.4749 5.95119 20.959 6.35795 21.6753C6.39788 21.7451 6.48024 21.8999 6.48024 21.8999C6.59503 22.1519 6.84458 22.3266 7.13656 22.3266C7.16151 22.3266 7.38611 22.3116 7.47096 22.3116C8.34688 22.3116 9.11301 22.7733 9.52726 23.4621C9.58216 23.5519 9.68198 23.7515 9.68198 23.7515C9.79927 23.9961 10.0438 24.1683 10.3308 24.1683C10.7301 24.1683 11.0545 23.8389 11.0545 23.4346C11.0545 23.0303 10.7301 22.7009 10.3308 22.7009Z" fill="#FF9800"/>
+        <path d="M10.331 2.57725C10.9998 2.57725 11.5438 2.03323 11.5438 1.36443C11.5438 0.695634 10.9998 0.151611 10.331 0.151611C9.66219 0.151611 9.11816 0.695634 9.11816 1.36443C9.11816 2.03323 9.66219 2.57725 10.331 2.57725Z" fill="#FF6633"/>
+        <path d="M10.331 6.25548C10.9998 6.25548 11.5438 5.71145 11.5438 5.04266C11.5438 4.37386 10.9998 3.82983 10.331 3.82983C9.66219 3.82983 9.11816 4.37386 9.11816 5.04266C9.11816 5.71145 9.66219 6.25548 10.331 6.25548Z" fill="#FF6633"/>
+        <path d="M10.331 9.9315C10.9998 9.9315 11.5438 9.38748 11.5438 8.71868C11.5438 8.04988 10.9998 7.50586 10.331 7.50586C9.66219 7.50586 9.11816 8.04988 9.11816 8.71868C9.11816 9.38748 9.66219 9.9315 10.331 9.9315Z" fill="#FF6633"/>
+        <path d="M10.331 13.6074C10.9998 13.6074 11.5438 13.0634 11.5438 12.3946C11.5438 11.7258 10.9998 11.1818 10.331 11.1818C9.66219 11.1818 9.11816 11.7258 9.11816 12.3946C9.11816 13.0634 9.66219 13.6074 10.331 13.6074Z" fill="#FF6633"/>
+        <path d="M13.5275 4.41624C14.1963 4.41624 14.7403 3.87222 14.7403 3.20342C14.7403 2.53462 14.1963 1.9906 13.5275 1.9906C12.8587 1.9906 12.3147 2.53462 12.3147 3.20342C12.3147 3.87222 12.8587 4.41624 13.5275 4.41624Z" fill="#FF6633"/>
+        <path d="M13.5275 8.09215C14.1963 8.09215 14.7403 7.54812 14.7403 6.87932C14.7403 6.21053 14.1963 5.6665 13.5275 5.6665C12.8587 5.6665 12.3147 6.21053 12.3147 6.87932C12.3147 7.54812 12.8587 8.09215 13.5275 8.09215Z" fill="#FF6633"/>
+        <path d="M13.5275 11.7706C14.1963 11.7706 14.7403 11.2266 14.7403 10.5578C14.7403 9.88899 14.1963 9.34497 13.5275 9.34497C12.8587 9.34497 12.3147 9.88899 12.3147 10.5578C12.3147 11.2266 12.8587 11.7706 13.5275 11.7706Z" fill="#FF6633"/>
+        <path d="M13.5275 15.4465C14.1963 15.4465 14.7403 14.9025 14.7403 14.2337C14.7403 13.5649 14.1963 13.0209 13.5275 13.0209C12.8587 13.0209 12.3147 13.5649 12.3147 14.2337C12.3147 14.9025 12.8587 15.4465 13.5275 15.4465Z" fill="#FF6633"/>
+        <path d="M16.727 6.25548C17.3958 6.25548 17.9398 5.71145 17.9398 5.04266C17.9398 4.37386 17.3958 3.82983 16.727 3.82983C16.0582 3.82983 15.5142 4.37386 15.5142 5.04266C15.5142 5.71145 16.0582 6.25548 16.727 6.25548Z" fill="#FF6633"/>
+        <path d="M16.727 9.9315C17.3958 9.9315 17.9398 9.38748 17.9398 8.71868C17.9398 8.04988 17.3958 7.50586 16.727 7.50586C16.0582 7.50586 15.5142 8.04988 15.5142 8.71868C15.5142 9.38748 16.0582 9.9315 16.727 9.9315Z" fill="#FF6633"/>
+        <path d="M16.727 13.6074C17.3958 13.6074 17.9398 13.0634 17.9398 12.3946C17.9398 11.7258 17.3958 11.1818 16.727 11.1818C16.0582 11.1818 15.5142 11.7258 15.5142 12.3946C15.5142 13.0634 16.0582 13.6074 16.727 13.6074Z" fill="#FF6633"/>
+        <path d="M16.727 17.2856C17.3958 17.2856 17.9398 16.7416 17.9398 16.0728C17.9398 15.404 17.3958 14.86 16.727 14.86C16.0582 14.86 15.5142 15.404 15.5142 16.0728C15.5142 16.7416 16.0582 17.2856 16.727 17.2856Z" fill="#FF6633"/>
+        <path d="M19.9235 8.09215C20.5923 8.09215 21.1363 7.54812 21.1363 6.87932C21.1363 6.21053 20.5923 5.6665 19.9235 5.6665C19.2547 5.6665 18.7107 6.21053 18.7107 6.87932C18.7107 7.54812 19.2547 8.09215 19.9235 8.09215Z" fill="#FF6633"/>
+        <path d="M19.9235 11.7706C20.5923 11.7706 21.1363 11.2266 21.1363 10.5578C21.1363 9.88899 20.5923 9.34497 19.9235 9.34497C19.2547 9.34497 18.7107 9.88899 18.7107 10.5578C18.7107 11.2266 19.2547 11.7706 19.9235 11.7706Z" fill="#FF6633"/>
+        <path d="M19.9235 15.4465C20.5923 15.4465 21.1363 14.9025 21.1363 14.2337C21.1363 13.5649 20.5923 13.0209 19.9235 13.0209C19.2547 13.0209 18.7107 13.5649 18.7107 14.2337C18.7107 14.9025 19.2547 15.4465 19.9235 15.4465Z" fill="#FF6633"/>
+        <path d="M19.9235 19.1223C20.5923 19.1223 21.1363 18.5783 21.1363 17.9095C21.1363 17.2407 20.5923 16.6967 19.9235 16.6967C19.2547 16.6967 18.7107 17.2407 18.7107 17.9095C18.7107 18.5783 19.2547 19.1223 19.9235 19.1223Z" fill="#FF6633"/>
+        <path d="M81.6599 11.0107H78.6229C77.8218 11.0107 77.168 10.3594 77.168 9.55585C77.168 8.75229 77.8193 8.10096 78.6229 8.10096H81.9968C82.4485 8.10096 82.8179 7.73163 82.8179 7.27994C82.8179 6.82825 82.4485 6.45891 81.9968 6.45891H78.6229C76.916 6.45891 75.526 7.84892 75.526 9.55585C75.526 11.2628 76.916 12.6528 78.6229 12.6528H81.6599C82.6557 12.6528 83.4667 13.4638 83.4667 14.4595C83.4667 15.4553 82.6557 16.2663 81.6599 16.2663H76.347C75.8953 16.2663 75.526 16.6331 75.526 17.0873C75.526 17.5415 75.8928 17.9083 76.347 17.9083H81.6599C83.5615 17.9083 85.1087 16.3611 85.1087 14.462C85.1087 12.5629 83.5615 11.0132 81.6599 11.0132V11.0107ZM60.3507 8.28813H63.2031C63.6548 8.28813 64.0241 7.91879 64.0241 7.4671C64.0241 7.01541 63.6573 6.64608 63.2031 6.64608H60.3507C57.2463 6.64608 54.7208 9.17154 54.7208 12.276C54.7208 15.3804 57.2463 17.9058 60.3507 17.9058H63.2031C63.6548 17.9058 64.0241 17.5365 64.0241 17.0848C64.0241 16.6331 63.6573 16.2638 63.2031 16.2638H60.3507C58.1522 16.2638 56.3629 14.4745 56.3629 12.276C56.3629 10.0774 58.1522 8.28813 60.3507 8.28813ZM70.1356 12.1337L74.4579 7.81148C74.7773 7.49206 74.7773 6.97049 74.4579 6.65107C74.2982 6.49136 74.0885 6.4115 73.8764 6.4115C73.6643 6.4115 73.4572 6.49136 73.295 6.65107L68.3938 11.5523C68.0743 11.8717 68.0743 12.3933 68.3938 12.7127L73.3424 17.6613C73.6518 17.9707 74.1934 17.9707 74.5028 17.6613C74.8222 17.3419 74.8222 16.8203 74.5028 16.5009L70.1331 12.1312L70.1356 12.1337ZM108.09 8.07351H110.8V17.0823C110.8 17.534 111.169 17.9034 111.621 17.9034C112.073 17.9034 112.442 17.534 112.442 17.0823V8.07351H115.152C115.604 8.07351 115.973 7.70418 115.973 7.25249C115.973 6.8008 115.604 6.43146 115.152 6.43146H108.09C107.638 6.43146 107.269 6.8008 107.269 7.25249C107.269 7.70418 107.636 8.07351 108.09 8.07351ZM33.2744 11.0082H30.2373C29.4363 11.0082 28.7824 10.3569 28.7824 9.55335C28.7824 8.7498 29.4338 8.09847 30.2373 8.09847H33.6138C34.0654 8.09847 34.4348 7.72913 34.4348 7.27744C34.4348 6.82575 34.0654 6.45642 33.6138 6.45642H30.2373C28.5304 6.45642 27.1404 7.84642 27.1404 9.55335C27.1404 11.2603 28.5304 12.6503 30.2373 12.6503H33.2744C34.2701 12.6503 35.0811 13.4613 35.0811 14.457C35.0811 15.4528 34.2701 16.2638 33.2744 16.2638H27.9614C27.5097 16.2638 27.1404 16.6306 27.1404 17.0848C27.1404 17.539 27.5097 17.9058 27.9614 17.9058H33.2744C35.1759 17.9058 36.7232 16.3586 36.7232 14.4595C36.7232 12.5605 35.1759 11.0107 33.2744 11.0107V11.0082ZM45.9466 7.25249C45.9466 6.8008 45.5773 6.43146 45.1256 6.43146H36.4462C35.9945 6.43146 35.6251 6.8008 35.6251 7.25249C35.6251 7.70418 35.992 8.07351 36.4462 8.07351H38.7121V17.0823C38.7121 17.534 39.0814 17.9034 39.5331 17.9034C39.9848 17.9034 40.3541 17.534 40.3541 17.0823V8.07351H45.1256C45.5773 8.07351 45.9466 7.70418 45.9466 7.25249ZM52.1904 6.55624L52.1579 6.56872L52.1255 6.58618C52.0257 6.6336 51.9508 6.68351 51.8884 6.7459L42.131 16.5034C41.8115 16.8228 41.8115 17.3444 42.131 17.6638C42.4404 17.9732 42.9819 17.9732 43.2914 17.6638L51.6588 9.29632L51.6663 16.9451C51.6663 17.3968 52.0357 17.7636 52.4874 17.7636C52.9415 17.7636 53.3084 17.3943 53.3084 16.9426L53.2984 7.31987C53.2984 6.77335 52.7619 6.33913 52.1904 6.55624ZM66.2302 6.49884C65.7785 6.49884 65.4091 6.86568 65.4091 7.31987L65.3992 16.9426C65.3992 17.3943 65.766 17.7636 66.2177 17.7636C66.6719 17.7636 67.0387 17.3968 67.0387 16.9451L67.0487 7.32236C67.0487 7.10276 66.9638 6.89812 66.8091 6.74091C66.6544 6.58619 66.4473 6.50134 66.2302 6.49884ZM101.978 6.42647C98.8141 6.42647 96.2388 9.00185 96.2388 12.1637C96.2388 15.3255 98.8141 17.9009 101.978 17.9009C105.143 17.9009 107.716 15.328 107.716 12.1637C107.716 8.99935 105.143 6.42647 101.978 6.42647ZM101.978 16.2613C99.72 16.2613 97.8808 14.4246 97.8808 12.1637C97.8808 9.90273 99.72 8.06603 101.978 8.06603C104.237 8.06603 106.076 9.90273 106.076 12.1637C106.076 14.4246 104.239 16.2613 101.978 16.2613ZM90.7361 6.45392H87.0053C86.5537 6.45392 86.1843 6.82326 86.1843 7.27495V17.0798C86.1843 17.5315 86.5537 17.9009 87.0053 17.9009C87.457 17.9009 87.8264 17.5315 87.8264 17.0798V15.293H90.7611C93.1718 15.293 95.1557 13.3116 95.1557 10.876C95.1557 8.44035 93.1743 6.45642 90.7361 6.45642V6.45392ZM90.7536 13.651H87.8264V8.09597H90.7361C92.2684 8.09597 93.5136 9.34124 93.5136 10.8735C93.5136 12.4057 92.2759 13.641 90.7536 13.651Z" fill={theme.color.light.contrastText} />
+      </g>
+      <path fillRule="evenodd" clipRule="evenodd" d="M136.162 10.9818H139.21C141.121 10.9818 142.68 12.5409 142.668 14.44C142.668 16.3391 141.121 17.8982 139.21 17.8982H133.876C133.431 17.8982 133.055 17.5348 133.055 17.0776C133.055 16.6321 133.419 16.257 133.876 16.257H139.21C140.218 16.257 141.027 15.4364 141.027 14.44C141.027 13.4318 140.206 12.623 139.21 12.623H136.162C134.45 12.623 133.055 11.228 133.055 9.51644C133.055 7.80492 134.45 6.40991 136.162 6.40991H139.55C139.995 6.40991 140.37 6.77332 140.37 7.2305C140.37 7.67597 140.007 8.0511 139.55 8.0511H136.162C135.353 8.0511 134.697 8.70757 134.697 9.51644C134.697 10.3253 135.353 10.9818 136.162 10.9818ZM130.488 8.25044H127.628C125.424 8.25044 123.63 10.044 123.619 12.2596C123.619 14.4752 125.424 16.2688 127.628 16.2688H130.488C130.934 16.2688 131.309 16.6322 131.309 17.0894C131.309 17.5348 130.945 17.91 130.488 17.91H127.628C124.51 17.91 121.978 15.3779 121.978 12.2596C121.978 9.14137 124.51 6.60925 127.628 6.60925H130.488C130.934 6.60925 131.309 6.98438 131.309 7.42984C131.309 7.87531 130.945 8.25044 130.488 8.25044Z" fill="#C44100"/>
+      <defs>
+        <clipPath id="clip0_7310_17825">
+          <rect width="115.956" height="24.0168" fill="white" transform="translate(0.0168457 0.151489)"/>
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}