@botonic/react 0.36.0-alpha.0 → 0.36.0

package/src/webchat/components/opened-persistent-menu.jsx

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react'
 import styled from 'styled-components'
 
-import { Button } from '../../components/button'
+import { Button } from '../../components/button/index'
 import { ROLES, WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../context'
 import { useComponentVisible } from '../hooks'
 
 const ButtonsContainer = styled.div`
@@ -18,8 +18,7 @@ export const OpenedPersistentMenu = ({ onClick, options, borderRadius }) => {
   const { ref, isComponentVisible } = useComponentVisible(true, onClick)
   const { getThemeProperty } = useContext(WebchatContext)
   const CustomPersistentMenu = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.customPersistentMenu,
-    undefined
+    WEBCHAT.CUSTOM_PROPERTIES.customPersistentMenu
   )
   let closeLabel = 'Cancel'
   try {

package/src/webchat/{actions.ts → context/actions.ts}

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 export enum WebchatAction {
   ADD_MESSAGE = 'addMessage',
   ADD_MESSAGE_COMPONENT = 'addMessageComponent',
@@ -23,4 +24,7 @@ export enum WebchatAction {
   UPDATE_THEME = 'updateTheme',
   UPDATE_TYPING = 'updateTyping',
   UPDATE_WEBVIEW = 'updateWebview',
+  REMOVE_REPLIES = 'removeReplies',
+  REMOVE_WEBVIEW = 'removeWebview',
+  SET_IS_INPUT_FOCUSED = 'setIsInputFocused',
 }

package/src/webchat/context/index.tsx

@@ -0,0 +1,82 @@
+import { createContext } from 'react'
+
+import { WebchatContextProps, WebchatState } from './types'
+
+export { WebchatState } from './types'
+export { useWebchat } from './use-webchat'
+
+export const WebchatContext = createContext<WebchatContextProps>({
+  addMessage: () => {
+    return
+  },
+  getThemeProperty: () => {
+    return
+  }, // used to retrieve a specific property of the theme defined by the developer in his 'webchat/index.js'
+  closeWebview: async () => {
+    return
+  },
+  openWebview: () => {
+    return
+  },
+  resolveCase: () => {
+    return
+  },
+  resetUnreadMessages: () => {
+    return
+  },
+  setIsInputFocused: () => {
+    return
+  },
+  setLastMessageVisible: () => {
+    return
+  },
+  sendAttachment: async () => {
+    return
+  },
+  sendInput: async () => {
+    return
+  },
+  sendPayload: async () => {
+    return
+  },
+  sendText: async () => {
+    return
+  },
+  toggleCoverComponent: () => {
+    return
+  },
+  toggleWebchat: () => {
+    return
+  },
+  toggleEmojiPicker: () => {
+    return
+  },
+  togglePersistentMenu: () => {
+    return
+  },
+  updateLatestInput: () => {
+    return
+  },
+  updateMessage: () => {
+    return
+  },
+  updateReplies: () => {
+    return
+  },
+  updateUser: () => {
+    return
+  },
+  updateWebchatDevSettings: () => {
+    return
+  },
+  webchatState: {} as WebchatState,
+  trackEvent: async () => {
+    return
+  },
+  webchatContainerRef: { current: null },
+  chatAreaRef: { current: null },
+  inputPanelRef: { current: null },
+  headerRef: { current: null },
+  scrollableMessagesListRef: { current: null },
+  repliesRef: { current: null },
+})

package/src/webchat/{messages-reducer.ts → context/messages-reducer.ts}

@@ -1,6 +1,6 @@
-import { SENDERS } from '../index-types'
+import { SENDERS } from '../../index-types'
 import { WebchatAction } from './actions'
-import { WebchatState } from './index-types'
+import { WebchatState } from './types'
 
 export const messagesReducer = (
   state: WebchatState,
@@ -15,6 +15,8 @@ export const messagesReducer = (
       return updateMessageReducer(state, action)
     case WebchatAction.UPDATE_REPLIES:
       return { ...state, replies: action.payload }
+    case WebchatAction.REMOVE_REPLIES:
+      return { ...state, replies: undefined }
     case WebchatAction.CLEAR_MESSAGES:
       return {
         ...state,

package/src/webchat/context/types.ts

@@ -0,0 +1,91 @@
+import { Input as CoreInput, Session as CoreSession } from '@botonic/core'
+
+import { Reply, WebchatSettingsProps, Webview } from '../../components'
+import { CloseWebviewOptions } from '../../contexts'
+import { TrackEventFunction, WebchatMessage } from '../../index-types'
+import { WebchatTheme } from '../theme/types'
+
+export interface ErrorMessage {
+  message?: string
+}
+
+export interface DevSettings {
+  keepSessionOnReload?: boolean
+  showSessionView?: boolean
+}
+
+export interface WebchatState {
+  messagesJSON: any[]
+  messagesComponents: any[]
+  replies?: (typeof Reply)[]
+  latestInput: Partial<CoreInput>
+  typing: boolean
+  webview: Webview | null
+  webviewParams: null
+  session: Partial<CoreSession>
+  lastRoutePath?: string
+  handoff: boolean
+  theme: WebchatTheme
+  themeUpdates: Partial<WebchatTheme>
+  error: ErrorMessage
+  online: boolean
+  devSettings: DevSettings
+  isWebchatOpen: boolean
+  isEmojiPickerOpen: boolean
+  isPersistentMenuOpen: boolean
+  isCoverComponentOpen: boolean
+  isCustomComponentRendered: boolean
+  lastMessageUpdate?: string
+  currentAttachment?: File
+  numUnreadMessages: number
+  isLastMessageVisible: boolean
+  isInputFocused: boolean
+}
+
+// ClientInput: type for sendInput and updateLatestInput function without message_id and bot_interaction_id because backend set this values
+export type ClientInput = Omit<CoreInput, 'message_id' | 'bot_interaction_id'>
+// ClientSession: type for session in frontend when webchat is deployed
+export type ClientSession = {
+  user: ClientUser
+}
+// ClientUser: type for user in frontend when webchat is deployed
+export type ClientUser = {
+  id: string
+  name: string
+  locale: string
+  country: string
+  system_locale?: string
+  extra_data?: Record<string, any>
+}
+
+export interface WebchatContextProps {
+  addMessage: (message: WebchatMessage) => void
+  getThemeProperty: (property: string, defaultValue?: any) => any
+  closeWebview: (options?: CloseWebviewOptions) => Promise<void>
+  openWebview: (webviewComponent: Webview, params?: any) => void
+  resetUnreadMessages: () => void
+  resolveCase: () => void
+  sendAttachment: (attachment: File) => Promise<void>
+  sendInput: (input: ClientInput) => Promise<void>
+  sendPayload: (payload: string) => Promise<void>
+  sendText: (text: string, payload?: string) => Promise<void>
+  setIsInputFocused: (isInputFocused: boolean) => void
+  setLastMessageVisible: (isLastMessageVisible: boolean) => void
+  toggleWebchat: (toggle: boolean) => void
+  toggleEmojiPicker: (toggle: boolean) => void
+  togglePersistentMenu: (toggle: boolean) => void
+  toggleCoverComponent: (toggle: boolean) => void
+  updateLatestInput: (input: ClientInput) => void
+  updateMessage: (message: WebchatMessage) => void
+  updateReplies: (replies: (typeof Reply)[]) => void
+  updateUser: (user: ClientUser) => void
+  updateWebchatDevSettings: (settings: WebchatSettingsProps) => void
+  trackEvent?: TrackEventFunction
+  webchatState: WebchatState
+  webchatContainerRef: React.MutableRefObject<HTMLDivElement | null>
+  chatAreaRef: React.MutableRefObject<HTMLDivElement | null>
+  inputPanelRef: React.MutableRefObject<HTMLDivElement | null>
+  headerRef: React.MutableRefObject<HTMLDivElement | null>
+  scrollableMessagesListRef: React.MutableRefObject<HTMLDivElement | null>
+  repliesRef: React.MutableRefObject<HTMLDivElement | null>
+}

package/src/webchat/{hooks → context}/use-webchat.ts

@@ -1,58 +1,92 @@
-import { Input, Session } from '@botonic/core'
+import { Session } from '@botonic/core'
 import { useReducer, useRef } from 'react'
 
-import { ThemeProps, Webview } from '../../components/index-types'
-import { COLORS, WEBCHAT } from '../../constants'
-import { ClientInput, WebchatMessage } from '../../index-types'
-import { WebchatAction } from '../actions'
-import { DevSettings, ErrorMessage, WebchatState } from '../index-types'
-import { webchatReducer } from '../webchat-reducer'
-
-export const webchatInitialState: WebchatState = {
-  width: WEBCHAT.DEFAULTS.WIDTH,
-  height: WEBCHAT.DEFAULTS.HEIGHT,
-  messagesJSON: [],
-  messagesComponents: [],
-  replies: [],
-  latestInput: {},
-  typing: false,
-  webview: null,
-  webviewParams: null,
-  session: { user: undefined },
-  lastRoutePath: null,
-  handoff: false,
-  theme: {
-    headerTitle: WEBCHAT.DEFAULTS.TITLE,
-    brandColor: COLORS.BOTONIC_BLUE,
-    brandImage: WEBCHAT.DEFAULTS.LOGO,
-    triggerButtonImage: undefined,
-    textPlaceholder: WEBCHAT.DEFAULTS.PLACEHOLDER,
-    style: {
-      fontFamily: WEBCHAT.DEFAULTS.FONT_FAMILY,
-    },
-  },
-  themeUpdates: {},
-  error: {},
-  online: true,
-  devSettings: { keepSessionOnReload: false },
-  isWebchatOpen: false,
-  isEmojiPickerOpen: false,
-  isPersistentMenuOpen: false,
-  isCoverComponentOpen: false,
-  isCustomComponentRendered: false,
-  lastMessageUpdate: undefined,
-  currentAttachment: undefined,
-  numUnreadMessages: 0,
-  isLastMessageVisible: true,
+import { Reply } from '../../components'
+import { Webview } from '../../components/index-types'
+import { WebchatMessage } from '../../index-types'
+import { defaultTheme } from '../theme/default-theme'
+import { WebchatTheme } from '../theme/types'
+import { WebchatAction } from './actions'
+import { ClientInput, DevSettings, ErrorMessage, WebchatState } from './types'
+import { webchatReducer } from './webchat-reducer'
+
+function getWebchatInitialState(initialTheme: WebchatTheme): WebchatState {
+  return {
+    replies: [],
+    messagesJSON: [],
+    messagesComponents: [],
+    latestInput: {},
+    typing: false,
+    webview: null,
+    webviewParams: null,
+    session: { user: undefined },
+    lastRoutePath: undefined,
+    handoff: false,
+    theme: initialTheme,
+    themeUpdates: {},
+    error: {},
+    online: true,
+    devSettings: { keepSessionOnReload: false },
+    isWebchatOpen: false,
+    isEmojiPickerOpen: false,
+    isPersistentMenuOpen: false,
+    isCoverComponentOpen: false,
+    isCustomComponentRendered: false,
+    lastMessageUpdate: undefined,
+    currentAttachment: undefined,
+    numUnreadMessages: 0,
+    isLastMessageVisible: true,
+    isInputFocused: false,
+  }
 }
 
-export function useWebchat() {
+export interface UseWebchat {
+  addMessage: (message: WebchatMessage) => void
+  addMessageComponent: (message: { props: WebchatMessage }) => void
+  clearMessages: () => void
+  doRenderCustomComponent: (toggle: boolean) => void
+  resetUnreadMessages: () => void
+  setCurrentAttachment: (attachment?: File) => void
+  setError: (error?: ErrorMessage) => void
+  setIsInputFocused: (isInputFocused: boolean) => void
+  setLastMessageVisible: (isLastMessageVisible: boolean) => void
+  setOnline: (online: boolean) => void
+  toggleCoverComponent: (toggle: boolean) => void
+  toggleEmojiPicker: (toggle: boolean) => void
+  togglePersistentMenu: (toggle: boolean) => void
+  toggleWebchat: (toggle: boolean) => void
+  updateDevSettings: (settings: DevSettings) => void
+  updateHandoff: (handoff: boolean) => void
+  updateLastMessageDate: (date: string) => void
+  updateLastRoutePath: (path: string) => void
+  updateLatestInput: (input: ClientInput) => void
+  updateMessage: (message: WebchatMessage) => void
+  updateReplies: (replies: (typeof Reply)[]) => void
+  updateSession: (session: Partial<Session>) => void
+  updateTheme: (theme: WebchatTheme, themeUpdates?: WebchatTheme) => void
+  updateTyping: (typing: boolean) => void
+  updateWebview: (webview: Webview, params: Record<string, string>) => void
+  removeReplies: () => void
+  removeWebview: () => void
+  webchatState: WebchatState
+  webchatContainerRef: React.MutableRefObject<HTMLDivElement | null>
+  headerRef: React.MutableRefObject<HTMLDivElement | null>
+  chatAreaRef: React.MutableRefObject<HTMLDivElement | null>
+  scrollableMessagesListRef: React.MutableRefObject<HTMLDivElement | null>
+  repliesRef: React.MutableRefObject<HTMLDivElement | null>
+  inputPanelRef: React.MutableRefObject<HTMLDivElement | null>
+}
+
+export function useWebchat(theme?: WebchatTheme): UseWebchat {
+  const initialTheme = theme || defaultTheme
+  const webchatInitialState = getWebchatInitialState(initialTheme)
+
   const [webchatState, webchatDispatch] = useReducer(
     webchatReducer,
     webchatInitialState
   )
 
-  const webchatRef = useRef<HTMLDivElement | null>(null)
+  const webchatContainerRef = useRef<HTMLDivElement | null>(null)
   const chatAreaRef = useRef<HTMLDivElement | null>(null)
   const inputPanelRef = useRef<HTMLDivElement | null>(null)
   const headerRef = useRef<HTMLDivElement | null>(null)
@@ -71,9 +105,12 @@ export function useWebchat() {
   const updateMessage = (message: WebchatMessage) =>
     webchatDispatch({ type: WebchatAction.UPDATE_MESSAGE, payload: message })
 
-  const updateReplies = replies =>
+  const updateReplies = (replies: (typeof Reply)[]) =>
     webchatDispatch({ type: WebchatAction.UPDATE_REPLIES, payload: replies })
 
+  const removeReplies = () =>
+    webchatDispatch({ type: WebchatAction.REMOVE_REPLIES, payload: [] })
+
   const updateLatestInput = (input: ClientInput) =>
     webchatDispatch({ type: WebchatAction.UPDATE_LATEST_INPUT, payload: input })
 
@@ -86,7 +123,12 @@ export function useWebchat() {
       payload: { webview, webviewParams: params },
     })
 
-  const updateSession = (session: Session) => {
+  const removeWebview = () =>
+    webchatDispatch({
+      type: WebchatAction.REMOVE_WEBVIEW,
+    })
+
+  const updateSession = (session: Partial<Session>) => {
     webchatDispatch({
       type: WebchatAction.UPDATE_SESSION,
       payload: session,
@@ -105,7 +147,7 @@ export function useWebchat() {
       payload: handoff,
     })
 
-  const updateTheme = (theme: ThemeProps, themeUpdates?: ThemeProps) => {
+  const updateTheme = (theme: WebchatTheme, themeUpdates?: WebchatTheme) => {
     const payload =
       themeUpdates !== undefined ? { theme, themeUpdates } : { theme }
     webchatDispatch({
@@ -151,7 +193,7 @@ export function useWebchat() {
       payload: toggle,
     })
 
-  const setError = (error: ErrorMessage) =>
+  const setError = (error?: ErrorMessage) =>
     webchatDispatch({
       type: WebchatAction.SET_ERROR,
       payload: error,
@@ -176,7 +218,7 @@ export function useWebchat() {
     })
   }
 
-  const setCurrentAttachment = (attachment: File) => {
+  const setCurrentAttachment = (attachment?: File) => {
     webchatDispatch({
       type: WebchatAction.SET_CURRENT_ATTACHMENT,
       payload: attachment,
@@ -196,6 +238,13 @@ export function useWebchat() {
     })
   }
 
+  const setIsInputFocused = (isInputFocused: boolean) => {
+    webchatDispatch({
+      type: WebchatAction.SET_IS_INPUT_FOCUSED,
+      payload: isInputFocused,
+    })
+  }
+
   return {
     addMessage,
     addMessageComponent,
@@ -204,6 +253,7 @@ export function useWebchat() {
     resetUnreadMessages,
     setCurrentAttachment,
     setError,
+    setIsInputFocused,
     setLastMessageVisible,
     setOnline,
     toggleCoverComponent,
@@ -221,9 +271,10 @@ export function useWebchat() {
     updateTheme,
     updateTyping,
     updateWebview,
-    webchatDispatch,
+    removeReplies,
+    removeWebview,
     webchatState,
-    webchatRef,
+    webchatContainerRef,
     headerRef,
     chatAreaRef,
     scrollableMessagesListRef,

package/src/webchat/{webchat-reducer.ts → context/webchat-reducer.ts}

@@ -1,6 +1,6 @@
 import { WebchatAction } from './actions'
-import { WebchatState } from './index-types'
 import { messagesReducer } from './messages-reducer'
+import { WebchatState } from './types'
 
 // eslint-disable-next-line complexity
 export function webchatReducer(
@@ -10,6 +10,8 @@ export function webchatReducer(
   switch (action.type) {
     case WebchatAction.UPDATE_WEBVIEW:
       return { ...state, ...action.payload }
+    case WebchatAction.REMOVE_WEBVIEW:
+      return { ...state, webview: null, webviewParams: null }
     case WebchatAction.UPDATE_SESSION:
       return { ...state, session: { ...action.payload } }
     case WebchatAction.UPDATE_TYPING:
@@ -48,6 +50,8 @@ export function webchatReducer(
       return { ...state, lastRoutePath: action.payload }
     case WebchatAction.SET_CURRENT_ATTACHMENT:
       return { ...state, currentAttachment: action.payload }
+    case WebchatAction.SET_IS_INPUT_FOCUSED:
+      return { ...state, isInputFocused: action.payload }
     default:
       return messagesReducer(state, action)
   }

package/src/webchat/cover-component/index.tsx

@@ -0,0 +1,31 @@
+import React, { useContext } from 'react'
+
+import { WEBCHAT } from '../../constants'
+import { WebchatContext } from '../context'
+
+interface Props {
+  component: any
+  componentProps: any
+}
+
+export const CoverComponent = ({ component, componentProps }: Props) => {
+  const { getThemeProperty, toggleCoverComponent, webchatState } =
+    useContext(WebchatContext)
+
+  const Cover = component
+
+  const coverComponentProps = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.coverComponentProps,
+    componentProps
+  )
+
+  const closeCoverComponent = () => {
+    toggleCoverComponent(false)
+  }
+
+  if (!Cover || !webchatState.isCoverComponentOpen) {
+    return null
+  }
+
+  return <Cover closeComponent={closeCoverComponent} {...coverComponentProps} />
+}

package/src/webchat/global.d.ts

@@ -0,0 +1,3 @@
+interface Window {
+  _botonicInsertStyles?: HTMLStyleElement[]
+}

package/src/webchat/header/default-header.tsx

@@ -0,0 +1,64 @@
+import React, { useContext } from 'react'
+
+import { ROLES, WEBCHAT } from '../../constants'
+import { Scale } from '../../shared/styles'
+import { resolveImage } from '../../util/environment'
+import { ConditionalWrapper } from '../../util/react'
+import { WebchatContext } from '../../webchat/context'
+import {
+  CloseHeader,
+  HeaderContainer,
+  ImageContainer,
+  Subtitle,
+  TextContainer,
+  Title,
+} from './styles'
+
+export const DefaultHeader = () => {
+  const { getThemeProperty, toggleWebchat } = useContext(WebchatContext)
+
+  const animationsEnabled = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.enableAnimations
+  )
+
+  const headerImage = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.headerImage,
+    getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandImage)
+  )
+
+  const headerTitle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerTitle)
+
+  const headerSubtitle = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.headerSubtitle
+  )
+
+  const handleCloseWebchat = () => {
+    toggleWebchat(false)
+  }
+
+  const color = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandColor)
+
+  return (
+    <HeaderContainer
+      role={ROLES.HEADER}
+      color={color}
+      style={{ ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerStyle) }}
+    >
+      {headerImage && (
+        <ImageContainer>
+          <img src={resolveImage(headerImage)} />
+        </ImageContainer>
+      )}
+      <TextContainer>
+        <Title>{headerTitle}</Title>
+        {headerSubtitle ? <Subtitle>{headerSubtitle}</Subtitle> : null}
+      </TextContainer>
+      <ConditionalWrapper
+        condition={animationsEnabled}
+        wrapper={children => <Scale>{children}</Scale>}
+      >
+        <CloseHeader onClick={handleCloseWebchat}>⨯</CloseHeader>
+      </ConditionalWrapper>
+    </HeaderContainer>
+  )
+}

package/src/webchat/header/index.tsx

@@ -0,0 +1,37 @@
+import React, { ForwardedRef, forwardRef, useContext } from 'react'
+
+import { WEBCHAT } from '../../constants'
+import { WebchatContext } from '../../webchat/context'
+import { BotonicContainerId } from '../constants'
+import { DefaultHeader } from './default-header'
+import { StyledWebchatHeader } from './styles'
+
+export const WebchatHeader = forwardRef(
+  (_, ref: ForwardedRef<HTMLDivElement>) => {
+    const { getThemeProperty, toggleWebchat } = useContext(WebchatContext)
+
+    const handleCloseWebchat = () => {
+      toggleWebchat(false)
+    }
+
+    const CustomHeader = getThemeProperty(
+      WEBCHAT.CUSTOM_PROPERTIES.customHeader
+    )
+
+    if (CustomHeader) {
+      return (
+        <div id={BotonicContainerId.Header} ref={ref}>
+          <CustomHeader onCloseClick={handleCloseWebchat} />
+        </div>
+      )
+    }
+
+    return (
+      <StyledWebchatHeader id={BotonicContainerId.Header} ref={ref}>
+        <DefaultHeader />
+      </StyledWebchatHeader>
+    )
+  }
+)
+
+WebchatHeader.displayName = 'WebchatHeader'

package/src/webchat/header/styles.ts

@@ -0,0 +1,66 @@
+import styled from 'styled-components'
+
+import { COLORS } from '../../constants'
+
+export const HeaderContainer = styled.div`
+  display: flex;
+  background: linear-gradient(
+    90deg,
+    ${COLORS.BLEACHED_CEDAR_PURPLE} 0%,
+    ${props => props.color} 100%
+  );
+  border-radius: ${props => props.theme.header?.style?.borderRadius};
+  z-index: 2;
+  height: inherit;
+
+  @media (max-width: ${props => props.theme.mobileBreakpoint}px) {
+    border-radius: ${props => props.theme.header?.mobileStyle?.borderRadius};
+  }
+`
+
+export const ImageContainer = styled.div`
+  padding: 10px;
+  align-items: center;
+
+  img {
+    width: 32px;
+    border-radius: 50%;
+  }
+`
+
+export const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1 1 auto;
+`
+
+export const Title = styled.div`
+  display: flex;
+  font-family: inherit;
+  font-size: 15px;
+  font-weight: bold;
+  color: ${COLORS.SOLID_WHITE};
+`
+
+export const Subtitle = styled.div`
+  display: flex;
+  font-family: inherit;
+  font-size: 11px;
+  color: ${COLORS.SOLID_WHITE};
+`
+
+export const CloseHeader = styled.div`
+  padding: 0px 16px;
+  cursor: pointer;
+  color: ${COLORS.SOLID_WHITE};
+  font-family: inherit;
+  font-size: 36px;
+`
+
+export const StyledWebchatHeader = styled.div`
+  border-radius: 8px 8px 0px 0px;
+  box-shadow: ${COLORS.PIGEON_POST_BLUE_ALPHA_0_5} 0px 2px 5px;
+  height: 55px;
+  flex: none;
+`